Fixed issues in Field comps (#316)

* Fixed issues in Field comps

* Added formatting for DD/MM/YYYY

* Added asterisk for required

* Fixed DateTime formatting and RadioButton styling issues

* Fixed Phone test

* Fixed Time formatting issue in readonly case

---------

Co-authored-by: Sharma <[email protected]>

Author: vishalshrm539

packages/angular-sdk-components/src/lib/_components/field/phone/phone.component.html

@@ -2,7 +2,7 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <ngx-mat-intl-tel-input
@@ -11,7 +11,8 @@
           [preferredCountries]="['us']"
           [enablePlaceholder]="true"
           [enableSearch]="true"
-          [disabled]="bDisabled$"
+          [required]="bRequired$"
+          [disabled]="bDisabled$ || bReadonly$"
           (change)="fieldOnChange()"
           (blur)="fieldOnBlur()"
         >

packages/angular-sdk-components/src/lib/_components/field/radio-buttons/radio-buttons.component.html

@@ -8,11 +8,8 @@
 <ng-template #noDisplayMode>
   <div [formGroup]="formGroup$" *ngIf="bVisible$">
     <mat-form-field class="psdk-radio-form" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <span class="psdk-label-wrapper-readonly">
-        <label class="psdk-label-readonly">{{ label$ }}</label>
-      </span>
-      <!-- <mat-label>{{label$}}</mat-label> -->
-      <input matInput [placeholder]="placeholder" style="display: none" />
+      <mat-label>{{ label$ }}</mat-label>
+      <input matInput [placeholder]="placeholder" style="display: none" [required]="bRequired$" />
       <mat-radio-group
         [value]="value$"
         [required]="bRequired$"

packages/angular-sdk-components/src/lib/_components/field/text-area/text-area.component.html

@@ -2,10 +2,11 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+  <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$">
       <div *ngIf="bVisible$">
         <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+          <mat-label>{{ label$ }}</mat-label>
           <textarea
             matInput
             rows="5"
@@ -15,6 +16,7 @@
             [value]="value$"
             [required]="bRequired$"
             [disabled]="bDisabled$"
+            [readonly]="bReadonly$"
             [formControl]="fieldControl"
             (change)="fieldOnChange($event)"
             (blur)="fieldOnBlur($event)"

packages/angular-sdk-components/src/lib/_components/field/text/text.component.ts

@@ -5,6 +5,7 @@ import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/an
 import { Utils } from '../../../_helpers/utils';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { PConnFieldProps } from '../../../_types/PConnProps.interface';
+import { format } from '../../../_helpers/formatters';
 
 interface TextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Text here
@@ -99,8 +100,9 @@ export class TextComponent implements OnInit, OnDestroy {
         break;
       case 'time':
         if (this.value$) {
-          const timeParts = this.value$.split(':');
-          this.formattedValue$ = `${timeParts[0]}:${timeParts[1]}`;
+          this.formattedValue$ = format(this.value$, 'timeonly', {
+            format: 'hh:mm A'
+          });
         } else {
           this.formattedValue$ = '';
         }

packages/angular-sdk-components/src/lib/_components/field/time/time.component.html

@@ -23,5 +23,5 @@
   </div>
 </ng-template>
 <ng-template #noEdit>
-  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'time' }"></component-mapper>
 </ng-template>

packages/angular-sdk-components/src/lib/_helpers/utils.ts

@@ -213,6 +213,10 @@ export class Utils {
         // 05/22/2021
         sReturnDate = dayjs(dateVal).format('MM/DD/YYYY');
         break;
+      case 'Date-Long-Custom-DD/MM/YYYY':
+        // 22/05/2021
+        sReturnDate = dayjs(dateVal).format('DD/MM/YYYY');
+        break;
       case 'Date':
       case 'Date-Medium':
         // Jan 1, 2001

projects/angular-test-app/tests/e2e/DigV2/FormFields/Phone.spec.js

@@ -55,6 +55,8 @@ test.describe('E2E test', () => {
     // );
     // attributes = await common.getAttributes(notrequiredPhone);
     // await expect(attributes.includes('required')).toBeFalsy();
+
+    await page.locator('ngx-mat-intl-tel-input[data-test-id="af983eaa1b85b015a7654702abd0b249"] >> input').click();
     await page.locator('button:has-text("submit")').click();
     await expect(page.locator('mat-error')).toBeVisible();