feat(suggest): add custom tooltip

Author: CalinaCristian

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-row *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-row>
+                <ng-container *ngFor="let option of value; let i = index">
+                    <mat-chip-row *ngLet="canRemoveChip(option) as canRemoveChip"
+                                   [removable]="canRemoveChip"
+                                   [matTooltip]="intl.translateLabel(option.tooltip ?? 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-row>
+                </ng-container>
 
                 <input #searchInput
                            [uiAutofocus]="isOpen"
@@ -408,7 +411,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

@@ -1471,7 +1471,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;
@@ -1481,19 +1481,7 @@ const sharedSpecifications = (
                 const initialChips = fixture.debugElement.queryAll(By.css('.mat-mdc-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(SELECTORS.chipLabel))
-                    .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 &&