@progress/kendo-angular-conversational-ui 21.1.1-develop.2 → 21.2.0-develop.10

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 (27) hide show
  1. package/chat/chat.component.d.ts +2 -0
  2. package/chat/message-list.component.d.ts +2 -2
  3. package/codemods/utils.js +805 -394
  4. package/codemods/v20/chat-user.js +9 -12
  5. package/codemods/v21/chat-messagetoolbarvisibility.js +9 -13
  6. package/codemods/v21/chat-pinnedbyfield.js +1 -2
  7. package/esm2022/ai-prompt/aiprompt.component.mjs +155 -139
  8. package/esm2022/ai-prompt/common/output-card.component.mjs +81 -83
  9. package/esm2022/ai-prompt/common/toolbar-focusable.directive.mjs +2 -2
  10. package/esm2022/ai-prompt/views/output-view.component.mjs +27 -29
  11. package/esm2022/ai-prompt/views/prompt-view.component.mjs +150 -135
  12. package/esm2022/chat/attachment.component.mjs +53 -37
  13. package/esm2022/chat/cards/hero-card.component.mjs +48 -35
  14. package/esm2022/chat/chat-file.component.mjs +32 -29
  15. package/esm2022/chat/chat-view.mjs +2 -2
  16. package/esm2022/chat/chat.component.mjs +259 -242
  17. package/esm2022/chat/message-attachments.component.mjs +60 -55
  18. package/esm2022/chat/message-box.component.mjs +203 -183
  19. package/esm2022/chat/message-list.component.mjs +249 -209
  20. package/esm2022/chat/message-reference-content.component.mjs +30 -19
  21. package/esm2022/chat/message.component.mjs +301 -281
  22. package/esm2022/chat/suggested-actions.component.mjs +142 -134
  23. package/esm2022/inline-ai-prompt/inlineaiprompt-content.component.mjs +205 -179
  24. package/esm2022/package-metadata.mjs +2 -2
  25. package/fesm2022/progress-kendo-angular-conversational-ui.mjs +1988 -1777
  26. package/package.json +14 -14
  27. package/codemods/template-transformer/index.js +0 -93
package/esm2022/ai-prompt/views/prompt-view.component.mjs CHANGED
@@ -3,7 +3,6 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, forwardRef, isDevMode } from '@angular/core';
6
- import { NgIf, NgFor } from '@angular/common';
7
6
  import { LocalizationService } from '@progress/kendo-angular-l10n';
8
7
  import { guid } from '@progress/kendo-angular-common';
9
8
  import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
@@ -105,84 +104,92 @@ export class PromptViewComponent extends BaseView {
105
104
  }
106
105
  }
107
106
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PromptViewComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
108
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PromptViewComponent, isStandalone: true, selector: "kendo-aiprompt-prompt-view", providers: [
107
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PromptViewComponent, isStandalone: true, selector: "kendo-aiprompt-prompt-view", providers: [
109
108
  {
110
109
  provide: BaseView,
111
110
  useExisting: forwardRef(() => PromptViewComponent)
112
111
  }
113
112
  ], usesInheritance: true, ngImport: i0, template: `
114
113
  <ng-template #content>
115
- <kendo-textarea
116
- [cols]="textareaSettings?.cols"
117
- [disabled]="textareaSettings?.disabled"
118
- [fillMode]="textareaSettings?.fillMode"
119
- [flow]="textareaSettings?.flow ?? 'vertical'"
120
- [inputAttributes]="textareaSettings?.inputAttributes"
121
- [maxlength]="textareaSettings?.maxlength"
122
- [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
123
- [readonly]="textareaSettings?.readonly"
124
- [resizable]="textareaSettings?.resizable ?? 'vertical'"
125
- [rounded]="textareaSettings?.rounded"
126
- [rows]="textareaSettings?.rows ?? 1"
127
- [selectOnFocus]="textareaSettings?.selectOnFocus"
128
- [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
129
- [size]="textareaSettings?.size"
130
- [tabIndex]="textareaSettings?.tabindex"
131
- [title]="textareaSettings?.title"
132
- [(value)]="textAreaValue"
114
+ <kendo-textarea
115
+ [cols]="textareaSettings?.cols"
116
+ [disabled]="textareaSettings?.disabled"
117
+ [fillMode]="textareaSettings?.fillMode"
118
+ [flow]="textareaSettings?.flow ?? 'vertical'"
119
+ [inputAttributes]="textareaSettings?.inputAttributes"
120
+ [maxlength]="textareaSettings?.maxlength"
121
+ [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
122
+ [readonly]="textareaSettings?.readonly"
123
+ [resizable]="textareaSettings?.resizable ?? 'vertical'"
124
+ [rounded]="textareaSettings?.rounded"
125
+ [rows]="textareaSettings?.rows ?? 1"
126
+ [selectOnFocus]="textareaSettings?.selectOnFocus"
127
+ [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
128
+ [size]="textareaSettings?.size"
129
+ [tabIndex]="textareaSettings?.tabindex"
130
+ [title]="textareaSettings?.title"
131
+ [(value)]="textAreaValue"
133
132
  >
134
- <kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
135
- <button kendoSpeechToTextButton
133
+ @if (speechToTextButtonSettings) {
134
+ <kendo-textarea-suffix>
135
+ <button kendoSpeechToTextButton
136
+ role="button"
137
+ [continuous]="speechToTextButtonSettings?.continuous"
138
+ [disabled]="speechToTextButtonSettings?.disabled"
139
+ [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
140
+ [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
141
+ [interimResults]="speechToTextButtonSettings?.interimResults"
142
+ [lang]="speechToTextButtonSettings?.lang"
143
+ [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
144
+ [rounded]="speechToTextButtonSettings?.rounded"
145
+ [size]="speechToTextButtonSettings?.size"
146
+ [themeColor]="speechToTextButtonSettings?.themeColor"
147
+ [attr.aria-label]="messageFor('speechToTextButton')"
148
+ [attr.title]="messageFor('speechToTextButton')"
149
+ [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
150
+ (error)="onSpeechToTextError($event)"
151
+ (result)="onSpeechToTextResult($event)"
152
+ ></button>
153
+ </kendo-textarea-suffix>
154
+ }
155
+ </kendo-textarea>
156
+ @if (promptSuggestions) {
157
+ <div
158
+ class="k-prompt-expander">
159
+ <button kendoButton
160
+ [attr.aria-controls]="contentId"
161
+ [attr.aria-expanded]="showSuggestions"
162
+ fillMode="flat"
163
+ [icon]="suggestionsIcons.font"
164
+ [svgIcon]="suggestionsIcons.svg"
165
+ type="button"
166
+ (click)="showSuggestions = !showSuggestions">
167
+ {{messageFor('promptSuggestions')}}
168
+ </button>
169
+ @if (showSuggestions) {
170
+ <div
171
+ class="k-prompt-expander-content"
172
+ [attr.id]="contentId">
173
+ <div class="k-suggestion-group" role="group">
174
+ @for (suggestion of promptSuggestions; track suggestion) {
175
+ <div
176
+ class="k-suggestion"
136
177
  role="button"
137
- [continuous]="speechToTextButtonSettings?.continuous"
138
- [disabled]="speechToTextButtonSettings?.disabled"
139
- [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
140
- [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
141
- [interimResults]="speechToTextButtonSettings?.interimResults"
142
- [lang]="speechToTextButtonSettings?.lang"
143
- [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
144
- [rounded]="speechToTextButtonSettings?.rounded"
145
- [size]="speechToTextButtonSettings?.size"
146
- [themeColor]="speechToTextButtonSettings?.themeColor"
147
- [attr.aria-label]="messageFor('speechToTextButton')"
148
- [attr.title]="messageFor('speechToTextButton')"
149
- [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
150
- (error)="onSpeechToTextError($event)"
151
- (result)="onSpeechToTextResult($event)"
152
- ></button>
153
- </kendo-textarea-suffix>
154
- </kendo-textarea>
155
- <div *ngIf="promptSuggestions"
156
- class="k-prompt-expander">
157
- <button kendoButton
158
- [attr.aria-controls]="contentId"
159
- [attr.aria-expanded]="showSuggestions"
160
- fillMode="flat"
161
- [icon]="suggestionsIcons.font"
162
- [svgIcon]="suggestionsIcons.svg"
163
- type="button"
164
- (click)="showSuggestions = !showSuggestions">
165
- {{messageFor('promptSuggestions')}}
166
- </button>
167
- <div *ngIf="showSuggestions"
168
- class="k-prompt-expander-content"
169
- [attr.id]="contentId">
170
- <div class="k-suggestion-group" role="group">
171
- <div *ngFor="let suggestion of promptSuggestions"
172
- class="k-suggestion"
173
- role="button"
174
- [attr.tabindex]="0"
175
- [attr.aria-label]="suggestion"
176
- [attr.title]="suggestion"
177
- (click)="suggestionClick(suggestion)"
178
- (keydown)="suggestionKeydown($event, suggestion)">
179
- {{suggestion}}
180
- </div>
181
- </div>
178
+ [attr.tabindex]="0"
179
+ [attr.aria-label]="suggestion"
180
+ [attr.title]="suggestion"
181
+ (click)="suggestionClick(suggestion)"
182
+ (keydown)="suggestionKeydown($event, suggestion)">
183
+ {{suggestion}}
184
+ </div>
185
+ }
186
+ </div>
182
187
  </div>
188
+ }
183
189
  </div>
190
+ }
184
191
  </ng-template>
185
- `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
192
+ `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
186
193
  }
187
194
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PromptViewComponent, decorators: [{
188
195
  type: Component,
@@ -196,78 +203,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
196
203
  ],
197
204
  template: `
198
205
  <ng-template #content>
199
- <kendo-textarea
200
- [cols]="textareaSettings?.cols"
201
- [disabled]="textareaSettings?.disabled"
202
- [fillMode]="textareaSettings?.fillMode"
203
- [flow]="textareaSettings?.flow ?? 'vertical'"
204
- [inputAttributes]="textareaSettings?.inputAttributes"
205
- [maxlength]="textareaSettings?.maxlength"
206
- [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
207
- [readonly]="textareaSettings?.readonly"
208
- [resizable]="textareaSettings?.resizable ?? 'vertical'"
209
- [rounded]="textareaSettings?.rounded"
210
- [rows]="textareaSettings?.rows ?? 1"
211
- [selectOnFocus]="textareaSettings?.selectOnFocus"
212
- [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
213
- [size]="textareaSettings?.size"
214
- [tabIndex]="textareaSettings?.tabindex"
215
- [title]="textareaSettings?.title"
216
- [(value)]="textAreaValue"
206
+ <kendo-textarea
207
+ [cols]="textareaSettings?.cols"
208
+ [disabled]="textareaSettings?.disabled"
209
+ [fillMode]="textareaSettings?.fillMode"
210
+ [flow]="textareaSettings?.flow ?? 'vertical'"
211
+ [inputAttributes]="textareaSettings?.inputAttributes"
212
+ [maxlength]="textareaSettings?.maxlength"
213
+ [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
214
+ [readonly]="textareaSettings?.readonly"
215
+ [resizable]="textareaSettings?.resizable ?? 'vertical'"
216
+ [rounded]="textareaSettings?.rounded"
217
+ [rows]="textareaSettings?.rows ?? 1"
218
+ [selectOnFocus]="textareaSettings?.selectOnFocus"
219
+ [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
220
+ [size]="textareaSettings?.size"
221
+ [tabIndex]="textareaSettings?.tabindex"
222
+ [title]="textareaSettings?.title"
223
+ [(value)]="textAreaValue"
217
224
  >
218
- <kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
219
- <button kendoSpeechToTextButton
225
+ @if (speechToTextButtonSettings) {
226
+ <kendo-textarea-suffix>
227
+ <button kendoSpeechToTextButton
228
+ role="button"
229
+ [continuous]="speechToTextButtonSettings?.continuous"
230
+ [disabled]="speechToTextButtonSettings?.disabled"
231
+ [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
232
+ [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
233
+ [interimResults]="speechToTextButtonSettings?.interimResults"
234
+ [lang]="speechToTextButtonSettings?.lang"
235
+ [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
236
+ [rounded]="speechToTextButtonSettings?.rounded"
237
+ [size]="speechToTextButtonSettings?.size"
238
+ [themeColor]="speechToTextButtonSettings?.themeColor"
239
+ [attr.aria-label]="messageFor('speechToTextButton')"
240
+ [attr.title]="messageFor('speechToTextButton')"
241
+ [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
242
+ (error)="onSpeechToTextError($event)"
243
+ (result)="onSpeechToTextResult($event)"
244
+ ></button>
245
+ </kendo-textarea-suffix>
246
+ }
247
+ </kendo-textarea>
248
+ @if (promptSuggestions) {
249
+ <div
250
+ class="k-prompt-expander">
251
+ <button kendoButton
252
+ [attr.aria-controls]="contentId"
253
+ [attr.aria-expanded]="showSuggestions"
254
+ fillMode="flat"
255
+ [icon]="suggestionsIcons.font"
256
+ [svgIcon]="suggestionsIcons.svg"
257
+ type="button"
258
+ (click)="showSuggestions = !showSuggestions">
259
+ {{messageFor('promptSuggestions')}}
260
+ </button>
261
+ @if (showSuggestions) {
262
+ <div
263
+ class="k-prompt-expander-content"
264
+ [attr.id]="contentId">
265
+ <div class="k-suggestion-group" role="group">
266
+ @for (suggestion of promptSuggestions; track suggestion) {
267
+ <div
268
+ class="k-suggestion"
220
269
  role="button"
221
- [continuous]="speechToTextButtonSettings?.continuous"
222
- [disabled]="speechToTextButtonSettings?.disabled"
223
- [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
224
- [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
225
- [interimResults]="speechToTextButtonSettings?.interimResults"
226
- [lang]="speechToTextButtonSettings?.lang"
227
- [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
228
- [rounded]="speechToTextButtonSettings?.rounded"
229
- [size]="speechToTextButtonSettings?.size"
230
- [themeColor]="speechToTextButtonSettings?.themeColor"
231
- [attr.aria-label]="messageFor('speechToTextButton')"
232
- [attr.title]="messageFor('speechToTextButton')"
233
- [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
234
- (error)="onSpeechToTextError($event)"
235
- (result)="onSpeechToTextResult($event)"
236
- ></button>
237
- </kendo-textarea-suffix>
238
- </kendo-textarea>
239
- <div *ngIf="promptSuggestions"
240
- class="k-prompt-expander">
241
- <button kendoButton
242
- [attr.aria-controls]="contentId"
243
- [attr.aria-expanded]="showSuggestions"
244
- fillMode="flat"
245
- [icon]="suggestionsIcons.font"
246
- [svgIcon]="suggestionsIcons.svg"
247
- type="button"
248
- (click)="showSuggestions = !showSuggestions">
249
- {{messageFor('promptSuggestions')}}
250
- </button>
251
- <div *ngIf="showSuggestions"
252
- class="k-prompt-expander-content"
253
- [attr.id]="contentId">
254
- <div class="k-suggestion-group" role="group">
255
- <div *ngFor="let suggestion of promptSuggestions"
256
- class="k-suggestion"
257
- role="button"
258
- [attr.tabindex]="0"
259
- [attr.aria-label]="suggestion"
260
- [attr.title]="suggestion"
261
- (click)="suggestionClick(suggestion)"
262
- (keydown)="suggestionKeydown($event, suggestion)">
263
- {{suggestion}}
264
- </div>
265
- </div>
270
+ [attr.tabindex]="0"
271
+ [attr.aria-label]="suggestion"
272
+ [attr.title]="suggestion"
273
+ (click)="suggestionClick(suggestion)"
274
+ (keydown)="suggestionKeydown($event, suggestion)">
275
+ {{suggestion}}
276
+ </div>
277
+ }
278
+ </div>
266
279
  </div>
280
+ }
267
281
  </div>
282
+ }
268
283
  </ng-template>
269
- `,
284
+ `,
270
285
  standalone: true,
271
- imports: [TextAreaComponent, NgIf, ButtonComponent, NgFor, TextAreaSuffixComponent, SpeechToTextButtonComponent]
286
+ imports: [TextAreaComponent, ButtonComponent, TextAreaSuffixComponent, SpeechToTextButtonComponent]
272
287
  }]
273
288
  }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.AIPromptService }] });
package/esm2022/chat/attachment.component.mjs CHANGED
@@ -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 { Component, Input } from '@angular/core';
6
- import { NgIf, NgTemplateOutlet } from '@angular/common';
6
+ import { NgTemplateOutlet } from '@angular/common';
7
7
  import { AttachmentTemplateDirective } from './templates/attachment-template.directive';
8
8
  import * as i0 from "@angular/core";
9
9
  /**
@@ -32,55 +32,71 @@ export class AttachmentComponent {
32
32
  }
33
33
  _attachment;
34
34
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
35
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AttachmentComponent, isStandalone: true, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
36
- <ng-container *ngIf="template">
37
- <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
38
- </ng-container>
39
- </ng-container>
40
-
41
- <div *ngIf="!template" class="k-card">
35
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AttachmentComponent, isStandalone: true, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
36
+ @if (template) {
37
+ <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
38
+ </ng-container>
39
+ }
40
+
41
+ @if (!template) {
42
+ <div class="k-card">
42
43
  <div class="k-card-body">
43
- <h5 class="k-card-title" *ngIf="attachment.title">
44
- {{ attachment.title }}
45
- </h5>
46
- <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
47
- {{ attachment.subtitle }}
48
- </h6>
49
- <img *ngIf="image" [attr.src]="attachment.content" />
50
- <ng-container *ngIf="unknown">
44
+ @if (attachment.title) {
45
+ <h5 class="k-card-title">
46
+ {{ attachment.title }}
47
+ </h5>
48
+ }
49
+ @if (attachment.subtitle) {
50
+ <h6 class="k-card-subtitle">
51
+ {{ attachment.subtitle }}
52
+ </h6>
53
+ }
54
+ @if (image) {
55
+ <img [attr.src]="attachment.content" />
56
+ }
57
+ @if (unknown) {
51
58
  {{ attachment.content }}
52
- </ng-container>
59
+ }
53
60
  </div>
54
- </div>
55
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
61
+ </div>
62
+ }
63
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
56
64
  }
57
65
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentComponent, decorators: [{
58
66
  type: Component,
59
67
  args: [{
60
68
  selector: 'kendo-chat-attachment',
61
69
  template: `
62
- <ng-container *ngIf="template">
63
- <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
64
- </ng-container>
65
- </ng-container>
66
-
67
- <div *ngIf="!template" class="k-card">
70
+ @if (template) {
71
+ <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
72
+ </ng-container>
73
+ }
74
+
75
+ @if (!template) {
76
+ <div class="k-card">
68
77
  <div class="k-card-body">
69
- <h5 class="k-card-title" *ngIf="attachment.title">
70
- {{ attachment.title }}
71
- </h5>
72
- <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
73
- {{ attachment.subtitle }}
74
- </h6>
75
- <img *ngIf="image" [attr.src]="attachment.content" />
76
- <ng-container *ngIf="unknown">
78
+ @if (attachment.title) {
79
+ <h5 class="k-card-title">
80
+ {{ attachment.title }}
81
+ </h5>
82
+ }
83
+ @if (attachment.subtitle) {
84
+ <h6 class="k-card-subtitle">
85
+ {{ attachment.subtitle }}
86
+ </h6>
87
+ }
88
+ @if (image) {
89
+ <img [attr.src]="attachment.content" />
90
+ }
91
+ @if (unknown) {
77
92
  {{ attachment.content }}
78
- </ng-container>
93
+ }
79
94
  </div>
80
- </div>
81
- `,
95
+ </div>
96
+ }
97
+ `,
82
98
  standalone: true,
83
- imports: [NgIf, NgTemplateOutlet]
99
+ imports: [NgTemplateOutlet]
84
100
  }]
85
101
  }], propDecorators: { attachment: [{
86
102
  type: Input
package/esm2022/chat/cards/hero-card.component.mjs CHANGED
@@ -3,7 +3,6 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
6
- import { NgIf, NgFor } from '@angular/common';
7
6
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
8
7
  import * as i0 from "@angular/core";
9
8
  /**
@@ -48,59 +47,73 @@ export class HeroCardComponent {
48
47
  this.executeAction.next(action);
49
48
  }
50
49
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
51
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HeroCardComponent, isStandalone: true, 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: `
52
- <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
50
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HeroCardComponent, isStandalone: true, 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: `
51
+ @if (imageUrl) {
52
+ <img class="k-card-image" [src]="imageUrl" />
53
+ }
53
54
  <div class="k-card-body">
54
- <h5 class="k-card-title" *ngIf="title">
55
- {{ title }}
56
- </h5>
57
- <h6 class="k-card-subtitle" *ngIf="subtitle">
58
- {{ subtitle }}
59
- </h6>
55
+ @if (title) {
56
+ <h5 class="k-card-title">
57
+ {{ title }}
58
+ </h5>
59
+ }
60
+ @if (subtitle) {
61
+ <h6 class="k-card-subtitle">
62
+ {{ subtitle }}
63
+ </h6>
64
+ }
60
65
  </div>
61
66
  <div class="k-card-actions k-card-actions-vertical">
62
- <span class="k-card-action"
63
- *ngFor="let act of actions"
64
- >
65
- <button
67
+ @for (act of actions; track act) {
68
+ <span class="k-card-action"
69
+ >
70
+ <button
66
71
  kendoButton fillMode="flat"
67
72
  (click)="onClick(act)"
68
- >
69
- {{ act.title }}
70
- </button>
71
- </span>
73
+ >
74
+ {{ act.title }}
75
+ </button>
76
+ </span>
77
+ }
72
78
  </div>
73
- `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
79
+ `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
74
80
  }
75
81
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeroCardComponent, decorators: [{
76
82
  type: Component,
77
83
  args: [{
78
84
  selector: 'kendo-chat-hero-card',
79
85
  template: `
80
- <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
86
+ @if (imageUrl) {
87
+ <img class="k-card-image" [src]="imageUrl" />
88
+ }
81
89
  <div class="k-card-body">
82
- <h5 class="k-card-title" *ngIf="title">
83
- {{ title }}
84
- </h5>
85
- <h6 class="k-card-subtitle" *ngIf="subtitle">
86
- {{ subtitle }}
87
- </h6>
90
+ @if (title) {
91
+ <h5 class="k-card-title">
92
+ {{ title }}
93
+ </h5>
94
+ }
95
+ @if (subtitle) {
96
+ <h6 class="k-card-subtitle">
97
+ {{ subtitle }}
98
+ </h6>
99
+ }
88
100
  </div>
89
101
  <div class="k-card-actions k-card-actions-vertical">
90
- <span class="k-card-action"
91
- *ngFor="let act of actions"
92
- >
93
- <button
102
+ @for (act of actions; track act) {
103
+ <span class="k-card-action"
104
+ >
105
+ <button
94
106
  kendoButton fillMode="flat"
95
107
  (click)="onClick(act)"
96
- >
97
- {{ act.title }}
98
- </button>
99
- </span>
108
+ >
109
+ {{ act.title }}
110
+ </button>
111
+ </span>
112
+ }
100
113
  </div>
101
- `,
114
+ `,
102
115
  standalone: true,
103
- imports: [NgIf, NgFor, ButtonComponent]
116
+ imports: [ButtonComponent]
104
117
  }]
105
118
  }], propDecorators: { imageUrl: [{
106
119
  type: Input