@pega/angular-sdk-overrides 0.25.14 → 0.25.16

package/lib/infra/navbar/navbar.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatListModule } from '@angular/material/list';
@@ -53,7 +53,6 @@ export class NavbarComponent implements OnInit, OnDestroy {
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone,
     private utils: Utils
   ) {}
 
@@ -104,40 +103,39 @@ export class NavbarComponent implements OnInit, OnDestroy {
   }
 
   initComponent() {
-    this.ngZone.run(() => {
-      this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
-
-      // Then, continue on with other initialization
-
-      // making a copy, so can add info
-      this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
-      // @ts-ignore
-      const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || this.pConn$.getValue('.pyLocaleReference');
-      this.navPages$.forEach(page => {
-        const destinationObject: any = {};
-        this.pConn$.resolveConfigProps(
-          { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
-          destinationObject
-        );
-        page.name = this.localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
-        page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
-      });
-      this.actionsAPI = this.pConn$.getActionsApi();
-      this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
-      this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
-      this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as NavBarProps;
-      this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
-
-      // const oData = this.pConn$.getDataObject();
-
-      this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
-      this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
-      this.showAppName$ = this.configProps$.showAppName;
-
-      this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
+    this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+    this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+
+    // Then, continue on with other initialization
+
+    // making a copy, so can add info
+    this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
+    // @ts-ignore
+    const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || this.pConn$.getValue('.pyLocaleReference');
+    this.navPages$.forEach(page => {
+      const destinationObject: any = {};
+      this.pConn$.resolveConfigProps(
+        { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+        destinationObject
+      );
+      page.name = this.localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
+      page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
     });
+    this.actionsAPI = this.pConn$.getActionsApi();
+    this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
+    this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as NavBarProps;
+    this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
+
+    // const oData = this.pConn$.getDataObject();
+
+    this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+    this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
+    this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
+    this.showAppName$ = this.configProps$.showAppName;
+
+    this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
+    this.chRef.markForCheck();
   }
 
   navPanelButtonClick(oPageData: any) {

package/lib/infra/root-container/root-container.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, forwardRef, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { interval, Subscription } from 'rxjs';
@@ -56,7 +56,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone
+    private cdRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -137,18 +137,16 @@ export class RootContainerComponent implements OnInit, OnDestroy {
           });
 
           setTimeout(() => {
-            // makes sure Angular tracks these changes
-            this.ngZone.run(() => {
-              const theNewPConn = rootObject.getPConnect();
-              // update ComponentName$ before we update pConn$ to make sure they're in sync
-              //  when rendering...
-              this.componentName$ = theNewPConn.getComponentName();
-
-              this.pConn$ = theNewPConn;
-              // this.pConn$ = rootObject.getPConnect();
-
-              console.log(`RootContainer updated pConn$ to be: ${this.componentName$}`);
-            });
+            const theNewPConn = rootObject.getPConnect();
+            // update ComponentName$ before we update pConn$ to make sure they're in sync
+            //  when rendering...
+            this.componentName$ = theNewPConn.getComponentName();
+
+            this.pConn$ = theNewPConn;
+            // this.pConn$ = rootObject.getPConnect();
+
+            console.log(`RootContainer updated pConn$ to be: ${this.componentName$}`);
+            this.cdRef.markForCheck();
           });
         }
       }
@@ -187,24 +185,23 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     if (arChildren && arChildren.length == 1) {
       // have to have a quick timeout or get an "expressions changed" angular error
       setTimeout(() => {
-        this.ngZone.run(() => {
-          const localPConn = arChildren[0].getPConnect();
-
-          this.componentName$ = localPConn.getComponentName();
-          if (this.componentName$ === 'ViewContainer') {
-            const configProps = this.pConn$.getConfigProps();
-            const viewContConfig = {
-              meta: {
-                type: 'ViewContainer',
-                config: configProps
-              },
-              options
-            };
-
-            this.viewContainerPConn$ = PCore.createPConnect(viewContConfig).getPConnect();
-          }
-          this.bShowRoot$ = true;
-        });
+        const localPConn = arChildren[0].getPConnect();
+
+        this.componentName$ = localPConn.getComponentName();
+        if (this.componentName$ === 'ViewContainer') {
+          const configProps = this.pConn$.getConfigProps();
+          const viewContConfig = {
+            meta: {
+              type: 'ViewContainer',
+              config: configProps
+            },
+            options
+          };
+
+          this.viewContainerPConn$ = PCore.createPConnect(viewContConfig).getPConnect();
+        }
+        this.bShowRoot$ = true;
+        this.cdRef.markForCheck();
       });
     }
   }
@@ -222,9 +219,8 @@ export class RootContainerComponent implements OnInit, OnDestroy {
               console.log(ex);
             }
 
-            this.ngZone.run(() => {
-              this.bIsProgress$ = true;
-            });
+            this.bIsProgress$ = true;
+            this.cdRef.markForCheck();
           });
         }
       }
@@ -236,9 +232,8 @@ export class RootContainerComponent implements OnInit, OnDestroy {
       // don't touch bIsProgress$ unless differnent
       if (bShow != this.bIsProgress$) {
         // makes sure Angular tracks these changes
-        this.ngZone.run(() => {
-          this.bIsProgress$ = bShow;
-        });
+        this.bIsProgress$ = bShow;
+        this.cdRef.markForCheck();
       }
     }
   }

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

@@ -3,10 +3,22 @@ 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',
@@ -146,7 +158,6 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ViewProps;
     this.inheritedProps$ = this.pConn$.getInheritedProps();
-
     // NOTE: this.configProps$.visibility'] is used in view.component.ts such that
     //  the View will only be rendered when this.configProps$.visibility'] is false.
     //  It WILL render if true or undefined.
@@ -155,7 +166,10 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.title$ = this.configProps$.title || '';
     // label & showLabel within inheritedProps takes precedence over configProps
     this.label$ = this.inheritedProps$.label || this.configProps$.label || '';
-    this.showLabel$ = this.inheritedProps$.showLabel || this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
+    this.showLabel$ =
+      this.inheritedProps$.showLabel !== undefined
+        ? this.inheritedProps$.showLabel
+        : (this.configProps$.showLabel ?? isDetailsTemplate(this.templateName$));
     this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility ?? this.visibility$;
 
@@ -181,39 +195,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

@@ -1,13 +1,16 @@
 import { Directive, OnInit, OnDestroy, Injector, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 
 @Directive()
 export class DetailsTemplateBase implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
 
   // For interaction with AngularPConnect
   protected angularPConnectData: AngularPConnectData = {};
   protected angularPConnect;
+  propsToUse: any = {};
 
   childrenMetadataOld;
 
@@ -64,4 +67,55 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
       return pConnect.resolveConfigProps(pConnect.getRawMetadata());
     });
   }
+
+  updateDetailsProps() {
+    const { label, showLabel } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
+  }
+
+  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 {
+        thePConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
+        thePConn.setInheritedProp('readOnly', true);
+        processedFields.push({
+          type: theCompType,
+          config: thePConn.getConfigProps(),
+          pConn: thePConn
+        });
+      }
+    });
+
+    return processedFields;
+  }
 }

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/data-reference/data-reference.component.ts

@@ -58,6 +58,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
   dataRelationshipContext: any;
   imagePosition: any;
   showImageDescription: any;
+  private isUpdatingFromDataCallback = false;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -69,7 +70,30 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.children = this.pConn$.getChildren();
     this.updateSelf();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    // 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();
+    }
+  }
 
+  getData() {
+    if (this.isUpdatingFromDataCallback) {
+      return;
+    }
     if (
       this.rawViewMetadata.config?.parameters &&
       !this.isDDSourceDeferred &&
@@ -94,7 +118,9 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
                     }))
                     .filter(item => item.key); // Filtering out undefined entries
               this.dropDownDataSource = ddDataSource;
+              this.isUpdatingFromDataCallback = true;
               this.updateSelf();
+              this.isUpdatingFromDataCallback = false;
             } else {
               const ddDataSource: any = [];
               this.dropDownDataSource = ddDataSource;
@@ -110,24 +136,6 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     }
   }
 
-  ngOnDestroy(): void {
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  // Callback passed when subscribing to store change
-  onStateChange() {
-    // 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() {
     // Update properties based on configProps
     const theConfigProps = this.pConn$.getConfigProps();
@@ -186,6 +194,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
 
     this.generateChildrenToRender();
     this.displayChild = !(this.displaySingleRef || this.displayMultiRef);
+    this.getData();
   }
 
   updatePropertiesFromProps(theConfigProps) {

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

@@ -1,3 +1,11 @@
-<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>
+  <component-mapper
+    name="MaterialDetails"
+    [props]="{ arFields$: arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"
+  ></component-mapper>
+</ng-template>

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

@@ -16,6 +16,7 @@ export class DetailsComponent extends DetailsTemplateBase {
   arFields$: any[] = [];
 
   override updateSelf() {
+    this.updateDetailsProps();
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
@@ -35,45 +36,7 @@ export class DetailsComponent extends DetailsTemplateBase {
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
-      this.arFields$ = [];
-      const pKid = kid.getPConnect();
-      const fields = pKid.getChildren();
-      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);
-          const data = {
-            type: theCompType,
-            pConn: theViewCont?.getPConnect()
-          };
-          this.arFields$.push(data);
-        } else {
-          const data = {
-            type: theCompType,
-            config: thePConn.getConfigProps()
-          };
-          this.arFields$.push(data);
-        }
-      });
+      this.arFields$ = this.processDetailFields(kid);
     }
   }
 }

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

@@ -1,4 +1,11 @@
 <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>
+  <component-mapper
+    name="MaterialDetails"
+    [props]="{ arFields$: arFields$, arFields2$: arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
+  ></component-mapper>
+</ng-template>

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

@@ -17,6 +17,7 @@ export class DetailsNarrowWideComponent extends DetailsTemplateBase {
   showHighlightedData: boolean;
 
   override updateSelf() {
+    this.updateDetailsProps();
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
@@ -36,12 +37,10 @@ export class DetailsNarrowWideComponent extends DetailsTemplateBase {
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
       if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
+        this.arFields$ = this.processDetailFields(kid);
       } else {
-        this.arFields2$ = pKidData.children;
+        this.arFields2$ = this.processDetailFields(kid);
       }
     }
   }

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

@@ -1 +1,11 @@
-<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>
+  <component-mapper
+    name="MaterialDetails"
+    [props]="{ arFields$: arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"
+  ></component-mapper>
+</ng-template>

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

@@ -17,6 +17,7 @@ export class DetailsOneColumnComponent extends DetailsTemplateBase {
   arFields$: any[] = [];
 
   override updateSelf() {
+    this.updateDetailsProps();
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
@@ -39,10 +40,8 @@ export class DetailsOneColumnComponent extends DetailsTemplateBase {
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
       if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
+        this.arFields$ = this.processDetailFields(kid);
       }
     }
   }