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

package/chat/l10n/messages.d.ts

@@ -16,6 +16,15 @@ export declare class Messages extends ComponentMessages {
      * Sets the text for the **Send** button.
      */
     send: string;
+    /**
+     * The label for the Message list.
+     */
+    messageListLabel: string;
+    /**
+     * The label for the Message input box.
+     *
+     */
+    messageBoxInputLabel: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<Messages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, "kendoConversationalUIMessages", never, { "messagePlaceholder": "messagePlaceholder"; "send": "send"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, "kendoConversationalUIMessages", never, { "messagePlaceholder": "messagePlaceholder"; "send": "send"; "messageListLabel": "messageListLabel"; "messageBoxInputLabel": "messageBoxInputLabel"; }, {}, never>;
 }

package/chat/message-list.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { AfterViewInit, ElementRef, EventEmitter, QueryList } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
 import { Action, ExecuteActionEvent, Message, User } from '../api';
 import { ChatItem } from './chat-item';
 import { ViewItem } from './chat-view';
@@ -13,9 +13,10 @@ import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class MessageListComponent implements AfterViewInit {
+export declare class MessageListComponent implements OnInit, AfterViewInit, OnDestroy {
     private element;
     private intl;
+    private renderer;
     set messages(value: Message[]);
     get messages(): Message[];
     attachmentTemplate: AttachmentTemplateDirective;
@@ -28,10 +29,13 @@ export declare class MessageListComponent implements AfterViewInit {
     cssClass: boolean;
     view: ViewItem[] | any[];
     private _messages;
+    private subs;
     private selectedItem;
     private keyActions;
-    constructor(element: ElementRef, intl: IntlService);
+    constructor(element: ElementRef, intl: IntlService, renderer: Renderer2);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     onResize(): void;
     formatTimeStamp(date: any): string;
     onKeydown(e: any): void;
@@ -41,6 +45,8 @@ export declare class MessageListComponent implements AfterViewInit {
     trackGroup(_index: number, item: ViewItem): any;
     select(item: ChatItem): void;
     last(items: any): any;
+    private onHomeOrEndKeyDown;
+    private onTabKeyDown;
     private navigateTo;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "kendo-chat-message-list", never, { "messages": "messages"; "attachmentTemplate": "attachmentTemplate"; "messageTemplate": "messageTemplate"; "user": "user"; }, { "executeAction": "executeAction"; "navigate": "navigate"; "resize": "resize"; }, never, never>;

package/chat/suggested-actions.component.d.ts

@@ -22,8 +22,7 @@ export declare class SuggestedActionsComponent extends ChatItem {
     actionClick(action: Action): void;
     actionKeydown(e: any, action: Action): void;
     focus(): void;
-    private select;
-    private navigateTo;
+    private changeSelectedIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<SuggestedActionsComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SuggestedActionsComponent, "kendo-chat-suggested-actions", never, { "actions": "actions"; "tabbable": "tabbable"; }, { "dispatch": "dispatch"; }, never, never>;
 }

package/esm2020/chat/chat.component.mjs

@@ -127,27 +127,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
@@ -179,27 +187,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

package/esm2020/chat/l10n/messages.mjs

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
 export 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: [{
@@ -22,4 +22,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], send: [{
                 type: Input
+            }], messageListLabel: [{
+                type: Input
+            }], messageBoxInputLabel: [{
+                type: Input
             }] } });

package/esm2020/chat/message-attachments.component.mjs

@@ -5,6 +5,7 @@
 import { Component, ElementRef, forwardRef, HostBinding, Input, NgZone, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
+import { Keys } from '@progress/kendo-angular-common';
 import { ChatItem } from './chat-item';
 import { AttachmentTemplateDirective } from './attachment-template.directive';
 import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
@@ -31,12 +32,12 @@ export 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() {

package/esm2020/chat/message-box.component.mjs

@@ -77,7 +77,7 @@ export 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.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: i3.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.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: i3.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: [{
@@ -87,21 +87,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

package/esm2020/chat/message-list.component.mjs

@@ -2,14 +2,20 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, QueryList, ViewChildren } from '@angular/core';
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, QueryList, Renderer2, ViewChildren } from '@angular/core';
 import { ExecuteActionEvent } from '../api';
+import { Keys } from '@progress/kendo-angular-common';
 import { closest } from '../common/utils';
 import { ChatItem } from './chat-item';
 import { chatView, isAuthor } from './chat-view';
 import { AttachmentTemplateDirective } from './attachment-template.directive';
 import { MessageTemplateDirective } from './message-template.directive';
 import { IntlService } from '@progress/kendo-angular-intl';
+import { Subscription } from 'rxjs';
+import { SuggestedActionsComponent } from './suggested-actions.component';
+import { MessageComponent } from './message.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "./message.component";
@@ -22,17 +28,22 @@ import * as i7 from "@angular/common";
  * @hidden
  */
 export 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) {
@@ -43,9 +54,17 @@ export 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();
     }
@@ -91,13 +110,37 @@ export 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();
@@ -105,8 +148,8 @@ export 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
@@ -253,7 +296,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
@@ -273,10 +316,4 @@ 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']]
             }] } });

package/esm2020/chat/suggested-actions.component.mjs

@@ -2,11 +2,13 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-empty-function */
 import { Component, EventEmitter, forwardRef, HostBinding, Input, Output, QueryList, ViewChildren } from '@angular/core';
+import { Keys } from '@progress/kendo-angular-common';
 import { ChatItem } from './chat-item';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-// eslint-disable no-forward-ref
 /**
  * @hidden
  */
@@ -17,9 +19,9 @@ export class SuggestedActionsComponent extends ChatItem {
         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)
+            [Keys.Tab]: (e) => this.changeSelectedIndex(e),
+            [Keys.Enter]: (_, action) => this.actionClick(action),
+            [Keys.Space]: (_, action) => this.actionClick(action),
         };
     }
     isSelected(index) {
@@ -34,23 +36,11 @@ export class SuggestedActionsComponent extends ChatItem {
             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) {
+    focus() { }
+    changeSelectedIndex(e) {
+        const offset = e.shiftKey ? -1 : 1;
         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();
-        }
+        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 });
@@ -62,11 +52,12 @@ SuggestedActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             #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]="tabbable && selectedIndex === index ? '0' : '-1'"
+            [attr.tabindex]="0"
             (click)="actionClick(action)"
             (keydown)="actionKeydown($event, action)"
         >
@@ -86,11 +77,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             #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]="tabbable && selectedIndex === index ? '0' : '-1'"
+            [attr.tabindex]="0"
             (click)="actionClick(action)"
             (keydown)="actionKeydown($event, action)"
         >

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-conversational-ui',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1676453613,
-    version: '11.2.0',
+    publishDate: 1676463622,
+    version: '11.3.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };