@pega/angular-sdk-overrides 0.25.14 → 0.25.15

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

@@ -10,7 +10,7 @@
     </ng-template>
 
     <ng-template #showDetails>
-      <div class="psdk-grid-filter" *ngIf="field.config.label && getVisibility(field.config)">
+      <div class="psdk-grid-filter" *ngIf="field.config.label && _getVisibility(field.config)">
         <div class="psdk-details-fields-label">
           {{ field.config.label }}
         </div>
@@ -20,6 +20,18 @@
           <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>

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

@@ -2,6 +2,8 @@ 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',
@@ -29,7 +31,29 @@ export class MaterialDetailsFieldsComponent {
     return this.utils.generateDate(dateValue, dateFormat);
   }
 
-  getVisibility(config): boolean {
+  _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);

package/lib/field/auto-complete/auto-complete.component.ts

@@ -94,12 +94,6 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
     // Set component specific properties
     const { value, listType, parameters } = this.configProps$;
 
-    if (value != undefined) {
-      const index = this.options$?.findIndex(element => element.key === value);
-      this.value$ = index > -1 ? this.options$[index].value : value;
-      this.fieldControl.setValue(this.value$);
-    }
-
     this.listType = listType;
     this.parameters = parameters;
 
@@ -119,6 +113,12 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
       const results = await this.dataPageService.getDataPageData(datasource, this.parameters, context);
       this.fillOptions(results);
     }
+
+    if (value != undefined) {
+      const index = this.options$?.findIndex(element => element.key === value);
+      this.value$ = index > -1 ? this.options$[index].value : value;
+      this.fieldControl.setValue(this.value$);
+    }
   }
 
   generateColumnsAndDataSource() {

package/lib/field/group/group.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -19,7 +19,7 @@ interface GroupProps extends PConnFieldProps {
   styleUrls: ['./group.component.scss'],
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class GroupComponent implements OnInit {
+export class GroupComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
@@ -42,6 +42,12 @@ export class GroupComponent implements OnInit {
     this.checkAndUpdate();
   }
 
+  additionalProps() {
+    return {
+      visibility: this.pConn$.getComputedVisibility()
+    };
+  }
+
   // Callback passed when subscribing to store change
   onStateChange() {
     this.checkAndUpdate();
@@ -86,4 +92,10 @@ export class GroupComponent implements OnInit {
       });
     }
   }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
 }

package/lib/field/multiselect/multiselect.component.html

@@ -1,7 +1,7 @@
 <div [formGroup]="formGroup$">
   <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
     <mat-label>{{ label$ }}</mat-label>
-    <mat-chip-grid #chipGrid>
+    <mat-chip-grid #chipGrid [required]="bRequired$">
       <ng-container *ngFor="let select of selectedItems">
         <mat-chip-row (removed)="removeChip(select)">
           {{ select.primary }}

package/lib/infra/Containers/flow-container/flow-container.component.ts

@@ -279,8 +279,12 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
 
     // this.containerName$ = oWorkMeta["name"];
     if (bLoadChildren && oWorkData) {
-      this.containerName$ = this.localizedVal(this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0].name, undefined, this.localeReference);
-      this.isMultiStep = this.utils.getBooleanValue(oWorkData.caseInfo.assignments?.[0].isMultiStep);
+      this.containerName$ = this.localizedVal(
+        this.getActiveViewLabel() || oWorkData.caseInfo.assignments?.[0]?.name,
+        undefined,
+        this.localeReference
+      );
+      this.isMultiStep = this.utils.getBooleanValue(oWorkData.caseInfo.assignments?.[0]?.isMultiStep);
     }
 
     // turn off spinner

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

@@ -146,7 +146,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 +154,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$;
 

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

@@ -1,9 +1,11 @@
 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 = {};
@@ -64,4 +66,47 @@ export class DetailsTemplateBase implements OnInit, OnDestroy {
       return pConnect.resolveConfigProps(pConnect.getRawMetadata());
     });
   }
+
+  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()
+        });
+      }
+    });
+
+    return processedFields;
+  }
 }

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.ts

@@ -35,45 +35,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.ts

@@ -36,12 +36,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.ts

@@ -39,10 +39,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);
       }
     }
   }

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

@@ -43,14 +43,12 @@ export class DetailsThreeColumnComponent 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 if (kids.indexOf(kid) == 1) {
-        this.arFields2$ = pKidData.children;
+        this.arFields2$ = this.processDetailFields(kid);
       } else {
-        this.arFields3$ = pKidData.children;
+        this.arFields3$ = this.processDetailFields(kid);
       }
     }
   }

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

@@ -43,12 +43,10 @@ export class DetailsTwoColumnComponent 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-wide-narrow/details-wide-narrow.component.ts

@@ -40,12 +40,10 @@ export class DetailsWideNarrowComponent 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/field-group-template/field-group-template.component.ts

@@ -43,6 +43,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   readonlyMode: boolean;
   contextClass: any;
   heading: any;
+  headingPath: string[] = [];
   children: any;
   menuIconOverride$: any;
   referenceListLength = signal<number | null>(null);
@@ -150,11 +151,24 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     return `${heading} ${index + 1}`;
   };
 
-  getDynamicHeader = (item, index) => {
-    if (this.heading && item[this.heading.substring(1)]) {
-      return item[this.heading.substring(1)];
+  getDynamicHeader = (item: Record<string, unknown>, index: number): string => {
+    if (this.heading) {
+      let value: any = item;
+      this.headingPath = this.heading.substring(1).split('.');
+
+      for (const key of this.headingPath) {
+        if (value === null || typeof value !== 'object' || !(key in value)) {
+          value = undefined;
+          break;
+        }
+        value = Reflect.get(value, key);
+      }
+
+      if (value !== undefined && value !== null && value !== '') {
+        return value.toString();
+      }
     }
-    return `Row ${index + 1}`;
+    return `${PCore.getLocaleUtils().getLocaleValue('Row', 'SimpleTable')} ${index + 1}`;
   };
 
   addFieldGroupItem() {

package/lib/template/simple-table-manual/simple-table-manual.component.ts

@@ -930,7 +930,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     const refKeys: string[] = inColKey.split('.');
     let valBuilder = inRowData;
     for (const key of refKeys) {
-      valBuilder = valBuilder[key];
+      valBuilder = valBuilder[key] ? valBuilder[key] : valBuilder;
     }
     return valBuilder;
   }

package/package.json

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