@progress/kendo-angular-conversational-ui 25.1.0-develop.3 → 25.1.0-develop.5

package/fesm2022/progress-kendo-angular-conversational-ui.mjs

@@ -3,11 +3,11 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { InjectionToken, Input, ViewChild, HostBinding, Inject, Directive, Injectable, Optional, forwardRef, EventEmitter, Output, ContentChild, ContentChildren, Component, isDevMode, ElementRef, ViewChildren, HostListener, ViewContainerRef, inject, SkipSelf, signal, ChangeDetectionStrategy, computed, effect, RendererStyleFlags2, NgModule } from '@angular/core';
+import { InjectionToken, signal, Input, ViewChild, HostBinding, Inject, Directive, Injectable, Optional, forwardRef, EventEmitter, effect, afterNextRender, Output, ContentChild, ContentChildren, ChangeDetectionStrategy, Component, computed, isDevMode, ElementRef, ViewChildren, HostListener, ViewContainerRef, inject, SkipSelf, RendererStyleFlags2, NgModule } from '@angular/core';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupComponent, KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
-import { isPresent, normalizeKeys, Keys, focusableSelector, KENDO_WEBMCP_HOST, provideComponentName, guid, getter, isDocumentAvailable, hasObservers, EventsOutsideAngularDirective, closest as closest$1, ResizeSensorComponent, getLicenseMessage, shouldShowValidationUI, isChanged, processCssValue, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isPresent, normalizeKeys, Keys, focusableSelector, KENDO_WEBMCP_HOST, provideComponentName, guid, getter, isDocumentAvailable, hasObservers, EventsOutsideAngularDirective, closest as closest$1, ResizeSensorComponent, processCssValue, getLicenseMessage, shouldShowValidationUI, isChanged, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
 import { NgTemplateOutlet, NgClass, JsonPipe } from '@angular/common';
 import { Subject, Subscription, fromEvent } from 'rxjs';
@@ -17,7 +17,6 @@ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/k
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i2 from '@progress/kendo-angular-buttons';
 import { ButtonComponent, FloatingActionButtonComponent, SpeechToTextButtonComponent, DropDownButtonComponent, KENDO_BUTTONS, ButtonsModule, ChipComponent, ButtonGroupComponent } from '@progress/kendo-angular-buttons';
-import { take, debounceTime } from 'rxjs/operators';
 import * as i5 from '@progress/kendo-angular-layout';
 import { PanelBarComponent, KENDO_CARD, CardComponent, CardBodyComponent, CardActionsComponent } from '@progress/kendo-angular-layout';
 import * as i3 from '@progress/kendo-angular-inputs';
@@ -25,6 +24,7 @@ import { TextAreaComponent, TextAreaSuffixComponent, KENDO_TEXTAREA } from '@pro
 import * as i4 from '@progress/kendo-angular-menu';
 import { ContextMenuComponent, KENDO_CONTEXTMENU } from '@progress/kendo-angular-menu';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { debounceTime } from 'rxjs/operators';
 import { FileSelectComponent, fileSVGGroupIcon, fileGroupClass, getTotalFilesSizeMessage } from '@progress/kendo-angular-upload';
 import * as i1$1 from '@progress/kendo-angular-intl';
 import { ToolBarComponent, ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
@@ -131,23 +131,15 @@ class BaseView {
      * @hidden
      */
     template;
-    constructor(viewType, localization) {
-        this.viewType = viewType;
-        this.localization = localization;
-        if (this.viewType !== 'custom') {
-            this.icon = DEFAULT_ICONS[this.viewType];
-            this.svgIcon = DEFAULT_SVG_ICONS[this.viewType];
-        }
-    }
     /**
      * Sets the text for the Toolbar button of the current view.
      */
     set buttonText(value) {
-        this._buttonText = value;
+        this._buttonText.set(value);
     }
     get buttonText() {
-        return isPresent(this._buttonText) ?
-            this._buttonText :
+        return isPresent(this._buttonText()) ?
+            this._buttonText() :
             this.messageFor(`${this.viewType}View`);
     }
     /**
@@ -155,28 +147,39 @@ class BaseView {
      */
     set icon(value) {
         if (isPresent(value)) {
-            this._icon = value;
+            this._icon.set(value);
         }
         else {
-            this.icon = DEFAULT_ICONS[this.viewType];
+            this._icon.set(DEFAULT_ICONS[this.viewType]);
         }
     }
     get icon() {
-        return this._icon;
+        return this._icon();
     }
     /**
      * Sets the SVG icon for the Toolbar button of the current view.
      */
     set svgIcon(value) {
         if (isPresent(value)) {
-            this._svgIcon = value;
+            this._svgIcon.set(value);
         }
         else {
-            this.svgIcon = DEFAULT_SVG_ICONS[this.viewType];
+            this._svgIcon.set(DEFAULT_SVG_ICONS[this.viewType]);
         }
     }
     get svgIcon() {
-        return this._svgIcon;
+        return this._svgIcon();
+    }
+    _buttonText = signal(undefined, ...(ngDevMode ? [{ debugName: "_buttonText" }] : []));
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    constructor(viewType, localization) {
+        this.viewType = viewType;
+        this.localization = localization;
+        if (this.viewType !== 'custom') {
+            this.icon = DEFAULT_ICONS[this.viewType];
+            this.svgIcon = DEFAULT_SVG_ICONS[this.viewType];
+        }
     }
     /**
      * @hidden
@@ -184,9 +187,6 @@ class BaseView {
     messageFor(text) {
         return this.localization.get(text);
     }
-    _buttonText;
-    _icon;
-    _svgIcon;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: BaseView, deps: [{ token: MY_TOKEN }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: BaseView, isStandalone: true, inputs: { buttonText: "buttonText", icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "class.k-prompt-view": "this.hostClasses" } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0 });
 }
@@ -217,8 +217,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1787036921,
-    version: '25.1.0-develop.3',
+    publishDate: 1787151244,
+    version: '25.1.0-develop.5',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -241,33 +241,49 @@ const STB_DEFAULT_SETTINGS$2 = {
  */
 class AIPromptService {
     aiPrompt;
-    promptValue = '';
-    showOutputRating = false;
+    set promptValue(value) { this._promptValue.set(value); }
+    get promptValue() { return this._promptValue(); }
+    set showOutputRating(value) { this._showOutputRating.set(value); }
+    get showOutputRating() { return this._showOutputRating(); }
+    set promptCommands(value) { this._promptCommands.set(value); }
+    get promptCommands() { return this._promptCommands(); }
+    set promptOutputs(value) { this._promptOutputs.set(value); }
+    get promptOutputs() { return this._promptOutputs(); }
+    set promptSuggestions(value) { this._promptSuggestions.set(value); }
+    get promptSuggestions() { return this._promptSuggestions(); }
+    set textAreaSettings(value) { this._textAreaSettings.set(value); }
+    get textAreaSettings() { return this._textAreaSettings(); }
     requestEvent = new Subject();
     executeEvent = new Subject();
     outputCopyEvent = new Subject();
     outputRatingChangeEvent = new Subject();
-    promptCommands;
-    promptOutputs;
-    promptSuggestions;
-    textAreaSettings;
-    outputTemplate;
-    outputBodyTemplate;
-    _speechToTextButton;
+    set outputTemplate(value) { this._outputTemplate.set(value); }
+    get outputTemplate() { return this._outputTemplate(); }
+    set outputBodyTemplate(value) { this._outputBodyTemplate.set(value); }
+    get outputBodyTemplate() { return this._outputBodyTemplate(); }
     get speechToTextButton() {
-        return this._speechToTextButton;
+        return this._speechToTextButton();
     }
     set speechToTextButton(settings) {
         if (settings === true) {
-            this._speechToTextButton = STB_DEFAULT_SETTINGS$2;
+            this._speechToTextButton.set(STB_DEFAULT_SETTINGS$2);
         }
         else if (settings === false) {
-            this._speechToTextButton = null;
+            this._speechToTextButton.set(null);
         }
         else {
-            this._speechToTextButton = { ...settings };
-        }
-    }
+            this._speechToTextButton.set({ ...settings });
+        }
+    }
+    _promptValue = signal('', ...(ngDevMode ? [{ debugName: "_promptValue" }] : []));
+    _showOutputRating = signal(false, ...(ngDevMode ? [{ debugName: "_showOutputRating" }] : []));
+    _promptCommands = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptCommands" }] : []));
+    _promptOutputs = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptOutputs" }] : []));
+    _promptSuggestions = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptSuggestions" }] : []));
+    _textAreaSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_textAreaSettings" }] : []));
+    _speechToTextButton = signal(null, ...(ngDevMode ? [{ debugName: "_speechToTextButton" }] : []));
+    _outputTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_outputTemplate" }] : []));
+    _outputBodyTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_outputBodyTemplate" }] : []));
     getFlattenPromptCommands(commands = this.promptCommands) {
         let newArr = [];
         commands.forEach(c => {
@@ -442,47 +458,113 @@ let Messages$3 = class Messages extends ComponentMessages {
     /**
      * Sets the Toolbar button text for the **Prompt** view.
      */
-    promptView;
+    set promptView(value) {
+        this._promptView.set(value);
+    }
+    get promptView() {
+        return this._promptView();
+    }
     /**
      * Sets the Toolbar button text for the **Output** view.
      */
-    outputView;
+    set outputView(value) {
+        this._outputView.set(value);
+    }
+    get outputView() {
+        return this._outputView();
+    }
     /**
      * Sets the text for the **Generate** button in the **Prompt** view.
      */
-    generateOutput;
+    set generateOutput(value) {
+        this._generateOutput.set(value);
+    }
+    get generateOutput() {
+        return this._generateOutput();
+    }
     /**
      * Sets the placeholder text for the **Prompt** view text area.
      */
-    promptPlaceholder;
+    set promptPlaceholder(value) {
+        this._promptPlaceholder.set(value);
+    }
+    get promptPlaceholder() {
+        return this._promptPlaceholder();
+    }
     /**
      * Sets the text for the **Copy** button text in each **Output** view card.
      */
-    copyOutput;
+    set copyOutput(value) {
+        this._copyOutput.set(value);
+    }
+    get copyOutput() {
+        return this._copyOutput();
+    }
     /**
      * Sets the **Retry** button text in each **Output** view card.
      */
-    retryGeneration;
+    set retryGeneration(value) {
+        this._retryGeneration.set(value);
+    }
+    get retryGeneration() {
+        return this._retryGeneration();
+    }
     /**
      * Sets the title of each card in the **Output** view.
      */
-    outputTitle;
+    set outputTitle(value) {
+        this._outputTitle.set(value);
+    }
+    get outputTitle() {
+        return this._outputTitle();
+    }
     /**
      * Sets the title of each retry card in the **Output** view.
      */
-    outputRetryTitle;
+    set outputRetryTitle(value) {
+        this._outputRetryTitle.set(value);
+    }
+    get outputRetryTitle() {
+        return this._outputRetryTitle();
+    }
     /**
      * Sets the title of the **Prompt suggestions** button.
      */
-    promptSuggestions;
+    set promptSuggestions(value) {
+        this._promptSuggestions.set(value);
+    }
+    get promptSuggestions() {
+        return this._promptSuggestions();
+    }
     /**
      * Sets the aria-label for the **Speech to Text** button.
      */
-    speechToTextButton;
+    set speechToTextButton(value) {
+        this._speechToTextButton.set(value);
+    }
+    get speechToTextButton() {
+        return this._speechToTextButton();
+    }
     /**
      * Sets the aria-label for the **Toolbar** element.
      */
-    toolbarLabel;
+    set toolbarLabel(value) {
+        this._toolbarLabel.set(value);
+    }
+    get toolbarLabel() {
+        return this._toolbarLabel();
+    }
+    _promptView = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptView" }] : []));
+    _outputView = signal(undefined, ...(ngDevMode ? [{ debugName: "_outputView" }] : []));
+    _generateOutput = signal(undefined, ...(ngDevMode ? [{ debugName: "_generateOutput" }] : []));
+    _promptPlaceholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptPlaceholder" }] : []));
+    _copyOutput = signal(undefined, ...(ngDevMode ? [{ debugName: "_copyOutput" }] : []));
+    _retryGeneration = signal(undefined, ...(ngDevMode ? [{ debugName: "_retryGeneration" }] : []));
+    _outputTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_outputTitle" }] : []));
+    _outputRetryTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_outputRetryTitle" }] : []));
+    _promptSuggestions = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptSuggestions" }] : []));
+    _speechToTextButton = signal(undefined, ...(ngDevMode ? [{ debugName: "_speechToTextButton" }] : []));
+    _toolbarLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_toolbarLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, inputs: { promptView: "promptView", outputView: "outputView", generateOutput: "generateOutput", promptPlaceholder: "promptPlaceholder", copyOutput: "copyOutput", retryGeneration: "retryGeneration", outputTitle: "outputTitle", outputRetryTitle: "outputRetryTitle", promptSuggestions: "promptSuggestions", speechToTextButton: "speechToTextButton", toolbarLabel: "toolbarLabel" }, usesInheritance: true, ngImport: i0 });
 };
@@ -621,17 +703,19 @@ class AIPromptComponent {
     service;
     navigationService;
     ngZone;
+    injector;
     element;
     renderer;
     hostClasses = true;
     get dirAttr() {
         return this.direction;
     }
-    constructor(localization, service, navigationService, ngZone, element, renderer) {
+    constructor(localization, service, navigationService, ngZone, injector, element, renderer) {
         this.localization = localization;
         this.service = service;
         this.navigationService = navigationService;
         this.ngZone = ngZone;
+        this.injector = injector;
         this.element = element;
         this.renderer = renderer;
         validatePackage(packageMetadata);
@@ -664,53 +748,75 @@ class AIPromptComponent {
      * The active view index of the AIPrompt component.
      */
     set activeView(idx) {
-        if (this._activeView !== idx) {
-            this._activeView = idx;
+        if (this._activeView() !== idx) {
+            this._activeView.set(idx);
             if (this.service.promptValue) {
                 this.service.promptValue = '';
             }
         }
     }
     get activeView() {
-        return this._activeView;
+        return this._activeView();
     }
     /**
      * Sets the collection of commands to render in the Command view.
      */
     set promptCommands(value) {
+        this._promptCommands.set(value);
         this.service.promptCommands = value;
     }
+    get promptCommands() {
+        return this._promptCommands();
+    }
     /**
      * Sets the collection of suggestions to render in the Prompt view.
      */
     set promptSuggestions(value) {
+        this._promptSuggestions.set(value);
         this.service.promptSuggestions = value;
     }
+    get promptSuggestions() {
+        return this._promptSuggestions();
+    }
     /**
      * Sets the collection of generated prompt outputs to render in the Output view.
      */
     set promptOutputs(value) {
+        this._promptOutputs.set(value);
         this.service.promptOutputs = value;
     }
+    get promptOutputs() {
+        return this._promptOutputs();
+    }
     /**
      * Specifies whether the rating buttons appear in each Output view card.
      * The rating buttons do not appear by default.
      * @default false
      */
     set showOutputRating(value) {
+        this._showOutputRating.set(value);
         this.service.showOutputRating = value;
     }
+    get showOutputRating() {
+        return this._showOutputRating();
+    }
     /**
      * Specifies whether the Stop generation button appears in the Output view.
      * The Stop generation button does not appear by default.
      * @default false
      */
-    streaming = false;
+    set streaming(value) {
+        this._streaming.set(value);
+    }
+    get streaming() {
+        return this._streaming();
+    }
     /**
      * Sets the settings for the Speech to Text button in the Prompt view
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/aiprompt/configuration#enabling-speech-to-text)).
      */
     set speechToTextButton(settings) {
+        this._speechToTextButton.set(settings);
         if (settings) {
             this.service.speechToTextButton = settings;
         }
@@ -718,27 +824,49 @@ class AIPromptComponent {
             this.service.speechToTextButton = false;
         }
     }
+    get speechToTextButton() {
+        return this._speechToTextButton();
+    }
     /**
      * Sets the settings for the TextArea in the Prompt view
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/aiprompt/configuration#configuring-the-prompt-text-area)).
      */
     set textAreaSettings(settings) {
+        this._textAreaSettings.set(settings);
         this.service.textAreaSettings = settings;
     }
+    get textAreaSettings() {
+        return this._textAreaSettings();
+    }
     /**
      * Sets the SVG icon for the Generate button in the Prompt view.
      */
-    generateButtonSVGIcon = sparklesIcon;
+    set generateButtonSVGIcon(value) {
+        this._generateButtonSVGIcon.set(value);
+    }
+    get generateButtonSVGIcon() {
+        return this._generateButtonSVGIcon();
+    }
     /**
      * Sets the icon for the Generate button in the Prompt view.
      * @default 'sparkles'
      */
-    generateButtonIcon = 'sparkles';
+    set generateButtonIcon(value) {
+        this._generateButtonIcon.set(value);
+    }
+    get generateButtonIcon() {
+        return this._generateButtonIcon();
+    }
     /**
      * Sets the disabled state for the Generate button in the Prompt view.
      * @default false
      */
-    disabledGenerateButton = false;
+    set disabledGenerateButton(value) {
+        this._disabledGenerateButton.set(value);
+    }
+    get disabledGenerateButton() {
+        return this._disabledGenerateButton();
+    }
     /**
      * Fires when the `activeView` property is updated.
      * Use this event for two-way binding of the `activeView` property.
@@ -774,13 +902,6 @@ class AIPromptComponent {
             }
         }));
     }
-    ngOnChanges(changes) {
-        if (changes['streaming'] && changes['streaming'].currentValue === true) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-                this.fabButton?.focus();
-            });
-        }
-    }
     ngAfterContentChecked() {
         if (this.outputTemplate !== this.service.outputTemplate) {
             this.service.outputTemplate = this.outputTemplate;
@@ -792,10 +913,10 @@ class AIPromptComponent {
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
             this.service.aiPrompt = this;
-            this.subs.add(this.service.requestEvent.subscribe(ev => this.promptRequest.emit(ev)));
-            this.subs.add(this.service.executeEvent.subscribe(ev => this.commandExecute.emit(ev)));
-            this.subs.add(this.service.outputCopyEvent.subscribe(ev => this.outputCopy.emit(ev)));
-            this.subs.add(this.service.outputRatingChangeEvent.subscribe(ev => this.outputRatingChange.emit(ev)));
+            this.subs.add(this.service.requestEvent.subscribe(ev => this.ngZone.run(() => this.promptRequest.emit(ev))));
+            this.subs.add(this.service.executeEvent.subscribe(ev => this.ngZone.run(() => this.commandExecute.emit(ev))));
+            this.subs.add(this.service.outputCopyEvent.subscribe(ev => this.ngZone.run(() => this.outputCopy.emit(ev))));
+            this.subs.add(this.service.outputRatingChangeEvent.subscribe(ev => this.ngZone.run(() => this.outputRatingChange.emit(ev))));
         });
     }
     ngOnDestroy() {
@@ -841,7 +962,24 @@ class AIPromptComponent {
      */
     fabAlignment = { vertical: 'bottom', horizontal: 'end' };
     direction;
-    _activeView = 0;
+    _activeView = signal(0, ...(ngDevMode ? [{ debugName: "_activeView" }] : []));
+    _promptCommands = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptCommands" }] : []));
+    _promptSuggestions = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptSuggestions" }] : []));
+    _promptOutputs = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptOutputs" }] : []));
+    _showOutputRating = signal(false, ...(ngDevMode ? [{ debugName: "_showOutputRating" }] : []));
+    _streaming = signal(false, ...(ngDevMode ? [{ debugName: "_streaming" }] : []));
+    _speechToTextButton = signal(undefined, ...(ngDevMode ? [{ debugName: "_speechToTextButton" }] : []));
+    _textAreaSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_textAreaSettings" }] : []));
+    _generateButtonSVGIcon = signal(sparklesIcon, ...(ngDevMode ? [{ debugName: "_generateButtonSVGIcon" }] : []));
+    _generateButtonIcon = signal('sparkles', ...(ngDevMode ? [{ debugName: "_generateButtonIcon" }] : []));
+    _disabledGenerateButton = signal(false, ...(ngDevMode ? [{ debugName: "_disabledGenerateButton" }] : []));
+    streamingEffect = effect(() => {
+        if (this._streaming()) {
+            afterNextRender(() => {
+                this.fabButton?.focus();
+            }, { injector: this.injector });
+        }
+    }, ...(ngDevMode ? [{ debugName: "streamingEffect" }] : []));
     /**
      * @hidden
      */
@@ -875,7 +1013,7 @@ class AIPromptComponent {
         };
         this.promptRequest.emit(eventArgs);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }, { token: ToolbarNavigationService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }, { token: ToolbarNavigationService }, { token: i0.NgZone }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: AIPromptComponent, isStandalone: true, selector: "kendo-aiprompt", inputs: { activeView: "activeView", promptCommands: "promptCommands", promptSuggestions: "promptSuggestions", promptOutputs: "promptOutputs", showOutputRating: "showOutputRating", streaming: "streaming", speechToTextButton: "speechToTextButton", textAreaSettings: "textAreaSettings", generateButtonSVGIcon: "generateButtonSVGIcon", generateButtonIcon: "generateButtonIcon", disabledGenerateButton: "disabledGenerateButton" }, outputs: { activeViewChange: "activeViewChange", promptRequest: "promptRequest", commandExecute: "commandExecute", outputCopy: "outputCopy", outputRatingChange: "outputRatingChange", promptRequestCancel: "promptRequestCancel" }, host: { properties: { "class.k-prompt": "this.hostClasses", "attr.dir": "this.dirAttr" } }, providers: [
             LocalizationService,
             AIPromptService,
@@ -886,7 +1024,7 @@ class AIPromptComponent {
             },
             { provide: KENDO_WEBMCP_HOST, useExisting: forwardRef(() => AIPromptComponent) },
             provideComponentName('aiprompt')
-        ], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "outputTemplate", first: true, predicate: AIPromptOutputTemplateDirective, descendants: true }, { propertyName: "outputBodyTemplate", first: true, predicate: AIPromptOutputBodyTemplateDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], viewQueries: [{ propertyName: "fabButton", first: true, predicate: ["fabButton"], descendants: true }], exportAs: ["kendoAIPrompt"], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "outputTemplate", first: true, predicate: AIPromptOutputTemplateDirective, descendants: true }, { propertyName: "outputBodyTemplate", first: true, predicate: AIPromptOutputBodyTemplateDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], viewQueries: [{ propertyName: "fabButton", first: true, predicate: ["fabButton"], descendants: true }], exportAs: ["kendoAIPrompt"], ngImport: i0, template: `
         <ng-container kendoAIPromptLocalizedMessages
           i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
           promptView="Ask AI"
@@ -974,7 +1112,7 @@ class AIPromptComponent {
             </div>
           </div>
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$4, selector: "[kendoAIPromptLocalizedMessages]" }, { 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"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$4, selector: "[kendoAIPromptLocalizedMessages]" }, { 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"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AIPromptComponent, decorators: [{
             type: Component,
@@ -1082,9 +1220,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         }
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [LocalizedMessagesDirective$4, ButtonComponent, AIPromptToolbarFocusableDirective, NgTemplateOutlet, FloatingActionButtonComponent]
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClasses: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-prompt']
             }], dirAttr: [{
@@ -1160,11 +1299,8 @@ class CommandViewComponent extends BaseView {
     /**
      * @hidden
      */
-    panelBarItems = [];
-    ngOnInit() {
-        if (this.service.promptCommands) {
-            this.panelBarItems = this.getPanelBarItems(this.service.promptCommands);
-        }
+    get items() {
+        return this._items();
     }
     /**
      * @hidden
@@ -1183,6 +1319,10 @@ class CommandViewComponent extends BaseView {
             this.service.executeEvent.next(eventArgs);
         }
     }
+    _items = computed(() => {
+        const commands = this.service.promptCommands;
+        return commands ? this.getPanelBarItems(commands) : [];
+    }, ...(ngDevMode ? [{ debugName: "_items" }] : []));
     getPanelBarItems(commands) {
         return commands.map(c => ({
             title: c.text,
@@ -1199,13 +1339,13 @@ class CommandViewComponent extends BaseView {
             }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #content>
             <kendo-panelbar
-                [items]="panelBarItems"
+                [items]="items"
                 [animate]="false"
                 [selectable]="false"
                 (itemClick)="itemClickHandler($event)"
             ></kendo-panelbar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse", "itemClick"], exportAs: ["kendoPanelbar"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse", "itemClick"], exportAs: ["kendoPanelbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CommandViewComponent, decorators: [{
             type: Component,
@@ -1218,7 +1358,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     template: `
         <ng-template #content>
             <kendo-panelbar
-                [items]="panelBarItems"
+                [items]="items"
                 [animate]="false"
                 [selectable]="false"
                 (itemClick)="itemClickHandler($event)"
@@ -1226,6 +1366,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         </ng-template>
     `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [PanelBarComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }] });
@@ -1296,12 +1437,18 @@ class CustomViewComponent extends BaseView {
     /**
      * Sets the content of the Custom view as a template reference.
      */
-    viewTemplate;
+    set viewTemplate(value) {
+        this._viewTemplate.set(value);
+    }
+    get viewTemplate() {
+        return this._viewTemplate();
+    }
+    _viewTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_viewTemplate" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CustomViewComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: CustomViewComponent, isStandalone: true, selector: "kendo-aiprompt-custom-view", inputs: { viewTemplate: "viewTemplate" }, providers: [{
                 provide: BaseView,
                 useExisting: forwardRef(() => CustomViewComponent)
-            }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+            }], usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: CustomViewComponent, decorators: [{
             type: Component,
@@ -1312,7 +1459,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                             useExisting: forwardRef(() => CustomViewComponent)
                         }],
                     template: ``,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { viewTemplate: [{
                 type: Input
@@ -1331,7 +1479,12 @@ class AIPromptOutputCardComponent {
         return this.titleId;
     }
     ariaKeyShortcuts = 'Enter';
-    promptOutput;
+    set promptOutput(value) {
+        this._promptOutput.set(value);
+    }
+    get promptOutput() {
+        return this._promptOutput();
+    }
     constructor(localization, service) {
         this.localization = localization;
         this.service = service;
@@ -1351,6 +1504,7 @@ class AIPromptOutputCardComponent {
     positiveRatingIcon = thumbUpIcon;
     negativeRatingIcon = thumbDownIcon;
     titleId = `k-output-card-${guid()}`;
+    _promptOutput = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptOutput" }] : []));
     messageFor(text) {
         return this.localization.get(text);
     }
@@ -1456,7 +1610,7 @@ class AIPromptOutputCardComponent {
             </button>
           }
         </div>
-        `, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
             type: Component,
@@ -1510,6 +1664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         </div>
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ButtonComponent, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }], propDecorators: { hostClass: [{
@@ -1578,7 +1733,7 @@ class OutputViewComponent extends BaseView {
             }
           </div>
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: OutputViewComponent, decorators: [{
             type: Component,
@@ -1605,6 +1760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         </ng-template>
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AIPromptOutputCardComponent, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }] });
@@ -1785,7 +1941,7 @@ class PromptViewComponent extends BaseView {
             </div>
           }
         </ng-template>
-        `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator", "value"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { 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"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator", "value"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { 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"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptViewComponent, decorators: [{
             type: Component,
@@ -1879,6 +2035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         </ng-template>
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [TextAreaComponent, ButtonComponent, TextAreaSuffixComponent, SpeechToTextButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }] });
@@ -2607,36 +2764,56 @@ const transformActions = (actions) => {
 class ChatService {
     zone;
     authorId;
-    messageWidthMode;
     messageContextMenuActions = [];
-    calculatedContextMenuActions = [];
     fileActions = [];
-    toggleMessageState = false;
     layoutChangeInProgress = false;
-    reply;
     messages = [];
     repliedToMessages = [];
     chatElement;
     messageElementsMap = new Map();
     messagesContextMenu;
-    activeMessage;
     activeMessageElement;
     selectOnMenuClose = false;
-    active = false;
-    messageFilesLayout = 'vertical';
-    timestampVisibility = 'focus';
-    showUsername = true;
-    showAvatar = true;
-    _speechToTextButton = STB_DEFAULT_SETTINGS$1;
-    _fileSelectButton = FILESELECT_BUTTON_DEFAULT_SETTINGS$1;
-    _sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;
-    _messageBoxSettings = MESSAGE_BOX_SETTINGS;
-    _suggestionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
-    _quickActionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
-    _messageToolbarActions = [];
-    _authorMessageSettings;
-    _receiverMessageSettings;
-    _allowMessageCollapse;
+    get calculatedContextMenuActions() { return this._calculatedContextMenuActions(); }
+    set calculatedContextMenuActions(v) { this._calculatedContextMenuActions.set(v); }
+    get reply() { return this._reply(); }
+    set reply(v) { this._reply.set(v); }
+    get messageWidthMode() { return this._messageWidthMode(); }
+    set messageWidthMode(v) { this._messageWidthMode.set(v); }
+    get toggleMessageState() { return this._toggleMessageState(); }
+    set toggleMessageState(v) { this._toggleMessageState.set(v); }
+    get activeMessage() { return this._activeMessage(); }
+    set activeMessage(v) { this._activeMessage.set(v); }
+    get active() { return this._active(); }
+    set active(v) { this._active.set(v); }
+    get messageFilesLayout() { return this._messageFilesLayout(); }
+    set messageFilesLayout(v) { this._messageFilesLayout.set(v); }
+    get timestampVisibility() { return this._timestampVisibility(); }
+    set timestampVisibility(v) { this._timestampVisibility.set(v); }
+    get showUsername() { return this._showUsername(); }
+    set showUsername(v) { this._showUsername.set(v); }
+    get showAvatar() { return this._showAvatar(); }
+    set showAvatar(v) { this._showAvatar.set(v); }
+    _speechToTextButton = signal(STB_DEFAULT_SETTINGS$1, ...(ngDevMode ? [{ debugName: "_speechToTextButton" }] : []));
+    _fileSelectButton = signal(FILESELECT_BUTTON_DEFAULT_SETTINGS$1, ...(ngDevMode ? [{ debugName: "_fileSelectButton" }] : []));
+    _sendButtonSettings = signal(SEND_BTN_DEFAULT_SETTINGS, ...(ngDevMode ? [{ debugName: "_sendButtonSettings" }] : []));
+    _messageBoxSettings = signal(MESSAGE_BOX_SETTINGS, ...(ngDevMode ? [{ debugName: "_messageBoxSettings" }] : []));
+    _suggestionsLayout = signal(SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS, ...(ngDevMode ? [{ debugName: "_suggestionsLayout" }] : []));
+    _quickActionsLayout = signal(SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS, ...(ngDevMode ? [{ debugName: "_quickActionsLayout" }] : []));
+    _messageToolbarActions = signal([], ...(ngDevMode ? [{ debugName: "_messageToolbarActions" }] : []));
+    _authorMessageSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorMessageSettings" }] : []));
+    _receiverMessageSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_receiverMessageSettings" }] : []));
+    _allowMessageCollapse = signal(undefined, ...(ngDevMode ? [{ debugName: "_allowMessageCollapse" }] : []));
+    _messageWidthMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageWidthMode" }] : []));
+    _toggleMessageState = signal(false, ...(ngDevMode ? [{ debugName: "_toggleMessageState" }] : []));
+    _activeMessage = signal(undefined, ...(ngDevMode ? [{ debugName: "_activeMessage" }] : []));
+    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
+    _messageFilesLayout = signal('vertical', ...(ngDevMode ? [{ debugName: "_messageFilesLayout" }] : []));
+    _timestampVisibility = signal('focus', ...(ngDevMode ? [{ debugName: "_timestampVisibility" }] : []));
+    _showUsername = signal(true, ...(ngDevMode ? [{ debugName: "_showUsername" }] : []));
+    _showAvatar = signal(true, ...(ngDevMode ? [{ debugName: "_showAvatar" }] : []));
+    _reply = signal(undefined, ...(ngDevMode ? [{ debugName: "_reply" }] : []));
+    _calculatedContextMenuActions = signal([], ...(ngDevMode ? [{ debugName: "_calculatedContextMenuActions" }] : []));
     subjects = {
         toolbarAction: new Subject(),
         contextMenuAction: new Subject(),
@@ -2671,79 +2848,79 @@ class ChatService {
         this.zone = zone;
     }
     set authorMessageSettings(settings) {
-        const previousSettings = this._authorMessageSettings;
+        const previousSettings = this._authorMessageSettings();
         if (JSON.stringify(previousSettings) !== JSON.stringify(settings)) {
             this.updateComponentSettings('_authorMessageSettings', settings, null);
-            this.emit('authorMessageSettingsChange', this._authorMessageSettings);
+            this.emit('authorMessageSettingsChange', this._authorMessageSettings());
         }
     }
     get authorMessageSettings() {
-        return this._authorMessageSettings;
+        return this._authorMessageSettings();
     }
     set receiverMessageSettings(settings) {
-        const previousSettings = this._receiverMessageSettings;
+        const previousSettings = this._receiverMessageSettings();
         if (JSON.stringify(previousSettings) !== JSON.stringify(settings)) {
             this.updateComponentSettings('_receiverMessageSettings', settings, null);
-            this.emit('receiverMessageSettingsChange', this._receiverMessageSettings);
+            this.emit('receiverMessageSettingsChange', this._receiverMessageSettings());
         }
     }
     get receiverMessageSettings() {
-        return this._receiverMessageSettings;
+        return this._receiverMessageSettings();
     }
     set speechToTextButton(settings) {
         this.updateComponentSettings('_speechToTextButton', settings, STB_DEFAULT_SETTINGS$1);
     }
     get speechToTextButton() {
-        return this._speechToTextButton;
+        return this._speechToTextButton();
     }
     set fileSelectButton(settings) {
         this.updateComponentSettings('_fileSelectButton', settings, FILESELECT_BUTTON_DEFAULT_SETTINGS$1);
     }
     get fileSelectButton() {
-        return this._fileSelectButton;
+        return this._fileSelectButton();
     }
     set sendButton(settings) {
         this.updateComponentSettings('_sendButtonSettings', settings, SEND_BTN_DEFAULT_SETTINGS);
     }
     get sendButton() {
-        return this._sendButtonSettings;
+        return this._sendButtonSettings();
     }
     set messageBoxSettings(settings) {
         this.updateComponentSettings('_messageBoxSettings', settings, MESSAGE_BOX_SETTINGS);
     }
     get messageBoxSettings() {
-        return this._messageBoxSettings;
+        return this._messageBoxSettings();
     }
     set suggestionsLayout(layoutMode) {
-        this._suggestionsLayout = layoutMode;
-        this.emit('suggestionsLayoutChange', this._suggestionsLayout);
+        this._suggestionsLayout.set(layoutMode);
+        this.emit('suggestionsLayoutChange', this._suggestionsLayout());
     }
     get suggestionsLayout() {
-        return this._suggestionsLayout;
+        return this._suggestionsLayout();
     }
     set quickActionsLayout(layoutMode) {
-        this._quickActionsLayout = layoutMode;
-        this.emit('quickActionsLayoutChange', this._quickActionsLayout);
+        this._quickActionsLayout.set(layoutMode);
+        this.emit('quickActionsLayoutChange', this._quickActionsLayout());
     }
     get quickActionsLayout() {
-        return this._quickActionsLayout;
+        return this._quickActionsLayout();
     }
     set messageToolbarActions(value) {
-        this._messageToolbarActions = value;
-        this.emit('messageToolbarActionsChange', this._messageToolbarActions);
+        this._messageToolbarActions.set(value);
+        this.emit('messageToolbarActionsChange', this._messageToolbarActions());
     }
     get messageToolbarActions() {
-        return this._messageToolbarActions;
+        return this._messageToolbarActions();
     }
     set allowMessageCollapse(value) {
-        const previousValue = this._allowMessageCollapse;
+        const previousValue = this._allowMessageCollapse();
         if (previousValue !== value) {
-            this._allowMessageCollapse = value;
-            this.emit('allowMessageCollapseChange', this._allowMessageCollapse);
+            this._allowMessageCollapse.set(value);
+            this.emit('allowMessageCollapseChange', this._allowMessageCollapse());
         }
     }
     get allowMessageCollapse() {
-        return this._allowMessageCollapse;
+        return this._allowMessageCollapse();
     }
     calculateContextMenuActions(isOwn) {
         const settings = isOwn ? this.authorMessageSettings : this.receiverMessageSettings;
@@ -2817,15 +2994,17 @@ class ChatService {
         return targetRect.top - containerRect.top + scrollContainer.scrollTop - pinnedHeight;
     }
     updateComponentSettings(property, settings, defaultSettings) {
+        let newValue;
         if (settings === true) {
-            this[property] = defaultSettings;
+            newValue = defaultSettings;
         }
         else if (settings === false) {
-            this[property] = null;
+            newValue = null;
         }
         else {
-            this[property] = { ...defaultSettings, ...settings };
+            newValue = { ...defaultSettings, ...settings };
         }
+        this[property].set(newValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChatService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChatService });
@@ -2846,8 +3025,19 @@ class ScrollAnchorDirective {
     zone;
     renderer;
     cdr;
-    autoScroll = true;
-    autoScrollThreshold = '20%';
+    injector;
+    set autoScroll(value) {
+        this._autoScroll.set(value);
+    }
+    get autoScroll() {
+        return this._autoScroll();
+    }
+    set autoScrollThreshold(value) {
+        this._autoScrollThreshold.set(value);
+    }
+    get autoScrollThreshold() {
+        return this._autoScrollThreshold();
+    }
     set endlessMode(value) {
         const changed = this._endlessMode !== value;
         this._endlessMode = value;
@@ -2856,15 +3046,20 @@ class ScrollAnchorDirective {
         this.scrolling = false;
         if (changed && !value && this._initialScrollDone && isDocumentAvailable()) {
             this.element.nativeElement.scrollTo({ top: 0, behavior: 'auto' });
-            this._subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.performScroll('smooth');
-            }));
+            }, { injector: this.injector });
         }
     }
     get endlessMode() {
         return this._endlessMode;
     }
-    rangeIsAtEnd = true;
+    set rangeIsAtEnd(value) {
+        this._rangeIsAtEnd.set(value);
+    }
+    get rangeIsAtEnd() {
+        return this._rangeIsAtEnd();
+    }
     autoScrollChange = new EventEmitter();
     nearTop = new EventEmitter();
     nearBottom = new EventEmitter();
@@ -2886,6 +3081,9 @@ class ScrollAnchorDirective {
     _scrollingToMessage = false;
     _initialScrollDone = false;
     _subs = new Subscription();
+    _autoScroll = signal(true, ...(ngDevMode ? [{ debugName: "_autoScroll" }] : []));
+    _autoScrollThreshold = signal('20%', ...(ngDevMode ? [{ debugName: "_autoScrollThreshold" }] : []));
+    _rangeIsAtEnd = signal(true, ...(ngDevMode ? [{ debugName: "_rangeIsAtEnd" }] : []));
     // Need to ensure that the scroll follows a new streaming message 
     // until the scroll threshold is reached.
     _streamingFollow = false;
@@ -2894,11 +3092,12 @@ class ScrollAnchorDirective {
     _streamingPrevHeight = 0;
     _streamingPrevMsgCount = 0;
     _mutationObserver = null;
-    constructor(element, zone, renderer, cdr) {
+    constructor(element, zone, renderer, cdr, injector) {
         this.element = element;
         this.zone = zone;
         this.renderer = renderer;
         this.cdr = cdr;
+        this.injector = injector;
     }
     ngOnInit() {
         if (!isDocumentAvailable()) {
@@ -2937,7 +3136,7 @@ class ScrollAnchorDirective {
         });
     }
     ngAfterViewInit() {
-        this._subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             if (this.autoScroll) {
                 if (this._endlessMode) {
                     this.scrollToBottomWithSettle();
@@ -2948,7 +3147,7 @@ class ScrollAnchorDirective {
             }
             this.calculateMessageBoxSeparator();
             this._initialScrollDone = true;
-        }));
+        }, { injector: this.injector });
     }
     ngOnDestroy() {
         if (this.unsubscribe) {
@@ -3210,7 +3409,7 @@ class ScrollAnchorDirective {
         el.scrollTo({ top: target, behavior });
         this.scrolling = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: ScrollAnchorDirective, isStandalone: true, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll", autoScrollThreshold: "autoScrollThreshold", endlessMode: "endlessMode", rangeIsAtEnd: "rangeIsAtEnd" }, outputs: { autoScrollChange: "autoScrollChange", nearTop: "nearTop", nearBottom: "nearBottom" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor", "style.scroll-behavior": "this.scrollBehaviorStyle" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ScrollAnchorDirective, decorators: [{
@@ -3220,7 +3419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     exportAs: 'scrollAnchor',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { autoScroll: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }], propDecorators: { autoScroll: [{
                 type: Input
             }], autoScrollThreshold: [{
                 type: Input
@@ -3437,96 +3636,234 @@ let Messages$2 = class Messages extends ComponentMessages {
     /**
      * Sets the text that displays when the sender deletes a message.
      */
-    deletedMessageSenderText;
+    set deletedMessageSenderText(value) {
+        this._deletedMessageSenderText.set(value);
+    }
+    get deletedMessageSenderText() {
+        return this._deletedMessageSenderText();
+    }
     /**
      * Sets the text that displays when the receiver deletes a message.
      */
-    deletedMessageReceiverText;
+    set deletedMessageReceiverText(value) {
+        this._deletedMessageReceiverText.set(value);
+    }
+    get deletedMessageReceiverText() {
+        return this._deletedMessageReceiverText();
+    }
     /**
      * Sets the text that displays when a message fails to send.
      */
-    messageFailedText;
+    set messageFailedText(value) {
+        this._messageFailedText.set(value);
+    }
+    get messageFailedText() {
+        return this._messageFailedText();
+    }
     /**
      * Sets the text that displays in the download section of the message.
      * This message displays below all files in the message.
      */
-    downloadAllFilesText;
+    set downloadAllFilesText(value) {
+        this._downloadAllFilesText.set(value);
+    }
+    get downloadAllFilesText() {
+        return this._downloadAllFilesText();
+    }
     /**
      * Sets the placeholder text for the message text input.
      */
-    messagePlaceholder;
+    set messagePlaceholder(value) {
+        this._messagePlaceholder.set(value);
+    }
+    get messagePlaceholder() {
+        return this._messagePlaceholder();
+    }
     /**
      * Sets the aria-label for the internal input/textarea element.
      */
-    messageBoxTitle;
+    set messageBoxTitle(value) {
+        this._messageBoxTitle.set(value);
+    }
+    get messageBoxTitle() {
+        return this._messageBoxTitle();
+    }
     /**
      * Sets the text for the **Action** button.
      */
-    actionButtonTitle;
+    set actionButtonTitle(value) {
+        this._actionButtonTitle.set(value);
+    }
+    get actionButtonTitle() {
+        return this._actionButtonTitle();
+    }
     /**
      * Sets the label for the message list.
      */
-    messageListLabel;
+    set messageListLabel(value) {
+        this._messageListLabel.set(value);
+    }
+    get messageListLabel() {
+        return this._messageListLabel();
+    }
     /**
      * Sets the label for the message input box.
      */
-    messageBoxInputLabel;
+    set messageBoxInputLabel(value) {
+        this._messageBoxInputLabel.set(value);
+    }
+    get messageBoxInputLabel() {
+        return this._messageBoxInputLabel();
+    }
     /**
      * Sets the text for the left arrow of the message attachments.
      */
-    messageAttachmentLeftArrow;
+    set messageAttachmentLeftArrow(value) {
+        this._messageAttachmentLeftArrow.set(value);
+    }
+    get messageAttachmentLeftArrow() {
+        return this._messageAttachmentLeftArrow();
+    }
     /**
      * Sets the text for the right arrow of the message attachments.
      */
-    messageAttachmentRightArrow;
+    set messageAttachmentRightArrow(value) {
+        this._messageAttachmentRightArrow.set(value);
+    }
+    get messageAttachmentRightArrow() {
+        return this._messageAttachmentRightArrow();
+    }
     /**
      * Sets the Speech to Text button title.
      */
-    speechToTextButtonTitle;
+    set speechToTextButtonTitle(value) {
+        this._speechToTextButtonTitle.set(value);
+    }
+    get speechToTextButtonTitle() {
+        return this._speechToTextButtonTitle();
+    }
     /**
      * Sets the File Select button title.
      */
-    fileSelectButtonTitle;
+    set fileSelectButtonTitle(value) {
+        this._fileSelectButtonTitle.set(value);
+    }
+    get fileSelectButtonTitle() {
+        return this._fileSelectButtonTitle();
+    }
     /**
      * Sets the title of the icon that removes the reply reference in the Message Box.
      */
-    removeReplyTitle;
+    set removeReplyTitle(value) {
+        this._removeReplyTitle.set(value);
+    }
+    get removeReplyTitle() {
+        return this._removeReplyTitle();
+    }
     /**
      * Sets the title of the icon that removes a selected file in the Message Box.
      */
-    removeFileTitle;
+    set removeFileTitle(value) {
+        this._removeFileTitle.set(value);
+    }
+    get removeFileTitle() {
+        return this._removeFileTitle();
+    }
     /**
      * Sets the title of the icon that shows the message can expand.
      */
-    expandTitle;
+    set expandTitle(value) {
+        this._expandTitle.set(value);
+    }
+    get expandTitle() {
+        return this._expandTitle();
+    }
     /**
      * Sets the title of the icon that shows the message can collapse.
      */
-    collapseTitle;
+    set collapseTitle(value) {
+        this._collapseTitle.set(value);
+    }
+    get collapseTitle() {
+        return this._collapseTitle();
+    }
     /**
      * Sets the title of the DropDownButton that opens the File actions.
      */
-    fileActionsTitle;
+    set fileActionsTitle(value) {
+        this._fileActionsTitle.set(value);
+    }
+    get fileActionsTitle() {
+        return this._fileActionsTitle();
+    }
     /**
      * Sets the title of the button that shows the **Scroll right** when the suggestions list is scrollable with buttons.
      */
-    nextSuggestionsButtonTitle;
+    set nextSuggestionsButtonTitle(value) {
+        this._nextSuggestionsButtonTitle.set(value);
+    }
+    get nextSuggestionsButtonTitle() {
+        return this._nextSuggestionsButtonTitle();
+    }
     /**
      * Sets the title of the button that shows the **Scroll left** when the suggestions list is scrollable with buttons.
      */
-    previousSuggestionsButtonTitle;
+    set previousSuggestionsButtonTitle(value) {
+        this._previousSuggestionsButtonTitle.set(value);
+    }
+    get previousSuggestionsButtonTitle() {
+        return this._previousSuggestionsButtonTitle();
+    }
     /**
      * Sets the title of the button that unpins a pinned message.
      */
-    unpinMessageTitle;
+    set unpinMessageTitle(value) {
+        this._unpinMessageTitle.set(value);
+    }
+    get unpinMessageTitle() {
+        return this._unpinMessageTitle();
+    }
     /**
      * Sets the aria-label for the button that resends a failed message.
      */
-    resendButtonTitle;
+    set resendButtonTitle(value) {
+        this._resendButtonTitle.set(value);
+    }
+    get resendButtonTitle() {
+        return this._resendButtonTitle();
+    }
     /**
      * Sets the aria-label for the attached files list.
      */
-    attachedFilesLabel;
+    set attachedFilesLabel(value) {
+        this._attachedFilesLabel.set(value);
+    }
+    get attachedFilesLabel() {
+        return this._attachedFilesLabel();
+    }
+    _deletedMessageSenderText = signal(undefined, ...(ngDevMode ? [{ debugName: "_deletedMessageSenderText" }] : []));
+    _deletedMessageReceiverText = signal(undefined, ...(ngDevMode ? [{ debugName: "_deletedMessageReceiverText" }] : []));
+    _messageFailedText = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageFailedText" }] : []));
+    _downloadAllFilesText = signal(undefined, ...(ngDevMode ? [{ debugName: "_downloadAllFilesText" }] : []));
+    _messagePlaceholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_messagePlaceholder" }] : []));
+    _messageBoxTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxTitle" }] : []));
+    _actionButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_actionButtonTitle" }] : []));
+    _messageListLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageListLabel" }] : []));
+    _messageBoxInputLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxInputLabel" }] : []));
+    _messageAttachmentLeftArrow = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageAttachmentLeftArrow" }] : []));
+    _messageAttachmentRightArrow = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageAttachmentRightArrow" }] : []));
+    _speechToTextButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_speechToTextButtonTitle" }] : []));
+    _fileSelectButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileSelectButtonTitle" }] : []));
+    _removeReplyTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_removeReplyTitle" }] : []));
+    _removeFileTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_removeFileTitle" }] : []));
+    _expandTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_expandTitle" }] : []));
+    _collapseTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_collapseTitle" }] : []));
+    _fileActionsTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileActionsTitle" }] : []));
+    _nextSuggestionsButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_nextSuggestionsButtonTitle" }] : []));
+    _previousSuggestionsButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_previousSuggestionsButtonTitle" }] : []));
+    _unpinMessageTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_unpinMessageTitle" }] : []));
+    _resendButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_resendButtonTitle" }] : []));
+    _attachedFilesLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_attachedFilesLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, selector: "kendoConversationalUIMessages", inputs: { deletedMessageSenderText: "deletedMessageSenderText", deletedMessageReceiverText: "deletedMessageReceiverText", messageFailedText: "messageFailedText", downloadAllFilesText: "downloadAllFilesText", messagePlaceholder: "messagePlaceholder", messageBoxTitle: "messageBoxTitle", actionButtonTitle: "actionButtonTitle", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", speechToTextButtonTitle: "speechToTextButtonTitle", fileSelectButtonTitle: "fileSelectButtonTitle", removeReplyTitle: "removeReplyTitle", removeFileTitle: "removeFileTitle", expandTitle: "expandTitle", collapseTitle: "collapseTitle", fileActionsTitle: "fileActionsTitle", nextSuggestionsButtonTitle: "nextSuggestionsButtonTitle", previousSuggestionsButtonTitle: "previousSuggestionsButtonTitle", unpinMessageTitle: "unpinMessageTitle", resendButtonTitle: "resendButtonTitle", attachedFilesLabel: "attachedFilesLabel" }, usesInheritance: true, ngImport: i0 });
 };
@@ -3633,7 +3970,7 @@ class PromptBoxEndAffixComponent {
      */
     templateRef;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxEndAffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PromptBoxEndAffixComponent, isStandalone: true, selector: "kendo-promptbox-end-affix", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["template"], descendants: true, static: true }], exportAs: ["kendoPromptBoxEndAffix"], ngImport: i0, template: `<ng-template #template><ng-content></ng-content></ng-template>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PromptBoxEndAffixComponent, isStandalone: true, selector: "kendo-promptbox-end-affix", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["template"], descendants: true, static: true }], exportAs: ["kendoPromptBoxEndAffix"], ngImport: i0, template: `<ng-template #template><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxEndAffixComponent, decorators: [{
             type: Component,
@@ -3641,7 +3978,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     exportAs: 'kendoPromptBoxEndAffix',
                     selector: 'kendo-promptbox-end-affix',
                     template: `<ng-template #template><ng-content></ng-content></ng-template>`,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { templateRef: [{
                 type: ViewChild,
@@ -3666,7 +4004,7 @@ class PromptBoxStartAffixComponent {
      */
     templateRef;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxStartAffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PromptBoxStartAffixComponent, isStandalone: true, selector: "kendo-promptbox-start-affix", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["template"], descendants: true, static: true }], exportAs: ["kendoPromptBoxStartAffix"], ngImport: i0, template: `<ng-template #template><ng-content></ng-content></ng-template>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PromptBoxStartAffixComponent, isStandalone: true, selector: "kendo-promptbox-start-affix", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["template"], descendants: true, static: true }], exportAs: ["kendoPromptBoxStartAffix"], ngImport: i0, template: `<ng-template #template><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxStartAffixComponent, decorators: [{
             type: Component,
@@ -3674,7 +4012,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     exportAs: 'kendoPromptBoxStartAffix',
                     selector: 'kendo-promptbox-start-affix',
                     template: `<ng-template #template><ng-content></ng-content></ng-template>`,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { templateRef: [{
                 type: ViewChild,
@@ -3699,7 +4038,7 @@ class PromptBoxTopAffixComponent {
      */
     templateRef;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxTopAffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PromptBoxTopAffixComponent, isStandalone: true, selector: "kendo-promptbox-top-affix", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["template"], descendants: true, static: true }], exportAs: ["kendoPromptBoxTopAffix"], ngImport: i0, template: `<ng-template #template><ng-content></ng-content></ng-template>`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: PromptBoxTopAffixComponent, isStandalone: true, selector: "kendo-promptbox-top-affix", viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["template"], descendants: true, static: true }], exportAs: ["kendoPromptBoxTopAffix"], ngImport: i0, template: `<ng-template #template><ng-content></ng-content></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxTopAffixComponent, decorators: [{
             type: Component,
@@ -3707,7 +4046,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     exportAs: 'kendoPromptBoxTopAffix',
                     selector: 'kendo-promptbox-top-affix',
                     template: `<ng-template #template><ng-content></ng-content></ng-template>`,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { templateRef: [{
                 type: ViewChild,
@@ -3744,31 +4084,73 @@ let Messages$1 = class Messages extends ComponentMessages {
     /**
      * The title for the **File Select** button.
      */
-    fileSelectButtonTitle;
+    set fileSelectButtonTitle(value) {
+        this._fileSelectButtonTitle.set(value);
+    }
+    get fileSelectButtonTitle() {
+        return this._fileSelectButtonTitle();
+    }
     /**
      * The title for the **Action** button.
      */
-    actionButtonTitle;
+    set actionButtonTitle(value) {
+        this._actionButtonTitle.set(value);
+    }
+    get actionButtonTitle() {
+        return this._actionButtonTitle();
+    }
     /**
      * The title for the **Stop Generating** action.
      */
-    stopGeneratingTitle;
+    set stopGeneratingTitle(value) {
+        this._stopGeneratingTitle.set(value);
+    }
+    get stopGeneratingTitle() {
+        return this._stopGeneratingTitle();
+    }
     /**
      * The title for the **Speech to Text** button.
      */
-    speechToTextButtonTitle;
+    set speechToTextButtonTitle(value) {
+        this._speechToTextButtonTitle.set(value);
+    }
+    get speechToTextButtonTitle() {
+        return this._speechToTextButtonTitle();
+    }
     /**
      * The title for the **Remove File** button.
      */
-    removeFileTitle;
+    set removeFileTitle(value) {
+        this._removeFileTitle.set(value);
+    }
+    get removeFileTitle() {
+        return this._removeFileTitle();
+    }
     /**
      * Sets the aria-label for the internal input/textarea element.
      */
-    messageBoxTitle;
+    set messageBoxTitle(value) {
+        this._messageBoxTitle.set(value);
+    }
+    get messageBoxTitle() {
+        return this._messageBoxTitle();
+    }
     /**
      * Sets the aria-label for the attached files list.
      */
-    attachedFilesLabel;
+    set attachedFilesLabel(value) {
+        this._attachedFilesLabel.set(value);
+    }
+    get attachedFilesLabel() {
+        return this._attachedFilesLabel();
+    }
+    _fileSelectButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileSelectButtonTitle" }] : []));
+    _actionButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_actionButtonTitle" }] : []));
+    _stopGeneratingTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_stopGeneratingTitle" }] : []));
+    _speechToTextButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_speechToTextButtonTitle" }] : []));
+    _removeFileTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_removeFileTitle" }] : []));
+    _messageBoxTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxTitle" }] : []));
+    _attachedFilesLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "_attachedFilesLabel" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, inputs: { fileSelectButtonTitle: "fileSelectButtonTitle", actionButtonTitle: "actionButtonTitle", stopGeneratingTitle: "stopGeneratingTitle", speechToTextButtonTitle: "speechToTextButtonTitle", removeFileTitle: "removeFileTitle", messageBoxTitle: "messageBoxTitle", attachedFilesLabel: "attachedFilesLabel" }, usesInheritance: true, ngImport: i0 });
 };
@@ -3817,7 +4199,7 @@ class PromptBoxCustomMessagesComponent extends Messages$1 {
                 provide: Messages$1,
                 useExisting: forwardRef(() => PromptBoxCustomMessagesComponent)
             }
-        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxCustomMessagesComponent, decorators: [{
             type: Component,
@@ -3830,7 +4212,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     ],
                     selector: 'kendo-promptbox-messages',
                     template: ``,
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }] });
 
@@ -3873,6 +4256,45 @@ const FILESELECT_BUTTON_DEFAULT_SETTINGS = {
     restrictions: null,
     accept: null
 };
+/**
+ * @hidden
+ */
+function normalizeButtonSettings(settings, defaults) {
+    if (settings === true) {
+        return defaults;
+    }
+    if (settings === false) {
+        return null;
+    }
+    return { ...defaults, ...settings };
+}
+/**
+ * @hidden
+ */
+function areSettingsEqual(first, second) {
+    if (first === second) {
+        return true;
+    }
+    if (!first || !second) {
+        return false;
+    }
+    if (Array.isArray(first) || Array.isArray(second)) {
+        if (!Array.isArray(first) || !Array.isArray(second) || first.length !== second.length) {
+            return false;
+        }
+        return first.every((item, index) => areSettingsEqual(item, second[index]));
+    }
+    if (typeof first !== 'object' || typeof second !== 'object') {
+        return false;
+    }
+    const firstEntries = Object.entries(first);
+    const secondObject = second;
+    const secondKeys = Object.keys(secondObject);
+    if (firstEntries.length !== secondKeys.length) {
+        return false;
+    }
+    return firstEntries.every(([key, value]) => areSettingsEqual(value, secondObject[key]));
+}
 
 /**
  * @hidden
@@ -3913,59 +4335,113 @@ class PromptBoxBaseTool {
     /**
      * Sets the disabled state of the button.
      */
-    disabled;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * Sets the background and border styles of the button.
      */
-    fillMode;
+    set fillMode(value) {
+        this._fillMode.set(value);
+    }
+    get fillMode() {
+        return this._fillMode();
+    }
     /**
      *  Sets the name of an existing font icon in the Kendo UI theme for the button.
      */
-    icon;
+    set icon(value) {
+        this._icon.set(value);
+    }
+    get icon() {
+        return this._icon();
+    }
     /**
      *  Defines a CSS class, or multiple classes separated by spaces, applied to a span element inside the button.
      */
-    iconClass;
+    set iconClass(value) {
+        this._iconClass.set(value);
+    }
+    get iconClass() {
+        return this._iconClass();
+    }
     /**
      *  Specifies a URL for an img element inside the button.
      */
-    imageUrl;
+    set imageUrl(value) {
+        this._imageUrl.set(value);
+    }
+    get imageUrl() {
+        return this._imageUrl();
+    }
     /**
      * Sets the SVG icon for the tool button.
      */
-    svgIcon;
+    set svgIcon(value) {
+        this._svgIcon.set(value);
+    }
+    get svgIcon() {
+        return this._svgIcon();
+    }
     /**
      * Sets the border radius of the button.
      */
-    rounded;
+    set rounded(value) {
+        this._rounded.set(value);
+    }
+    get rounded() {
+        return this._rounded();
+    }
     /**
      * Sets the padding of the button.
      */
     set size(value) {
-        if (this._size !== value) {
-            this._size = value;
+        if (this._size() !== value) {
+            this._size.set(value);
             this.sizeChange.emit(value);
         }
     }
     get size() {
-        return this._size;
+        return this._size();
     }
     /**
      * Sets a predefined theme color for the button.
      */
-    themeColor;
+    set themeColor(value) {
+        this._themeColor.set(value);
+    }
+    get themeColor() {
+        return this._themeColor();
+    }
     /**
      * Sets the title attribute of the button.
      *
      * @remarks
      * This property is related to accessibility.
      */
-    title;
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * @hidden
      */
     sizeChange = new EventEmitter();
-    _size;
+    _disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _fillMode = signal(undefined, ...(ngDevMode ? [{ debugName: "_fillMode" }] : []));
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _iconClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_iconClass" }] : []));
+    _imageUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "_imageUrl" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _rounded = signal(undefined, ...(ngDevMode ? [{ debugName: "_rounded" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    _themeColor = signal(undefined, ...(ngDevMode ? [{ debugName: "_themeColor" }] : []));
+    _title = signal(undefined, ...(ngDevMode ? [{ debugName: "_title" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxBaseTool, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: PromptBoxBaseTool, isStandalone: true, inputs: { disabled: "disabled", fillMode: "fillMode", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", svgIcon: "svgIcon", rounded: "rounded", size: "size", themeColor: "themeColor", title: "title" }, outputs: { sizeChange: "sizeChange" }, ngImport: i0 });
 }
@@ -4012,30 +4488,54 @@ class PromptBoxActionButtonComponent extends PromptBoxBaseTool {
     /**
      * @hidden
      */
-    buttonClass;
+    set buttonClass(value) {
+        this._buttonClass.set(value);
+    }
+    get buttonClass() {
+        return this._buttonClass();
+    }
     /**
      * Sets the loading state of the **Action** button.
      *
      * @default false
      */
-    loading = false;
+    set loading(value) {
+        this._loading.set(value);
+    }
+    get loading() {
+        return this._loading();
+    }
     /**
      * Sets the icon to be displayed when the **Action** button is in loading state.
      *
      * @default 'stop'
      */
-    loadingIcon = 'stop';
+    set loadingIcon(value) {
+        this._loadingIcon.set(value);
+    }
+    get loadingIcon() {
+        return this._loadingIcon();
+    }
     /**
      * Sets the SVG icon to be displayed when the **Action** button is in loading state.
      *
      * @default stopIcon
      */
-    loadingSVGIcon = stopIcon;
+    set loadingSVGIcon(value) {
+        this._loadingSVGIcon.set(value);
+    }
+    get loadingSVGIcon() {
+        return this._loadingSVGIcon();
+    }
     /**
      * Fires when the user clicks the Action button.
      * @hidden
      */
     promptAction = new EventEmitter();
+    _buttonClass = signal(undefined, ...(ngDevMode ? [{ debugName: "_buttonClass" }] : []));
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _loadingIcon = signal('stop', ...(ngDevMode ? [{ debugName: "_loadingIcon" }] : []));
+    _loadingSVGIcon = signal(stopIcon, ...(ngDevMode ? [{ debugName: "_loadingSVGIcon" }] : []));
     constructor(localization) {
         super();
         this.localization = localization;
@@ -4082,7 +4582,7 @@ class PromptBoxActionButtonComponent extends PromptBoxBaseTool {
             [themeColor]="themeColor"
             (click)="handleClick()"
         ></button>
-    `, isInline: true, dependencies: [{ 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: "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: "20.3.27", ngImport: i0, type: PromptBoxActionButtonComponent, decorators: [{
             type: Component,
@@ -4116,6 +4616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
     `,
                     standalone: true,
                     imports: [ButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { buttonClass: [{
                 type: Input
@@ -4150,23 +4651,41 @@ class PromptBoxFileSelectButtonComponent extends PromptBoxBaseTool {
     /**
      * Sets the restrictions for selected files.
      */
-    restrictions = null;
+    set restrictions(value) {
+        this._restrictions.set(value);
+    }
+    get restrictions() {
+        return this._restrictions();
+    }
     /**
      * Allows you to select multiple files.
      *
      * @default true
      */
-    multiple = true;
+    set multiple(value) {
+        this._multiple.set(value);
+    }
+    get multiple() {
+        return this._multiple();
+    }
     /**
      * Sets the `accept` attribute of the internal FileSelect component.
      * Specifies the file types that the user can select.
      */
-    accept = null;
+    set accept(value) {
+        this._accept.set(value);
+    }
+    get accept() {
+        return this._accept();
+    }
     /**
      * Fires when the user selects files.
      * @hidden
      */
     selectAttachments = new EventEmitter();
+    _restrictions = signal(null, ...(ngDevMode ? [{ debugName: "_restrictions" }] : []));
+    _multiple = signal(true, ...(ngDevMode ? [{ debugName: "_multiple" }] : []));
+    _accept = signal(null, ...(ngDevMode ? [{ debugName: "_accept" }] : []));
     constructor(localization) {
         super();
         this.localization = localization;
@@ -4229,7 +4748,7 @@ class PromptBoxFileSelectButtonComponent extends PromptBoxBaseTool {
             [accept]="accept"
             (select)="handleSelect($event)"
         ></kendo-fileselect>
-    `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }] });
+    `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxFileSelectButtonComponent, decorators: [{
             type: Component,
@@ -4270,6 +4789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
     `,
                     standalone: true,
                     imports: [ButtonComponent, FileSelectComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { fileSelectComponent: [{
                 type: ViewChild,
@@ -4289,15 +4809,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class PromptBoxFileComponent {
     localization;
-    promptBoxFile;
-    removable = false;
-    fileActions;
-    disabled = false;
+    set promptBoxFile(value) {
+        this._promptBoxFile.set(value);
+    }
+    get promptBoxFile() {
+        return this._promptBoxFile();
+    }
+    set removable(value) {
+        this._removable.set(value);
+    }
+    get removable() {
+        return this._removable();
+    }
+    set fileActions(value) {
+        this._fileActions.set(value);
+    }
+    get fileActions() {
+        return this._fileActions();
+    }
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     role = 'listitem';
     get ariaLabel() {
         return `${this.promptBoxFile?.name || ''} ${this.getTotalFilesSizeMessage(this.promptBoxFile)}`.trim();
     }
     remove = new EventEmitter();
+    _promptBoxFile = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptBoxFile" }] : []));
+    _removable = signal(false, ...(ngDevMode ? [{ debugName: "_removable" }] : []));
+    _fileActions = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileActions" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
     deleteIcon = xCircleIcon;
     moreIcon = moreVerticalIcon;
     constructor(localization) {
@@ -4340,7 +4884,7 @@ class PromptBoxFileComponent {
             fillMode="flat"
           ></button>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: "20.3.27", ngImport: i0, type: PromptBoxFileComponent, decorators: [{
             type: Component,
@@ -4372,6 +4916,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
         `,
                     standalone: true,
                     imports: [IconWrapperComponent, ButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { promptBoxFile: [{
                 type: Input
@@ -4410,31 +4955,61 @@ class PromptBoxSpeechToTextButtonComponent extends PromptBoxBaseTool {
      *
      * @default false
      */
-    continuous = false;
+    set continuous(value) {
+        this._continuous.set(value);
+    }
+    get continuous() {
+        return this._continuous();
+    }
     /**
      * Specifies which speech recognition engine or integration the component should use. Allows the component to operate in different environments or use alternative implementations.
      *
      * @default 'webSpeech'
      */
-    integrationMode = 'webSpeech';
+    set integrationMode(value) {
+        this._integrationMode.set(value);
+    }
+    get integrationMode() {
+        return this._integrationMode();
+    }
     /**
      * Sets whether interim results should be returned.
      *
      * @default false
      */
-    interimResults = false;
+    set interimResults(value) {
+        this._interimResults.set(value);
+    }
+    get interimResults() {
+        return this._interimResults();
+    }
     /**
      * Sets a `BCP 47` language for speech recognition.
      *
      * @default 'en-US'
      */
-    lang = 'en-US';
+    set lang(value) {
+        this._lang.set(value);
+    }
+    get lang() {
+        return this._lang();
+    }
     /**
      * Represents the maximum number of alternative transcriptions to return for each result.
      *
      * @default 1
      */
-    maxAlternatives = 1;
+    set maxAlternatives(value) {
+        this._maxAlternatives.set(value);
+    }
+    get maxAlternatives() {
+        return this._maxAlternatives();
+    }
+    _continuous = signal(false, ...(ngDevMode ? [{ debugName: "_continuous" }] : []));
+    _integrationMode = signal('webSpeech', ...(ngDevMode ? [{ debugName: "_integrationMode" }] : []));
+    _interimResults = signal(false, ...(ngDevMode ? [{ debugName: "_interimResults" }] : []));
+    _lang = signal('en-US', ...(ngDevMode ? [{ debugName: "_lang" }] : []));
+    _maxAlternatives = signal(1, ...(ngDevMode ? [{ debugName: "_maxAlternatives" }] : []));
     /**
      * Fires when the user clicks the **Speech to Text** button.
      * @hidden
@@ -4500,7 +5075,7 @@ class PromptBoxSpeechToTextButtonComponent extends PromptBoxBaseTool {
             (error)="stbError.emit($event)"
             (result)="stbResult.emit($event)"
         ></button>
-    `, isInline: true, dependencies: [{ kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxSpeechToTextButtonComponent, decorators: [{
             type: Component,
@@ -4537,6 +5112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
     `,
                     standalone: true,
                     imports: [SpeechToTextButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { continuous: [{
                 type: Input
@@ -4578,6 +5154,7 @@ class PromptBoxComponent {
     ngZone;
     localization;
     hostElement;
+    injector;
     get hostSinglelineClass() {
         return this.mode === 'single';
     }
@@ -4592,29 +5169,54 @@ class PromptBoxComponent {
      *
      * @default false
      */
-    disabled = false;
+    set disabled(value) {
+        this._disabled.set(value);
+    }
+    get disabled() {
+        return this._disabled();
+    }
     /**
      * @hidden
      */
-    focusableId = `k-${guid()}`;
+    set focusableId(value) {
+        this._focusableId.set(value);
+    }
+    get focusableId() {
+        return this._focusableId();
+    }
     /**
      * Sets the loading state of the **Action** button.
      *
      * @default false
      */
-    loading = false;
+    set loading(value) {
+        this._loading.set(value);
+    }
+    get loading() {
+        return this._loading();
+    }
     /**
      * Sets the placeholder text displayed in the PromptBox when it is empty.
      *
      * @default ''
      */
-    placeholder = '';
+    set placeholder(value) {
+        this._placeholder.set(value);
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
     /**
      * Sets the read-only state of the PromptBox. When set to `true`, the PromptBox content cannot be modified but remains accessible.
      *
      * @default false
      */
-    readonly = false;
+    set readonly(value) {
+        this._readonly.set(value);
+    }
+    get readonly() {
+        return this._readonly();
+    }
     /**
      * Sets the title attribute of the input or textarea element.
      *
@@ -4623,76 +5225,81 @@ class PromptBoxComponent {
      * @remarks
      * This property is related to accessibility.
      */
-    title = '';
+    set title(value) {
+        this._title.set(value);
+    }
+    get title() {
+        return this._title();
+    }
     /**
      * Sets the mode of the PromptBox. [See example](slug:modes_promptbox).
      * @default 'auto'
      */
     set mode(promptBoxMode) {
-        if (promptBoxMode && this._mode === promptBoxMode) {
+        if (promptBoxMode && this._mode() === promptBoxMode) {
             return;
         }
-        const previousMode = this._mode;
-        this._mode = promptBoxMode;
-        if (previousMode === 'multi' && this._mode === 'auto') {
+        const previousMode = this._mode();
+        this._mode.set(promptBoxMode);
+        if (previousMode === 'multi' && this._mode() === 'auto') {
             this.resetTextArea();
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            if (this._mode !== 'single' && this.textareaElement) {
+        afterNextRender(() => {
+            if (this._mode() !== 'single' && this.textareaElement) {
                 if (previousMode === 'single' || !this.initialHeight) {
                     this.captureInitialDimensions();
                 }
                 this.resize();
             }
-        });
+        }, { injector: this.injector });
     }
     get mode() {
-        return this._mode;
+        return this._mode();
     }
     /**
      * Sets the number of visible text lines in the textarea. Applies only when the `mode` is set to `multi`.
      */
     set rows(value) {
-        if (this._rows === value) {
+        if (this._rows() === value) {
             return;
         }
-        this._rows = value;
+        this._rows.set(value);
         if (this.mode === 'multi' && this.textareaElement) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.captureInitialDimensions();
                 this.resize();
-            });
+            }, { injector: this.injector });
         }
     }
     get rows() {
-        return this._rows;
+        return this._rows();
     }
     /**
      * Sets the maximum height of the textarea in pixels.
      * The textarea resizes automatically until it reaches this height. When the content exceeds this height, a scrollbar appears.
      */
     set maxTextAreaHeight(value) {
-        this._maxTextAreaHeight = value;
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        this._maxTextAreaHeight.set(value);
+        afterNextRender(() => {
             this.resize();
-        });
+        }, { injector: this.injector });
     }
     get maxTextAreaHeight() {
-        return this._maxTextAreaHeight;
+        return this._maxTextAreaHeight();
     }
     /**
      * Sets the value of the PromptBox.
      */
     set value(value) {
-        this._value = value;
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        this._value.set(value);
+        afterNextRender(() => {
             if (this.mode !== 'single' && this.textareaElement) {
                 this.resize();
             }
-        });
+        }, { injector: this.injector });
     }
     get value() {
-        return this._value;
+        return this._value();
     }
     /**
      * Controls the visibility and configuration of the **Action** button in the end affix.
@@ -4700,11 +5307,15 @@ class PromptBoxComponent {
      * @default true
      */
     set actionButton(settings) {
-        this.updateComponentSettings('_actionButtonSettings', settings, ACTION_BUTTON_DEFAULT_SETTINGS);
+        const nextSettings = normalizeButtonSettings(settings, ACTION_BUTTON_DEFAULT_SETTINGS);
+        if (areSettingsEqual(this._actionButtonSettings(), nextSettings)) {
+            return;
+        }
+        this._actionButtonSettings.set(nextSettings);
         this.update();
     }
     get actionButton() {
-        return isPresent(this._actionButtonSettings);
+        return isPresent(this._actionButtonSettings());
     }
     /**
      * Controls the visibility and configuration of the **File Select** button in the end affix.
@@ -4712,11 +5323,15 @@ class PromptBoxComponent {
      * @default false
      */
     set fileSelectButton(settings) {
-        this.updateComponentSettings('_fileSelectButtonSettings', settings, FILESELECT_BUTTON_DEFAULT_SETTINGS);
+        const nextSettings = normalizeButtonSettings(settings, FILESELECT_BUTTON_DEFAULT_SETTINGS);
+        if (areSettingsEqual(this._fileSelectButtonSettings(), nextSettings)) {
+            return;
+        }
+        this._fileSelectButtonSettings.set(nextSettings);
         this.update();
     }
     get fileSelectButton() {
-        return isPresent(this._fileSelectButtonSettings);
+        return isPresent(this._fileSelectButtonSettings());
     }
     /**
      * Controls the visibility and configuration of the **Speech to Text** button in the end affix.
@@ -4724,11 +5339,15 @@ class PromptBoxComponent {
      * @default true
      */
     set speechToTextButton(settings) {
-        this.updateComponentSettings('_speechToTextButtonSettings', settings, STB_DEFAULT_SETTINGS);
+        const nextSettings = normalizeButtonSettings(settings, STB_DEFAULT_SETTINGS);
+        if (areSettingsEqual(this._speechToTextButtonSettings(), nextSettings)) {
+            return;
+        }
+        this._speechToTextButtonSettings.set(nextSettings);
         this.update();
     }
     get speechToTextButton() {
-        return isPresent(this._speechToTextButtonSettings);
+        return isPresent(this._speechToTextButtonSettings());
     }
     /**
      * Fires each time the value of the PromptBox changes.
@@ -4827,9 +5446,9 @@ class PromptBoxComponent {
      */
     get hasEndAffixContent() {
         return !!(isPresent(this.endAffix) ||
-            isPresent(this._actionButtonSettings) ||
-            isPresent(this._fileSelectButtonSettings) ||
-            isPresent(this._speechToTextButtonSettings));
+            isPresent(this._actionButtonSettings()) ||
+            isPresent(this._fileSelectButtonSettings()) ||
+            isPresent(this._speechToTextButtonSettings()));
     }
     /**
      * @hidden
@@ -4852,19 +5471,19 @@ class PromptBoxComponent {
      * @hidden
      */
     get actionButtonSettings() {
-        return this._actionButtonSettings;
+        return this._actionButtonSettings();
     }
     /**
      * @hidden
      */
     get fileSelectButtonSettings() {
-        return this._fileSelectButtonSettings;
+        return this._fileSelectButtonSettings();
     }
     /**
      * @hidden
      */
     get speechToTextButtonSettings() {
-        return this._speechToTextButtonSettings;
+        return this._speechToTextButtonSettings();
     }
     /**
      * @hidden
@@ -4878,39 +5497,72 @@ class PromptBoxComponent {
     /**
      * @hidden
      */
-    hasExpanded = false;
+    set hasExpanded(value) {
+        this._hasExpanded.set(value);
+    }
+    get hasExpanded() {
+        return this._hasExpanded();
+    }
     /**
      * @hidden
      */
-    isListening = false;
+    set isListening(value) {
+        this._isListening.set(value);
+    }
+    get isListening() {
+        return this._isListening();
+    }
     /**
      * Provides the currently attached files in the PromptBox component.
      */
-    attachments = [];
+    set attachments(value) {
+        this._attachments.set(value);
+    }
+    get attachments() {
+        return this._attachments();
+    }
     /**
      * @hidden
      */
-    filesListScrollAtStart = false;
+    get filesListScrollAtStart() {
+        return this._filesListScrollAtStart();
+    }
     /**
      * @hidden
      */
-    filesListScrollAtEnd = false;
+    get filesListScrollAtEnd() {
+        return this._filesListScrollAtEnd();
+    }
     /**
      * @hidden
      */
-    hasFilesOverflow = false;
-    _value = '';
-    _mode = 'auto';
-    _rows = 1;
+    get hasFilesOverflow() {
+        return this._hasFilesOverflow();
+    }
+    _value = signal('', ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _mode = signal('auto', ...(ngDevMode ? [{ debugName: "_mode" }] : []));
+    _rows = signal(1, ...(ngDevMode ? [{ debugName: "_rows" }] : []));
     initialHeight = 0;
     singleRowHeight = 0;
     singleLineWidth = 0;
-    _maxTextAreaHeight;
-    _actionButtonSettings = ACTION_BUTTON_DEFAULT_SETTINGS;
-    _fileSelectButtonSettings = null;
-    _speechToTextButtonSettings = STB_DEFAULT_SETTINGS;
+    _maxTextAreaHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxTextAreaHeight" }] : []));
+    _actionButtonSettings = signal(ACTION_BUTTON_DEFAULT_SETTINGS, ...(ngDevMode ? [{ debugName: "_actionButtonSettings" }] : []));
+    _fileSelectButtonSettings = signal(null, ...(ngDevMode ? [{ debugName: "_fileSelectButtonSettings" }] : []));
+    _speechToTextButtonSettings = signal(STB_DEFAULT_SETTINGS, ...(ngDevMode ? [{ debugName: "_speechToTextButtonSettings" }] : []));
     hostWidthAtCapture = 0;
     minMultiRowHeight = 0;
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _focusableId = signal(`k-${guid()}`, ...(ngDevMode ? [{ debugName: "_focusableId" }] : []));
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _placeholder = signal('', ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _readonly = signal(false, ...(ngDevMode ? [{ debugName: "_readonly" }] : []));
+    _title = signal('', ...(ngDevMode ? [{ debugName: "_title" }] : []));
+    _hasExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_hasExpanded" }] : []));
+    _isListening = signal(false, ...(ngDevMode ? [{ debugName: "_isListening" }] : []));
+    _attachments = signal([], ...(ngDevMode ? [{ debugName: "_attachments" }] : []));
+    _filesListScrollAtStart = signal(false, ...(ngDevMode ? [{ debugName: "_filesListScrollAtStart" }] : []));
+    _filesListScrollAtEnd = signal(false, ...(ngDevMode ? [{ debugName: "_filesListScrollAtEnd" }] : []));
+    _hasFilesOverflow = signal(false, ...(ngDevMode ? [{ debugName: "_hasFilesOverflow" }] : []));
     resizeSubscription;
     speechToTextSubscription = new Subscription();
     actionButtonSubscription = new Subscription();
@@ -4922,22 +5574,23 @@ class PromptBoxComponent {
     ngChange = () => {
         /* lint metadata */
     };
-    constructor(changeDetector, renderer, ngZone, localization, hostElement) {
+    constructor(changeDetector, renderer, ngZone, localization, hostElement, injector) {
         this.changeDetector = changeDetector;
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.localization = localization;
         this.hostElement = hostElement;
+        this.injector = injector;
         validatePackage(packageMetadata);
         this.renderer.addClass(this.hostElement.nativeElement, 'k-prompt-box');
         this.renderer.addClass(this.hostElement.nativeElement, 'k-input');
     }
     ngAfterViewInit() {
         if (this.mode !== 'single' && this.textareaElement) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.captureInitialDimensions();
                 this.attachResizeHandler();
-            });
+            }, { injector: this.injector });
         }
         this.subscribeToSpeechToTextButton();
         this.subscribeToActionButton();
@@ -4987,17 +5640,16 @@ class PromptBoxComponent {
      * Clears all attached files from the PromptBox.
      */
     clearAttachments() {
-        this.attachments = [];
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        this._attachments.set([]);
+        afterNextRender(() => {
             this.checkFilesListScroll();
-        });
+        }, { injector: this.injector });
     }
     /**
      * @hidden
      */
     writeValue(value) {
         this.value = value || '';
-        this.changeDetector.markForCheck();
     }
     /**
      * @hidden
@@ -5018,9 +5670,12 @@ class PromptBoxComponent {
         const target = event.target;
         const newValue = target.value;
         this.ngZone.run(() => {
-            this.value = newValue;
+            this._value.set(newValue);
             this.ngChange(this.value);
             this.valueChange.emit(this.value);
+            if (this.mode !== 'single' && this.textareaElement) {
+                this.resize();
+            }
         });
     };
     /**
@@ -5082,23 +5737,23 @@ class PromptBoxComponent {
         if (hasObservers(this.selectAttachments)) {
             this.selectAttachments.emit(event);
         }
-        this.attachments = [...this.attachments, ...event.files];
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        this._attachments.set([...this.attachments, ...event.files]);
+        afterNextRender(() => {
             this.checkFilesListScroll();
-        });
+        }, { injector: this.injector });
     }
     /**
      * @hidden
      */
     removeFile(index) {
         const removedFile = this.attachments[index];
-        this.attachments = this.attachments.filter((_, i) => i !== index);
+        this._attachments.set(this.attachments.filter((_, i) => i !== index));
         if (hasObservers(this.fileRemove)) {
             this.fileRemove.emit(removedFile);
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             this.checkFilesListScroll();
-        });
+        }, { injector: this.injector });
     }
     /**
      * @hidden
@@ -5121,7 +5776,7 @@ class PromptBoxComponent {
         if (hasObservers(this.speechToTextStart)) {
             this.speechToTextStart.emit(event);
         }
-        this.isListening = true;
+        this._isListening.set(true);
     }
     /**
      * @hidden
@@ -5130,7 +5785,7 @@ class PromptBoxComponent {
         if (hasObservers(this.speechToTextEnd)) {
             this.speechToTextEnd.emit(event);
         }
-        this.isListening = false;
+        this._isListening.set(false);
     }
     /**
      * @hidden
@@ -5198,7 +5853,6 @@ class PromptBoxComponent {
                     const ratio = currentHostWidth / this.hostWidthAtCapture;
                     this.singleLineWidth = Math.round(this.singleLineWidth * ratio);
                     this.hostWidthAtCapture = currentHostWidth;
-                    this.changeDetector.markForCheck();
                 }
             }
             this.resize();
@@ -5245,19 +5899,17 @@ class PromptBoxComponent {
         if (!this.hasExpanded) {
             const needsExpansion = textarea.scrollWidth > textarea.clientWidth || textarea.scrollHeight > textarea.clientHeight;
             if (needsExpansion) {
-                this.hasExpanded = true;
-                this.changeDetector.markForCheck();
-                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this._hasExpanded.set(true);
+                afterNextRender(() => {
                     this.updateHeight();
-                });
+                }, { injector: this.injector });
             }
         }
         else {
             this.updateHeight();
             if (this.shouldCollapse()) {
-                this.hasExpanded = false;
+                this._hasExpanded.set(false);
                 this.renderer.removeStyle(textarea, 'height');
-                this.changeDetector.markForCheck();
             }
         }
     }
@@ -5272,6 +5924,11 @@ class PromptBoxComponent {
         const newHeight = this.maxTextAreaHeight ? Math.min(scrollHeight, this.maxTextAreaHeight) : scrollHeight;
         if (newHeight === this.maxTextAreaHeight) {
             this.renderer.removeStyle(textarea, 'overflow');
+            afterNextRender(() => {
+                if (this.textareaElement) {
+                    this.textareaElement.nativeElement.scrollTop = this.textareaElement.nativeElement.scrollHeight;
+                }
+            }, { injector: this.injector });
         }
         this.renderer.setStyle(textarea, 'height', `${newHeight}px`);
     }
@@ -5318,36 +5975,23 @@ class PromptBoxComponent {
     checkFilesListScroll(filesList) {
         const element = filesList || this.filesList?.nativeElement;
         if (!element) {
-            this.hasFilesOverflow = false;
-            this.filesListScrollAtStart = false;
-            this.filesListScrollAtEnd = false;
-            this.changeDetector.markForCheck();
+            this._hasFilesOverflow.set(false);
+            this._filesListScrollAtStart.set(false);
+            this._filesListScrollAtEnd.set(false);
             return;
         }
         const scrollLeft = element.scrollLeft;
         const hasOverflow = element.scrollWidth > element.clientWidth;
-        this.hasFilesOverflow = hasOverflow;
-        this.filesListScrollAtStart = scrollLeft === 0;
-        this.filesListScrollAtEnd = scrollLeft + element.clientWidth >= element.scrollWidth;
-        this.changeDetector.markForCheck();
+        this._hasFilesOverflow.set(hasOverflow);
+        this._filesListScrollAtStart.set(scrollLeft === 0);
+        this._filesListScrollAtEnd.set(scrollLeft + element.clientWidth >= element.scrollWidth);
     }
     update() {
         if (this.mode !== 'single' && this.textareaElement) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.captureInitialDimensions();
                 this.resize();
-            });
-        }
-    }
-    updateComponentSettings(property, settings, defaultSettings) {
-        if (settings === true) {
-            this[property] = defaultSettings;
-        }
-        else if (settings === false) {
-            this[property] = null;
-        }
-        else {
-            this[property] = { ...defaultSettings, ...settings };
+            }, { injector: this.injector });
         }
     }
     subscribeToSpeechToTextButton() {
@@ -5381,7 +6025,7 @@ class PromptBoxComponent {
         this.fileSelectSubscription.add(this.fileSelectButtonComponent.selectAttachments.subscribe((event) => this.handleFileSelectAttachments(event)));
         this.fileSelectSubscription.add(this.fileSelectButtonComponent.sizeChange.subscribe(() => this.update()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ElementRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: PromptBoxComponent, isStandalone: true, selector: "kendo-promptbox", inputs: { disabled: "disabled", focusableId: "focusableId", loading: "loading", placeholder: "placeholder", readonly: "readonly", title: "title", mode: "mode", rows: "rows", maxTextAreaHeight: "maxTextAreaHeight", value: "value", actionButton: "actionButton", fileSelectButton: "fileSelectButton", speechToTextButton: "speechToTextButton" }, outputs: { valueChange: "valueChange", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", promptAction: "promptAction", selectAttachments: "selectAttachments", fileRemove: "fileRemove", speechToTextClick: "speechToTextClick", speechToTextStart: "speechToTextStart", speechToTextEnd: "speechToTextEnd", speechToTextError: "speechToTextError", speechToTextResult: "speechToTextResult" }, host: { properties: { "class.k-prompt-box-singleline": "this.hostSinglelineClass", "class.k-prompt-box-multiline": "this.hostMultilineClass", "class.k-disabled": "this.hostDisabledClass" } }, providers: [
             LocalizationService,
             {
@@ -5579,7 +6223,7 @@ class PromptBoxComponent {
             }
         </div>
         }
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$2, selector: "[kendoPromptBoxLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: PromptBoxActionButtonComponent, selector: "kendo-promptbox-action-button", inputs: ["buttonClass", "loading", "loadingIcon", "loadingSVGIcon"], outputs: ["promptAction"], exportAs: ["kendoPromptBoxActionButton"] }, { kind: "component", type: PromptBoxFileSelectButtonComponent, selector: "kendo-promptbox-fileselect-button", inputs: ["restrictions", "multiple", "accept"], outputs: ["selectAttachments"], exportAs: ["kendoPromptBoxFileSelectButton"] }, { kind: "component", type: PromptBoxSpeechToTextButtonComponent, selector: "kendo-promptbox-speech-to-text-button", inputs: ["continuous", "integrationMode", "interimResults", "lang", "maxAlternatives"], outputs: ["stbClick", "stbStart", "stbEnd", "stbError", "stbResult"], exportAs: ["kendoPromptBoxSpeechToTextButton"] }, { kind: "component", type: PromptBoxFileComponent, selector: "li[promptBoxFile]", inputs: ["promptBoxFile", "removable", "fileActions", "disabled"], outputs: ["remove"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$2, selector: "[kendoPromptBoxLocalizedMessages]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: PromptBoxActionButtonComponent, selector: "kendo-promptbox-action-button", inputs: ["buttonClass", "loading", "loadingIcon", "loadingSVGIcon"], outputs: ["promptAction"], exportAs: ["kendoPromptBoxActionButton"] }, { kind: "component", type: PromptBoxFileSelectButtonComponent, selector: "kendo-promptbox-fileselect-button", inputs: ["restrictions", "multiple", "accept"], outputs: ["selectAttachments"], exportAs: ["kendoPromptBoxFileSelectButton"] }, { kind: "component", type: PromptBoxSpeechToTextButtonComponent, selector: "kendo-promptbox-speech-to-text-button", inputs: ["continuous", "integrationMode", "interimResults", "lang", "maxAlternatives"], outputs: ["stbClick", "stbStart", "stbEnd", "stbError", "stbResult"], exportAs: ["kendoPromptBoxSpeechToTextButton"] }, { kind: "component", type: PromptBoxFileComponent, selector: "li[promptBoxFile]", inputs: ["promptBoxFile", "removable", "fileActions", "disabled"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: PromptBoxComponent, decorators: [{
             type: Component,
@@ -5795,8 +6439,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         PromptBoxSpeechToTextButtonComponent,
                         PromptBoxFileComponent,
                     ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ElementRef }], propDecorators: { hostSinglelineClass: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ElementRef }, { type: i0.Injector }], propDecorators: { hostSinglelineClass: [{
                 type: HostBinding,
                 args: ['class.k-prompt-box-singleline']
             }], hostMultilineClass: [{
@@ -5895,7 +6540,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * @hidden
  */
 class ChatItem {
-    selected;
+    _selected = signal(undefined, ...(ngDevMode ? [{ debugName: "_selected" }] : []));
+    get selected() {
+        return this._selected();
+    }
+    set selected(value) {
+        this._selected.set(value);
+    }
 }
 
 /**
@@ -5903,9 +6554,24 @@ class ChatItem {
  */
 class ChatFileComponent extends ChatItem {
     localization;
-    chatFile;
-    removable = false;
-    fileActions;
+    set chatFile(value) {
+        this._chatFile.set(value);
+    }
+    get chatFile() {
+        return this._chatFile();
+    }
+    set removable(value) {
+        this._removable.set(value);
+    }
+    get removable() {
+        return this._removable();
+    }
+    set fileActions(value) {
+        this._fileActions.set(value);
+    }
+    get fileActions() {
+        return this._fileActions();
+    }
     role = 'listitem';
     get ariaLabel() {
         return `${this.chatFile?.name || ''} ${this.getTotalFilesSizeMessage(this.chatFile)}`.trim();
@@ -5916,6 +6582,9 @@ class ChatFileComponent extends ChatItem {
     actionButtonClick = new EventEmitter();
     deleteIcon = xIcon;
     moreIcon = moreVerticalIcon;
+    _chatFile = signal(undefined, ...(ngDevMode ? [{ debugName: "_chatFile" }] : []));
+    _removable = signal(false, ...(ngDevMode ? [{ debugName: "_removable" }] : []));
+    _fileActions = signal(undefined, ...(ngDevMode ? [{ debugName: "_fileActions" }] : []));
     constructor(localization) {
         super();
         this.localization = localization;
@@ -5973,7 +6642,7 @@ class ChatFileComponent extends ChatItem {
             (close)="actionsToggle.emit(false)"
           ></kendo-dropdownbutton>
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChatFileComponent, decorators: [{
             type: Component,
@@ -6020,6 +6689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
           ></kendo-dropdownbutton>
         }
         `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [IconWrapperComponent, ButtonComponent, DropDownButtonComponent]
                 }]
@@ -6128,7 +6798,13 @@ class MessageReferenceComponent extends ChatItem {
     localization;
     chatService;
     hostClass = true;
-    message;
+    set message(value) {
+        this._message.set(value);
+    }
+    get message() {
+        return this._message();
+    }
+    _message = signal(undefined, ...(ngDevMode ? [{ debugName: "_message" }] : []));
     constructor(localization, chatService) {
         super();
         this.localization = localization;
@@ -6159,7 +6835,7 @@ class MessageReferenceComponent extends ChatItem {
         @if (message.isDeleted && !isOwnMessage(message)) {
           {{ textFor('deletedMessageReceiverText') }}
         }
-        `, isInline: true, dependencies: [{ kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MessageReferenceComponent, decorators: [{
             type: Component,
@@ -6184,6 +6860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
           {{ textFor('deletedMessageReceiverText') }}
         }
         `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [ChatFileComponent]
                 }]
@@ -6304,6 +6981,7 @@ class SuggestedActionsComponent extends ChatItem {
     scrollService;
     ngZone;
     renderer;
+    injector;
     get defaultClass() {
         if (this.type === 'suggestion') {
             return this.chatService.suggestionsLayout === 'wrap' || this.chatService.suggestionsLayout === 'scroll';
@@ -6335,11 +7013,36 @@ class SuggestedActionsComponent extends ChatItem {
         }
         return null;
     }
-    actions;
-    suggestions;
-    tabbable;
-    type;
-    suggestionTemplate;
+    set actions(value) {
+        this._actions.set(value);
+    }
+    get actions() {
+        return this._actions();
+    }
+    set suggestions(value) {
+        this._suggestions.set(value);
+    }
+    get suggestions() {
+        return this._suggestions();
+    }
+    set tabbable(value) {
+        this._tabbable.set(value);
+    }
+    get tabbable() {
+        return this._tabbable();
+    }
+    set type(value) {
+        this._type.set(value);
+    }
+    get type() {
+        return this._type();
+    }
+    set suggestionTemplate(value) {
+        this._suggestionTemplate.set(value);
+    }
+    get suggestionTemplate() {
+        return this._suggestionTemplate();
+    }
     dispatchAction = new EventEmitter();
     dispatchSuggestion = new EventEmitter();
     items;
@@ -6366,6 +7069,11 @@ class SuggestedActionsComponent extends ChatItem {
             : this.chatService.quickActionsLayout === 'scrollbuttons';
     }
     subscriptions = new Subscription();
+    _actions = signal(undefined, ...(ngDevMode ? [{ debugName: "_actions" }] : []));
+    _suggestions = signal(undefined, ...(ngDevMode ? [{ debugName: "_suggestions" }] : []));
+    _tabbable = signal(undefined, ...(ngDevMode ? [{ debugName: "_tabbable" }] : []));
+    _type = signal(undefined, ...(ngDevMode ? [{ debugName: "_type" }] : []));
+    _suggestionTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_suggestionTemplate" }] : []));
     actionKeyHandlers = {
         [Keys.Tab]: (e) => this.changeSelectedIndex(e),
         [Keys.Enter]: (e, action) => {
@@ -6384,13 +7092,14 @@ class SuggestedActionsComponent extends ChatItem {
         [Keys.Enter]: (_, suggestion) => this.suggestionClick(suggestion),
         [Keys.Space]: (_, suggestion) => this.suggestionClick(suggestion),
     };
-    constructor(chatService, localization, scrollService, ngZone, renderer) {
+    constructor(chatService, localization, scrollService, ngZone, renderer, injector) {
         super();
         this.chatService = chatService;
         this.localization = localization;
         this.scrollService = scrollService;
         this.ngZone = ngZone;
         this.renderer = renderer;
+        this.injector = injector;
         this.scrollService.owner = this;
     }
     ngAfterViewInit() {
@@ -6399,29 +7108,29 @@ class SuggestedActionsComponent extends ChatItem {
             : this.chatService.quickActionsLayoutChange$;
         this.subscriptions.add(layoutChangeObservable.subscribe((layoutMode) => {
             if (layoutMode === 'scrollbuttons') {
-                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                afterNextRender(() => {
                     if (this.suggestionsContainer) {
                         this.scrollService.updateScrollPosition(this.suggestionsContainer.nativeElement);
                     }
                     this.scrollService.toggleScrollButtonsState();
-                });
+                }, { injector: this.injector });
             }
         }));
         this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((change) => {
             this.toggleScrollButtonState(change.buttonType, change.active);
         }));
         if (this.hasScrollButtons) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.scrollService.toggleScrollButtonsState();
-            });
+            }, { injector: this.injector });
             if (this.suggestionsContainer) {
                 this.scrollService.updateScrollPosition(this.suggestionsContainer.nativeElement);
             }
         }
         if (this.isScrollable && this.scrollableContainer) {
-            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.updateScrollableState();
-            });
+            }, { injector: this.injector });
         }
     }
     ngOnDestroy() {
@@ -6514,7 +7223,7 @@ class SuggestedActionsComponent extends ChatItem {
         const prevIndex = this.selectedIndex;
         this.selectedIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SuggestedActionsComponent, deps: [{ token: ChatService }, { token: i1.LocalizationService }, { token: SuggestionsScrollService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SuggestedActionsComponent, deps: [{ token: ChatService }, { token: i1.LocalizationService }, { token: SuggestionsScrollService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", suggestions: "suggestions", tabbable: "tabbable", type: "type", suggestionTemplate: "suggestionTemplate" }, outputs: { dispatchAction: "dispatchAction", dispatchSuggestion: "dispatchSuggestion" }, host: { properties: { "class.k-suggestion-group": "this.defaultClass", "class.k-suggestion-group-scrollable": "this.scrollableClass", "class.k-suggestion-scrollwrap": "this.scrollButtonsClass", "class.k-suggestion-group-scrollable-start": "this.scrollStartClass", "class.k-suggestion-group-scrollable-end": "this.scrollEndClass", "attr.role": "this.role" } }, providers: [
             {
                 provide: ChatItem,
@@ -6604,11 +7313,12 @@ class SuggestedActionsComponent extends ChatItem {
         >
         </span>
         }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatScrollableButtonComponent, selector: "[kendoChatScrollableButton]", inputs: ["prev"], outputs: ["onClick"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatScrollableButtonComponent, selector: "[kendoChatScrollableButton]", inputs: ["prev"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-chat-suggested-actions',
                     providers: [
                         {
@@ -6704,7 +7414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     standalone: true,
                     imports: [NgTemplateOutlet, ChatScrollableButtonComponent],
                 }]
-        }], ctorParameters: () => [{ type: ChatService }, { type: i1.LocalizationService }, { type: SuggestionsScrollService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { defaultClass: [{
+        }], ctorParameters: () => [{ type: ChatService }, { type: i1.LocalizationService }, { type: SuggestionsScrollService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.Injector }], propDecorators: { defaultClass: [{
                 type: HostBinding,
                 args: ['class.k-suggestion-group']
             }], scrollableClass: [{
@@ -6855,18 +7565,78 @@ class MessageBoxComponent {
     messageBoxWrapperClass = true;
     messageBoxInput;
     suggestedActionsComponent;
-    authorId;
-    autoScroll;
-    suggestions;
-    placeholder;
-    inputValue = '';
-    localization;
-    messageBoxTemplate;
-    messageBoxStartAffixTemplate;
-    messageBoxEndAffixTemplate;
-    messageBoxTopAffixTemplate;
-    suggestionTemplate;
-    loading;
+    set authorId(value) {
+        this._authorId.set(value);
+    }
+    get authorId() {
+        return this._authorId();
+    }
+    set autoScroll(value) {
+        this._autoScroll.set(value);
+    }
+    get autoScroll() {
+        return this._autoScroll();
+    }
+    set suggestions(value) {
+        this._suggestions.set(value);
+    }
+    get suggestions() {
+        return this._suggestions();
+    }
+    set placeholder(value) {
+        this._placeholder.set(value);
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
+    set inputValue(value) {
+        this._inputValue.set(value);
+    }
+    get inputValue() {
+        return this._inputValue();
+    }
+    set localization(value) {
+        this._localization.set(value);
+    }
+    get localization() {
+        return this._localization();
+    }
+    set messageBoxTemplate(value) {
+        this._messageBoxTemplate.set(value);
+    }
+    get messageBoxTemplate() {
+        return this._messageBoxTemplate();
+    }
+    set messageBoxStartAffixTemplate(value) {
+        this._messageBoxStartAffixTemplate.set(value);
+    }
+    get messageBoxStartAffixTemplate() {
+        return this._messageBoxStartAffixTemplate();
+    }
+    set messageBoxEndAffixTemplate(value) {
+        this._messageBoxEndAffixTemplate.set(value);
+    }
+    get messageBoxEndAffixTemplate() {
+        return this._messageBoxEndAffixTemplate();
+    }
+    set messageBoxTopAffixTemplate(value) {
+        this._messageBoxTopAffixTemplate.set(value);
+    }
+    get messageBoxTopAffixTemplate() {
+        return this._messageBoxTopAffixTemplate();
+    }
+    set suggestionTemplate(value) {
+        this._suggestionTemplate.set(value);
+    }
+    get suggestionTemplate() {
+        return this._suggestionTemplate();
+    }
+    set loading(value) {
+        this._loading.set(value);
+    }
+    get loading() {
+        return this._loading();
+    }
     sendMessage = new EventEmitter();
     executeSuggestion = new EventEmitter();
     fileSelect = new EventEmitter();
@@ -6878,6 +7648,18 @@ class MessageBoxComponent {
     }
     selectedItem;
     subs = new Subscription();
+    _authorId = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorId" }] : []));
+    _autoScroll = signal(undefined, ...(ngDevMode ? [{ debugName: "_autoScroll" }] : []));
+    _suggestions = signal(undefined, ...(ngDevMode ? [{ debugName: "_suggestions" }] : []));
+    _placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _inputValue = signal('', ...(ngDevMode ? [{ debugName: "_inputValue" }] : []));
+    _localization = signal(undefined, ...(ngDevMode ? [{ debugName: "_localization" }] : []));
+    _messageBoxTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxTemplate" }] : []));
+    _messageBoxStartAffixTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxStartAffixTemplate" }] : []));
+    _messageBoxEndAffixTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxEndAffixTemplate" }] : []));
+    _messageBoxTopAffixTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxTopAffixTemplate" }] : []));
+    _suggestionTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_suggestionTemplate" }] : []));
+    _loading = signal(undefined, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
     constructor(chatService, cdr, element, renderer) {
         this.chatService = chatService;
         this.cdr = cdr;
@@ -6924,7 +7706,7 @@ class MessageBoxComponent {
         this.sendMessage.emit(new SendMessageEvent(message));
         this.inputValue = '';
         if (this.messageBoxInput) {
-            this.messageBoxInput.attachments = [];
+            this.messageBoxInput.clearAttachments();
         }
         this.chatService.reply = null;
         this.messageBoxInput.focus();
@@ -7037,6 +7819,8 @@ class MessageBoxComponent {
                 item.selected = true;
                 this.selectedItem = item;
             }
+            // detectChanges is needed because ChatItem.selected is a plain property on external
+            // objects (not signals), so we must explicitly trigger view re-evaluation with OnPush.
             this.cdr.detectChanges();
         }
         this.chatService.toggleMessageState = false;
@@ -7147,11 +7931,12 @@ class MessageBoxComponent {
         } @if (messageBoxTemplate?.templateRef) {
         <ng-template [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
         }
-    `, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PromptBoxComponent, selector: "kendo-promptbox", inputs: ["disabled", "focusableId", "loading", "placeholder", "readonly", "title", "mode", "rows", "maxTextAreaHeight", "value", "actionButton", "fileSelectButton", "speechToTextButton"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur", "promptAction", "selectAttachments", "fileRemove", "speechToTextClick", "speechToTextStart", "speechToTextEnd", "speechToTextError", "speechToTextResult"], exportAs: ["kendoPromptBox"] }, { kind: "component", type: PromptBoxCustomMessagesComponent, selector: "kendo-promptbox-messages" }, { kind: "directive", type: PromptBoxHeaderTemplateDirective, selector: "[kendoPromptBoxHeaderTemplate]" }, { kind: "component", type: PromptBoxStartAffixComponent, selector: "kendo-promptbox-start-affix", exportAs: ["kendoPromptBoxStartAffix"] }, { kind: "component", type: PromptBoxTopAffixComponent, selector: "kendo-promptbox-top-affix", exportAs: ["kendoPromptBoxTopAffix"] }, { kind: "component", type: PromptBoxEndAffixComponent, selector: "kendo-promptbox-end-affix", exportAs: ["kendoPromptBoxEndAffix"] }, { kind: "component", type: PromptBoxFileSelectButtonComponent, selector: "kendo-promptbox-fileselect-button", inputs: ["restrictions", "multiple", "accept"], outputs: ["selectAttachments"], exportAs: ["kendoPromptBoxFileSelectButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }] });
+    `, isInline: true, dependencies: [{ 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PromptBoxComponent, selector: "kendo-promptbox", inputs: ["disabled", "focusableId", "loading", "placeholder", "readonly", "title", "mode", "rows", "maxTextAreaHeight", "value", "actionButton", "fileSelectButton", "speechToTextButton"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur", "promptAction", "selectAttachments", "fileRemove", "speechToTextClick", "speechToTextStart", "speechToTextEnd", "speechToTextError", "speechToTextResult"], exportAs: ["kendoPromptBox"] }, { kind: "component", type: PromptBoxCustomMessagesComponent, selector: "kendo-promptbox-messages" }, { kind: "directive", type: PromptBoxHeaderTemplateDirective, selector: "[kendoPromptBoxHeaderTemplate]" }, { kind: "component", type: PromptBoxStartAffixComponent, selector: "kendo-promptbox-start-affix", exportAs: ["kendoPromptBoxStartAffix"] }, { kind: "component", type: PromptBoxTopAffixComponent, selector: "kendo-promptbox-top-affix", exportAs: ["kendoPromptBoxTopAffix"] }, { kind: "component", type: PromptBoxEndAffixComponent, selector: "kendo-promptbox-end-affix", exportAs: ["kendoPromptBoxEndAffix"] }, { kind: "component", type: PromptBoxFileSelectButtonComponent, selector: "kendo-promptbox-fileselect-button", inputs: ["restrictions", "multiple", "accept"], outputs: ["selectAttachments"], exportAs: ["kendoPromptBoxFileSelectButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MessageBoxComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-message-box',
                     template: `
         @if (suggestions?.length > 0) {
@@ -7317,9 +8102,10 @@ class MessageComponent extends ChatItem {
     localization;
     cdr;
     zone;
+    injector;
     set message(value) {
-        const textChanged = this._message && value && this._message.text !== value.text;
-        this._message = value;
+        const textChanged = this._message() && value && this._message().text !== value.text;
+        this._message.set(value);
         if (textChanged) {
             this.parts = this.getFormattedTextParts(value.text);
             if (this.isMessageExpandable && !this.showExpandCollapseIcon) {
@@ -7327,19 +8113,69 @@ class MessageComponent extends ChatItem {
             }
         }
     }
-    get message() {
-        return this._message;
-    }
-    tabbable;
-    authorMessageContentTemplate;
-    receiverMessageContentTemplate;
-    messageContentTemplate;
-    authorMessageTemplate;
-    receiverMessageTemplate;
-    messageTemplate;
-    statusTemplate;
-    showMessageTime = true;
-    authorId;
+    get message() {
+        return this._message();
+    }
+    set tabbable(value) {
+        this._tabbable.set(value);
+    }
+    get tabbable() {
+        return this._tabbable();
+    }
+    set authorMessageContentTemplate(value) {
+        this._authorMessageContentTemplate.set(value);
+    }
+    get authorMessageContentTemplate() {
+        return this._authorMessageContentTemplate();
+    }
+    set receiverMessageContentTemplate(value) {
+        this._receiverMessageContentTemplate.set(value);
+    }
+    get receiverMessageContentTemplate() {
+        return this._receiverMessageContentTemplate();
+    }
+    set messageContentTemplate(value) {
+        this._messageContentTemplate.set(value);
+    }
+    get messageContentTemplate() {
+        return this._messageContentTemplate();
+    }
+    set authorMessageTemplate(value) {
+        this._authorMessageTemplate.set(value);
+    }
+    get authorMessageTemplate() {
+        return this._authorMessageTemplate();
+    }
+    set receiverMessageTemplate(value) {
+        this._receiverMessageTemplate.set(value);
+    }
+    get receiverMessageTemplate() {
+        return this._receiverMessageTemplate();
+    }
+    set messageTemplate(value) {
+        this._messageTemplate.set(value);
+    }
+    get messageTemplate() {
+        return this._messageTemplate();
+    }
+    set statusTemplate(value) {
+        this._statusTemplate.set(value);
+    }
+    get statusTemplate() {
+        return this._statusTemplate();
+    }
+    set showMessageTime(value) {
+        this._showMessageTime.set(value);
+    }
+    get showMessageTime() {
+        return this._showMessageTime();
+    }
+    set authorId(value) {
+        this._authorId.set(value);
+    }
+    get authorId() {
+        return this._authorId();
+    }
     cssClass = true;
     get failedClass() {
         return this.message.failed;
@@ -7356,7 +8192,6 @@ class MessageComponent extends ChatItem {
         }
         this.onExpandableKeydown(event);
     }
-    selected;
     get tabIndex() {
         return this.tabbable ? '0' : '-1';
     }
@@ -7365,11 +8200,21 @@ class MessageComponent extends ChatItem {
     downloadIcon = downloadIcon;
     resendIcon = arrowRotateCwIcon;
     messageFailedIcon = warningTriangleIcon;
-    isMessageExpanded = false;
-    showExpandCollapseIcon = false;
     fileActions = [];
     toolbarActions = [];
     parts = [];
+    get isMessageExpanded() {
+        return this._isMessageExpanded();
+    }
+    set isMessageExpanded(value) {
+        this._isMessageExpanded.set(value);
+    }
+    get showExpandCollapseIcon() {
+        return this._showExpandCollapseIcon();
+    }
+    set showExpandCollapseIcon(value) {
+        this._showExpandCollapseIcon.set(value);
+    }
     get useCustomBubbleTemplate() {
         return !!this.getActiveBubbleTemplate();
     }
@@ -7416,8 +8261,20 @@ class MessageComponent extends ChatItem {
         return hasComponentActions || hasMessageActions;
     }
     subs = new Subscription();
-    _message;
-    constructor(element, intl, chatService, localization, cdr, zone) {
+    _message = signal(undefined, ...(ngDevMode ? [{ debugName: "_message" }] : []));
+    _tabbable = signal(undefined, ...(ngDevMode ? [{ debugName: "_tabbable" }] : []));
+    _authorMessageContentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorMessageContentTemplate" }] : []));
+    _receiverMessageContentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_receiverMessageContentTemplate" }] : []));
+    _messageContentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageContentTemplate" }] : []));
+    _authorMessageTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorMessageTemplate" }] : []));
+    _receiverMessageTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_receiverMessageTemplate" }] : []));
+    _messageTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageTemplate" }] : []));
+    _statusTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_statusTemplate" }] : []));
+    _showMessageTime = signal(true, ...(ngDevMode ? [{ debugName: "_showMessageTime" }] : []));
+    _authorId = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorId" }] : []));
+    _isMessageExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isMessageExpanded" }] : []));
+    _showExpandCollapseIcon = signal(false, ...(ngDevMode ? [{ debugName: "_showExpandCollapseIcon" }] : []));
+    constructor(element, intl, chatService, localization, cdr, zone, injector) {
         super();
         this.element = element;
         this.intl = intl;
@@ -7425,6 +8282,7 @@ class MessageComponent extends ChatItem {
         this.localization = localization;
         this.cdr = cdr;
         this.zone = zone;
+        this.injector = injector;
     }
     ngOnInit() {
         this.fileActions = this.getFileActions();
@@ -7444,7 +8302,7 @@ class MessageComponent extends ChatItem {
                 this.updateExpandCollapseIconAfterStable();
             }
             else {
-                this.showExpandCollapseIcon = false;
+                this._showExpandCollapseIcon.set(false);
             }
         }));
         this.subs.add(this.chatService.messageToolbarActionsChange$.subscribe(() => {
@@ -7527,9 +8385,8 @@ class MessageComponent extends ChatItem {
     }
     toggleMessageState(event) {
         event.stopImmediatePropagation();
-        this.isMessageExpanded = !this.isMessageExpanded;
+        this._isMessageExpanded.update(v => !v);
         this.chatService.toggleMessageState = false;
-        this.cdr.detectChanges();
     }
     onExpandableKeydown(event) {
         const key = normalizeKeys(event);
@@ -7645,12 +8502,11 @@ class MessageComponent extends ChatItem {
         return transformActions(actions);
     }
     updateExpandCollapseIconAfterStable() {
-        this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
-            this.showExpandCollapseIcon = this.calculateExpandCollapseIconVisibility();
-            this.cdr.detectChanges();
-        }));
+        afterNextRender(() => {
+            this._showExpandCollapseIcon.set(this.calculateExpandCollapseIconVisibility());
+        }, { injector: this.injector });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: ChatService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: ChatService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: MessageComponent, isStandalone: true, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", authorMessageContentTemplate: "authorMessageContentTemplate", receiverMessageContentTemplate: "receiverMessageContentTemplate", messageContentTemplate: "messageContentTemplate", authorMessageTemplate: "authorMessageTemplate", receiverMessageTemplate: "receiverMessageTemplate", messageTemplate: "messageTemplate", statusTemplate: "statusTemplate", showMessageTime: "showMessageTime", authorId: "authorId" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.k-message": "this.cssClass", "class.k-message-failed": "this.failedClass", "class.k-message-removed": "this.removedClass", "attr.tabIndex": "this.tabIndex" } }, providers: [
             {
                 provide: ChatItem,
@@ -7865,11 +8721,12 @@ class MessageComponent extends ChatItem {
             }
         </kendo-toolbar>
         }
-    `, 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: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }] });
+    `, 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: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-chat-message',
                     providers: [
                         {
@@ -8100,7 +8957,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         ButtonComponent,
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.IntlService }, { type: ChatService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { message: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.IntlService }, { type: ChatService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { message: [{
                 type: Input
             }], tabbable: [{
                 type: Input
@@ -8144,13 +9001,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  */
 class AttachmentComponent {
     set attachment(value) {
-        this._attachment = value;
-        this.context = {
-            $implicit: this.attachment
-        };
+        this._attachment.set(value);
+        this.context = { $implicit: value };
     }
     get attachment() {
-        return this._attachment;
+        return this._attachment();
     }
     template;
     get image() {
@@ -8163,7 +9018,7 @@ class AttachmentComponent {
     get contentType() {
         return this.attachment.contentType || '';
     }
-    _attachment;
+    _attachment = signal(undefined, ...(ngDevMode ? [{ debugName: "_attachment" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: AttachmentComponent, isStandalone: true, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
         @if (template) {
@@ -8193,7 +9048,7 @@ class AttachmentComponent {
             </div>
           </div>
         }
-        `, 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: "20.3.27", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
@@ -8228,6 +9083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
           </div>
         }
         `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [NgTemplateOutlet]
                 }]
@@ -8252,20 +9108,52 @@ class MessageAttachmentsComponent extends ChatItem {
      * @hidden
      */
     chevronRightIcon = chevronRightIcon;
-    attachments;
-    layout;
-    tabbable;
-    template;
-    localization;
+    set attachments(value) {
+        this._attachments.set(value);
+    }
+    get attachments() {
+        return this._attachments();
+    }
+    set layout(value) {
+        this._layout.set(value);
+    }
+    get layout() {
+        return this._layout();
+    }
+    set tabbable(value) {
+        this._tabbable.set(value);
+    }
+    get tabbable() {
+        return this._tabbable();
+    }
+    set template(value) {
+        this._template.set(value);
+    }
+    get template() {
+        return this._template();
+    }
+    set localization(value) {
+        this._localization.set(value);
+    }
+    get localization() {
+        return this._localization();
+    }
     get carousel() {
         return this.layout !== 'list';
     }
     deck;
     items;
-    scrollPosition = 0;
+    _scrollPosition = signal(0, ...(ngDevMode ? [{ debugName: "_scrollPosition" }] : []));
+    get scrollPosition() { return this._scrollPosition(); }
+    set scrollPosition(v) { this._scrollPosition.set(v); }
     selectedIndex = 0;
     scrollSubscription;
     direction;
+    _attachments = signal(undefined, ...(ngDevMode ? [{ debugName: "_attachments" }] : []));
+    _layout = signal(undefined, ...(ngDevMode ? [{ debugName: "_layout" }] : []));
+    _tabbable = signal(undefined, ...(ngDevMode ? [{ debugName: "_tabbable" }] : []));
+    _template = signal(undefined, ...(ngDevMode ? [{ debugName: "_template" }] : []));
+    _localization = signal(undefined, ...(ngDevMode ? [{ debugName: "_localization" }] : []));
     get showLeftArrow() {
         return this.carousel && (this.direction === 'rtl' ? this.scrollPosition > -1 : this.scrollPosition > 0);
     }
@@ -8400,7 +9288,7 @@ class MessageAttachmentsComponent extends ChatItem {
             >
           </button>
         }
-        `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
+        `, isInline: true, dependencies: [{ 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"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
             type: Component,
@@ -8455,6 +9343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
           </button>
         }
         `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true,
                     imports: [ButtonComponent, AttachmentComponent]
                 }]
@@ -8491,30 +9380,102 @@ class MessageListComponent {
     set messages(value) {
         const data = value || [];
         this.view = chatView(data);
-        this._messages = data;
+        this._messages.set(data);
     }
     get messages() {
-        return this._messages;
-    }
-    attachmentTemplate;
-    authorMessageContentTemplate;
-    receiverMessageContentTemplate;
-    messageContentTemplate;
-    authorMessageTemplate;
-    receiverMessageTemplate;
-    messageTemplate;
-    timestampTemplate;
-    statusTemplate;
-    userStatusTemplate;
-    localization;
-    authorId;
+        return this._messages();
+    }
+    set attachmentTemplate(value) {
+        this._attachmentTemplate.set(value);
+    }
+    get attachmentTemplate() {
+        return this._attachmentTemplate();
+    }
+    set authorMessageContentTemplate(value) {
+        this._authorMessageContentTemplate.set(value);
+    }
+    get authorMessageContentTemplate() {
+        return this._authorMessageContentTemplate();
+    }
+    set receiverMessageContentTemplate(value) {
+        this._receiverMessageContentTemplate.set(value);
+    }
+    get receiverMessageContentTemplate() {
+        return this._receiverMessageContentTemplate();
+    }
+    set messageContentTemplate(value) {
+        this._messageContentTemplate.set(value);
+    }
+    get messageContentTemplate() {
+        return this._messageContentTemplate();
+    }
+    set authorMessageTemplate(value) {
+        this._authorMessageTemplate.set(value);
+    }
+    get authorMessageTemplate() {
+        return this._authorMessageTemplate();
+    }
+    set receiverMessageTemplate(value) {
+        this._receiverMessageTemplate.set(value);
+    }
+    get receiverMessageTemplate() {
+        return this._receiverMessageTemplate();
+    }
+    set messageTemplate(value) {
+        this._messageTemplate.set(value);
+    }
+    get messageTemplate() {
+        return this._messageTemplate();
+    }
+    set timestampTemplate(value) {
+        this._timestampTemplate.set(value);
+    }
+    get timestampTemplate() {
+        return this._timestampTemplate();
+    }
+    set statusTemplate(value) {
+        this._statusTemplate.set(value);
+    }
+    get statusTemplate() {
+        return this._statusTemplate();
+    }
+    set userStatusTemplate(value) {
+        this._userStatusTemplate.set(value);
+    }
+    get userStatusTemplate() {
+        return this._userStatusTemplate();
+    }
+    set localization(value) {
+        this._localization.set(value);
+    }
+    get localization() {
+        return this._localization();
+    }
+    set authorId(value) {
+        this._authorId.set(value);
+    }
+    get authorId() {
+        return this._authorId();
+    }
     executeAction = new EventEmitter();
     navigate = new EventEmitter();
     resize = new EventEmitter();
     items;
     cssClass = true;
     view = [];
-    _messages;
+    _messages = signal([], ...(ngDevMode ? [{ debugName: "_messages" }] : []));
+    _attachmentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_attachmentTemplate" }] : []));
+    _authorMessageContentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorMessageContentTemplate" }] : []));
+    _receiverMessageContentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_receiverMessageContentTemplate" }] : []));
+    _messageContentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageContentTemplate" }] : []));
+    _authorMessageTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorMessageTemplate" }] : []));
+    _receiverMessageTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_receiverMessageTemplate" }] : []));
+    _messageTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageTemplate" }] : []));
+    _timestampTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_timestampTemplate" }] : []));
+    _statusTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_statusTemplate" }] : []));
+    _userStatusTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_userStatusTemplate" }] : []));
+    _localization = signal(undefined, ...(ngDevMode ? [{ debugName: "_localization" }] : []));
+    _authorId = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorId" }] : []));
     subs = new Subscription();
     selectedItem;
     keyActions = {
@@ -8876,11 +9837,12 @@ class MessageListComponent {
         </kendo-chat-suggested-actions>
         } } }
         <kendo-resize-sensor (resize)="onResize()"> </kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "statusTemplate", "showMessageTime", "authorId"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "ngmodule", type: ButtonsModule }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "statusTemplate", "showMessageTime", "authorId"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "ngmodule", type: ButtonsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'kendo-chat-message-list',
                     template: `
         @for (group of view; track trackGroup($index, group); let lastGroup = $last) { @switch (group.type) { @case
@@ -9061,16 +10023,27 @@ class ChatComponent {
     renderer;
     element;
     chatService;
+    injector;
     /**
      * Sets the Chat messages.
      * Accepts an array of `Message` objects, but can also accept custom data types.
      * For more information, check [Data Binding](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/chat/data-binding) section in the documentation.
      */
-    messages;
+    set messages(value) {
+        this._messages.set(value);
+    }
+    get messages() {
+        return this._messages();
+    }
     /**
      * Sets the ID that represents the local user.
      */
-    authorId;
+    set authorId(value) {
+        this._authorId.set(value);
+    }
+    get authorId() {
+        return this._authorId();
+    }
     /**
      * Determines the type of input used in the message box.
      * ([see example](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/chat/message)).
@@ -9078,92 +10051,172 @@ class ChatComponent {
      *
      * @hidden
      */
-    messageBoxType = 'textarea';
+    set messageBoxType(value) {
+        this._messageBoxType.set(value);
+    }
+    get messageBoxType() {
+        return this._messageBoxType();
+    }
     /**
      * Sets the height of the Chat component.
      * Accepts a string with CSS units (for example, `'400px'`, `'50%'`) or a number (interpreted as pixels).
      * The minimum height is `600px`.
      */
-    height;
+    set height(value) {
+        this._height.set(value);
+    }
+    get height() {
+        return this._height();
+    }
     /**
      * Sets the width of the Chat component.
      * Accepts a string with CSS units (for example, `'400px'`, `'50%'`) or a number (interpreted as pixels).
      * The minimum width is `320px`.
      */
-    width;
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
     /**
      * Sets the placeholder text for the message input box.
      */
-    placeholder;
+    set placeholder(value) {
+        this._placeholder.set(value);
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
     /**
      * Controls the width of the message between the predefined options.
      *
      * @default 'standard'
      */
-    messageWidthMode = 'standard';
+    set messageWidthMode(value) {
+        this._messageWidthMode.set(value);
+    }
+    get messageWidthMode() {
+        return this._messageWidthMode();
+    }
     /**
      * Controls the visibility of timestamps in messages.
      *
      * @default 'focus'
      */
-    timestampVisibility = 'focus';
+    set timestampVisibility(value) {
+        this._timestampVisibility.set(value);
+    }
+    get timestampVisibility() {
+        return this._timestampVisibility();
+    }
     /**
      * Controls the visibility of usernames in messages.
      * When set to `true`, the username displays above each message bubble.
      *
      * @default true
      */
-    showUsername = true;
+    set showUsername(value) {
+        this._showUsername.set(value);
+    }
+    get showUsername() {
+        return this._showUsername();
+    }
     /**
      * Controls the avatar visibility for the messages.
      * When set to `true`, the user avatar displays next to each message bubble.
      *
      * @default true
      */
-    showAvatar = true;
+    set showAvatar(value) {
+        this._showAvatar.set(value);
+    }
+    get showAvatar() {
+        return this._showAvatar();
+    }
     /**
      * Enables the expand or collapse functionality for messages.
      *
      * @default false
      */
-    allowMessageCollapse = false;
+    set allowMessageCollapse(value) {
+        this._allowMessageCollapse.set(value);
+    }
+    get allowMessageCollapse() {
+        return this._allowMessageCollapse();
+    }
     /**
      * Sets the Speech to Text button settings.
      *
      * @default true
      */
-    speechToTextButton = true;
+    set speechToTextButton(value) {
+        this._speechToTextButton.set(value);
+    }
+    get speechToTextButton() {
+        return this._speechToTextButton();
+    }
     /**
      * Sets the File Select Button settings.
      *
      * @default true
      */
-    fileSelectButton = true;
+    set fileSelectButton(value) {
+        this._fileSelectButton.set(value);
+    }
+    get fileSelectButton() {
+        return this._fileSelectButton();
+    }
     /**
      * Sets the message box settings.
      */
-    messageBoxSettings = MESSAGE_BOX_SETTINGS;
+    set messageBoxSettings(value) {
+        this._messageBoxSettings.set(value);
+    }
+    get messageBoxSettings() {
+        return this._messageBoxSettings();
+    }
     /**
      * Sets the actions of the message toolbar.
      * These actions display in the message toolbar and let you perform specific operations on the message.
      *
      * @default []
      */
-    messageToolbarActions = [];
+    set messageToolbarActions(value) {
+        this._messageToolbarActions.set(value);
+    }
+    get messageToolbarActions() {
+        return this._messageToolbarActions();
+    }
     /**
      * Sets the value of the Message Box.
      *
      * @default ''
      */
-    inputValue = '';
+    set inputValue(value) {
+        this._inputValue.set(value);
+    }
+    get inputValue() {
+        return this._inputValue();
+    }
     /**
      * Sets the settings for the author's messages.
      */
-    authorMessageSettings;
+    set authorMessageSettings(value) {
+        this._authorMessageSettings.set(value);
+    }
+    get authorMessageSettings() {
+        return this._authorMessageSettings();
+    }
     /**
      * Sets the settings for the receivers' messages.
      */
-    receiverMessageSettings;
+    set receiverMessageSettings(value) {
+        this._receiverMessageSettings.set(value);
+    }
+    get receiverMessageSettings() {
+        return this._receiverMessageSettings();
+    }
     /**
      * Sets the default actions that display in the message context menu.
      *
@@ -9176,10 +10229,10 @@ class ChatComponent {
      * The default actions are `copy` and `reply` and are defined by their `id`.
      */
     set messageContextMenuActions(actions) {
-        this._messageContextMenuActions = this.mergeWithDefaultActions(actions, CONTEXT_MENU_ACTIONS);
+        this._messageContextMenuActions.set(this.mergeWithDefaultActions(actions, CONTEXT_MENU_ACTIONS));
     }
     get messageContextMenuActions() {
-        return this._messageContextMenuActions;
+        return this._messageContextMenuActions();
     }
     /**
      * Sets the default actions that display in the file actions DropDownButton.
@@ -9195,10 +10248,10 @@ class ChatComponent {
      * @default [{ id: 'download', label: 'Download', icon: 'download', svgIcon: downloadIcon, disabled: false }]
      */
     set fileActions(actions) {
-        this._fileActions = this.mergeWithDefaultActions(actions, FILE_ACTIONS);
+        this._fileActions.set(this.mergeWithDefaultActions(actions, FILE_ACTIONS));
     }
     get fileActions() {
-        return this._fileActions;
+        return this._fileActions();
     }
     /**
      * Sets the layout of the files in the message bubble.
@@ -9206,42 +10259,64 @@ class ChatComponent {
      * @default 'vertical'
      */
     set messageFilesLayout(layout) {
+        this._messageFilesLayout.set(layout);
         this.chatService.messageFilesLayout = layout;
     }
+    get messageFilesLayout() {
+        return this._messageFilesLayout();
+    }
     /**
      * Sets the layout of the suggestions above the message input box.
      *
      * @default 'scroll'
      */
     set suggestionsLayout(layoutMode) {
+        this._suggestionsLayout.set(layoutMode);
         if (layoutMode) {
             this.chatService.suggestionsLayout = layoutMode;
         }
     }
+    get suggestionsLayout() {
+        return this._suggestionsLayout();
+    }
     /**
      * Sets the layout of the quick actions suggested below the messages.
      *
      * @default 'scroll'
      */
     set quickActionsLayout(layoutMode) {
+        this._quickActionsLayout.set(layoutMode);
         if (layoutMode) {
             this.chatService.quickActionsLayout = layoutMode;
         }
     }
+    get quickActionsLayout() {
+        return this._quickActionsLayout();
+    }
     /**
      * Sets the suggestions that display in the message input box.
      * Suggestions display as a list of clickable items that let you quickly insert predefined text into the message input.
      *
      * @default []
      */
-    suggestions = [];
+    set suggestions(value) {
+        this._suggestions.set(value);
+    }
+    get suggestions() {
+        return this._suggestions();
+    }
     /**
      * Sets the send button settings for the Chat component.
      * Allows customization of the send button appearance, icons and disabled state.
      *
      * @default true
      */
-    sendButton = true;
+    set sendButton(value) {
+        this._sendButton.set(value);
+    }
+    get sendButton() {
+        return this._sendButton();
+    }
     /**
      * @hidden
      */
@@ -9256,14 +10331,24 @@ class ChatComponent {
      *
      * @default 'scrollable'
      */
-    scrollMode = 'scrollable';
+    set scrollMode(value) {
+        this._scrollMode.set(value);
+    }
+    get scrollMode() {
+        return this._scrollMode();
+    }
     /**
      * Sets the number of messages loaded per page in endless scroll mode.
      * Ignored in `scrollable` mode.
      *
      * @default 50
      */
-    pageSize = 50;
+    set pageSize(value) {
+        this._pageSize.set(value);
+    }
+    get pageSize() {
+        return this._pageSize();
+    }
     /**
      * Sets the minimum distance from the top of the visible message area that prevents auto-scrolling when a new receiver message arrives.
      * Accepts a percentage string (for example, `'30%'`) or a pixel value as a number. Set to `0` to always auto-scroll to new messages.
@@ -9274,23 +10359,43 @@ class ChatComponent {
      *
      * @default '20%'
      */
-    autoScrollThreshold = '20%';
+    set autoScrollThreshold(value) {
+        this._autoScrollThreshold.set(value);
+    }
+    get autoScrollThreshold() {
+        return this._autoScrollThreshold();
+    }
     /**
      * Sets the total number of messages in the conversation when using endless scrolling with remote data source. For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation.
      */
-    total;
+    set total(value) {
+        this._total.set(value);
+    }
+    get total() {
+        return this._total();
+    }
     /**
      * Sets the index of the first message in the currently loaded batch within the full conversation.
      * Used with remote data sources in endless scroll mode to compute the range for the next [`loadMore`](slug:api_conversational-ui_chatcomponent#loadMore) call.
      * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation.
      */
-    startIndex;
+    set startIndex(value) {
+        this._startIndex.set(value);
+    }
+    get startIndex() {
+        return this._startIndex();
+    }
     /**
      * Sets the exclusive end index of the currently loaded batch within the full conversation.
      * Used with remote data sources in endless scroll mode to determine whether more messages exist beyond the current batch.
      * For more details, refer to the [Endless Scrolling with Remote Data](slug:scroll_modes_chat#remote-data) section in the documentation.
      */
-    endIndex;
+    set endIndex(value) {
+        this._endIndex.set(value);
+    }
+    get endIndex() {
+        return this._endIndex();
+    }
     /**
      * Sets the full set of pinned messages in the conversation.
      * Used with remote data sources in endless scroll mode to render the pinned message indicator when the pinned message is outside the currently loaded batch.
@@ -9298,7 +10403,12 @@ class ChatComponent {
      *
      * @default []
      */
-    pinnedMessages = [];
+    set pinnedMessages(value) {
+        this._pinnedMessages.set(value);
+    }
+    get pinnedMessages() {
+        return this._pinnedMessages();
+    }
     /**
      * Sets the messages that serve as reply targets for messages in the currently loaded batch but exist outside it.
      * Used with remote data sources in endless scroll mode to render reply previews when the replied-to message is not in the current batch.
@@ -9306,30 +10416,45 @@ class ChatComponent {
      *
      * @default []
      */
-    repliedToMessages = [];
+    set repliedToMessages(value) {
+        this._repliedToMessages.set(value);
+    }
+    get repliedToMessages() {
+        return this._repliedToMessages();
+    }
     /**
      * Sets the names of the model fields from which the Chat reads its data.
      * Lets you map custom data types to the expected `Message` format.
      */
     set modelFields(value) {
-        this._modelFields = { ...defaultModelFields, ...value };
+        this._modelFields.set({ ...defaultModelFields, ...value });
     }
     get modelFields() {
-        return this._modelFields;
+        return this._modelFields();
     }
     /**
      * Controls whether a scroll to bottom button is rendered at the bottom of the Chat. Displayed only when the user has scrolled the component upward.
      *
      * @default true
      */
-    scrollToBottomButton = true;
+    set scrollToBottomButton(value) {
+        this._scrollToBottomButton.set(value);
+    }
+    get scrollToBottomButton() {
+        return this._scrollToBottomButton();
+    }
     /**
      * Sets the loading state of the Chat component.
      * When set to `true`, a loading button is displayed instead of the send button.
      *
      * @default false
      */
-    loading = false;
+    set loading(value) {
+        this._loading.set(value);
+    }
+    get loading() {
+        return this._loading();
+    }
     /**
      * Fires when the user sends a message by clicking the **Send** button or pressing **Enter**.
      *
@@ -9401,23 +10526,40 @@ class ChatComponent {
     set messagesContextMenu(contextMenu) {
         this.chatService.messagesContextMenu = contextMenu;
     }
-    attachmentTemplate;
-    chatHeaderTemplate;
-    chatNoDataTemplate;
-    authorMessageContentTemplate;
-    receiverMessageContentTemplate;
-    messageContentTemplate;
-    authorMessageTemplate;
-    receiverMessageTemplate;
-    messageTemplate;
-    timestampTemplate;
-    suggestionTemplate;
-    statusTemplate;
-    messageBoxTemplate;
-    messageBoxStartAffixTemplate;
-    messageBoxEndAffixTemplate;
-    messageBoxTopAffixTemplate;
-    userStatusTemplate;
+    set attachmentTemplate(v) { this._attachmentTemplate.set(v); }
+    get attachmentTemplate() { return this._attachmentTemplate(); }
+    set chatHeaderTemplate(v) { this._chatHeaderTemplate.set(v); }
+    get chatHeaderTemplate() { return this._chatHeaderTemplate(); }
+    set chatNoDataTemplate(v) { this._chatNoDataTemplate.set(v); }
+    get chatNoDataTemplate() { return this._chatNoDataTemplate(); }
+    set authorMessageContentTemplate(v) { this._authorMessageContentTemplate.set(v); }
+    get authorMessageContentTemplate() { return this._authorMessageContentTemplate(); }
+    set receiverMessageContentTemplate(v) { this._receiverMessageContentTemplate.set(v); }
+    get receiverMessageContentTemplate() { return this._receiverMessageContentTemplate(); }
+    set messageContentTemplate(v) { this._messageContentTemplate.set(v); }
+    get messageContentTemplate() { return this._messageContentTemplate(); }
+    set authorMessageTemplate(v) { this._authorMessageTemplate.set(v); }
+    get authorMessageTemplate() { return this._authorMessageTemplate(); }
+    set receiverMessageTemplate(v) { this._receiverMessageTemplate.set(v); }
+    get receiverMessageTemplate() { return this._receiverMessageTemplate(); }
+    set messageTemplate(v) { this._messageTemplate.set(v); }
+    get messageTemplate() { return this._messageTemplate(); }
+    set timestampTemplate(v) { this._timestampTemplate.set(v); }
+    get timestampTemplate() { return this._timestampTemplate(); }
+    set suggestionTemplate(v) { this._suggestionTemplate.set(v); }
+    get suggestionTemplate() { return this._suggestionTemplate(); }
+    set statusTemplate(v) { this._statusTemplate.set(v); }
+    get statusTemplate() { return this._statusTemplate(); }
+    set messageBoxTemplate(v) { this._messageBoxTemplate.set(v); }
+    get messageBoxTemplate() { return this._messageBoxTemplate(); }
+    set messageBoxStartAffixTemplate(v) { this._messageBoxStartAffixTemplate.set(v); }
+    get messageBoxStartAffixTemplate() { return this._messageBoxStartAffixTemplate(); }
+    set messageBoxEndAffixTemplate(v) { this._messageBoxEndAffixTemplate.set(v); }
+    get messageBoxEndAffixTemplate() { return this._messageBoxEndAffixTemplate(); }
+    set messageBoxTopAffixTemplate(v) { this._messageBoxTopAffixTemplate.set(v); }
+    get messageBoxTopAffixTemplate() { return this._messageBoxTopAffixTemplate(); }
+    set userStatusTemplate(v) { this._userStatusTemplate.set(v); }
+    get userStatusTemplate() { return this._userStatusTemplate(); }
     messageBox;
     /**
      * @hidden
@@ -9431,12 +10573,13 @@ class ChatComponent {
         if (!this.messages || this.messages.length === 0) {
             return [];
         }
-        if (this._modelFields &&
-            Object.keys(this._modelFields).some((key) => this._modelFields[key] !== defaultModelFields[key])) {
-            if (this.messages !== this._lastMessagesReference || this._modelFields !== this._lastModelFields) {
-                this._cachedProcessedMessages = processMessages(this.messages, this._modelFields);
+        const modelFields = this.modelFields;
+        if (modelFields &&
+            Object.keys(modelFields).some((key) => modelFields[key] !== defaultModelFields[key])) {
+            if (this.messages !== this._lastMessagesReference || modelFields !== this._lastModelFields) {
+                this._cachedProcessedMessages = processMessages(this.messages, modelFields);
                 this._lastMessagesReference = this.messages;
-                this._lastModelFields = this._modelFields;
+                this._lastModelFields = modelFields;
             }
             return this._cachedProcessedMessages;
         }
@@ -9539,9 +10682,89 @@ class ChatComponent {
     anchor;
     direction;
     subs = new Subscription();
-    _modelFields = defaultModelFields;
-    _messageContextMenuActions = CONTEXT_MENU_ACTIONS;
-    _fileActions = FILE_ACTIONS;
+    syncChatServiceState = effect(() => {
+        this.chatService.showAvatar = this.showAvatar;
+        this.chatService.showUsername = this.showUsername;
+        this.chatService.timestampVisibility = this.timestampVisibility;
+        this.chatService.messageWidthMode = this.messageWidthMode;
+        this.chatService.allowMessageCollapse = this.allowMessageCollapse;
+        this.chatService.speechToTextButton = this.speechToTextButton;
+        this.chatService.sendButton = this.sendButton;
+        this.chatService.fileSelectButton = this.fileSelectButton;
+        this.chatService.messageBoxSettings = this.messageBoxSettings;
+        this.chatService.messageToolbarActions = this.messageToolbarActions;
+        this.chatService.messageContextMenuActions = this.messageContextMenuActions;
+        this.chatService.fileActions = this.fileActions;
+        this.chatService.authorMessageSettings = this.authorMessageSettings;
+        this.chatService.receiverMessageSettings = this.receiverMessageSettings;
+        this.chatService.authorId = this.authorId;
+    }, ...(ngDevMode ? [{ debugName: "syncChatServiceState" }] : []));
+    syncRepliedToMessages = effect(() => {
+        this.chatService.repliedToMessages = this.repliedToMessages || [];
+    }, ...(ngDevMode ? [{ debugName: "syncRepliedToMessages" }] : []));
+    syncHeight = effect(() => {
+        if (isPresent(this.height)) {
+            this.renderer.setStyle(this.element.nativeElement, 'height', `${processCssValue(this.height)}`);
+        }
+    }, ...(ngDevMode ? [{ debugName: "syncHeight" }] : []));
+    syncWidth = effect(() => {
+        if (isPresent(this.width)) {
+            this.renderer.setStyle(this.element.nativeElement, 'width', `${processCssValue(this.width)}`);
+        }
+    }, ...(ngDevMode ? [{ debugName: "syncWidth" }] : []));
+    _messages = signal(undefined, ...(ngDevMode ? [{ debugName: "_messages" }] : []));
+    _authorId = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorId" }] : []));
+    _messageBoxType = signal('textarea', ...(ngDevMode ? [{ debugName: "_messageBoxType" }] : []));
+    _height = signal(undefined, ...(ngDevMode ? [{ debugName: "_height" }] : []));
+    _width = signal(undefined, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _messageWidthMode = signal('standard', ...(ngDevMode ? [{ debugName: "_messageWidthMode" }] : []));
+    _timestampVisibility = signal('focus', ...(ngDevMode ? [{ debugName: "_timestampVisibility" }] : []));
+    _showUsername = signal(true, ...(ngDevMode ? [{ debugName: "_showUsername" }] : []));
+    _showAvatar = signal(true, ...(ngDevMode ? [{ debugName: "_showAvatar" }] : []));
+    _allowMessageCollapse = signal(false, ...(ngDevMode ? [{ debugName: "_allowMessageCollapse" }] : []));
+    _speechToTextButton = signal(true, ...(ngDevMode ? [{ debugName: "_speechToTextButton" }] : []));
+    _fileSelectButton = signal(true, ...(ngDevMode ? [{ debugName: "_fileSelectButton" }] : []));
+    _messageBoxSettings = signal(MESSAGE_BOX_SETTINGS, ...(ngDevMode ? [{ debugName: "_messageBoxSettings" }] : []));
+    _messageToolbarActions = signal([], ...(ngDevMode ? [{ debugName: "_messageToolbarActions" }] : []));
+    _inputValue = signal('', ...(ngDevMode ? [{ debugName: "_inputValue" }] : []));
+    _authorMessageSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorMessageSettings" }] : []));
+    _receiverMessageSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_receiverMessageSettings" }] : []));
+    _messageContextMenuActions = signal(CONTEXT_MENU_ACTIONS, ...(ngDevMode ? [{ debugName: "_messageContextMenuActions" }] : []));
+    _fileActions = signal(FILE_ACTIONS, ...(ngDevMode ? [{ debugName: "_fileActions" }] : []));
+    _messageFilesLayout = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageFilesLayout" }] : []));
+    _suggestionsLayout = signal(undefined, ...(ngDevMode ? [{ debugName: "_suggestionsLayout" }] : []));
+    _quickActionsLayout = signal(undefined, ...(ngDevMode ? [{ debugName: "_quickActionsLayout" }] : []));
+    _suggestions = signal([], ...(ngDevMode ? [{ debugName: "_suggestions" }] : []));
+    _sendButton = signal(true, ...(ngDevMode ? [{ debugName: "_sendButton" }] : []));
+    _scrollMode = signal('scrollable', ...(ngDevMode ? [{ debugName: "_scrollMode" }] : []));
+    _pageSize = signal(50, ...(ngDevMode ? [{ debugName: "_pageSize" }] : []));
+    _autoScrollThreshold = signal('20%', ...(ngDevMode ? [{ debugName: "_autoScrollThreshold" }] : []));
+    _total = signal(undefined, ...(ngDevMode ? [{ debugName: "_total" }] : []));
+    _startIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_startIndex" }] : []));
+    _endIndex = signal(undefined, ...(ngDevMode ? [{ debugName: "_endIndex" }] : []));
+    _pinnedMessages = signal([], ...(ngDevMode ? [{ debugName: "_pinnedMessages" }] : []));
+    _repliedToMessages = signal([], ...(ngDevMode ? [{ debugName: "_repliedToMessages" }] : []));
+    _modelFields = signal(defaultModelFields, ...(ngDevMode ? [{ debugName: "_modelFields" }] : []));
+    _scrollToBottomButton = signal(true, ...(ngDevMode ? [{ debugName: "_scrollToBottomButton" }] : []));
+    _loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+    _attachmentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_attachmentTemplate" }] : []));
+    _chatHeaderTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_chatHeaderTemplate" }] : []));
+    _chatNoDataTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_chatNoDataTemplate" }] : []));
+    _authorMessageContentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorMessageContentTemplate" }] : []));
+    _receiverMessageContentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_receiverMessageContentTemplate" }] : []));
+    _messageContentTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageContentTemplate" }] : []));
+    _authorMessageTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_authorMessageTemplate" }] : []));
+    _receiverMessageTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_receiverMessageTemplate" }] : []));
+    _messageTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageTemplate" }] : []));
+    _timestampTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_timestampTemplate" }] : []));
+    _suggestionTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_suggestionTemplate" }] : []));
+    _statusTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_statusTemplate" }] : []));
+    _messageBoxTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxTemplate" }] : []));
+    _messageBoxStartAffixTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxStartAffixTemplate" }] : []));
+    _messageBoxEndAffixTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxEndAffixTemplate" }] : []));
+    _messageBoxTopAffixTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_messageBoxTopAffixTemplate" }] : []));
+    _userStatusTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_userStatusTemplate" }] : []));
     _cachedProcessedMessages = [];
     _lastMessagesReference = null;
     _lastModelFields = null;
@@ -9559,12 +10782,13 @@ class ChatComponent {
     _renderedMessagesEnd = -1;
     _pendingRemoteScrollToMessageId = null;
     _remoteScrollToBottom = false;
-    constructor(localization, zone, renderer, element, chatService) {
+    constructor(localization, zone, renderer, element, chatService, injector) {
         this.localization = localization;
         this.zone = zone;
         this.renderer = renderer;
         this.element = element;
         this.chatService = chatService;
+        this.injector = injector;
         const isValid = validatePackage(packageMetadata);
         this.licenseMessage = getLicenseMessage(packageMetadata);
         this.showLicenseWatermark = shouldShowValidationUI(isValid);
@@ -9646,9 +10870,6 @@ class ChatComponent {
         if (isChanged('pinnedMessages', changes, false)) {
             this.pinnedMessage = this.findLastPinnedMessage();
         }
-        if (isChanged('repliedToMessages', changes, false)) {
-            this.chatService.repliedToMessages = this.repliedToMessages || [];
-        }
         this.validateRemoteInputs();
         if (isChanged('scrollMode', changes, false)) {
             this.initEndlessScroll();
@@ -9661,32 +10882,6 @@ class ChatComponent {
             isChanged('total', changes, false))) {
             this.endlessState.syncFromInputs(this.startIndex, this.endIndex, this.total);
         }
-        if (isChanged('height', changes, false)) {
-            this.renderer.setStyle(this.element.nativeElement, 'height', `${processCssValue(this.height)}`);
-        }
-        if (isChanged('width', changes, false)) {
-            this.renderer.setStyle(this.element.nativeElement, 'width', `${processCssValue(this.width)}`);
-        }
-        if (isChanged('sendButtonSettings', changes, false)) {
-            this.chatService.sendButton = this.sendButtonSettings;
-        }
-        this.updateChatServiceProperties([
-            'authorId',
-            'messageWidthMode',
-            'timestampVisibility',
-            'showUsername',
-            'showAvatar',
-            'allowMessageCollapse',
-            'speechToTextButton',
-            'sendButton',
-            'fileSelectButton',
-            'messageBoxSettings',
-            'messageToolbarActions',
-            'messageContextMenuActions',
-            'fileActions',
-            'authorMessageSettings',
-            'receiverMessageSettings',
-        ], changes);
     }
     /**
      * @hidden
@@ -9761,11 +10956,11 @@ class ChatComponent {
             this.anchor?.recordScrollHeight();
             this.anchor?.setAriaLive('off');
             this.loadMore.emit({ startIndex: range.start, endIndex: range.end });
-            this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.anchor?.preserveScrollPosition();
                 this.anchor?.setAriaLive('polite');
                 this.endlessState.isLoading = false;
-            }));
+            }, { injector: this.injector });
         }
     }
     /**
@@ -9789,9 +10984,9 @@ class ChatComponent {
         if (range) {
             this.endlessState.isLoading = true;
             this.loadMore.emit({ startIndex: range.start, endIndex: range.end });
-            this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.endlessState.isLoading = false;
-            }));
+            }, { injector: this.injector });
         }
     }
     /**
@@ -9810,11 +11005,11 @@ class ChatComponent {
             this.anchor?.lockForMessageScroll();
             const range = this.endlessState.jumpToEnd();
             this.loadMore.emit({ startIndex: range.start, endIndex: range.end });
-            this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.anchor?.scrollToBottomWithSettle(() => {
                     this.anchor?.unlockForMessageScroll();
                 });
-            }));
+            }, { injector: this.injector });
         }
         else {
             this.anchor?.scrollToBottom();
@@ -9845,10 +11040,10 @@ class ChatComponent {
                 this.anchor?.lockForMessageScroll();
                 const range = this.endlessState.jumpTo(targetIndex);
                 this.loadMore.emit({ startIndex: range.start, endIndex: range.end });
-                this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                afterNextRender(() => {
                     this.chatService.scrollToMessage(messageId, 'auto');
                     this.anchor?.unlockForMessageScroll();
-                }));
+                }, { injector: this.injector });
             }
         }
         else {
@@ -9918,7 +11113,7 @@ class ChatComponent {
         if (!this._pendingScrollAction) {
             return;
         }
-        this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             this.zone.run(() => {
                 const action = this._pendingScrollAction;
                 this._pendingScrollAction = null;
@@ -9941,7 +11136,7 @@ class ChatComponent {
                     }
                 }
             });
-        }));
+        }, { injector: this.injector });
     }
     detectNewMessageScrollAction() {
         const messages = this.processedMessages;
@@ -10049,24 +11244,24 @@ class ChatComponent {
             if (this._remoteScrollToBottom) {
                 this._remoteScrollToBottom = false;
                 this._scrollHandledBeforePaint = true;
-                this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                afterNextRender(() => {
                     this.anchor?.scrollToBottomWithSettle();
-                }));
+                }, { injector: this.injector });
             }
             else {
                 this._scrollHandledBeforePaint = true;
-                this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+                afterNextRender(() => {
                     this.anchor?.preserveScrollPosition();
                     this.anchor?.setAriaLive('polite');
-                }));
+                }, { injector: this.injector });
             }
         }
         else if (isInitialBatch && !this._pendingScrollAction) {
             this.autoScroll = true;
-            this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+            afterNextRender(() => {
                 this.anchor?.scrollToBottom();
                 this.anchor?.calculateMessageBoxSeparator();
-            }));
+            }, { injector: this.injector });
         }
         else if (currentLength > 0 && !this._pendingScrollAction) {
             const lastMessage = this.processedMessages[currentLength - 1];
@@ -10100,18 +11295,11 @@ class ChatComponent {
         const messageId = this._pendingRemoteScrollToMessageId;
         this._pendingRemoteScrollToMessageId = null;
         this._scrollHandledBeforePaint = true;
-        this.subs.add(this.zone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             this.anchor?.lockForMessageScroll();
             this.chatService.scrollToMessage(messageId, 'auto');
             this.anchor?.unlockForMessageScroll();
-        }));
-    }
-    updateChatServiceProperties(propNames, changes) {
-        propNames.forEach(propName => {
-            if (isChanged(propName, changes, false)) {
-                this.chatService[propName] = this[propName];
-            }
-        });
+        }, { injector: this.injector });
     }
     validateRemoteInputs() {
         if (!isDevMode()) {
@@ -10153,7 +11341,7 @@ class ChatComponent {
             return userAction;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChatComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: ChatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChatComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: ChatService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.27", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", authorId: "authorId", messageBoxType: "messageBoxType", height: "height", width: "width", placeholder: "placeholder", messageWidthMode: "messageWidthMode", timestampVisibility: "timestampVisibility", showUsername: "showUsername", showAvatar: "showAvatar", allowMessageCollapse: "allowMessageCollapse", speechToTextButton: "speechToTextButton", fileSelectButton: "fileSelectButton", messageBoxSettings: "messageBoxSettings", messageToolbarActions: "messageToolbarActions", inputValue: "inputValue", authorMessageSettings: "authorMessageSettings", receiverMessageSettings: "receiverMessageSettings", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", messageFilesLayout: "messageFilesLayout", suggestionsLayout: "suggestionsLayout", quickActionsLayout: "quickActionsLayout", suggestions: "suggestions", sendButton: "sendButton", sendButtonSettings: "sendButtonSettings", scrollMode: "scrollMode", pageSize: "pageSize", autoScrollThreshold: "autoScrollThreshold", total: "total", startIndex: "startIndex", endIndex: "endIndex", pinnedMessages: "pinnedMessages", repliedToMessages: "repliedToMessages", modelFields: "modelFields", scrollToBottomButton: "scrollToBottomButton", loading: "loading" }, outputs: { sendMessage: "sendMessage", resendMessage: "resendMessage", toolbarActionClick: "toolbarActionClick", contextMenuActionClick: "contextMenuActionClick", fileActionClick: "fileActionClick", download: "download", executeAction: "executeAction", suggestionExecute: "suggestionExecute", fileSelect: "fileSelect", fileRemove: "fileRemove", unpin: "unpin", inputValueChange: "inputValueChange", loadMore: "loadMore", referencedMessageClick: "referencedMessageClick" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
             LocalizationService,
             ChatService,
@@ -10358,11 +11546,12 @@ class ChatComponent {
         @if (showLicenseWatermark) {
         <div kendoWatermarkOverlay [licenseMessage]="licenseMessage"></div>
         }
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$3, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll", "autoScrollThreshold", "endlessMode", "rangeIsAtEnd"], outputs: ["autoScrollChange", "nearTop", "nearBottom"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "statusTemplate", "userStatusTemplate", "localization", "authorId"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["authorId", "autoScroll", "suggestions", "placeholder", "inputValue", "localization", "messageBoxTemplate", "messageBoxStartAffixTemplate", "messageBoxEndAffixTemplate", "messageBoxTopAffixTemplate", "suggestionTemplate", "loading"], outputs: ["sendMessage", "executeSuggestion", "fileSelect", "fileRemove"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$3, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll", "autoScrollThreshold", "endlessMode", "rangeIsAtEnd"], outputs: ["autoScrollChange", "nearTop", "nearBottom"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "statusTemplate", "userStatusTemplate", "localization", "authorId"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["authorId", "autoScroll", "suggestions", "placeholder", "inputValue", "localization", "messageBoxTemplate", "messageBoxStartAffixTemplate", "messageBoxEndAffixTemplate", "messageBoxTopAffixTemplate", "suggestionTemplate", "loading"], outputs: ["sendMessage", "executeSuggestion", "fileSelect", "fileRemove"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay], kendo-watermark-overlay", inputs: ["licenseMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         LocalizationService,
                         ChatService,
@@ -10585,7 +11774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                         WatermarkOverlayComponent,
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: ChatService }], propDecorators: { messages: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: ChatService }, { type: i0.Injector }], propDecorators: { messages: [{
                 type: Input
             }], authorId: [{
                 type: Input
@@ -10937,15 +12126,33 @@ class Messages extends ComponentMessages {
     /**
      * The title for the Commands button.
      */
-    commandsButtonTitle;
+    set commandsButtonTitle(value) {
+        this._commandsButtonTitle.set(value);
+    }
+    get commandsButtonTitle() {
+        return this._commandsButtonTitle();
+    }
     /**
      * The title for the Generate button.
      */
-    generateButtonTitle;
+    set generateButtonTitle(value) {
+        this._generateButtonTitle.set(value);
+    }
+    get generateButtonTitle() {
+        return this._generateButtonTitle();
+    }
     /**
      * The title for the Speech to Text button.
      */
-    speechToTextButtonTitle;
+    set speechToTextButtonTitle(value) {
+        this._speechToTextButtonTitle.set(value);
+    }
+    get speechToTextButtonTitle() {
+        return this._speechToTextButtonTitle();
+    }
+    _commandsButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_commandsButtonTitle" }] : []));
+    _generateButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_generateButtonTitle" }] : []));
+    _speechToTextButtonTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "_speechToTextButtonTitle" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.27", type: Messages, isStandalone: true, inputs: { commandsButtonTitle: "commandsButtonTitle", generateButtonTitle: "generateButtonTitle", speechToTextButtonTitle: "speechToTextButtonTitle" }, usesInheritance: true, ngImport: i0 });
 }
@@ -11051,7 +12258,7 @@ class InlineAIPromptContentComponent {
     localization;
     className = true;
     get dirAttr() {
-        return this.direction;
+        return this._direction();
     }
     get maxHeightStyle() {
         return this.calculateMeasurement(this.maxHeight);
@@ -11059,30 +12266,80 @@ class InlineAIPromptContentComponent {
     get widthStyle() {
         return this.calculateMeasurement(this.width);
     }
-    popupElement;
-    promptValue = "";
-    placeholder;
-    promptOutput;
-    enableSpeechToText = true;
-    streaming = false;
-    width = 550;
-    maxHeight;
-    appendTo;
+    set popupElement(value) {
+        this._popupElement.set(value);
+    }
+    get popupElement() {
+        return this._popupElement();
+    }
+    set promptValue(value) {
+        this._promptValue.set(value ?? '');
+    }
+    get promptValue() {
+        return this._promptValue();
+    }
+    set placeholder(value) {
+        this._placeholder.set(value);
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
+    set promptOutput(value) {
+        this._promptOutput.set(value);
+    }
+    get promptOutput() {
+        return this._promptOutput();
+    }
+    set enableSpeechToText(value) {
+        this._enableSpeechToText.set(value);
+    }
+    get enableSpeechToText() {
+        return this._enableSpeechToText();
+    }
+    set streaming(value) {
+        this._streaming.set(value);
+    }
+    get streaming() {
+        return this._streaming();
+    }
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
+    set maxHeight(value) {
+        this._maxHeight.set(value);
+    }
+    get maxHeight() {
+        return this._maxHeight();
+    }
+    set appendTo(value) {
+        this._appendTo.set(value);
+    }
+    get appendTo() {
+        return this._appendTo();
+    }
     defaultOutputActions = defaultOutputActions;
     set outputActions(actions) {
-        this._outputActions = this.mergeWithDefaultActions(actions);
+        this._outputActions.set(this.mergeWithDefaultActions(actions));
     }
     get outputActions() {
-        return this._outputActions;
+        return this._outputActions();
     }
     set promptCommands(commands) {
-        this._promptCommands = commands || [];
+        this._promptCommands.set(commands || []);
         this.commandMenuItems = this.transformCommands(commands || []);
     }
     get promptCommands() {
-        return this._promptCommands;
+        return this._promptCommands();
+    }
+    set outputTemplate(value) {
+        this._outputTemplate.set(value);
+    }
+    get outputTemplate() {
+        return this._outputTemplate();
     }
-    outputTemplate;
     promptRequest = new EventEmitter();
     commandExecute = new EventEmitter();
     outputActionClick = new EventEmitter();
@@ -11109,14 +12366,30 @@ class InlineAIPromptContentComponent {
     }
     sendIcon = paperPlaneIcon;
     stopGenerationIcon = stopIcon;
-    isListening = false;
     commandMenuItems = [];
     messages = {};
     maxRows = TEXTAREA_MAX_ROWS;
     initialRows = TEXTAREA_INITIAL_ROWS;
-    _outputActions = this.defaultOutputActions;
-    _promptCommands = [];
-    direction;
+    set isListening(value) {
+        this._isListening.set(value);
+    }
+    get isListening() {
+        return this._isListening();
+    }
+    _popupElement = signal(undefined, ...(ngDevMode ? [{ debugName: "_popupElement" }] : []));
+    _promptValue = signal('', ...(ngDevMode ? [{ debugName: "_promptValue" }] : []));
+    _placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _promptOutput = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptOutput" }] : []));
+    _enableSpeechToText = signal(true, ...(ngDevMode ? [{ debugName: "_enableSpeechToText" }] : []));
+    _streaming = signal(false, ...(ngDevMode ? [{ debugName: "_streaming" }] : []));
+    _width = signal(550, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _maxHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
+    _appendTo = signal(undefined, ...(ngDevMode ? [{ debugName: "_appendTo" }] : []));
+    _outputTemplate = signal(undefined, ...(ngDevMode ? [{ debugName: "_outputTemplate" }] : []));
+    _outputActions = signal(defaultOutputActions, ...(ngDevMode ? [{ debugName: "_outputActions" }] : []));
+    _promptCommands = signal([], ...(ngDevMode ? [{ debugName: "_promptCommands" }] : []));
+    _direction = signal('ltr', ...(ngDevMode ? [{ debugName: "_direction" }] : []));
+    _isListening = signal(false, ...(ngDevMode ? [{ debugName: "_isListening" }] : []));
     localizationSubs = new Subscription();
     subs = new Subscription();
     constructor(ngZone, renderer, element, localization) {
@@ -11128,9 +12401,9 @@ class InlineAIPromptContentComponent {
         if (!this.localization) {
             this.localization = inject(LocalizationService);
         }
-        this.direction = this.localization?.rtl ? 'rtl' : 'ltr';
+        this._direction.set(this.localization?.rtl ? 'rtl' : 'ltr');
         this.localizationSubs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
+            this._direction.set(rtl ? 'rtl' : 'ltr');
         }));
     }
     ngAfterViewInit() {
@@ -11383,13 +12656,14 @@ class InlineAIPromptContentComponent {
           class="k-hidden"
           (select)="onCommandClick($event)">
         </kendo-contextmenu>
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoInlineAIPromptLocalizedMessages]" }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator", "value"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: i3.TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: i3.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: i4.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: i5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i5.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { kind: "component", type: i5.CardBodyComponent, selector: "kendo-card-body" }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoInlineAIPromptLocalizedMessages]" }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator", "value"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: i3.TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: i3.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: i4.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: i5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i5.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { kind: "component", type: i5.CardBodyComponent, selector: "kendo-card-body" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InlineAIPromptContentComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoInlineAIPromptContent',
                     selector: 'kendo-inlineaiprompt-content',
+                    exportAs: 'kendoInlineAIPromptContent',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         LocalizationService,
                         {
@@ -11624,47 +12898,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
  * ```
  */
 class InlineAIPromptComponent {
-    ngZone;
+    injector;
     element;
     /**
      * Sets the TextArea value.
      *
      * @default ""
      */
-    promptValue = "";
+    set promptValue(value) {
+        this._promptValue.set(value ?? '');
+    }
+    get promptValue() {
+        return this._promptValue();
+    }
     /**
      * Sets the placeholder text that appears in the text area when it is empty.
      */
-    placeholder;
+    set placeholder(value) {
+        this._placeholder.set(value);
+    }
+    get placeholder() {
+        return this._placeholder();
+    }
     /**
      * Sets the output data for the prompt.
      * The output displays as a card above the text area.
      */
-    promptOutput;
+    set promptOutput(value) {
+        this._promptOutput.set(value);
+    }
+    get promptOutput() {
+        return this._promptOutput();
+    }
     /**
      * Controls the visibility and settings of the Speech to Text button.
      *
      * @default true
      */
-    enableSpeechToText = true;
+    set enableSpeechToText(value) {
+        this._enableSpeechToText.set(value);
+    }
+    get enableSpeechToText() {
+        return this._enableSpeechToText();
+    }
     /**
      * When set to `true`, the **Send** button displays a generating state and the component emits a `promptRequestCancel` event when you click it.
      *
      * @default false
      */
-    streaming = false;
+    set streaming(value) {
+        this._streaming.set(value);
+    }
+    get streaming() {
+        return this._streaming();
+    }
     /**
      * Sets the width of the component.
      * Accepts a number for pixels or a string for other units.
      *
      * @default 550
      */
-    width = 550;
+    set width(value) {
+        this._width.set(value);
+    }
+    get width() {
+        return this._width();
+    }
     /**
      * Sets the maximum height of the component.
      * Accepts a number for pixels or a string for other units.
      */
-    maxHeight;
+    set maxHeight(value) {
+        this._maxHeight.set(value);
+    }
+    get maxHeight() {
+        return this._maxHeight();
+    }
     /**
      * Represents the configuration of the default output actions.
      * The default actions are `copy`, `retry`, and `discard`.
@@ -11677,20 +12986,30 @@ class InlineAIPromptComponent {
      *
      * @default [{ name: 'copy', type: 'button', icon: 'copy', svgIcon: copyIcon, text: 'Copy', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'retry', type: 'button', icon: 'arrow-rotate-cw', svgIcon: arrowRotateCwIcon, text: 'Retry', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'discard', type: 'button', icon: 'cancel', svgIcon: cancelIcon, text: 'Discard', fillMode: 'flat', themeColor: 'base', rounded: 'medium'}]
      */
-    outputActions = defaultOutputActions;
+    set outputActions(value) {
+        this._outputActions.set(value ?? defaultOutputActions);
+    }
+    get outputActions() {
+        return this._outputActions();
+    }
     /**
      * Sets the available prompt commands.
      */
-    promptCommands;
+    set promptCommands(value) {
+        this._promptCommands.set(value);
+    }
+    get promptCommands() {
+        return this._promptCommands();
+    }
     /**
      * Sets the Popup settings.
      *
      */
     set popupSettings(settings) {
-        this._popupSettings = { ...defaultPopupSettings, ...settings };
+        this._popupSettings.set({ ...defaultPopupSettings, ...settings });
     }
     get popupSettings() {
-        return this._popupSettings;
+        return this._popupSettings();
     }
     /**
      * Fires when the send button is clicked.
@@ -11724,10 +13043,19 @@ class InlineAIPromptComponent {
      * @hidden
      */
     calculateMeasurement = calculateMeasurement;
-    _popupSettings = defaultPopupSettings;
+    _promptValue = signal('', ...(ngDevMode ? [{ debugName: "_promptValue" }] : []));
+    _placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "_placeholder" }] : []));
+    _promptOutput = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptOutput" }] : []));
+    _enableSpeechToText = signal(true, ...(ngDevMode ? [{ debugName: "_enableSpeechToText" }] : []));
+    _streaming = signal(false, ...(ngDevMode ? [{ debugName: "_streaming" }] : []));
+    _width = signal(550, ...(ngDevMode ? [{ debugName: "_width" }] : []));
+    _maxHeight = signal(undefined, ...(ngDevMode ? [{ debugName: "_maxHeight" }] : []));
+    _outputActions = signal(defaultOutputActions, ...(ngDevMode ? [{ debugName: "_outputActions" }] : []));
+    _promptCommands = signal(undefined, ...(ngDevMode ? [{ debugName: "_promptCommands" }] : []));
+    _popupSettings = signal(defaultPopupSettings, ...(ngDevMode ? [{ debugName: "_popupSettings" }] : []));
     subs = new Subscription();
-    constructor(ngZone, element) {
-        this.ngZone = ngZone;
+    constructor(injector, element) {
+        this.injector = injector;
         this.element = element;
         validatePackage(packageMetadata);
     }
@@ -11735,11 +13063,11 @@ class InlineAIPromptComponent {
         if (this.contentComponent && this.popupElement) {
             this.contentComponent.popupElement = this.popupElement;
         }
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+        afterNextRender(() => {
             if (this.contentComponent && this.popupViewContainer) {
                 this.contentComponent.appendTo = this.popupViewContainer;
             }
-        });
+        }, { injector: this.injector });
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
@@ -11788,7 +13116,7 @@ class InlineAIPromptComponent {
     onPromptValueChange(value) {
         this.promptValueChange.emit(value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InlineAIPromptComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InlineAIPromptComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.27", type: InlineAIPromptComponent, isStandalone: true, selector: "kendo-inlineaiprompt", inputs: { promptValue: "promptValue", placeholder: "placeholder", promptOutput: "promptOutput", enableSpeechToText: "enableSpeechToText", streaming: "streaming", width: "width", maxHeight: "maxHeight", outputActions: "outputActions", promptCommands: "promptCommands", popupSettings: "popupSettings" }, outputs: { promptRequest: "promptRequest", commandExecute: "commandExecute", outputActionClick: "outputActionClick", promptRequestCancel: "promptRequestCancel", close: "close", promptValueChange: "promptValueChange" }, providers: [
             LocalizationService,
             {
@@ -11838,13 +13166,14 @@ class InlineAIPromptComponent {
             >
             </kendo-inlineaiprompt-content>
         </kendo-popup>
-    `, isInline: true, dependencies: [{ kind: "component", type: i1$2.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "component", type: InlineAIPromptContentComponent, selector: "kendo-inlineaiprompt-content", inputs: ["popupElement", "promptValue", "placeholder", "promptOutput", "enableSpeechToText", "streaming", "width", "maxHeight", "appendTo", "outputActions", "promptCommands", "outputTemplate"], outputs: ["promptRequest", "commandExecute", "outputActionClick", "promptRequestCancel", "close", "promptValueChange"], exportAs: ["kendoInlineAIPromptContent"] }, { kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoInlineAIPromptLocalizedMessages]" }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: i1$2.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "component", type: InlineAIPromptContentComponent, selector: "kendo-inlineaiprompt-content", inputs: ["popupElement", "promptValue", "placeholder", "promptOutput", "enableSpeechToText", "streaming", "width", "maxHeight", "appendTo", "outputActions", "promptCommands", "outputTemplate"], outputs: ["promptRequest", "commandExecute", "outputActionClick", "promptRequestCancel", "close", "promptValueChange"], exportAs: ["kendoInlineAIPromptContent"] }, { kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoInlineAIPromptLocalizedMessages]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImport: i0, type: InlineAIPromptComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoInlineAIPrompt',
                     selector: 'kendo-inlineaiprompt',
+                    exportAs: 'kendoInlineAIPrompt',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         LocalizationService,
                         {
@@ -11899,7 +13228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.27", ngImpo
                     standalone: true,
                     imports: [KENDO_POPUP, InlineAIPromptContentComponent, LocalizedMessagesDirective$1],
                 }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { promptValue: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }], propDecorators: { promptValue: [{
                 type: Input
             }], placeholder: [{
                 type: Input