@pega/angular-sdk-overrides 24.2.10 → 24.2.12

package/lib/field/phone/config-ext.json

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

package/lib/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,6 +11,8 @@
           [preferredCountries]="['us']"
           [enablePlaceholder]="true"
           [enableSearch]="true"
+          [required]="bRequired$"
+          [disabled]="bDisabled$ || bReadonly$"
           (change)="fieldOnChange()"
           (blur)="fieldOnBlur()"
         >

package/lib/field/phone/phone.component.ts

@@ -38,18 +38,11 @@ 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;
 
@@ -117,6 +110,7 @@ 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;
 
@@ -150,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(() => {
@@ -170,9 +160,12 @@ export class PhoneComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange() {
-    if (this.formGroup$.controls[this.controlName$].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;
-      this.afterBlur = true;
       handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
   }

package/lib/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/lib/field/rich-text/rich-text.component.ts

@@ -116,8 +116,12 @@ export class RichTextComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange() {
-    if (this.status === 'error') {
+  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,
@@ -128,6 +132,11 @@ export class RichTextComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(editorValue: any) {
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, editorValue);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = editorValue.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, editorValue);
+    }
   }
 }

package/lib/field/text/text.component.ts

@@ -5,6 +5,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 { format } from '@pega/angular-sdk-components';
 
 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$ = '';
         }
@@ -144,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',
@@ -155,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/lib/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,9 @@
             [value]="value$"
             [required]="bRequired$"
             [disabled]="bDisabled$"
+            [readonly]="bReadonly$"
             [formControl]="fieldControl"
-            (change)="fieldOnChange()"
+            (change)="fieldOnChange($event)"
             (blur)="fieldOnBlur($event)"
           ></textarea>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

package/lib/field/text-area/text-area.component.ts

@@ -159,15 +159,25 @@ export class TextAreaComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange() {
-    this.pConn$.clearErrorMessages({
-      property: this.propName
-    });
+  fieldOnChange(event: any) {
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    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/lib/field/text-input/text-input.component.html

@@ -14,7 +14,7 @@
           [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
-          (change)="fieldOnChange()"
+          (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

package/lib/field/text-input/text-input.component.ts

@@ -161,15 +161,25 @@ export class TextInputComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange() {
-    this.pConn$.clearErrorMessages({
-      property: this.propName
-    });
+  fieldOnChange(event: any) {
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    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/lib/field/time/time.component.html

@@ -14,7 +14,7 @@
           [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
-          (change)="fieldOnChange()"
+          (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
@@ -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>

package/lib/field/time/time.component.ts

@@ -165,15 +165,30 @@ export class TimeComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange() {
-    this.pConn$.clearErrorMessages({
-      property: this.propName
-    });
+  fieldOnChange(event: any) {
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event?.target?.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      let value = event?.target?.value;
+      const hhmmPattern = /^\d{2}:\d{2}$/;
+      if (hhmmPattern.test(value)) {
+        value = `${value}:00`; // append ":00"
+      }
+
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    }
   }
 
   getErrorMessage() {

package/lib/field/url/url.component.html

@@ -14,7 +14,7 @@
           [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
-          (change)="fieldOnChange()"
+          (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

package/lib/field/url/url.component.ts

@@ -159,15 +159,25 @@ export class UrlComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange() {
-    this.pConn$.clearErrorMessages({
-      property: this.propName
-    });
+  fieldOnChange(event: any) {
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
+
+    if (isValueChanged) {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    const value = event?.target?.value;
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    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/lib/field/user-reference/user-reference.component.html

@@ -1,45 +1,47 @@
-<div class="psdk-user-reference">
+<div>
   <div *ngIf="displayMode$; else noDisplayMode">
     <component-mapper name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
   </div>
   <ng-template #noDisplayMode>
-    <div *ngIf="type === 'operator'">
-      <component-mapper name="Operator" [props]="{ pConn$ }"></component-mapper>
-    </div>
-    <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-        <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
-          <mat-option *ngFor="let opt of options$" [value]="opt.key">
-            {{ opt.value }}
-          </mat-option>
-        </mat-select>
-        <mat-label>{{ label$ }}</mat-label>
-        <mat-error *ngIf="fieldControl.invalid">
-          {{ getErrorMessage() }}
-        </mat-error>
-      </mat-form-field>
-    </div>
-    <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-        <mat-label>{{ label$ }}</mat-label>
-        <input
-          matInput
-          [placeholder]="placeholder"
-          [formControl]="fieldControl"
-          [required]="bRequired$"
-          [matAutocomplete]="auto"
-          [attr.data-test-id]="testId"
-          (blur)="fieldOnBlur($event)"
-        />
-        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
-          <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
-            <span>{{ opt.value }}</span>
-          </mat-option>
-        </mat-autocomplete>
-        <mat-error *ngIf="fieldControl.invalid">
-          {{ getErrorMessage() }}
-        </mat-error>
-      </mat-form-field>
+    <div class="psdk-user-reference">
+      <div *ngIf="this.userID$ && type === 'operator'">
+        <component-mapper name="Operator" [props]="{ pConn$, name$: userName$ }"></component-mapper>
+      </div>
+      <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+          <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
+            <mat-option *ngFor="let opt of options$" [value]="opt.key">
+              {{ opt.value }}
+            </mat-option>
+          </mat-select>
+          <mat-label>{{ label$ }}</mat-label>
+          <mat-error *ngIf="fieldControl.invalid">
+            {{ getErrorMessage() }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+          <mat-label>{{ label$ }}</mat-label>
+          <input
+            matInput
+            [placeholder]="placeholder"
+            [formControl]="fieldControl"
+            [required]="bRequired$"
+            [matAutocomplete]="auto"
+            [attr.data-test-id]="testId"
+            (blur)="fieldOnBlur($event)"
+          />
+          <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
+            <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
+              <span>{{ opt.value }}</span>
+            </mat-option>
+          </mat-autocomplete>
+          <mat-error *ngIf="fieldControl.invalid">
+            {{ getErrorMessage() }}
+          </mat-error>
+        </mat-form-field>
+      </div>
     </div>
   </ng-template>
 </div>

package/lib/field/user-reference/user-reference.component.ts

@@ -168,7 +168,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
-    this.value$ = this.pConn$.getConfigProps()?.value;
+    if (value && typeof value === 'object') {
+      this.value$ = value.userName ? value.userName : '';
+    } else {
+      this.value$ = value || '';
+    }
 
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
@@ -184,12 +188,8 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       } else {
         // if same user ref field is referred in view as editable & readonly formatted text
         // referenced users won't be available, so get user details from dx api
-        const { getOperatorDetails } = PCore.getUserApi();
-        getOperatorDetails(this.userID$).then((resp: any) => {
-          if (resp.data && resp.data.pyOperatorInfo && resp.data.pyOperatorInfo.pyUserName) {
-            this.userName$ = resp.data.pyOperatorInfo.pyUserName;
-          }
-        });
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        this.userName$ = await getUserName(this.pConn$, this.userID$);
       }
     } else if (displayAs === DROPDOWN_LIST || displayAs === SEARCH_BOX) {
       const queryPayload = {
@@ -257,3 +257,66 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     return errMessage;
   }
 }
+
+const buildColumnForDisplayValue = dataObj => {
+  if (dataObj.columns) {
+    dataObj.columns = dataObj.columns.map(column => {
+      const tempColObj = { ...column };
+      if (tempColObj.key === 'true') {
+        tempColObj.useForSearch = true;
+      } else {
+        tempColObj.useForSearch = false;
+      }
+      return tempColObj;
+    });
+  }
+};
+
+function getUserName(pConn, userId = ''): Promise<string> {
+  return new Promise(resolve => {
+    const { parameters = {}, referenceList } = pConn.getConfigProps();
+    const contextName = pConn.getContextName();
+
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const OPERATORS_DP = referenceList || PCore.getEnvironmentInfo().getDefaultOperatorDP() || '';
+
+    const columns = [
+      {
+        value: 'pyUserName',
+        display: 'true',
+        useForSearch: true,
+        primary: 'true'
+      },
+      {
+        value: 'pyUserIdentifier',
+        setProperty: 'Associated property',
+        key: 'true',
+        display: 'true',
+        secondary: 'true',
+        useForSearch: true
+      }
+    ];
+
+    const dataConfig: any = {
+      dataSource: OPERATORS_DP,
+      parameters,
+      matchPosition: 'equals',
+      listType: 'datapage',
+      columns,
+      cacheLifeSpan: 'form',
+      deferDatasource: false,
+      maxResultsDisplay: '1',
+      ignoreCase: true
+    };
+
+    PCore.getDataApi()
+      .init(dataConfig, contextName)
+      .then(dataApiObj => {
+        buildColumnForDisplayValue(dataApiObj);
+        dataApiObj.registerForBufferedCall({ waitTime: 50 });
+        dataApiObj.fetchData(userId).then((response: any) => {
+          resolve(response.data?.[0]?.pyUserName || userId);
+        });
+      });
+  });
+}