fix(suggest): condition title display by input

Author: CatalinB7

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

@@ -44,7 +44,7 @@
             <ng-template #showDefaultValue>
                 <div [matTooltip]="tooltip ?? ''"
                      class="display-container text-ellipsis">
-                    <span *ngIf="!isFormControl && placeholder"
+                    <span *ngIf="!isFormControl && placeholder && !shouldHideTitle"
                           class="display-title"
                           aria-hidden="true">
                         {{ placeholder }}:

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

@@ -89,6 +89,7 @@ class UiSuggestFixtureDirective {
     displayPriority: 'default' | 'selected' = 'default';
     fetchStrategy: 'eager' | 'onOpen' = 'eager';
     minChars = 0;
+    shouldHideTitle = false;
 
     set value(value: ISuggestValue[] | undefined) {
         this._value = value;
@@ -148,6 +149,21 @@ const sharedSpecifications = (
     });
 
     describe('Behavior: standard usage', () => {
+        ([true, false].forEach(shouldHideTitle => {
+            it(`should ${shouldHideTitle ? 'not' : ''} display title if shouldHideTitle is ${shouldHideTitle}`, () => {
+                component.placeholder = 'some place holder';
+                component.shouldHideTitle = shouldHideTitle;
+
+                fixture.detectChanges();
+                const spanElem = document.querySelector('.display-title');
+                if (shouldHideTitle || uiSuggest.isFormControl) {
+                    expect(spanElem).toBeNull();
+                } else {
+                    expect(spanElem).toBeTruthy();
+                }
+            });
+        }));
+
         it('should be initialized', () => {
             expect(uiSuggest).toBeDefined();
         });
@@ -2464,7 +2480,8 @@ describe('Component: UiSuggest', () => {
                         [minChars]="minChars"
                         [drillDown]="drillDown"
                         [readonly]="readonly"
-                        [compact]="compact">
+                        [compact]="compact"
+                        [shouldHideTitle]="shouldHideTitle">
             </ui-suggest>
         `,
     })

projects/angular/components/ui-suggest/src/ui-suggest.mat-form-field.ts

@@ -103,6 +103,13 @@ export abstract class UiSuggestMatFormFieldDirective implements
         this.stateChanges.next();
     }
 
+    /**
+     * Hides the combo box title.
+     *
+     */
+    @Input()
+    shouldHideTitle = false;
+
     /**
      * Set a custom size for the list items.
      *