@pega/dx-component-builder-sdk 0.242.10 → 0.242.11

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

@@ -1,53 +1,66 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
-
+import { DatapageService } from '@pega/angular-sdk-components';
 import { configProps, stateProps } from './mock';
 
 import { PegaDxilMyPicklistComponent } from './pega-dxil-my-picklist.component';
 
+class MockingDatapageService {
+  getDataPageData = () => Promise.resolve({});
+}
+
 const meta: Meta<PegaDxilMyPicklistComponent> = {
   title: 'PegaDxilMyPicklist',
+   decorators: [
+    moduleMetadata({
+      providers: [{ provide: DatapageService, useClass: MockingDatapageService }]
+    })
+  ],
   component: PegaDxilMyPicklistComponent,
   excludeStories: /.*Data$/,
   render: (args: PegaDxilMyPicklistComponent) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getDataObject: () => {
-        return {};
-      },
-      getLocalizedValue: (val) => {
-        return val;
-      },
-      getCaseInfo: () => {
-        return {
-          getClassName: () => {
-            return undefined;
-          }
-        };
-      },
-      getLocaleRuleNameFromKeys: () => {
-        return undefined;
-      },
-      getActionsApi: () => {
-        return {
-          updateFieldValue: () => {
-            /* nothing */
-          },
-          triggerFieldChange: () => {
-            /* nothing */
-          }
-        };
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getContextName: () => {
+          return 'app/primary_1/workarea_3';
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getDataObject: () => {
+          return {};
+        },
+        getLocalizedValue: val => {
+          return val;
+        },
+        getCaseInfo: () => {
+          return {
+            getClassName: () => {
+              return undefined;
+            }
+          };
+        },
+        getLocaleRuleNameFromKeys: () => {
+          return undefined;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

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

@@ -8,9 +8,8 @@ describe('PegaDxilMyPicklistComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyPicklistComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyPicklistComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -6,6 +6,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { DatapageService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -22,6 +23,11 @@ interface PegaDxilMyPicklistProps extends PConnFieldProps {
   datasource?: any[];
   onRecordChange?: any;
   fieldMetadata?: any;
+  listType?: string;
+  columns?: any[];
+  deferDatasource?: boolean;
+  datasourceMetadata?: any;
+  parameters?: any;
 }
 
 @Component({
@@ -61,11 +67,14 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
     private cdRef: ChangeDetectorRef,
-    private utils: Utils
+    private utils: Utils,
+    private dataPageService: DatapageService
   ) {}
 
   ngOnInit(): void {
@@ -120,7 +129,8 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
   updateSelf(): void {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PegaDxilMyPicklistProps;
-
+    let { listType, parameters, datasource = [], columns = [] } = this.configProps$;
+    const { deferDatasource, datasourceMetadata } = this.pConn$.getConfigProps() as PegaDxilMyPicklistProps;
     if (this.configProps$.value != undefined) {
       this.value$ = this.configProps$.value;
     }
@@ -130,6 +140,7 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
     this.hideLabel = this.configProps$.hideLabel;
+    const context = this.pConn$.getContextName();
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -157,7 +168,7 @@ export class PegaDxilMyPicklistComponent 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;
 
     const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
     optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
@@ -166,9 +177,37 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
       this.value$ = 'Select';
     }
 
-    const propName = (this.pConn$.getStateProps() as any).value;
+    this.actionsApi = this.pConn$.getActionsApi();
+    if (deferDatasource && datasourceMetadata?.datasource?.name) {
+      listType = 'datapage';
+      datasource = datasourceMetadata.datasource.name;
+      const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+      parameters = this.flattenParameters(dataSourceParameters);
+      const displayProp = propertyForDisplayText?.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+      const valueProp = propertyForValue?.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
+      columns = [
+        {
+          key: 'true',
+          setProperty: 'Associated property',
+          value: valueProp
+        },
+        {
+          display: 'true',
+          primary: 'true',
+          useForSearch: true,
+          value: displayProp
+        }
+      ];
+    }
+
+    columns = this.preProcessColumns(columns) || [];
+    if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
+      this.getData(datasource, parameters, columns, context);
+    }
+
+    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;
@@ -196,6 +235,56 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
     }
   }
 
+  getData(datasource, parameters, columns, context) {
+    this.dataPageService.getDataPageData(datasource, parameters, context).then((results: any) => {
+      const optionsData: any[] = [];
+      const displayColumn = this.getDisplayFieldsMetaData(columns);
+      results?.forEach(element => {
+        const val = element[displayColumn.primary]?.toString();
+        const obj = {
+          key: element[displayColumn.key] || element.pyGUID,
+          value: val
+        };
+        optionsData.push(obj);
+      });
+      optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+      this.options$ = optionsData;
+    });
+  }
+
+  flattenParameters(params = {}) {
+    const flatParams = {};
+    Object.keys(params).forEach(key => {
+      const { name, value: theVal } = params[key];
+      flatParams[name] = theVal;
+    });
+
+    return flatParams;
+  }
+
+  preProcessColumns(columnList) {
+    return columnList.map(col => {
+      const tempColObj = { ...col };
+      tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+      return tempColObj;
+    });
+  }
+
+  getDisplayFieldsMetaData(columnList) {
+    const displayColumns = columnList.filter(col => col.display === 'true');
+    const metaDataObj: any = { key: '', primary: '', secondary: [] };
+    const keyCol = columnList.filter(col => col.key === 'true');
+    metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+    for (let index = 0; index < displayColumns.length; index += 1) {
+      if (displayColumns[index].primary === 'true') {
+        metaDataObj.primary = displayColumns[index].value;
+      } else {
+        metaDataObj.secondary.push(displayColumns[index].value);
+      }
+    }
+    return metaDataObj;
+  }
+
   isSelected(buttonValue: string): boolean {
     return this.value$ === buttonValue;
   }
@@ -204,17 +293,13 @@ export class PegaDxilMyPicklistComponent implements OnInit, OnDestroy {
     if (event?.value === 'Select') {
       event.value = '';
     }
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, event.value);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
     if (this.configProps$?.onRecordChange) {
       this.configProps$.onRecordChange(event);
     }
-  }
-
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   getLocalizedOptionValue(opt: IOption) {

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

@@ -12,44 +12,45 @@ const meta: Meta<PegaDxilMyRadiobuttonsComponent> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getContextName: () => {
-        return 'app/primary_1/workarea_3';
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getDataObject: () => {
-        return;
-      },
-      getActionsApi: () => {
-        return {
-          updateFieldValue: () => {
-            /* nothing */
-          },
-          triggerFieldChange: () => {
-            /* nothing */
-          }
-        };
-      },
-      getCaseInfo: () => {
-        return {
-          getClassName: () => {
-            return 'DIXL-MediaCo-Work-NewService';
-          }
-        };
-      },
-      getLocalizedValue: val => {
-        return val;
-      },
-      getLocaleRuleNameFromKeys: () => {
-        return undefined;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getContextName: () => {
+          return 'app/primary_1/workarea_3';
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getDataObject: () => {
+          return;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        getCaseInfo: () => {
+          return {
+            getClassName: () => {
+              return 'DIXL-MediaCo-Work-NewService';
+            }
+          };
+        },
+        getLocalizedValue: val => {
+          return val;
+        },
+        getLocaleRuleNameFromKeys: () => {
+          return undefined;
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

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

@@ -8,9 +8,8 @@ describe('PegaDxilMyRadiobuttonsComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyRadiobuttonsComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyRadiobuttonsComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-radiobuttons/pega-dxil-my-radiobuttons.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 PegaDxilMyRadiobuttonsComponent implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -164,13 +167,15 @@ export class PegaDxilMyRadiobuttonsComponent 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 PegaDxilMyRadiobuttonsComponent 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/createAll/custom-sdk/field/pega-dxil-my-searchbox/demo.stories.tsx

@@ -23,31 +23,32 @@ const meta: Meta<PegaDxilMySearchboxComponent> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getContextName: () => {
-        return 'app/primary_1/workarea_3';
-      },
-      getStateProps: () => {
-        return stateProps;
-      },
-      getDataObject: () => {
-        return;
-      },
-      getActionsApi: () => {
-        return {
-          updateFieldValue: () => {
-            /* nothing */
-          },
-          triggerFieldChange: () => {
-            /* nothing */
-          }
-        };
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getContextName: () => {
+          return 'app/primary_1/workarea_3';
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getDataObject: () => {
+          return;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

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

@@ -8,9 +8,8 @@ describe('PegaDxilMySearchboxComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMySearchboxComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMySearchboxComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -2,7 +2,7 @@ import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } fr
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval, Observable } from 'rxjs';
@@ -40,7 +40,7 @@ interface PegaDxilMySearchboxProps extends PConnFieldProps {
     MatOptionModule,
     forwardRef(() => ComponentMapperComponent)
   ]
-  })
+})
 export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
@@ -71,6 +71,8 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
   hideLabel: boolean;
   filteredOptions: Observable<any[]>;
   filterValue = '';
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -102,7 +104,7 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
 
     this.filteredOptions = this.fieldControl.valueChanges.pipe(
       startWith(''),
-      map(value => this._filter(value || ''))
+      map(value => this._filter((value as string) || ''))
     );
   }
 
@@ -151,6 +153,9 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
 
     this.setPropertyValuesFromProps();
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     const context = this.pConn$.getContextName();
     const { columns, datasource } = this.generateColumnsAndDataSource();
 
@@ -184,7 +189,7 @@ export class PegaDxilMySearchboxComponent 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;
     if (this.listType === 'associated') {
       this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
     }
@@ -220,7 +225,7 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
     let datasource = this.configProps$.datasource;
     let columns = this.configProps$.columns;
     // const { deferDatasource, datasourceMetadata } = this.configProps$;
-    const { deferDatasource, datasourceMetadata }: any = this.pConn$.getConfigProps();
+    const { deferDatasource, datasourceMetadata } = this.pConn$.getConfigProps();
     // convert associated to datapage listtype and transform props
     // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
     if (deferDatasource && datasourceMetadata?.datasource?.name) {
@@ -299,13 +304,14 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
     // this works - this.pConn$.setValue( this.componentReference, this.fieldControl.value);
     // PConnect wants to use changeHandler for onChange
     // this.angularPConnect.changeHandler( this, event);
-    this.filterValue = (event.target as HTMLInputElement).value;
-
-    this.angularPConnectData.actions?.onChange(this, event);
+    const value = (event.target as HTMLInputElement).value;
+    this.filterValue = value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
-  optionChanged(event: MatAutocompleteSelectedEvent) {
-    this.angularPConnectData.actions?.onChange(this, event);
+  optionChanged(event: any) {
+    const value = event?.option?.value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
   fieldOnBlur(event: Event) {
@@ -315,11 +321,8 @@ export class PegaDxilMySearchboxComponent implements OnInit, OnDestroy {
       const index = this.options$?.findIndex(element => element.value === el.value);
       key = index > -1 ? (key = this.options$[index].key) : el.value;
     }
-
     const value = key;
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, value);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     if (this.configProps$?.onRecordChange) {
       el.value = value;
       this.configProps$.onRecordChange(event);

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

@@ -13,15 +13,26 @@ const meta: Meta<PegaDxilMyTextComponent> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };
@@ -38,6 +49,6 @@ export const PegaDxilMyText: Story = {
     bReadonly$: configProps.readOnly,
     bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
-    bHideLabel$: configProps.hideLabel,
+    bHideLabel$: configProps.hideLabel
   }
 };