UI: Add input placeholder

ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html

@@ -37,7 +37,11 @@
       <form [formGroup]="smsConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.sms-step-description</p>
         <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
-          <tb-phone-input fxFlex formControlName="phone" [floatLabel]="'never'"></tb-phone-input>
+          <tb-phone-input fxFlex
+                          formControlName="phone"
+                          [floatLabel]="'never'"
+                          [placeholder]="'security.2fa.dialog.sms-step-label'">
+          </tb-phone-input>
           <button mat-raised-button
                   type="submit"
                   color="primary"

ui-ngx/src/app/shared/components/phone-input.component.html

@@ -28,12 +28,12 @@
       </mat-select>
     </div>
     <mat-form-field class="phone-input" [appearance]="appearance" [floatLabel]="floatLabel">
-      <mat-label translate>security.2fa.dialog.sms-step-label</mat-label>
+      <mat-label>{{ placeholder | translate }}</mat-label>
       <input
         formControlName="phoneNumber"
         type="tel"
         matInput
-        placeholder="{{ 'security.2fa.dialog.sms-step-label' | translate }}"
+        placeholder="{{ placeholder | translate }}"
         [pattern]="phoneNumberPattern"
         (focus)="focus()"
         autocomplete="off"

ui-ngx/src/app/shared/components/phone-input.component.ts

@@ -61,6 +61,7 @@ export class PhoneInputComponent implements OnInit, ControlValueAccessor, Valida
   @Input() required = true;
   @Input() floatLabel: FloatLabelType = 'always';
   @Input() appearance: MatFormFieldAppearance = 'legacy';
+  @Input() placeholder = 'phone-input.phone-input-label';
 
   allCountries: Array<Country> = this.countryCodeData.allCountries;
   phonePlaceholder: string;