@progress/kendo-angular-conversational-ui 4.1.0 → 5.0.0-dev.202204131603

package/esm2015/chat/l10n/custom-messages.component.js

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, forwardRef } from '@angular/core';
+import { Messages } from './messages';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+// eslint-disable no-forward-ref
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
+ */
+export class CustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CustomMessagesComponent, selector: "kendo-chat-messages", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => CustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-chat-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2015/chat/l10n/localized-messages.directive.js

@@ -0,0 +1,37 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, forwardRef } from '@angular/core';
+import { Messages } from './messages';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+// eslint-disable no-forward-ref
+/**
+ * @hidden
+ */
+export class LocalizedMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoChatLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });

package/esm2015/chat/l10n/messages.js

@@ -0,0 +1,25 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Input } from '@angular/core';
+import { ComponentMessages } from '@progress/kendo-angular-l10n';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "kendoConversationalUIMessages", inputs: { messagePlaceholder: "messagePlaceholder", send: "send" }, usesInheritance: true, ngImport: i0 });
+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: [{
+                type: Input
+            }], send: [{
+                type: Input
+            }] } });

package/{dist/es2015 → esm2015}/chat/message-attachments.component.js

@@ -2,18 +2,18 @@
 * 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";
-var MessageAttachmentsComponent_1;
-import { Component, ElementRef, forwardRef, HostBinding, Input, NgZone, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { Component, ElementRef, forwardRef, HostBinding, Input, ViewChild, ViewChildren } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { ChatItem } from './chat-item';
-import { AttachmentTemplateDirective } from './chat.directives';
-// tslint:disable:no-forward-ref
+import * as i0 from "@angular/core";
+import * as i1 from "./attachment.component";
+import * as i2 from "@angular/common";
+// eslint-disable no-forward-ref
 /**
  * @hidden
  */
-let MessageAttachmentsComponent = MessageAttachmentsComponent_1 = class MessageAttachmentsComponent extends ChatItem {
+export class MessageAttachmentsComponent extends ChatItem {
     constructor(zone) {
         super();
         this.zone = zone;
@@ -93,44 +93,52 @@ let MessageAttachmentsComponent = MessageAttachmentsComponent_1 = class MessageA
             });
         }
     }
-};
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Array)
-], MessageAttachmentsComponent.prototype, "attachments", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", String)
-], MessageAttachmentsComponent.prototype, "layout", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", Boolean)
-], MessageAttachmentsComponent.prototype, "tabbable", void 0);
-tslib_1.__decorate([
-    Input(),
-    tslib_1.__metadata("design:type", AttachmentTemplateDirective)
-], MessageAttachmentsComponent.prototype, "template", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-card-deck-scrollwrap'),
-    tslib_1.__metadata("design:type", Boolean),
-    tslib_1.__metadata("design:paramtypes", [])
-], MessageAttachmentsComponent.prototype, "carousel", null);
-tslib_1.__decorate([
-    ViewChild('deck', { read: ElementRef, static: true }),
-    tslib_1.__metadata("design:type", ElementRef)
-], MessageAttachmentsComponent.prototype, "deck", void 0);
-tslib_1.__decorate([
-    ViewChildren('item', { read: ElementRef }),
-    tslib_1.__metadata("design:type", QueryList)
-], MessageAttachmentsComponent.prototype, "items", void 0);
-MessageAttachmentsComponent = MessageAttachmentsComponent_1 = tslib_1.__decorate([
-    Component({
-        providers: [{
-                provide: ChatItem,
-                useExisting: forwardRef(() => MessageAttachmentsComponent_1)
-            }],
-        selector: 'kendo-chat-message-attachments',
-        template: `
+}
+MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: [{
+            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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [{
+                            provide: ChatItem,
+                            useExisting: forwardRef(() => MessageAttachmentsComponent)
+                        }],
+                    selector: 'kendo-chat-message-attachments',
+                    template: `
         <button
         *ngIf="carousel && scrollPosition > 0"
         (click)="scrollTo(-1)"
@@ -162,7 +170,22 @@ MessageAttachmentsComponent = MessageAttachmentsComponent_1 = tslib_1.__decorate
             <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>
         </button>
     `
-    }),
-    tslib_1.__metadata("design:paramtypes", [NgZone])
-], MessageAttachmentsComponent);
-export { MessageAttachmentsComponent };
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { attachments: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], tabbable: [{
+                type: Input
+            }], template: [{
+                type: Input
+            }], carousel: [{
+                type: HostBinding,
+                args: ['class.k-card-deck-scrollwrap']
+            }], deck: [{
+                type: ViewChild,
+                args: ['deck', { read: ElementRef, static: true }]
+            }], items: [{
+                type: ViewChildren,
+                args: ['item', { read: ElementRef }]
+            }] } });

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 }]; } });