From e5c99cf92f7f79f263573841bd6026bed2955371 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 11 Jul 2023 14:55:52 +0300
Subject: [PATCH] UI: Added on unit input to show the clear button when
 hovering the element

---
 .../shared/components/unit-input.component.html   |  2 +-
 ui-ngx/src/form.scss                              | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/unit-input.component.html b/ui-ngx/src/app/shared/components/unit-input.component.html
index dee26af8d0..141ab322d4 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/unit-input.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field appearance="outline" class="tb-inline-field" subscriptSizing="dynamic">
+<mat-form-field appearance="outline" class="tb-inline-field tb-suffix-show-on-hover" subscriptSizing="dynamic">
   <input matInput #unitInput [formControl]="unitsFormControl"
          placeholder="{{ 'widget-config.set' | translate }}"
          (focusin)="onFocus()"
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 1f27e59279..35eb7782fe 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -268,6 +268,21 @@
         }
       }
     }
+    &.tb-suffix-show-on-hover {
+      .mat-mdc-text-field-wrapper {
+        .mat-mdc-form-field-icon-suffix {
+          padding: 0;
+          display: none;
+        }
+      }
+      &:hover {
+        .mat-mdc-text-field-wrapper {
+          .mat-mdc-form-field-icon-suffix {
+            display: block;
+          }
+        }
+      }
+    }
   }
 
   .tb-form-table {