@progress/kendo-angular-conversational-ui 11.2.0-develop.9 → 11.3.0-develop.1

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

@@ -3,20 +3,20 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Optional, isDevMode, forwardRef, Component, Input, HostBinding, ElementRef, ViewChild, ViewChildren, EventEmitter, Output, HostListener, ContentChild, NgModule } from '@angular/core';
+import { Directive, Optional, isDevMode, EventEmitter, forwardRef, Component, Input, Output, HostBinding, ViewChildren, ElementRef, ViewChild, HostListener, ContentChild, NgModule } from '@angular/core';
 import * as i1$2 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i1 from '@progress/kendo-angular-intl';
+import * as i6 from '@progress/kendo-angular-common';
+import { Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { fromEvent, Subscription } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { fromEvent } from 'rxjs';
+import * as i1 from '@progress/kendo-angular-intl';
 import { debounceTime } from 'rxjs/operators';
 import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import * as i1$1 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
-import * as i6 from '@progress/kendo-angular-common';
-import { Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
 
 /**
  * Defines a template that will be used for displaying message attachments. To define an attachment
@@ -35,9 +35,9 @@ class AttachmentTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-AttachmentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AttachmentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-AttachmentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: AttachmentTemplateDirective, selector: "[kendoChatAttachmentTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AttachmentTemplateDirective, decorators: [{
+AttachmentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AttachmentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+AttachmentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: AttachmentTemplateDirective, selector: "[kendoChatAttachmentTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AttachmentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChatAttachmentTemplate]'
@@ -99,9 +99,9 @@ class MessageTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-MessageTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MessageTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: MessageTemplateDirective, selector: "[kendoChatMessageTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageTemplateDirective, decorators: [{
+MessageTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+MessageTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MessageTemplateDirective, selector: "[kendoChatMessageTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChatMessageTemplate]'
@@ -119,8 +119,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-conversational-ui',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1675778188,
-    version: '11.2.0-develop.9',
+    publishDate: 1676463622,
+    version: '11.3.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -134,9 +134,9 @@ class ChatMessageBoxTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-ChatMessageBoxTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChatMessageBoxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ChatMessageBoxTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ChatMessageBoxTemplateDirective, selector: "[kendoChatMessageBoxTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChatMessageBoxTemplateDirective, decorators: [{
+ChatMessageBoxTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatMessageBoxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ChatMessageBoxTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ChatMessageBoxTemplateDirective, selector: "[kendoChatMessageBoxTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatMessageBoxTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChatMessageBoxTemplate]'
@@ -277,6 +277,102 @@ const groupItems = (total) => (acc, msg, index) => {
  */
 const chatView = (messages) => messages.reduce(groupItems(messages.length), []);
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * @hidden
+ */
+class SuggestedActionsComponent extends ChatItem {
+    constructor() {
+        super(...arguments);
+        this.dispatch = new EventEmitter();
+        this.defaultClass = true;
+        this.selectedIndex = 0;
+        this.keyHandlers = {
+            [Keys.Tab]: (e) => this.changeSelectedIndex(e),
+            [Keys.Enter]: (_, action) => this.actionClick(action),
+            [Keys.Space]: (_, action) => this.actionClick(action),
+        };
+    }
+    isSelected(index) {
+        return this.selected && this.selectedIndex === index;
+    }
+    actionClick(action) {
+        this.dispatch.next(action);
+    }
+    actionKeydown(e, action) {
+        const handler = this.keyHandlers[e.keyCode];
+        if (handler) {
+            handler(e, action);
+        }
+    }
+    focus() { }
+    changeSelectedIndex(e) {
+        const offset = e.shiftKey ? -1 : 1;
+        const prevIndex = this.selectedIndex;
+        this.selectedIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
+    }
+}
+SuggestedActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SuggestedActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SuggestedActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", tabbable: "tabbable" }, outputs: { dispatch: "dispatch" }, host: { properties: { "class.k-quick-replies": "this.defaultClass" } }, providers: [{
+            provide: ChatItem,
+            useExisting: forwardRef(() => SuggestedActionsComponent)
+        }], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <span
+            #item
+            *ngFor="let action of actions; index as index; first as first; last as last"
+            class="k-quick-reply"
+            role="button"
+            [class.k-selected]="isSelected(index)"
+            [class.k-focus]="isSelected(index)"
+            [class.k-first]="first"
+            [class.k-last]="last"
+            [attr.tabindex]="0"
+            (click)="actionClick(action)"
+            (keydown)="actionKeydown($event, action)"
+        >
+        {{ action.title || action.value }}
+        </span>
+    `, isInline: true, directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chat-suggested-actions',
+                    providers: [{
+                            provide: ChatItem,
+                            useExisting: forwardRef(() => SuggestedActionsComponent)
+                        }],
+                    template: `
+        <span
+            #item
+            *ngFor="let action of actions; index as index; first as first; last as last"
+            class="k-quick-reply"
+            role="button"
+            [class.k-selected]="isSelected(index)"
+            [class.k-focus]="isSelected(index)"
+            [class.k-first]="first"
+            [class.k-last]="last"
+            [attr.tabindex]="0"
+            (click)="actionClick(action)"
+            (keydown)="actionKeydown($event, action)"
+        >
+        {{ action.title || action.value }}
+        </span>
+    `
+                }]
+        }], propDecorators: { actions: [{
+                type: Input
+            }], tabbable: [{
+                type: Input
+            }], dispatch: [{
+                type: Output
+            }], defaultClass: [{
+                type: HostBinding,
+                args: ['class.k-quick-replies']
+            }], items: [{
+                type: ViewChildren,
+                args: ['item']
+            }] } });
+
 // eslint-disable no-forward-ref
 /**
  * @hidden
@@ -298,8 +394,8 @@ class MessageComponent extends ChatItem {
         this.element.nativeElement.focus();
     }
 }
-MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MessageComponent, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", template: "template" }, host: { properties: { "class.k-message": "this.cssClass", "class.k-selected": "this.selected", "class.k-focus": "this.selected", "attr.tabIndex": "this.tabIndex" } }, providers: [{
+MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageComponent, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", template: "template" }, host: { properties: { "class.k-message": "this.cssClass", "class.k-selected": "this.selected", "class.k-focus": "this.selected", "attr.tabIndex": "this.tabIndex" } }, providers: [{
             provide: ChatItem,
             useExisting: forwardRef(() => MessageComponent)
         }], usesInheritance: true, ngImport: i0, template: `
@@ -341,7 +437,7 @@ MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </div>
         </ng-template>
     `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-message',
@@ -432,8 +528,8 @@ class AttachmentComponent {
         return this.attachment.contentType || '';
     }
 }
-AttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
+AttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
         <ng-container *ngIf="template">
             <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
             </ng-container>
@@ -454,7 +550,7 @@ AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </div>
         </div>
     `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AttachmentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-attachment',
@@ -505,12 +601,12 @@ class MessageAttachmentsComponent extends ChatItem {
         this.scrollPosition = 0;
         this.selectedIndex = 0;
         this.carouselKeyHandlers = {
-            [37 /* left */]: (e) => this.navigateTo(e, -1),
-            [39 /* right */]: (e) => this.navigateTo(e, 1)
+            [Keys.ArrowLeft]: (e) => this.navigateTo(e, -1),
+            [Keys.ArrowRight]: (e) => this.navigateTo(e, 1)
         };
         this.listKeyHandlers = {
-            [38 /* up */]: (e) => this.navigateTo(e, -1),
-            [40 /* down */]: (e) => this.navigateTo(e, 1)
+            [Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
+            [Keys.ArrowDown]: (e) => this.navigateTo(e, 1)
         };
     }
     get carousel() {
@@ -579,8 +675,8 @@ class MessageAttachmentsComponent extends ChatItem {
         }
     }
 }
-MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
+MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
             provide: ChatItem,
             useExisting: forwardRef(() => MessageAttachmentsComponent)
         }], viewQueries: [{ propertyName: "deck", first: true, predicate: ["deck"], descendants: true, read: ElementRef, static: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
@@ -619,7 +715,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         >
         </button>
     `, isInline: true, components: [{ type: i1$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{
@@ -683,127 +779,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['item', { read: ElementRef }]
             }] } });
 
-// eslint-disable no-forward-ref
-/**
- * @hidden
- */
-class SuggestedActionsComponent extends ChatItem {
-    constructor() {
-        super(...arguments);
-        this.dispatch = new EventEmitter();
-        this.defaultClass = true;
-        this.selectedIndex = 0;
-        this.keyHandlers = {
-            [37 /* left */]: (e) => this.navigateTo(e, -1),
-            [39 /* right */]: (e) => this.navigateTo(e, 1),
-            [13 /* enter */]: (_, action) => this.actionClick(action)
-        };
-    }
-    isSelected(index) {
-        return this.selected && this.selectedIndex === index;
-    }
-    actionClick(action) {
-        this.dispatch.next(action);
-    }
-    actionKeydown(e, action) {
-        const handler = this.keyHandlers[e.keyCode];
-        if (handler) {
-            handler(e, action);
-        }
-    }
-    focus() {
-        this.select(this.selectedIndex);
-    }
-    select(index) {
-        this.selectedIndex = index;
-        const item = this.items.toArray()[index];
-        if (item) {
-            item.nativeElement.focus();
-        }
-    }
-    navigateTo(e, offset) {
-        const prevIndex = this.selectedIndex;
-        const nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
-        if (nextIndex !== prevIndex) {
-            this.select(nextIndex);
-            e.preventDefault();
-        }
-    }
-}
-SuggestedActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SuggestedActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SuggestedActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", tabbable: "tabbable" }, outputs: { dispatch: "dispatch" }, host: { properties: { "class.k-quick-replies": "this.defaultClass" } }, providers: [{
-            provide: ChatItem,
-            useExisting: forwardRef(() => SuggestedActionsComponent)
-        }], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <span
-            #item
-            *ngFor="let action of actions; index as index; first as first; last as last"
-            class="k-quick-reply"
-            [class.k-selected]="isSelected(index)"
-            [class.k-focus]="isSelected(index)"
-            [class.k-first]="first"
-            [class.k-last]="last"
-            [attr.tabindex]="tabbable && selectedIndex === index ? '0' : '-1'"
-            (click)="actionClick(action)"
-            (keydown)="actionKeydown($event, action)"
-        >
-        {{ action.title || action.value }}
-        </span>
-    `, isInline: true, directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-chat-suggested-actions',
-                    providers: [{
-                            provide: ChatItem,
-                            useExisting: forwardRef(() => SuggestedActionsComponent)
-                        }],
-                    template: `
-        <span
-            #item
-            *ngFor="let action of actions; index as index; first as first; last as last"
-            class="k-quick-reply"
-            [class.k-selected]="isSelected(index)"
-            [class.k-focus]="isSelected(index)"
-            [class.k-first]="first"
-            [class.k-last]="last"
-            [attr.tabindex]="tabbable && selectedIndex === index ? '0' : '-1'"
-            (click)="actionClick(action)"
-            (keydown)="actionKeydown($event, action)"
-        >
-        {{ action.title || action.value }}
-        </span>
-    `
-                }]
-        }], propDecorators: { actions: [{
-                type: Input
-            }], tabbable: [{
-                type: Input
-            }], dispatch: [{
-                type: Output
-            }], defaultClass: [{
-                type: HostBinding,
-                args: ['class.k-quick-replies']
-            }], items: [{
-                type: ViewChildren,
-                args: ['item']
-            }] } });
-
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
  * @hidden
  */
 class MessageListComponent {
-    constructor(element, intl) {
+    constructor(element, intl, renderer) {
         this.element = element;
         this.intl = intl;
+        this.renderer = renderer;
         this.executeAction = new EventEmitter();
         this.navigate = new EventEmitter();
         this.resize = new EventEmitter();
         this.cssClass = true;
         this.view = [];
+        this.subs = new Subscription();
         this.keyActions = {
-            [38 /* up */]: (e) => this.navigateTo(e, -1),
-            [40 /* down */]: (e) => this.navigateTo(e, 1)
+            [Keys.Home]: (_) => this.onHomeOrEndKeyDown('home'),
+            [Keys.End]: (_) => this.onHomeOrEndKeyDown('end'),
+            [Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
+            [Keys.ArrowDown]: (e) => this.navigateTo(e, 1),
+            [Keys.Tab]: (e) => this.onTabKeyDown(e),
         };
     }
     set messages(value) {
@@ -814,9 +810,17 @@ class MessageListComponent {
     get messages() {
         return this._messages;
     }
+    ngOnInit() {
+        const elRef = this.element.nativeElement;
+        this.subs.add(this.renderer.listen(elRef, 'keydown', event => this.onKeydown(event)));
+        this.subs.add(this.renderer.listen(elRef, 'focusout', event => this.onBlur(event)));
+    }
     ngAfterViewInit() {
         this.selectedItem = this.items.last;
     }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
     onResize() {
         this.resize.emit();
     }
@@ -862,13 +866,37 @@ class MessageListComponent {
         }
         return items[items.length - 1];
     }
+    onHomeOrEndKeyDown(key) {
+        const items = this.items.toArray();
+        if (key === 'home') {
+            items[0].focus();
+        }
+        else {
+            items[items.length - 1].focus();
+        }
+    }
+    onTabKeyDown(event) {
+        const item = this.items.toArray()[this.items.length - 1];
+        const isLastItemQuickReply = item instanceof SuggestedActionsComponent;
+        const isLastItemMessage = item instanceof MessageComponent;
+        event.target.blur();
+        if (isLastItemQuickReply || isLastItemMessage) {
+            this.select(item);
+            item.focus();
+            this.navigate.emit();
+        }
+    }
     navigateTo(e, offset) {
         const items = this.items.toArray();
         const prevItem = this.selectedItem;
         const prevIndex = items.indexOf(prevItem);
         const nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
         const nextItem = items[nextIndex];
+        const isNextItemQuickReply = nextItem instanceof SuggestedActionsComponent;
         if (nextItem !== prevItem) {
+            if (isNextItemQuickReply) {
+                nextItem.items.toArray()[0].nativeElement.focus();
+            }
             this.select(nextItem);
             nextItem.focus();
             this.navigate.emit();
@@ -876,8 +904,8 @@ class MessageListComponent {
         }
     }
 }
-MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", user: "user" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { listeners: { "keydown": "onKeydown($event)", "focusout": "onBlur($event)" }, properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
+MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", user: "user" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
         <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
         <ng-container [ngSwitch]="group.type">
             <div
@@ -948,7 +976,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         <kendo-resize-sensor (resize)="onResize()">
         </kendo-resize-sensor>
     `, isInline: true, components: [{ type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template"] }, { type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template"] }, { type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "tabbable"], outputs: ["dispatch"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-message-list',
@@ -1024,7 +1052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </kendo-resize-sensor>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }]; }, propDecorators: { messages: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i0.Renderer2 }]; }, propDecorators: { messages: [{
                 type: Input
             }], attachmentTemplate: [{
                 type: Input
@@ -1044,12 +1072,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], cssClass: [{
                 type: HostBinding,
                 args: ['class.k-message-list-content']
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onBlur: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
             }] } });
 
 /**
@@ -1066,9 +1088,9 @@ class FocusedStateDirective {
         this.focused = false;
     }
 }
-FocusedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FocusedStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FocusedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FocusedStateDirective, selector: "[kendoChatFocusedState]", host: { listeners: { "focusin": "onFocus()", "focusout": "onBlur()" }, properties: { "class.k-focus": "this.focused" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FocusedStateDirective, decorators: [{
+FocusedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusedStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FocusedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FocusedStateDirective, selector: "[kendoChatFocusedState]", host: { listeners: { "focusin": "onFocus()", "focusout": "onBlur()" }, properties: { "class.k-focus": "this.focused" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusedStateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChatFocusedState]'
@@ -1149,9 +1171,9 @@ class MessageBoxComponent {
         return this.localization.get(key);
     }
 }
-MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MessageBoxComponent, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "class": "this.hostClasses", "class.!k-align-items-end": "this.messageBoxValue" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: "\n    <ng-container *ngIf=\"!messageBoxTemplate\">\n        <input\n            *ngIf=\"type === 'textbox'\"\n            #messageBoxInput\n            kendoChatFocusedState\n            type=\"text\"\n            class=\"k-textbox k-input k-input-md k-input-solid\"\n            [placeholder]=\"textFor('messagePlaceholder')\"\n            (keydown)=\"inputKeydown($event)\"\n        />\n\n        <textarea\n        *ngIf=\"type === 'textarea'\"\n        #messageBoxInput\n        kendoChatFocusedState\n        [rows]=\"3\"\n        class=\"k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none\"\n        [placeholder]=\"textFor('messagePlaceholder')\"\n        (keydown)=\"textAreaKeydown($event)\"\n        ></textarea>\n\n        <button\n            kendoButton\n            fillMode=\"flat\"\n            class=\"k-button-send\"\n            [tabindex]=\"0\"\n            [attr.title]=\"textFor('send')\"\n            (click)=\"sendClick()\"\n        >\n            <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 16 16\"><path d=\"M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z\"/></svg>\n        </button>\n    </ng-container>\n\n    <ng-template *ngIf=\"messageBoxTemplate\" [ngTemplateOutlet]=\"messageBoxTemplate?.templateRef\"></ng-template>\n", isInline: true, components: [{ type: i1$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MessageBoxComponent, decorators: [{
+MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageBoxComponent, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "class": "this.hostClasses", "class.!k-align-items-end": "this.messageBoxValue" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: "\n    <ng-container *ngIf=\"!messageBoxTemplate\">\n        <input\n            *ngIf=\"type === 'textbox'\"\n            #messageBoxInput\n            [attr.role]=\"'textbox'\"\n            kendoChatFocusedState\n            type=\"text\"\n            class=\"k-textbox k-input k-input-md k-input-solid\"\n            [attr.aria-label]=\"textFor('messageBoxInputLabel')\"\n            [placeholder]=\"textFor('messagePlaceholder')\"\n            (keydown)=\"inputKeydown($event)\"\n        />\n\n        <textarea\n            *ngIf=\"type === 'textarea'\"\n            #messageBoxInput\n            [attr.role]=\"'textbox'\"\n            kendoChatFocusedState\n            [rows]=\"3\"\n            class=\"k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none\"\n            [attr.aria-label]=\"textFor('messageBoxInputLabel')\"\n            [placeholder]=\"textFor('messagePlaceholder')\"\n            (keydown)=\"textAreaKeydown($event)\"\n        ></textarea>\n\n        <button\n            kendoButton\n            fillMode=\"flat\"\n            class=\"k-button-send\"\n            [tabindex]=\"0\"\n            [attr.title]=\"textFor('send')\"\n            (click)=\"sendClick()\"\n        >\n            <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 16 16\"><path d=\"M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z\"/></svg>\n        </button>\n    </ng-container>\n\n    <ng-template *ngIf=\"messageBoxTemplate\" [ngTemplateOutlet]=\"messageBoxTemplate?.templateRef\"></ng-template>\n", isInline: true, components: [{ type: i1$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-message-box',
@@ -1160,21 +1182,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <input
             *ngIf="type === 'textbox'"
             #messageBoxInput
+            [attr.role]="'textbox'"
             kendoChatFocusedState
             type="text"
             class="k-textbox k-input k-input-md k-input-solid"
+            [attr.aria-label]="textFor('messageBoxInputLabel')"
             [placeholder]="textFor('messagePlaceholder')"
             (keydown)="inputKeydown($event)"
         />
 
         <textarea
-        *ngIf="type === 'textarea'"
-        #messageBoxInput
-        kendoChatFocusedState
-        [rows]="3"
-        class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
-        [placeholder]="textFor('messagePlaceholder')"
-        (keydown)="textAreaKeydown($event)"
+            *ngIf="type === 'textarea'"
+            #messageBoxInput
+            [attr.role]="'textbox'"
+            kendoChatFocusedState
+            [rows]="3"
+            class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
+            [attr.aria-label]="textFor('messageBoxInputLabel')"
+            [placeholder]="textFor('messagePlaceholder')"
+            (keydown)="textAreaKeydown($event)"
         ></textarea>
 
         <button
@@ -1220,9 +1246,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, selector: "kendoConversationalUIMessages", inputs: { messagePlaceholder: "messagePlaceholder", send: "send" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, selector: "kendoConversationalUIMessages", inputs: { messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1232,6 +1258,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], send: [{
                 type: Input
+            }], messageListLabel: [{
+                type: Input
+            }], messageBoxInputLabel: [{
+                type: Input
             }] } });
 
 // eslint-disable no-forward-ref
@@ -1244,14 +1274,14 @@ class LocalizedMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]", providers: [
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -1317,9 +1347,9 @@ class ScrollAnchorDirective {
         this.zone.runOutsideAngular(() => setTimeout(() => this.scrolling = false, 1000));
     }
 }
-ScrollAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ScrollAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll" }, outputs: { autoScrollChange: "autoScrollChange" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ScrollAnchorDirective, decorators: [{
+ScrollAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ScrollAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll" }, outputs: { autoScrollChange: "autoScrollChange" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollAnchorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChatScrollAnchor]',
@@ -1429,8 +1459,8 @@ class ChatComponent {
         return this.localization.get(key);
     }
 }
-ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChatComponent, deps: [{ token: i1$2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChatComponent, selector: "kendo-chat", inputs: { messages: "messages", user: "user", messageBoxType: "messageBoxType" }, outputs: { sendMessage: "sendMessage", executeAction: "executeAction" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
+ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatComponent, deps: [{ token: i1$2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ChatComponent, selector: "kendo-chat", inputs: { messages: "messages", user: "user", messageBoxType: "messageBoxType" }, outputs: { sendMessage: "sendMessage", executeAction: "executeAction" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -1444,27 +1474,35 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
         i18n-send="kendo.chat.send|The text for the Send button"
         send="Send..."
+
+        i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
+        messageListLabel="Message list"
+
+        i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
+        messageBoxInputLabel="Message"
         >
         </ng-container>
 
         <div
-        #messageList
-        class="k-message-list k-avatars"
-        aria-live="polite" role="log"
-        kendoChatScrollAnchor
+            #messageList
+            class="k-message-list k-avatars"
+            aria-live="polite"
+            role="log"
+            kendoChatScrollAnchor
+            [attr.aria-label]="textFor('messageListLabel')"
             #anchor="scrollAnchor"
             [(autoScroll)]="autoScroll"
         >
-        <kendo-chat-message-list
-            [messages]="messages"
-            [messageTemplate]="messageTemplate"
-            [attachmentTemplate]="attachmentTemplate"
-            [user]="user"
-            (executeAction)="dispatchAction($event)"
-            (resize)="anchor.scrollToBottom()"
-            (navigate)="this.autoScroll = false"
-        >
-        </kendo-chat-message-list>
+            <kendo-chat-message-list
+                [messages]="messages"
+                [messageTemplate]="messageTemplate"
+                [attachmentTemplate]="attachmentTemplate"
+                [user]="user"
+                (executeAction)="dispatchAction($event)"
+                (resize)="anchor.scrollToBottom()"
+                (navigate)="this.autoScroll = false"
+            >
+            </kendo-chat-message-list>
         </div>
         <kendo-message-box
         #messageBox
@@ -1477,7 +1515,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         >
         </kendo-message-box>
     `, isInline: true, components: [{ type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "user"], outputs: ["executeAction", "navigate", "resize"] }, { type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChatComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -1496,27 +1534,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
         i18n-send="kendo.chat.send|The text for the Send button"
         send="Send..."
+
+        i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
+        messageListLabel="Message list"
+
+        i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
+        messageBoxInputLabel="Message"
         >
         </ng-container>
 
         <div
-        #messageList
-        class="k-message-list k-avatars"
-        aria-live="polite" role="log"
-        kendoChatScrollAnchor
+            #messageList
+            class="k-message-list k-avatars"
+            aria-live="polite"
+            role="log"
+            kendoChatScrollAnchor
+            [attr.aria-label]="textFor('messageListLabel')"
             #anchor="scrollAnchor"
             [(autoScroll)]="autoScroll"
         >
-        <kendo-chat-message-list
-            [messages]="messages"
-            [messageTemplate]="messageTemplate"
-            [attachmentTemplate]="attachmentTemplate"
-            [user]="user"
-            (executeAction)="dispatchAction($event)"
-            (resize)="anchor.scrollToBottom()"
-            (navigate)="this.autoScroll = false"
-        >
-        </kendo-chat-message-list>
+            <kendo-chat-message-list
+                [messages]="messages"
+                [messageTemplate]="messageTemplate"
+                [attachmentTemplate]="attachmentTemplate"
+                [user]="user"
+                (executeAction)="dispatchAction($event)"
+                (resize)="anchor.scrollToBottom()"
+                (navigate)="this.autoScroll = false"
+            >
+            </kendo-chat-message-list>
         </div>
         <kendo-message-box
         #messageBox
@@ -1577,14 +1623,14 @@ class CustomMessagesComponent extends Messages {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CustomMessagesComponent, selector: "kendo-chat-messages", providers: [
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-chat-messages", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => CustomMessagesComponent)
         }
     ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -1614,8 +1660,8 @@ class HeroCardComponent {
         this.executeAction.next(action);
     }
 }
-HeroCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: HeroCardComponent, selector: "kendo-chat-hero-card", inputs: { imageUrl: "imageUrl", title: "title", subtitle: "subtitle", actions: "actions" }, outputs: { executeAction: "executeAction" }, host: { properties: { "class.k-card": "this.cssClass" } }, ngImport: i0, template: `
+HeroCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeroCardComponent, selector: "kendo-chat-hero-card", inputs: { imageUrl: "imageUrl", title: "title", subtitle: "subtitle", actions: "actions" }, outputs: { executeAction: "executeAction" }, host: { properties: { "class.k-card": "this.cssClass" } }, ngImport: i0, template: `
         <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
         <div class="k-card-body">
         <h5 class="k-card-title" *ngIf="title">
@@ -1638,7 +1684,7 @@ HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         </span>
         </div>
     `, isInline: true, components: [{ type: i1$1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeroCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeroCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-hero-card',
@@ -1724,8 +1770,8 @@ const PRIVATE_DIRECTIVES = [
  */
 class ChatModule {
 }
-ChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChatModule, declarations: [ChatComponent,
+ChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, declarations: [ChatComponent,
         CustomMessagesComponent,
         AttachmentTemplateDirective,
         MessageTemplateDirective,
@@ -1747,12 +1793,12 @@ ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         MessageTemplateDirective,
         HeroCardComponent,
         ChatMessageBoxTemplateDirective] });
-ChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChatModule, imports: [[
+ChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, imports: [[
             ButtonModule,
             CommonModule,
             ResizeSensorModule
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChatModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [