@progress/kendo-angular-conversational-ui 5.0.0-next.202204010856 → 5.0.0

package/esm2015/chat/attachment.component.js

@@ -30,51 +30,51 @@ export class AttachmentComponent {
 }
 AttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
-    <ng-container *ngIf="template">
-      <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
-      </ng-container>
-    </ng-container>
-
-    <div *ngIf="!template" class="k-card">
-      <div class="k-card-body">
-        <h5 class="k-card-title" *ngIf="attachment.title">
-          {{ attachment.title }}
-        </h5>
-        <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
-          {{ attachment.subtitle }}
-        </h6>
-        <img *ngIf="image" [attr.src]="attachment.content" />
-        <ng-container *ngIf="unknown">
-          {{ attachment.content }}
+        <ng-container *ngIf="template">
+            <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
+            </ng-container>
         </ng-container>
-      </div>
-    </div>
-  `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+
+        <div *ngIf="!template" class="k-card">
+            <div class="k-card-body">
+            <h5 class="k-card-title" *ngIf="attachment.title">
+                {{ attachment.title }}
+            </h5>
+            <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
+                {{ attachment.subtitle }}
+            </h6>
+            <img *ngIf="image" [attr.src]="attachment.content" />
+            <ng-container *ngIf="unknown">
+                {{ attachment.content }}
+            </ng-container>
+            </div>
+        </div>
+    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-attachment',
                     template: `
-    <ng-container *ngIf="template">
-      <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
-      </ng-container>
-    </ng-container>
-
-    <div *ngIf="!template" class="k-card">
-      <div class="k-card-body">
-        <h5 class="k-card-title" *ngIf="attachment.title">
-          {{ attachment.title }}
-        </h5>
-        <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
-          {{ attachment.subtitle }}
-        </h6>
-        <img *ngIf="image" [attr.src]="attachment.content" />
-        <ng-container *ngIf="unknown">
-          {{ attachment.content }}
+        <ng-container *ngIf="template">
+            <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
+            </ng-container>
         </ng-container>
-      </div>
-    </div>
-  `
+
+        <div *ngIf="!template" class="k-card">
+            <div class="k-card-body">
+            <h5 class="k-card-title" *ngIf="attachment.title">
+                {{ attachment.title }}
+            </h5>
+            <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
+                {{ attachment.subtitle }}
+            </h6>
+            <img *ngIf="image" [attr.src]="attachment.content" />
+            <ng-container *ngIf="unknown">
+                {{ attachment.content }}
+            </ng-container>
+            </div>
+        </div>
+    `
                 }]
         }], propDecorators: { attachment: [{
                 type: Input

package/esm2015/chat/chat.component.js

@@ -7,18 +7,15 @@ import { AttachmentTemplateDirective } from './attachment-template.directive';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { makeHandler } from './builtin-actions';
 import { MessageTemplateDirective } from './message-template.directive';
-import { SendMessageEvent } from '../api';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./message-list.component";
-import * as i3 from "./l10n/localized-messages.directive";
-import * as i4 from "../common/scroll-anchor.directive";
-import * as i5 from "../common/focused-state.directive";
-import * as i6 from "@progress/kendo-angular-buttons";
-// eslint-disable-next-line max-len
-const sendIcon = '<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>';
+import * as i3 from "./message-box.component";
+import * as i4 from "./l10n/localized-messages.directive";
+import * as i5 from "../common/scroll-anchor.directive";
 /**
  * Represents the Kendo UI Chat component for Angular.
  *
@@ -33,6 +30,12 @@ export class ChatComponent {
     constructor(localization, zone) {
         this.localization = localization;
         this.zone = zone;
+        /**
+         * Used to switch between a one-liner input or a textarea.
+         * ([see example]({% slug message_box %})#toc-message-box-types).
+         * @default input
+         */
+        this.messageBoxType = 'textbox';
         /**
          * Fires when the user types a message and clicks the **Send** button or presses **Enter**.
          * Emits the [`SendMessageEvent`]({% slug api_conversational-ui_sendmessageevent %}).
@@ -59,11 +62,17 @@ export class ChatComponent {
         });
     }
     get className() {
-        return 'k-widget k-chat';
+        return 'k-chat';
     }
     get dirAttr() {
         return this.direction;
     }
+    /**
+     * @hidden
+     */
+    get localizationText() {
+        return this.localization;
+    }
     ngOnChanges() {
         this.zone.runOutsideAngular(() => setTimeout(() => {
             this.messageList.nativeElement.style.flex = '1 1 auto';
@@ -82,33 +91,6 @@ export class ChatComponent {
             this.localizationChangeSubscription.unsubscribe();
         }
     }
-    /**
-     * @hidden
-     */
-    sendClick() {
-        const input = this.messageInput.nativeElement;
-        const value = input.value;
-        if (!value) {
-            return;
-        }
-        const message = {
-            author: this.user,
-            text: value,
-            timestamp: new Date()
-        };
-        this.sendMessage.emit(new SendMessageEvent(message));
-        input.value = null;
-        input.focus();
-        this.autoScroll = true;
-    }
-    /**
-     * @hidden
-     */
-    inputKeydown(e) {
-        if (e.keyCode === 13 /* enter */) {
-            this.sendClick();
-        }
-    }
     /**
      * @hidden
      */
@@ -117,7 +99,9 @@ export class ChatComponent {
         if (!e.isDefaultPrevented()) {
             const handler = makeHandler(e.action);
             handler(e.action, this);
-            this.messageInput.nativeElement.focus();
+            if (!this.messageBoxTemplate) {
+                this.messageBox.messageBoxInput.nativeElement.focus();
+            }
         }
     }
     /**
@@ -128,13 +112,53 @@ export class ChatComponent {
     }
 }
 ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChatComponent, selector: "kendo-chat", inputs: { messages: "messages", user: "user" }, outputs: { sendMessage: "sendMessage", executeAction: "executeAction" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
+ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChatComponent, selector: "kendo-chat", inputs: { messages: "messages", user: "user", messageBoxType: "messageBoxType" }, outputs: { sendMessage: "sendMessage", executeAction: "executeAction" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.chat'
         }
-    ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true, static: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "\n    <ng-container\n      kendoChatLocalizedMessages\n      i18n-messagePlaceholder=\"kendo.chat.messagePlaceholder|The placholder text of the message text input\"\n      messagePlaceholder=\"Type a message...\"\n\n      i18n-send=\"kendo.chat.send|The text for the Send button\"\n      send=\"Send...\"\n    >\n    </ng-container>\n\n    <div\n      #messageList\n      class=\"k-message-list k-avatars\"\n      aria-live=\"polite\" role=\"log\"\n      kendoChatScrollAnchor\n        #anchor=\"scrollAnchor\"\n        [(autoScroll)]=\"autoScroll\"\n    >\n      <kendo-chat-message-list\n        [messages]=\"messages\"\n        [messageTemplate]=\"messageTemplate\"\n        [attachmentTemplate]=\"attachmentTemplate\"\n        [user]=\"user\"\n        (executeAction)=\"dispatchAction($event)\"\n        (resize)=\"anchor.scrollToBottom()\"\n        (navigate)=\"this.autoScroll = false\"\n      >\n      </kendo-chat-message-list>\n    </div>\n\n    <div class=\"k-message-box\">\n      <input\n        #messageInput\n        kendoChatFocusedState\n        type=\"text\"\n        class=\"k-input\"\n        [placeholder]=\"textFor('messagePlaceholder')\"\n        (keydown)=\"inputKeydown($event)\"\n      >\n      <button\n        kendoButton\n        fillMode=\"flat\"\n        class=\"k-button-send\"\n        tabindex=\"-1\"\n        [attr.title]=\"textFor('send')\"\n        (click)=\"sendClick()\"\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></button>\n    </div>\n  ", isInline: true, components: [{ type: i2.MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "user"], outputs: ["executeAction", "navigate", "resize"] }], directives: [{ type: i3.LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { type: i4.ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { type: i5.FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i6.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "shape", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+    ], 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..."
+
+        i18n-send="kendo.chat.send|The text for the Send button"
+        send="Send..."
+        >
+        </ng-container>
+
+        <div
+        #messageList
+        class="k-message-list k-avatars"
+        aria-live="polite" role="log"
+        kendoChatScrollAnchor
+            #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>
+        </div>
+        <kendo-message-box
+        #messageBox
+        [messageBoxTemplate]="messageBoxTemplate"
+        [type]="messageBoxType"
+        [user]="user"
+        [autoScroll]="autoScroll"
+        [localization]="localizationText"
+        (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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{
@@ -147,60 +171,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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..."
-    >
-    </ng-container>
+        i18n-send="kendo.chat.send|The text for the Send button"
+        send="Send..."
+        >
+        </ng-container>
 
-    <div
-      #messageList
-      class="k-message-list k-avatars"
-      aria-live="polite" role="log"
-      kendoChatScrollAnchor
-        #anchor="scrollAnchor"
-        [(autoScroll)]="autoScroll"
-    >
-      <kendo-chat-message-list
-        [messages]="messages"
-        [messageTemplate]="messageTemplate"
-        [attachmentTemplate]="attachmentTemplate"
+        <div
+        #messageList
+        class="k-message-list k-avatars"
+        aria-live="polite" role="log"
+        kendoChatScrollAnchor
+            #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>
+        </div>
+        <kendo-message-box
+        #messageBox
+        [messageBoxTemplate]="messageBoxTemplate"
+        [type]="messageBoxType"
         [user]="user"
-        (executeAction)="dispatchAction($event)"
-        (resize)="anchor.scrollToBottom()"
-        (navigate)="this.autoScroll = false"
-      >
-      </kendo-chat-message-list>
-    </div>
-
-    <div class="k-message-box">
-      <input
-        #messageInput
-        kendoChatFocusedState
-        type="text"
-        class="k-input"
-        [placeholder]="textFor('messagePlaceholder')"
-        (keydown)="inputKeydown($event)"
-      >
-      <button
-        kendoButton
-        fillMode="flat"
-        class="k-button-send"
-        tabindex="-1"
-        [attr.title]="textFor('send')"
-        (click)="sendClick()"
-      >${sendIcon}</button>
-    </div>
-  `
+        [autoScroll]="autoScroll"
+        [localization]="localizationText"
+        (sendMessage)="sendMessage.emit($event)"
+        >
+        </kendo-message-box>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { messages: [{
                 type: Input
             }], user: [{
                 type: Input
+            }], messageBoxType: [{
+                type: Input
             }], sendMessage: [{
                 type: Output
             }], executeAction: [{
@@ -217,9 +234,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], messageTemplate: [{
                 type: ContentChild,
                 args: [MessageTemplateDirective, { static: false }]
-            }], messageInput: [{
+            }], messageBoxTemplate: [{
+                type: ContentChild,
+                args: [ChatMessageBoxTemplateDirective, { static: false }]
+            }], messageBox: [{
                 type: ViewChild,
-                args: ['messageInput', { static: true }]
+                args: ['messageBox', { static: false }]
             }], messageList: [{
                 type: ViewChild,
                 args: ['messageList', { static: true }]

package/esm2015/chat/chat.directives.js

@@ -5,3 +5,4 @@
 export { ChatComponent } from './chat.component';
 export { AttachmentTemplateDirective } from './attachment-template.directive';
 export { MessageTemplateDirective } from './message-template.directive';
+export { ChatMessageBoxTemplateDirective } from './message-box.directive';

package/esm2015/chat/chat.module.js

@@ -17,13 +17,16 @@ import { MessageListComponent } from './message-list.component';
 import { NgModule } from '@angular/core';
 import { ScrollAnchorDirective } from '../common/scroll-anchor.directive';
 import { SuggestedActionsComponent } from './suggested-actions.component';
+import { MessageBoxComponent } from './message-box.component';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
 import * as i0 from "@angular/core";
 const PUBLIC_DIRECTIVES = [
     ChatComponent,
     CustomMessagesComponent,
     AttachmentTemplateDirective,
     MessageTemplateDirective,
-    HeroCardComponent
+    HeroCardComponent,
+    ChatMessageBoxTemplateDirective
 ];
 const PRIVATE_DIRECTIVES = [
     AttachmentComponent,
@@ -34,7 +37,8 @@ const PRIVATE_DIRECTIVES = [
     MessageListComponent,
     MessageTemplateDirective,
     ScrollAnchorDirective,
-    SuggestedActionsComponent
+    SuggestedActionsComponent,
+    MessageBoxComponent
 ];
 /**
  * The [NgModule]({{ site.data.urls.angular['ngmodules'] }}) for the Chat component.
@@ -64,7 +68,8 @@ ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12
         CustomMessagesComponent,
         AttachmentTemplateDirective,
         MessageTemplateDirective,
-        HeroCardComponent, AttachmentComponent,
+        HeroCardComponent,
+        ChatMessageBoxTemplateDirective, AttachmentComponent,
         FocusedStateDirective,
         LocalizedMessagesDirective,
         MessageAttachmentsComponent,
@@ -72,13 +77,15 @@ ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12
         MessageListComponent,
         MessageTemplateDirective,
         ScrollAnchorDirective,
-        SuggestedActionsComponent], imports: [ButtonModule,
+        SuggestedActionsComponent,
+        MessageBoxComponent], imports: [ButtonModule,
         CommonModule,
         ResizeSensorModule], exports: [ChatComponent,
         CustomMessagesComponent,
         AttachmentTemplateDirective,
         MessageTemplateDirective,
-        HeroCardComponent] });
+        HeroCardComponent,
+        ChatMessageBoxTemplateDirective] });
 ChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatModule, imports: [[
             ButtonModule,
             CommonModule,

package/esm2015/chat/l10n/messages.js

@@ -15,6 +15,7 @@ Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'kendoConversationalUIMessages'
                 }]
         }], propDecorators: { messagePlaceholder: [{

package/esm2015/chat/message-attachments.component.js

@@ -99,37 +99,37 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             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: `
-    <button
-      *ngIf="carousel && scrollPosition > 0"
-      (click)="scrollTo(-1)"
-      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
-      tabindex="-1">
-        <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>
-    </button>
-    <div #deck [class.k-card-deck]="carousel">
-      <kendo-chat-attachment #item
-        *ngFor="let att of attachments; index as index; first as first; last as last"
-        [attachment]="att"
-        [template]="template"
-        [class.k-state-selected]="isSelected(index)"
-        [class.k-state-focused]="isSelected(index)"
-        [class.k-card-wrap]="true"
-        [class.k-first]="first"
-        [class.k-last]="last"
-        [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
-        (click)="itemClick(index)"
-        (keydown)="itemKeydown($event, att)"
-      >
-      </kendo-chat-attachment>
-    </div>
-    <button
-      *ngIf="carousel && scrollPosition < 1"
-      (click)="scrollTo(1)"
-      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
-      tabindex="-1">
-        <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>
-    </button>
-  `, isInline: true, components: [{ type: i1.AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+        <button
+        *ngIf="carousel && scrollPosition > 0"
+        (click)="scrollTo(-1)"
+        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+        tabindex="-1">
+            <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>
+        </button>
+        <div #deck [class.k-card-deck]="carousel">
+        <kendo-chat-attachment #item
+            *ngFor="let att of attachments; index as index; first as first; last as last"
+            [attachment]="att"
+            [template]="template"
+            [class.k-state-selected]="isSelected(index)"
+            [class.k-state-focused]="isSelected(index)"
+            [class.k-card-wrap]="true"
+            [class.k-first]="first"
+            [class.k-last]="last"
+            [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
+            (click)="itemClick(index)"
+            (keydown)="itemKeydown($event, att)"
+        >
+        </kendo-chat-attachment>
+        </div>
+        <button
+        *ngIf="carousel && scrollPosition < 1"
+        (click)="scrollTo(1)"
+        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+        tabindex="-1">
+            <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>
+        </button>
+    `, isInline: true, components: [{ type: i1.AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
             type: Component,
             args: [{
@@ -139,37 +139,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         }],
                     selector: 'kendo-chat-message-attachments',
                     template: `
-    <button
-      *ngIf="carousel && scrollPosition > 0"
-      (click)="scrollTo(-1)"
-      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
-      tabindex="-1">
-        <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>
-    </button>
-    <div #deck [class.k-card-deck]="carousel">
-      <kendo-chat-attachment #item
-        *ngFor="let att of attachments; index as index; first as first; last as last"
-        [attachment]="att"
-        [template]="template"
-        [class.k-state-selected]="isSelected(index)"
-        [class.k-state-focused]="isSelected(index)"
-        [class.k-card-wrap]="true"
-        [class.k-first]="first"
-        [class.k-last]="last"
-        [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
-        (click)="itemClick(index)"
-        (keydown)="itemKeydown($event, att)"
-      >
-      </kendo-chat-attachment>
-    </div>
-    <button
-      *ngIf="carousel && scrollPosition < 1"
-      (click)="scrollTo(1)"
-      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
-      tabindex="-1">
-        <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>
-    </button>
-  `
+        <button
+        *ngIf="carousel && scrollPosition > 0"
+        (click)="scrollTo(-1)"
+        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+        tabindex="-1">
+            <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>
+        </button>
+        <div #deck [class.k-card-deck]="carousel">
+        <kendo-chat-attachment #item
+            *ngFor="let att of attachments; index as index; first as first; last as last"
+            [attachment]="att"
+            [template]="template"
+            [class.k-state-selected]="isSelected(index)"
+            [class.k-state-focused]="isSelected(index)"
+            [class.k-card-wrap]="true"
+            [class.k-first]="first"
+            [class.k-last]="last"
+            [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
+            (click)="itemClick(index)"
+            (keydown)="itemKeydown($event, att)"
+        >
+        </kendo-chat-attachment>
+        </div>
+        <button
+        *ngIf="carousel && scrollPosition < 1"
+        (click)="scrollTo(1)"
+        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+        tabindex="-1">
+            <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>
+        </button>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { attachments: [{
                 type: Input