@pega/dx-component-builder-sdk 0.25.5 → 0.25.7

package/tests/assets/sdk-a/components/create/override-sdk/field/email/email.component.ts

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface EmailProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Email here
@@ -43,6 +44,8 @@ export class EmailComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -139,7 +142,10 @@ export class EmailComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -153,12 +159,26 @@ export class EmailComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const value = event?.target?.value;
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const value = event?.target?.value;
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    }
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/create/override-sdk/field/group/group.component.ts

@@ -73,12 +73,12 @@ export class GroupComponent implements OnInit {
       this.visibility$ = this.pConn$.getComputedVisibility();
     }
 
-    if (this.configProps$.displayMode === 'LABELS_LEFT') {
+    if (this.configProps$.displayMode === 'DISPLAY_ONLY') {
       if (this.configProps$.visibility === undefined) this.visibility$ = true;
 
       this.arChildren$.forEach(child => {
         const pConn = child.getPConnect();
-        pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+        pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         pConn.setInheritedProp('readOnly', true);
 
         return child;

package/tests/assets/sdk-a/components/create/override-sdk/field/integer/integer.component.ts

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface IntegerProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Integer here
@@ -43,6 +44,8 @@ export class IntegerComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl<number | null>(null, null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -115,6 +118,9 @@ export class IntegerComponent implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -142,7 +148,7 @@ export class IntegerComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -156,12 +162,24 @@ export class IntegerComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      const value = event?.target?.value;
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    }
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/create/override-sdk/field/percentage/percentage.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
@@ -13,8 +13,8 @@
           [options]="{
             prefix: '',
             suffix: '%',
-            thousands: currSep,
-            decimal: currDec,
+            thousands: thousandSeparator,
+            decimal: decimalSeparator,
             align: 'left',
             nullable: true,
             precision: decimalPrecision,

package/tests/assets/sdk-a/components/create/override-sdk/field/percentage/percentage.component.ts

@@ -11,10 +11,12 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { getCurrencyCharacters } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface PercentageProps extends PConnFieldProps {
   showGroupSeparators?: string;
   decimalPrecision?: number;
+  currencyISOCode?: string;
   // If any, enter additional props that only exist on Percentage here
 }
 
@@ -46,11 +48,14 @@ export class PercentageComponent implements OnInit, OnDestroy {
   testId: string;
   helperText: string;
   placeholder: string;
-  currDec: string;
-  currSep: string;
+  decimalSeparator: string;
+  thousandSeparator: string;
   inputMode: any;
   decimalPrecision: number | undefined;
   fieldControl = new FormControl<number | null>(null, null);
+  actionsApi: Object;
+  propName: string;
+  formattedValue: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,20 +118,25 @@ export class PercentageComponent implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
     this.inputMode = NgxCurrencyInputMode.Natural;
-    let nValue: any = this.configProps$.value;
+    const nValue: any = this.configProps$.value;
     if (nValue) {
-      if (typeof nValue === 'string') {
-        nValue = parseInt(nValue, 10);
-      }
       this.value$ = nValue;
+      this.fieldControl.setValue(nValue);
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
     const showGroupSeparators = this.configProps$.showGroupSeparators;
 
     const theSymbols = getCurrencyCharacters('');
-    this.currDec = theSymbols.theDecimalIndicator || '2';
-    this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+    this.decimalSeparator = theSymbols.theDecimalIndicator;
+    this.thousandSeparator = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      this.formattedValue = nValue ? format(nValue, 'percentage') : '';
+    }
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
@@ -157,7 +167,7 @@ export class PercentageComponent implements OnInit, OnDestroy {
 
     this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -170,21 +180,36 @@ export class PercentageComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    let value = event?.target?.value;
-    value = value?.replace('%', '');
-    if (this.currSep === ',') {
-      value = value.replace(/,/g, '');
-    } else {
-      value = value?.replace(/\./g, '');
-      value = value?.replace(/,/g, '.');
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      let value = event?.target?.value;
+      value = value ? value.replace(/%/g, '') : '';
+      // replacing thousand separator with empty string as not required in api call
+      if (this.configProps$.showGroupSeparators) {
+        const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
+        const regExp = new RegExp(String.raw`${thousandSep}`, 'g');
+        value = value?.replace(regExp, '');
+      }
+      // replacing decimal separator with '.'
+      if (this.decimalSeparator !== '.') {
+        const regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
+        value = value.replace(regExp, '.');
+      }
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
-    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/create/override-sdk/field/phone/config-ext.json

@@ -4,6 +4,6 @@
     "label": "Phone",
     "description": "Phone",
     "type": "Field",
-    "subtype": "DATA_CAPTURE",
+    "subtype": "Text-Phone",
     "properties": []
 }

package/tests/assets/sdk-a/components/create/override-sdk/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,8 +11,10 @@
           [preferredCountries]="['us']"
           [enablePlaceholder]="true"
           [enableSearch]="true"
+          [required]="bRequired$"
+          [disabled]="bDisabled$ || bReadonly$"
           (change)="fieldOnChange()"
-          (blur)="fieldOnBlur($event)"
+          (blur)="fieldOnBlur()"
         >
         </ngx-mat-intl-tel-input>
         <mat-label>{{ label$ }}</mat-label>

package/tests/assets/sdk-a/components/create/override-sdk/field/phone/phone.component.ts

@@ -38,17 +38,13 @@ export class PhoneComponent implements OnInit, OnDestroy {
   displayMode$?: string = '';
   controlName$: string;
   bHasForm$ = true;
-  componentReference = '';
   testId: string;
-  separateDialCode = false;
-  afterBlur: boolean;
   helperText: string;
 
   fieldControl = new FormControl('', null);
 
-  phoneForm = new FormGroup({
-    phone: new FormControl<string | null>(null)
-  });
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -114,9 +110,13 @@ export class PhoneComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
     }
     this.helperText = this.configProps$.helperText;
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -144,10 +144,6 @@ export class PhoneComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    if (this.bReadonly$) {
-      this.phoneForm.setValue({ phone: this.value$ });
-    }
-
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
       const timer = interval(100).subscribe(() => {
@@ -159,27 +155,21 @@ export class PhoneComponent implements OnInit, OnDestroy {
     }
   }
 
+  fieldOnBlur() {
+    // 'blur' isn't getting fired
+  }
+
   fieldOnChange() {
-    if (this.formGroup$.controls[this.controlName$].value) {
-      const actionsApi = this.pConn$?.getActionsApi();
-      const propName = (this.pConn$?.getStateProps() as any).value;
+    const oldVal = this.value$ ?? '';
+    const newVal = this.formGroup$.controls[this.controlName$].value;
+    const isValueChanged = newVal?.toString() !== oldVal.toString();
+
+    if (isValueChanged && newVal) {
       const value = this.formGroup$.controls[this.controlName$].value;
-      const eventObj = {
-        target: {
-          value
-        }
-      };
-      this.afterBlur = true;
-      this.angularPConnectData.actions?.onChange(this, eventObj);
-      handleEvent(actionsApi, 'blur', propName, value);
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
   }
 
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
-  }
-
   getErrorMessage() {
     let errMessage = '';
 

package/tests/assets/sdk-a/components/create/override-sdk/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$"
@@ -24,7 +21,7 @@
         <mat-radio-button
           *ngFor="let opt of options$"
           [checked]="isSelected(opt.key)"
-          [disabled]="bReadonly$"
+          [disabled]="bDisabled$ || bReadonly$"
           [value]="opt.key"
           class="psdk-radio-button"
         >

package/tests/assets/sdk-a/components/create/override-sdk/field/radio-buttons/radio-buttons.component.ts

@@ -9,6 +9,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface IOption {
   key: string;
@@ -60,6 +61,8 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -164,13 +167,15 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
 
-    const propName = (this.pConn$.getStateProps() as any).value;
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     const className = this.pConn$.getCaseInfo().getClassName();
-    const refName = propName?.slice(propName.lastIndexOf('.') + 1);
+    const refName = this.propName?.slice(this.propName.lastIndexOf('.') + 1);
 
     this.fieldMetadata = this.configProps$.fieldMetadata;
     const metaData = Array.isArray(this.fieldMetadata) ? this.fieldMetadata.filter(field => field?.classID === className)[0] : this.fieldMetadata;
@@ -203,12 +208,7 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
 
   getLocalizedOptionValue(opt: IOption) {

package/tests/assets/sdk-a/components/create/override-sdk/field/rich-text/config-ext.json

@@ -0,0 +1,11 @@
+{
+    "componentKey": "RichText",
+    "name": "RichText",
+    "label": "Rich text editor",
+    "description": "Text (paragraph)",
+    "type": "Field",
+    "subtype": "Text-Paragraph",
+    "icon": "images/pz-text-area-active.svg",
+    "properties": [],
+    "defaultConfig": {}
+}

package/tests/assets/sdk-a/components/create/override-sdk/field/rich-text/rich-text.component.ts

@@ -40,6 +40,8 @@ export class RichTextComponent implements OnInit, OnDestroy {
   info: any;
   error: boolean;
   status: any;
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -80,7 +82,7 @@ export class RichTextComponent implements OnInit, OnDestroy {
   updateSelf(): void {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as RichTextProps;
-    const stateProps: any = this.pConn$.getStateProps();
+    const stateProps = this.pConn$.getStateProps();
     this.status = stateProps?.status;
 
     if (this.configProps$.value != undefined) {
@@ -94,6 +96,9 @@ export class RichTextComponent implements OnInit, OnDestroy {
     this.info = stateProps?.validatemessage || this.configProps$.helperText;
     this.error = stateProps?.status === 'error';
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     if (this.configProps$.required != null) {
       this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
     }
@@ -111,9 +116,13 @@ export class RichTextComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange() {
-    if (this.status === 'error') {
-      const property = (this.pConn$.getStateProps() as any).value;
+  fieldOnChange(editorValue: any) {
+    const oldVal = this.value$ ?? '';
+    const newVal = editorValue?.editor?.getBody()?.innerHTML ?? '';
+    const isValueChanged = newVal.toString() !== oldVal.toString();
+
+    if (isValueChanged || this.status === 'error') {
+      const property = this.propName;
       this.pConn$.clearErrorMessages({
         property,
         category: '',
@@ -123,9 +132,11 @@ export class RichTextComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(editorValue: any) {
-    // PConnect wants to use eventHandler for onBlur
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, editorValue);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = editorValue.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, editorValue);
+    }
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/field/scalar-list/scalar-list.component.ts

@@ -101,20 +101,19 @@ export class ScalarListComponent implements OnInit, OnDestroy {
         {
           type: componentType,
           config: {
-            // @ts-ignore - Object literal may only specify known properties, and 'value' does not exist in type 'ComponentMetadataConfig'.
             value: scalarValue,
-            displayMode: 'LABELS_LEFT',
+            displayMode: 'DISPLAY_ONLY',
             label: this.label$,
             ...restProps,
             readOnly: true
           }
         },
         '',
-        '',
+        0,
         {}
       ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
     });
-    this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$ as string);
+    this.isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$ as string);
     this.value$ = this.items;
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/field/text/text.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface TextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Text here
@@ -18,6 +20,7 @@ interface TextProps extends PConnFieldProps {
 })
 export class TextComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
   @Input() formatAs$: string;
 
   // Used with AngularPConnect
@@ -97,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$ = '';
         }
@@ -142,7 +146,7 @@ export class TextComponent implements OnInit, OnDestroy {
   generateDateTime(sVal): string {
     if (!sVal) return '';
     if (sVal.length === 10) return this.generateDate(sVal);
-    const value = sVal.substring(0, sVal.length - 1);
+    // const value = sVal.substring(0, sVal.length - 1);
     // value = new Intl.DateTimeFormat('default', {
     //   year: 'numeric',
     //   month: 'numeric',
@@ -153,6 +157,6 @@ export class TextComponent implements OnInit, OnDestroy {
     //   hour12: true,
     // }).format(new Date(value))
 
-    return this.utils.generateDateTime(value, 'DateTime-Long-YYYY-Custom');
+    return this.utils.generateDateTime(sVal, 'DateTime-Long-YYYY-Custom');
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/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,8 +16,10 @@
             [value]="value$"
             [required]="bRequired$"
             [disabled]="bDisabled$"
+            [readonly]="bReadonly$"
             [formControl]="fieldControl"
             (change)="fieldOnChange($event)"
+            (blur)="fieldOnBlur($event)"
           ></textarea>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
         </mat-form-field>