Merge pull request #7951 from kalutkaz/queueAutocompleteHint

Queue autocomplete add input hint

ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html

@@ -15,7 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectQueueFormGroup" class="mat-block autocomplete-queue">
+<mat-form-field [formGroup]="selectQueueFormGroup"
+                class="mat-block autocomplete-queue">
   <input matInput type="text" placeholder="{{ 'queue.queue-name' | translate }}"
          #queueInput
          formControlName="queueName"
@@ -50,6 +51,7 @@
       </div>
     </mat-option>
   </mat-autocomplete>
+  <mat-hint *ngIf = "autocompleteHint">{{ autocompleteHint | translate }}</mat-hint>
   <mat-error *ngIf="selectQueueFormGroup.get('queueName').hasError('required')">
     {{ 'queue.queue-required' | translate }}
   </mat-error>

ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss

@@ -19,6 +19,7 @@
     .mat-option-text {
       display: inline;
     }
+
     .queue-option-description {
       display: block;
       overflow: hidden;
@@ -27,3 +28,27 @@
     }
   }
 }
+
+:host ::ng-deep {
+  .mat-form-field {
+    .mat-form-field-wrapper {
+      padding-bottom: 0px;
+
+      .mat-form-field-underline {
+        position: initial !important;
+        display: block;
+        margin-top: -1px;
+      }
+
+      .mat-form-field-subscript-wrapper,
+      .mat-form-field-ripple {
+        position: initial !important;
+        display: table;
+      }
+
+      .mat-form-field-subscript-wrapper {
+        min-height: calc(1em + 1px);
+      }
+    }
+  }
+}

ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts

@@ -54,6 +54,9 @@ export class QueueAutocompleteComponent implements ControlValueAccessor, OnInit
   @Input()
   requiredText: string;
 
+  @Input()
+  autocompleteHint: string;
+
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;