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

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
@@ -119,8 +119,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-conversational-ui',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1676453613,
-    version: '11.2.0',
+    publishDate: 1677586033,
+    version: '11.3.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -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
@@ -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() {
@@ -683,127 +779,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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.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"
-            [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.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"
-            [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.12", 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.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: { 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
@@ -1024,7 +1052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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.12", ngImpo
             }], cssClass: [{
                 type: HostBinding,
                 args: ['class.k-message-list-content']
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onBlur: [{
-                type: HostListener,
-                args: ['focusout', ['$event']]
             }] } });
 
 /**
@@ -1150,7 +1172,7 @@ class MessageBoxComponent {
     }
 }
 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            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"] }] });
+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: [{
@@ -1160,21 +1182,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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
@@ -1221,7 +1247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 class Messages extends ComponentMessages {
 }
 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" }, usesInheritance: true, ngImport: i0 });
+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: [{
@@ -1232,6 +1258,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], send: [{
                 type: Input
+            }], messageListLabel: [{
+                type: Input
+            }], messageBoxInputLabel: [{
+                type: Input
             }] } });
 
 // eslint-disable no-forward-ref
@@ -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
@@ -1496,27 +1534,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", 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