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

package/esm2022/chat/suggested-actions.component.mjs

@@ -5,10 +5,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, Input, Output, QueryList, ViewChildren, ViewChild, NgZone, Renderer2 } from '@angular/core';
-import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
-import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
+import { Keys, normalizeKeys } from '@progress/kendo-angular-common';
 import { ChatItem } from './chat-item';
 import { ChatSuggestionTemplateDirective } from './templates/suggestion-template.directive';
 import { ChatService } from './common/chat.service';
@@ -161,13 +161,13 @@ export class SuggestedActionsComponent extends ChatItem {
         this.activeIndex = apply ? index : -1;
     }
     actionKeydown(e, action) {
-        const handler = this.actionKeyHandlers[normalizeNumpadKeys(e)];
+        const handler = this.actionKeyHandlers[normalizeKeys(e)];
         if (handler) {
             handler(e, action);
         }
     }
     suggestionKeydown(e, suggestion) {
-        const handler = this.suggestionKeyHandlers[normalizeNumpadKeys(e)];
+        const handler = this.suggestionKeyHandlers[normalizeKeys(e)];
         if (handler) {
             handler(e, suggestion);
         }
@@ -206,96 +206,100 @@ export class SuggestedActionsComponent extends ChatItem {
         this.selectedIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, deps: [{ token: i1.ChatService }, { token: i2.LocalizationService }, { token: i3.SuggestionsScrollService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", suggestions: "suggestions", tabbable: "tabbable", type: "type", suggestionTemplate: "suggestionTemplate" }, outputs: { dispatchAction: "dispatchAction", dispatchSuggestion: "dispatchSuggestion" }, host: { properties: { "class.k-suggestion-group": "this.defaultClass", "class.k-suggestion-group-scrollable": "this.scrollableClass", "class.k-suggestion-scrollwrap": "this.scrollButtonsClass", "attr.role": "this.role" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", suggestions: "suggestions", tabbable: "tabbable", type: "type", suggestionTemplate: "suggestionTemplate" }, outputs: { dispatchAction: "dispatchAction", dispatchSuggestion: "dispatchSuggestion" }, host: { properties: { "class.k-suggestion-group": "this.defaultClass", "class.k-suggestion-group-scrollable": "this.scrollableClass", "class.k-suggestion-scrollwrap": "this.scrollButtonsClass", "attr.role": "this.role" } }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => SuggestedActionsComponent)
             },
             SuggestionsScrollService
         ], viewQueries: [{ propertyName: "suggestionsContainer", first: true, predicate: ["suggestionsContainer"], descendants: true, read: ElementRef }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true, read: ElementRef }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true, read: ElementRef }, { propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <span 
-            *ngIf="hasScrollButtons" 
+        @if (hasScrollButtons) {
+          <span
             #prevScrollButton
             kendoChatScrollableButton
             [prev]="true"
             [title]="getScrollButtonTitle('prev')"
             class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
             (onClick)="scrollSuggestions($event)"
-        >
-        </span>
-        <div class="k-suggestion-group" *ngIf="hasScrollButtons; else noScrollButtons" 
+            >
+          </span>
+        }
+        @if (hasScrollButtons) {
+          <div class="k-suggestion-group"
             #suggestionsContainer
             role="group"
             (scroll)="onScroll($event)">
             <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
-        </div>
-
-        <ng-template #noScrollButtons>
-            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
-        </ng-template>
-
+          </div>
+        } @else {
+          <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        }
+        
+        
         <ng-template #suggestionsContent>
-            <ng-container *ngIf="actions">
-                <span
-                    #item
-                    *ngFor="let action of actions; index as index; first as first; last as last"
-                    class="k-suggestion k-suggestion-primary"
-                    role="button"
-                    [class.k-selected]="isSelected(index)"
-                    [class.k-focus]="isSelected(index)"
-                    [class.k-active]="isActive(index)"
-                    [attr.tabindex]="0"
-                    (click)="actionClick(action, index)"
-                    (keydown)="actionKeydown($event, action)"
-                    (mousedown)="toggleActiveState(true, index)"
-                    (mouseup)="toggleActiveState(false, index)"
+          @if (actions) {
+            @for (action of actions; track action; let index = $index; let first = $first; let last = $last) {
+              <span
+                #item
+                class="k-suggestion k-suggestion-primary"
+                role="button"
+                [class.k-selected]="isSelected(index)"
+                [class.k-focus]="isSelected(index)"
+                [class.k-active]="isActive(index)"
+                [attr.tabindex]="0"
+                (click)="actionClick(action, index)"
+                (keydown)="actionKeydown($event, action)"
+                (mousedown)="toggleActiveState(true, index)"
+                (mouseup)="toggleActiveState(false, index)"
                 >
-                    {{ action.title || action.value }}
+                {{ action.title || action.value }}
+              </span>
+            }
+          }
+        
+          @if (suggestions) {
+            @if (!suggestionTemplate?.templateRef) {
+              @for (suggestion of suggestions; track suggestion; let index = $index; let first = $first; let last = $last) {
+                <span
+                  #item
+                  class="k-suggestion"
+                  role="button"
+                  [class.k-selected]="isSelected(index)"
+                  [class.k-focus]="isSelected(index)"
+                  [class.k-active]="isActive(index)"
+                  [attr.tabindex]="0"
+                  (click)="suggestionClick(suggestion, index)"
+                  (keydown)="suggestionKeydown($event, suggestion)"
+                  (mousedown)="toggleActiveState(true, index)"
+                  (mouseup)="toggleActiveState(false, index)"
+                  >
+                  {{ suggestion.text }}
                 </span>
-            </ng-container>
-
-            <ng-container *ngIf="suggestions">
-                <ng-container *ngIf="!suggestionTemplate?.templateRef">
-                    <span
-                        #item
-                        *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
-                        class="k-suggestion"
-                        role="button"
-                        [class.k-selected]="isSelected(index)"
-                        [class.k-focus]="isSelected(index)"
-                        [class.k-active]="isActive(index)"
-                        [attr.tabindex]="0"
-                        (click)="suggestionClick(suggestion, index)"
-                        (keydown)="suggestionKeydown($event, suggestion)"
-                        (mousedown)="toggleActiveState(true, index)"
-                        (mouseup)="toggleActiveState(false, index)"
-                    >
-                        {{ suggestion.text }}
-                    </span>
-                </ng-container>
-
-                <ng-container *ngIf="suggestionTemplate?.templateRef">
-                    <ng-container *ngFor="let suggestion of suggestions">
-                        <ng-template
-                            [ngTemplateOutlet]="suggestionTemplate.templateRef"
-                            [ngTemplateOutletContext]="{ $implicit: suggestion }"
-                        >
-                        </ng-template>
-                    </ng-container>
-                </ng-container>
-            </ng-container>
+              }
+            }
+            @if (suggestionTemplate?.templateRef) {
+              @for (suggestion of suggestions; track suggestion) {
+                <ng-template
+                  [ngTemplateOutlet]="suggestionTemplate.templateRef"
+                  [ngTemplateOutletContext]="{ $implicit: suggestion }"
+                  >
+                </ng-template>
+              }
+            }
+          }
         </ng-template>
-
-        <span 
-            *ngIf="hasScrollButtons"
+        
+        @if (hasScrollButtons) {
+          <span
             #nextScrollButton
             kendoChatScrollableButton
             [prev]="false"
             [title]="getScrollButtonTitle('next')"
             class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
             (onClick)="scrollSuggestions($event)"
-        >
-        </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatScrollableButtonComponent, selector: "[kendoChatScrollableButton]", inputs: ["prev"], outputs: ["onClick"] }] });
+            >
+          </span>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatScrollableButtonComponent, selector: "[kendoChatScrollableButton]", inputs: ["prev"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
             type: Component,
@@ -307,92 +311,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         },
                         SuggestionsScrollService],
                     template: `
-        <span 
-            *ngIf="hasScrollButtons" 
+        @if (hasScrollButtons) {
+          <span
             #prevScrollButton
             kendoChatScrollableButton
             [prev]="true"
             [title]="getScrollButtonTitle('prev')"
             class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
             (onClick)="scrollSuggestions($event)"
-        >
-        </span>
-        <div class="k-suggestion-group" *ngIf="hasScrollButtons; else noScrollButtons" 
+            >
+          </span>
+        }
+        @if (hasScrollButtons) {
+          <div class="k-suggestion-group"
             #suggestionsContainer
             role="group"
             (scroll)="onScroll($event)">
             <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
-        </div>
-
-        <ng-template #noScrollButtons>
-            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
-        </ng-template>
-
+          </div>
+        } @else {
+          <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        }
+        
+        
         <ng-template #suggestionsContent>
-            <ng-container *ngIf="actions">
-                <span
-                    #item
-                    *ngFor="let action of actions; index as index; first as first; last as last"
-                    class="k-suggestion k-suggestion-primary"
-                    role="button"
-                    [class.k-selected]="isSelected(index)"
-                    [class.k-focus]="isSelected(index)"
-                    [class.k-active]="isActive(index)"
-                    [attr.tabindex]="0"
-                    (click)="actionClick(action, index)"
-                    (keydown)="actionKeydown($event, action)"
-                    (mousedown)="toggleActiveState(true, index)"
-                    (mouseup)="toggleActiveState(false, index)"
+          @if (actions) {
+            @for (action of actions; track action; let index = $index; let first = $first; let last = $last) {
+              <span
+                #item
+                class="k-suggestion k-suggestion-primary"
+                role="button"
+                [class.k-selected]="isSelected(index)"
+                [class.k-focus]="isSelected(index)"
+                [class.k-active]="isActive(index)"
+                [attr.tabindex]="0"
+                (click)="actionClick(action, index)"
+                (keydown)="actionKeydown($event, action)"
+                (mousedown)="toggleActiveState(true, index)"
+                (mouseup)="toggleActiveState(false, index)"
                 >
-                    {{ action.title || action.value }}
+                {{ action.title || action.value }}
+              </span>
+            }
+          }
+        
+          @if (suggestions) {
+            @if (!suggestionTemplate?.templateRef) {
+              @for (suggestion of suggestions; track suggestion; let index = $index; let first = $first; let last = $last) {
+                <span
+                  #item
+                  class="k-suggestion"
+                  role="button"
+                  [class.k-selected]="isSelected(index)"
+                  [class.k-focus]="isSelected(index)"
+                  [class.k-active]="isActive(index)"
+                  [attr.tabindex]="0"
+                  (click)="suggestionClick(suggestion, index)"
+                  (keydown)="suggestionKeydown($event, suggestion)"
+                  (mousedown)="toggleActiveState(true, index)"
+                  (mouseup)="toggleActiveState(false, index)"
+                  >
+                  {{ suggestion.text }}
                 </span>
-            </ng-container>
-
-            <ng-container *ngIf="suggestions">
-                <ng-container *ngIf="!suggestionTemplate?.templateRef">
-                    <span
-                        #item
-                        *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
-                        class="k-suggestion"
-                        role="button"
-                        [class.k-selected]="isSelected(index)"
-                        [class.k-focus]="isSelected(index)"
-                        [class.k-active]="isActive(index)"
-                        [attr.tabindex]="0"
-                        (click)="suggestionClick(suggestion, index)"
-                        (keydown)="suggestionKeydown($event, suggestion)"
-                        (mousedown)="toggleActiveState(true, index)"
-                        (mouseup)="toggleActiveState(false, index)"
-                    >
-                        {{ suggestion.text }}
-                    </span>
-                </ng-container>
-
-                <ng-container *ngIf="suggestionTemplate?.templateRef">
-                    <ng-container *ngFor="let suggestion of suggestions">
-                        <ng-template
-                            [ngTemplateOutlet]="suggestionTemplate.templateRef"
-                            [ngTemplateOutletContext]="{ $implicit: suggestion }"
-                        >
-                        </ng-template>
-                    </ng-container>
-                </ng-container>
-            </ng-container>
+              }
+            }
+            @if (suggestionTemplate?.templateRef) {
+              @for (suggestion of suggestions; track suggestion) {
+                <ng-template
+                  [ngTemplateOutlet]="suggestionTemplate.templateRef"
+                  [ngTemplateOutletContext]="{ $implicit: suggestion }"
+                  >
+                </ng-template>
+              }
+            }
+          }
         </ng-template>
-
-        <span 
-            *ngIf="hasScrollButtons"
+        
+        @if (hasScrollButtons) {
+          <span
             #nextScrollButton
             kendoChatScrollableButton
             [prev]="false"
             [title]="getScrollButtonTitle('next')"
             class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
             (onClick)="scrollSuggestions($event)"
-        >
-        </span>
-    `,
+            >
+          </span>
+        }
+        `,
                     standalone: true,
-                    imports: [NgFor, NgIf, NgTemplateOutlet, ChatScrollableButtonComponent]
+                    imports: [NgTemplateOutlet, ChatScrollableButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.ChatService }, { type: i2.LocalizationService }, { type: i3.SuggestionsScrollService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { defaultClass: [{
                 type: HostBinding,