@pega/angular-sdk-overrides 25.1.12 → 26.1.10

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

@@ -1,8 +1,24 @@
-<div *ngIf="instructions" class="psdk-default-form-instruction-text">
-  <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
-</div>
+<ng-container *ngIf="instructions && bShowInstructions$">
+  <component-mapper
+    *ngIf="instructionBannerVariant$; else instructionText"
+    name="Alert"
+    [props]="{
+      message: instructions,
+      messageIsHtml: true,
+      severity: instructionBannerVariant$,
+      hideClose: !bDismissInstructions$
+    }"
+    [parent]="this"
+    [outputEvents]="{ onClose: dismissInstructions }"
+  ></component-mapper>
+  <ng-template #instructionText>
+    <div class="psdk-default-form-instruction-text">
+      <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
+    </div>
+  </ng-template>
+</ng-container>
 <div [className]="divClass$">
-  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }">
+  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'reference' }">
     <component-mapper
       [name]="kid.getPConnect().getComponentName()"
       [props]="{

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

@@ -2,9 +2,8 @@ import { Component, OnInit, Input, forwardRef, OnChanges } 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 { InstructionObject, TemplateUtils } from '@pega/angular-sdk-components';
 import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
@@ -21,7 +20,7 @@ function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
-  instructions: string;
+  instructions?: string | InstructionObject;
 }
 
 @Component({
@@ -39,7 +38,10 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
 
   arChildren$: any[];
   divClass$: string;
-  instructions: string;
+  instructions: string | undefined;
+  instructionBannerVariant$: 'warning' | 'info' | 'success' | undefined;
+  bDismissInstructions$ = false;
+  bShowInstructions$ = true;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -71,6 +73,9 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
     const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
+    const instructionsType = this.templateUtils.getInstructionsType(configProps?.instructions);
+    this.instructionBannerVariant$ = instructionsType ? this.templateUtils.mapInstructionsTypeToBannerVariant(instructionsType) : undefined;
+    this.bDismissInstructions$ = this.templateUtils.getDismissBanner(configProps?.instructions);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';
     switch (numCols) {
@@ -91,10 +96,14 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit, On
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = kids[0].getPConnect().getChildren();
 
     if (areViewsChanged(this.arChildren$, children)) {
       this.arChildren$ = children;
     }
   }
+
+  dismissInstructions() {
+    this.bShowInstructions$ = false;
+  }
 }

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

@@ -1,6 +1,5 @@
 import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 interface DefaultPageProps {
@@ -59,6 +58,6 @@ export class DefaultPageComponent implements OnInit, OnChanges {
     this.backgroundImage = this.configProps$.backgroundImage;
     this.enableBanner$ = this.configProps$.enableBanner;
 
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

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,74 +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$ = [];
-      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);
-        }
-      });
-    }
-  }
-}
+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,43 +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) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      } else {
-        this.arFields2$ = pKidData.children;
-      }
-    }
-  }
-}
+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,44 +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) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      }
-    }
-  }
-}
+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,52 +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) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      } else if (kids.indexOf(kid) == 1) {
-        this.arFields2$ = pKidData.children;
-      } else {
-        this.arFields3$ = pKidData.children;
-      }
-    }
-  }
-}
+export class DetailsThreeColumnComponent extends DetailsTemplateBase {}

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

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'two-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-2">
+    <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-two-column/details-two-column.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-2 {
   display: grid;
   grid-template-columns: repeat(2, 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-two-column/details-two-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-two-column',
   templateUrl: './details-two-column.component.html',
   styleUrls: ['./details-two-column.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsTwoColumnComponent 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) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      } else {
-        this.arFields2$ = pKidData.children;
-      }
-    }
-  }
-}
+export class DetailsTwoColumnComponent extends DetailsTemplateBase {}

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

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

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-wide-narrow {
   display: grid;
   grid-template-columns: 7fr 3fr;
   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);
+}