@pega/angular-sdk-overrides 0.24.9 → 0.25.2

package/lib/template/list-view/list-view.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 { MatDatepickerModule } from '@angular/material/datepicker';
@@ -22,13 +21,13 @@ import { getCurrencyOptions } from '@pega/angular-sdk-components';
 import { getLocale, getSeconds } from '@pega/angular-sdk-components';
 import { formatters } from '@pega/angular-sdk-components';
 
-import { useInit } from './listViewHelpers';
-
-declare const window: any;
+import { init } from './listViewHelpers';
 
 const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
 
 interface ListViewProps {
+  inheritedProps: any;
+  title: string | undefined;
   // If any, enter additional props that only exist on this component
   globalSearch?: boolean;
   referenceList?: any;
@@ -42,6 +41,10 @@ interface ListViewProps {
   grouping: string | boolean;
   value: any;
   readonlyContextList: any;
+  label?: string;
+  displayAs?: string;
+  showRecords: boolean;
+  viewName?: string;
 }
 
 export class Group {
@@ -58,7 +61,6 @@ export class Group {
   selector: 'app-list-view',
   templateUrl: './list-view.component.html',
   styleUrls: ['./list-view.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatFormFieldModule,
@@ -156,13 +158,16 @@ export class ListViewComponent implements OnInit, OnDestroy {
   query: any = null;
   paging: any;
   fieldDefs: any;
-  xRayApis = PCore.getDebugger().getXRayRuntime();
-  xRayUid = this.xRayApis.startXRay();
   checkBoxValue: string;
-
+  label?: string = '';
+  uniqueId = crypto.randomUUID();
+  displayAs: any;
+  showRecords: any;
+  identifier: string;
+  promotedFiltersId: string;
   constructor(
     private psService: ProgressSpinnerService,
-    private utils: Utils
+    public utils: Utils
   ) {}
 
   ngOnInit(): void {
@@ -171,12 +176,13 @@ export class ListViewComponent implements OnInit, OnDestroy {
     const defRowID = this.configProps$?.referenceType === 'Case' ? 'pyID' : 'pyGUID';
     /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
     this.compositeKeys = this.configProps$?.compositeKeys;
-    this.rowID = this.compositeKeys && this.compositeKeys?.length === 1 ? this.compositeKeys[0] : defRowID;
+    this.rowID = this.payload?.compositeKeys?.length === 1 ? this.payload?.compositeKeys[0] : defRowID;
     this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$?.globalSearch ? this.configProps$.globalSearch : this.payload?.globalSearch);
     this.bColumnReorder$ = this.utils.getBooleanValue(this.configProps$.reorderFields);
     this.bGrouping$ = this.utils.getBooleanValue(this.configProps$.grouping);
     this.showDynamicFields = this.configProps$?.showDynamicFields;
-
+    this.displayAs = this.configProps$.displayAs;
+    this.showRecords = this.configProps$.showRecords;
     this.menuSvgIcon$ = this.utils.getImageSrc('more', this.utils.getSDKStaticContentUrl());
     this.arrowDownSvgIcon$ = this.utils.getImageSrc('arrow-down', this.utils.getSDKStaticContentUrl());
     this.arrowUpSvgIcon$ = this.utils.getImageSrc('arrow-up', this.utils.getSDKStaticContentUrl());
@@ -192,7 +198,20 @@ export class ListViewComponent implements OnInit, OnDestroy {
     this.arFilterMainButtons$.push({ actionID: 'submit', jsAction: 'submit', name: 'Submit' });
     this.arFilterSecondaryButtons$.push({ actionID: 'cancel', jsAction: 'cancel', name: 'Cancel' });
 
+    let title = this.configProps$?.title || this.configProps$?.label || 'List';
+    const inheritedProps = this.configProps$?.inheritedProps;
+    if (title === 'List' && inheritedProps) {
+      for (const inheritedProp of inheritedProps) {
+        if (inheritedProp?.prop === 'label') {
+          title = inheritedProp?.value;
+          break;
+        }
+      }
+    }
+    this.label = title;
+
     this.searchIcon$ = this.utils.getImageSrc('search', this.utils.getSDKStaticContentUrl());
+    this.promotedFiltersId = `promoted-filters-queryable-${this.uniqueId}`;
     setTimeout(() => {
       PCore.getPubSubUtils().subscribe(
         PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE,
@@ -213,19 +232,27 @@ export class ListViewComponent implements OnInit, OnDestroy {
         false,
         this.pConn$.getContextName()
       );
+      PCore.getPubSubUtils().subscribe(
+        PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS,
+        data => {
+          this.showRecords = data.showRecords;
+          const filterData = this.prepareFilters(data);
+          this.processFilterChange(filterData);
+        },
+        this.promotedFiltersId
+      );
     }, 0);
     if (this.configProps$) {
       if (!this.payload) {
         this.payload = { referenceList: this.configProps$.referenceList };
       }
-      useInit({
+      init({
         pConn$: this.pConn$,
         bInForm$: this.bInForm$,
         ...this.payload,
         listContext: this.listContext,
         ref: this.ref,
         showDynamicFields: this.showDynamicFields,
-        xRayUid: this.xRayUid,
         cosmosTableRef: this.cosmosTableRef,
         selectionMode: this.selectionMode
       }).then(response => {
@@ -233,6 +260,29 @@ export class ListViewComponent implements OnInit, OnDestroy {
         this.getListData();
       });
     }
+    this.clearSelectionsAndUpdateTable(this.pConn$, this.uniqueId, this.configProps$?.viewName);
+  }
+
+  clearSelectionsAndUpdateTable(getPConnect: any, uniqueId: string, viewName): void {
+    const clearSelectionsAndRefreshList = ({ viewName: name, clearSelections }: any) => {
+      if (name === viewName) {
+        const { selectionMode } = getPConnect.getRawConfigProps();
+        if (!selectionMode) {
+          return;
+        }
+        if (clearSelections) {
+          if (selectionMode === 'single') {
+            getPConnect.getListActions().setSelectedRows({});
+          } else {
+            getPConnect.getListActions().clearSelectedRows();
+          }
+        }
+      }
+    };
+
+    this.identifier = `clear-and-update-advanced-search-selections-${uniqueId}`;
+
+    PCore.getPubSubUtils().subscribe('update-advanced-search-selections', clearSelectionsAndRefreshList, this.identifier);
   }
 
   getFieldFromFilter(filter, dateRange = false) {
@@ -247,82 +297,22 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
   // Will be triggered when EVENT_DASHBOARD_FILTER_CHANGE fires
   processFilterChange(data) {
-    const { filterId, filterExpression } = data;
-    let dashboardFilterPayload: any = {
-      query: {
-        filter: {},
-        select: []
-      }
-    };
-
-    this.filters[filterId] = filterExpression;
-    let isDateRange = !!data.filterExpression?.AND;
-    // Will be AND by default but making it dynamic in case we support dynamic relational ops in future
-    const relationalOp = 'AND';
-
-    let field = this.getFieldFromFilter(filterExpression, isDateRange);
-    const selectParam: any[] = [];
-    // Constructing the select parameters list (will be sent in dashboardFilterPayload)
-    this.displayedColumns$?.forEach(col => {
-      selectParam.push({
-        field: col
-      });
-    });
-
-    // Checking if the triggered filter is applicable for this list
-    if (data.filterExpression !== null && !(this.displayedColumns$?.length && this.displayedColumns$?.includes(field))) {
-      return;
-    }
-    // This is a flag which will be used to reset dashboardFilterPayload in case we don't find any valid filters
-    let validFilter = false;
+    this.updateFiltersFromData(data);
 
-    let index = 1;
-    // Iterating over the current filters list to create filter data which will be POSTed
-    const filterKeys: any[] = Object.keys(this.filters);
-    const filterValues: any[] = Object.values(this.filters);
-    for (let filterIndex = 0; filterIndex < filterKeys.length; filterIndex++) {
-      const filter = filterValues[filterIndex];
-      // If the filter is null then we can skip this iteration
-      if (filter === null) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-
-      // Checking if the filter is of type- Date Range
-      isDateRange = !!filter?.AND;
-      field = this.getFieldFromFilter(filter, isDateRange);
-
-      if (!(this.displayedColumns$?.length && this.displayedColumns$?.includes(field))) {
-        // eslint-disable-next-line no-continue
-        continue;
-      }
-      // If we reach here that implies we've at least one valid filter, hence setting the flag
-      validFilter = true;
-      /** Below are the 2 cases for- Text & Date-Range filter types where we'll construct filter data which will be sent in the dashboardFilterPayload
-       * In Constellation DX Components, through Repeating Structures they might be using several APIs to do it. We're doing it here
-       */
-      if (isDateRange) {
-        dashboardFilterPayload = this.filterBasedOnDateRange(dashboardFilterPayload, filter, relationalOp, selectParam, index);
-      } else {
-        dashboardFilterPayload.query.filter.filterConditions = {
-          ...dashboardFilterPayload.query.filter.filterConditions,
-          [`T${index++}`]: { ...filter.condition, ignoreCase: true }
-        };
+    const selectParam = this.displayedColumns$?.map(col => ({ field: col })) || [];
 
-        if (dashboardFilterPayload.query.filter.logic) {
-          dashboardFilterPayload.query.filter.logic = `${dashboardFilterPayload.query.filter.logic} ${relationalOp} T${index - 1}`;
-        } else {
-          dashboardFilterPayload.query.filter.logic = `T${index - 1}`;
-        }
+    if (this.displayAs !== 'advancedSearch') {
+      const { filterExpression } = data;
+      const isDateRange = !!filterExpression?.AND;
+      const field = this.getFieldFromFilter(filterExpression, isDateRange);
 
-        dashboardFilterPayload.query.select = selectParam;
+      if (filterExpression !== null && !this.displayedColumns$?.includes(field)) {
+        return;
       }
     }
 
-    // Reset the dashboardFilterPayload if we end up with no valid filters for the list
-    if (!validFilter) {
-      dashboardFilterPayload = undefined;
-    }
+    const dashboardFilterPayload = this.buildFilterPayload(selectParam);
+
     this.filterPayload = dashboardFilterPayload;
     this.getListData();
   }
@@ -357,10 +347,22 @@ export class ListViewComponent implements OnInit, OnDestroy {
     return PCore.getAnalyticsUtils().getDataViewMetadata(refList, this.showDynamicFields);
   }
 
+  getValue(col) {
+    return this.fieldDefs.find(f => f.name === col)?.label;
+  }
+
   getListData() {
+    this.preparePayload();
     const componentConfig = this.pConn$.getComponentConfig();
-    if (this.configProps$) {
-      this.preparePayload();
+    const columnFields = componentConfig.presets[0].children[0].children;
+    const columns = this.getHeaderCells(columnFields, this.fieldDefs);
+    this.fields$ = this.configProps$.presets[0].children[0].children;
+    this.displayedColumns$ = columns.map(col => {
+      return col.id;
+    });
+    if (this.displayAs === 'advancedSearch' && !this.showRecords) {
+      Promise.resolve({ data: null });
+    } else if (this.configProps$) {
       const refList = this.configProps$.referenceList;
       const fieldsMetaDataPromise = this.getFieldsMetadata(refList);
       // returns a promise
@@ -386,17 +388,9 @@ export class ListViewComponent implements OnInit, OnDestroy {
           const fieldsMetaData = results[0];
           const workListData = results[1];
 
-          this.fields$ = this.configProps$.presets[0].children[0].children;
-          // this is an unresovled version of this.fields$, need unresolved, so can get the property reference
-          const columnFields = componentConfig.presets[0].children[0].children;
-
           const tableDataResults = !this.bInForm$ ? workListData.data.data : workListData.data;
 
-          const columns = this.getHeaderCells(columnFields, this.fieldDefs);
           this.fields$ = this.updateFields(this.fields$, fieldsMetaData.data.fields, columns);
-          this.displayedColumns$ = columns.map(col => {
-            return col.id;
-          });
           this.response = tableDataResults;
           this.updatedRefList = this.updateData(tableDataResults, this.fields$);
           if (this.selectionMode === SELECTION_MODE.SINGLE && this.updatedRefList?.length > 0) {
@@ -424,6 +418,33 @@ export class ListViewComponent implements OnInit, OnDestroy {
     }
   }
 
+  prepareFilters(data) {
+    return Object.entries(data.payload).reduce((acc, [field, value]) => {
+      if (value) {
+        let comparator = 'EQ';
+        const filterRecord = this.listContext.meta.fieldDefs.filter(item => item.id === field);
+        if (filterRecord?.[0]?.meta.type === 'TextInput') {
+          comparator = 'CONTAINS';
+        }
+        acc[field] = {
+          filterExpression: {
+            condition: {
+              lhs: {
+                field
+              },
+              comparator,
+              rhs: {
+                value
+              }
+            }
+          },
+          filterId: field
+        };
+      }
+      return acc;
+    }, {});
+  }
+
   preparePayload() {
     const { fieldDefs, itemKey, patchQueryFields } = this.listContext.meta;
     this.fieldDefs = fieldDefs;
@@ -465,6 +486,8 @@ export class ListViewComponent implements OnInit, OnDestroy {
       `dashboard-component-${'id'}`,
       this.pConn$.getContextName()
     );
+    PCore.getPubSubUtils().unsubscribe('update-advanced-search-selections', this.identifier);
+    PCore.getPubSubUtils().unsubscribe(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, this.promotedFiltersId);
   }
 
   // ngAfterViewInit() {
@@ -961,7 +984,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
   filterDataWithDate(item, filterObj, filterValue) {
     let bKeep;
-    let value = item[filterObj.ref] != null ?? item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
+    let value = item[filterObj.ref] != null || item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
     filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
 
     switch (filterObj.containsFilter) {
@@ -1144,7 +1167,7 @@ export class ListViewComponent 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);
     });
   }
@@ -1380,6 +1403,11 @@ export class ListViewComponent implements OnInit, OnDestroy {
     return listFields;
   }
 
+  getResultsText() {
+    const recordsCount = this.repeatList$?.paginator?.length || 0;
+    return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
+  }
+
   getField(fieldDefs, columnId) {
     const fieldsMap = this.getFieldsMap(fieldDefs);
     return fieldsMap.get(columnId);
@@ -1413,4 +1441,60 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
     return select;
   }
+
+  private updateFiltersFromData(data) {
+    if (this.displayAs === 'advancedSearch') {
+      this.filters = {};
+      Object.values(data).forEach((value: any) => {
+        this.filters[value.filterId] = value.filterExpression;
+      });
+    } else {
+      const { filterId, filterExpression } = data;
+      this.filters[filterId] = filterExpression;
+    }
+  }
+
+  private buildFilterPayload(selectParam: any[]) {
+    const filterConditions = {};
+    let logic = '';
+    let index = 1;
+    const relationalOp = 'AND';
+
+    for (const currentFilter of Object.values(this.filters)) {
+      const filter: any = currentFilter;
+      if (!filter) continue;
+
+      const isDateRange = !!filter.AND;
+      const field = this.getFieldFromFilter(filter, isDateRange);
+
+      if (!this.displayedColumns$?.includes(field)) continue;
+
+      if (logic) {
+        logic += ` ${relationalOp} `;
+      }
+
+      if (isDateRange) {
+        const dateRelationalOp = filter.AND ? 'AND' : 'OR';
+        filterConditions[`T${index}`] = { ...filter[relationalOp][0].condition };
+        filterConditions[`T${index + 1}`] = { ...filter[relationalOp][1].condition };
+        logic += `(T${index} ${dateRelationalOp} T${index + 1})`;
+        index += 2;
+      } else {
+        filterConditions[`T${index}`] = { ...filter.condition, ...(filter.condition.comparator === 'CONTAINS' && { ignoreCase: true }) };
+        logic += `T${index}`;
+        index++;
+      }
+    }
+
+    if (!logic) {
+      return undefined;
+    }
+
+    return {
+      query: {
+        filter: { filterConditions, logic },
+        select: selectParam
+      }
+    };
+  }
 }

package/lib/template/list-view/listViewHelpers.ts

@@ -1,9 +1,6 @@
 import { getContext, readContextResponse } from './utils';
 
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 1 error)
-declare const PCore: any;
-
-export function useInit(props) {
+export function init(props) {
   const {
     referenceList,
     pConn$,
@@ -15,7 +12,6 @@ export function useInit(props) {
     ref,
     showDynamicFields,
     isDataObject,
-    xRayUid,
     cosmosTableRef
   } = props;
   let { editing, selectionMode } = props;
@@ -25,9 +21,9 @@ export function useInit(props) {
   let selectionCountThreshold;
 
   // promise to fetch metadata
-  const metaDataPromise = PCore.getAnalyticsUtils().getDataViewMetadata(referenceList, showDynamicFields);
+  const metaDataPromise = PCore.getAnalyticsUtils().getDataViewMetadata(referenceList, showDynamicFields, null);
 
-  const promisesArray = [metaDataPromise];
+  const promisesArray: any = [metaDataPromise];
 
   // promise to fetch report configured columns
   const reportColumnsPromise = PCore.getAnalyticsUtils()
@@ -70,8 +66,7 @@ export function useInit(props) {
     pConn$,
     compositeKeys,
     isSearchable,
-    isCacheable: true,
-    xRayUid
+    isCacheable: true
   }).then(async context => {
     return readContextResponse(context, {
       ...props,
@@ -79,7 +74,6 @@ export function useInit(props) {
       selectionCountThreshold,
       ref,
       selectionMode,
-      xRayUid,
       cosmosTableRef
     });
   });

package/lib/template/list-view/utils.ts

@@ -1,8 +1,5 @@
 import { getDefaultViewMeta } from './DefaultViewMeta';
 
-// Remove this and use "real" PCore type once .d.ts is fixed (currently shows 5 errors)
-declare const PCore: any;
-
 const USER_REFERENCE = 'UserReference';
 const PAGE = '!P!';
 const PAGELIST = '!PL!';
@@ -121,7 +118,7 @@ export const isPageListInPath = (propertyName, currentClassID) => {
     return false;
   }
   const [first, ...rest] = propertyName.split('.');
-  const metadata = PCore.getMetadataUtils().getPropertyMetadata(first, currentClassID);
+  const metadata: any = PCore.getMetadataUtils().getPropertyMetadata(first, currentClassID);
   if (metadata?.type === 'Page List') {
     return true;
   }
@@ -205,7 +202,7 @@ export function getConfigEmbeddedFieldsMeta(configFields, classID) {
       if (value.includes('[')) {
         value = value.substring(0, value.indexOf('[')) + value.substring(value.indexOf(']') + 1);
       }
-      const meta = PCore.getMetadataUtils().getEmbeddedPropertyMetadata(value, classID);
+      const meta: any = PCore.getMetadataUtils().getEmbeddedPropertyMetadata(value, classID);
       meta.fieldID = field;
       configEmbeddedFieldsMeta.push(meta);
     }
@@ -553,6 +550,27 @@ function populateRenderingOptions(name, config, field) {
     config.cellRenderer = formatConstants.Integer;
   }
 }
+function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+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;
+
+  const definedOnClassID = fieldMetaData.definedOnClassID;
+  const localeValue = PCore.getLocaleUtils().getLocaleValue(
+    fieldLabel,
+    `${definedOnClassID ?? fieldMetaData.classID ?? classID}.${propertyName}`,
+    PCore.getLocaleUtils().FIELD_LABELS_BUNDLE_KEY,
+    null
+  );
+  return localeValue || fieldLabel;
+}
 export function initializeColumns(fields: any[] = [], getMappedProperty: any = null) {
   return fields.map((field, originalColIndex) => {
     let name = field.config.value;
@@ -565,7 +583,9 @@ export function initializeColumns(fields: any[] = [], getMappedProperty: any = n
 
     let label = field.config.label || field.config.caption;
     const { show = true, displayAs } = field.config;
-    if (label.startsWith('@')) {
+    if (isFLProperty(label)) {
+      label = getFieldLabel(field.config);
+    } else if (label.startsWith('@')) {
       label = label.substring(3);
     }
 
@@ -656,7 +676,7 @@ export const readContextResponse = async (context, params) => {
   const { pConn$, apiContext, children, showDynamicFields, referenceList, isDataObject } = params;
   // let { listContext } = params;
   const { promisesResponseArray, apiContext: otherContext } = context;
-  // eslint-disable-next-line sonarjs/no-unused-collection
+
   const listOfComponents: any[] = [];
   const {
     data: { fields: metaFields, classID, isQueryable }

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

@@ -12,7 +12,6 @@ interface MultiReferenceReadOnlyProps {
   selector: 'app-multi-reference-readonly',
   templateUrl: './multi-reference-readonly.component.html',
   styleUrls: ['./multi-reference-readonly.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class MultiReferenceReadonlyComponent implements OnInit, OnDestroy {

package/lib/template/narrow-wide-form/narrow-wide-form.component.ts

@@ -7,7 +7,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-narrow-wide-form',
   templateUrl: './narrow-wide-form.component.html',
   styleUrls: ['./narrow-wide-form.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class NarrowWideFormComponent implements OnInit, OnChanges {
@@ -29,6 +28,6 @@ export class NarrowWideFormComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/lib/template/object-page/object-page.component.html

@@ -0,0 +1 @@
+<component-mapper name="CaseView" [props]="{ pConn$, formGroup$ }"></component-mapper>

package/lib/template/object-page/object-page.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ObjectPageComponent } from './object-page.component';
+
+describe('ObjectPageComponent', () => {
+  let component: ObjectPageComponent;
+  let fixture: ComponentFixture<ObjectPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ObjectPageComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ObjectPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/lib/template/object-page/object-page.component.ts

@@ -0,0 +1,14 @@
+import { Component, forwardRef, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'lib-object-page',
+  imports: [forwardRef(() => ComponentMapperComponent)],
+  templateUrl: './object-page.component.html',
+  styleUrl: './object-page.component.scss'
+})
+export class ObjectPageComponent {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+}

package/lib/template/one-column/one-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-one-column',
   templateUrl: './one-column.component.html',
   styleUrls: ['./one-column.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class OneColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class OneColumnComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +29,6 @@ export class OneColumnComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

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

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

package/lib/template/one-column-tab/one-column-tab.component.scss

@@ -1,5 +1,5 @@
 .psdk-one-column-tab {
-  background-color: var(--app-form-color);
+  background-color: var(--mat-sys-surface-container);
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   border-radius: 0.3125rem;

package/lib/template/one-column-tab/one-column-tab.component.ts

@@ -7,7 +7,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-one-column-tab',
   templateUrl: './one-column-tab.component.html',
   styleUrls: ['./one-column-tab.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class OneColumnTabComponent implements OnInit, OnChanges {
@@ -29,6 +28,6 @@ export class OneColumnTabComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }