@progress/kendo-angular-conversational-ui 11.2.0-develop.9 → 11.3.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/chat/l10n/messages.d.ts +10 -1
- package/chat/message-list.component.d.ts +9 -3
- package/chat/suggested-actions.component.d.ts +1 -2
- package/esm2020/cards/hero-card.component.mjs +3 -3
- package/esm2020/chat/attachment-template.directive.mjs +3 -3
- package/esm2020/chat/attachment.component.mjs +3 -3
- package/esm2020/chat/chat.component.mjs +47 -31
- package/esm2020/chat/chat.module.mjs +4 -4
- package/esm2020/chat/l10n/custom-messages.component.mjs +3 -3
- package/esm2020/chat/l10n/localized-messages.directive.mjs +3 -3
- package/esm2020/chat/l10n/messages.mjs +7 -3
- package/esm2020/chat/message-attachments.component.mjs +8 -7
- package/esm2020/chat/message-box.component.mjs +14 -10
- package/esm2020/chat/message-box.directive.mjs +3 -3
- package/esm2020/chat/message-list.component.mjs +51 -14
- package/esm2020/chat/message-template.directive.mjs +3 -3
- package/esm2020/chat/message.component.mjs +3 -3
- package/esm2020/chat/suggested-actions.component.mjs +17 -25
- package/esm2020/common/focused-state.directive.mjs +3 -3
- package/esm2020/common/scroll-anchor.directive.mjs +3 -3
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-conversational-ui.mjs +257 -211
- package/fesm2020/progress-kendo-angular-conversational-ui.mjs +254 -208
- package/package.json +7 -7
- package/common/keys.enum.d.ts +0 -14
- package/esm2020/common/keys.enum.mjs +0 -5
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { Directive, Optional, HostBinding, HostListener, EventEmitter, Component, ViewChild, Input, Output, isDevMode, forwardRef,
|
|
6
|
+
import { Directive, Optional, HostBinding, HostListener, EventEmitter, Component, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, NgModule } from '@angular/core';
|
|
7
7
|
import * as i1$2 from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
@@ -14,7 +14,7 @@ import { ButtonModule } from '@progress/kendo-angular-buttons';
|
|
|
14
14
|
import * as i2 from '@angular/common';
|
|
15
15
|
import { CommonModule } from '@angular/common';
|
|
16
16
|
import * as i1$1 from '@progress/kendo-angular-intl';
|
|
17
|
-
import { fromEvent } from 'rxjs';
|
|
17
|
+
import { fromEvent, Subscription } from 'rxjs';
|
|
18
18
|
import { debounceTime } from 'rxjs/operators';
|
|
19
19
|
import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
|
|
20
20
|
|
|
@@ -35,9 +35,9 @@ class AttachmentTemplateDirective {
|
|
|
35
35
|
this.templateRef = templateRef;
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
-
AttachmentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
39
|
-
AttachmentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.
|
|
40
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
38
|
+
AttachmentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AttachmentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
39
|
+
AttachmentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: AttachmentTemplateDirective, selector: "[kendoChatAttachmentTemplate]", ngImport: i0 });
|
|
40
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AttachmentTemplateDirective, decorators: [{
|
|
41
41
|
type: Directive,
|
|
42
42
|
args: [{
|
|
43
43
|
selector: '[kendoChatAttachmentTemplate]'
|
|
@@ -97,9 +97,9 @@ class MessageTemplateDirective {
|
|
|
97
97
|
this.templateRef = templateRef;
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
|
-
MessageTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
101
|
-
MessageTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
100
|
+
MessageTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
101
|
+
MessageTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: MessageTemplateDirective, selector: "[kendoChatMessageTemplate]", ngImport: i0 });
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageTemplateDirective, decorators: [{
|
|
103
103
|
type: Directive,
|
|
104
104
|
args: [{
|
|
105
105
|
selector: '[kendoChatMessageTemplate]'
|
|
@@ -115,8 +115,8 @@ const packageMetadata = {
|
|
|
115
115
|
name: '@progress/kendo-angular-conversational-ui',
|
|
116
116
|
productName: 'Kendo UI for Angular',
|
|
117
117
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
118
|
-
publishDate:
|
|
119
|
-
version: '11.
|
|
118
|
+
publishDate: 1676463622,
|
|
119
|
+
version: '11.3.0-develop.1',
|
|
120
120
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
121
121
|
};
|
|
122
122
|
|
|
@@ -130,9 +130,9 @@ class ChatMessageBoxTemplateDirective {
|
|
|
130
130
|
this.templateRef = templateRef;
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
|
-
ChatMessageBoxTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
134
|
-
ChatMessageBoxTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.
|
|
135
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
133
|
+
ChatMessageBoxTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatMessageBoxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
134
|
+
ChatMessageBoxTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ChatMessageBoxTemplateDirective, selector: "[kendoChatMessageBoxTemplate]", ngImport: i0 });
|
|
135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatMessageBoxTemplateDirective, decorators: [{
|
|
136
136
|
type: Directive,
|
|
137
137
|
args: [{
|
|
138
138
|
selector: '[kendoChatMessageBoxTemplate]'
|
|
@@ -153,9 +153,9 @@ class FocusedStateDirective {
|
|
|
153
153
|
this.focused = false;
|
|
154
154
|
}
|
|
155
155
|
}
|
|
156
|
-
FocusedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
157
|
-
FocusedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.
|
|
158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
156
|
+
FocusedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusedStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
157
|
+
FocusedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FocusedStateDirective, selector: "[kendoChatFocusedState]", host: { listeners: { "focusin": "onFocus()", "focusout": "onBlur()" }, properties: { "class.k-focus": "this.focused" } }, ngImport: i0 });
|
|
158
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FocusedStateDirective, decorators: [{
|
|
159
159
|
type: Directive,
|
|
160
160
|
args: [{
|
|
161
161
|
selector: '[kendoChatFocusedState]'
|
|
@@ -236,9 +236,9 @@ class MessageBoxComponent {
|
|
|
236
236
|
return this.localization.get(key);
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
|
-
MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
240
|
-
MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
239
|
+
MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
240
|
+
MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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 [attr.role]=\"'textbox'\"\n kendoChatFocusedState\n type=\"text\"\n class=\"k-textbox k-input k-input-md k-input-solid\"\n [attr.aria-label]=\"textFor('messageBoxInputLabel')\"\n [placeholder]=\"textFor('messagePlaceholder')\"\n (keydown)=\"inputKeydown($event)\"\n />\n\n <textarea\n *ngIf=\"type === 'textarea'\"\n #messageBoxInput\n [attr.role]=\"'textbox'\"\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 [attr.aria-label]=\"textFor('messageBoxInputLabel')\"\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, components: [{ type: i1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageBoxComponent, decorators: [{
|
|
242
242
|
type: Component,
|
|
243
243
|
args: [{
|
|
244
244
|
selector: 'kendo-message-box',
|
|
@@ -247,21 +247,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
247
247
|
<input
|
|
248
248
|
*ngIf="type === 'textbox'"
|
|
249
249
|
#messageBoxInput
|
|
250
|
+
[attr.role]="'textbox'"
|
|
250
251
|
kendoChatFocusedState
|
|
251
252
|
type="text"
|
|
252
253
|
class="k-textbox k-input k-input-md k-input-solid"
|
|
254
|
+
[attr.aria-label]="textFor('messageBoxInputLabel')"
|
|
253
255
|
[placeholder]="textFor('messagePlaceholder')"
|
|
254
256
|
(keydown)="inputKeydown($event)"
|
|
255
257
|
/>
|
|
256
258
|
|
|
257
259
|
<textarea
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
260
|
+
*ngIf="type === 'textarea'"
|
|
261
|
+
#messageBoxInput
|
|
262
|
+
[attr.role]="'textbox'"
|
|
263
|
+
kendoChatFocusedState
|
|
264
|
+
[rows]="3"
|
|
265
|
+
class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
|
|
266
|
+
[attr.aria-label]="textFor('messageBoxInputLabel')"
|
|
267
|
+
[placeholder]="textFor('messagePlaceholder')"
|
|
268
|
+
(keydown)="textAreaKeydown($event)"
|
|
265
269
|
></textarea>
|
|
266
270
|
|
|
267
271
|
<button
|
|
@@ -438,6 +442,102 @@ const groupItems = (total) => (acc, msg, index) => {
|
|
|
438
442
|
*/
|
|
439
443
|
const chatView = (messages) => messages.reduce(groupItems(messages.length), []);
|
|
440
444
|
|
|
445
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
446
|
+
/**
|
|
447
|
+
* @hidden
|
|
448
|
+
*/
|
|
449
|
+
class SuggestedActionsComponent extends ChatItem {
|
|
450
|
+
constructor() {
|
|
451
|
+
super(...arguments);
|
|
452
|
+
this.dispatch = new EventEmitter();
|
|
453
|
+
this.defaultClass = true;
|
|
454
|
+
this.selectedIndex = 0;
|
|
455
|
+
this.keyHandlers = {
|
|
456
|
+
[Keys.Tab]: (e) => this.changeSelectedIndex(e),
|
|
457
|
+
[Keys.Enter]: (_, action) => this.actionClick(action),
|
|
458
|
+
[Keys.Space]: (_, action) => this.actionClick(action),
|
|
459
|
+
};
|
|
460
|
+
}
|
|
461
|
+
isSelected(index) {
|
|
462
|
+
return this.selected && this.selectedIndex === index;
|
|
463
|
+
}
|
|
464
|
+
actionClick(action) {
|
|
465
|
+
this.dispatch.next(action);
|
|
466
|
+
}
|
|
467
|
+
actionKeydown(e, action) {
|
|
468
|
+
const handler = this.keyHandlers[e.keyCode];
|
|
469
|
+
if (handler) {
|
|
470
|
+
handler(e, action);
|
|
471
|
+
}
|
|
472
|
+
}
|
|
473
|
+
focus() { }
|
|
474
|
+
changeSelectedIndex(e) {
|
|
475
|
+
const offset = e.shiftKey ? -1 : 1;
|
|
476
|
+
const prevIndex = this.selectedIndex;
|
|
477
|
+
this.selectedIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
SuggestedActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SuggestedActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
481
|
+
SuggestedActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", tabbable: "tabbable" }, outputs: { dispatch: "dispatch" }, host: { properties: { "class.k-quick-replies": "this.defaultClass" } }, providers: [{
|
|
482
|
+
provide: ChatItem,
|
|
483
|
+
useExisting: forwardRef(() => SuggestedActionsComponent)
|
|
484
|
+
}], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
485
|
+
<span
|
|
486
|
+
#item
|
|
487
|
+
*ngFor="let action of actions; index as index; first as first; last as last"
|
|
488
|
+
class="k-quick-reply"
|
|
489
|
+
role="button"
|
|
490
|
+
[class.k-selected]="isSelected(index)"
|
|
491
|
+
[class.k-focus]="isSelected(index)"
|
|
492
|
+
[class.k-first]="first"
|
|
493
|
+
[class.k-last]="last"
|
|
494
|
+
[attr.tabindex]="0"
|
|
495
|
+
(click)="actionClick(action)"
|
|
496
|
+
(keydown)="actionKeydown($event, action)"
|
|
497
|
+
>
|
|
498
|
+
{{ action.title || action.value }}
|
|
499
|
+
</span>
|
|
500
|
+
`, isInline: true, directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
501
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
|
|
502
|
+
type: Component,
|
|
503
|
+
args: [{
|
|
504
|
+
selector: 'kendo-chat-suggested-actions',
|
|
505
|
+
providers: [{
|
|
506
|
+
provide: ChatItem,
|
|
507
|
+
useExisting: forwardRef(() => SuggestedActionsComponent)
|
|
508
|
+
}],
|
|
509
|
+
template: `
|
|
510
|
+
<span
|
|
511
|
+
#item
|
|
512
|
+
*ngFor="let action of actions; index as index; first as first; last as last"
|
|
513
|
+
class="k-quick-reply"
|
|
514
|
+
role="button"
|
|
515
|
+
[class.k-selected]="isSelected(index)"
|
|
516
|
+
[class.k-focus]="isSelected(index)"
|
|
517
|
+
[class.k-first]="first"
|
|
518
|
+
[class.k-last]="last"
|
|
519
|
+
[attr.tabindex]="0"
|
|
520
|
+
(click)="actionClick(action)"
|
|
521
|
+
(keydown)="actionKeydown($event, action)"
|
|
522
|
+
>
|
|
523
|
+
{{ action.title || action.value }}
|
|
524
|
+
</span>
|
|
525
|
+
`
|
|
526
|
+
}]
|
|
527
|
+
}], propDecorators: { actions: [{
|
|
528
|
+
type: Input
|
|
529
|
+
}], tabbable: [{
|
|
530
|
+
type: Input
|
|
531
|
+
}], dispatch: [{
|
|
532
|
+
type: Output
|
|
533
|
+
}], defaultClass: [{
|
|
534
|
+
type: HostBinding,
|
|
535
|
+
args: ['class.k-quick-replies']
|
|
536
|
+
}], items: [{
|
|
537
|
+
type: ViewChildren,
|
|
538
|
+
args: ['item']
|
|
539
|
+
}] } });
|
|
540
|
+
|
|
441
541
|
// eslint-disable no-forward-ref
|
|
442
542
|
/**
|
|
443
543
|
* @hidden
|
|
@@ -459,8 +559,8 @@ class MessageComponent extends ChatItem {
|
|
|
459
559
|
this.element.nativeElement.focus();
|
|
460
560
|
}
|
|
461
561
|
}
|
|
462
|
-
MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
463
|
-
MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
562
|
+
MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
563
|
+
MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageComponent, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", template: "template" }, host: { properties: { "class.k-message": "this.cssClass", "class.k-selected": "this.selected", "class.k-focus": "this.selected", "attr.tabIndex": "this.tabIndex" } }, providers: [{
|
|
464
564
|
provide: ChatItem,
|
|
465
565
|
useExisting: forwardRef(() => MessageComponent)
|
|
466
566
|
}], usesInheritance: true, ngImport: i0, template: `
|
|
@@ -502,7 +602,7 @@ MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
502
602
|
</div>
|
|
503
603
|
</ng-template>
|
|
504
604
|
`, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
605
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageComponent, decorators: [{
|
|
506
606
|
type: Component,
|
|
507
607
|
args: [{
|
|
508
608
|
selector: 'kendo-chat-message',
|
|
@@ -593,8 +693,8 @@ class AttachmentComponent {
|
|
|
593
693
|
return this.attachment.contentType || '';
|
|
594
694
|
}
|
|
595
695
|
}
|
|
596
|
-
AttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
597
|
-
AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
696
|
+
AttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
697
|
+
AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
|
|
598
698
|
<ng-container *ngIf="template">
|
|
599
699
|
<ng-container *ngTemplateOutlet="template.templateRef; context: context;">
|
|
600
700
|
</ng-container>
|
|
@@ -615,7 +715,7 @@ AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
|
|
|
615
715
|
</div>
|
|
616
716
|
</div>
|
|
617
717
|
`, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
618
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
718
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AttachmentComponent, decorators: [{
|
|
619
719
|
type: Component,
|
|
620
720
|
args: [{
|
|
621
721
|
selector: 'kendo-chat-attachment',
|
|
@@ -666,12 +766,12 @@ class MessageAttachmentsComponent extends ChatItem {
|
|
|
666
766
|
this.scrollPosition = 0;
|
|
667
767
|
this.selectedIndex = 0;
|
|
668
768
|
this.carouselKeyHandlers = {
|
|
669
|
-
[
|
|
670
|
-
[
|
|
769
|
+
[Keys.ArrowLeft]: (e) => this.navigateTo(e, -1),
|
|
770
|
+
[Keys.ArrowRight]: (e) => this.navigateTo(e, 1)
|
|
671
771
|
};
|
|
672
772
|
this.listKeyHandlers = {
|
|
673
|
-
[
|
|
674
|
-
[
|
|
773
|
+
[Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
|
|
774
|
+
[Keys.ArrowDown]: (e) => this.navigateTo(e, 1)
|
|
675
775
|
};
|
|
676
776
|
}
|
|
677
777
|
get carousel() {
|
|
@@ -740,8 +840,8 @@ class MessageAttachmentsComponent extends ChatItem {
|
|
|
740
840
|
}
|
|
741
841
|
}
|
|
742
842
|
}
|
|
743
|
-
MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
744
|
-
MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
843
|
+
MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
844
|
+
MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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: [{
|
|
745
845
|
provide: ChatItem,
|
|
746
846
|
useExisting: forwardRef(() => MessageAttachmentsComponent)
|
|
747
847
|
}], 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: `
|
|
@@ -780,7 +880,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
|
|
|
780
880
|
>
|
|
781
881
|
</button>
|
|
782
882
|
`, isInline: true, components: [{ type: i1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: 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"] }] });
|
|
783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
883
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
|
|
784
884
|
type: Component,
|
|
785
885
|
args: [{
|
|
786
886
|
providers: [{
|
|
@@ -844,127 +944,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
844
944
|
args: ['item', { read: ElementRef }]
|
|
845
945
|
}] } });
|
|
846
946
|
|
|
847
|
-
|
|
848
|
-
/**
|
|
849
|
-
* @hidden
|
|
850
|
-
*/
|
|
851
|
-
class SuggestedActionsComponent extends ChatItem {
|
|
852
|
-
constructor() {
|
|
853
|
-
super(...arguments);
|
|
854
|
-
this.dispatch = new EventEmitter();
|
|
855
|
-
this.defaultClass = true;
|
|
856
|
-
this.selectedIndex = 0;
|
|
857
|
-
this.keyHandlers = {
|
|
858
|
-
[37 /* left */]: (e) => this.navigateTo(e, -1),
|
|
859
|
-
[39 /* right */]: (e) => this.navigateTo(e, 1),
|
|
860
|
-
[13 /* enter */]: (_, action) => this.actionClick(action)
|
|
861
|
-
};
|
|
862
|
-
}
|
|
863
|
-
isSelected(index) {
|
|
864
|
-
return this.selected && this.selectedIndex === index;
|
|
865
|
-
}
|
|
866
|
-
actionClick(action) {
|
|
867
|
-
this.dispatch.next(action);
|
|
868
|
-
}
|
|
869
|
-
actionKeydown(e, action) {
|
|
870
|
-
const handler = this.keyHandlers[e.keyCode];
|
|
871
|
-
if (handler) {
|
|
872
|
-
handler(e, action);
|
|
873
|
-
}
|
|
874
|
-
}
|
|
875
|
-
focus() {
|
|
876
|
-
this.select(this.selectedIndex);
|
|
877
|
-
}
|
|
878
|
-
select(index) {
|
|
879
|
-
this.selectedIndex = index;
|
|
880
|
-
const item = this.items.toArray()[index];
|
|
881
|
-
if (item) {
|
|
882
|
-
item.nativeElement.focus();
|
|
883
|
-
}
|
|
884
|
-
}
|
|
885
|
-
navigateTo(e, offset) {
|
|
886
|
-
const prevIndex = this.selectedIndex;
|
|
887
|
-
const nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
|
|
888
|
-
if (nextIndex !== prevIndex) {
|
|
889
|
-
this.select(nextIndex);
|
|
890
|
-
e.preventDefault();
|
|
891
|
-
}
|
|
892
|
-
}
|
|
893
|
-
}
|
|
894
|
-
SuggestedActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SuggestedActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
895
|
-
SuggestedActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", tabbable: "tabbable" }, outputs: { dispatch: "dispatch" }, host: { properties: { "class.k-quick-replies": "this.defaultClass" } }, providers: [{
|
|
896
|
-
provide: ChatItem,
|
|
897
|
-
useExisting: forwardRef(() => SuggestedActionsComponent)
|
|
898
|
-
}], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
899
|
-
<span
|
|
900
|
-
#item
|
|
901
|
-
*ngFor="let action of actions; index as index; first as first; last as last"
|
|
902
|
-
class="k-quick-reply"
|
|
903
|
-
[class.k-selected]="isSelected(index)"
|
|
904
|
-
[class.k-focus]="isSelected(index)"
|
|
905
|
-
[class.k-first]="first"
|
|
906
|
-
[class.k-last]="last"
|
|
907
|
-
[attr.tabindex]="tabbable && selectedIndex === index ? '0' : '-1'"
|
|
908
|
-
(click)="actionClick(action)"
|
|
909
|
-
(keydown)="actionKeydown($event, action)"
|
|
910
|
-
>
|
|
911
|
-
{{ action.title || action.value }}
|
|
912
|
-
</span>
|
|
913
|
-
`, isInline: true, directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
914
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
|
|
915
|
-
type: Component,
|
|
916
|
-
args: [{
|
|
917
|
-
selector: 'kendo-chat-suggested-actions',
|
|
918
|
-
providers: [{
|
|
919
|
-
provide: ChatItem,
|
|
920
|
-
useExisting: forwardRef(() => SuggestedActionsComponent)
|
|
921
|
-
}],
|
|
922
|
-
template: `
|
|
923
|
-
<span
|
|
924
|
-
#item
|
|
925
|
-
*ngFor="let action of actions; index as index; first as first; last as last"
|
|
926
|
-
class="k-quick-reply"
|
|
927
|
-
[class.k-selected]="isSelected(index)"
|
|
928
|
-
[class.k-focus]="isSelected(index)"
|
|
929
|
-
[class.k-first]="first"
|
|
930
|
-
[class.k-last]="last"
|
|
931
|
-
[attr.tabindex]="tabbable && selectedIndex === index ? '0' : '-1'"
|
|
932
|
-
(click)="actionClick(action)"
|
|
933
|
-
(keydown)="actionKeydown($event, action)"
|
|
934
|
-
>
|
|
935
|
-
{{ action.title || action.value }}
|
|
936
|
-
</span>
|
|
937
|
-
`
|
|
938
|
-
}]
|
|
939
|
-
}], propDecorators: { actions: [{
|
|
940
|
-
type: Input
|
|
941
|
-
}], tabbable: [{
|
|
942
|
-
type: Input
|
|
943
|
-
}], dispatch: [{
|
|
944
|
-
type: Output
|
|
945
|
-
}], defaultClass: [{
|
|
946
|
-
type: HostBinding,
|
|
947
|
-
args: ['class.k-quick-replies']
|
|
948
|
-
}], items: [{
|
|
949
|
-
type: ViewChildren,
|
|
950
|
-
args: ['item']
|
|
951
|
-
}] } });
|
|
952
|
-
|
|
947
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
953
948
|
/**
|
|
954
949
|
* @hidden
|
|
955
950
|
*/
|
|
956
951
|
class MessageListComponent {
|
|
957
|
-
constructor(element, intl) {
|
|
952
|
+
constructor(element, intl, renderer) {
|
|
958
953
|
this.element = element;
|
|
959
954
|
this.intl = intl;
|
|
955
|
+
this.renderer = renderer;
|
|
960
956
|
this.executeAction = new EventEmitter();
|
|
961
957
|
this.navigate = new EventEmitter();
|
|
962
958
|
this.resize = new EventEmitter();
|
|
963
959
|
this.cssClass = true;
|
|
964
960
|
this.view = [];
|
|
961
|
+
this.subs = new Subscription();
|
|
965
962
|
this.keyActions = {
|
|
966
|
-
[
|
|
967
|
-
[
|
|
963
|
+
[Keys.Home]: (_) => this.onHomeOrEndKeyDown('home'),
|
|
964
|
+
[Keys.End]: (_) => this.onHomeOrEndKeyDown('end'),
|
|
965
|
+
[Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
|
|
966
|
+
[Keys.ArrowDown]: (e) => this.navigateTo(e, 1),
|
|
967
|
+
[Keys.Tab]: (e) => this.onTabKeyDown(e),
|
|
968
968
|
};
|
|
969
969
|
}
|
|
970
970
|
set messages(value) {
|
|
@@ -975,9 +975,17 @@ class MessageListComponent {
|
|
|
975
975
|
get messages() {
|
|
976
976
|
return this._messages;
|
|
977
977
|
}
|
|
978
|
+
ngOnInit() {
|
|
979
|
+
const elRef = this.element.nativeElement;
|
|
980
|
+
this.subs.add(this.renderer.listen(elRef, 'keydown', event => this.onKeydown(event)));
|
|
981
|
+
this.subs.add(this.renderer.listen(elRef, 'focusout', event => this.onBlur(event)));
|
|
982
|
+
}
|
|
978
983
|
ngAfterViewInit() {
|
|
979
984
|
this.selectedItem = this.items.last;
|
|
980
985
|
}
|
|
986
|
+
ngOnDestroy() {
|
|
987
|
+
this.subs.unsubscribe();
|
|
988
|
+
}
|
|
981
989
|
onResize() {
|
|
982
990
|
this.resize.emit();
|
|
983
991
|
}
|
|
@@ -1023,13 +1031,37 @@ class MessageListComponent {
|
|
|
1023
1031
|
}
|
|
1024
1032
|
return items[items.length - 1];
|
|
1025
1033
|
}
|
|
1034
|
+
onHomeOrEndKeyDown(key) {
|
|
1035
|
+
const items = this.items.toArray();
|
|
1036
|
+
if (key === 'home') {
|
|
1037
|
+
items[0].focus();
|
|
1038
|
+
}
|
|
1039
|
+
else {
|
|
1040
|
+
items[items.length - 1].focus();
|
|
1041
|
+
}
|
|
1042
|
+
}
|
|
1043
|
+
onTabKeyDown(event) {
|
|
1044
|
+
const item = this.items.toArray()[this.items.length - 1];
|
|
1045
|
+
const isLastItemQuickReply = item instanceof SuggestedActionsComponent;
|
|
1046
|
+
const isLastItemMessage = item instanceof MessageComponent;
|
|
1047
|
+
event.target.blur();
|
|
1048
|
+
if (isLastItemQuickReply || isLastItemMessage) {
|
|
1049
|
+
this.select(item);
|
|
1050
|
+
item.focus();
|
|
1051
|
+
this.navigate.emit();
|
|
1052
|
+
}
|
|
1053
|
+
}
|
|
1026
1054
|
navigateTo(e, offset) {
|
|
1027
1055
|
const items = this.items.toArray();
|
|
1028
1056
|
const prevItem = this.selectedItem;
|
|
1029
1057
|
const prevIndex = items.indexOf(prevItem);
|
|
1030
1058
|
const nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
|
|
1031
1059
|
const nextItem = items[nextIndex];
|
|
1060
|
+
const isNextItemQuickReply = nextItem instanceof SuggestedActionsComponent;
|
|
1032
1061
|
if (nextItem !== prevItem) {
|
|
1062
|
+
if (isNextItemQuickReply) {
|
|
1063
|
+
nextItem.items.toArray()[0].nativeElement.focus();
|
|
1064
|
+
}
|
|
1033
1065
|
this.select(nextItem);
|
|
1034
1066
|
nextItem.focus();
|
|
1035
1067
|
this.navigate.emit();
|
|
@@ -1037,8 +1069,8 @@ class MessageListComponent {
|
|
|
1037
1069
|
}
|
|
1038
1070
|
}
|
|
1039
1071
|
}
|
|
1040
|
-
MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1041
|
-
MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1072
|
+
MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1073
|
+
MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", user: "user" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
|
|
1042
1074
|
<ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
|
|
1043
1075
|
<ng-container [ngSwitch]="group.type">
|
|
1044
1076
|
<div
|
|
@@ -1109,7 +1141,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
|
|
|
1109
1141
|
<kendo-resize-sensor (resize)="onResize()">
|
|
1110
1142
|
</kendo-resize-sensor>
|
|
1111
1143
|
`, isInline: true, components: [{ type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template"] }, { type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template"] }, { type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "tabbable"], outputs: ["dispatch"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
1112
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageListComponent, decorators: [{
|
|
1113
1145
|
type: Component,
|
|
1114
1146
|
args: [{
|
|
1115
1147
|
selector: 'kendo-chat-message-list',
|
|
@@ -1185,7 +1217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1185
1217
|
</kendo-resize-sensor>
|
|
1186
1218
|
`
|
|
1187
1219
|
}]
|
|
1188
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.IntlService }]; }, propDecorators: { messages: [{
|
|
1220
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.IntlService }, { type: i0.Renderer2 }]; }, propDecorators: { messages: [{
|
|
1189
1221
|
type: Input
|
|
1190
1222
|
}], attachmentTemplate: [{
|
|
1191
1223
|
type: Input
|
|
@@ -1205,12 +1237,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1205
1237
|
}], cssClass: [{
|
|
1206
1238
|
type: HostBinding,
|
|
1207
1239
|
args: ['class.k-message-list-content']
|
|
1208
|
-
}], onKeydown: [{
|
|
1209
|
-
type: HostListener,
|
|
1210
|
-
args: ['keydown', ['$event']]
|
|
1211
|
-
}], onBlur: [{
|
|
1212
|
-
type: HostListener,
|
|
1213
|
-
args: ['focusout', ['$event']]
|
|
1214
1240
|
}] } });
|
|
1215
1241
|
|
|
1216
1242
|
/**
|
|
@@ -1218,9 +1244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1218
1244
|
*/
|
|
1219
1245
|
class Messages extends ComponentMessages {
|
|
1220
1246
|
}
|
|
1221
|
-
Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1222
|
-
Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.
|
|
1223
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1247
|
+
Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
|
1248
|
+
Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, selector: "kendoConversationalUIMessages", inputs: { messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel" }, usesInheritance: true, ngImport: i0 });
|
|
1249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
|
|
1224
1250
|
type: Directive,
|
|
1225
1251
|
args: [{
|
|
1226
1252
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -1230,6 +1256,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1230
1256
|
type: Input
|
|
1231
1257
|
}], send: [{
|
|
1232
1258
|
type: Input
|
|
1259
|
+
}], messageListLabel: [{
|
|
1260
|
+
type: Input
|
|
1261
|
+
}], messageBoxInputLabel: [{
|
|
1262
|
+
type: Input
|
|
1233
1263
|
}] } });
|
|
1234
1264
|
|
|
1235
1265
|
// eslint-disable no-forward-ref
|
|
@@ -1242,14 +1272,14 @@ class LocalizedMessagesDirective extends Messages {
|
|
|
1242
1272
|
this.service = service;
|
|
1243
1273
|
}
|
|
1244
1274
|
}
|
|
1245
|
-
LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1246
|
-
LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.
|
|
1275
|
+
LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1276
|
+
LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]", providers: [
|
|
1247
1277
|
{
|
|
1248
1278
|
provide: Messages,
|
|
1249
1279
|
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
|
1250
1280
|
}
|
|
1251
1281
|
], usesInheritance: true, ngImport: i0 });
|
|
1252
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
|
1253
1283
|
type: Directive,
|
|
1254
1284
|
args: [{
|
|
1255
1285
|
providers: [
|
|
@@ -1315,9 +1345,9 @@ class ScrollAnchorDirective {
|
|
|
1315
1345
|
this.zone.runOutsideAngular(() => setTimeout(() => this.scrolling = false, 1000));
|
|
1316
1346
|
}
|
|
1317
1347
|
}
|
|
1318
|
-
ScrollAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1319
|
-
ScrollAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.
|
|
1320
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1348
|
+
ScrollAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1349
|
+
ScrollAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll" }, outputs: { autoScrollChange: "autoScrollChange" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
|
|
1350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ScrollAnchorDirective, decorators: [{
|
|
1321
1351
|
type: Directive,
|
|
1322
1352
|
args: [{
|
|
1323
1353
|
selector: '[kendoChatScrollAnchor]',
|
|
@@ -1427,8 +1457,8 @@ class ChatComponent {
|
|
|
1427
1457
|
return this.localization.get(key);
|
|
1428
1458
|
}
|
|
1429
1459
|
}
|
|
1430
|
-
ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1431
|
-
ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1460
|
+
ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatComponent, deps: [{ token: i1$2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
1461
|
+
ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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: [
|
|
1432
1462
|
LocalizationService,
|
|
1433
1463
|
{
|
|
1434
1464
|
provide: L10N_PREFIX,
|
|
@@ -1442,27 +1472,35 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
|
|
|
1442
1472
|
|
|
1443
1473
|
i18n-send="kendo.chat.send|The text for the Send button"
|
|
1444
1474
|
send="Send..."
|
|
1475
|
+
|
|
1476
|
+
i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
|
|
1477
|
+
messageListLabel="Message list"
|
|
1478
|
+
|
|
1479
|
+
i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
|
|
1480
|
+
messageBoxInputLabel="Message"
|
|
1445
1481
|
>
|
|
1446
1482
|
</ng-container>
|
|
1447
1483
|
|
|
1448
1484
|
<div
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1485
|
+
#messageList
|
|
1486
|
+
class="k-message-list k-avatars"
|
|
1487
|
+
aria-live="polite"
|
|
1488
|
+
role="log"
|
|
1489
|
+
kendoChatScrollAnchor
|
|
1490
|
+
[attr.aria-label]="textFor('messageListLabel')"
|
|
1453
1491
|
#anchor="scrollAnchor"
|
|
1454
1492
|
[(autoScroll)]="autoScroll"
|
|
1455
1493
|
>
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
|
|
1494
|
+
<kendo-chat-message-list
|
|
1495
|
+
[messages]="messages"
|
|
1496
|
+
[messageTemplate]="messageTemplate"
|
|
1497
|
+
[attachmentTemplate]="attachmentTemplate"
|
|
1498
|
+
[user]="user"
|
|
1499
|
+
(executeAction)="dispatchAction($event)"
|
|
1500
|
+
(resize)="anchor.scrollToBottom()"
|
|
1501
|
+
(navigate)="this.autoScroll = false"
|
|
1502
|
+
>
|
|
1503
|
+
</kendo-chat-message-list>
|
|
1466
1504
|
</div>
|
|
1467
1505
|
<kendo-message-box
|
|
1468
1506
|
#messageBox
|
|
@@ -1475,7 +1513,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
|
|
|
1475
1513
|
>
|
|
1476
1514
|
</kendo-message-box>
|
|
1477
1515
|
`, isInline: true, components: [{ type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "user"], outputs: ["executeAction", "navigate", "resize"] }, { type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }] });
|
|
1478
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatComponent, decorators: [{
|
|
1479
1517
|
type: Component,
|
|
1480
1518
|
args: [{
|
|
1481
1519
|
providers: [
|
|
@@ -1494,27 +1532,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1494
1532
|
|
|
1495
1533
|
i18n-send="kendo.chat.send|The text for the Send button"
|
|
1496
1534
|
send="Send..."
|
|
1535
|
+
|
|
1536
|
+
i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
|
|
1537
|
+
messageListLabel="Message list"
|
|
1538
|
+
|
|
1539
|
+
i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
|
|
1540
|
+
messageBoxInputLabel="Message"
|
|
1497
1541
|
>
|
|
1498
1542
|
</ng-container>
|
|
1499
1543
|
|
|
1500
1544
|
<div
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
|
|
1545
|
+
#messageList
|
|
1546
|
+
class="k-message-list k-avatars"
|
|
1547
|
+
aria-live="polite"
|
|
1548
|
+
role="log"
|
|
1549
|
+
kendoChatScrollAnchor
|
|
1550
|
+
[attr.aria-label]="textFor('messageListLabel')"
|
|
1505
1551
|
#anchor="scrollAnchor"
|
|
1506
1552
|
[(autoScroll)]="autoScroll"
|
|
1507
1553
|
>
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1554
|
+
<kendo-chat-message-list
|
|
1555
|
+
[messages]="messages"
|
|
1556
|
+
[messageTemplate]="messageTemplate"
|
|
1557
|
+
[attachmentTemplate]="attachmentTemplate"
|
|
1558
|
+
[user]="user"
|
|
1559
|
+
(executeAction)="dispatchAction($event)"
|
|
1560
|
+
(resize)="anchor.scrollToBottom()"
|
|
1561
|
+
(navigate)="this.autoScroll = false"
|
|
1562
|
+
>
|
|
1563
|
+
</kendo-chat-message-list>
|
|
1518
1564
|
</div>
|
|
1519
1565
|
<kendo-message-box
|
|
1520
1566
|
#messageBox
|
|
@@ -1575,14 +1621,14 @@ class CustomMessagesComponent extends Messages {
|
|
|
1575
1621
|
return true;
|
|
1576
1622
|
}
|
|
1577
1623
|
}
|
|
1578
|
-
CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1579
|
-
CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1624
|
+
CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$2.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1625
|
+
CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-chat-messages", providers: [
|
|
1580
1626
|
{
|
|
1581
1627
|
provide: Messages,
|
|
1582
1628
|
useExisting: forwardRef(() => CustomMessagesComponent)
|
|
1583
1629
|
}
|
|
1584
1630
|
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
|
1585
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
|
|
1586
1632
|
type: Component,
|
|
1587
1633
|
args: [{
|
|
1588
1634
|
providers: [
|
|
@@ -1612,8 +1658,8 @@ class HeroCardComponent {
|
|
|
1612
1658
|
this.executeAction.next(action);
|
|
1613
1659
|
}
|
|
1614
1660
|
}
|
|
1615
|
-
HeroCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1616
|
-
HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1661
|
+
HeroCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1662
|
+
HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeroCardComponent, selector: "kendo-chat-hero-card", inputs: { imageUrl: "imageUrl", title: "title", subtitle: "subtitle", actions: "actions" }, outputs: { executeAction: "executeAction" }, host: { properties: { "class.k-card": "this.cssClass" } }, ngImport: i0, template: `
|
|
1617
1663
|
<img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
|
|
1618
1664
|
<div class="k-card-body">
|
|
1619
1665
|
<h5 class="k-card-title" *ngIf="title">
|
|
@@ -1636,7 +1682,7 @@ HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
|
|
|
1636
1682
|
</span>
|
|
1637
1683
|
</div>
|
|
1638
1684
|
`, isInline: true, components: [{ type: i1.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1639
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1685
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeroCardComponent, decorators: [{
|
|
1640
1686
|
type: Component,
|
|
1641
1687
|
args: [{
|
|
1642
1688
|
selector: 'kendo-chat-hero-card',
|
|
@@ -1722,8 +1768,8 @@ const PRIVATE_DIRECTIVES = [
|
|
|
1722
1768
|
*/
|
|
1723
1769
|
class ChatModule {
|
|
1724
1770
|
}
|
|
1725
|
-
ChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1726
|
-
ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1771
|
+
ChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1772
|
+
ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, declarations: [ChatComponent,
|
|
1727
1773
|
CustomMessagesComponent,
|
|
1728
1774
|
AttachmentTemplateDirective,
|
|
1729
1775
|
MessageTemplateDirective,
|
|
@@ -1745,12 +1791,12 @@ ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
|
|
|
1745
1791
|
MessageTemplateDirective,
|
|
1746
1792
|
HeroCardComponent,
|
|
1747
1793
|
ChatMessageBoxTemplateDirective] });
|
|
1748
|
-
ChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1794
|
+
ChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, imports: [[
|
|
1749
1795
|
ButtonModule,
|
|
1750
1796
|
CommonModule,
|
|
1751
1797
|
ResizeSensorModule
|
|
1752
1798
|
]] });
|
|
1753
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1799
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, decorators: [{
|
|
1754
1800
|
type: NgModule,
|
|
1755
1801
|
args: [{
|
|
1756
1802
|
declarations: [
|