@pega/dx-component-builder-sdk 0.25.7 → 0.26.1

package/tests/assets/sdk-a/components/create/override-sdk/template/search-groups/search-groups.component.ts

@@ -0,0 +1,294 @@
+import { Component, Input, OnInit, OnDestroy, forwardRef, OnChanges, ChangeDetectorRef, signal } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { componentCachePersistUtils } from '@pega/angular-sdk-components';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getCacheInfo, isValidInput } from '@pega/angular-sdk-components';
+import { Subscription } from 'rxjs';
+
+const listViewConstants = {
+  EVENTS: {
+    LIST_VIEW_READY: 'LIST_VIEW_READY'
+  }
+};
+
+export function flattenObj(obj: any): any {
+  const result: any = {};
+  Object.keys(obj).forEach(key => {
+    if (!['context_data', 'pageInstructions'].includes(key)) {
+      if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+        const temp = flattenObj(obj[key]);
+        Object.keys(temp).forEach(nestedKey => {
+          result[`${key}.${nestedKey}`] = temp[nestedKey];
+        });
+      } else {
+        result[key] = obj[key];
+      }
+    }
+  });
+  return result;
+}
+
+export const initializeSearchFields = (searchFields, getPConnect, referenceListClassID, searchFieldRestoreValues = {}) => {
+  const filtersProperties = {};
+  searchFields?.forEach(field => {
+    let val = '';
+    const { value, defaultValue = '' } = field.config;
+    const propPath = PCore.getAnnotationUtils().getPropertyName(value);
+
+    if (searchFieldRestoreValues[propPath]) {
+      val = searchFieldRestoreValues[propPath];
+    } else if (PCore.getAnnotationUtils().isProperty(defaultValue)) {
+      val = getPConnect().getValue(defaultValue.split(' ')[1]);
+    } else if (defaultValue.startsWith('@L')) {
+      val = defaultValue.split(' ')[1];
+    } else {
+      val = defaultValue;
+    }
+
+    filtersProperties[propPath] = val;
+
+    const valueSplit = value.split('@P ')[1]?.split('.').filter(Boolean) ?? [];
+    valueSplit.pop();
+
+    if (valueSplit.length) {
+      let path = '';
+      let currentClassID = referenceListClassID;
+      valueSplit.forEach(item => {
+        path = path.length ? `${path}.${item}` : item;
+        currentClassID = (PCore.getMetadataUtils().getPropertyMetadata(item, currentClassID) as any).pageClass;
+        if (currentClassID) {
+          filtersProperties[`${path}.classID`] = currentClassID;
+        }
+      });
+    }
+  });
+  return filtersProperties;
+};
+
+@Component({
+  selector: 'app-search-groups',
+  templateUrl: './search-groups.component.html',
+  styleUrls: ['./search-groups.component.scss'],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatButtonModule,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class SearchGroupsComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() searchGroupsProps;
+
+  configProps$: any;
+  cache: any;
+  previousFormValues: any;
+  isValidatorField: any;
+  searchSelectCacheKey: any;
+  activeGroupId: string;
+  getPConnect: any;
+  searchFields: any;
+  referenceListClassID: any;
+  transientItemID: any;
+  useCache: boolean;
+  searchFieldsC11nEnv: any = signal(null);
+  referenceFieldName: any;
+  viewName: any;
+  subs: Subscription[] = [];
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  setShowRecords: any;
+  groups: any;
+  state: any = {};
+  rawGroupsConfig: any;
+  initialSearchFields: {};
+  constructor(private cdRef: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    console.log('SearchGroupsComponent - ngOnInit');
+  }
+
+  ngOnChanges() {
+    this.updateSelf();
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    const { searchGroups: groups, referenceList } = this.configProps$;
+    const { getPConnect, editableField, searchSelectCacheKey, cache } = this.searchGroupsProps;
+    this.searchSelectCacheKey = searchSelectCacheKey;
+    this.getPConnect = getPConnect;
+    this.cache = cache || {};
+    const referenceFieldName = editableField.replaceAll('.', '_');
+    const { classID: referenceListClassID } = PCore.getMetadataUtils().getDataPageMetadata(referenceList) as any;
+    const { useCache, initialActiveGroupId } = getCacheInfo(cache, groups);
+    this.activeGroupId = initialActiveGroupId;
+    const rawGroupsConfig = this.pConn$.getRawConfigProps().searchGroups;
+    const activeGroupIndex = groups.findIndex(group => group.config.id === this.activeGroupId);
+    const { children: searchFieldsChildren = [] } = activeGroupIndex !== -1 ? rawGroupsConfig[activeGroupIndex] : {};
+    this.searchFields = searchFieldsChildren.map(field => ({
+      ...field,
+      config: { ...field.config, isSearchField: true }
+    }));
+    this.initialSearchFields = initializeSearchFields(
+      this.searchFields,
+      getPConnect,
+      referenceListClassID,
+      useCache && cache.activeGroupId === this.activeGroupId ? cache.searchFields : {}
+    );
+    const filtersWithClassID = {
+      ...this.initialSearchFields,
+      classID: referenceListClassID
+    };
+    const viewName = this.pConn$.getCurrentView();
+    const transientId = getPConnect.getContainerManager().addTransientItem({ id: `${referenceFieldName}-${viewName}`, data: filtersWithClassID });
+    this.transientItemID = transientId;
+    this.createSearchFields();
+  }
+
+  createSearchFields() {
+    const searchFieldsViewConfig = {
+      name: 'SearchFields',
+      type: 'View',
+      config: {
+        template: 'DefaultForm',
+        NumCols: '3',
+        contextName: this.transientItemID, // can be null initially; will be replaced after transient creation
+        readOnly: false,
+        context: this.transientItemID,
+        localeReference: this.searchGroupsProps.localeReference
+      },
+      children: [
+        {
+          name: 'Fields',
+          type: 'Region',
+          children: this.searchFields
+        }
+      ]
+    };
+
+    // Create c11n env (Angular will render this via the SDK host component)
+    this.searchFieldsC11nEnv.set(
+      PCore.createPConnect({
+        meta: searchFieldsViewConfig,
+        options: {
+          hasForm: true,
+          contextName: this.transientItemID
+        }
+      })
+    );
+
+    this.cdRef.detectChanges();
+  }
+
+  getFilterData(): void {
+    let changes = PCore.getFormUtils().getSubmitData(this.transientItemID, {
+      isTransientContext: true,
+      includeDisabledFields: true
+    });
+
+    if (Object.keys(this.cache.searchFields ?? {}).length > 0 && Object.keys(changes).length === 1) {
+      changes = this.cache.searchFields;
+    }
+
+    const formValues = flattenObj(changes);
+
+    if (
+      !PCore.isDeepEqual(this.previousFormValues, formValues) &&
+      PCore.getFormUtils().isFormValid(this.transientItemID) &&
+      isValidInput(formValues)
+    ) {
+      if (this.isValidatorField) {
+        // @ts-ignore
+        PCore.getMessageManager().clearContextMessages({ context: transientItemID });
+      }
+
+      this.previousFormValues = formValues;
+      // this.setShowRecords(true);
+
+      PCore.getPubSubUtils().publish(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, {
+        payload: formValues,
+        showRecords: true,
+        viewName: this.getPConnect.getCurrentView()
+      });
+    }
+
+    this.state.activeGroupId = this.activeGroupId;
+    this.state.searchFields = changes;
+    this.state.selectedCategory = this.getPConnect.getCurrentView();
+    const options = componentCachePersistUtils.getComponentStateOptions(this.getPConnect);
+    componentCachePersistUtils.setComponentCache({
+      cacheKey: this.searchSelectCacheKey,
+      state: this.state,
+      options
+    });
+  }
+
+  resetFilterData(): void {
+    PCore.getNavigationUtils().resetComponentCache(this.searchSelectCacheKey);
+    const resetPayload = {
+      transientItemID: this.transientItemID,
+      data: initializeSearchFields(this.searchFields, this.getPConnect, this.referenceListClassID),
+      options: { reset: true }
+    };
+    PCore.getContainerUtils().updateTransientData(resetPayload);
+  }
+
+  /** NEW: update existing transient data when active group changes */
+  updateTransientDataForActiveGroup() {
+    const filtersWithClassID = {
+      ...this.initialSearchFields,
+      classID: this.referenceListClassID
+    };
+
+    if (this.transientItemID) {
+      // this mirrors the React: PCore.getContainerUtils().replaceTransientData(...)
+      PCore.getContainerUtils().replaceTransientData({ transientItemID: this.transientItemID, data: filtersWithClassID });
+    }
+  }
+
+  onActiveGroupChange(event: any) {
+    this.activeGroupId = event.value;
+    // update searchFields for the newly selected group (mirror how React recalculates)
+    const activeGroupIndex = this.groups.findIndex(g => g.config.id === this.activeGroupId);
+    const searchFieldsChildren = activeGroupIndex !== -1 ? this.rawGroupsConfig[activeGroupIndex]?.children || [] : [];
+    this.searchFields = searchFieldsChildren.map(field => ({
+      ...field,
+      config: { ...field.config, isSearchField: true }
+    }));
+
+    // IMPORTANT: call replaceTransientData to update the transient with the new group's search fields
+    this.updateTransientDataForActiveGroup();
+  }
+
+  private setupCacheReplayOnListViewReady(): void {
+    if (Object.keys(this.cache?.searchFields ?? {}).length > 0) {
+      const sub: any = PCore.getPubSubUtils().subscribe(
+        listViewConstants.EVENTS.LIST_VIEW_READY,
+        ({ viewName }: { viewName: string }) => {
+          if (viewName === this.viewName && this.useCache) {
+            this.getFilterData();
+          }
+        },
+        `${this.searchSelectCacheKey}-listview-ready`
+      );
+      this.subs.push(sub);
+    }
+  }
+
+  ngOnDestroy(): void {
+    PCore.getPubSubUtils().unsubscribe(listViewConstants.EVENTS.LIST_VIEW_READY, `${this.searchSelectCacheKey}-listview-ready`);
+    this.subs.forEach(s => s.unsubscribe());
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/search-groups/utils.ts

@@ -0,0 +1,29 @@
+function isEmpty(value: any): boolean {
+  return (
+    // null or undefined
+    value === null ||
+    value === undefined ||
+    ((Array.isArray(value) || typeof value === 'string') && value.length === 0) ||
+    // is an Object and has no keys
+    (value.constructor === Object && Object.keys(value).length === 0)
+  );
+}
+
+export function getCacheInfo(
+  cache: { selectedCategory: string; activeGroupId: string; searchFields: unknown },
+  groups: { config: { id: string } }[]
+) {
+  let initialActiveGroupId = groups.length ? groups[0].config.id : '';
+
+  let useCache = false;
+  if (cache.activeGroupId && groups?.find(group => group.config.id === cache.activeGroupId)) {
+    initialActiveGroupId = cache.activeGroupId;
+    useCache = true;
+  }
+
+  return { useCache, initialActiveGroupId };
+}
+
+export function isValidInput(input: { [s: string]: unknown }) {
+  return Object.values(input).some(value => !isEmpty(value));
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table/simple-table.component.ts

@@ -28,7 +28,6 @@ interface SimpleTableProps {
   selector: 'app-simple-table',
   templateUrl: './simple-table.component.html',
   styleUrls: ['./simple-table.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class SimpleTableComponent implements OnInit, OnDestroy {
@@ -80,7 +79,6 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SimpleTableProps;
 
     if (this.configProps$.visibility != null) {
-      // eslint-disable-next-line no-multi-assign
       this.bVisible$ = this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
 

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/helpers.ts

@@ -46,7 +46,7 @@ export const getContext = thePConn => {
   const pageReference = thePConn.getPageReference();
   const { readonlyContextList, referenceList = readonlyContextList } = thePConn.getStateProps()?.config || thePConn.getStateProps();
 
-  const pageReferenceForRows = referenceList.startsWith('.') ? `${pageReference}.${referenceList.substring(1)}` : referenceList;
+  const pageReferenceForRows = referenceList?.startsWith('.') ? `${pageReference}.${referenceList?.substring(1)}` : referenceList;
   const viewName = thePConn.viewName;
 
   // removing "caseInfo.content" prefix to avoid setting it as a target while preparing pageInstructions
@@ -126,11 +126,125 @@ export const buildMetaForListView = (fieldMetadata, fields, type, ruleClass, nam
   };
 };
 
-export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
+const PRIMARY_FIELDS = 'pyPrimaryFields';
+const SUPPORTED_FIELD_TYPES = [
+  'Address',
+  'TextArea',
+  'TextInput',
+  'Phone',
+  'Email',
+  'Time',
+  'URL',
+  'Percentage',
+  'Integer',
+  'Decimal',
+  'Date',
+  'DateTime',
+  'Currency',
+  'Checkbox',
+  'Dropdown',
+  'AutoComplete',
+  'UserReference',
+  'RichText'
+];
+
+export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
+  let primaryFields: any = [];
+  let configFields: any = [];
+
+  if (primaryFieldsViewIndex > -1) {
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    if (Array.isArray(primaryFieldVMD)) {
+      primaryFieldVMD = primaryFieldVMD.find(primaryFieldView => primaryFieldView.classID === contextClass);
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    } else if (primaryFieldVMD?.classID === contextClass) {
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    }
+
+    if (primaryFields.length) {
+      primaryFields = primaryFields.filter(primaryField => SUPPORTED_FIELD_TYPES.includes(primaryField.type));
+    }
+  }
+
+  configFields = [...rawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...rawFields.slice(primaryFieldsViewIndex + 1)];
+  // filter duplicate fields after combining raw fields and primary fields
+  return configFields.filter((field, index) => configFields.findIndex(_field => field.config?.value === _field.config?.value) === index);
+};
+
+export function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+/**
+ * [getFieldLabel]
+ * Description - A utility that returns resolved field label for "@FL" annotation i.e from data model.
+ * @param {Object} fieldConfig
+ * @returns {string} resolved label string
+ *
+ * example:
+ * fieldConfig = {label: "@FL .pyID", classID: "TestCase-Work"};
+ * return "Case ID"
+ */
+export function getFieldLabel(fieldConfig) {
+  const { label, classID, caption } = fieldConfig;
+  let fieldLabel = (label ?? caption)?.substring(4);
+  const labelSplit = fieldLabel?.split('.');
+  const propertyName = labelSplit?.pop();
+  const fieldMetaData: any = PCore.getMetadataUtils().getPropertyMetadata(propertyName, classID) ?? {};
+  fieldLabel = fieldMetaData.label ?? fieldMetaData.caption ?? propertyName;
+  return fieldLabel;
+}
+
+export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
+  const labelsOfFields: any = [];
+  const { columnsRawConfig = [] } = options;
+  fields.forEach((field, idx) => {
+    const rawColumnConfig = columnsRawConfig[idx]?.config;
+    if (field.config.value === PRIMARY_FIELDS) {
+      labelsOfFields.push('');
+    } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
+      labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
+    } else {
+      labelsOfFields.push(field.config.label || field.config.caption);
+    }
+  });
+
+  if (primaryFieldsViewIndex > -1) {
+    const totalPrimaryFieldsColumns = configFields.length - fields.length + 1;
+    if (totalPrimaryFieldsColumns) {
+      const primaryFieldLabels: any = [];
+      for (let i = primaryFieldsViewIndex; i < primaryFieldsViewIndex + totalPrimaryFieldsColumns; i += 1) {
+        let label = configFields[i].config?.label;
+        if (isFLProperty(label)) {
+          label = getFieldLabel(configFields[i].config);
+        } else if (label.startsWith('@')) {
+          label = label.substring(3);
+        }
+        if (pConnect) {
+          label = pConnect.getLocalizedValue(label);
+        }
+        primaryFieldLabels.push(label);
+      }
+      labelsOfFields.splice(primaryFieldsViewIndex, 1, ...primaryFieldLabels);
+    } else {
+      labelsOfFields.splice(primaryFieldsViewIndex, 1);
+    }
+  }
+  return labelsOfFields;
+};
+
+export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, options) => {
+  const { primaryFieldsViewIndex, fields } = options;
+
+  // get resolved field labels for primary fields raw config included in configFields
+  const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
+    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
+  });
+
   const fieldDefs = configFields?.map((field, index) => {
     return {
       type: 'text',
-      label: fields[index].config.label || fields[index].config.caption,
+      label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
       name: field.config.value.substr(4),
@@ -290,7 +404,7 @@ export const createPConnect = (contextName, referenceList, pageReference) => {
 
   // create PConnect object
   const config = { meta: {}, options };
-  const { getPConnect } = PCore.createPConnect(config);
+  const { getPConnect } = PCore.createPConnect(config as any);
 
   return getPConnect();
 };

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/simple-table-manual.component.html

@@ -44,7 +44,7 @@
           <td mat-cell *matCellDef="let element; index as j">
             <div class="header-icon">
               <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
-                <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
+                <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
                 <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
@@ -58,7 +58,7 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       <tr class="mat-row psdk-no-records" *matNoDataRow>
         <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
-          {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </td>
       </tr>
     </table>
@@ -82,7 +82,7 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element; index as j">
           <button id="delete-button" mat-icon-button (click)="deleteRecord(j)">
-            <img class="psdk-utility-card-action-svg-icon" src="{{ menuIconOverride$ }}" />
+            <mat-icon>delete</mat-icon>
           </button>
         </td>
       </ng-container>
@@ -90,7 +90,7 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       <tr class="mat-row psdk-no-records" *matNoDataRow>
         <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
-          {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </td>
       </tr>
     </table>

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/simple-table-manual.component.scss

@@ -26,7 +26,7 @@ table {
 ::ng-deep th.mat-mdc-header-cell,
 td.mat-mdc-cell,
 td.mat-mdc-footer-cell {
-  border-right: 1px solid var(--app-neutral-light-color);
+  border-right: 1px solid var(--mat-sys-outline-variant);
   padding: 8px !important;
   min-width: 10rem;
 }
@@ -76,13 +76,6 @@ td.mat-mdc-cell:last-child {
   padding-left: 0.625rem;
 }
 
-.psdk-icon-search {
-  vertical-align: sub;
-  padding: 0rem 0.125rem;
-  min-width: unset;
-  width: 1.1rem;
-}
-
 .psdk-outer-div-in-form {
   display: inline-grid;
 }
@@ -121,7 +114,7 @@ td.mat-mdc-cell:last-child {
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: var(--app-form-color);
+  background-color: var(--mat-sys-surface-container);
   border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
@@ -137,7 +130,6 @@ td.mat-mdc-cell:last-child {
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-dialog-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -148,7 +140,6 @@ td.mat-mdc-cell:last-child {
   display: table;
   margin: auto;
   min-width: 150px;
-  background-color: var(--app-form-color);
   border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
@@ -160,7 +151,6 @@ tr.mat-mdc-row {
 }
 
 tr.mat-mdc-header-row {
-  background: var(--app-table-header-background-color);
 }
 
 .psdk-data-readonly {
@@ -171,13 +161,13 @@ tr.mat-mdc-header-row {
 .psdk-no-records {
   height: 56px;
   text-align: center;
-  border: 1px solid var(--app-neutral-light-color);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-top: none;
-  background: var(--app-form-color);
 }
 
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
+  filter: var(--app-primary-color-filter);
 }
 
 .label {