From d9fb621d04fa59f25c8e565e91380356e0f3e780 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 25 Jan 2023 15:18:15 +0200
Subject: [PATCH] UI: Improve phone input component - to use text label and
 placeholder values instead of translation keys

---
 .../home/pages/admin/send-test-sms-dialog.component.html      | 2 +-
 .../authentication-dialog/sms-auth-dialog.component.html      | 2 +-
 ui-ngx/src/app/shared/components/contact.component.html       | 2 +-
 ui-ngx/src/app/shared/components/phone-input.component.html   | 4 ++--
 ui-ngx/src/app/shared/components/phone-input.component.ts     | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
index 40cc60f730..0827db128d 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
@@ -33,7 +33,7 @@
       <tb-phone-input required
                       formControlName="numberTo"
                       [enableFlagsSelect]="false"
-                      [label]="'admin.number-to'">
+                      label="{{ 'admin.number-to' | translate }}">
       </tb-phone-input>
       <mat-form-field class="mat-block">
         <mat-label translate>admin.sms-message</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index aace1d7152..c9f83c6918 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -40,7 +40,7 @@
           <tb-phone-input fxFlex
                           formControlName="phone"
                           [floatLabel]="'never'"
-                          [placeholder]="'security.2fa.dialog.sms-step-label'">
+                          placeholder="{{ 'security.2fa.dialog.sms-step-label' | translate }}">
           </tb-phone-input>
           <button mat-raised-button
                   type="submit"
diff --git a/ui-ngx/src/app/shared/components/contact.component.html b/ui-ngx/src/app/shared/components/contact.component.html
index d3e6c474d0..2c2f0c795f 100644
--- a/ui-ngx/src/app/shared/components/contact.component.html
+++ b/ui-ngx/src/app/shared/components/contact.component.html
@@ -56,7 +56,7 @@
     <input matInput formControlName="address2">
   </mat-form-field>
   <tb-phone-input [required]="false"
-                  [label]="'contact.phone'"
+                  label="{{ 'contact.phone' | translate }}"
                   [enableFlagsSelect]="true"
                   formControlName="phone">
   </tb-phone-input>
diff --git a/ui-ngx/src/app/shared/components/phone-input.component.html b/ui-ngx/src/app/shared/components/phone-input.component.html
index 4a7b36b50e..2fceb4d8ce 100644
--- a/ui-ngx/src/app/shared/components/phone-input.component.html
+++ b/ui-ngx/src/app/shared/components/phone-input.component.html
@@ -29,12 +29,12 @@
       </mat-select>
     </div>
     <mat-form-field class="phone-input" [appearance]="appearance" [floatLabel]="floatLabel">
-      <mat-label>{{ label | translate }}</mat-label>
+      <mat-label>{{ label }}</mat-label>
       <input
         formControlName="phoneNumber"
         type="tel"
         matInput
-        placeholder="{{ placeholder | translate }}"
+        placeholder="{{ placeholder }}"
         (focus)="focus()"
         autocomplete="off"
         [required]="required">
diff --git a/ui-ngx/src/app/shared/components/phone-input.component.ts b/ui-ngx/src/app/shared/components/phone-input.component.ts
index 7642de4fb3..e1460c32b0 100644
--- a/ui-ngx/src/app/shared/components/phone-input.component.ts
+++ b/ui-ngx/src/app/shared/components/phone-input.component.ts
@@ -75,7 +75,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
   placeholder;
 
   @Input()
-  label = 'phone-input.phone-input-label';
+  label = this.translate.instant('phone-input.phone-input-label');
 
   get showFlagSelect(): boolean {
     return this.enableFlagsSelect && !this.isLegacy;