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

package/esm2022/chat/chat-file.component.mjs

@@ -10,7 +10,6 @@ import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { moreVerticalIcon, xIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { NgIf } from '@angular/common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 /**
@@ -45,30 +44,31 @@ export class ChatFileComponent extends ChatItem {
     }
     focus() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatFileComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatFileComponent, isStandalone: true, selector: "li[chatFile]", inputs: { chatFile: "chatFile", removable: "removable", fileActions: "fileActions" }, outputs: { remove: "remove", actionClick: "actionClick", actionsToggle: "actionsToggle", actionButtonClick: "actionButtonClick" }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatFileComponent, isStandalone: true, selector: "li[chatFile]", inputs: { chatFile: "chatFile", removable: "removable", fileActions: "fileActions" }, outputs: { remove: "remove", actionClick: "actionClick", actionsToggle: "actionsToggle", actionButtonClick: "actionButtonClick" }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => ChatFileComponent)
             }], usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
-            size="xlarge"
-            [name]="fileGroupClass(chatFile.extension)"
-            [svgIcon]="fileThumbnail(chatFile.extension)"
-        >
+          size="xlarge"
+          [name]="fileGroupClass(chatFile.extension)"
+          [svgIcon]="fileThumbnail(chatFile.extension)"
+          >
         </kendo-icon-wrapper>
         <div class="k-chat-file-info">
-            <span class="k-chat-file-name">{{chatFile.name}}</span>
-            <span class="k-chat-file-size">{{getTotalFilesSizeMessage(chatFile)}}</span>
+          <span class="k-chat-file-name">{{chatFile.name}}</span>
+          <span class="k-chat-file-size">{{getTotalFilesSizeMessage(chatFile)}}</span>
         </div>
-        <button
+        @if (removable) {
+          <button
             kendoButton
-            *ngIf="removable"
             [attr.title]="textFor('removeFileTitle')"
             [svgIcon]="deleteIcon"
             (click)="remove.emit(chatFile)"
             fillMode="flat"
-        ></button>
-        <kendo-dropdownbutton
-            *ngIf="fileActions && fileActions.length > 0"
+          ></button>
+        }
+        @if (fileActions && fileActions.length > 0) {
+          <kendo-dropdownbutton
             [data]="fileActions"
             [attr.title]="textFor('fileActionsTitle')"
             fillMode="flat"
@@ -78,8 +78,9 @@ export class ChatFileComponent extends ChatItem {
             (click)="$event.preventDefault()"
             (open)="actionsToggle.emit(true)"
             (close)="actionsToggle.emit(false)"
-        ></kendo-dropdownbutton>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }] });
+          ></kendo-dropdownbutton>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { 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: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatFileComponent, decorators: [{
             type: Component,
@@ -91,25 +92,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }],
                     template: `
         <kendo-icon-wrapper
-            size="xlarge"
-            [name]="fileGroupClass(chatFile.extension)"
-            [svgIcon]="fileThumbnail(chatFile.extension)"
-        >
+          size="xlarge"
+          [name]="fileGroupClass(chatFile.extension)"
+          [svgIcon]="fileThumbnail(chatFile.extension)"
+          >
         </kendo-icon-wrapper>
         <div class="k-chat-file-info">
-            <span class="k-chat-file-name">{{chatFile.name}}</span>
-            <span class="k-chat-file-size">{{getTotalFilesSizeMessage(chatFile)}}</span>
+          <span class="k-chat-file-name">{{chatFile.name}}</span>
+          <span class="k-chat-file-size">{{getTotalFilesSizeMessage(chatFile)}}</span>
         </div>
-        <button
+        @if (removable) {
+          <button
             kendoButton
-            *ngIf="removable"
             [attr.title]="textFor('removeFileTitle')"
             [svgIcon]="deleteIcon"
             (click)="remove.emit(chatFile)"
             fillMode="flat"
-        ></button>
-        <kendo-dropdownbutton
-            *ngIf="fileActions && fileActions.length > 0"
+          ></button>
+        }
+        @if (fileActions && fileActions.length > 0) {
+          <kendo-dropdownbutton
             [data]="fileActions"
             [attr.title]="textFor('fileActionsTitle')"
             fillMode="flat"
@@ -119,10 +121,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             (click)="$event.preventDefault()"
             (open)="actionsToggle.emit(true)"
             (close)="actionsToggle.emit(false)"
-        ></kendo-dropdownbutton>
-    `,
+          ></kendo-dropdownbutton>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, ButtonComponent, DropDownButtonComponent]
+                    imports: [IconWrapperComponent, ButtonComponent, DropDownButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { chatFile: [{
                 type: Input

package/esm2022/chat/chat-view.mjs

@@ -61,7 +61,7 @@ const groupItems = (total) => (acc, msg, index) => {
             attachments: msg.attachments,
             attachmentLayout: msg.attachmentLayout,
             timestamp: msg.timestamp,
-            trackBy: msg
+            trackBy: 'attachment-group' + msg.id
         });
     }
     if (msg.suggestedActions && isLastMessage) {
@@ -69,7 +69,7 @@ const groupItems = (total) => (acc, msg, index) => {
             type: 'action-group',
             actions: msg.suggestedActions,
             timestamp: msg.timestamp,
-            trackBy: msg
+            trackBy: 'action-group' + msg.id
         });
     }
     return acc;