@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/config-ext.json

@@ -1,8 +1,8 @@
 {
-    "componentKey": "Group",
-    "name": "Group",
-    "label": "Field Group",
-    "description": "Field Group",
-    "type": "Group",
-    "properties": []
-}
+  "componentKey": "Group",
+  "name": "Group",
+  "label": "Field Group",
+  "description": "Field Group",
+  "type": "Group",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/group.component.html

@@ -3,7 +3,7 @@
     name="FieldGroup"
     [props]="{
       name: showHeading$ ? heading$ : undefined,
-      collapsible: collapsible$,
+      collapseOnLoad: configProps$.collapseOnLoad,
       instructions: instructions$,
       childrenTemplate: childrenTemplate
     }"

package/tests/assets/sdk-a/components/createAll/override-sdk/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';
@@ -11,7 +10,7 @@ interface GroupProps extends PConnFieldProps {
   showHeading: boolean;
   heading: string;
   instructions: string;
-  collapsible: boolean;
+  collapseOnLoad?: 'none' | 'expanded' | 'collapsed';
 }
 
 @Component({
@@ -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;
 
@@ -33,7 +32,6 @@ export class GroupComponent implements OnInit {
   showHeading$?: boolean;
   heading$: string;
   instructions$: string;
-  collapsible$: boolean;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -43,6 +41,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,12 +68,11 @@ 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;
     this.instructions$ = this.configProps$.instructions;
-    this.collapsible$ = this.configProps$.collapsible;
 
     if (this.configProps$.visibility === undefined) {
       this.visibility$ = this.pConn$.getComputedVisibility();
@@ -87,4 +90,10 @@ export class GroupComponent implements OnInit {
       });
     }
   }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/field/integer/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "Integer",
-    "name": "Integer",
-    "label": "Integer",
-    "description": "Integer",
-    "type": "Field",
-    "subtype": "Integer",
-    "properties": []
-}
+  "componentKey": "Integer",
+  "name": "Integer",
+  "label": "Integer",
+  "description": "Integer",
+  "type": "Field",
+  "subtype": "Integer",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/integer/integer.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -18,6 +18,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/field/integer/integer.component.ts

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -17,7 +18,7 @@ interface IntegerProps extends PConnFieldProps {
   selector: 'app-integer',
   templateUrl: './integer.component.html',
   styleUrls: ['./integer.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class IntegerComponent extends FieldBase {
   configProps$: IntegerProps;
@@ -57,7 +58,8 @@ export class IntegerComponent extends FieldBase {
 
     if (isValueChanged) {
       const value = event?.target?.value;
-      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+      const normalizedValue = value === '' ? '' : Number(value);
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, normalizedValue);
     }
   }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/field/location/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "Location",
-    "name": "Location",
-    "label": "Location",
-    "description": "Location",
-    "type": "Field",
-    "subtype": "Location",
-    "properties": []
-}
+  "componentKey": "Location",
+  "name": "Location",
+  "label": "Location",
+  "description": "Location",
+  "type": "Field",
+  "subtype": "Location",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/location/location.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="mapReady && bVisible$">
   <!-- Google suggestions -->
-  <mat-form-field class="psdk-full-width" [hintLabel]="helperText">
+  <mat-form-field class="psdk-full-width">
     <mat-label>{{ label$ }}</mat-label>
     <input
       matInput
@@ -14,6 +14,7 @@
       (blur)="fieldOnBlur()"
     />
     <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+    <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
     <button
       mat-icon-button
       matSuffix

package/tests/assets/sdk-a/components/createAll/override-sdk/field/location/location.component.ts

@@ -11,6 +11,7 @@ import { GoogleMapsModule } from '@angular/google-maps';
 import { debounceTime, from, of, switchMap } from 'rxjs';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { GoogleMapsLoaderService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 
@@ -34,7 +35,8 @@ interface LocationProps extends PConnFieldProps {
     MatIconModule,
     MatInputModule,
     MatProgressSpinnerModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    FieldWarningDirective
   ],
   templateUrl: './location.component.html',
   styleUrl: './location.component.scss'

package/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/field/multiselect/multiselect.component.ts

@@ -90,14 +90,33 @@ export class MultiselectComponent extends FieldBase {
           key: 'true'
         }
       ];
-      let secondaryColumns: any = [];
-      if (secondaryFields) {
-        secondaryColumns = secondaryFields.map(secondaryField => ({
-          value: secondaryField,
+      let secondaryColumns: any;
+      // 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/tests/assets/sdk-a/components/createAll/override-sdk/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/tests/assets/sdk-a/components/createAll/override-sdk/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$, dataRelationshipContext }"></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>