feat(suggest): add custom tooltip 🍒

CHANGELOG.md

@@ -1,3 +1,8 @@
+# v14.8.8 (2023-08-11)
+* **suggest** add custom tooltip
+* **a11y** make columns reset button focusable
+* **chore** bump version to v14.8.7
+
 # v14.8.7 (2023-07-20)
 * **grid** arrow cursor on grid header text
 

package.json

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

projects/angular/components/ui-suggest/src/models/suggestValue.ts

@@ -53,4 +53,9 @@ export interface ISuggestValue extends VirtualScrollItem {
         svgIcon?: string;
         matIcon?: string;
     };
+
+    /**
+     * Tooltip associated to the entry.
+     */
+    tooltip?: string;
 }

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

@@ -100,28 +100,31 @@
                            (keydown.esc)="preventDefault($event)"
                            (keydown.tab)="close(false)"
                            (keydown.shift.tab)="close()">
-                <mat-chip *ngFor="let option of value; let i = index"
-                          [removable]="canRemoveChip(option)"
-                          [matTooltip]="intl.translateLabel(option.text)"
-                          (removed)="deselectItem(option)"
-                          class="chip-selectable">
-                    <mat-icon *ngIf="!!option?.icon?.svgIcon"
-                              [svgIcon]="option!.icon!.svgIcon!"
-                              class="chip-selectable-icon">
-                    </mat-icon>
-                    <mat-icon *ngIf="!!option?.icon?.matIcon"
-                              class="chip-selectable-icon">
-                        {{option?.icon?.matIcon}}
-                    </mat-icon>
-                    <span>
-                        {{ intl.translateLabel(option.text) }}
-                    </span>
-                    <button [attr.aria-hidden]="true"
-                            matChipRemove
-                            tabindex="-1">
-                        <mat-icon>close</mat-icon>
-                    </button>
-                </mat-chip>
+                <ng-container *ngFor="let option of value; let i = index">
+                    <mat-chip *ngLet="canRemoveChip(option) as canRemoveChip"
+                               [removable]="canRemoveChip"
+                               [matTooltip]="intl.translateLabel(option.text)"
+                               (removed)="deselectItem(option)"
+                               class="chip-selectable">
+                        <mat-icon *ngIf="!!option?.icon?.svgIcon"
+                                [svgIcon]="option!.icon!.svgIcon!"
+                                class="chip-selectable-icon">
+                        </mat-icon>
+                        <mat-icon *ngIf="!!option?.icon?.matIcon"
+                                class="chip-selectable-icon">
+                            {{option?.icon?.matIcon}}
+                        </mat-icon>
+                        <span>
+                            {{ intl.translateLabel(option.text) }}
+                        </span>
+                        <button *ngIf="canRemoveChip"
+                                [attr.aria-hidden]="true"
+                                matChipRemove
+                                tabindex="-1">
+                            <mat-icon>close</mat-icon>
+                        </button>
+                    </mat-chip>
+                </ng-container>
 
                 <ng-container *ngIf="searchable">
                     <input #searchInput
@@ -411,7 +414,7 @@
             </ng-container>
         </ng-container>
         <ng-template #defaultItem>
-            <div [matTooltip]="disableTooltip ? '' : intl.translateLabel(item.text)"
+            <div [matTooltip]="disableTooltip ? '' : intl.translateLabel(item.tooltip ?? item.text)"
                  [attr.data-item-id]="item.id"
                  matTooltipPosition="right"
                  class="ui-suggest-item">

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

@@ -1456,7 +1456,7 @@ const sharedSpecifications = (
                 discardPeriodicTasks();
             }));
 
-            it('should NOT be able to remove chip if readonly', fakeAsync(() => {
+            it('should NOT show remove button if chip is readonly', fakeAsync(() => {
                 const items = component.items!.slice(0, 3);
                 component.value = items;
                 component.readonly = true;
@@ -1466,19 +1466,7 @@ const sharedSpecifications = (
                 const initialChips = fixture.debugElement.queryAll(By.css('.mat-chip'));
                 expect(initialChips.length).toBe(3);
 
-                const chipRemoveButton = getNativeElement<HTMLButtonElement>(initialChips[1].query(By.css('button')));
-                chipRemoveButton.click();
-
-                fixture.detectChanges();
-                tick(5000);
-
-                const updatedChips = fixture.debugElement
-                    .queryAll(By.css('.mat-chip span'))
-                    .map(el => getNativeElement<HTMLSpanElement>(el));
-
-                expect(updatedChips.length).toEqual(3);
-                expect(updatedChips.map(chip => chip.innerText)).toEqual(items.map(item => item.text));
-
+                expect(initialChips[1].query(By.css('button'))).toBeFalsy();
                 discardPeriodicTasks();
             }));
         });

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

@@ -331,7 +331,7 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
             !this.isOpen &&
             this._hasValue
         ) {
-            return this._getValueSummary();
+            return this._getValueSummary(true);
         }
 
         return null;
@@ -1719,11 +1719,12 @@ export class UiSuggestComponent extends UiSuggestMatFormFieldDirective
         });
     }
 
-    private _getValueSummary() {
-        return (this.displayValueFactory ?? this._defaultDisplayValueFactory)(this.value);
+    private _getValueSummary(fromTooltip = false) {
+        return (this.displayValueFactory ?? this._defaultDisplayValueFactory)(this.value, fromTooltip);
     }
 
-    private _defaultDisplayValueFactory = (value?: ISuggestValue[]) => (value ?? []).map(v => this.intl.translateLabel(v.text)).join(', ');
+    private _defaultDisplayValueFactory = (value?: ISuggestValue[], fromTooltip = false) =>
+        (value ?? []).map(v => this.intl.translateLabel((fromTooltip && v.tooltip) || v.text)).join(', ');
 
     private _cantNavigate(increment: number) {
         return (!this.items.length &&

projects/angular/package.json

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