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

package/package.json

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

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/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;