From 0d9e8261e0ab7a77afea43784cb209ff0fb92968 Mon Sep 17 00:00:00 2001
From: d2eight <dzolotarenko@thingsboard.io>
Date: Thu, 24 Oct 2024 20:34:26 +0300
Subject: [PATCH] Adding outline appearance to the country input

---
 .../shared/components/country-autocomplete.component.html    | 2 +-
 .../app/shared/components/country-autocomplete.component.ts  | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.html b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
index eadf630dcd..c99ac037b2 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="countryFormGroup" class="mat-block" subscriptSizing="{{subscriptSizing}}">
+<mat-form-field [formGroup]="countryFormGroup" class="mat-block" subscriptSizing="{{subscriptSizing}}" [appearance]="appearance">
   <mat-label>{{ labelText }}</mat-label>
   <input matInput type="text"
          #countryInput
diff --git a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
index 95629496eb..3bd7184bb4 100644
--- a/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/country-autocomplete.component.ts
@@ -28,7 +28,7 @@ import {
 import { isNotEmptyStr } from '@core/utils';
 import { Observable, of } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { SubscriptSizing, MatFormFieldAppearance } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { TranslateService } from '@ngx-translate/core';
 
@@ -71,6 +71,9 @@ export class CountryAutocompleteComponent implements OnInit, ControlValueAccesso
   @coerceBoolean()
   required = false;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   @Input()
   subscriptSizing: SubscriptSizing = 'fixed';