@pega/angular-sdk-overrides 0.24.9 → 0.25.2

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

@@ -1,4 +1,3 @@
-/* eslint-disable max-classes-per-file */
 import { Component, OnInit, Input, ViewChild, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
@@ -10,6 +9,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatIcon } from '@angular/material/icon';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import isEqual from 'fast-deep-equal';
 
@@ -18,11 +18,10 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { DatapageService } from '@pega/angular-sdk-components';
 import { getReferenceList } from '@pega/angular-sdk-components';
 import { buildFieldsForTable, filterDataByCommonFields, filterDataByDate, getContext } from './helpers';
+import { evaluateAllowRowAction } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { getSeconds } from '@pega/angular-sdk-components';
 
-declare const window: any;
-
 interface SimpleTableManualProps {
   // If any, enter additional props that only exist on this component
   visibility?: boolean;
@@ -37,7 +36,9 @@ interface SimpleTableManualProps {
   contextClass?: string;
   propertyLabel?: string;
   fieldMetadata?: any;
+  allowActions?: any;
   allowTableEdit?: boolean;
+  allowRowDelete?: any;
   editMode?: string;
   addAndEditRowsWithin?: any;
   viewForAddAndEditModal?: any;
@@ -45,6 +46,7 @@ interface SimpleTableManualProps {
   displayMode?: string;
   useSeparateViewForEdit: any;
   viewForEditModal: any;
+  targetClassLabel: string;
 }
 
 class Group {
@@ -61,7 +63,6 @@ class Group {
   selector: 'app-simple-table-manual',
   templateUrl: './simple-table-manual.component.html',
   styleUrls: ['./simple-table-manual.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatTableModule,
@@ -73,8 +74,10 @@ class Group {
     MatOptionModule,
     MatSelectModule,
     MatInputModule,
+    MatIcon,
     forwardRef(() => ComponentMapperComponent)
-  ]
+  ],
+  providers: [DatapageService]
 })
 export class SimpleTableManualComponent implements OnInit, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
@@ -103,6 +106,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   showAddRowButton: boolean;
   prevReferenceList: any[] = [];
   elementsData: MatTableDataSource<any>;
+  originalElementsData: MatTableDataSource<any>;
   rawFields: any;
   label?: string = '';
   searchIcon$: string;
@@ -158,14 +162,17 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   settingsSvgIcon$: string;
 
   isInitialized = false;
-
+  targetClassLabel: string;
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'SimpleTable';
   constructor(
     private angularPConnect: AngularPConnectService,
-    private utils: Utils,
+    public utils: Utils,
     private dataPageService: DatapageService
   ) {}
 
   ngOnInit(): void {
+    this.elementsData = new MatTableDataSource<any>([]);
     this.isInitialized = true;
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
@@ -211,7 +218,6 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SimpleTableManualProps;
 
     if (this.configProps$.visibility != null) {
-      // eslint-disable-next-line no-multi-assign
       this.bVisible$ = this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
 
@@ -219,7 +225,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  but getRawMetadata() has each child.config with datasource and value showing their unresolved values (ex: "@P thePropName")
     //  We need to use the prop name as the "glue" to tie the Angular Material table dataSource, displayColumns and data together.
     //  So, in the code below, we'll use the unresolved config.value (but replacing the space with an underscore to keep things happy)
-    const rawMetadata: any = this.pConn$.getRawMetadata();
+    const rawMetadata = this.pConn$.getRawMetadata();
 
     // Adapted from Nebula
     const {
@@ -227,7 +233,9 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       renderMode,
       children, // destructure children into an array var: "resolvedFields"
       presets,
+      allowActions,
       allowTableEdit,
+      allowRowDelete,
       label: labelProp,
       propertyLabel,
       fieldMetadata,
@@ -237,15 +245,26 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       editModeConfig,
       displayMode,
       useSeparateViewForEdit,
-      viewForEditModal
+      viewForEditModal,
+      targetClassLabel
     } = this.configProps$;
 
+    const simpleTableManualProps: any = {};
+    if (this.checkIfAllowActionsOrRowEditingExist(allowActions) && editMode) {
+      simpleTableManualProps.hideAddRow = allowActions?.allowAdd === false;
+      simpleTableManualProps.hideDeleteRow = allowActions?.allowDelete === false;
+      simpleTableManualProps.hideEditRow = allowActions?.allowEdit === false;
+      simpleTableManualProps.disableDragDrop = allowActions?.allowDragDrop === false;
+    } else if (allowTableEdit === false) {
+      simpleTableManualProps.hideAddRow = true;
+      simpleTableManualProps.hideDeleteRow = true;
+      simpleTableManualProps.disableDragDrop = true;
+    }
+
     this.referenceListStr = getContext(this.pConn$).referenceListStr;
     this.label = labelProp || propertyLabel;
     this.parameters = fieldMetadata?.datasource?.parameters;
-
-    const hideAddRow = allowTableEdit === false;
-    const hideDeleteRow = allowTableEdit === false;
+    this.targetClassLabel = targetClassLabel;
     let { contextClass } = this.configProps$;
     this.referenceList = referenceList;
     if (!contextClass) {
@@ -262,7 +281,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //    config.value (ex: "@P .DeclarantChoice") or
     //    config.datasource (ex: "@ASSOCIATED .DeclarantChoice")
     //  Neither of these appear in the resolved (this.configProps$)
-    const rawConfig = rawMetadata?.config;
+    const rawConfig: any = rawMetadata?.config;
     const rawFields = rawConfig?.children?.[0]?.children || rawConfig?.presets?.[0].children?.[0]?.children;
     this.rawFields = rawFields;
     // At this point, fields has resolvedFields and rawFields we can use
@@ -282,13 +301,14 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.readOnlyMode = renderMode === 'ReadOnly';
     this.editableMode = renderMode === 'Editable';
     const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
-    this.showAddRowButton = !this.readOnlyMode && !hideAddRow;
+    this.showAddRowButton = !this.readOnlyMode && !simpleTableManualProps.hideAddRow;
     this.allowEditingInModal =
       (editMode ? editMode === 'modal' : addAndEditRowsWithin === 'modal') && !(renderMode === 'ReadOnly' || isDisplayModeEnabled);
-    const showDeleteButton = this.editableMode && !hideDeleteRow;
+    const showDeleteButton = this.editableMode && !simpleTableManualProps.hideDeleteRow && evaluateAllowRowAction(allowRowDelete, this.rowData);
     this.defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
     this.bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
     this.editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
+    const primaryFieldsViewIndex = resolvedFields.findIndex(field => field.config.value === 'pyPrimaryFields');
     // const showDeleteButton = !this.readOnlyMode && !hideDeleteRow;
 
     // Nebula has other handling for isReadOnlyMode but has Cosmos-specific code
@@ -299,8 +319,11 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula does). It will also have the "label", and "meta" contains the original,
     //  unchanged config info. For now, much of the info here is carried over from
     //  Nebula and we may not end up using it all.
-    this.fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
-
+    this.fieldDefs = buildFieldsForTable(rawFields, this.pConn$, showDeleteButton, {
+      primaryFieldsViewIndex,
+      fields: resolvedFields
+    });
+    this.fieldDefs = this.fieldDefs?.filter(field => !(field.meta?.config?.hide === true));
     this.initializeDefaultPageInstructions();
 
     // end of from Nebula
@@ -316,15 +339,20 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  from from the fieldDefs. This "name" is the value that
     //  we'll share to connect things together in the table.
 
+    const labelsMap = this.fieldDefs.reduce((acc, curr) => {
+      return { ...acc, [curr.name]: curr.label };
+    }, {});
+
     this.processedFields = [];
 
     this.processedFields = resolvedFields.map((field, i) => {
       field.config.name = this.displayedColumns[i]; // .config["value"].replace(/ ./g,"_");   // replace space dot with underscore
+      field.config.label = labelsMap[field.config.name] || field.config.label;
       return field;
     });
 
     // for adding rows to table when editable and not modal view
-    if (this.prevReferenceList.length !== this.referenceList.length && this.editableMode && !this.allowEditingInModal) {
+    if (this.prevReferenceList.length !== this.referenceList.length) {
       this.buildElementsForTable();
     }
 
@@ -351,11 +379,14 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  ties the 3 data structures together.
   }
 
+  checkIfAllowActionsOrRowEditingExist(newflagobject) {
+    return (newflagobject && Object.keys(newflagobject).length > 0) || this.pConn$.getComponentConfig().allowRowEdit;
+  }
+
   initializeDefaultPageInstructions() {
     if (this.isInitialized) {
       this.isInitialized = false;
       if (this.allowEditingInModal) {
-        // @ts-ignore - An argument for 'uniqueField' was not provided.
         this.pConn$.getListActions().initDefaultPageInstructions(
           this.pConn$.getReferenceList(),
           this.fieldDefs.filter(item => item.name).map(item => item.name)
@@ -373,8 +404,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   sortCompare(a, b): number {
-    let aValue = a[this.compareRef];
-    let bValue = b[this.compareRef];
+    let aValue = a[0][this.compareRef];
+    let bValue = b[0][this.compareRef];
 
     if (this.compareType == 'Date' || this.compareType == 'DateTime') {
       aValue = getSeconds(aValue);
@@ -497,17 +528,20 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     // run through list of elements in path, if menu not in th path, then want to
     // hide (toggle) the menu
     const eventPath = event.path;
-    for (let eventIndex = 0; eventIndex < eventPath.length; eventIndex++) {
-      if (
-        eventPath[eventIndex].className == 'psdk-modal-file-top' ||
-        eventPath[eventIndex].tagName == 'BUTTON' ||
-        eventPath[eventIndex].tagName == 'MAT-OPTION' ||
-        eventPath[eventIndex].tagName == 'MAT-INPUT'
-      ) {
-        bInPopUp = true;
-        break;
+    if (eventPath) {
+      for (let eventIndex = 0; eventIndex < eventPath.length; eventIndex++) {
+        if (
+          eventPath[eventIndex].className == 'psdk-modal-file-top' ||
+          eventPath[eventIndex].tagName == 'BUTTON' ||
+          eventPath[eventIndex].tagName == 'MAT-OPTION' ||
+          eventPath[eventIndex].tagName == 'MAT-INPUT'
+        ) {
+          bInPopUp = true;
+          break;
+        }
       }
     }
+
     if (!bInPopUp) {
       // this.bShowFilterPopover$ = false;
 
@@ -626,7 +660,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     }
   }
 
-  filterData(item: any) {
+  filterData(element: any) {
+    const item = element[0];
     let bKeep = true;
     for (const filterObj of this.filterByColumns) {
       if (filterObj.containsFilterValue != '' || filterObj.containsFilter == 'null' || filterObj.containsFilter == 'notnull') {
@@ -640,6 +675,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
             bKeep = filterDataByCommonFields(item, filterObj);
             break;
         }
+      } else if (filterObj.containsFilterValue === '') {
+        bKeep = true;
       }
 
       // if don't keep stop filtering
@@ -652,14 +689,22 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   filterSortGroupBy() {
-    let theData = this.originalData.slice();
+    let theData = this.originalData.slice().map((item, index) => {
+      return [item, index];
+    });
 
     // last filter config data is global
     theData = theData.filter(this.filterData.bind(this));
 
     // last sort config data is global
     theData.sort(this.sortCompare.bind(this));
-    this.rowData.data = theData;
+    this.rowData.data = theData.map(item => item[0]);
+
+    const newElements: any = new Array(this.rowData.data.length);
+    theData.forEach((item, index) => {
+      newElements[index] = this.originalElementsData[item[1]];
+    });
+    this.elementsData = newElements;
   }
 
   _headerSortClick(event, columnData) {
@@ -782,7 +827,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     const seen = {};
     return a.filter(item => {
       const k = key(item);
-      // eslint-disable-next-line no-return-assign, no-prototype-builtins
+      // eslint-disable-next-line no-prototype-builtins
       return seen.hasOwnProperty(k) ? false : (seen[k] = true);
     });
   }
@@ -873,7 +918,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
 
   // return the value that should be shown as the contents for the given row data
   //  of the given row field
-  getRowValue(inRowData: Object, inColKey: string): any {
+  getRowValue(inRowData: object, inColKey: string): any {
     // See what data (if any) we have to display
     const refKeys: string[] = inColKey.split('.');
     let valBuilder = inRowData;
@@ -916,39 +961,41 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     if (this.allowEditingInModal && this.defaultView) {
       this.pConn$
         .getActionsApi()
+        // @ts-expect-error
         .openEmbeddedDataModal(
           this.defaultView,
-          this.pConn$,
+          this.pConn$ as any,
           this.referenceListStr,
           this.referenceList.length,
-          PCore.getConstants().RESOURCE_STATUS.CREATE
+          PCore.getConstants().RESOURCE_STATUS.CREATE,
+          this.targetClassLabel
         );
     } else {
-      // @ts-ignore - second parameter "pageRef" is optional for insert method
       this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
     }
 
     this.pConn$.clearErrorMessages({
-      property: (this.pConn$.getStateProps() as any)?.referenceList?.substring(1)
-    } as any);
+      property: this.pConn$.getStateProps()?.referenceList?.substring(1)
+    });
   }
 
   editRecord(data, index) {
     if (data) {
       this.pConn$
         .getActionsApi()
+        // @ts-expect-error
         .openEmbeddedDataModal(
           this.bUseSeparateViewForEdit ? this.editView : this.defaultView,
-          this.pConn$,
+          this.pConn$ as any,
           this.referenceListStr,
           index,
-          PCore.getConstants().RESOURCE_STATUS.UPDATE
+          PCore.getConstants().RESOURCE_STATUS.UPDATE,
+          this.targetClassLabel
         );
     }
   }
 
   deleteRecord(index) {
-    // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
     this.pConn$.getListActions().deleteEntry(index);
   }
 
@@ -958,23 +1005,36 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.referenceList.forEach((element, index) => {
       const data: any = [];
       this.rawFields?.forEach(item => {
-        const referenceListData = getReferenceList(this.pConn$);
-        const isDatapage = referenceListData.startsWith('D_');
-        const pageReferenceValue = isDatapage ? `${referenceListData}[${index}]` : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
-        const config = {
-          meta: item,
-          options: {
-            context,
-            pageReference: pageReferenceValue,
-            referenceList: referenceListData,
-            hasForm: true
-          }
-        };
-        const view = PCore.createPConnect(config);
-        data.push(view);
+        if (!item?.config?.hide) {
+          item = {
+            ...item,
+            config: {
+              ...item.config,
+              label: '',
+              displayMode: this.readOnlyMode || this.allowEditingInModal ? 'DISPLAY_ONLY' : undefined
+            }
+          };
+          const referenceListData = getReferenceList(this.pConn$);
+          const isDatapage = referenceListData.startsWith('D_');
+          const pageReferenceValue = isDatapage
+            ? `${referenceListData}[${index}]`
+            : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
+          const config = {
+            meta: item,
+            options: {
+              context,
+              pageReference: pageReferenceValue,
+              referenceList: referenceListData,
+              hasForm: true
+            }
+          };
+          const view = PCore.createPConnect(config);
+          data.push(view);
+        }
       });
       eleData.push(data);
     });
+    this.originalElementsData = eleData;
     this.elementsData = eleData;
   }
 }

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

@@ -8,7 +8,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-simple-table-select',
   templateUrl: './simple-table-select.component.html',
   styleUrls: ['./simple-table-select.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class SimpleTableSelectComponent implements OnInit, OnDestroy {
@@ -57,7 +56,7 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    const theConfigProps: any = this.pConn$.getConfigProps();
+    const theConfigProps = this.pConn$.getConfigProps();
     this.label = theConfigProps.label;
     this.renderMode = theConfigProps.renderMode;
     this.showLabel = theConfigProps.showLabel;
@@ -71,7 +70,7 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
       this.propsToUse.label = '';
     }
     const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
-    const { selectionMode, selectionList }: any = this.pConn$.getConfigProps();
+    const { selectionMode, selectionList } = this.pConn$.getConfigProps();
     const isMultiSelectMode = selectionMode === MULTI;
     if (isMultiSelectMode && this.renderMode === 'ReadOnly') {
       this.showSimpleTableManual = true;
@@ -137,7 +136,7 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
       parameters: this.parameters
     };
 
-    this.filters = (this.pConn$.getRawMetadata() as any).config.promotedFilters ?? [];
+    this.filters = (this.pConn$.getRawMetadata()?.config as any).promotedFilters ?? [];
 
     this.isSearchable = this.filters.length > 0;
   }

package/lib/template/single-reference-readonly/single-reference-readonly.component.html

@@ -1 +1,4 @@
-<component-mapper name="SemanticLink" [props]="{ pConn$ }"></component-mapper>
+<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'">
+  <div *ngIf="label" class="psdk-grid-label">{{ label }}</div>
+  <component-mapper name="SemanticLink" [props]="{ pConn$: newPconn, formGroup$ }"></component-mapper>
+</div>

package/lib/template/single-reference-readonly/single-reference-readonly.component.scss

@@ -0,0 +1,21 @@
+.psdk-grid-display {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.psdk-grid-nondisplay {
+  margin-top: 1rem;
+}
+
+.psdk-label {
+  color: var(--app-label-color);
+  margin: 8px 0px;
+}
+
+.psdk-value {
+  margin: 8px 0px;
+}

package/lib/template/single-reference-readonly/single-reference-readonly.component.ts

@@ -1,15 +1,115 @@
-import { Component, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, Input, forwardRef, OnInit, OnDestroy } from '@angular/core';
 import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getDataRelationshipContextFromKey } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-single-reference-readonly',
   templateUrl: './single-reference-readonly.component.html',
   styleUrls: ['./single-reference-readonly.component.scss'],
-  standalone: true,
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class SingleReferenceReadonlyComponent {
+export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
+  @Input() dataRelationshipContext?: any;
+
+  angularPConnectData: AngularPConnectData = {};
+  configProps: any;
+  component: any;
+  label: string;
+  newPconn: typeof PConnect;
+  displayMode: string;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // 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() {
+    this.configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    const rawViewMetadata = this.pConn$.getRawMetadata();
+    const label = this.configProps.label;
+    const showLabel = this.configProps.showLabel;
+    const propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
+    const type = (rawViewMetadata?.config as any)?.componentType;
+    this.displayMode = this.configProps.displayMode;
+    const targetObjectType = this.configProps.targetObjectType;
+    const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
+    const hideLabel = this.configProps.hideLabel;
+    // const additionalFields = this.configProps.additionalFields;
+    const displayAs = this.configProps.displayAs ?? 'readonly';
+    const dataRelationshipContext = (rawViewMetadata?.config as any)?.displayField
+      ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField)
+      : this.dataRelationshipContext;
+    if (propsToUse.showLabel === false) {
+      propsToUse.label = '';
+    }
+    this.label = propsToUse.label;
+
+    const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown', 'RadioButtons'];
+    const config: any = {
+      ...rawViewMetadata?.config,
+      primaryField: (rawViewMetadata?.config as any)?.displayField,
+      label: this.label
+    };
+
+    const activeViewRuleClass = (rawViewMetadata?.config as any)?.targetObjectClass;
+    if (editableComponents.includes(type)) {
+      config.caseClass = activeViewRuleClass;
+      config.text = config.primaryField;
+      config.caseID = config.value;
+      config.contextPage = `@P .${dataRelationshipContext}`;
+      config.resourceParams = {
+        workID: displayAs === 'table' ? (config as any)?.selectionKey : config.value
+      };
+      config.resourcePayload = {
+        caseClassName: activeViewRuleClass
+      };
+    }
+
+    this.component = this.pConn$.createComponent(
+      {
+        type: 'SemanticLink',
+        config: {
+          ...config,
+          displayMode: this.displayMode,
+          referenceType,
+          hideLabel,
+          dataRelationshipContext
+        }
+      },
+      '',
+      0,
+      {}
+    );
+    this.newPconn = this.component.getPConnect();
+  }
 }

package/lib/template/sub-tabs/sub-tabs.component.ts

@@ -10,7 +10,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-sub-tabs',
   templateUrl: './sub-tabs.component.html',
   styleUrls: ['./sub-tabs.component.scss'],
-  standalone: true,
   imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class SubTabsComponent implements OnInit, OnDestroy {

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

@@ -2,16 +2,16 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-three-column',
   templateUrl: './three-column.component.html',
   styleUrls: ['./three-column.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class ThreeColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class ThreeColumnComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +29,6 @@ export class ThreeColumnComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

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

@@ -6,7 +6,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-three-column-page',
   templateUrl: './three-column-page.component.html',
   styleUrls: ['./three-column-page.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class ThreeColumnPageComponent {