fix(suggest): add item selected output event

fix(suggest): add item selected output event

Author: sergiubologa

CHANGELOG.md

@@ -1,3 +1,11 @@
+# v14.8.0 (2023-05-29)
+* **suggest** changed in EventEmitter
+* **suggest** added item selected output
+* **deps** bump socket.io-parser from 4.2.1 to 4.2.3
+* **chore** workflow fixes publish to npmjs.org
+* **chore** use builtin GITHUB_TOKEN for gh publish
+* **deps** add workflow to publish package version
+
 # v14.7.14 (2023-05-23)
 * **suggest** announce status of current item
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "14.7.14",
+  "version": "14.8.0",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"

package.json

@@ -621,6 +621,13 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
     @Output()
     closed = new EventEmitter<void>();
 
+    /**
+     * Emits when an item is selected.
+     *
+     */
+    @Output()
+    itemSelected = new EventEmitter<ISuggestValue>();
+
     /**
      * Emits when the overlay is displayed (dropdown open).
      *
@@ -1190,6 +1197,8 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
         let value = toSuggestValue(inputValue, this._isOnCustomValueIndex);
         if (value.loading !== VirtualScrollItemStatus.loaded || value.disabled === true) { return; }
 
+        this.itemSelected.emit(value);
+
         if (this.inDrillDownMode) {
             value = {
                 ...value,

projects/angular/components/ui-suggest/src/ui-suggest.component.ts

@@ -1,6 +1,6 @@
 {
     "name": "@uipath/angular",
-    "version": "14.7.14",
+    "version": "14.8.0",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",

projects/angular/package.json

@@ -5,6 +5,7 @@ import {
 } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { UiSuggestModule } from '@uipath/angular/components/ui-suggest';
+import { MatRadioModule } from '@angular/material/radio';
 
 import { SuggestPageComponent } from './suggest.page';
 
@@ -18,6 +19,7 @@ import { SuggestPageComponent } from './suggest.page';
     MatFormFieldModule,
     FormsModule,
     ReactiveFormsModule,
+    MatRadioModule,
   ],
 })
 export class SuggestModule { }

projects/playground/src/app/pages/suggest/suggest.module.ts

@@ -86,6 +86,16 @@ <h3>With custom template</h3>
 </mat-form-field>
 
 
+<h1>Using custom template with field interaction output</h1>
+<mat-form-field>
+    <ui-suggest [searchSourceFactory]="searchSourceFactory"
+                (itemSelected)="itemClicked($event)">
+        <ng-template let-item>
+            <mat-radio-button [checked]="isItemAdded(item)">{{item.text}}</mat-radio-button>
+        </ng-template>
+    </ui-suggest>
+</mat-form-field>
+
 <h1>Lazy Load</h1>
 <mat-form-field>
     <ui-suggest [searchSourceStrategy]="'lazy'"

projects/playground/src/app/pages/suggest/suggest.page.html

@@ -13,7 +13,9 @@ import {
   ChangeDetectionStrategy,
   Component,
 } from '@angular/core';
-import { ISuggestValues } from '@uipath/angular/components/ui-suggest';
+import {
+  ISuggestValue, ISuggestValues,
+} from '@uipath/angular/components/ui-suggest';
 import { FormControl } from '@angular/forms';
 
 @Component({
@@ -23,10 +25,23 @@ import { FormControl } from '@angular/forms';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SuggestPageComponent {
-  control = new FormControl();
+  control = new FormControl<ISuggestValue[]>([]);
 
   constructor() { }
 
+  itemClicked(item: ISuggestValue) {
+    this.control.setValue([item]);
+  }
+
+  isItemAdded(item: ISuggestValue) {
+    const value = this.control.value;
+    if (!value) {
+      return false;
+    }
+
+    return value.findIndex(itm => item.id === itm.id) !== -1;
+  }
+
   getResults(searchTerm: string): Observable<ISuggestValues<any>> {
     const options = range(0, 20).map(idx => ({
       id: idx,