@progress/kendo-angular-conversational-ui 11.5.0-develop.4 → 11.5.0-develop.6

package/chat/l10n/messages.d.ts

@@ -25,6 +25,18 @@ export declare class Messages extends ComponentMessages {
      *
      */
     messageBoxInputLabel: string;
+    /**
+     * The text for the left arrow of the message attachments.
+     */
+    messageAttachmentLeftArrow: string;
+    /**
+     * The text for the right arrow of the message attachments.
+     */
+    messageAttachmentRightArrow: string;
+    /**
+     * The alt attribute text for the avatar image.
+     */
+    messageAvatarAlt: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<Messages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, "kendoConversationalUIMessages", never, { "messagePlaceholder": "messagePlaceholder"; "send": "send"; "messageListLabel": "messageListLabel"; "messageBoxInputLabel": "messageBoxInputLabel"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, "kendoConversationalUIMessages", never, { "messagePlaceholder": "messagePlaceholder"; "send": "send"; "messageListLabel": "messageListLabel"; "messageBoxInputLabel": "messageBoxInputLabel"; "messageAttachmentLeftArrow": "messageAttachmentLeftArrow"; "messageAttachmentRightArrow": "messageAttachmentRightArrow"; "messageAvatarAlt": "messageAvatarAlt"; }, {}, never>;
 }

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

@@ -7,6 +7,7 @@ import { Attachment, AttachmentLayout } from '../api/attachment.interface';
 import { ChatItem } from './chat-item';
 import { AttachmentTemplateDirective } from './attachment-template.directive';
 import { SVGIcon } from '@progress/kendo-svg-icons';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -25,6 +26,7 @@ export declare class MessageAttachmentsComponent extends ChatItem implements Aft
     layout: AttachmentLayout;
     tabbable: boolean;
     template: AttachmentTemplateDirective;
+    localization: LocalizationService;
     get carousel(): boolean;
     deck: ElementRef;
     items: QueryList<ElementRef>;
@@ -44,6 +46,10 @@ export declare class MessageAttachmentsComponent extends ChatItem implements Aft
     private select;
     private navigateTo;
     private onScroll;
+    /**
+     * @hidden
+     */
+    textFor(key: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageAttachmentsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageAttachmentsComponent, "kendo-chat-message-attachments", never, { "attachments": "attachments"; "layout": "layout"; "tabbable": "tabbable"; "template": "template"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageAttachmentsComponent, "kendo-chat-message-attachments", never, { "attachments": "attachments"; "layout": "layout"; "tabbable": "tabbable"; "template": "template"; "localization": "localization"; }, {}, never, never>;
 }

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

@@ -9,6 +9,7 @@ import { ViewItem } from './chat-view';
 import { AttachmentTemplateDirective } from './attachment-template.directive';
 import { MessageTemplateDirective } from './message-template.directive';
 import { IntlService } from '@progress/kendo-angular-intl';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -21,6 +22,7 @@ export declare class MessageListComponent implements OnInit, AfterViewInit, OnDe
     get messages(): Message[];
     attachmentTemplate: AttachmentTemplateDirective;
     messageTemplate: MessageTemplateDirective;
+    localization: LocalizationService;
     user: User;
     executeAction: EventEmitter<ExecuteActionEvent>;
     navigate: EventEmitter<any>;
@@ -48,6 +50,10 @@ export declare class MessageListComponent implements OnInit, AfterViewInit, OnDe
     private onHomeOrEndKeyDown;
     private onTabKeyDown;
     private navigateTo;
+    /**
+     * @hidden
+     */
+    textFor(key: string): string;
     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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "kendo-chat-message-list", never, { "messages": "messages"; "attachmentTemplate": "attachmentTemplate"; "messageTemplate": "messageTemplate"; "localization": "localization"; "user": "user"; }, { "executeAction": "executeAction"; "navigate": "navigate"; "resize": "resize"; }, never, never>;
 }

package/esm2020/chat/chat.component.mjs

@@ -120,19 +120,27 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             useValue: 'kendo.chat'
         }
     ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container
-        kendoChatLocalizedMessages
-        i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-        messagePlaceholder="Type a message..."
+        <ng-container kendoChatLocalizedMessages
+            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
+            messagePlaceholder="Type a message..."
 
-        i18n-send="kendo.chat.send|The text for the Send button"
-        send="Send..."
+            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-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"
+            i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
+            messageBoxInputLabel="Message"
+
+            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
+            messageAttachmentLeftArrow="Previous item"
+
+            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
+            messageAttachmentRightArrow="Next item"
+
+            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
+            messageAvatarAlt="Avatar"
         >
         </ng-container>
 
@@ -149,6 +157,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <kendo-chat-message-list
                 [messages]="messages"
                 [messageTemplate]="messageTemplate"
+                [localization]="localizationText"
                 [attachmentTemplate]="attachmentTemplate"
                 [user]="user"
                 (executeAction)="dispatchAction($event)"
@@ -167,7 +176,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         (sendMessage)="sendMessage.emit($event)"
         >
         </kendo-message-box>
-    `, isInline: true, components: [{ type: i2.MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "user"], outputs: ["executeAction", "navigate", "resize"] }, { type: i3.MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }], directives: [{ type: i4.LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { type: i5.ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }] });
+    `, isInline: true, components: [{ type: i2.MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "localization", "user"], outputs: ["executeAction", "navigate", "resize"] }, { type: i3.MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }], directives: [{ type: i4.LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { type: i5.ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{
@@ -180,19 +189,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     selector: 'kendo-chat',
                     template: `
-        <ng-container
-        kendoChatLocalizedMessages
-        i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-        messagePlaceholder="Type a message..."
+        <ng-container kendoChatLocalizedMessages
+            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
+            messagePlaceholder="Type a message..."
+
+            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"
 
-        i18n-send="kendo.chat.send|The text for the Send button"
-        send="Send..."
+            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
+            messageAttachmentLeftArrow="Previous item"
 
-        i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
-        messageListLabel="Message list"
+            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
+            messageAttachmentRightArrow="Next item"
 
-        i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
-        messageBoxInputLabel="Message"
+            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
+            messageAvatarAlt="Avatar"
         >
         </ng-container>
 
@@ -209,6 +226,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-chat-message-list
                 [messages]="messages"
                 [messageTemplate]="messageTemplate"
+                [localization]="localizationText"
                 [attachmentTemplate]="attachmentTemplate"
                 [user]="user"
                 (executeAction)="dispatchAction($event)"

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", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel" }, 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", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", messageAvatarAlt: "messageAvatarAlt" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
@@ -26,4 +26,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], messageBoxInputLabel: [{
                 type: Input
+            }], messageAttachmentLeftArrow: [{
+                type: Input
+            }], messageAttachmentRightArrow: [{
+                type: Input
+            }], messageAvatarAlt: [{
+                type: Input
             }] } });

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

@@ -2,6 +2,7 @@
 * 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 */
 import { Component, ElementRef, forwardRef, HostBinding, Input, NgZone, QueryList, ViewChild, ViewChildren } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -9,6 +10,7 @@ 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';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-buttons";
 import * as i2 from "./attachment.component";
@@ -105,9 +107,15 @@ export class MessageAttachmentsComponent extends ChatItem {
             });
         }
     }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
 }
 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: [{
+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", localization: "localization" }, 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: `
@@ -116,6 +124,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             (click)="scrollTo(-1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentLeftArrow')"
             [svgIcon]="chevronLeftIcon"
             icon="chevron-left"
         >
@@ -141,6 +150,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             (click)="scrollTo(1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentRightArrow')"
             [svgIcon]="chevronRightIcon"
             icon="chevron-right"
         >
@@ -160,6 +170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (click)="scrollTo(-1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentLeftArrow')"
             [svgIcon]="chevronLeftIcon"
             icon="chevron-left"
         >
@@ -185,6 +196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (click)="scrollTo(1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentRightArrow')"
             [svgIcon]="chevronRightIcon"
             icon="chevron-right"
         >
@@ -199,6 +211,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], template: [{
                 type: Input
+            }], localization: [{
+                type: Input
             }], carousel: [{
                 type: HostBinding,
                 args: ['class.k-card-deck-scrollwrap']

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

@@ -16,6 +16,7 @@ import { IntlService } from '@progress/kendo-angular-intl';
 import { Subscription } from 'rxjs';
 import { SuggestedActionsComponent } from './suggested-actions.component';
 import { MessageComponent } from './message.component';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "./message.component";
@@ -147,9 +148,15 @@ export class MessageListComponent {
             e.preventDefault();
         }
     }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
 }
 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: `
+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", localization: "localization", 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
@@ -167,6 +174,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <img
                 *ngIf="group.author.avatarUrl"
                 [attr.src]="group.author.avatarUrl"
+                [alt]="textFor('messageAvatarAlt')"
                 class="k-avatar"
             />
             <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
@@ -199,6 +207,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             *ngSwitchCase="'attachment-group'"
             [attachments]="group.attachments"
             [layout]="group.attachmentLayout"
+            [localization]="localization"
             [tabbable]="lastGroup"
             [template]="attachmentTemplate"
             (click)="select(attachments)"
@@ -219,7 +228,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </ng-container>
         <kendo-resize-sensor (resize)="onResize()">
         </kendo-resize-sensor>
-    `, isInline: true, components: [{ type: i2.MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template"] }, { type: i3.AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { type: i4.MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template"] }, { type: i5.SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "tabbable"], outputs: ["dispatch"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template"] }, { type: i3.AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { type: i4.MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { type: i5.SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "tabbable"], outputs: ["dispatch"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
@@ -242,6 +251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <img
                 *ngIf="group.author.avatarUrl"
                 [attr.src]="group.author.avatarUrl"
+                [alt]="textFor('messageAvatarAlt')"
                 class="k-avatar"
             />
             <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
@@ -274,6 +284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngSwitchCase="'attachment-group'"
             [attachments]="group.attachments"
             [layout]="group.attachmentLayout"
+            [localization]="localization"
             [tabbable]="lastGroup"
             [template]="attachmentTemplate"
             (click)="select(attachments)"
@@ -302,6 +313,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], messageTemplate: [{
                 type: Input
+            }], localization: [{
+                type: Input
             }], user: [{
                 type: Input
             }], executeAction: [{

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: 1680177261,
-    version: '11.5.0-develop.4',
+    publishDate: 1680200491,
+    version: '11.5.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

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

@@ -119,8 +119,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-conversational-ui',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1680177261,
-    version: '11.5.0-develop.4',
+    publishDate: 1680200491,
+    version: '11.5.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -582,6 +582,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // eslint-disable no-forward-ref
 /**
  * @hidden
@@ -674,9 +675,15 @@ class MessageAttachmentsComponent extends ChatItem {
             });
         }
     }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
 }
 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: [{
+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", localization: "localization" }, 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: `
@@ -685,6 +692,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             (click)="scrollTo(-1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentLeftArrow')"
             [svgIcon]="chevronLeftIcon"
             icon="chevron-left"
         >
@@ -710,6 +718,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             (click)="scrollTo(1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentRightArrow')"
             [svgIcon]="chevronRightIcon"
             icon="chevron-right"
         >
@@ -729,6 +738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (click)="scrollTo(-1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentLeftArrow')"
             [svgIcon]="chevronLeftIcon"
             icon="chevron-left"
         >
@@ -754,6 +764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (click)="scrollTo(1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentRightArrow')"
             [svgIcon]="chevronRightIcon"
             icon="chevron-right"
         >
@@ -768,6 +779,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], template: [{
                 type: Input
+            }], localization: [{
+                type: Input
             }], carousel: [{
                 type: HostBinding,
                 args: ['class.k-card-deck-scrollwrap']
@@ -903,9 +916,15 @@ class MessageListComponent {
             e.preventDefault();
         }
     }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
 }
 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: `
+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", localization: "localization", 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
@@ -923,6 +942,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <img
                 *ngIf="group.author.avatarUrl"
                 [attr.src]="group.author.avatarUrl"
+                [alt]="textFor('messageAvatarAlt')"
                 class="k-avatar"
             />
             <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
@@ -955,6 +975,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             *ngSwitchCase="'attachment-group'"
             [attachments]="group.attachments"
             [layout]="group.attachmentLayout"
+            [localization]="localization"
             [tabbable]="lastGroup"
             [template]="attachmentTemplate"
             (click)="select(attachments)"
@@ -975,7 +996,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </ng-container>
         <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"] }] });
+    `, 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", "localization"] }, { 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.12", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
@@ -998,6 +1019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <img
                 *ngIf="group.author.avatarUrl"
                 [attr.src]="group.author.avatarUrl"
+                [alt]="textFor('messageAvatarAlt')"
                 class="k-avatar"
             />
             <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
@@ -1030,6 +1052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngSwitchCase="'attachment-group'"
             [attachments]="group.attachments"
             [layout]="group.attachmentLayout"
+            [localization]="localization"
             [tabbable]="lastGroup"
             [template]="attachmentTemplate"
             (click)="select(attachments)"
@@ -1058,6 +1081,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], messageTemplate: [{
                 type: Input
+            }], localization: [{
+                type: Input
             }], user: [{
                 type: Input
             }], executeAction: [{
@@ -1247,7 +1272,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", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel" }, 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", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", messageAvatarAlt: "messageAvatarAlt" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
@@ -1262,6 +1287,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], messageBoxInputLabel: [{
                 type: Input
+            }], messageAttachmentLeftArrow: [{
+                type: Input
+            }], messageAttachmentRightArrow: [{
+                type: Input
+            }], messageAvatarAlt: [{
+                type: Input
             }] } });
 
 // eslint-disable no-forward-ref
@@ -1467,19 +1498,27 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             useValue: 'kendo.chat'
         }
     ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container
-        kendoChatLocalizedMessages
-        i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-        messagePlaceholder="Type a message..."
+        <ng-container kendoChatLocalizedMessages
+            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
+            messagePlaceholder="Type a message..."
 
-        i18n-send="kendo.chat.send|The text for the Send button"
-        send="Send..."
+            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-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"
+            i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
+            messageBoxInputLabel="Message"
+
+            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
+            messageAttachmentLeftArrow="Previous item"
+
+            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
+            messageAttachmentRightArrow="Next item"
+
+            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
+            messageAvatarAlt="Avatar"
         >
         </ng-container>
 
@@ -1496,6 +1535,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <kendo-chat-message-list
                 [messages]="messages"
                 [messageTemplate]="messageTemplate"
+                [localization]="localizationText"
                 [attachmentTemplate]="attachmentTemplate"
                 [user]="user"
                 (executeAction)="dispatchAction($event)"
@@ -1514,7 +1554,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         (sendMessage)="sendMessage.emit($event)"
         >
         </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"] }] });
+    `, isInline: true, components: [{ type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "localization", "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.12", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{
@@ -1527,19 +1567,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     selector: 'kendo-chat',
                     template: `
-        <ng-container
-        kendoChatLocalizedMessages
-        i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-        messagePlaceholder="Type a message..."
+        <ng-container kendoChatLocalizedMessages
+            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
+            messagePlaceholder="Type a message..."
+
+            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"
 
-        i18n-send="kendo.chat.send|The text for the Send button"
-        send="Send..."
+            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
+            messageAttachmentLeftArrow="Previous item"
 
-        i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
-        messageListLabel="Message list"
+            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
+            messageAttachmentRightArrow="Next item"
 
-        i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
-        messageBoxInputLabel="Message"
+            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
+            messageAvatarAlt="Avatar"
         >
         </ng-container>
 
@@ -1556,6 +1604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-chat-message-list
                 [messages]="messages"
                 [messageTemplate]="messageTemplate"
+                [localization]="localizationText"
                 [attachmentTemplate]="attachmentTemplate"
                 [user]="user"
                 (executeAction)="dispatchAction($event)"

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

@@ -115,8 +115,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-conversational-ui',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1680177261,
-    version: '11.5.0-develop.4',
+    publishDate: 1680200491,
+    version: '11.5.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -747,6 +747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // eslint-disable no-forward-ref
 /**
  * @hidden
@@ -839,9 +840,15 @@ class MessageAttachmentsComponent extends ChatItem {
             });
         }
     }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
 }
 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: [{
+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", localization: "localization" }, 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: `
@@ -850,6 +857,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             (click)="scrollTo(-1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentLeftArrow')"
             [svgIcon]="chevronLeftIcon"
             icon="chevron-left"
         >
@@ -875,6 +883,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             (click)="scrollTo(1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentRightArrow')"
             [svgIcon]="chevronRightIcon"
             icon="chevron-right"
         >
@@ -894,6 +903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (click)="scrollTo(-1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentLeftArrow')"
             [svgIcon]="chevronLeftIcon"
             icon="chevron-left"
         >
@@ -919,6 +929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             (click)="scrollTo(1)"
             kendoButton
             tabindex="-1"
+            [attr.title]="textFor('messageAttachmentRightArrow')"
             [svgIcon]="chevronRightIcon"
             icon="chevron-right"
         >
@@ -933,6 +944,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], template: [{
                 type: Input
+            }], localization: [{
+                type: Input
             }], carousel: [{
                 type: HostBinding,
                 args: ['class.k-card-deck-scrollwrap']
@@ -1068,9 +1081,15 @@ class MessageListComponent {
             e.preventDefault();
         }
     }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
 }
 MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.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: `
+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", localization: "localization", 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
@@ -1088,6 +1107,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <img
                 *ngIf="group.author.avatarUrl"
                 [attr.src]="group.author.avatarUrl"
+                [alt]="textFor('messageAvatarAlt')"
                 class="k-avatar"
             />
             <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
@@ -1120,6 +1140,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             *ngSwitchCase="'attachment-group'"
             [attachments]="group.attachments"
             [layout]="group.attachmentLayout"
+            [localization]="localization"
             [tabbable]="lastGroup"
             [template]="attachmentTemplate"
             (click)="select(attachments)"
@@ -1140,7 +1161,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         </ng-container>
         <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"] }] });
+    `, 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", "localization"] }, { 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.12", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1163,6 +1184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <img
                 *ngIf="group.author.avatarUrl"
                 [attr.src]="group.author.avatarUrl"
+                [alt]="textFor('messageAvatarAlt')"
                 class="k-avatar"
             />
             <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
@@ -1195,6 +1217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             *ngSwitchCase="'attachment-group'"
             [attachments]="group.attachments"
             [layout]="group.attachmentLayout"
+            [localization]="localization"
             [tabbable]="lastGroup"
             [template]="attachmentTemplate"
             (click)="select(attachments)"
@@ -1223,6 +1246,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], messageTemplate: [{
                 type: Input
+            }], localization: [{
+                type: Input
             }], user: [{
                 type: Input
             }], executeAction: [{
@@ -1245,7 +1270,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", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel" }, 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", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", messageAvatarAlt: "messageAvatarAlt" }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
@@ -1260,6 +1285,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], messageBoxInputLabel: [{
                 type: Input
+            }], messageAttachmentLeftArrow: [{
+                type: Input
+            }], messageAttachmentRightArrow: [{
+                type: Input
+            }], messageAvatarAlt: [{
+                type: Input
             }] } });
 
 // eslint-disable no-forward-ref
@@ -1465,19 +1496,27 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             useValue: 'kendo.chat'
         }
     ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container
-        kendoChatLocalizedMessages
-        i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-        messagePlaceholder="Type a message..."
+        <ng-container kendoChatLocalizedMessages
+            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
+            messagePlaceholder="Type a message..."
 
-        i18n-send="kendo.chat.send|The text for the Send button"
-        send="Send..."
+            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-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"
+            i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
+            messageBoxInputLabel="Message"
+
+            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
+            messageAttachmentLeftArrow="Previous item"
+
+            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
+            messageAttachmentRightArrow="Next item"
+
+            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
+            messageAvatarAlt="Avatar"
         >
         </ng-container>
 
@@ -1494,6 +1533,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <kendo-chat-message-list
                 [messages]="messages"
                 [messageTemplate]="messageTemplate"
+                [localization]="localizationText"
                 [attachmentTemplate]="attachmentTemplate"
                 [user]="user"
                 (executeAction)="dispatchAction($event)"
@@ -1512,7 +1552,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         (sendMessage)="sendMessage.emit($event)"
         >
         </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"] }] });
+    `, isInline: true, components: [{ type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "localization", "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.12", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{
@@ -1525,19 +1565,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     selector: 'kendo-chat',
                     template: `
-        <ng-container
-        kendoChatLocalizedMessages
-        i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-        messagePlaceholder="Type a message..."
+        <ng-container kendoChatLocalizedMessages
+            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
+            messagePlaceholder="Type a message..."
+
+            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"
 
-        i18n-send="kendo.chat.send|The text for the Send button"
-        send="Send..."
+            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
+            messageAttachmentLeftArrow="Previous item"
 
-        i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
-        messageListLabel="Message list"
+            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
+            messageAttachmentRightArrow="Next item"
 
-        i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
-        messageBoxInputLabel="Message"
+            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
+            messageAvatarAlt="Avatar"
         >
         </ng-container>
 
@@ -1554,6 +1602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             <kendo-chat-message-list
                 [messages]="messages"
                 [messageTemplate]="messageTemplate"
+                [localization]="localizationText"
                 [attachmentTemplate]="attachmentTemplate"
                 [user]="user"
                 (executeAction)="dispatchAction($event)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-conversational-ui",
-  "version": "11.5.0-develop.4",
+  "version": "11.5.0-develop.6",
   "description": "Kendo UI for Angular Conversational UI components",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -24,16 +24,16 @@
     "@angular/core": "13 - 15",
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "11.5.0-develop.4",
-    "@progress/kendo-angular-common": "11.5.0-develop.4",
-    "@progress/kendo-angular-intl": "11.5.0-develop.4",
-    "@progress/kendo-angular-l10n": "11.5.0-develop.4",
-    "@progress/kendo-angular-popup": "11.5.0-develop.4",
+    "@progress/kendo-angular-buttons": "11.5.0-develop.6",
+    "@progress/kendo-angular-common": "11.5.0-develop.6",
+    "@progress/kendo-angular-intl": "11.5.0-develop.6",
+    "@progress/kendo-angular-l10n": "11.5.0-develop.6",
+    "@progress/kendo-angular-popup": "11.5.0-develop.6",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "11.5.0-develop.4"
+    "@progress/kendo-angular-schematics": "11.5.0-develop.6"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2015/progress-kendo-angular-conversational-ui.mjs",