From 3e6831e07ccc115539e4371bbfd3eb24d8fba927 Mon Sep 17 00:00:00 2001
From: devaskim <dev.devaskim@gmail.com>
Date: Sun, 23 Oct 2022 14:55:14 +0500
Subject: [PATCH] Add option to change form field appearance in timezone and
 entity autcomplete components.

---
 .../components/entity/entity-autocomplete.component.html      | 2 +-
 .../shared/components/entity/entity-autocomplete.component.ts | 4 ++++
 .../app/shared/components/time/timezone-select.component.html | 2 +-
 .../app/shared/components/time/timezone-select.component.ts   | 4 ++++
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
index 24a2370e72..efa10a3ad3 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
+++ b/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"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts b/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
index 706b34b12a..03bc4147f9 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
+++ b/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;
diff --git a/ui-ngx/src/app/shared/components/time/timezone-select.component.html b/ui-ngx/src/app/shared/components/time/timezone-select.component.html
index 2d3a027144..be3c88f131 100644
--- a/ui-ngx/src/app/shared/components/time/timezone-select.component.html
+++ b/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
diff --git a/ui-ngx/src/app/shared/components/time/timezone-select.component.ts b/ui-ngx/src/app/shared/components/time/timezone-select.component.ts
index 8c6a3d62e8..3b8a4118e3 100644
--- a/ui-ngx/src/app/shared/components/time/timezone-select.component.ts
+++ b/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) {