@progress/kendo-angular-conversational-ui
Version:
Kendo UI for Angular Conversational UI components
228 lines (223 loc) • 10.4 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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 { NgIf, NgTemplateOutlet } from '@angular/common';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Keys } from '@progress/kendo-angular-common';
import { paperPlaneIcon } from '@progress/kendo-svg-icons';
import { ButtonComponent } from '@progress/kendo-angular-buttons';
import { SendMessageEvent } from './api/post-message-event';
import { ChatMessageBoxTemplateDirective } from './message-box.directive';
import { InputSeparatorComponent, TextAreaComponent, TextAreaSuffixComponent, TextBoxComponent, TextBoxSuffixTemplateDirective } from '@progress/kendo-angular-inputs';
import * as i0 from "@angular/core";
/**
* @hidden
*/
export class MessageBoxComponent {
borderColor = 'inherit';
messageBoxInput;
user;
autoScroll;
type;
localization;
messageBoxTemplate;
sendMessage = new EventEmitter();
/**
* @hidden
*/
sendIcon = paperPlaneIcon;
/**
* @hidden
*/
sendClick() {
const input = this.messageBoxInput;
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.value += `\r\n`;
}
}
/**
* @hidden
*/
textFor(key) {
return this.localization.get(key);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "style.border-color": "this.borderColor" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
<ng-container *ngIf="!messageBoxTemplate">
<kendo-textbox
*ngIf="type === 'textbox'"
#messageBoxInput
class="k-message-box"
[inputAttributes]="{
'aria-label': textFor('messageBoxInputLabel')
}"
[placeholder]="textFor('messagePlaceholder')"
(keydown)="inputKeydown($event)"
>
<ng-template kendoTextBoxSuffixTemplate>
<kendo-textbox-separator></kendo-textbox-separator>
<button
kendoButton
fillMode="flat"
class="k-chat-send"
icon="paper-plane"
[svgIcon]="sendIcon"
[tabindex]="0"
[attr.title]="textFor('send')"
(click)="sendClick()"
>
</button>
</ng-template>
</kendo-textbox>
<kendo-textarea
*ngIf="type === 'textarea'"
#messageBoxInput
class="k-message-box !k-align-items-end"
resizable="none"
[rows]="3"
[inputAttributes]="{
'aria-label': textFor('messageBoxInputLabel')
}"
[placeholder]="textFor('messagePlaceholder')"
[showSuffixSeparator]="true"
(keydown)="textAreaKeydown($event)"
>
<kendo-textarea-suffix>
<button
kendoButton
fillMode="flat"
class="k-chat-send"
icon="paper-plane"
[svgIcon]="sendIcon"
[tabindex]="0"
[attr.title]="textFor('send')"
(click)="sendClick()"
>
</button>
</kendo-textarea-suffix>
</kendo-textarea>
</ng-container>
<ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageBoxComponent, decorators: [{
type: Component,
args: [{
selector: 'kendo-message-box',
template: `
<ng-container *ngIf="!messageBoxTemplate">
<kendo-textbox
*ngIf="type === 'textbox'"
#messageBoxInput
class="k-message-box"
[inputAttributes]="{
'aria-label': textFor('messageBoxInputLabel')
}"
[placeholder]="textFor('messagePlaceholder')"
(keydown)="inputKeydown($event)"
>
<ng-template kendoTextBoxSuffixTemplate>
<kendo-textbox-separator></kendo-textbox-separator>
<button
kendoButton
fillMode="flat"
class="k-chat-send"
icon="paper-plane"
[svgIcon]="sendIcon"
[tabindex]="0"
[attr.title]="textFor('send')"
(click)="sendClick()"
>
</button>
</ng-template>
</kendo-textbox>
<kendo-textarea
*ngIf="type === 'textarea'"
#messageBoxInput
class="k-message-box !k-align-items-end"
resizable="none"
[rows]="3"
[inputAttributes]="{
'aria-label': textFor('messageBoxInputLabel')
}"
[placeholder]="textFor('messagePlaceholder')"
[showSuffixSeparator]="true"
(keydown)="textAreaKeydown($event)"
>
<kendo-textarea-suffix>
<button
kendoButton
fillMode="flat"
class="k-chat-send"
icon="paper-plane"
[svgIcon]="sendIcon"
[tabindex]="0"
[attr.title]="textFor('send')"
(click)="sendClick()"
>
</button>
</kendo-textarea-suffix>
</kendo-textarea>
</ng-container>
<ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
`,
standalone: true,
imports: [NgIf, ButtonComponent, NgTemplateOutlet, TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent]
}]
}], propDecorators: { borderColor: [{
type: HostBinding,
args: ['style.border-color']
}], 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
}] } });