@progress/kendo-angular-conversational-ui 4.0.2-dev.202203091004 → 4.1.0

package/dist/es2015/chat/chat.component.js

@@ -8,11 +8,10 @@ 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/post-message-event';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-// 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>';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
+import { MessageBoxComponent } from './message-box.component';
 /**
  * Represents the Kendo UI Chat component for Angular.
  *
@@ -27,6 +26,12 @@ let ChatComponent = 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 %}).
@@ -53,11 +58,17 @@ let ChatComponent = 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';
@@ -76,33 +87,6 @@ let ChatComponent = 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
      */
@@ -111,7 +95,9 @@ let ChatComponent = 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();
+            }
         }
     }
     /**
@@ -129,6 +115,10 @@ tslib_1.__decorate([
     Input(),
     tslib_1.__metadata("design:type", Object)
 ], ChatComponent.prototype, "user", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ChatComponent.prototype, "messageBoxType", void 0);
 tslib_1.__decorate([
     Output(),
     tslib_1.__metadata("design:type", EventEmitter)
@@ -156,9 +146,13 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", MessageTemplateDirective)
 ], ChatComponent.prototype, "messageTemplate", void 0);
 tslib_1.__decorate([
-    ViewChild('messageInput', { static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], ChatComponent.prototype, "messageInput", void 0);
+    ContentChild(ChatMessageBoxTemplateDirective, { static: false }),
+    tslib_1.__metadata("design:type", ChatMessageBoxTemplateDirective)
+], ChatComponent.prototype, "messageBoxTemplate", void 0);
+tslib_1.__decorate([
+    ViewChild('messageBox', { static: false }),
+    tslib_1.__metadata("design:type", MessageBoxComponent)
+], ChatComponent.prototype, "messageBox", void 0);
 tslib_1.__decorate([
     ViewChild('messageList', { static: true }),
     tslib_1.__metadata("design:type", ElementRef)
@@ -174,57 +168,47 @@ ChatComponent = tslib_1.__decorate([
         ],
         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>
+    `
     }),
-    tslib_1.__metadata("design:paramtypes", [LocalizationService,
-        NgZone])
+    tslib_1.__metadata("design:paramtypes", [LocalizationService, NgZone])
 ], ChatComponent);
 export { ChatComponent };

package/dist/es2015/chat/chat.directives.d.ts

@@ -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/dist/es2015/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/dist/es2015/chat/chat.module.js

@@ -18,12 +18,15 @@ 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';
 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.

package/dist/es2015/chat/message-attachments.component.js

@@ -131,37 +131,37 @@ MessageAttachmentsComponent = MessageAttachmentsComponent_1 = tslib_1.__decorate
             }],
         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>
+    `
     }),
     tslib_1.__metadata("design:paramtypes", [NgZone])
 ], MessageAttachmentsComponent);

package/dist/es2015/chat/message-box.component.d.ts

@@ -0,0 +1,39 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, EventEmitter } from '@angular/core';
+import { User } from '../api/user.interface';
+import { MessageBoxType } from '../common/models/message-box-options';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
+/**
+ * @hidden
+ */
+export declare class MessageBoxComponent {
+    hostClasses: string;
+    readonly messageBoxValue: boolean;
+    messageBoxInput: ElementRef;
+    user: User;
+    autoScroll: boolean;
+    type: MessageBoxType;
+    localization: LocalizationService;
+    messageBoxTemplate: ChatMessageBoxTemplateDirective;
+    sendMessage: EventEmitter<any>;
+    /**
+     * @hidden
+     */
+    sendClick(): void;
+    /**
+     * @hidden
+     */
+    inputKeydown(e: any): void;
+    /**
+     * @hidden
+     */
+    textAreaKeydown(e: any): void;
+    /**
+     * @hidden
+     */
+    textFor(key: string): string;
+}

package/dist/es2015/chat/message-box.component.js

@@ -0,0 +1,157 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
+import { SendMessageEvent } from '../api/post-message-event';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Keys } from '@progress/kendo-angular-common';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
+// 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
+ */
+let MessageBoxComponent = class MessageBoxComponent {
+    /**
+     * @hidden
+     */
+    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);
+    }
+};
+tslib_1.__decorate([
+    HostBinding('class'),
+    tslib_1.__metadata("design:type", String)
+], MessageBoxComponent.prototype, "hostClasses", void 0);
+tslib_1.__decorate([
+    HostBinding('class.\!k-align-items-end'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], MessageBoxComponent.prototype, "messageBoxValue", null);
+tslib_1.__decorate([
+    ViewChild('messageBoxInput', { static: false }),
+    tslib_1.__metadata("design:type", ElementRef)
+], MessageBoxComponent.prototype, "messageBoxInput", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object)
+], MessageBoxComponent.prototype, "user", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Boolean)
+], MessageBoxComponent.prototype, "autoScroll", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], MessageBoxComponent.prototype, "type", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", LocalizationService)
+], MessageBoxComponent.prototype, "localization", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", ChatMessageBoxTemplateDirective)
+], MessageBoxComponent.prototype, "messageBoxTemplate", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], MessageBoxComponent.prototype, "sendMessage", void 0);
+MessageBoxComponent = tslib_1.__decorate([
+    Component({
+        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>
+`
+    })
+], MessageBoxComponent);
+export { MessageBoxComponent };

package/dist/es2015/chat/message-box.directive.d.ts

@@ -0,0 +1,14 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } 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 declare class ChatMessageBoxTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+}

package/dist/es2015/chat/message-box.directive.js

@@ -0,0 +1,23 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, TemplateRef } 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).
+ */
+let ChatMessageBoxTemplateDirective = class ChatMessageBoxTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+ChatMessageBoxTemplateDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoChatMessageBoxTemplate]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [TemplateRef])
+], ChatMessageBoxTemplateDirective);
+export { ChatMessageBoxTemplateDirective };