@pega/dx-component-builder-sdk 0.242.17 → 0.242.19

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-percentage.component.html

@@ -26,7 +26,7 @@
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          (change)="fieldOnChange()"
+          (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
           [readonly]="bReadonly$"
         />

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-percentage.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { PegaDxilMyPercentageComponent } from './pega-dxil-my-percentage.component';
 
 describe('PegaDxilMyPercentageComponent', () => {
-  let component: PegaDxilMyPercentageomponent;
+  let component: PegaDxilMyPercentageComponent;
   let fixture: ComponentFixture<PegaDxilMyPercentageComponent>;
 
   beforeEach(async () => {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-percentage.component.ts

@@ -179,27 +179,37 @@ export class PegaDxilMyPercentageComponent 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) {
-    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, '.');
+    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(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyPhoneComponent> = {
   title: 'PegaDxilMyPhone',
   component: PegaDxilMyPhoneComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPhoneComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/pega-dxil-my-phone.component.ts

@@ -38,18 +38,11 @@ export class PegaDxilMyPhoneComponent 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 PegaDxilMyPhoneComponent 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 PegaDxilMyPhoneComponent 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 PegaDxilMyPhoneComponent 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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/demo.stories.tsx

@@ -19,7 +19,7 @@ const meta: Meta<PegaDxilMyPicklistComponent> = {
   ],
   component: PegaDxilMyPicklistComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPicklistComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/pega-dxil-my-picklist.component.ts

@@ -134,6 +134,18 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
     }
   }
 
+  set options(options: IOption[]) {
+    this.options$ = options;
+    if (this.displayMode$) {
+      this.value$ = this.options$?.find(option => option.key === this.value$)?.value || this.value$;
+      this.localizedValue = this.pConn$.getLocalizedValue(
+        this.value$ === 'Select...' ? '' : this.value$,
+        this.localePath,
+        this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
+      );
+    }
+  }
+
   ngOnDestroy(): void {
     if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
@@ -215,7 +227,7 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
     if (this.theDatasource) {
       const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
       optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-      this.options$ = optionsList;
+      this.options = optionsList;
     }
 
     this.actionsApi = this.pConn$.getActionsApi();
@@ -239,6 +251,9 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
       this.localePath,
       this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
     );
+
+    this.localizedValue = this.options$?.find(opt => opt.key === this.value$)?.value || this.localizedValue;
+
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
       const timer = interval(100).subscribe(() => {
@@ -278,7 +293,7 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
     }
 
     columns = preProcessColumns(columns) || [];
-    if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
+    if (listType !== 'associated' && typeof datasource === 'string') {
       this.getData(datasource, parameters, columns, context, listType);
     }
   }
@@ -309,7 +324,7 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
             optionsData.push(obj);
           });
           optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-          this.options$ = optionsData;
+          this.options = optionsData;
         });
       });
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-radiobuttons/demo.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<PegaDxilMyRadiobuttonsComponent> = {
   title: 'PegaDxilMyRadiobuttons',
   component: PegaDxilMyRadiobuttonsComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyRadiobuttonsComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-searchbox/demo.stories.tsx

@@ -19,7 +19,7 @@ const meta: Meta<PegaDxilMySearchboxComponent> = {
   ],
   component: PegaDxilMySearchboxComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMySearchboxComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyTextComponent> = {
   title: 'PegaDxilMyText',
   component: PegaDxilMyTextComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyTextComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text-input/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyTextInputComponent> = {
   title: 'PegaDxilMyTextInput',
   component: PegaDxilMyTextInputComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyTextInputComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text-input/pega-dxil-my-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/custom-sdk/field/pega-dxil-my-text-input/pega-dxil-my-text-input.component.ts

@@ -161,15 +161,25 @@ export class PegaDxilMyTextInputComponent 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/custom-sdk/field/pega-dxil-my-time-of-day/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyTimeOfDayComponent> = {
   title: 'PegaDxilMyTimeOfDay',
   component: PegaDxilMyTimeOfDayComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyTimeOfDayComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-time-of-day/pega-dxil-my-time-of-day.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/custom-sdk/field/pega-dxil-my-time-of-day/pega-dxil-my-time-of-day.component.ts

@@ -165,15 +165,30 @@ export class PegaDxilMyTimeOfDayComponent 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/custom-sdk/field/pega-dxil-my-url/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyUrlComponent> = {
   title: 'PegaDxilMyUrl',
   component: PegaDxilMyUrlComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyUrlComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/pega-dxil-my-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/custom-sdk/field/pega-dxil-my-url/pega-dxil-my-url.component.ts

@@ -159,15 +159,25 @@ export class PegaDxilMyUrlComponent 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/custom-sdk/template/pega-dxil-my-details/demo.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<PegaDxilMyDetailsComponent> = {
   title: 'PegaDxilMyDetails',
   component: PegaDxilMyDetailsComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyDetailsComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/demo.stories.tsx

@@ -10,21 +10,12 @@ class MockingDatapageService {
   getDataPageData = () => Promise.resolve({});
 }
 
-window.PCore = {
-  ...window.PCore,
-  getConstants: (): any => {
-    return {
-      CASE_INFO: {
-        INSTRUCTIONS: 'caseInfo.assignments[0].instructions'
-      }
-    };
-  },
-  setBehaviorOverride: () => {},
-  getStore: () => {
-    return {
-      subscribe: () => {}
-    };
-  }
+window.PCore.getContextTreeManager = (): any => {
+  return {
+    removeContextTreeNode: () => {
+      /* nothing */
+    }
+  };
 };
 
 const meta: Meta<PegaDxilMyFormComponent> = {
@@ -36,7 +27,7 @@ const meta: Meta<PegaDxilMyFormComponent> = {
   ],
   component: PegaDxilMyFormComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyFormComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
@@ -83,7 +74,8 @@ const meta: Meta<PegaDxilMyFormComponent> = {
         getInheritedProps: (): any => {
           /* nothing */
         },
-        getContextName: () => ''
+        getContextName: () => '',
+        clearErrorMessages: () => {/* nothing */}
       } as any,
       formGroup$: new FormBuilder().group({})
     }

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/mock.ts

@@ -44,6 +44,9 @@ export const children = [
             label: 'First Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -93,6 +96,9 @@ export const children = [
             label: 'Middle Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -142,6 +148,9 @@ export const children = [
             label: 'Last Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -191,6 +200,9 @@ export const children = [
             label: 'Email',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -240,6 +252,9 @@ export const children = [
             label: 'Phone Number',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -346,7 +361,10 @@ export const children = [
         getContextName: () => {
           return 'app/primary_1/workarea_9';
         },
-        getDataObject: () => {}
+        getDataObject: () => {},
+        clearErrorMessages: () => {
+          /* nothing */
+        }
       };
     }
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/pega-dxil-my-form.component.ts

@@ -1,11 +1,23 @@
 import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
 import { FormTemplateBase } from '@pega/angular-sdk-components';
 
+function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
+  if (oldViews?.length !== newViews?.length) {
+    return true;
+  }
+
+  return !oldViews?.every((oldView, index) => {
+    const newView = newViews[index];
+    return oldView.getPConnect().viewName === newView.getPConnect().viewName;
+  });
+}
+
 interface PegaDxilMyFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
@@ -23,15 +35,32 @@ export class PegaDxilMyFormComponent extends FormTemplateBase implements OnInit
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
+  // Used with AngularPConnect
+  override angularPConnectData: AngularPConnectData = {};
+
   arChildren$: any[];
   divClass$: string;
   instructions: string;
 
-  constructor(private templateUtils: TemplateUtils) {
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private templateUtils: TemplateUtils
+  ) {
     super();
   }
 
   ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.updateSelf();
+  }
+
+  onStateChange() {
+    this.updateSelf();
+  }
+
+  updateSelf() {
     const configProps = this.pConn$.getConfigProps() as PegaDxilMyFormProps;
     const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
@@ -55,6 +84,10 @@ export class PegaDxilMyFormComponent extends FormTemplateBase implements OnInit
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+
+    if (areViewsChanged(this.arChildren$, children)) {
+      this.arChildren$ = children;
+    }
   }
 }