@pega/angular-sdk-overrides 0.25.16 → 0.25.17

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

@@ -21,11 +21,10 @@ const NO_HEADER_TEMPLATES = [
 
 const DETAILS_TEMPLATES = [
   'Details',
-  'DetailsFields',
   'DetailsOneColumn',
-  'DetailsSubTabs',
-  'DetailsThreeColumn',
   'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'DetailsSubTabs',
   'NarrowWideDetails',
   'WideNarrowDetails'
 ];

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

@@ -10,9 +10,11 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
   // For interaction with AngularPConnect
   protected angularPConnectData: AngularPConnectData = {};
   protected angularPConnect;
-  propsToUse: any = {};
 
-  childrenMetadataOld;
+  children: any[] = [];
+  propsToUse: any = {};
+  showHighlightedData: boolean;
+  highlightedDataArr: any = [];
 
   constructor(injector: Injector) {
     this.angularPConnect = injector.get(AngularPConnectService);
@@ -40,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() {
@@ -69,53 +61,34 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
   }
 
   updateDetailsProps() {
-    const { label, showLabel } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    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();
   }
 
-  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
-        });
+  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/details/details.component.html

@@ -4,8 +4,20 @@
 ></component-mapper>
 
 <ng-template #detailsContent>
-  <component-mapper
-    name="MaterialDetails"
-    [props]="{ arFields$: arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"
-  ></component-mapper>
+  <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,37 +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() {
-    this.updateDetailsProps();
-    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

@@ -4,8 +4,20 @@
 ></component-mapper>
 
 <ng-template #detailsContent>
-  <component-mapper
-    name="MaterialDetails"
-    [props]="{ arFields$: arFields$, arFields2$: arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
-  ></component-mapper>
+  <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,42 +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() {
-    this.updateDetailsProps();
-    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

@@ -4,8 +4,20 @@
 ></component-mapper>
 
 <ng-template #detailsContent>
-  <component-mapper
-    name="MaterialDetails"
-    [props]="{ arFields$: arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"
-  ></component-mapper>
+  <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,43 +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() {
-    this.updateDetailsProps();
-    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

@@ -4,14 +4,20 @@
 ></component-mapper>
 
 <ng-template #detailsContent>
-  <component-mapper
-    name="MaterialDetails"
-    [props]="{
-      arFields$: arFields$,
-      arFields2$: arFields2$,
-      arFields3$: arFields3$,
-      arHighlightedFields: highlightedDataArr,
-      layout: 'three-column'
-    }"
-  ></component-mapper>
+  <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,49 +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[] = [];
-
-  override updateSelf() {
-    this.updateDetailsProps();
-    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 {}

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

@@ -4,8 +4,20 @@
 ></component-mapper>
 
 <ng-template #detailsContent>
-  <component-mapper
-    name="MaterialDetails"
-    [props]="{ arFields$: arFields$, arFields2$: arFields2$, arHighlightedFields: highlightedDataArr, layout: 'two-column' }"
-  ></component-mapper>
+  <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,47 +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[] = [];
-
-  override updateSelf() {
-    this.updateDetailsProps();
-    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 {
-        this.arFields2$ = this.processDetailFields(kid);
-      }
-    }
-  }
-}
+export class DetailsTwoColumnComponent extends DetailsTemplateBase {}

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

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

package/lib/template/details-wide-narrow/details-wide-narrow.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-wide-narrow',
   templateUrl: './details-wide-narrow.component.html',
   styleUrls: ['./details-wide-narrow.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsWideNarrowComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  override updateSelf() {
-    this.updateDetailsProps();
-    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 {
-        this.arFields2$ = this.processDetailFields(kid);
-      }
-    }
-  }
-}
+export class DetailsWideNarrowComponent extends DetailsTemplateBase {}

package/lib/template/field-value-list/field-value-list.component.scss

@@ -21,3 +21,20 @@
 .psdk-val-labels-left {
   white-space: break-spaces;
 }
+
+.psdk-container-stacked-large-val {
+  margin: 8px 0;
+}
+
+.psdk-container-stacked-large-val .psdk-grid-label {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+.psdk-val-stacked {
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 1.25rem;
+  line-height: 1.5;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.25.16",
+  "version": "0.25.17",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/lib/designSystemExtension/material-details/material-details.component.html

@@ -1,40 +0,0 @@
-<div id="details-fields-list">
-  <div
-    *ngIf="arHighlightedFields && arHighlightedFields.length > 0"
-    [ngClass]="{
-      'psdk-grid-filter-1': this.layout === 'one-column',
-      'psdk-grid-filter-2': this.layout === 'two-column',
-      'psdk-grid-filter-3': this.layout === 'three-column',
-      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
-      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
-    }"
-  >
-    <div *ngFor="let field of arHighlightedFields">
-      <div class="psdk-details-fields-label">
-        {{ field.config.label }}
-      </div>
-      <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
-        <span *ngSwitchCase="'textinput'" class="psdk-details-text-style-hf">{{ _getValue(field.config.value) }}</span>
-        <span *ngSwitchCase="'status'" class="psdk-details-status-style-hf">{{ _getValue(field.config.value) }}</span>
-        <a *ngSwitchCase="'phone'" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-        <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-        <span *ngSwitchCase="'date'" class="psdk-details-text-style-hf">{{ _formatDate(field.config.value, field.type) }}</span>
-        <span *ngSwitchCase="'caseoperator'"></span>
-        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>
-      </div>
-    </div>
-  </div>
-  <div
-    [ngClass]="{
-      'psdk-grid-filter-1': this.layout === 'one-column',
-      'psdk-grid-filter-2': this.layout === 'two-column',
-      'psdk-grid-filter-3': this.layout === 'three-column',
-      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
-      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
-    }"
-  >
-    <component-mapper *ngIf="arFields$" name="DetailsFields" [props]="{ arFields$: arFields$ }"></component-mapper>
-    <component-mapper *ngIf="arFields2$" name="DetailsFields" [props]="{ arFields$: arFields2$ }"></component-mapper>
-    <component-mapper *ngIf="arFields3$" name="DetailsFields" [props]="{ arFields$: arFields3$ }"></component-mapper>
-  </div>
-</div>

package/lib/designSystemExtension/material-details/material-details.component.scss

@@ -1,116 +0,0 @@
-.psdk-details-group {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.psdk-details-fields {
-  padding: calc(2 * 0.5rem);
-  grid-row-gap: calc(2 * 0.5rem);
-}
-
-.psdk-details-fields-primary {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-column-gap: calc(2 * 0.5rem);
-  grid-row-gap: calc(1 * 0.5rem);
-}
-
-.psdk-details-fields-single {
-  display: grid;
-  grid-template-columns: 20ch 1fr;
-  grid-column-gap: calc(2 * 0.5rem);
-}
-
-.psdk-details-fields-label {
-  margin: 8px 0px;
-}
-
-.psdk-details-fields-value {
-  word-break: break-word;
-  grid-column-start: 2;
-  grid-row-start: 1;
-}
-
-span.psdk-details-text-style-hf {
-  font-weight: 500;
-  font-size: 1.25rem;
-}
-
-span.psdk-details-text-style {
-  font-weight: 400;
-}
-
-span.psdk-details-status-style {
-  border-radius: calc(0.25 * 0.5rem);
-  display: inline-block;
-  font-size: 0.75rem;
-  font-weight: bold;
-  line-height: calc(0.5rem * 2.5);
-  height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
-  text-transform: uppercase;
-}
-
-.psdk-grid-filter {
-  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-csf-primary-field-value {
-  margin: 8px 0;
-}
-
-span.psdk-details-status-style-hf {
-  border-radius: calc(0.25 * 0.5rem);
-  display: inline-block;
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: calc(0.5rem * 2.5);
-  height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
-  text-transform: uppercase;
-}
-
-.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-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-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-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-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;
-}

package/lib/designSystemExtension/material-details/material-details.component.spec.ts

@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MaterialDetailsComponent } from './material-details.component';
-
-describe('MaterialDetailsComponent', () => {
-  let component: MaterialDetailsComponent;
-  let fixture: ComponentFixture<MaterialDetailsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [MaterialDetailsComponent]
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(MaterialDetailsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/lib/designSystemExtension/material-details/material-details.component.ts

@@ -1,31 +0,0 @@
-import { Component, Input, forwardRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Utils } from '@pega/angular-sdk-components';
-import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-
-@Component({
-  selector: 'app-material-details',
-  templateUrl: './material-details.component.html',
-  styleUrls: ['./material-details.component.scss'],
-  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
-})
-export class MaterialDetailsComponent {
-  constructor(private utils: Utils) {}
-
-  @Input() arFields$: any[];
-  @Input() arFields2$: any[];
-  @Input() arFields3$: any[];
-  @Input() arHighlightedFields: any[];
-  @Input() layout: any;
-
-  _getValue(configValue) {
-    if (configValue && configValue != '') {
-      return configValue;
-    }
-    return '---';
-  }
-
-  _formatDate(dateValue: string, dateFormat: string): string {
-    return this.utils.generateDate(dateValue, dateFormat);
-  }
-}

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -1,41 +0,0 @@
-<div id="details-fields-list">
-  <div *ngFor="let field of arFields$">
-    <div *ngIf="field.type === 'group'; else noGroup">
-      <component-mapper name="Group" [props]="{ pConn$: field.pConn }"></component-mapper>
-    </div>
-    <ng-template #noGroup>
-      <div *ngIf="field.type === 'reference'; else showDetails">
-        <component-mapper name="reference" [props]="{ pConn$: field.pConn }"></component-mapper>
-      </div>
-    </ng-template>
-
-    <ng-template #showDetails>
-      <div class="psdk-grid-filter" *ngIf="field.config.label && _getVisibility(field.config)">
-        <div class="psdk-details-fields-label">
-          {{ field.config.label }}
-        </div>
-        <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
-          <span *ngSwitchCase="'textinput'" class="psdk-details-text-style">{{ _getValue(field.config.value) }}</span>
-          <span *ngSwitchCase="'status'" class="psdk-details-status-style">{{ _getValue(field.config.value) }}</span>
-          <a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-          <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-          <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
-          <span *ngSwitchCase="'decimal'" class="psdk-details-text-style">{{ _formatDecimal(field) }}</span>
-          <span *ngSwitchCase="'currency'" class="psdk-details-text-style">{{ _formatCurrency(field) }}</span>
-          <span *ngSwitchCase="'richtext'" class="psdk-details-text-style" [innerHTML]="_getValue(field.config.value)"></span>
-          <ng-container *ngSwitchCase="'scalarlist'">
-            <span *ngIf="field.config.componentType?.toLowerCase() === 'decimal'" class="psdk-details-text-style">{{ _formatDecimal(field) }}</span>
-            <span *ngIf="field.config.componentType?.toLowerCase() === 'currency'" class="psdk-details-text-style">{{ _formatCurrency(field) }}</span>
-            <span
-              *ngIf="field.config.componentType?.toLowerCase() !== 'decimal' && field.config.componentType?.toLowerCase() !== 'currency'"
-              class="psdk-details-text-style"
-              >{{ _getValue(field.config.value) }}</span
-            >
-          </ng-container>
-          <span *ngSwitchCase="'caseoperator'"></span>
-          <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>
-        </div>
-      </div>
-    </ng-template>
-  </div>
-</div>

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.scss

@@ -1,34 +0,0 @@
-.psdk-details-fields-label {
-  margin: 8px 0px;
-}
-
-span.psdk-details-text-style-hf {
-  font-weight: bold;
-}
-
-span.psdk-details-status-style-hf {
-  border-radius: calc(0.25 * 0.5rem);
-  display: inline-block;
-  font-size: 0.75rem;
-  font-weight: bold;
-  line-height: calc(0.5rem * 2.5);
-  height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
-  text-transform: uppercase;
-}
-
-.psdk-grid-filter {
-  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-csf-primary-field-value {
-  margin: 8px 0;
-}
-
-.psdk-primary-color {
-  color: var(--mat-sys-primary);
-}

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MaterialDetailsFieldsComponent } from './material-details-fields.component';
-
-describe('MaterialDetailsFieldsComponent', () => {
-  let component: MaterialDetailsFieldsComponent;
-  let fixture: ComponentFixture<MaterialDetailsFieldsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [MaterialDetailsFieldsComponent]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MaterialDetailsFieldsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.ts

@@ -1,61 +0,0 @@
-import { Component, Input, forwardRef } from '@angular/core';
-import { Utils } from '@pega/angular-sdk-components';
-import { CommonModule } from '@angular/common';
-import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { getCurrencyOptions } from '@pega/angular-sdk-components';
-import { format } from '@pega/angular-sdk-components';
-
-@Component({
-  selector: 'app-material-details-fields',
-  templateUrl: './material-details-fields.component.html',
-  styleUrls: ['./material-details-fields.component.scss'],
-  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
-})
-export class MaterialDetailsFieldsComponent {
-  constructor(private utils: Utils) {}
-
-  @Input() arFields$: any[];
-  @Input() arHighlightedFields: any[];
-
-  _getValue(configValue, field: any = {}) {
-    if (field?.type === 'userreference') {
-      return configValue.userName;
-    }
-    if (configValue && configValue != '') {
-      return configValue;
-    }
-    return '---';
-  }
-
-  _formatDate(dateValue: string, dateFormat: string): string {
-    return this.utils.generateDate(dateValue, dateFormat);
-  }
-
-  _formatDecimal(field: any): string {
-    const { currencyISOCode = '', formatter } = field.config;
-
-    const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-    const formatterLower = formatter?.toLowerCase() || 'decimal';
-    const formattedValue = format(field.config.value, formatterLower, theCurrencyOptions);
-
-    return formattedValue;
-  }
-
-  _formatCurrency(field: any): string {
-    const { currencyISOCode = 'USD', formatter } = field.config;
-
-    const formattedValue = format(
-      field.config.value,
-      formatter ? (formatter.toLowerCase() === 'defaultcurrency' ? 'currency' : formatter.toLowerCase()) : 'currency',
-      getCurrencyOptions(currencyISOCode)
-    );
-
-    return formattedValue;
-  }
-
-  _getVisibility(config): boolean {
-    const { visibility = true } = config;
-
-    return this.utils.getBooleanValue(visibility);
-  }
-}