UI: Refactoring phone input and add to test sms dialog and contact

ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html

@@ -30,17 +30,11 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="sendTestSmsDialogContent">
     <fieldset [disabled]="(isLoading$ | async)">
-      <mat-form-field class="mat-block">
+      <tb-phone-input required
-        <mat-label translate>admin.number-to</mat-label>
+                      formControlName="numberTo"
-        <input type="tel" required [pattern]="phoneNumberPattern" matInput formControlName="numberTo">
+                      [enableFlagsSelect]="false"
-        <mat-error *ngIf="sendTestSmsFormGroup.get('numberTo').hasError('required')">
+                      [label]="'admin.number-to'">
-          {{ 'admin.number-to-required' | translate }}
+      </tb-phone-input>
-        </mat-error>
-        <mat-error *ngIf="sendTestSmsFormGroup.get('numberTo').hasError('pattern')">
-          {{ 'admin.phone-number-pattern' | translate }}
-        </mat-error>
-        <mat-hint innerHTML="{{ 'admin.phone-number-hint' | translate }}"></mat-hint>
-      </mat-form-field>
       <mat-form-field class="mat-block">
         <mat-label translate>admin.sms-message</mat-label>
         <textarea required matInput rows="3" [maxLength]="1600" formControlName="message"></textarea>

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

@@ -36,7 +36,7 @@
       <ng-template matStepLabel>{{ 'security.2fa.dialog.sms-step-label' | translate }}</ng-template>
       <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">
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="15px">
           <tb-phone-input fxFlex
                           formControlName="phone"
                           [floatLabel]="'never'"

ui-ngx/src/app/shared/components/contact.component.html

@@ -55,13 +55,11 @@
     <mat-label translate>contact.address2</mat-label>
     <input matInput formControlName="address2">
   </mat-form-field>
-  <mat-form-field class="mat-block">
+  <tb-phone-input [required]="false"
-    <mat-label translate>contact.phone</mat-label>
+                  [label]="'contact.phone'"
-    <input matInput formControlName="phone">
+                  [enableFlagsSelect]="false"
-    <mat-error *ngIf="parentForm.get('phone').hasError('maxlength')">
+                  formControlName="phone">
-      {{ 'contact.phone-max-length' | translate }}
+  </tb-phone-input>
-    </mat-error>
-  </mat-form-field>
   <mat-form-field class="mat-block">
     <mat-label translate>contact.email</mat-label>
     <input matInput formControlName="email">

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

@@ -28,7 +28,7 @@
       </mat-select>
     </div>
     <mat-form-field class="phone-input" [appearance]="appearance" [floatLabel]="floatLabel">
-      <mat-label>{{ placeholder | translate }}</mat-label>
+      <mat-label>{{ label | translate }}</mat-label>
       <input
         formControlName="phoneNumber"
         type="tel"

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

@@ -21,7 +21,6 @@
 
     .phone-input {
       width: 100%;
-      max-width: 290px;
     }
   }
 

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

@@ -55,13 +55,29 @@ import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-f
 })
 export class PhoneInputComponent implements OnInit, ControlValueAccessor, Validator {
 
-  @Input() disabled: boolean;
+  @Input()
-  @Input() defaultCountry: CountryCode = 'US';
+  disabled: boolean;
-  @Input() enableFlagsSelect = true;
+
-  @Input() required = true;
+  @Input()
-  @Input() floatLabel: FloatLabelType = 'always';
+  defaultCountry: CountryCode = 'US';
-  @Input() appearance: MatFormFieldAppearance = 'legacy';
+
-  @Input() placeholder = 'phone-input.phone-input-label';
+  @Input()
+  enableFlagsSelect = true;
+
+  @Input()
+  required = true;
+
+  @Input()
+  floatLabel: FloatLabelType = 'auto';
+
+  @Input()
+  appearance: MatFormFieldAppearance = 'legacy';
+
+  @Input()
+  placeholder;
+
+  @Input()
+  label = 'phone-input.phone-input-label';
 
   allCountries: Array<Country> = this.countryCodeData.allCountries;
   phonePlaceholder: string;