@pega/angular-sdk-overrides 0.25.13 → 0.26.1

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

@@ -5,12 +5,12 @@
     </div>
     <ng-template #noGroup>
       <div *ngIf="field.type === 'reference'; else showDetails">
-        <component-mapper name="View" [props]="{ pConn$: field.pConn }"></component-mapper>
+        <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-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/check-box/check-box.component.html

@@ -18,7 +18,7 @@
         </span>
       </div>
       <div *ngIf="selectionMode === 'multi'; else single">
-        <mat-option *ngFor="let item of listOfCheckboxes" (click)="handleChangeMultiMode($event, item)">
+        <mat-option *ngFor="let item of listOfCheckboxes">
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"

package/lib/field/embedded-data-multi/embedded-data-multi.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="bVisible$ && simpleTableComponentName">
+  <component-mapper [name]="simpleTableComponentName" [props]="{ pConn$: simpleTablePConn, formGroup$ }"></component-mapper>
+</div>

package/lib/field/embedded-data-multi/embedded-data-multi.component.ts

@@ -0,0 +1,173 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit, OnDestroy, forwardRef } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface EmbeddedDataMultiProps {
+  addEditAction?: string;
+  addEditView?: string;
+  displayAs?: string;
+  editAction?: string;
+  editMode?: string;
+  editType?: string;
+  editView?: string;
+  readOnly?: boolean;
+  repeatingView?: string;
+  targetObjectClass?: string;
+  useSeparateActionForEdit?: boolean;
+  useSeparateViewForEdit?: boolean;
+  visibility?: boolean;
+}
+
+@Component({
+  selector: 'app-embedded-data-multi',
+  templateUrl: './embedded-data-multi.component.html',
+  styleUrls: ['./embedded-data-multi.component.scss'],
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class EmbeddedDataMultiComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  angularPConnectData: AngularPConnectData = {};
+  simpleTablePConn: typeof PConnect;
+  simpleTableComponentName = '';
+  bVisible$ = true;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange = () => {
+    this.checkAndUpdate();
+  };
+
+  checkAndUpdate() {
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    const configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as EmbeddedDataMultiProps;
+    const {
+      addEditAction,
+      addEditView,
+      displayAs,
+      editAction,
+      editMode,
+      editType,
+      editView,
+      readOnly = false,
+      repeatingView,
+      targetObjectClass,
+      useSeparateActionForEdit,
+      useSeparateViewForEdit,
+      visibility = true
+    } = configProps;
+
+    this.bVisible$ = visibility !== false;
+
+    const rawMetadata = this.pConn$.getRawMetadata();
+    const rawMetadataConfig = rawMetadata?.config as any;
+
+    if (!rawMetadataConfig) {
+      return;
+    }
+
+    const renderMode = readOnly ? 'ReadOnly' : 'Editable';
+
+    let columnsChildren;
+    if (displayAs === 'table' || displayAs === 'simpleTable') {
+      columnsChildren = [
+        {
+          children: rawMetadataConfig.columns || [],
+          name: 'Columns',
+          type: 'Region'
+        }
+      ];
+    }
+
+    let regionWithView: any[] = [];
+    if (displayAs === 'repeatingView') {
+      regionWithView = [
+        {
+          children: [
+            {
+              type: 'reference',
+              config: {
+                type: 'view',
+                name: repeatingView
+              }
+            }
+          ],
+          name: 'view',
+          type: 'Region'
+        }
+      ];
+    }
+
+    const { pagelistValue } = rawMetadataConfig;
+    const authorContext = pagelistValue?.startsWith('@P') ? pagelistValue?.substring(3) : pagelistValue;
+
+    const componentConfig = {
+      type: 'View',
+      config: {
+        template: 'SimpleTable',
+        type: 'multirecordlist',
+        authorContext,
+        name: authorContext?.substring(1),
+        renderMode,
+        multiRecordDisplayAs: displayAs === 'repeatingView' ? 'fieldGroup' : displayAs,
+        referenceList: pagelistValue,
+        contextClass: targetObjectClass,
+        editMode,
+        editModeConfig: {
+          editType,
+          defaultView: addEditView,
+          defaultAction: addEditAction,
+          useSeparateViewForEdit,
+          useSeparateActionForEdit,
+          editView,
+          editAction
+        },
+        label: rawMetadataConfig.label,
+        hideLabel: rawMetadataConfig.hideLabel,
+        children: columnsChildren,
+        displayField: rawMetadataConfig.displayField,
+        uniqueField: rawMetadataConfig.uniqueField,
+        targetClassLabel: rawMetadataConfig.targetClassLabel,
+        targetClassLabelOption: rawMetadataConfig.targetClassLabelOption,
+        fieldHeader: rawMetadataConfig.repeatingViewHeadingSource,
+        heading: rawMetadataConfig.repeatingViewHeading,
+        allowActions: {
+          allowAdd: rawMetadataConfig.allowAdd ?? true,
+          allowEdit: rawMetadataConfig.allowEdit ?? true,
+          allowDelete: rawMetadataConfig.allowDelete ?? true,
+          allowDragDrop: rawMetadataConfig.allowDragDrop ?? true
+        },
+        allowRowDelete: rawMetadataConfig.allowRowDelete ?? true,
+        allowRowEdit: rawMetadataConfig.allowRowEdit ?? true
+      },
+      children: regionWithView
+    };
+
+    const component = this.pConn$.createComponent(componentConfig as any, '', 0, {});
+    if (component) {
+      this.simpleTablePConn = component.getPConnect();
+      this.simpleTableComponentName = this.simpleTablePConn.getComponentName() ?? '';
+    }
+  }
+}

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

@@ -1,7 +1,6 @@
 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 { ReferenceComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -20,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;
 
@@ -43,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();
@@ -64,7 +69,7 @@ export class GroupComponent implements OnInit {
    */
   updateSelf(): void {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as GroupProps;
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility;
     this.showHeading$ = this.configProps$.showHeading;
     this.heading$ = this.configProps$.heading;
@@ -87,4 +92,10 @@ export class GroupComponent implements OnInit {
       });
     }
   }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
 }

package/lib/field/multiselect/multiselect.component.ts

@@ -91,13 +91,32 @@ export class MultiselectComponent extends FieldBase {
         }
       ];
       let secondaryColumns: any = [];
-      if (secondaryFields) {
-        secondaryColumns = secondaryFields.map(secondaryField => ({
-          value: secondaryField,
+      // Read columnsFormatter from raw (unresolved) metadata to get field property paths
+      // (e.g. "@P .pyLabel") instead of resolved data values (e.g. "New Complex Fields").
+      // This matches Constellation's approach: pConn.getRawMetadata()?.config?.columnsFormatter
+      const columnsFormatter = (this.pConn$.getRawMetadata()?.config as any)?.columnsFormatter;
+      const secondaryFieldsFromFormatter = columnsFormatter
+        ? columnsFormatter
+            .map(item => {
+              const property = item?.config?.value;
+              if (typeof property === 'string') {
+                if (property.startsWith('@USER ')) return property.substring(6);
+                if (property.startsWith('@P ')) return property.substring(3);
+                return property;
+              }
+              return undefined;
+            })
+            .filter(Boolean)
+        : undefined;
+      const updatedSecondaryFields = secondaryFieldsFromFormatter || secondaryFields;
+      if (updatedSecondaryFields) {
+        secondaryColumns = updatedSecondaryFields.map(secondaryField => ({
+          value: typeof secondaryField === 'string' ? secondaryField : undefined,
           display: 'true',
           secondary: 'true',
           useForSearch: 'true'
         }));
+        secondaryColumns = secondaryColumns.filter(col => col.value);
       } else {
         secondaryColumns = [
           {

package/lib/field/multiselect/utils.ts

@@ -11,9 +11,11 @@ export function setVisibilityForList(c11nEnv, visibility) {
 function preProcessColumns(columns) {
   return columns?.map(col => {
     const tempColObj = { ...col };
-    tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
-    if (tempColObj.setProperty) {
-      tempColObj.setProperty = col.setProperty && col.setProperty.startsWith('.') ? col.setProperty.substring(1) : col.setProperty;
+    if (typeof col.value === 'string') {
+      tempColObj.value = col.value.startsWith('.') ? col.value.substring(1) : col.value;
+    }
+    if (typeof col.setProperty === 'string') {
+      tempColObj.setProperty = col.setProperty.startsWith('.') ? col.setProperty.substring(1) : col.setProperty;
     }
     return tempColObj;
   });

package/lib/field/object-reference/object-reference.component.html

@@ -1,17 +1,32 @@
-<div *ngIf="isDisplayModeEnabled && !canBeChangedInReviewMode; else semanticLinkCheck">
-  <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$ }"></component-mapper>
-</div>
-<ng-template #semanticLinkCheck>
-  <div *ngIf="type === 'SemanticLink' && !canBeChangedInReviewMode; else loadDynamicComp">
+<ng-container *ngIf="bVisible$" [ngSwitch]="renderMode">
+  <!-- SingleReferenceReadOnly mode -->
+  <div *ngSwitchCase="'singleReferenceReadonly'">
+    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$ }"></component-mapper>
+  </div>
+
+  <!-- MultiReferenceReadonly mode -->
+  <div *ngSwitchCase="'multiReferenceReadonly'">
+    <component-mapper name="MultiReferenceReadOnly" [props]="{ pConn$ }"></component-mapper>
+  </div>
+
+  <!-- SemanticLink mode -->
+  <div *ngSwitchCase="'semanticLink'">
     <component-mapper name="SemanticLink" [props]="{ pConn$: newPconn }"></component-mapper>
   </div>
-</ng-template>
-<ng-template #loadDynamicComp>
-  <component-mapper
-    *ngIf="newComponentName"
-    [name]="newComponentName"
-    [props]="{ pConn$: newPconn, formGroup$ }"
-    [parent]="this"
-    [outputEvents]="{ onRecordChange: onRecordChange }"
-  ></component-mapper>
-</ng-template>
+
+  <!-- SearchAndSelect mode -->
+  <div *ngSwitchCase="'searchAndSelect'">
+    <component-mapper name="SearchForm" [props]="{ pConn$, formGroup$, searchSelectCacheKey, type: 'ObjectReference' }"></component-mapper>
+  </div>
+
+  <!-- Dynamic component mode (Cards, Map, CheckboxGroup, Table, Multiselect, Dropdown, AutoComplete, etc.) -->
+  <div *ngSwitchCase="'dynamicComponent'">
+    <component-mapper
+      *ngIf="newComponentName"
+      [name]="newComponentName"
+      [props]="{ pConn$: newPconn, formGroup$ }"
+      [parent]="this"
+      [outputEvents]="useOutputEvents ? { onRecordChange: onRecordChange } : undefined"
+    ></component-mapper>
+  </div>
+</ng-container>