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

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

@@ -0,0 +1,141 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
+import { SendMessageEvent } from '../api/post-message-event';
+import { Keys } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "../common/focused-state.directive";
+import * as i3 from "@progress/kendo-angular-buttons";
+// tslint:disable-next-line:max-line-length
+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>';
+/**
+ * @hidden
+ */
+export class MessageBoxComponent {
+    constructor() {
+        this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
+        this.sendMessage = new EventEmitter();
+    }
+    get messageBoxValue() {
+        return this.type === 'textarea';
+    }
+    /**
+     * @hidden
+     */
+    sendClick() {
+        const input = this.messageBoxInput.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 === Keys.Enter) {
+            this.sendClick();
+        }
+    }
+    /**
+     * @hidden
+     */
+    textAreaKeydown(e) {
+        const isEnter = e.keyCode === Keys.Enter;
+        if (!isEnter) {
+            return;
+        }
+        const newLine = (e.metaKey || e.ctrlKey);
+        const enterOnly = !(e.shiftKey || e.metaKey || e.ctrlKey);
+        if (enterOnly) {
+            e.preventDefault();
+            this.sendClick();
+        }
+        if (newLine) {
+            this.messageBoxInput.nativeElement.value += `\r\n`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
+}
+MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessageBoxComponent, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "class": "this.hostClasses", "class.!k-align-items-end": "this.messageBoxValue" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: "\n    <ng-container *ngIf=\"!messageBoxTemplate\">\n        <input\n            *ngIf=\"type === 'textbox'\"\n            #messageBoxInput\n            kendoChatFocusedState\n            type=\"text\"\n            class=\"k-textbox k-input k-input-md k-input-solid\"\n            [placeholder]=\"textFor('messagePlaceholder')\"\n            (keydown)=\"inputKeydown($event)\"\n        />\n\n        <textarea\n        *ngIf=\"type === 'textarea'\"\n        #messageBoxInput\n        kendoChatFocusedState\n        [rows]=\"3\"\n        class=\"k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none\"\n        [placeholder]=\"textFor('messagePlaceholder')\"\n        (keydown)=\"textAreaKeydown($event)\"\n        ></textarea>\n\n        <button\n            kendoButton\n            fillMode=\"flat\"\n            class=\"k-button-send\"\n            [tabindex]=\"0\"\n            [attr.title]=\"textFor('send')\"\n            (click)=\"sendClick()\"\n        >\n            <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 16 16\"><path d=\"M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z\"/></svg>\n        </button>\n    </ng-container>\n\n    <ng-template *ngIf=\"messageBoxTemplate\" [ngTemplateOutlet]=\"messageBoxTemplate?.templateRef\"></ng-template>\n", isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i3.ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageBoxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-message-box',
+                    template: `
+    <ng-container *ngIf="!messageBoxTemplate">
+        <input
+            *ngIf="type === 'textbox'"
+            #messageBoxInput
+            kendoChatFocusedState
+            type="text"
+            class="k-textbox k-input k-input-md k-input-solid"
+            [placeholder]="textFor('messagePlaceholder')"
+            (keydown)="inputKeydown($event)"
+        />
+
+        <textarea
+        *ngIf="type === 'textarea'"
+        #messageBoxInput
+        kendoChatFocusedState
+        [rows]="3"
+        class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
+        [placeholder]="textFor('messagePlaceholder')"
+        (keydown)="textAreaKeydown($event)"
+        ></textarea>
+
+        <button
+            kendoButton
+            fillMode="flat"
+            class="k-button-send"
+            [tabindex]="0"
+            [attr.title]="textFor('send')"
+            (click)="sendClick()"
+        >
+            ${sendIcon}
+        </button>
+    </ng-container>
+
+    <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
+`
+                }]
+        }], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], messageBoxValue: [{
+                type: HostBinding,
+                args: ['class.\!k-align-items-end']
+            }], messageBoxInput: [{
+                type: ViewChild,
+                args: ['messageBoxInput', { static: false }]
+            }], user: [{
+                type: Input
+            }], autoScroll: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], localization: [{
+                type: Input
+            }], messageBoxTemplate: [{
+                type: Input
+            }], sendMessage: [{
+                type: Output
+            }] } });

package/esm2015/chat/message-box.directive.js

@@ -0,0 +1,24 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Creates a message box area that overrides the default message box of the Conversational UI Component.
+ * To define a message-box template, nest an `<ng-template>` tag with the `kendoChatMessageBoxTemplate` directive inside the `<kendo-chat>` tag
+ * [see example]({% slug message_box %}#toc-message-box-template).
+ */
+export class ChatMessageBoxTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ChatMessageBoxTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatMessageBoxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ChatMessageBoxTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ChatMessageBoxTemplateDirective, selector: "[kendoChatMessageBoxTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChatMessageBoxTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatMessageBoxTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });

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

@@ -104,151 +104,151 @@ export class MessageListComponent {
 }
 MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
 MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", user: "user" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { listeners: { "keydown": "onKeydown($event)", "focusout": "onBlur($event)" }, properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
-    <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
-      <ng-container [ngSwitch]="group.type">
-        <div
-          *ngSwitchCase="'date-marker'"
-          class="k-timestamp"
-        >
-          {{ formatTimeStamp(group.timestamp) }}
-        </div>
-        <div
-          *ngSwitchCase="'message-group'"
-          class="k-message-group"
-          [class.k-alt]="isOwnMessage(group.messages[0])"
-          [class.k-no-avatar]="!group.author.avatarUrl"
-        >
-          <img
-            *ngIf="group.author.avatarUrl"
-            [attr.src]="group.author.avatarUrl"
-            class="k-avatar"
-          />
-          <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
-          <ng-container
-              *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
-          >
-            <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">
-            <kendo-chat-message #message
-              [message]="msg"
-              [tabbable]="lastGroup && lastMessage"
-              [template]="messageTemplate"
-              (click)="select(message)"
-              (focus)="select(message)"
-              [class.k-only]="group.messages.length === 1"
-              [class.k-first]="group.messages.length > 1 && firstMessage"
-              [class.k-last]="group.messages.length > 1 && lastMessage"
+        <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
+        <ng-container [ngSwitch]="group.type">
+            <div
+            *ngSwitchCase="'date-marker'"
+            class="k-timestamp"
             >
-            </kendo-chat-message>
+            {{ formatTimeStamp(group.timestamp) }}
+            </div>
+            <div
+            *ngSwitchCase="'message-group'"
+            class="k-message-group"
+            [class.k-alt]="isOwnMessage(group.messages[0])"
+            [class.k-no-avatar]="!group.author.avatarUrl"
+            >
+            <img
+                *ngIf="group.author.avatarUrl"
+                [attr.src]="group.author.avatarUrl"
+                class="k-avatar"
+            />
+            <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
+            <ng-container
+                *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
+            >
+                <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">
+                <kendo-chat-message #message
+                [message]="msg"
+                [tabbable]="lastGroup && lastMessage"
+                [template]="messageTemplate"
+                (click)="select(message)"
+                (focus)="select(message)"
+                [class.k-only]="group.messages.length === 1"
+                [class.k-first]="group.messages.length > 1 && firstMessage"
+                [class.k-last]="group.messages.length > 1 && lastMessage"
+                >
+                </kendo-chat-message>
 
-            <kendo-chat-attachment
-              *ngIf="msg.attachments && msg.attachments.length === 1"
-              [attachment]="msg.attachments[0]"
-              [template]="attachmentTemplate"
-              >
-            </kendo-chat-attachment>
-          </ng-container>
-        </div>
+                <kendo-chat-attachment
+                *ngIf="msg.attachments && msg.attachments.length === 1"
+                [attachment]="msg.attachments[0]"
+                [template]="attachmentTemplate"
+                >
+                </kendo-chat-attachment>
+            </ng-container>
+            </div>
 
-        <kendo-chat-message-attachments #attachments
-          *ngSwitchCase="'attachment-group'"
-          [attachments]="group.attachments"
-          [layout]="group.attachmentLayout"
-          [tabbable]="lastGroup"
-          [template]="attachmentTemplate"
-          (click)="select(attachments)"
-          (focus)="select(attachments)"
-        >
-        </kendo-chat-message-attachments>
+            <kendo-chat-message-attachments #attachments
+            *ngSwitchCase="'attachment-group'"
+            [attachments]="group.attachments"
+            [layout]="group.attachmentLayout"
+            [tabbable]="lastGroup"
+            [template]="attachmentTemplate"
+            (click)="select(attachments)"
+            (focus)="select(attachments)"
+            >
+            </kendo-chat-message-attachments>
 
-        <kendo-chat-suggested-actions #actions
-          *ngSwitchCase="'action-group'"
-          [actions]="group.actions"
-          [tabbable]="lastGroup"
-          (dispatch)="dispatchAction($event, last(group.messages))"
-          (click)="select(actions)"
-          (focus)="select(actions)"
-        >
-        </kendo-chat-suggested-actions>
-      </ng-container>
-    </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"] }] });
+            <kendo-chat-suggested-actions #actions
+            *ngSwitchCase="'action-group'"
+            [actions]="group.actions"
+            [tabbable]="lastGroup"
+            (dispatch)="dispatchAction($event, last(group.messages))"
+            (click)="select(actions)"
+            (focus)="select(actions)"
+            >
+            </kendo-chat-suggested-actions>
+        </ng-container>
+        </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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-message-list',
                     template: `
-    <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
-      <ng-container [ngSwitch]="group.type">
-        <div
-          *ngSwitchCase="'date-marker'"
-          class="k-timestamp"
-        >
-          {{ formatTimeStamp(group.timestamp) }}
-        </div>
-        <div
-          *ngSwitchCase="'message-group'"
-          class="k-message-group"
-          [class.k-alt]="isOwnMessage(group.messages[0])"
-          [class.k-no-avatar]="!group.author.avatarUrl"
-        >
-          <img
-            *ngIf="group.author.avatarUrl"
-            [attr.src]="group.author.avatarUrl"
-            class="k-avatar"
-          />
-          <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
-          <ng-container
-              *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
-          >
-            <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">
-            <kendo-chat-message #message
-              [message]="msg"
-              [tabbable]="lastGroup && lastMessage"
-              [template]="messageTemplate"
-              (click)="select(message)"
-              (focus)="select(message)"
-              [class.k-only]="group.messages.length === 1"
-              [class.k-first]="group.messages.length > 1 && firstMessage"
-              [class.k-last]="group.messages.length > 1 && lastMessage"
+        <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
+        <ng-container [ngSwitch]="group.type">
+            <div
+            *ngSwitchCase="'date-marker'"
+            class="k-timestamp"
             >
-            </kendo-chat-message>
+            {{ formatTimeStamp(group.timestamp) }}
+            </div>
+            <div
+            *ngSwitchCase="'message-group'"
+            class="k-message-group"
+            [class.k-alt]="isOwnMessage(group.messages[0])"
+            [class.k-no-avatar]="!group.author.avatarUrl"
+            >
+            <img
+                *ngIf="group.author.avatarUrl"
+                [attr.src]="group.author.avatarUrl"
+                class="k-avatar"
+            />
+            <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
+            <ng-container
+                *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
+            >
+                <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">
+                <kendo-chat-message #message
+                [message]="msg"
+                [tabbable]="lastGroup && lastMessage"
+                [template]="messageTemplate"
+                (click)="select(message)"
+                (focus)="select(message)"
+                [class.k-only]="group.messages.length === 1"
+                [class.k-first]="group.messages.length > 1 && firstMessage"
+                [class.k-last]="group.messages.length > 1 && lastMessage"
+                >
+                </kendo-chat-message>
 
-            <kendo-chat-attachment
-              *ngIf="msg.attachments && msg.attachments.length === 1"
-              [attachment]="msg.attachments[0]"
-              [template]="attachmentTemplate"
-              >
-            </kendo-chat-attachment>
-          </ng-container>
-        </div>
+                <kendo-chat-attachment
+                *ngIf="msg.attachments && msg.attachments.length === 1"
+                [attachment]="msg.attachments[0]"
+                [template]="attachmentTemplate"
+                >
+                </kendo-chat-attachment>
+            </ng-container>
+            </div>
 
-        <kendo-chat-message-attachments #attachments
-          *ngSwitchCase="'attachment-group'"
-          [attachments]="group.attachments"
-          [layout]="group.attachmentLayout"
-          [tabbable]="lastGroup"
-          [template]="attachmentTemplate"
-          (click)="select(attachments)"
-          (focus)="select(attachments)"
-        >
-        </kendo-chat-message-attachments>
+            <kendo-chat-message-attachments #attachments
+            *ngSwitchCase="'attachment-group'"
+            [attachments]="group.attachments"
+            [layout]="group.attachmentLayout"
+            [tabbable]="lastGroup"
+            [template]="attachmentTemplate"
+            (click)="select(attachments)"
+            (focus)="select(attachments)"
+            >
+            </kendo-chat-message-attachments>
 
-        <kendo-chat-suggested-actions #actions
-          *ngSwitchCase="'action-group'"
-          [actions]="group.actions"
-          [tabbable]="lastGroup"
-          (dispatch)="dispatchAction($event, last(group.messages))"
-          (click)="select(actions)"
-          (focus)="select(actions)"
-        >
-        </kendo-chat-suggested-actions>
-      </ng-container>
-    </ng-container>
-    <kendo-resize-sensor (resize)="onResize()">
-    </kendo-resize-sensor>
-  `
+            <kendo-chat-suggested-actions #actions
+            *ngSwitchCase="'action-group'"
+            [actions]="group.actions"
+            [tabbable]="lastGroup"
+            (dispatch)="dispatchAction($event, last(group.messages))"
+            (click)="select(actions)"
+            (focus)="select(actions)"
+            >
+            </kendo-chat-suggested-actions>
+        </ng-container>
+        </ng-container>
+        <kendo-resize-sensor (resize)="onResize()">
+        </kendo-resize-sensor>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }]; }, propDecorators: { messages: [{
                 type: Input

package/esm2015/chat/message.component.js

@@ -33,44 +33,44 @@ MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             provide: ChatItem,
             useExisting: forwardRef(() => MessageComponent)
         }], usesInheritance: true, ngImport: i0, template: `
-    <time
-      [attr.aria-hidden]="!selected"
-      class="k-message-time"
-      *ngIf="message.timestamp"
-    >
-      {{ formatTimeStamp(message.timestamp) }}
-    </time>
-
-    <ng-container *ngIf="!message.typing; else typing">
-      <div class="k-bubble" *ngIf="template">
-        <ng-container
-          *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
+        <time
+        [attr.aria-hidden]="!selected"
+        class="k-message-time"
+        *ngIf="message.timestamp"
         >
-        </ng-container>
-      </div>
+        {{ formatTimeStamp(message.timestamp) }}
+        </time>
 
-      <div class="k-bubble" *ngIf="!template && message.text">
-        {{message.text}}
-      </div>
-    </ng-container>
+        <ng-container *ngIf="!message.typing; else typing">
+        <div class="k-bubble" *ngIf="template">
+            <ng-container
+            *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
+            >
+            </ng-container>
+        </div>
 
-    <span
-      class="k-message-status"
-      *ngIf="message.status"
-    >
-      {{ message.status }}
-    </span>
+        <div class="k-bubble" *ngIf="!template && message.text">
+            {{message.text}}
+        </div>
+        </ng-container>
+
+        <span
+        class="k-message-status"
+        *ngIf="message.status"
+        >
+        {{ message.status }}
+        </span>
 
-    <ng-template #typing>
-      <div class="k-bubble">
-        <div class="k-typing-indicator">
-          <span></span>
-          <span></span>
-          <span></span>
+        <ng-template #typing>
+        <div class="k-bubble">
+            <div class="k-typing-indicator">
+            <span></span>
+            <span></span>
+            <span></span>
+            </div>
         </div>
-      </div>
-    </ng-template>
-  `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+        </ng-template>
+    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
@@ -80,44 +80,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             useExisting: forwardRef(() => MessageComponent)
                         }],
                     template: `
-    <time
-      [attr.aria-hidden]="!selected"
-      class="k-message-time"
-      *ngIf="message.timestamp"
-    >
-      {{ formatTimeStamp(message.timestamp) }}
-    </time>
-
-    <ng-container *ngIf="!message.typing; else typing">
-      <div class="k-bubble" *ngIf="template">
-        <ng-container
-          *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
+        <time
+        [attr.aria-hidden]="!selected"
+        class="k-message-time"
+        *ngIf="message.timestamp"
         >
-        </ng-container>
-      </div>
+        {{ formatTimeStamp(message.timestamp) }}
+        </time>
 
-      <div class="k-bubble" *ngIf="!template && message.text">
-        {{message.text}}
-      </div>
-    </ng-container>
+        <ng-container *ngIf="!message.typing; else typing">
+        <div class="k-bubble" *ngIf="template">
+            <ng-container
+            *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
+            >
+            </ng-container>
+        </div>
 
-    <span
-      class="k-message-status"
-      *ngIf="message.status"
-    >
-      {{ message.status }}
-    </span>
+        <div class="k-bubble" *ngIf="!template && message.text">
+            {{message.text}}
+        </div>
+        </ng-container>
+
+        <span
+        class="k-message-status"
+        *ngIf="message.status"
+        >
+        {{ message.status }}
+        </span>
 
-    <ng-template #typing>
-      <div class="k-bubble">
-        <div class="k-typing-indicator">
-          <span></span>
-          <span></span>
-          <span></span>
+        <ng-template #typing>
+        <div class="k-bubble">
+            <div class="k-typing-indicator">
+            <span></span>
+            <span></span>
+            <span></span>
+            </div>
         </div>
-      </div>
-    </ng-template>
-  `
+        </ng-template>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }]; }, propDecorators: { message: [{
                 type: Input