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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.242.19",
+  "version": "0.242.20",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/SDK-Angular/field/Picklist/picklist.component.ts.mustache

@@ -121,7 +121,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     // call updateSelf when initializing
     this.checkAndUpdate();
     // this should get called afer checkAndUpdate
-    this.getDatapageData();
 
     if (this.formGroup$) {
       // add control to formGroup
@@ -253,7 +252,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     );
 
     this.localizedValue = this.options$?.find(opt => opt.key === this.value$)?.value || this.localizedValue;
-
+    this.getDatapageData();
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
       const timer = interval(100).subscribe(() => {

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/picklist-autocomplete.component.html.mustache

@@ -13,7 +13,6 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          [value]="value$"
           [required]="bRequired$"
           [matAutocomplete]="auto"
           (input)="fieldOnChange($event)"

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/picklist-autocomplete.component.ts.mustache

@@ -14,6 +14,10 @@ import { DatapageService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
+interface IOption {
+  key: string;
+  value: string;
+}
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on AutoComplete here
   deferDatasource?: boolean;
@@ -108,6 +112,13 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     );
   }
 
+  setOptions(options: IOption[]) {
+    this.options$ = options;
+    const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
+    this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+    this.fieldControl.setValue(this.value$);
+  }
+
   ngOnDestroy(): void {
     if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
@@ -149,6 +160,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     if (this.configProps$.value != undefined) {
       const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
       this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
     }
 
     this.setPropertyValuesFromProps();
@@ -191,7 +203,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.componentReference = this.pConn$.getStateProps().value;
     if (this.listType === 'associated') {
-      this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      this.setOptions(optionsList);
     }
 
     if (!this.displayMode$ && this.listType !== 'associated') {
@@ -263,7 +276,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       };
       optionsData.push(obj);
     });
-    this.options$ = optionsData;
+    this.setOptions(optionsData);
   }
 
   flattenParameters(params = {}) {

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

@@ -199,7 +199,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
       const dateTime = dayjs(event.value?.toISOString());
-      const timeZoneDateTime = dayjs.tz(dateTime.format('YYYY-MM-DDTHH:mm:ss'), this.timezone);
+      const timeZoneDateTime = (dayjs as any).tz(dateTime.format('YYYY-MM-DDTHH:mm:ss'), this.timezone);
       event.value = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);

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

@@ -121,7 +121,6 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
     // call updateSelf when initializing
     this.checkAndUpdate();
     // this should get called afer checkAndUpdate
-    this.getDatapageData();
 
     if (this.formGroup$) {
       // add control to formGroup
@@ -253,7 +252,7 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
     );
 
     this.localizedValue = this.options$?.find(opt => opt.key === this.value$)?.value || this.localizedValue;
-
+    this.getDatapageData();
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
       const timer = interval(100).subscribe(() => {

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

@@ -11,7 +11,6 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          [value]="value$"
           [required]="bRequired$"
           [matAutocomplete]="auto"
           (input)="fieldOnChange($event)"

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

@@ -14,6 +14,10 @@ import { DatapageService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
+interface IOption {
+  key: string;
+  value: string;
+}
 interface PegaDxilMySearchboxProps extends PConnFieldProps {
   // If any, enter additional props that only exist on AutoComplete here
   deferDatasource?: boolean;
@@ -108,6 +112,13 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
     );
   }
 
+  setOptions(options: IOption[]) {
+    this.options$ = options;
+    const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
+    this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+    this.fieldControl.setValue(this.value$);
+  }
+
   ngOnDestroy(): void {
     if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
@@ -149,6 +160,7 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
     if (this.configProps$.value != undefined) {
       const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
       this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
     }
 
     this.setPropertyValuesFromProps();
@@ -191,7 +203,8 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
 
     this.componentReference = this.pConn$.getStateProps().value;
     if (this.listType === 'associated') {
-      this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      this.setOptions(optionsList);
     }
 
     if (!this.displayMode$ && this.listType !== 'associated') {
@@ -263,7 +276,7 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
       };
       optionsData.push(obj);
     });
-    this.options$ = optionsData;
+    this.setOptions(optionsData);
   }
 
   flattenParameters(params = {}) {

package/tests/assets/sdk-a/components/createAll/override-sdk/field/date-time/date-time.component.ts

@@ -199,7 +199,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
       const dateTime = dayjs(event.value?.toISOString());
-      const timeZoneDateTime = dayjs.tz(dateTime.format('YYYY-MM-DDTHH:mm:ss'), this.timezone);
+      const timeZoneDateTime = (dayjs as any).tz(dateTime.format('YYYY-MM-DDTHH:mm:ss'), this.timezone);
       event.value = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);