@pega/dx-component-builder-sdk 24.2.11 → 24.2.13

package/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/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,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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/field/user-reference/user-reference.component.html

@@ -1,53 +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
-          [value]="value$"
-          [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"
-          [value]="value$"
-          [required]="bRequired$"
-          [matAutocomplete]="auto"
-          [attr.data-test-id]="testId"
-          (change)="fieldOnChange($event)"
-          (blur)="fieldOnBlur($event)"
-        />
-        <mat-autocomplete #auto="matAutocomplete">
-          <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/tests/assets/sdk-a/components/createAll/override-sdk/field/user-reference/user-reference.component.ts

@@ -23,6 +23,7 @@ interface UserReferenceProps extends Omit<PConnFieldProps, 'value'> {
   value?: any;
   showAsFormattedText?: boolean;
   additionalProps?: object;
+  onRecordChange?: any;
 }
 
 @Component({
@@ -66,6 +67,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   fieldControl = new FormControl('', null);
   actionsApi: Object;
   propName: string;
+  onRecordChange: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -83,11 +85,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
+      this.fieldControl.setValue(this.getValue(this.value$));
     }
 
     this.filteredOptions = this.fieldControl.valueChanges.pipe(
-      startWith(''),
+      startWith(this.getValue(this.value$) || ''),
       map(value => this._filter(value || ''))
     );
   }
@@ -126,6 +128,21 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
+  isUserNameAvailable = user => {
+    return typeof user === 'object' && user !== null && user.userName;
+  };
+
+  getUserName = user => {
+    return user.userName;
+  };
+
+  getValue = user => {
+    if (this.displayAs$ === DROPDOWN_LIST) {
+      return this.utils.getUserId(user) || this.getUserName(user);
+    }
+    return this.isUserNameAvailable(user) ? this.getUserName(user) : this.utils.getUserId(user);
+  };
+
   async checkAndUpdate() {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
@@ -140,6 +157,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
   async updateSelf() {
     const props = this.pConn$.getConfigProps() as UserReferenceProps;
     this.testId = props.testId;
+    this.onRecordChange = props?.onRecordChange;
 
     const { label, displayAs, value, showAsFormattedText, helperText, placeholder, displayMode } = props;
 
@@ -150,30 +168,28 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
+    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'));
 
     this.actionsApi = this.pConn$.getActionsApi();
     this.propName = this.pConn$.getStateProps().value;
 
-    const isUserNameAvailable = user => {
-      return typeof user === 'object' && user !== null && user.userName;
-    };
-
     this.userID$ = this.utils.getUserId(value);
 
     if (this.userID$ && this.bReadonly$ && this.showAsFormattedText$) {
-      if (isUserNameAvailable(value)) {
+      if (this.isUserNameAvailable(value)) {
         this.userName$ = value.userName;
       } 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 = {
@@ -201,7 +217,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     if (event?.target) {
       this.filterValue = (event.target as HTMLInputElement).value;
     }
-    const value = event?.target?.value;
+    const value = event?.value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
+  }
+
+  optionChanged(event: any) {
+    const value = event?.option?.value;
     handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
@@ -211,11 +232,12 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       const index = this.options$?.findIndex(element => element.value === event.target.value);
       key = index > -1 ? (key = this.options$[index].key) : event.target.value;
     }
-
-    const value = {
-      value: key
-    };
+    const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+    if (this.onRecordChange) {
+      event.target.value = value;
+      this.onRecordChange(event);
+    }
   }
 
   getErrorMessage() {
@@ -235,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);
+        });
+      });
+  });
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/action-buttons/action-buttons.component.html

@@ -1,4 +1,4 @@
-<mat-grid-list cols="2" rowHeight="6.25rem">
+<mat-grid-list *ngIf="arMainButtons$ && arSecondaryButtons$" cols="2" rowHeight="6.25rem">
   <mat-grid-tile>
     <button *ngFor="let aButton of arSecondaryButtons$" mat-raised-button color="secondary" (click)="buttonClick(aButton.jsAction, 'secondary')">
       {{ localizedVal(aButton.name, localeCategory) }}

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/assignment/assignment.component.html

@@ -1,5 +1,5 @@
 <div>
-  <div><component-mapper name="AlertBanner" [props]="{ banners }" [parent]="this"></component-mapper></div>
+  <div><component-mapper name="AlertBanner" [props]="{ banners: bannerService.banners }" [parent]="this"></component-mapper></div>
   <div *ngIf="bHasNavigation$" class="psdk-stepper">
     <component-mapper
       name="MultiStep"