From 02d1cab445b7594ac2313241c6296c0c055fa196 Mon Sep 17 00:00:00 2001
From: Kalutka Zhenya <ykalytka@thingsboard.io>
Date: Mon, 16 Jan 2023 15:11:40 +0200
Subject: [PATCH 1/5] Add hint Input for queue autocomplete

---
 .../queue/queue-autocomplete.component.html           |  5 ++++-
 .../components/queue/queue-autocomplete.component.ts  | 11 +++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
index 89be676ce2..fd726c83ac 100644
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
@@ -15,7 +15,9 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="selectQueueFormGroup" class="mat-block autocomplete-queue">
+<mat-form-field [formGroup]="selectQueueFormGroup"
+                [ngStyle] = "autocompleteHint ? {'padding-bottom': '16px'} : {}"
+                class="mat-block autocomplete-queue">
   <input matInput type="text" placeholder="{{ 'queue.queue-name' | translate }}"
          #queueInput
          formControlName="queueName"
@@ -50,6 +52,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>
diff --git a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts
index 4b445b5175..dcacfba3f8 100644
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts
@@ -54,10 +54,21 @@ export class QueueAutocompleteComponent implements ControlValueAccessor, OnInit
   @Input()
   requiredText: string;
 
+  private hint: string;
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;
   }
+
+  @Input()
+  set autocompleteHint(value) {
+    this.hint = value;
+  }
+
+  get autocompleteHint() {
+    return this.hint;
+  }
+
   @Input()
   set required(value: boolean) {
     this.requiredValue = coerceBooleanProperty(value);

From e0d936eeba2d364f6b2d4acccefdd9efb724bc30 Mon Sep 17 00:00:00 2001
From: Kalutka Zhenya <ykalytka@thingsboard.io>
Date: Mon, 16 Jan 2023 15:14:11 +0200
Subject: [PATCH 2/5] Refactoring

---
 .../shared/components/queue/queue-autocomplete.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
index fd726c83ac..fe3b38e167 100644
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
@@ -52,7 +52,7 @@
       </div>
     </mat-option>
   </mat-autocomplete>
-  <mat-hint *ngIf = "autocompleteHint">{{autocompleteHint | translate}}</mat-hint>
+  <mat-hint *ngIf = "autocompleteHint">{{ autocompleteHint | translate }}</mat-hint>
   <mat-error *ngIf="selectQueueFormGroup.get('queueName').hasError('required')">
     {{ 'queue.queue-required' | translate }}
   </mat-error>

From 6617223435b458c1dd0a7d562d32e6bcd3e72dd7 Mon Sep 17 00:00:00 2001
From: Kalutka Zhenya <ykalytka@thingsboard.io>
Date: Mon, 16 Jan 2023 18:00:09 +0200
Subject: [PATCH 3/5] Fix queue autocomplete style

---
 .../queue/queue-autocomplete.component.html   |  1 -
 .../queue/queue-autocomplete.component.scss   | 24 ++++++++++++++++++-
 .../queue/queue-autocomplete.component.ts     | 13 +++-------
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
index fe3b38e167..60370f8020 100644
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.html
@@ -16,7 +16,6 @@
 
 -->
 <mat-form-field [formGroup]="selectQueueFormGroup"
-                [ngStyle] = "autocompleteHint ? {'padding-bottom': '16px'} : {}"
                 class="mat-block autocomplete-queue">
   <input matInput type="text" placeholder="{{ 'queue.queue-name' | translate }}"
          #queueInput
diff --git a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss
index 45a4ab9808..bd1a1cdbbb 100644
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-::ng-deep {
+:host ::ng-deep {
   .queue-option {
     .mat-option-text {
       display: inline;
@@ -26,4 +26,26 @@
       white-space: nowrap;
     }
   }
+
+  .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);
+      }
+    }
+  }
 }
diff --git a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts
index dcacfba3f8..6270b6db75 100644
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts
@@ -54,21 +54,14 @@ export class QueueAutocompleteComponent implements ControlValueAccessor, OnInit
   @Input()
   requiredText: string;
 
-  private hint: string;
+  @Input()
+  autocompleteHint: string;
+
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;
   }
 
-  @Input()
-  set autocompleteHint(value) {
-    this.hint = value;
-  }
-
-  get autocompleteHint() {
-    return this.hint;
-  }
-
   @Input()
   set required(value: boolean) {
     this.requiredValue = coerceBooleanProperty(value);

From 54351756c783b7d46e97f13848082769835a6580 Mon Sep 17 00:00:00 2001
From: Kalutka Zhenya <ykalytka@thingsboard.io>
Date: Mon, 16 Jan 2023 18:02:49 +0200
Subject: [PATCH 4/5] Refactoring

---
 .../app/shared/components/queue/queue-autocomplete.component.ts  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts
index 6270b6db75..13efa2a546 100644
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.ts
@@ -61,7 +61,6 @@ export class QueueAutocompleteComponent implements ControlValueAccessor, OnInit
   get required(): boolean {
     return this.requiredValue;
   }
-
   @Input()
   set required(value: boolean) {
     this.requiredValue = coerceBooleanProperty(value);

From f09f4f9246c12d06682380515a9bdd2b9d8090fc Mon Sep 17 00:00:00 2001
From: Kalutka Zhenya <ykalytka@thingsboard.io>
Date: Mon, 16 Jan 2023 18:24:01 +0200
Subject: [PATCH 5/5] bugfix

---
 .../components/queue/queue-autocomplete.component.scss       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss
index bd1a1cdbbb..ccd90f0806 100644
--- a/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss
+++ b/ui-ngx/src/app/shared/components/queue/queue-autocomplete.component.scss
@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-:host ::ng-deep {
+::ng-deep {
   .queue-option {
     .mat-option-text {
       display: inline;
     }
+
     .queue-option-description {
       display: block;
       overflow: hidden;
@@ -26,7 +27,9 @@
       white-space: nowrap;
     }
   }
+}
 
+:host ::ng-deep {
   .mat-form-field {
     .mat-form-field-wrapper {
       padding-bottom: 0px;