@pega/angular-sdk-overrides 0.24.8 → 0.25.1

package/lib/template/data-reference/data-reference.component.ts

@@ -10,7 +10,6 @@ const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
   selector: 'app-data-reference',
   templateUrl: './data-reference.component.html',
   styleUrls: ['./data-reference.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class DataReferenceComponent implements OnInit, OnDestroy {
@@ -45,19 +44,18 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.children = this.pConn$.getChildren() as any[];
+    this.children = this.pConn$.getChildren();
     this.updateSelf();
     if (this.firstChildMeta?.type === 'Dropdown' && this.rawViewMetadata.config?.parameters) {
       const { value, key, text } = this.firstChildMeta.config.datasource.fields;
-      (
-        PCore.getDataApiUtils().getData(
+      PCore.getDataApiUtils()
+        .getData(
           this.refList,
           {
             dataViewParameters: this.parameters
-          } as any,
+          },
           ''
-        ) as Promise<any>
-      )
+        )
         .then(res => {
           if (res.data.data !== null) {
             const ddDataSource = res.data.data
@@ -103,7 +101,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
 
   updateSelf() {
     // Update properties based on configProps
-    const theConfigProps: any = this.pConn$.getConfigProps();
+    const theConfigProps = this.pConn$.getConfigProps();
     this.updatePropertiesFromProps(theConfigProps);
 
     const displayAs = theConfigProps.displayAs;
@@ -114,7 +112,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     this.refList = this.rawViewMetadata.config.referenceList;
     this.canBeChangedInReviewMode = theConfigProps.allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
     // this.childrenToRender = this.children;
-    this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
+    this.isDisplayModeEnabled = ['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(displayMode);
 
     if (this.firstChildMeta?.type !== 'Region') {
       this.firstChildPConnect = this.pConn$.getChildren()[0].getPConnect;
@@ -187,41 +185,38 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
     const propValue = event?.id || event?.target?.value;
     if (propValue && this.canBeChangedInReviewMode && this.isDisplayModeEnabled) {
-      (PCore.getDataApiUtils().getCaseEditLock(caseKey, '') as Promise<any>).then(caseResponse => {
-        const pageTokens = this.pConn$.getPageReference().replace('caseInfo.content', '').split('.');
-        let curr = {};
-        const commitData = curr;
+      PCore.getDataApiUtils()
+        .getCaseEditLock(caseKey, '')
+        .then(caseResponse => {
+          const pageTokens = this.pConn$.getPageReference().replace('caseInfo.content', '').split('.');
+          let curr = {};
+          const commitData = curr;
 
-        pageTokens.forEach(el => {
-          if (el !== '') {
-            curr[el] = {};
-            curr = curr[el];
-          }
-        });
+          pageTokens.forEach(el => {
+            if (el !== '') {
+              curr[el] = {};
+              curr = curr[el];
+            }
+          });
 
-        // expecting format like {Customer: {pyID:"C-100"}}
-        const propArr = this.propName.split('.');
-        propArr.forEach((element, idx) => {
-          if (idx + 1 === propArr.length) {
-            curr[element] = propValue;
-          } else {
-            curr[element] = {};
-            curr = curr[element];
-          }
-        });
+          // expecting format like {Customer: {pyID:"C-100"}}
+          const propArr = this.propName.split('.');
+          propArr.forEach((element, idx) => {
+            if (idx + 1 === propArr.length) {
+              curr[element] = propValue;
+            } else {
+              curr[element] = {};
+              curr = curr[element];
+            }
+          });
 
-        (
-          PCore.getCaseUtils().updateCaseEditFieldsData(
-            caseKey,
-            { [caseKey]: commitData },
-            caseResponse.headers.etag,
-            this.pConn$.getContextName()
-          ) as Promise<any>
-        ).then(response => {
-          PCore.getContainerUtils().updateParentLastUpdateTime(this.pConn$.getContextName(), response.data.data.caseInfo.lastUpdateTime);
-          PCore.getContainerUtils().updateRelatedContextEtag(this.pConn$.getContextName(), response.headers.etag);
+          PCore.getCaseUtils()
+            .updateCaseEditFieldsData(caseKey, { [caseKey]: commitData }, caseResponse.headers.etag, this.pConn$.getContextName())
+            .then(response => {
+              PCore.getContainerUtils().updateParentLastUpdateTime(this.pConn$.getContextName(), response.data.data.caseInfo.lastUpdateTime);
+              PCore.getContainerUtils().updateRelatedContextEtag(this.pConn$.getContextName(), response.headers.etag);
+            });
         });
-      });
     }
   }
 
@@ -235,7 +230,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
         property: this.propName,
         category: '',
         context: ''
-      } as any);
+      });
       if (!this.canBeChangedInReviewMode && this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.SINGLE) {
         this.displaySingleRef = true;
       }

package/lib/template/default-form/default-form.component.html

@@ -1,7 +1,3 @@
-<!-- When adding a component here, add the same component in 'region' template as well -->
-<div *ngIf="!NO_HEADER_TEMPLATES.includes(template) && showLabel">
-  <div class="template-title-container">{{ label }}</div>
-</div>
 <div *ngIf="instructions" class="psdk-default-form-instruction-text">
   <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
 </div>

package/lib/template/default-form/default-form.component.ts

@@ -1,14 +1,26 @@
 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 DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
-  template: string;
   instructions: string;
 }
 
@@ -16,40 +28,40 @@ interface DefaultFormProps {
   selector: 'app-default-form',
   templateUrl: './default-form.component.html',
   styleUrls: ['./default-form.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent implements OnInit {
-  @Input() pConn$: typeof PConnect;
+export class DefaultFormComponent extends FormTemplateBase implements OnInit {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
+  // Used with AngularPConnect
+  override angularPConnectData: AngularPConnectData = {};
+
   arChildren$: any[];
   divClass$: string;
-  template: any;
-  showLabel: any;
-  label: any;
   instructions: string;
 
-  NO_HEADER_TEMPLATES = [
-    'SubTabs',
-    'SimpleTable',
-    'Details',
-    'DetailsTwoColumn',
-    'DetailsThreeColumn',
-    'NarrowWideDetails',
-    'WideNarrowDetails',
-    'Confirmation'
-  ];
-
-  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 DefaultFormProps;
-    this.template = configProps?.template;
-    const propToUse: any = { ...this.pConn$.getInheritedProps() };
-    this.showLabel = propToUse?.showLabel;
-    this.label = propToUse?.label;
-    const kids = this.pConn$.getChildren() as any[];
+    const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';
@@ -71,6 +83,10 @@ export class DefaultFormComponent 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;
+    }
   }
 }

package/lib/template/details/details.component.ts

@@ -1,57 +1,22 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details',
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
+export class DetailsComponent 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() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps((this.pConn$.getRawMetadata() as any).config);
+  override updateSelf() {
+    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {
@@ -79,7 +44,7 @@ export class DetailsComponent implements OnInit, OnDestroy {
         if (theCompType === 'reference' || theCompType === 'group') {
           const configProps = thePConn.getConfigProps();
           configProps.readOnly = true;
-          configProps.displayMode = 'LABELS_LEFT';
+          configProps.displayMode = 'DISPLAY_ONLY';
           const propToUse = { ...thePConn.getInheritedProps() };
           configProps.label = propToUse?.label;
           const options = {

package/lib/template/details-narrow-wide/details-narrow-wide.component.ts

@@ -1,57 +1,23 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details-narrow-wide',
   templateUrl: './details-narrow-wide.component.html',
   styleUrls: ['./details-narrow-wide.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsNarrowWideComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
+export class DetailsNarrowWideComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   arFields$: any[] = [];
   arFields2$: any[] = [];
   highlightedDataArr: any[] = [];
   showHighlightedData: boolean;
-  // 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() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps((this.pConn$.getRawMetadata() as any).config);
+  override updateSelf() {
+    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {

package/lib/template/details-one-column/details-one-column.component.ts

@@ -1,59 +1,23 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
-import { FormGroup } from '@angular/forms';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details-one-column',
   templateUrl: './details-one-column.component.html',
   styleUrls: ['./details-one-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsOneColumnComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
+export class DetailsOneColumnComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
   showHighlightedData: boolean;
   highlightedDataArr: any;
 
   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() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps((this.pConn$.getRawMetadata() as any).config);
+  override updateSelf() {
+    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {
@@ -70,7 +34,7 @@ export class DetailsOneColumnComponent implements OnInit, OnDestroy {
       });
     }
 
-    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     this.pConn$.setInheritedProp('readOnly', true);
 
     const kids = this.pConn$.getChildren() as any[];

package/lib/template/details-sub-tabs/details-sub-tabs.component.html

@@ -5,8 +5,7 @@
         *ngIf="tab.content?.getPConnect()"
         [name]="tab.content?.getPConnect().getComponentName()"
         [props]="{
-          pConn$: tab.content?.getPConnect(),
-          formGroup$: formGroup$
+          pConn$: tab.content?.getPConnect()
         }"
         errorMsg="Details Sub tabs wants component not yet available: {{ tab.content?.getPConnect().getComponentName() }}"
       ></component-mapper>

package/lib/template/details-sub-tabs/details-sub-tabs.component.ts

@@ -1,57 +1,24 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormGroup } from '@angular/forms';
 import { MatTabsModule } from '@angular/material/tabs';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details-sub-tabs',
   templateUrl: './details-sub-tabs.component.html',
   styleUrls: ['./details-sub-tabs.component.scss'],
-  standalone: true,
   imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsSubTabsComponent implements OnInit, OnDestroy {
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
+export class DetailsSubTabsComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
-  angularPConnectData: AngularPConnectData = {};
   currentTabId = '0';
   tabItems: any[];
   availableTabs: any[];
 
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    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 children = this.pConn$?.getChildren();
     const deferLoadedTabs = children[0];
     this.availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');

package/lib/template/details-three-column/details-three-column.component.ts

@@ -1,20 +1,15 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details-three-column',
   templateUrl: './details-three-column.component.html',
   styleUrls: ['./details-three-column.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsThreeColumnComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
+export class DetailsThreeColumnComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   showHighlightedData: boolean;
   highlightedDataArr: any;
@@ -25,40 +20,8 @@ export class DetailsThreeColumnComponent 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() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps((this.pConn$.getRawMetadata() as any).config);
+  override updateSelf() {
+    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {
@@ -75,7 +38,7 @@ export class DetailsThreeColumnComponent implements OnInit, OnDestroy {
       });
     }
 
-    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     this.pConn$.setInheritedProp('readOnly', true);
 
     const kids = this.pConn$.getChildren() as any[];