Merge pull request #7475 from engix-ltd/timezone_and_entity_appearance

[3.4.2] UI: Form field appearance in timezone and entity autocomplete components

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectEntityFormGroup" class="mat-block">
+<mat-form-field [formGroup]="selectEntityFormGroup" class="mat-block" [appearance]="appearance">
   <input matInput type="text" placeholder="{{ entityText | translate }}"
          #entityInput
          formControlName="entity"

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

@@ -25,6 +25,7 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
+import { MatFormFieldAppearance } from '@angular/material/form-field/form-field';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { merge, Observable, of, Subject } from 'rxjs';
 import { catchError, debounceTime, map, share, switchMap, tap } from 'rxjs/operators';
@@ -96,6 +97,9 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
   @Input()
   requiredText: string;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'legacy';
+
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;

ui-ngx/src/app/shared/components/time/timezone-select.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectTimezoneFormGroup" fxFlex class="mat-block">
+<mat-form-field [formGroup]="selectTimezoneFormGroup" fxFlex class="mat-block" [appearance]="appearance">
   <mat-label translate>timezone.timezone</mat-label>
   <input matInput type="text" placeholder="{{ 'timezone.select-timezone' | translate }}"
          #timezoneInput

ui-ngx/src/app/shared/components/time/timezone-select.component.ts

@@ -16,6 +16,7 @@
 
 import { AfterViewInit, Component, forwardRef, Input, NgZone, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MatFormFieldAppearance } from '@angular/material/form-field/form-field';
 import { Observable, of } from 'rxjs';
 import { map, mergeMap, share, tap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
@@ -44,6 +45,9 @@ export class TimezoneSelectComponent implements ControlValueAccessor, OnInit, Af
 
   defaultTimezoneId: string = null;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'legacy';
+
   @Input()
   set defaultTimezone(timezone: string) {
     if (this.defaultTimezoneId !== timezone) {