@pega/dx-component-builder-sdk 24.2.10 → 24.2.12

package/tests/assets/sdk-a/components/create/override-sdk/infra/root-container/root-container.component.ts

@@ -67,7 +67,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     const { containers } = PCore.getStore().getState();
     const items = Object.keys(containers).filter(item => item.includes('root'));
 
-    (PCore.getContainerUtils().getContainerAPI() as any).addContainerItems(items);
+    PCore.getContainerUtils().getContainerAPI().addContainerItems(items);
 
     // add preview and modalview containers to redux
     // keep local copies of the the pConnect that is related
@@ -156,7 +156,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
         if (items[key] && items[key].view && Object.keys(items[key].view).length > 0) {
           const itemView = items[key].view;
 
-          const rootObject: any = PCore.createPConnect({
+          const rootObject = PCore.createPConnect({
             meta: itemView,
             options: {
               context: items[key].context
@@ -202,7 +202,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
 
           this.componentName$ = localPConn.getComponentName();
           if (this.componentName$ === 'ViewContainer') {
-            const configProps: any = this.pConn$.getConfigProps();
+            const configProps = this.pConn$.getConfigProps();
             const viewContConfig = {
               meta: {
                 type: 'ViewContainer',

package/tests/assets/sdk-a/components/create/override-sdk/infra/stages/stages.component.scss

@@ -59,13 +59,13 @@
   border-radius: 0.5rem;
   border: 0.0625rem solid var(--app-neutral-light-color);
   overflow: hidden;
-  height: 2rem;
   display: flex;
+  flex-wrap: wrap;
 }
 
 .psdk-stages-chevron {
   position: relative;
-  padding: calc(1rem);
+  padding: calc(0.5rem);
   display: flex;
   justify-content: center;
   align-items: center;

package/tests/assets/sdk-a/components/create/override-sdk/infra/view/view.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="visibility$ !== false" class="ng-view-top">
-  <div *ngIf="showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'" class="template-title-container">
+  <div *ngIf="showLabel$ && label$ && !noHeaderTemplates.includes(templateName$)" class="template-title-container">
     <span>{{ label$ }}</span>
   </div>
 
@@ -14,25 +14,12 @@
   </ng-container>
 
   <ng-template #noTemplate>
-    <div *ngIf="displayOnlyFA$; else displayAll">
-      <div *ngFor="let kid of arChildren$">
-        <div [ngSwitch]="kid.getPConnect().getComponentName()">
-          <component-mapper
-            [name]="kid.getPConnect().getComponentName()"
-            [props]="{ pConn$: kid.getPConnect() }"
-            errorMsg="View Missing (displayOnlyFA): {{ kid.getPConnect().getComponentName() }}"
-          ></component-mapper>
-        </div>
-      </div>
+    <div *ngFor="let kid of arChildren$">
+      <component-mapper
+        [name]="kid.getPConnect().getComponentName()"
+        [props]="{ pConn$: kid.getPConnect() }"
+        errorMsg="View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}"
+      ></component-mapper>
     </div>
-    <ng-template #displayAll>
-      <div *ngFor="let kid of arChildren$">
-        <component-mapper
-          [name]="kid.getPConnect().getComponentName()"
-          [props]="{ pConn$: kid.getPConnect() }"
-          errorMsg="View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}"
-        ></component-mapper>
-      </div>
-    </ng-template>
   </ng-template>
 </div>

package/tests/assets/sdk-a/components/create/override-sdk/infra/view/view.component.ts

@@ -7,6 +7,22 @@ import { getAllFields } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
+const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
+const DETAILS_TEMPLATES = [
+  'Details',
+  'DetailsFields',
+  'DetailsOneColumn',
+  'DetailsSubTabs',
+  'DetailsThreeColumn',
+  'DetailsTwoColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails'
+];
+
+function isDetailsTemplate(template) {
+  return DETAILS_TEMPLATES.includes(template);
+}
+
 /**
  * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
  * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
@@ -77,13 +93,15 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
 
   angularPConnectData: AngularPConnectData = {};
 
+  noHeaderTemplates = NO_HEADER_TEMPLATES;
+
   configProps$: ViewProps;
   inheritedProps$: any;
   arChildren$: any[];
   templateName$: string;
   title$ = '';
   label$ = '';
-  showLabel$ = true;
+  showLabel$ = false;
   visibility$ = true;
 
   constructor(
@@ -142,7 +160,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.templateName$ = this.configProps$.template || '';
     this.title$ = this.configProps$.title || '';
     this.label$ = this.configProps$.label || '';
-    this.showLabel$ = this.configProps$.showLabel || this.showLabel$;
+    this.showLabel$ = this.configProps$.showLabel || isDetailsTemplate(this.templateName$) || this.showLabel$;
     // label & showLabel within inheritedProps takes precedence over configProps
     this.label$ = this.inheritedProps$.label || this.label$;
     this.showLabel$ = this.inheritedProps$.showLabel || this.showLabel$;

package/tests/assets/sdk-a/components/create/override-sdk/infra/view-container/helper.ts

@@ -0,0 +1,22 @@
+export const addContainerItem = pConnect => {
+  const containerManager = pConnect.getContainerManager();
+  const context = pConnect.getContextName();
+  containerManager.addContainerItem({
+    context,
+    semanticURL: ''
+  });
+};
+
+export const configureBrowserBookmark = pConnect => {
+  const context = pConnect.getContextName();
+  const containerName = pConnect.getContainerName();
+  const navPages = pConnect.getValue('pyPortal.pyPrimaryNavPages');
+  const defaultViewLabel = Array.isArray(navPages) && navPages[0] ? navPages[0].pyLabel : '';
+  PCore.configureForBrowserBookmark({
+    context,
+    containerName,
+    acName: containerName,
+    semanticURL: '',
+    defaultViewLabel
+  });
+};

package/tests/assets/sdk-a/components/create/override-sdk/infra/view-container/view-container.component.ts

@@ -5,6 +5,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { configureBrowserBookmark } from './helper';
 
 /**
  * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
@@ -86,7 +87,7 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
 
     this.pConn$.isBoundToState();
 
-    const containerMgr: any = this.pConn$.getContainerManager();
+    const containerMgr = this.pConn$.getContainerManager();
 
     this.prepareDispatchObject = this.prepareDispatchObject.bind(this);
 
@@ -96,20 +97,10 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
     //    And expose less via ui-bootstrap.js
     this.state = {
       dispatchObject: this.dispatchObject,
-      // PCore is defined in pxBootstrapShell - eventually will be exported in place of constellationCore
-
       visible: !PCore.checkIfSemanticURL()
     };
 
-    // here, to match Nebula/Constellation, the constructor of ViewContainer is only called once, and thus init/add container is only
-    // called once.  Because of Angular creating and destroy components if the parent changes a lot, this component will be
-    // created and destroyed more than once.  So the sessionStore "hasViewContainer" is set to false in rootContainer and then
-    // after first round is true here.  Subsequent ViewContainer creation will not init/add more containers.
-
     if (sessionStorage.getItem('hasViewContainer') == 'false') {
-      // unlike Nebula/Constellation, have to initializeContainer after we create a dispatcObject and state, otherwise, when calling
-      // initializeContainer before, code will get executed that needs state that wasn't defined.
-
       containerMgr.initializeContainers({
         type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
       });
@@ -118,12 +109,9 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
         /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
         PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
       }
-    }
 
-    if (sessionStorage.getItem('hasViewContainer') == 'false') {
-      if (this.pConn$.getMetadata().children) {
-        containerMgr.addContainerItem(this.dispatchObject);
-      }
+      if (!PCore.checkIfSemanticURL()) containerMgr.addContainerItem(this.pConn$ as any);
+      if (!this.displayOnlyFA$) configureBrowserBookmark(this.pConn$);
 
       sessionStorage.setItem('hasViewContainer', 'true');
     }
@@ -254,7 +242,7 @@ export class ViewContainerComponent implements OnInit, OnDestroy {
               console.error(`ViewContainer has a newComp that is NOT a reference!`);
 
               this.createdViewPConn$ = newComp;
-              const newConfigProps: any = newComp.getConfigProps();
+              const newConfigProps = newComp.getConfigProps();
               this.templateName$ = newConfigProps.template || '';
               this.title$ = newConfigProps.title || '';
               // update children with new view's children

package/tests/assets/sdk-a/components/create/override-sdk/template/app-shell/app-shell.component.ts

@@ -78,9 +78,27 @@ export class AppShellComponent implements OnInit, OnDestroy {
     if (this.pages$) {
       this.bShowAppShell$ = true;
     }
+
+    // @ts-ignore - Property 'pyCaseTypesAvailableToCreateDP' does not exist on type pxApplication
+    const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
+    if (caseTypesAvailableToCreateDP) {
+      const portalID = this.pConn$.getValue('.pyOwner');
+      PCore.getDataPageUtils()
+        .getPageDataAsync(caseTypesAvailableToCreateDP, this.pConn$.getContextName(), {
+          PortalName: portalID
+        })
+        .then((response: any) => {
+          if (response?.pyCaseTypesAvailableToCreate) {
+            this.pConn$.replaceState('.pyCaseTypesAvailableToCreate', response.pyCaseTypesAvailableToCreate, {
+              skipDirtyValidation: true
+            });
+          }
+        });
+    }
+
     this.caseTypes$ = this.configProps$.caseTypes;
 
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.portalTemplate = this.configProps$.portalTemplate;
 
@@ -129,7 +147,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
       }
 
       this.caseTypes$ = this.configProps$.caseTypes;
-      this.arChildren$ = this.pConn$.getChildren() as any[];
+      this.arChildren$ = this.pConn$.getChildren();
     });
   }
 

package/tests/assets/sdk-a/components/create/override-sdk/template/case-summary/case-summary.component.ts

@@ -55,7 +55,7 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
     // Then, continue on with other initialization
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseSummaryProps;
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.generatePrimaryAndSecondaryFields();
 

package/tests/assets/sdk-a/components/create/override-sdk/template/case-view/case-view.component.html

@@ -1,5 +1,5 @@
 <div class="psdk-case-view" id="case-view">
-  <div *ngIf="!displayOnlyFA$" class="psdk-case-view-info">
+  <div class="psdk-case-view-info">
     <mat-toolbar color="primary" class="psdk-case-view-toolbar">
       <mat-toolbar-row style="padding-left: 1rem">
         <div class="psdk-case-icon-div">
@@ -47,7 +47,7 @@
     ></component-mapper>
   </div>
   <div class="psdk-case-view-main">
-    <div *ngIf="!displayOnlyFA$">
+    <div>
       <div *ngFor="let kid of arChildren$">
         <div
           *ngIf="
@@ -73,11 +73,11 @@
       </div>
     </div>
 
-    <div *ngIf="!displayOnlyFA$">
+    <div>
       <component-mapper name="DeferLoad" [props]="{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }"></component-mapper>
     </div>
   </div>
-  <div *ngIf="!displayOnlyFA$">
+  <div>
     <div *ngIf="arChildren$" class="psdk-case-view-utilities">
       <div *ngFor="let kid of arChildren$">
         <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">

package/tests/assets/sdk-a/components/create/override-sdk/template/case-view/case-view.component.ts

@@ -27,7 +27,6 @@ interface CaseViewProps {
 export class CaseViewComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
-  @Input() displayOnlyFA$: boolean;
 
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -120,7 +119,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
     if (hasNewAttachments !== this.bHasNewAttachments) {
       this.bHasNewAttachments = hasNewAttachments;
       if (this.bHasNewAttachments) {
-        PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
+        PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
       }
     }
 
@@ -161,19 +160,15 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
     this.svgCase$ = this.utils.getImageSrc(this.configProps$.icon, this.utils.getSDKStaticContentUrl());
 
-    // this.utils.consoleKidDump(this.pConn$);
-
-    if (!this.displayOnlyFA$) {
-      for (const kid of this.arChildren$) {
-        const kidPConn = kid.getPConnect();
-        if (kidPConn.getRawMetadata().name == 'Tabs') {
-          this.mainTabs = kid;
-          this.mainTabData = this.mainTabs.getPConnect().getChildren();
-        }
+    for (const kid of this.arChildren$) {
+      const kidPConn = kid.getPConnect();
+      if (kidPConn.getRawMetadata().name == 'Tabs') {
+        this.mainTabs = kid;
+        this.mainTabData = this.mainTabs.getPConnect().getChildren();
       }
-
-      this.generateTabsData();
     }
+
+    this.generateTabsData();
   }
 
   generateTabsData() {

package/tests/assets/sdk-a/components/create/override-sdk/template/confirmation/confirmation.component.ts

@@ -43,7 +43,7 @@ export class ConfirmationComponent implements OnInit, OnDestroy {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.CONSTS = PCore.getConstants();
-    const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(this.pConn$.getTarget());
+    const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(this.pConn$.getTarget() ?? null);
     this.rootInfo = PCore.getContainerUtils().getContainerItemData(this.pConn$.getTarget(), activeContainerItemID);
     this.checkAndUpdate();
   }

package/tests/assets/sdk-a/components/create/override-sdk/template/data-reference/data-reference.component.ts

@@ -45,19 +45,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 +102,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 +113,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 +186,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 +231,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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/template/default-form/default-form.component.ts

@@ -4,11 +4,11 @@ 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 { FormTemplateBase } from '@pega/angular-sdk-components';
 
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
-  template: string;
   instructions: string;
 }
 
@@ -19,37 +19,21 @@ interface DefaultFormProps {
   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;
 
   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 templateUtils: TemplateUtils) {
+    super();
+  }
 
   ngOnInit(): void {
     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';

package/tests/assets/sdk-a/components/create/override-sdk/template/details/details.component.ts

@@ -1,6 +1,6 @@
-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',
@@ -9,49 +9,15 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   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 +45,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 = {