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

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.
Files changed (148) hide show
  1. package/{dist/es2015/api → api}/action.interface.d.ts +0 -0
  2. package/{dist/es2015/api → api}/attachment.interface.d.ts +0 -0
  3. package/{dist/es2015/api → api}/execute-action-event.d.ts +1 -1
  4. package/{dist/es/api/user.interface.js → api/index.d.ts} +6 -0
  5. package/{dist/es2015/api → api}/message.interface.d.ts +0 -0
  6. package/{dist/es2015/api → api}/post-message-event.d.ts +0 -0
  7. package/{dist/es2015/api → api}/preventable-event.d.ts +0 -0
  8. package/{dist/es2015/api → api}/user.interface.d.ts +0 -0
  9. package/bundles/kendo-angular-conversational-ui.umd.js +5 -0
  10. package/{dist/es2015/cards → cards}/hero-card.component.d.ts +3 -0
  11. package/{dist/es2015/chat → chat}/attachment-template.directive.d.ts +3 -0
  12. package/{dist/es2015/chat → chat}/attachment.component.d.ts +9 -5
  13. package/{dist/es2015/chat → chat}/builtin-actions.d.ts +0 -0
  14. package/{dist/es2015/chat → chat}/chat-item.d.ts +0 -0
  15. package/{dist/es2015/chat → chat}/chat-view.d.ts +1 -1
  16. package/{dist/es2015/chat → chat}/chat.component.d.ts +6 -6
  17. package/{dist/es2015/chat → chat}/chat.directives.d.ts +0 -0
  18. package/chat/chat.module.d.ts +47 -0
  19. package/{dist/es2015/chat → chat}/l10n/custom-messages.component.d.ts +4 -1
  20. package/{dist/es2015/chat → chat}/l10n/localized-messages.directive.d.ts +3 -0
  21. package/{dist/es2015/chat → chat}/l10n/messages.d.ts +3 -0
  22. package/{dist/es2015/chat → chat}/message-attachments.component.d.ts +5 -2
  23. package/{dist/es2015/chat → chat}/message-list.component.d.ts +8 -7
  24. package/{dist/es2015/chat → chat}/message-template.directive.d.ts +3 -0
  25. package/{dist/es2015/chat → chat}/message.component.d.ts +4 -1
  26. package/{dist/es2015/chat → chat}/suggested-actions.component.d.ts +4 -1
  27. package/common/focused-state.directive.d.ts +15 -0
  28. package/{dist/es2015/common → common}/keys.enum.d.ts +0 -0
  29. package/{dist/es2015/common → common}/scroll-anchor.directive.d.ts +3 -0
  30. package/{dist/es2015/common → common}/utils.d.ts +0 -0
  31. package/{dist/es2015 → esm2015}/api/action.interface.js +2 -1
  32. package/{dist/es2015 → esm2015}/api/attachment.interface.js +1 -0
  33. package/{dist/es2015 → esm2015}/api/execute-action-event.js +0 -0
  34. package/{dist/es/api/attachment.interface.js → esm2015/api/index.js} +6 -0
  35. package/{dist/es → esm2015}/api/message.interface.js +1 -0
  36. package/{dist/es2015 → esm2015}/api/post-message-event.js +0 -0
  37. package/{dist/es2015 → esm2015}/api/preventable-event.js +0 -0
  38. package/{dist/es2015 → esm2015}/api/user.interface.js +1 -0
  39. package/esm2015/cards/hero-card.component.js +88 -0
  40. package/{dist/es2015 → esm2015}/chat/attachment-template.directive.js +14 -12
  41. package/esm2015/chat/attachment.component.js +83 -0
  42. package/{dist/es2015 → esm2015}/chat/builtin-actions.js +13 -16
  43. package/{dist/es2015 → esm2015}/chat/chat-item.js +0 -0
  44. package/{dist/es2015 → esm2015}/chat/chat-view.js +0 -6
  45. package/esm2015/chat/chat.component.js +226 -0
  46. package/{dist/es → esm2015}/chat/chat.directives.js +0 -0
  47. package/{dist/es2015 → esm2015}/chat/chat.module.js +40 -15
  48. package/esm2015/chat/l10n/custom-messages.component.js +42 -0
  49. package/esm2015/chat/l10n/localized-messages.directive.js +37 -0
  50. package/esm2015/chat/l10n/messages.js +24 -0
  51. package/{dist/es2015 → esm2015}/chat/message-attachments.component.js +71 -48
  52. package/esm2015/chat/message-list.component.js +279 -0
  53. package/{dist/es2015 → esm2015}/chat/message-template.directive.js +14 -12
  54. package/esm2015/chat/message.component.js +140 -0
  55. package/esm2015/chat/suggested-actions.component.js +111 -0
  56. package/esm2015/common/focused-state.directive.js +37 -0
  57. package/{dist/es2015 → esm2015}/common/keys.enum.js +1 -0
  58. package/{dist/es2015 → esm2015}/common/scroll-anchor.directive.js +20 -26
  59. package/{dist/es2015 → esm2015}/common/utils.js +0 -0
  60. package/{dist/es/api/action.interface.js → esm2015/kendo-angular-conversational-ui.js} +4 -1
  61. package/{dist/npm/chat/chat-item.js → esm2015/main.js} +5 -11
  62. package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
  63. package/fesm2015/kendo-angular-conversational-ui.js +1576 -0
  64. package/{dist/es2015/common/focused-state.directive.d.ts → kendo-angular-conversational-ui.d.ts} +3 -6
  65. package/main.d.ts +9 -0
  66. package/{dist/es2015/package-metadata.d.ts → package-metadata.d.ts} +0 -0
  67. package/package.json +34 -101
  68. package/schematics/ngAdd/index.js +5 -2
  69. package/schematics/ngAdd/index.js.map +1 -1
  70. package/dist/cdn/js/kendo-angular-conversational-ui.js +0 -20
  71. package/dist/cdn/main.js +0 -5
  72. package/dist/es/api/execute-action-event.js +0 -24
  73. package/dist/es/api/post-message-event.js +0 -18
  74. package/dist/es/api/preventable-event.js +0 -32
  75. package/dist/es/cards/hero-card.component.js +0 -54
  76. package/dist/es/chat/attachment-template.directive.js +0 -32
  77. package/dist/es/chat/attachment.component.js +0 -65
  78. package/dist/es/chat/builtin-actions.js +0 -28
  79. package/dist/es/chat/chat-item.js +0 -13
  80. package/dist/es/chat/chat-view.js +0 -92
  81. package/dist/es/chat/chat.component.js +0 -193
  82. package/dist/es/chat/chat.module.js +0 -76
  83. package/dist/es/chat/l10n/custom-messages.component.js +0 -45
  84. package/dist/es/chat/l10n/localized-messages.directive.js +0 -36
  85. package/dist/es/chat/l10n/messages.js +0 -26
  86. package/dist/es/chat/message-attachments.component.js +0 -148
  87. package/dist/es/chat/message-list.component.js +0 -165
  88. package/dist/es/chat/message-template.directive.js +0 -32
  89. package/dist/es/chat/message.component.js +0 -77
  90. package/dist/es/chat/suggested-actions.component.js +0 -91
  91. package/dist/es/common/focused-state.directive.js +0 -43
  92. package/dist/es/common/keys.enum.js +0 -4
  93. package/dist/es/common/scroll-anchor.directive.js +0 -87
  94. package/dist/es/common/utils.js +0 -13
  95. package/dist/es/index.js +0 -21
  96. package/dist/es/main.js +0 -8
  97. package/dist/es/package-metadata.js +0 -15
  98. package/dist/es2015/api/message.interface.js +0 -4
  99. package/dist/es2015/cards/hero-card.component.js +0 -78
  100. package/dist/es2015/chat/attachment.component.js +0 -66
  101. package/dist/es2015/chat/chat.component.js +0 -230
  102. package/dist/es2015/chat/chat.directives.js +0 -7
  103. package/dist/es2015/chat/chat.module.d.ts +0 -27
  104. package/dist/es2015/chat/l10n/custom-messages.component.js +0 -37
  105. package/dist/es2015/chat/l10n/localized-messages.directive.js +0 -32
  106. package/dist/es2015/chat/l10n/messages.js +0 -20
  107. package/dist/es2015/chat/message-list.component.js +0 -227
  108. package/dist/es2015/chat/message.component.js +0 -107
  109. package/dist/es2015/chat/suggested-actions.component.js +0 -104
  110. package/dist/es2015/common/focused-state.directive.js +0 -45
  111. package/dist/es2015/index.d.ts +0 -21
  112. package/dist/es2015/index.js +0 -21
  113. package/dist/es2015/index.metadata.json +0 -1
  114. package/dist/es2015/main.d.ts +0 -12
  115. package/dist/es2015/main.js +0 -8
  116. package/dist/fesm2015/index.js +0 -1403
  117. package/dist/fesm5/index.js +0 -1253
  118. package/dist/npm/api/action.interface.js +0 -7
  119. package/dist/npm/api/attachment.interface.js +0 -6
  120. package/dist/npm/api/execute-action-event.js +0 -26
  121. package/dist/npm/api/message.interface.js +0 -6
  122. package/dist/npm/api/post-message-event.js +0 -20
  123. package/dist/npm/api/preventable-event.js +0 -34
  124. package/dist/npm/api/user.interface.js +0 -6
  125. package/dist/npm/cards/hero-card.component.js +0 -56
  126. package/dist/npm/chat/attachment-template.directive.js +0 -34
  127. package/dist/npm/chat/attachment.component.js +0 -67
  128. package/dist/npm/chat/builtin-actions.js +0 -33
  129. package/dist/npm/chat/chat-view.js +0 -98
  130. package/dist/npm/chat/chat.component.js +0 -195
  131. package/dist/npm/chat/chat.directives.js +0 -12
  132. package/dist/npm/chat/chat.module.js +0 -78
  133. package/dist/npm/chat/l10n/custom-messages.component.js +0 -47
  134. package/dist/npm/chat/l10n/localized-messages.directive.js +0 -38
  135. package/dist/npm/chat/l10n/messages.js +0 -28
  136. package/dist/npm/chat/message-attachments.component.js +0 -150
  137. package/dist/npm/chat/message-list.component.js +0 -167
  138. package/dist/npm/chat/message-template.directive.js +0 -34
  139. package/dist/npm/chat/message.component.js +0 -79
  140. package/dist/npm/chat/suggested-actions.component.js +0 -93
  141. package/dist/npm/common/focused-state.directive.js +0 -45
  142. package/dist/npm/common/keys.enum.js +0 -6
  143. package/dist/npm/common/scroll-anchor.directive.js +0 -89
  144. package/dist/npm/common/utils.js +0 -15
  145. package/dist/npm/index.js +0 -37
  146. package/dist/npm/main.js +0 -11
  147. package/dist/npm/package-metadata.js +0 -17
  148. package/dist/systemjs/kendo-angular-conversational-ui.js +0 -5
@@ -1,1253 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { __decorate, __param, __metadata, __extends } from 'tslib';
6
- import { Directive, Optional, TemplateRef, isDevMode, Input, Output, EventEmitter, HostBinding, ContentChild, ViewChild, ElementRef, Component, NgZone, forwardRef, HostListener, ViewChildren, QueryList, Renderer2, NgModule } from '@angular/core';
7
- import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
8
- import { validatePackage } from '@progress/kendo-licensing';
9
- import { ButtonModule } from '@progress/kendo-angular-buttons';
10
- import { CommonModule } from '@angular/common';
11
- import { ResizeSensorModule } from '@progress/kendo-angular-common';
12
- import { fromEvent } from 'rxjs';
13
- import { debounceTime } from 'rxjs/operators';
14
- import { IntlService } from '@progress/kendo-angular-intl';
15
-
16
- /**
17
- * Defines a template that will be used for displaying message attachments. To define an attachment
18
- * template, nest an `<ng-template>` tag with the `kendoChatAttachmentTemplate` attribute inside the
19
- * `<kendo-chat>` component. The template context is set to the attachment instance. For more information,
20
- * refer to the article on [message attachments]({% slug attachments_chat %}).
21
- *
22
- * {% meta height:700 %}
23
- * {% embed_file attachments/templates/app.component.ts preview %}
24
- * {% embed_file shared/app.module.ts preview %}
25
- * {% embed_file shared/main.ts hidden %}
26
- * {% endmeta %}
27
- */
28
- var AttachmentTemplateDirective = /** @class */ (function () {
29
- function AttachmentTemplateDirective(templateRef) {
30
- this.templateRef = templateRef;
31
- }
32
- AttachmentTemplateDirective = __decorate([
33
- Directive({
34
- selector: '[kendoChatAttachmentTemplate]'
35
- }),
36
- __param(0, Optional()),
37
- __metadata("design:paramtypes", [TemplateRef])
38
- ], AttachmentTemplateDirective);
39
- return AttachmentTemplateDirective;
40
- }());
41
-
42
- /**
43
- * Arguments for the `SendMessage` event.
44
- *
45
- */
46
- var SendMessageEvent = /** @class */ (function () {
47
- /**
48
- * @hidden
49
- */
50
- function SendMessageEvent(message) {
51
- this.message = message;
52
- }
53
- return SendMessageEvent;
54
- }());
55
-
56
- var noop = function () { };
57
- var ɵ1 = function (action, sender) {
58
- sender.sendMessage.emit(new SendMessageEvent({
59
- author: sender.user,
60
- text: action.value,
61
- timestamp: new Date()
62
- }));
63
- }, ɵ2 = function (action) {
64
- window.open('tel:' + action.value);
65
- }, ɵ3 = function (action) {
66
- window.open(action.value);
67
- };
68
- var handlers = {
69
- 'reply': ɵ1,
70
- 'call': ɵ2,
71
- 'openUrl': ɵ3
72
- };
73
- /**
74
- * @hidden
75
- */
76
- var makeHandler = function (action) { return handlers[action.type] || noop; };
77
-
78
- /**
79
- * Defines a template that will be used for displaying Chat messages. To define an attachment
80
- * template, nest an `<ng-template>` tag with the `kendoChatMessageTemplate` attribute inside the
81
- * `<kendo-chat>` component. The template context is set to the message instance. For more information,
82
- * refer to the article on [message templates]({% slug message_templates_chat %}).
83
- *
84
- * {% meta height:700 %}
85
- * {% embed_file messages/templates/app.component.ts preview %}
86
- * {% embed_file shared/app.module.ts preview %}
87
- * {% embed_file shared/main.ts hidden %}
88
- * {% endmeta %}
89
- */
90
- var MessageTemplateDirective = /** @class */ (function () {
91
- function MessageTemplateDirective(templateRef) {
92
- this.templateRef = templateRef;
93
- }
94
- MessageTemplateDirective = __decorate([
95
- Directive({
96
- selector: '[kendoChatMessageTemplate]'
97
- }),
98
- __param(0, Optional()),
99
- __metadata("design:paramtypes", [TemplateRef])
100
- ], MessageTemplateDirective);
101
- return MessageTemplateDirective;
102
- }());
103
-
104
- /**
105
- * @hidden
106
- */
107
- var packageMetadata = {
108
- name: '@progress/kendo-angular-conversational-ui',
109
- productName: 'Kendo UI for Angular',
110
- productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
111
- publishDate: 1642589598,
112
- version: '',
113
- licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
114
- };
115
-
116
- // tslint:disable-next-line:max-line-length
117
- var 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>';
118
- /**
119
- * Represents the Kendo UI Chat component for Angular.
120
- *
121
- * {% meta height:700 %}
122
- * {% embed_file echo/app.component.ts preview %}
123
- * {% embed_file shared/app.module.ts %}
124
- * {% embed_file shared/main.ts hidden %}
125
- * {% endmeta %}
126
- *
127
- */
128
- var ChatComponent = /** @class */ (function () {
129
- function ChatComponent(localization, zone) {
130
- var _this = this;
131
- this.localization = localization;
132
- this.zone = zone;
133
- /**
134
- * Fires when the user types a message and clicks the **Send** button or presses **Enter**.
135
- * Emits the [`SendMessageEvent`]({% slug api_conversational-ui_sendmessageevent %}).
136
- *
137
- * > The message is not automatically appended to the `messages` array.
138
- */
139
- this.sendMessage = new EventEmitter();
140
- /**
141
- * Fires when the user clicks a quick action button.
142
- * The Chat internally handles the `reply`, `openUrl`, and `call` [known actions]({% slug api_conversational-ui_actiontype %}).
143
- *
144
- * Emits the [`ExecuteActionEvent`]({% slug api_conversational-ui_executeactionevent %}).
145
- * The event is preventable. If `preventDefault` is called, the built-in action will be suppressed.
146
- */
147
- this.executeAction = new EventEmitter();
148
- /**
149
- * @hidden
150
- */
151
- this.autoScroll = true;
152
- validatePackage(packageMetadata);
153
- this.direction = localization.rtl ? 'rtl' : 'ltr';
154
- this.localizationChangeSubscription = localization.changes.subscribe(function (_a) {
155
- var rtl = _a.rtl;
156
- _this.direction = rtl ? 'rtl' : 'ltr';
157
- });
158
- }
159
- Object.defineProperty(ChatComponent.prototype, "className", {
160
- get: function () {
161
- return 'k-widget k-chat';
162
- },
163
- enumerable: true,
164
- configurable: true
165
- });
166
- Object.defineProperty(ChatComponent.prototype, "dirAttr", {
167
- get: function () {
168
- return this.direction;
169
- },
170
- enumerable: true,
171
- configurable: true
172
- });
173
- ChatComponent.prototype.ngOnChanges = function () {
174
- var _this = this;
175
- this.zone.runOutsideAngular(function () { return setTimeout(function () {
176
- _this.messageList.nativeElement.style.flex = '1 1 auto';
177
- }); });
178
- };
179
- ChatComponent.prototype.ngAfterViewInit = function () {
180
- if (!isDevMode()) {
181
- return;
182
- }
183
- if (!this.user) {
184
- throw new Error('User must be set and have a valid id.');
185
- }
186
- };
187
- ChatComponent.prototype.ngOnDestroy = function () {
188
- if (this.localizationChangeSubscription) {
189
- this.localizationChangeSubscription.unsubscribe();
190
- }
191
- };
192
- /**
193
- * @hidden
194
- */
195
- ChatComponent.prototype.sendClick = function () {
196
- var input = this.messageInput.nativeElement;
197
- var value = input.value;
198
- if (!value) {
199
- return;
200
- }
201
- var message = {
202
- author: this.user,
203
- text: value,
204
- timestamp: new Date()
205
- };
206
- this.sendMessage.emit(new SendMessageEvent(message));
207
- input.value = null;
208
- input.focus();
209
- this.autoScroll = true;
210
- };
211
- /**
212
- * @hidden
213
- */
214
- ChatComponent.prototype.inputKeydown = function (e) {
215
- if (e.keyCode === 13 /* enter */) {
216
- this.sendClick();
217
- }
218
- };
219
- /**
220
- * @hidden
221
- */
222
- ChatComponent.prototype.dispatchAction = function (e) {
223
- this.executeAction.emit(e);
224
- if (!e.isDefaultPrevented()) {
225
- var handler = makeHandler(e.action);
226
- handler(e.action, this);
227
- this.messageInput.nativeElement.focus();
228
- }
229
- };
230
- /**
231
- * @hidden
232
- */
233
- ChatComponent.prototype.textFor = function (key) {
234
- return this.localization.get(key);
235
- };
236
- __decorate([
237
- Input(),
238
- __metadata("design:type", Array)
239
- ], ChatComponent.prototype, "messages", void 0);
240
- __decorate([
241
- Input(),
242
- __metadata("design:type", Object)
243
- ], ChatComponent.prototype, "user", void 0);
244
- __decorate([
245
- Output(),
246
- __metadata("design:type", EventEmitter)
247
- ], ChatComponent.prototype, "sendMessage", void 0);
248
- __decorate([
249
- Output(),
250
- __metadata("design:type", EventEmitter)
251
- ], ChatComponent.prototype, "executeAction", void 0);
252
- __decorate([
253
- HostBinding('class'),
254
- __metadata("design:type", String),
255
- __metadata("design:paramtypes", [])
256
- ], ChatComponent.prototype, "className", null);
257
- __decorate([
258
- HostBinding('attr.dir'),
259
- __metadata("design:type", String),
260
- __metadata("design:paramtypes", [])
261
- ], ChatComponent.prototype, "dirAttr", null);
262
- __decorate([
263
- ContentChild(AttachmentTemplateDirective, { static: false }),
264
- __metadata("design:type", AttachmentTemplateDirective)
265
- ], ChatComponent.prototype, "attachmentTemplate", void 0);
266
- __decorate([
267
- ContentChild(MessageTemplateDirective, { static: false }),
268
- __metadata("design:type", MessageTemplateDirective)
269
- ], ChatComponent.prototype, "messageTemplate", void 0);
270
- __decorate([
271
- ViewChild('messageInput', { static: true }),
272
- __metadata("design:type", ElementRef)
273
- ], ChatComponent.prototype, "messageInput", void 0);
274
- __decorate([
275
- ViewChild('messageList', { static: true }),
276
- __metadata("design:type", ElementRef)
277
- ], ChatComponent.prototype, "messageList", void 0);
278
- ChatComponent = __decorate([
279
- Component({
280
- providers: [
281
- LocalizationService,
282
- {
283
- provide: L10N_PREFIX,
284
- useValue: 'kendo.chat'
285
- }
286
- ],
287
- selector: 'kendo-chat',
288
- template: "\n <ng-container\n kendoChatLocalizedMessages\n i18n-messagePlaceholder=\"kendo.chat.messagePlaceholder|The placholder text of the message text input\"\n messagePlaceholder=\"Type a message...\"\n\n i18n-send=\"kendo.chat.send|The text for the Send button\"\n send=\"Send...\"\n >\n </ng-container>\n\n <div\n #messageList\n class=\"k-message-list k-avatars\"\n aria-live=\"polite\" role=\"log\"\n kendoChatScrollAnchor\n #anchor=\"scrollAnchor\"\n [(autoScroll)]=\"autoScroll\"\n >\n <kendo-chat-message-list\n [messages]=\"messages\"\n [messageTemplate]=\"messageTemplate\"\n [attachmentTemplate]=\"attachmentTemplate\"\n [user]=\"user\"\n (executeAction)=\"dispatchAction($event)\"\n (resize)=\"anchor.scrollToBottom()\"\n (navigate)=\"this.autoScroll = false\"\n >\n </kendo-chat-message-list>\n </div>\n\n <div class=\"k-message-box\">\n <input\n #messageInput\n kendoChatFocusedState\n type=\"text\"\n class=\"k-input\"\n [placeholder]=\"textFor('messagePlaceholder')\"\n (keydown)=\"inputKeydown($event)\"\n >\n <button\n kendoButton\n fillMode=\"flat\"\n class=\"k-button-send\"\n tabindex=\"-1\"\n [attr.title]=\"textFor('send')\"\n (click)=\"sendClick()\"\n >" + sendIcon + "</button>\n </div>\n "
289
- }),
290
- __metadata("design:paramtypes", [LocalizationService,
291
- NgZone])
292
- ], ChatComponent);
293
- return ChatComponent;
294
- }());
295
-
296
- /**
297
- * @hidden
298
- */
299
- var AttachmentComponent = /** @class */ (function () {
300
- function AttachmentComponent() {
301
- }
302
- Object.defineProperty(AttachmentComponent.prototype, "attachment", {
303
- get: function () {
304
- return this._attachment;
305
- },
306
- set: function (value) {
307
- this._attachment = value;
308
- this.context = {
309
- $implicit: this.attachment
310
- };
311
- },
312
- enumerable: true,
313
- configurable: true
314
- });
315
- Object.defineProperty(AttachmentComponent.prototype, "image", {
316
- get: function () {
317
- return this.contentType.indexOf('image/') === 0;
318
- },
319
- enumerable: true,
320
- configurable: true
321
- });
322
- Object.defineProperty(AttachmentComponent.prototype, "unknown", {
323
- get: function () {
324
- return !this.image;
325
- },
326
- enumerable: true,
327
- configurable: true
328
- });
329
- Object.defineProperty(AttachmentComponent.prototype, "contentType", {
330
- get: function () {
331
- return this.attachment.contentType || '';
332
- },
333
- enumerable: true,
334
- configurable: true
335
- });
336
- __decorate([
337
- Input(),
338
- __metadata("design:type", Object),
339
- __metadata("design:paramtypes", [Object])
340
- ], AttachmentComponent.prototype, "attachment", null);
341
- __decorate([
342
- Input(),
343
- __metadata("design:type", AttachmentTemplateDirective)
344
- ], AttachmentComponent.prototype, "template", void 0);
345
- AttachmentComponent = __decorate([
346
- Component({
347
- selector: 'kendo-chat-attachment',
348
- template: "\n <ng-container *ngIf=\"template\">\n <ng-container *ngTemplateOutlet=\"template.templateRef; context: context;\">\n </ng-container>\n </ng-container>\n\n <div *ngIf=\"!template\" class=\"k-card\">\n <div class=\"k-card-body\">\n <h5 class=\"k-card-title\" *ngIf=\"attachment.title\">\n {{ attachment.title }}\n </h5>\n <h6 class=\"k-card-subtitle\" *ngIf=\"attachment.subtitle\">\n {{ attachment.subtitle }}\n </h6>\n <img *ngIf=\"image\" [attr.src]=\"attachment.content\" />\n <ng-container *ngIf=\"unknown\">\n {{ attachment.content }}\n </ng-container>\n </div>\n </div>\n "
349
- })
350
- ], AttachmentComponent);
351
- return AttachmentComponent;
352
- }());
353
-
354
- /**
355
- * @hidden
356
- */
357
- var Messages = /** @class */ (function (_super) {
358
- __extends(Messages, _super);
359
- function Messages() {
360
- return _super !== null && _super.apply(this, arguments) || this;
361
- }
362
- __decorate([
363
- Input(),
364
- __metadata("design:type", String)
365
- ], Messages.prototype, "messagePlaceholder", void 0);
366
- __decorate([
367
- Input(),
368
- __metadata("design:type", String)
369
- ], Messages.prototype, "send", void 0);
370
- return Messages;
371
- }(ComponentMessages));
372
-
373
- // tslint:disable:no-forward-ref
374
- /**
375
- * Custom component messages override default component messages
376
- * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
377
- */
378
- var CustomMessagesComponent = /** @class */ (function (_super) {
379
- __extends(CustomMessagesComponent, _super);
380
- function CustomMessagesComponent(service) {
381
- var _this = _super.call(this) || this;
382
- _this.service = service;
383
- return _this;
384
- }
385
- CustomMessagesComponent_1 = CustomMessagesComponent;
386
- Object.defineProperty(CustomMessagesComponent.prototype, "override", {
387
- get: function () {
388
- return true;
389
- },
390
- enumerable: true,
391
- configurable: true
392
- });
393
- var CustomMessagesComponent_1;
394
- CustomMessagesComponent = CustomMessagesComponent_1 = __decorate([
395
- Component({
396
- providers: [
397
- {
398
- provide: Messages,
399
- useExisting: forwardRef(function () { return CustomMessagesComponent_1; })
400
- }
401
- ],
402
- selector: 'kendo-chat-messages',
403
- template: ""
404
- }),
405
- __metadata("design:paramtypes", [LocalizationService])
406
- ], CustomMessagesComponent);
407
- return CustomMessagesComponent;
408
- }(Messages));
409
-
410
- /**
411
- * @hidden
412
- */
413
- var FocusedStateDirective = /** @class */ (function () {
414
- function FocusedStateDirective() {
415
- this.focused = false;
416
- }
417
- FocusedStateDirective.prototype.onFocus = function () {
418
- this.focused = true;
419
- };
420
- FocusedStateDirective.prototype.onBlur = function () {
421
- this.focused = false;
422
- };
423
- __decorate([
424
- HostBinding('class.k-state-focused'),
425
- __metadata("design:type", Boolean)
426
- ], FocusedStateDirective.prototype, "focused", void 0);
427
- __decorate([
428
- HostListener('focusin'),
429
- __metadata("design:type", Function),
430
- __metadata("design:paramtypes", []),
431
- __metadata("design:returntype", void 0)
432
- ], FocusedStateDirective.prototype, "onFocus", null);
433
- __decorate([
434
- HostListener('focusout'),
435
- __metadata("design:type", Function),
436
- __metadata("design:paramtypes", []),
437
- __metadata("design:returntype", void 0)
438
- ], FocusedStateDirective.prototype, "onBlur", null);
439
- FocusedStateDirective = __decorate([
440
- Directive({
441
- selector: '[kendoChatFocusedState]'
442
- })
443
- ], FocusedStateDirective);
444
- return FocusedStateDirective;
445
- }());
446
-
447
- /**
448
- * Represents a Hero Card component ([see example]({% slug dialogflow_chat %})).
449
- * Hero cards host a single large image and action buttons with text content.
450
- */
451
- var HeroCardComponent = /** @class */ (function () {
452
- function HeroCardComponent() {
453
- this.cssClass = true;
454
- /**
455
- * Fires when the user clicks a button.
456
- */
457
- this.executeAction = new EventEmitter();
458
- }
459
- HeroCardComponent.prototype.onClick = function (action) {
460
- this.executeAction.next(action);
461
- };
462
- __decorate([
463
- Input(),
464
- __metadata("design:type", String)
465
- ], HeroCardComponent.prototype, "imageUrl", void 0);
466
- __decorate([
467
- Input(),
468
- __metadata("design:type", String)
469
- ], HeroCardComponent.prototype, "title", void 0);
470
- __decorate([
471
- Input(),
472
- __metadata("design:type", String)
473
- ], HeroCardComponent.prototype, "subtitle", void 0);
474
- __decorate([
475
- Input(),
476
- __metadata("design:type", Array)
477
- ], HeroCardComponent.prototype, "actions", void 0);
478
- __decorate([
479
- HostBinding('class.k-card'),
480
- __metadata("design:type", Boolean)
481
- ], HeroCardComponent.prototype, "cssClass", void 0);
482
- __decorate([
483
- Output(),
484
- __metadata("design:type", EventEmitter)
485
- ], HeroCardComponent.prototype, "executeAction", void 0);
486
- HeroCardComponent = __decorate([
487
- Component({
488
- selector: 'kendo-chat-hero-card',
489
- template: "\n <img class=\"k-card-image\" [src]=\"imageUrl\" *ngIf=\"imageUrl\" />\n <div class=\"k-card-body\">\n <h5 class=\"k-card-title\" *ngIf=\"title\">\n {{ title }}\n </h5>\n <h6 class=\"k-card-subtitle\" *ngIf=\"subtitle\">\n {{ subtitle }}\n </h6>\n </div>\n <div class=\"k-card-actions k-card-actions-vertical\">\n <span class=\"k-card-action\"\n *ngFor=\"let act of actions\"\n >\n <button\n kendoButton fillMode=\"flat\"\n (click)=\"onClick(act)\">\n {{ act.title }}\n </button>\n </span>\n </div>\n "
490
- })
491
- ], HeroCardComponent);
492
- return HeroCardComponent;
493
- }());
494
-
495
- // tslint:disable:no-forward-ref
496
- /**
497
- * @hidden
498
- */
499
- var LocalizedMessagesDirective = /** @class */ (function (_super) {
500
- __extends(LocalizedMessagesDirective, _super);
501
- function LocalizedMessagesDirective(service) {
502
- var _this = _super.call(this) || this;
503
- _this.service = service;
504
- return _this;
505
- }
506
- LocalizedMessagesDirective_1 = LocalizedMessagesDirective;
507
- var LocalizedMessagesDirective_1;
508
- LocalizedMessagesDirective = LocalizedMessagesDirective_1 = __decorate([
509
- Directive({
510
- providers: [
511
- {
512
- provide: Messages,
513
- useExisting: forwardRef(function () { return LocalizedMessagesDirective_1; })
514
- }
515
- ],
516
- selector: '[kendoChatLocalizedMessages]'
517
- }),
518
- __metadata("design:paramtypes", [LocalizationService])
519
- ], LocalizedMessagesDirective);
520
- return LocalizedMessagesDirective;
521
- }(Messages));
522
-
523
- /**
524
- * @hidden
525
- */
526
- var ChatItem = /** @class */ (function () {
527
- function ChatItem() {
528
- }
529
- return ChatItem;
530
- }());
531
-
532
- // tslint:disable:no-forward-ref
533
- /**
534
- * @hidden
535
- */
536
- var MessageAttachmentsComponent = /** @class */ (function (_super) {
537
- __extends(MessageAttachmentsComponent, _super);
538
- function MessageAttachmentsComponent(zone) {
539
- var _a, _b;
540
- var _this = _super.call(this) || this;
541
- _this.zone = zone;
542
- _this.scrollPosition = 0;
543
- _this.selectedIndex = 0;
544
- _this.carouselKeyHandlers = (_a = {},
545
- _a[37 /* left */] = function (e) { return _this.navigateTo(e, -1); },
546
- _a[39 /* right */] = function (e) { return _this.navigateTo(e, 1); },
547
- _a);
548
- _this.listKeyHandlers = (_b = {},
549
- _b[38 /* up */] = function (e) { return _this.navigateTo(e, -1); },
550
- _b[40 /* down */] = function (e) { return _this.navigateTo(e, 1); },
551
- _b);
552
- return _this;
553
- }
554
- MessageAttachmentsComponent_1 = MessageAttachmentsComponent;
555
- Object.defineProperty(MessageAttachmentsComponent.prototype, "carousel", {
556
- get: function () {
557
- return this.layout !== 'list';
558
- },
559
- enumerable: true,
560
- configurable: true
561
- });
562
- MessageAttachmentsComponent.prototype.ngAfterViewInit = function () {
563
- var _this = this;
564
- this.zone.runOutsideAngular(function () {
565
- var scrollDebounceTime = 100;
566
- _this.scrollSubscription = fromEvent(_this.deck.nativeElement, 'scroll')
567
- .pipe(debounceTime(scrollDebounceTime))
568
- .subscribe(function () { return _this.onScroll(); });
569
- });
570
- };
571
- MessageAttachmentsComponent.prototype.ngOnDestroy = function () {
572
- this.scrollSubscription.unsubscribe();
573
- };
574
- MessageAttachmentsComponent.prototype.isSelected = function (index) {
575
- return this.selectedIndex === index;
576
- };
577
- MessageAttachmentsComponent.prototype.itemKeydown = function (e, attachment) {
578
- var keyHandlers = this.layout === 'list' ?
579
- this.listKeyHandlers : this.carouselKeyHandlers;
580
- var handler = keyHandlers[e.keyCode];
581
- if (handler) {
582
- handler(e, attachment);
583
- }
584
- };
585
- MessageAttachmentsComponent.prototype.itemClick = function (index) {
586
- this.select(index);
587
- };
588
- MessageAttachmentsComponent.prototype.focus = function () {
589
- this.select(this.selectedIndex);
590
- };
591
- MessageAttachmentsComponent.prototype.scrollTo = function (dir) {
592
- var el = this.deck.nativeElement;
593
- var scrollStep = el.scrollWidth / this.items.length;
594
- var max = el.scrollWidth - el.offsetWidth;
595
- var pos = el.scrollLeft + scrollStep * dir;
596
- el.scrollLeft = Math.max(0, Math.min(max, pos));
597
- };
598
- MessageAttachmentsComponent.prototype.select = function (index) {
599
- this.selectedIndex = index;
600
- var item = this.items.toArray()[index];
601
- if (item) {
602
- item.nativeElement.focus();
603
- }
604
- };
605
- MessageAttachmentsComponent.prototype.navigateTo = function (e, offset) {
606
- var prevIndex = this.selectedIndex;
607
- var nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
608
- if (nextIndex !== prevIndex) {
609
- this.select(nextIndex);
610
- e.preventDefault();
611
- }
612
- };
613
- MessageAttachmentsComponent.prototype.onScroll = function () {
614
- var _this = this;
615
- var el = this.deck.nativeElement;
616
- if (el.scrollWidth === 0) {
617
- return;
618
- }
619
- var pos = el.scrollLeft / (el.scrollWidth - el.offsetWidth);
620
- if (pos !== this.scrollPosition) {
621
- this.zone.run(function () {
622
- _this.scrollPosition = pos;
623
- });
624
- }
625
- };
626
- var MessageAttachmentsComponent_1;
627
- __decorate([
628
- Input(),
629
- __metadata("design:type", Array)
630
- ], MessageAttachmentsComponent.prototype, "attachments", void 0);
631
- __decorate([
632
- Input(),
633
- __metadata("design:type", String)
634
- ], MessageAttachmentsComponent.prototype, "layout", void 0);
635
- __decorate([
636
- Input(),
637
- __metadata("design:type", Boolean)
638
- ], MessageAttachmentsComponent.prototype, "tabbable", void 0);
639
- __decorate([
640
- Input(),
641
- __metadata("design:type", AttachmentTemplateDirective)
642
- ], MessageAttachmentsComponent.prototype, "template", void 0);
643
- __decorate([
644
- HostBinding('class.k-card-deck-scrollwrap'),
645
- __metadata("design:type", Boolean),
646
- __metadata("design:paramtypes", [])
647
- ], MessageAttachmentsComponent.prototype, "carousel", null);
648
- __decorate([
649
- ViewChild('deck', { read: ElementRef, static: true }),
650
- __metadata("design:type", ElementRef)
651
- ], MessageAttachmentsComponent.prototype, "deck", void 0);
652
- __decorate([
653
- ViewChildren('item', { read: ElementRef }),
654
- __metadata("design:type", QueryList)
655
- ], MessageAttachmentsComponent.prototype, "items", void 0);
656
- MessageAttachmentsComponent = MessageAttachmentsComponent_1 = __decorate([
657
- Component({
658
- providers: [{
659
- provide: ChatItem,
660
- useExisting: forwardRef(function () { return MessageAttachmentsComponent_1; })
661
- }],
662
- selector: 'kendo-chat-message-attachments',
663
- template: "\n <button\n *ngIf=\"carousel && scrollPosition > 0\"\n (click)=\"scrollTo(-1)\"\n class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n tabindex=\"-1\">\n <span class=\"k-icon k-button-icon k-i-arrow-chevron-left\"></span>\n </button>\n <div #deck [class.k-card-deck]=\"carousel\">\n <kendo-chat-attachment #item\n *ngFor=\"let att of attachments; index as index; first as first; last as last\"\n [attachment]=\"att\"\n [template]=\"template\"\n [class.k-state-selected]=\"isSelected(index)\"\n [class.k-state-focused]=\"isSelected(index)\"\n [class.k-card-wrap]=\"true\"\n [class.k-first]=\"first\"\n [class.k-last]=\"last\"\n [attr.tabindex]=\"tabbable && isSelected(index) ? '0' : '-1'\"\n (click)=\"itemClick(index)\"\n (keydown)=\"itemKeydown($event, att)\"\n >\n </kendo-chat-attachment>\n </div>\n <button\n *ngIf=\"carousel && scrollPosition < 1\"\n (click)=\"scrollTo(1)\"\n class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n tabindex=\"-1\">\n <span class=\"k-icon k-button-icon k-i-arrow-chevron-right\"></span>\n </button>\n "
664
- }),
665
- __metadata("design:paramtypes", [NgZone])
666
- ], MessageAttachmentsComponent);
667
- return MessageAttachmentsComponent;
668
- }(ChatItem));
669
-
670
- // tslint:disable:no-forward-ref
671
- /**
672
- * @hidden
673
- */
674
- var MessageComponent = /** @class */ (function (_super) {
675
- __extends(MessageComponent, _super);
676
- function MessageComponent(element, intl) {
677
- var _this = _super.call(this) || this;
678
- _this.element = element;
679
- _this.intl = intl;
680
- _this.cssClass = true;
681
- return _this;
682
- }
683
- MessageComponent_1 = MessageComponent;
684
- Object.defineProperty(MessageComponent.prototype, "tabIndex", {
685
- get: function () {
686
- return this.tabbable ? '0' : '-1';
687
- },
688
- enumerable: true,
689
- configurable: true
690
- });
691
- MessageComponent.prototype.formatTimeStamp = function (date) {
692
- return this.intl.formatDate(date, { datetime: 'short' });
693
- };
694
- MessageComponent.prototype.focus = function () {
695
- this.element.nativeElement.focus();
696
- };
697
- var MessageComponent_1;
698
- __decorate([
699
- Input(),
700
- __metadata("design:type", Object)
701
- ], MessageComponent.prototype, "message", void 0);
702
- __decorate([
703
- Input(),
704
- __metadata("design:type", Boolean)
705
- ], MessageComponent.prototype, "tabbable", void 0);
706
- __decorate([
707
- Input(),
708
- __metadata("design:type", MessageTemplateDirective)
709
- ], MessageComponent.prototype, "template", void 0);
710
- __decorate([
711
- HostBinding('class.k-message'),
712
- __metadata("design:type", Boolean)
713
- ], MessageComponent.prototype, "cssClass", void 0);
714
- __decorate([
715
- HostBinding('class.k-state-selected'),
716
- HostBinding('class.k-state-focused'),
717
- __metadata("design:type", Boolean)
718
- ], MessageComponent.prototype, "selected", void 0);
719
- __decorate([
720
- HostBinding('attr.tabIndex'),
721
- __metadata("design:type", String),
722
- __metadata("design:paramtypes", [])
723
- ], MessageComponent.prototype, "tabIndex", null);
724
- MessageComponent = MessageComponent_1 = __decorate([
725
- Component({
726
- selector: 'kendo-chat-message',
727
- providers: [{
728
- provide: ChatItem,
729
- useExisting: forwardRef(function () { return MessageComponent_1; })
730
- }],
731
- template: "\n <time\n [attr.aria-hidden]=\"!selected\"\n class=\"k-message-time\"\n *ngIf=\"message.timestamp\"\n >\n {{ formatTimeStamp(message.timestamp) }}\n </time>\n\n <ng-container *ngIf=\"!message.typing; else typing\">\n <div class=\"k-bubble\" *ngIf=\"template\">\n <ng-container\n *ngTemplateOutlet=\"template.templateRef; context: { $implicit: message };\"\n >\n </ng-container>\n </div>\n\n <div class=\"k-bubble\" *ngIf=\"!template && message.text\">\n {{message.text}}\n </div>\n </ng-container>\n\n <span\n class=\"k-message-status\"\n *ngIf=\"message.status\"\n >\n {{ message.status }}\n </span>\n\n <ng-template #typing>\n <div class=\"k-bubble\">\n <div class=\"k-typing-indicator\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n </div>\n </ng-template>\n "
732
- }),
733
- __metadata("design:paramtypes", [ElementRef, IntlService])
734
- ], MessageComponent);
735
- return MessageComponent;
736
- }(ChatItem));
737
-
738
- /**
739
- * @hidden
740
- */
741
- var PreventableEvent = /** @class */ (function () {
742
- function PreventableEvent() {
743
- this.prevented = false;
744
- }
745
- /**
746
- * Prevents the default action for a specified event.
747
- * In this way, the source component suppresses
748
- * the built-in behavior that follows the event.
749
- */
750
- PreventableEvent.prototype.preventDefault = function () {
751
- this.prevented = true;
752
- };
753
- /**
754
- * Returns `true` if the event was prevented
755
- * by any of its subscribers.
756
- *
757
- * @returns `true` if the default action was prevented.
758
- * Otherwise, returns `false`.
759
- */
760
- PreventableEvent.prototype.isDefaultPrevented = function () {
761
- return this.prevented;
762
- };
763
- return PreventableEvent;
764
- }());
765
-
766
- /**
767
- * Arguments for the `executeAction` event. The `executeAction` event fires when the user clicks
768
- * a quick action button. Calling `preventDefault()` suppresses the built-in action handler.
769
- */
770
- var ExecuteActionEvent = /** @class */ (function (_super) {
771
- __extends(ExecuteActionEvent, _super);
772
- /**
773
- * @hidden
774
- */
775
- function ExecuteActionEvent(action, message) {
776
- var _this = _super.call(this) || this;
777
- _this.action = action;
778
- _this.message = message;
779
- return _this;
780
- }
781
- return ExecuteActionEvent;
782
- }(PreventableEvent));
783
-
784
- /**
785
- * @hidden
786
- */
787
- var closest = function (node, predicate) {
788
- while (node && !predicate(node)) {
789
- node = node.parentNode;
790
- }
791
- return node;
792
- };
793
-
794
- /**
795
- * @hidden
796
- */
797
- var isAuthor = function (user, msg) {
798
- return user && msg.author && user.id === msg.author.id;
799
- };
800
- var last = function (arr) { return arr[arr.length - 1]; };
801
- var dateChanged = function (curr, prev) {
802
- return (curr && prev) && (prev.getDate() !== curr.getDate() ||
803
- prev.getMonth() !== curr.getMonth() ||
804
- prev.getFullYear() !== curr.getFullYear());
805
- };
806
- var addDateMarker = function (acc, msg) {
807
- var timestamp = msg.timestamp;
808
- var lastItem = last(acc);
809
- if (!timestamp) {
810
- return;
811
- }
812
- if (!lastItem || dateChanged(timestamp, lastItem.timestamp)) {
813
- var dateMarker = {
814
- type: 'date-marker',
815
- timestamp: timestamp,
816
- trackBy: timestamp.getTime()
817
- };
818
- acc.push(dateMarker);
819
- }
820
- };
821
- var groupMessages = function (acc, msg, isLastMessage) {
822
- var lastItem = last(acc);
823
- var messages;
824
- if (isDevMode() && !msg.author) {
825
- throw new Error('Author must be set for message: ' + JSON.stringify(msg));
826
- }
827
- if (msg.typing && !isLastMessage) {
828
- return;
829
- }
830
- if (lastItem && lastItem.type === 'message-group') {
831
- messages = lastItem.messages;
832
- }
833
- if (messages && isAuthor(msg.author, last(messages))) {
834
- messages.push(msg);
835
- }
836
- else {
837
- acc.push({
838
- type: 'message-group',
839
- messages: [msg],
840
- author: msg.author,
841
- timestamp: msg.timestamp,
842
- trackBy: msg
843
- });
844
- }
845
- };
846
- var groupItems = function (total) { return function (acc, msg, index) {
847
- var isLastMessage = index === total - 1;
848
- addDateMarker(acc, msg);
849
- groupMessages(acc, msg, isLastMessage);
850
- if (msg.attachments && msg.attachments.length > 1) {
851
- acc.push({
852
- type: 'attachment-group',
853
- attachments: msg.attachments,
854
- attachmentLayout: msg.attachmentLayout,
855
- timestamp: msg.timestamp,
856
- trackBy: msg
857
- });
858
- }
859
- if (msg.suggestedActions && isLastMessage) {
860
- acc.push({
861
- type: 'action-group',
862
- actions: msg.suggestedActions,
863
- timestamp: msg.timestamp,
864
- trackBy: msg
865
- });
866
- }
867
- return acc;
868
- }; };
869
- /**
870
- * @hidden
871
- */
872
- var chatView = function (messages) {
873
- return messages.reduce(groupItems(messages.length), []);
874
- };
875
-
876
- /**
877
- * @hidden
878
- */
879
- var MessageListComponent = /** @class */ (function () {
880
- function MessageListComponent(element, intl) {
881
- var _this = this;
882
- var _a;
883
- this.element = element;
884
- this.intl = intl;
885
- this.executeAction = new EventEmitter();
886
- this.navigate = new EventEmitter();
887
- this.resize = new EventEmitter();
888
- this.cssClass = true;
889
- this.view = [];
890
- this.keyActions = (_a = {},
891
- _a[38 /* up */] = function (e) { return _this.navigateTo(e, -1); },
892
- _a[40 /* down */] = function (e) { return _this.navigateTo(e, 1); },
893
- _a);
894
- }
895
- Object.defineProperty(MessageListComponent.prototype, "messages", {
896
- get: function () {
897
- return this._messages;
898
- },
899
- set: function (value) {
900
- var data = value || [];
901
- this.view = chatView(data);
902
- this._messages = data;
903
- },
904
- enumerable: true,
905
- configurable: true
906
- });
907
- MessageListComponent.prototype.ngAfterViewInit = function () {
908
- this.selectedItem = this.items.last;
909
- };
910
- MessageListComponent.prototype.onResize = function () {
911
- this.resize.emit();
912
- };
913
- MessageListComponent.prototype.formatTimeStamp = function (date) {
914
- return this.intl.formatDate(date, { date: 'full' });
915
- };
916
- MessageListComponent.prototype.onKeydown = function (e) {
917
- var action = this.keyActions[e.keyCode];
918
- if (action) {
919
- action(e);
920
- }
921
- };
922
- MessageListComponent.prototype.onBlur = function (args) {
923
- var _this = this;
924
- var next = args.relatedTarget || document.activeElement;
925
- var outside = !closest(next, function (node) { return node === _this.element.nativeElement; });
926
- if (outside) {
927
- this.select(null);
928
- }
929
- };
930
- MessageListComponent.prototype.isOwnMessage = function (msg) {
931
- return isAuthor(this.user, msg);
932
- };
933
- MessageListComponent.prototype.dispatchAction = function (action, message) {
934
- var args = new ExecuteActionEvent(action, message);
935
- this.executeAction.emit(args);
936
- };
937
- MessageListComponent.prototype.trackGroup = function (_index, item) {
938
- return item.trackBy;
939
- };
940
- MessageListComponent.prototype.select = function (item) {
941
- var prevItem = this.selectedItem;
942
- if (prevItem) {
943
- prevItem.selected = false;
944
- }
945
- if (item) {
946
- item.selected = true;
947
- this.selectedItem = item;
948
- }
949
- };
950
- MessageListComponent.prototype.last = function (items) {
951
- if (!items || items.length === 0) {
952
- return;
953
- }
954
- return items[items.length - 1];
955
- };
956
- MessageListComponent.prototype.navigateTo = function (e, offset) {
957
- var items = this.items.toArray();
958
- var prevItem = this.selectedItem;
959
- var prevIndex = items.indexOf(prevItem);
960
- var nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
961
- var nextItem = items[nextIndex];
962
- if (nextItem !== prevItem) {
963
- this.select(nextItem);
964
- nextItem.focus();
965
- this.navigate.emit();
966
- e.preventDefault();
967
- }
968
- };
969
- __decorate([
970
- Input(),
971
- __metadata("design:type", Array),
972
- __metadata("design:paramtypes", [Array])
973
- ], MessageListComponent.prototype, "messages", null);
974
- __decorate([
975
- Input(),
976
- __metadata("design:type", AttachmentTemplateDirective)
977
- ], MessageListComponent.prototype, "attachmentTemplate", void 0);
978
- __decorate([
979
- Input(),
980
- __metadata("design:type", MessageTemplateDirective)
981
- ], MessageListComponent.prototype, "messageTemplate", void 0);
982
- __decorate([
983
- Input(),
984
- __metadata("design:type", Object)
985
- ], MessageListComponent.prototype, "user", void 0);
986
- __decorate([
987
- Output(),
988
- __metadata("design:type", EventEmitter)
989
- ], MessageListComponent.prototype, "executeAction", void 0);
990
- __decorate([
991
- Output(),
992
- __metadata("design:type", EventEmitter)
993
- ], MessageListComponent.prototype, "navigate", void 0);
994
- __decorate([
995
- Output(),
996
- __metadata("design:type", EventEmitter)
997
- ], MessageListComponent.prototype, "resize", void 0);
998
- __decorate([
999
- ViewChildren(ChatItem),
1000
- __metadata("design:type", QueryList)
1001
- ], MessageListComponent.prototype, "items", void 0);
1002
- __decorate([
1003
- HostBinding('class.k-message-list-content'),
1004
- __metadata("design:type", Boolean)
1005
- ], MessageListComponent.prototype, "cssClass", void 0);
1006
- __decorate([
1007
- HostListener('keydown', ['$event']),
1008
- __metadata("design:type", Function),
1009
- __metadata("design:paramtypes", [Object]),
1010
- __metadata("design:returntype", void 0)
1011
- ], MessageListComponent.prototype, "onKeydown", null);
1012
- __decorate([
1013
- HostListener('focusout', ['$event']),
1014
- __metadata("design:type", Function),
1015
- __metadata("design:paramtypes", [FocusEvent]),
1016
- __metadata("design:returntype", void 0)
1017
- ], MessageListComponent.prototype, "onBlur", null);
1018
- MessageListComponent = __decorate([
1019
- Component({
1020
- selector: 'kendo-chat-message-list',
1021
- template: "\n <ng-container *ngFor=\"let group of view; last as lastGroup; trackBy: trackGroup\">\n <ng-container [ngSwitch]=\"group.type\">\n <div\n *ngSwitchCase=\"'date-marker'\"\n class=\"k-timestamp\"\n >\n {{ formatTimeStamp(group.timestamp) }}\n </div>\n <div\n *ngSwitchCase=\"'message-group'\"\n class=\"k-message-group\"\n [class.k-alt]=\"isOwnMessage(group.messages[0])\"\n [class.k-no-avatar]=\"!group.author.avatarUrl\"\n >\n <img\n *ngIf=\"group.author.avatarUrl\"\n [attr.src]=\"group.author.avatarUrl\"\n class=\"k-avatar\"\n />\n <p *ngIf=\"group.author.name\" class=\"k-author\">{{ group.author.name }}</p>\n <ng-container\n *ngFor=\"let msg of group.messages; first as firstMessage; last as lastMessage\"\n >\n <img *ngIf=\"msg.user?.avatarUrl\" [src]=\"msg.user?.avatarUrl\" class=\"k-avatar\">\n <kendo-chat-message #message\n [message]=\"msg\"\n [tabbable]=\"lastGroup && lastMessage\"\n [template]=\"messageTemplate\"\n (click)=\"select(message)\"\n (focus)=\"select(message)\"\n [class.k-only]=\"group.messages.length === 1\"\n [class.k-first]=\"group.messages.length > 1 && firstMessage\"\n [class.k-last]=\"group.messages.length > 1 && lastMessage\"\n >\n </kendo-chat-message>\n\n <kendo-chat-attachment\n *ngIf=\"msg.attachments && msg.attachments.length === 1\"\n [attachment]=\"msg.attachments[0]\"\n [template]=\"attachmentTemplate\"\n >\n </kendo-chat-attachment>\n </ng-container>\n </div>\n\n <kendo-chat-message-attachments #attachments\n *ngSwitchCase=\"'attachment-group'\"\n [attachments]=\"group.attachments\"\n [layout]=\"group.attachmentLayout\"\n [tabbable]=\"lastGroup\"\n [template]=\"attachmentTemplate\"\n (click)=\"select(attachments)\"\n (focus)=\"select(attachments)\"\n >\n </kendo-chat-message-attachments>\n\n <kendo-chat-suggested-actions #actions\n *ngSwitchCase=\"'action-group'\"\n [actions]=\"group.actions\"\n [tabbable]=\"lastGroup\"\n (dispatch)=\"dispatchAction($event, last(group.messages))\"\n (click)=\"select(actions)\"\n (focus)=\"select(actions)\"\n >\n </kendo-chat-suggested-actions>\n </ng-container>\n </ng-container>\n <kendo-resize-sensor (resize)=\"onResize()\">\n </kendo-resize-sensor>\n "
1022
- }),
1023
- __metadata("design:paramtypes", [ElementRef, IntlService])
1024
- ], MessageListComponent);
1025
- return MessageListComponent;
1026
- }());
1027
-
1028
- // Consider scroll to be at the bottom when within this number of pixels from the container height.
1029
- var maxDelta = 2;
1030
- /**
1031
- * @hidden
1032
- */
1033
- var ScrollAnchorDirective = /** @class */ (function () {
1034
- function ScrollAnchorDirective(element, zone, renderer) {
1035
- this.element = element;
1036
- this.zone = zone;
1037
- this.renderer = renderer;
1038
- this.autoScroll = true;
1039
- this.autoScrollChange = new EventEmitter();
1040
- this.overflowAnchor = 'none';
1041
- this.scrolling = false;
1042
- }
1043
- ScrollAnchorDirective.prototype.ngOnInit = function () {
1044
- var _this = this;
1045
- this.zone.runOutsideAngular(function () {
1046
- _this.unsubscribe = _this.renderer.listen(_this.element.nativeElement, 'scroll', function () { return _this.onScroll(); });
1047
- });
1048
- };
1049
- ScrollAnchorDirective.prototype.ngAfterViewInit = function () {
1050
- this.scrollToBottom();
1051
- };
1052
- ScrollAnchorDirective.prototype.ngOnDestroy = function () {
1053
- if (this.unsubscribe) {
1054
- this.unsubscribe();
1055
- }
1056
- };
1057
- ScrollAnchorDirective.prototype.onScroll = function () {
1058
- var _this = this;
1059
- if (this.scrolling) {
1060
- return;
1061
- }
1062
- var el = this.element.nativeElement;
1063
- var bottom = el.scrollTop + el.offsetHeight;
1064
- var height = el.scrollHeight;
1065
- var atBottom = height - bottom < maxDelta;
1066
- if (this.autoScroll !== atBottom) {
1067
- this.zone.run(function () {
1068
- _this.autoScroll = atBottom;
1069
- _this.autoScrollChange.emit(_this.autoScroll);
1070
- });
1071
- }
1072
- };
1073
- ScrollAnchorDirective.prototype.scrollToBottom = function () {
1074
- var _this = this;
1075
- if (!this.autoScroll) {
1076
- return;
1077
- }
1078
- var el = this.element.nativeElement;
1079
- el.scrollTop = el.scrollHeight - el.clientHeight;
1080
- this.scrolling = true;
1081
- this.zone.runOutsideAngular(function () {
1082
- return setTimeout(function () { return _this.scrolling = false; }, 1000);
1083
- });
1084
- };
1085
- __decorate([
1086
- Input(),
1087
- __metadata("design:type", Boolean)
1088
- ], ScrollAnchorDirective.prototype, "autoScroll", void 0);
1089
- __decorate([
1090
- Output(),
1091
- __metadata("design:type", EventEmitter)
1092
- ], ScrollAnchorDirective.prototype, "autoScrollChange", void 0);
1093
- __decorate([
1094
- HostBinding('style.overflow-anchor'),
1095
- __metadata("design:type", String)
1096
- ], ScrollAnchorDirective.prototype, "overflowAnchor", void 0);
1097
- ScrollAnchorDirective = __decorate([
1098
- Directive({
1099
- selector: '[kendoChatScrollAnchor]',
1100
- exportAs: 'scrollAnchor'
1101
- }),
1102
- __metadata("design:paramtypes", [ElementRef,
1103
- NgZone,
1104
- Renderer2])
1105
- ], ScrollAnchorDirective);
1106
- return ScrollAnchorDirective;
1107
- }());
1108
-
1109
- // tslint:disable:no-forward-ref
1110
- /**
1111
- * @hidden
1112
- */
1113
- var SuggestedActionsComponent = /** @class */ (function (_super) {
1114
- __extends(SuggestedActionsComponent, _super);
1115
- function SuggestedActionsComponent() {
1116
- var _a;
1117
- var _this = _super !== null && _super.apply(this, arguments) || this;
1118
- _this.dispatch = new EventEmitter();
1119
- _this.defaultClass = true;
1120
- _this.selectedIndex = 0;
1121
- _this.keyHandlers = (_a = {},
1122
- _a[37 /* left */] = function (e) { return _this.navigateTo(e, -1); },
1123
- _a[39 /* right */] = function (e) { return _this.navigateTo(e, 1); },
1124
- _a[13 /* enter */] = function (_, action) { return _this.actionClick(action); },
1125
- _a);
1126
- return _this;
1127
- }
1128
- SuggestedActionsComponent_1 = SuggestedActionsComponent;
1129
- SuggestedActionsComponent.prototype.isSelected = function (index) {
1130
- return this.selected && this.selectedIndex === index;
1131
- };
1132
- SuggestedActionsComponent.prototype.actionClick = function (action) {
1133
- this.dispatch.next(action);
1134
- };
1135
- SuggestedActionsComponent.prototype.actionKeydown = function (e, action) {
1136
- var handler = this.keyHandlers[e.keyCode];
1137
- if (handler) {
1138
- handler(e, action);
1139
- }
1140
- };
1141
- SuggestedActionsComponent.prototype.focus = function () {
1142
- this.select(this.selectedIndex);
1143
- };
1144
- SuggestedActionsComponent.prototype.select = function (index) {
1145
- this.selectedIndex = index;
1146
- var item = this.items.toArray()[index];
1147
- if (item) {
1148
- item.nativeElement.focus();
1149
- }
1150
- };
1151
- SuggestedActionsComponent.prototype.navigateTo = function (e, offset) {
1152
- var prevIndex = this.selectedIndex;
1153
- var nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
1154
- if (nextIndex !== prevIndex) {
1155
- this.select(nextIndex);
1156
- e.preventDefault();
1157
- }
1158
- };
1159
- var SuggestedActionsComponent_1;
1160
- __decorate([
1161
- Input(),
1162
- __metadata("design:type", Array)
1163
- ], SuggestedActionsComponent.prototype, "actions", void 0);
1164
- __decorate([
1165
- Input(),
1166
- __metadata("design:type", Boolean)
1167
- ], SuggestedActionsComponent.prototype, "tabbable", void 0);
1168
- __decorate([
1169
- Output(),
1170
- __metadata("design:type", EventEmitter)
1171
- ], SuggestedActionsComponent.prototype, "dispatch", void 0);
1172
- __decorate([
1173
- HostBinding('class.k-quick-replies'),
1174
- __metadata("design:type", Boolean)
1175
- ], SuggestedActionsComponent.prototype, "defaultClass", void 0);
1176
- __decorate([
1177
- ViewChildren('item'),
1178
- __metadata("design:type", QueryList)
1179
- ], SuggestedActionsComponent.prototype, "items", void 0);
1180
- SuggestedActionsComponent = SuggestedActionsComponent_1 = __decorate([
1181
- Component({
1182
- selector: 'kendo-chat-suggested-actions',
1183
- providers: [{
1184
- provide: ChatItem,
1185
- useExisting: forwardRef(function () { return SuggestedActionsComponent_1; })
1186
- }],
1187
- template: "\n <span #item\n *ngFor=\"let action of actions; index as index; first as first; last as last\"\n class=\"k-quick-reply\"\n [class.k-state-selected]=\"isSelected(index)\"\n [class.k-state-focused]=\"isSelected(index)\"\n [class.k-first]=\"first\"\n [class.k-last]=\"last\"\n [attr.tabindex]=\"tabbable && selectedIndex === index ? '0' : '-1'\"\n (click)=\"actionClick(action)\"\n (keydown)=\"actionKeydown($event, action)\"\n >\n {{ action.title || action.value }}\n </span>\n "
1188
- })
1189
- ], SuggestedActionsComponent);
1190
- return SuggestedActionsComponent;
1191
- }(ChatItem));
1192
-
1193
- var PUBLIC_DIRECTIVES = [
1194
- ChatComponent,
1195
- CustomMessagesComponent,
1196
- AttachmentTemplateDirective,
1197
- MessageTemplateDirective,
1198
- HeroCardComponent
1199
- ];
1200
- var PRIVATE_DIRECTIVES = [
1201
- AttachmentComponent,
1202
- FocusedStateDirective,
1203
- LocalizedMessagesDirective,
1204
- MessageAttachmentsComponent,
1205
- MessageComponent,
1206
- MessageListComponent,
1207
- MessageTemplateDirective,
1208
- ScrollAnchorDirective,
1209
- SuggestedActionsComponent
1210
- ];
1211
- /**
1212
- * The [NgModule]({{ site.data.urls.angular['ngmodules'] }}) for the Chat component.
1213
- *
1214
- * @example
1215
- * ```ts-no-run
1216
- * import { NgModule } from '@angular/core';
1217
- * import { Component } from '@angular/core';
1218
- * import { BrowserModule } from '@angular/platform-browser';
1219
- *
1220
- * import { ChatModule } from '@progress/kendo-angular-conversational-ui';
1221
- * import { AppComponent } from './app.component';
1222
- *
1223
- * _@NgModule({
1224
- * imports: [ BrowserModule, ChatModule ],
1225
- * declarations: [ AppComponent ],
1226
- * bootstrap: [ AppComponent ]
1227
- * })
1228
- *
1229
- * export class AppModule { }
1230
- * ```
1231
- */
1232
- var ChatModule = /** @class */ (function () {
1233
- function ChatModule() {
1234
- }
1235
- ChatModule = __decorate([
1236
- NgModule({
1237
- declarations: PUBLIC_DIRECTIVES.concat(PRIVATE_DIRECTIVES),
1238
- exports: [PUBLIC_DIRECTIVES],
1239
- imports: [
1240
- ButtonModule,
1241
- CommonModule,
1242
- ResizeSensorModule
1243
- ]
1244
- })
1245
- ], ChatModule);
1246
- return ChatModule;
1247
- }());
1248
-
1249
- /**
1250
- * Generated bundle index. Do not edit.
1251
- */
1252
-
1253
- export { PreventableEvent, HeroCardComponent, AttachmentComponent, ChatItem, CustomMessagesComponent, LocalizedMessagesDirective, Messages, MessageAttachmentsComponent, MessageListComponent, MessageComponent, SuggestedActionsComponent, FocusedStateDirective, ScrollAnchorDirective, ChatComponent, AttachmentTemplateDirective, MessageTemplateDirective, ChatModule, ExecuteActionEvent, SendMessageEvent };