UI: Improve phone input component - to use text label and placeholder values instead of translation keys

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>

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"

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>

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">

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;