@pega/dx-component-builder-sdk 0.242.12 → 0.242.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.242.12",
+  "version": "0.242.14",
   "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

@@ -279,25 +279,39 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     columns = preProcessColumns(columns) || [];
     if (!this.displayMode$ && listType !== 'associated' && typeof datasource === 'string') {
-      this.getData(datasource, parameters, columns, context);
+      this.getData(datasource, parameters, columns, context, listType);
     }
   }
 
-  getData(datasource, parameters, columns, context) {
-    this.dataPageService.getDataPageData(datasource, parameters, context).then((results: any) => {
-      const optionsData: any[] = [];
-      const displayColumn = getDisplayFieldsMetaData(columns);
-      results?.forEach(element => {
-        const val = element[displayColumn.primary]?.toString();
-        const obj = {
-          key: element[displayColumn.key] || element.pyGUID,
-          value: val
-        };
-        optionsData.push(obj);
+  getData(dataSource, parameters, columns, context, listType) {
+    const dataConfig: any = {
+      columns,
+      dataSource,
+      deferDatasource: true,
+      listType,
+      parameters,
+      matchPosition: 'contains',
+      maxResultsDisplay: '5000',
+      cacheLifeSpan: 'form'
+    };
+    PCore.getDataApi()
+      .init(dataConfig, context)
+      .then((dataApiObj: any) => {
+        const optionsData: any[] = [];
+        const displayColumn = getDisplayFieldsMetaData(columns);
+        dataApiObj?.fetchData('').then(response => {
+          response.data?.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;
+        });
       });
-      optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-      this.options$ = optionsData;
-    });
   }
 
   isSelected(buttonValue: string): boolean {

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.ts.mustache

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService, ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
+import { ComponentMapperComponent, DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
@@ -8,48 +8,14 @@ import { AngularPConnectData, AngularPConnectService, ComponentMapperComponent }
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
+export class {{COMPONENT_CLASS_NAME}}Component extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   highlightedDataArr: any[] = [];
   showHighlightedData: boolean;
   arFields$: any[] = [];
 
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    this.checkAndUpdate();
-  }
-
-  ngOnDestroy() {
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  onStateChange() {
-    this.checkAndUpdate();
-  }
-
-  checkAndUpdate() {
-    // Should always check the bridge to see if the component should
-    // update itself (re-render)
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-
-    // ONLY call updateSelf when the component should update
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
-
-  updateSelf() {
+  override updateSelf() {
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

package/src/tasks/create/templates/SDK-Angular/template/DETAILS-region/details.component.ts.mustache

@@ -1,6 +1,5 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { AngularPConnectData, AngularPConnectService, ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
+import { ComponentMapperComponent, DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
@@ -9,11 +8,8 @@ import { AngularPConnectData, AngularPConnectService, ComponentMapperComponent }
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
+export class {{COMPONENT_CLASS_NAME}}Component extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   showHighlightedData: boolean;
   highlightedDataArr: any;
@@ -24,45 +20,13 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
   propsToUse: any = {};
 
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    this.checkAndUpdate();
-  }
-
-  ngOnDestroy() {
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  onStateChange() {
-    this.checkAndUpdate();
-  }
-
-  checkAndUpdate() {
-    // Should always check the bridge to see if the component should
-    // update itself (re-render)
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-
-    // ONLY call updateSelf when the component should update
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
-
-  updateSelf() {
+  override updateSelf() {
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {
       const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
+      this.highlightedDataArr = highlightedData?.map(field => {
         field.config.displayMode = 'STACKED_LARGE_VAL';
 
         if (field.config.value === '@P .pyStatusWork') {

package/src/tasks/create/templates/SDK-Angular/template/FORM/demo.stories.tsx.mustache

@@ -94,8 +94,5 @@ export default meta;
 type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
 
 export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    label: 'Form',
-    showLabel: false
-  }
+  args: {}
 };

package/src/tasks/create/templates/SDK-Angular/template/FORM/form.component.ts.mustache

@@ -4,7 +4,7 @@ import { FormGroup } from '@angular/forms';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
-import { FormTemplateBaseComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props {
   // If any, enter additional props that only exist on this component
@@ -19,7 +19,7 @@ interface {{COMPONENT_CLASS_NAME}}Props {
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBaseComponent implements OnInit {
+export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBase implements OnInit {
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.ts.mustache

@@ -2,7 +2,7 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { FormTemplateBaseComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
@@ -11,7 +11,7 @@ import { FormTemplateBaseComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBaseComponent implements OnInit, OnChanges {
+export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBase implements OnInit, OnChanges {
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;