@pega/angular-sdk-overrides 0.25.15 → 0.25.17

package/lib/infra/view/view.component.ts

@@ -3,17 +3,28 @@ import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
-import { getAllFields } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
-const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
+const NO_HEADER_TEMPLATES = [
+  'SubTabs',
+  'SimpleTable',
+  'Details',
+  'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails',
+  'Confirmation',
+  'DynamicTabs',
+  'DetailsSubTabs',
+  'ListView'
+];
+
 const DETAILS_TEMPLATES = [
   'Details',
-  'DetailsFields',
   'DetailsOneColumn',
-  'DetailsSubTabs',
-  'DetailsThreeColumn',
   'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'DetailsSubTabs',
   'NarrowWideDetails',
   'WideNarrowDetails'
 ];
@@ -157,7 +168,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.showLabel$ =
       this.inheritedProps$.showLabel !== undefined
         ? this.inheritedProps$.showLabel
-        : this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
+        : (this.configProps$.showLabel ?? isDetailsTemplate(this.templateName$));
     this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility ?? this.visibility$;
 
@@ -183,39 +194,6 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     // console.log("-->view update: " + this.angularPConnect.getComponentID(this) + ", template: " + this.templateName$ + ", kids: " + kidList);
   }
 
-  // JA - adapting additionalProps from Nebula/Constellation version which uses static methods
-  //    on the component classes stored in PComponents (that Angular doesn't have)...
-  additionalProps(state: any, getPConnect: any) {
-    let propObj = {};
-
-    // We already have the template name in this.templateName$
-    if (this.templateName$ !== '') {
-      let allFields = {};
-
-      // These uses are adapted from Nebula/Constellation CaseSummary.additionalProps
-      switch (this.templateName$) {
-        case 'CaseSummary':
-          allFields = getAllFields(getPConnect);
-          // eslint-disable-next-line no-case-declarations
-          const unresFields = {
-            primaryFields: allFields[0],
-            secondaryFields: allFields[1]
-          };
-          propObj = getPConnect.resolveConfigProps(unresFields);
-          break;
-
-        case 'Details':
-          allFields = getAllFields(getPConnect);
-          propObj = { fields: allFields[0] };
-          break;
-        default:
-          break;
-      }
-    }
-
-    return propObj;
-  }
-
   ngOnDestroy(): void {
     if (this.angularPConnectData.unsubscribeFn) {
       this.angularPConnectData.unsubscribeFn();

package/lib/template/app-shell/app-shell.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
 import { Subscription } from 'rxjs';
@@ -59,7 +59,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private erService: ErrorMessagesService,
     private snackBar: MatSnackBar,
-    private ngZone: NgZone,
+    private cdRef: ChangeDetectorRef,
     private utils: Utils
   ) {}
 
@@ -152,17 +152,15 @@ export class AppShellComponent implements OnInit, OnDestroy {
     const portalClass = this.pConn$.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
     const envPortalName = envInfo.getPortalName();
 
-    this.ngZone.run(() => {
-      // making a copy, so can add info
-      this.pages$ = this.configProps$.pages;
+    // making a copy, so can add info
+    this.pages$ = this.configProps$.pages;
 
-      if (this.pages$) {
-        this.bShowAppShell$ = true;
-      }
+    if (this.pages$) {
+      this.bShowAppShell$ = true;
+    }
 
-      this.caseTypes$ = this.configProps$.caseTypes;
-      this.arChildren$ = this.pConn$.getChildren();
-    });
+    this.caseTypes$ = this.configProps$.caseTypes;
+    this.arChildren$ = this.pConn$.getChildren();
 
     const portalLogo = this.configProps$.portalLogo;
     // using the default icon then fetch it from the static folder (not auth involved)
@@ -181,12 +179,14 @@ export class AppShellComponent implements OnInit, OnDestroy {
         .getSvcImageUrl(portalLogo)
         .then(data => {
           this.imageURL = data;
+          this.cdRef.markForCheck();
         })
         .catch(() => {
           console.error(`${this.localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
         });
     }
     this.appName$ = this.localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase());
+    this.cdRef.markForCheck();
   }
 
   // fpr show/hiding error messages in the SnackBar component
@@ -244,5 +244,6 @@ export class AppShellComponent implements OnInit, OnDestroy {
       default:
         break;
     }
+    this.cdRef.markForCheck();
   }
 }

package/lib/template/base/details-template-base.ts

@@ -11,7 +11,10 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
   protected angularPConnectData: AngularPConnectData = {};
   protected angularPConnect;
 
-  childrenMetadataOld;
+  children: any[] = [];
+  propsToUse: any = {};
+  showHighlightedData: boolean;
+  highlightedDataArr: any = [];
 
   constructor(injector: Injector) {
     this.angularPConnect = injector.get(AngularPConnectService);
@@ -39,23 +42,13 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
     const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
 
     // Only call updateSelf when the component should update
-    if (bUpdateSelf || this.hasRawMetadataChanged()) {
+    if (bUpdateSelf) {
       this.updateSelf();
     }
   }
 
-  // this method will get overriden by the child component
-  updateSelf() {}
-
-  hasRawMetadataChanged(): boolean {
-    const newChildrenMetadata = this.fetchChildrenMetadata();
-
-    if (!PCore.isDeepEqual(newChildrenMetadata, this.childrenMetadataOld)) {
-      this.childrenMetadataOld = newChildrenMetadata;
-      return true;
-    }
-
-    return false;
+  updateSelf() {
+    this.updateDetailsProps();
   }
 
   fetchChildrenMetadata() {
@@ -67,46 +60,35 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
     });
   }
 
-  processDetailFields(kid: any): any[] {
-    const pKid = kid.getPConnect();
-    const fields = pKid.getChildren();
-    const processedFields: any[] = [];
-
-    fields?.forEach(field => {
-      const thePConn = field.getPConnect();
-      const theCompType = thePConn.getComponentName().toLowerCase();
-      if (theCompType === 'reference' || theCompType === 'group') {
-        const configProps = thePConn.getConfigProps();
-        configProps.readOnly = true;
-        configProps.displayMode = 'DISPLAY_ONLY';
-        const propToUse = { ...thePConn.getInheritedProps() };
-        configProps.label = propToUse?.label;
-        const options = {
-          context: thePConn.getContextName(),
-          pageReference: thePConn.getPageReference(),
-          referenceList: thePConn.getReferenceList()
-        };
-        const viewContConfig = {
-          meta: {
-            ...thePConn.getMetadata(),
-            type: theCompType,
-            config: configProps
-          },
-          options
-        };
-        const theViewCont = PCore.createPConnect(viewContConfig);
-        processedFields.push({
-          type: theCompType,
-          pConn: theViewCont?.getPConnect()
-        });
-      } else {
-        processedFields.push({
-          type: theCompType,
-          config: thePConn.getConfigProps()
-        });
+  updateDetailsProps() {
+    const { label, showLabel, showHighlightedData } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
+    this.showHighlightedData = showHighlightedData;
+
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+    this.pConn$.setInheritedProp('readOnly', true);
+
+    this.children = this.pConn$.getChildren() as any[];
+
+    // Process highlighted fields for display in the highlighted section
+    this.highlightedDataArr = this.processHighlightedFields();
+  }
+
+  processHighlightedFields(): any[] {
+    if (!this.showHighlightedData) return [];
+
+    const { highlightedData = [] } = (this.pConn$.getRawMetadata() as any).config;
+
+    return (highlightedData ?? []).map(field => {
+      field.config.displayMode = 'STACKED_LARGE_VAL';
+      field.config.readOnly = true;
+
+      if (field.config.value === '@P .pyStatusWork') {
+        field.type = 'TextInput';
+        field.config.displayAsStatus = true;
       }
-    });
 
-    return processedFields;
+      return this.pConn$.createComponent(field, '', 0, {}).getPConnect();
+    });
   }
 }

package/lib/template/case-summary/case-summary.component.ts

@@ -3,6 +3,7 @@ import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
+import { getAllFields } from '@pega/angular-sdk-components';
 
 interface CaseSummaryProps {
   // If any, enter additional props that only exist on this component
@@ -73,7 +74,20 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseSummaryProps;
     this.generatePrimaryAndSecondaryFields();
+    this.status$ = this.configProps$.status;
+    this.bShowStatus$ = this.configProps$.showStatus;
+  }
+
+  additionalProps() {
+    const allFields = getAllFields(this.pConn$);
+    const fields = {
+      primaryFields: allFields[0],
+      secondaryFields: allFields[1]
+    };
+
+    return this.pConn$.resolveConfigProps(fields);
   }
 
   ngOnChanges() {

package/lib/template/details/details.component.html

@@ -1,3 +1,23 @@
-<div>
-  <component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
-</div>
+<component-mapper
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
+></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-1">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/lib/template/details/details.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}

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

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,36 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details',
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-  arFields$: any[] = [];
-
-  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 => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      this.arFields$ = this.processDetailFields(kid);
-    }
-  }
-}
+export class DetailsComponent extends DetailsTemplateBase {}

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

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-narrow-wide">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

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

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-narrow-wide {
   display: grid;
   grid-template-columns: 3fr 7fr;
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}

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

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,41 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-narrow-wide',
   templateUrl: './details-narrow-wide.component.html',
   styleUrls: ['./details-narrow-wide.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsNarrowWideComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-
-  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 => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = this.processDetailFields(kid);
-      } else {
-        this.arFields2$ = this.processDetailFields(kid);
-      }
-    }
-  }
-}
+export class DetailsNarrowWideComponent extends DetailsTemplateBase {}

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

@@ -1 +1,23 @@
-<component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
+<component-mapper
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
+></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-1">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

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

@@ -0,0 +1,14 @@
+.psdk-grid-filter-1 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}

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

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,42 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-one-column',
   templateUrl: './details-one-column.component.html',
   styleUrls: ['./details-one-column.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsOneColumnComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-
-  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 => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = this.processDetailFields(kid);
-      }
-    }
-  }
-}
+export class DetailsOneColumnComponent extends DetailsTemplateBase {}

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

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arFields3$, arHighlightedFields: highlightedDataArr, layout: 'three-column' }"
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
 ></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-3">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

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

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-3 {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}

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

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,50 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-three-column',
   templateUrl: './details-three-column.component.html',
   styleUrls: ['./details-three-column.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsThreeColumnComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  arFields3$: any[] = [];
-
-  propsToUse: any = {};
-
-  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 => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = this.processDetailFields(kid);
-      } else if (kids.indexOf(kid) == 1) {
-        this.arFields2$ = this.processDetailFields(kid);
-      } else {
-        this.arFields3$ = this.processDetailFields(kid);
-      }
-    }
-  }
-}
+export class DetailsThreeColumnComponent extends DetailsTemplateBase {}