@pega/angular-sdk-overrides 23.1.10 → 24.2.10

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

@@ -1,7 +1,6 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details-wide-narrow',
@@ -10,51 +9,17 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsWideNarrowComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
+export class DetailsWideNarrowComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   highlightedDataArr: any[] = [];
   showHighlightedData: boolean;
   arFields$: any[] = [];
   arFields2$: any[] = [];
   propsToUse: any = {};
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    this.checkAndUpdate();
-  }
-
-  ngOnDestroy() {
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  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() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps((this.pConn$.getRawMetadata() as any).config);
+  override updateSelf() {
+    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {
@@ -71,7 +36,7 @@ export class DetailsWideNarrowComponent implements OnInit, OnDestroy {
       });
     }
 
-    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     this.pConn$.setInheritedProp('readOnly', true);
 
     const kids = this.pConn$.getChildren() as any[];

package/lib/template/dynamic-tabs/dynamic-tabs.component.html

@@ -1,3 +1,6 @@
+<div *ngIf="propsToUse.showLabel && propsToUse.label" class="template-title-container">
+  <span>{{ propsToUse.label }}</span>
+</div>
 <mat-tab-group id="dynamic-tabs" mat-stretch-tabs="false" animationDuration="0">
   <mat-tab *ngFor="let tab of tabsItems" [label]="tab.name">
     <component-mapper name="View" [props]="{ pConn$: tab.content.getPConnect() }"></component-mapper>

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

@@ -9,6 +9,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 interface DynamicTabsProps {
   referenceList: string;
   template: string;
+  label?: string;
+  showLabel?: boolean;
 }
 
 @Component({
@@ -24,6 +26,7 @@ export class DynamicTabsComponent implements OnInit, OnDestroy {
 
   angularPConnectData: AngularPConnectData = {};
   tabsItems: any[];
+  propsToUse: any;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -54,16 +57,17 @@ export class DynamicTabsComponent implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    const { referenceList } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DynamicTabsProps;
+    const { referenceList, label, showLabel } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DynamicTabsProps;
+
+    this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
 
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
     const { tablabel } = this.pConn$.getComponentConfig();
     const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
 
-    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     this.pConn$.setInheritedProp('readOnly', true);
 
-    const referenceListData: any = this.pConn$.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
+    const referenceListData = this.pConn$.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
 
     this.tabsItems =
       referenceListData?.map((item, i) => {

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

@@ -105,7 +105,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
 
     const renderMode = this.configProps$.renderMode;
     const displayMode = this.configProps$.displayMode;
-    this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+    this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
     this.contextClass = this.configProps$.contextClass;
     const lookForChildInConfig = this.configProps$.lookForChildInConfig;
     this.heading = this.configProps$.heading ?? 'Row';
@@ -114,7 +114,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     this.pageReference = `${this.pConn$.getPageReference()}${resolvedList}`;
     this.pConn$.setReferenceList(resolvedList);
     if (this.readonlyMode) {
-      this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+      this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }
     this.referenceList = this.configProps$.referenceList;
     if (this.prevRefLength != this.referenceList.length) {
@@ -149,20 +149,10 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   };
 
   addFieldGroupItem() {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
-    } else {
-      // @ts-ignore - second parameter "pageRef" is optional for insert method
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
-    }
+    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
   }
 
   deleteFieldGroupItem(index) {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().deleteEntry(index, this.pageReference);
-    } else {
-      // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
-      this.pConn$.getListActions().deleteEntry(index);
-    }
+    this.pConn$.getListActions().deleteEntry(index);
   }
 }

package/lib/template/field-value-list/field-value-list.component.html

@@ -1,7 +1,7 @@
-<div *ngIf="displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
+<div *ngIf="displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
   <div class="psdk-grid-label">{{ label$ }}</div>
   <div class="psdk-val-labels-left">
-    {{ value$ || '---' }}
+    <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
   </div>
 </div>
 
@@ -9,7 +9,12 @@
   <div *ngIf="displayMode$ === 'STACKED_LARGE_VAL'" class="psdk-container-stacked-large-val">
     <div class="psdk-grid-label">{{ label$ }}</div>
     <div class="psdk-val-stacked">
-      {{ value$ || '---' }}
+      <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
     </div>
   </div>
 </ng-template>
+
+<ng-template #valueTemplate>
+  <div *ngIf="isHtml$; else valueOnly" id="instruction-text" [innerHTML]="value$ || '---'"></div>
+  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>
+</ng-template>

package/lib/template/field-value-list/field-value-list.component.scss

@@ -4,6 +4,7 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
+  padding-block: 8px;
 }
 .psdk-value {
   margin: 8px 0px;
@@ -14,5 +15,5 @@
   font-size: 1.25rem;
 }
 .psdk-val-labels-left {
-  margin: 8px 0px;
+  white-space: break-spaces;
 }

package/lib/template/field-value-list/field-value-list.component.ts

@@ -12,4 +12,5 @@ export class FieldValueListComponent {
   @Input() label$: any;
   @Input() value$: any;
   @Input() displayMode$: any;
+  @Input() isHtml$ = false;
 }

package/lib/template/inline-dashboard-page/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "InlineDashboardPage",
+  "label": "Inline Dashboard",
+  "description": "Inline Dashboard Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "InlineDashboardPage.svg",
+  "properties": []
+}

package/lib/template/inline-dashboard-page/inline-dashboard-page.component.ts

@@ -45,8 +45,8 @@ export class InlineDashboardPageComponent implements OnInit, OnChanges {
 
   updateSelf() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as InlineDashboardPageProps;
-    const arChildren$ = this.pConn$.getChildren() as any[];
-    const allFilters = (this.pConn$.getRawMetadata() as any).children[1];
+    const arChildren$ = this.pConn$.getChildren();
+    const allFilters = this.pConn$.getRawMetadata()?.children[1];
     const filterComponents = buildFilterComponents(this.pConn$, allFilters);
     this.inlineProps = this.configProps$;
     this.children[0] = arChildren$[0];

package/lib/template/list-view/list-view.component.html

@@ -1,5 +1,8 @@
 <div class="psdk-list-header">
   <div>
+    <h3 *ngIf="label" class="label" style="font-weight: bold">
+      {{ label }} <span class="results-count">{{ getResultsText() }}</span>
+    </h3>
     <mat-form-field class="psdk-search" *ngIf="bShowSearch$">
       <mat-label><img class="psdk-icon-search" src="{{ searchIcon$ }}" /> <span class="psdk-search-label">Search</span> </mat-label>
       <input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
@@ -50,7 +53,7 @@
                   color="primary"
                   (click)="_listViewClick(dCol.config, element)"
                 >
-                  {{ element[dCol.config.name] }}
+                  {{ element[dCol.config.name] || '---' }}
                 </button>
                 <ng-template #regular>
                   {{ element[dCol.config.name] || '---' }}
@@ -114,10 +117,10 @@
                   color="primary"
                   (click)="_listViewClick(dCol.config, element)"
                 >
-                  {{ element[dCol.config.name] }}
+                  {{ element[dCol.config.name] || '---' }}
                 </button>
                 <ng-template #regular>
-                  {{ element[dCol.config.name] }}
+                  {{ element[dCol.config.name] || '---' }}
                 </ng-template>
               </td>
             </ng-container>
@@ -150,20 +153,20 @@
             <ng-container *ngIf="singleSelectionMode" matColumnDef="select">
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let row">
-                <mat-radio-button [value]="row[rowID]" (change)="fieldOnChange(row)"></mat-radio-button>
+                <mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
               </td>
             </ng-container>
             <ng-container *ngIf="multiSelectionMode" matColumnDef="select">
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let row">
-                <mat-checkbox [value]="row[rowID]" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
+                <mat-checkbox [value]="row[rowID]" [checked]="isChecked(row)" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
               </td>
             </ng-container>
             <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
               <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
                 {{ dCol.config.label }}
               </th>
-              <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] }}</td>
+              <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>

package/lib/template/list-view/list-view.component.scss

@@ -165,3 +165,14 @@ tr.mat-mdc-row {
   background-color: transparent;
   align-items: center;
 }
+
+.results-count {
+  opacity: 0.7;
+  font-size: 0.8rem;
+  font-weight: bold;
+  margin-inline-start: 0.625rem;
+}
+
+.label {
+  margin: 8px;
+}

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,15 @@ 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';
+import { init } from './listViewHelpers';
 
 declare const window: any;
 
 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;
@@ -40,6 +41,9 @@ interface ListViewProps {
   presets?: any;
   reorderFields: string | boolean;
   grouping: string | boolean;
+  value: any;
+  readonlyContextList: any;
+  label?: string;
 }
 
 export class Group {
@@ -156,6 +160,8 @@ export class ListViewComponent implements OnInit, OnDestroy {
   fieldDefs: any;
   xRayApis = PCore.getDebugger().getXRayRuntime();
   xRayUid = this.xRayApis.startXRay();
+  checkBoxValue: string;
+  label?: string = '';
 
   constructor(
     private psService: ProgressSpinnerService,
@@ -169,7 +175,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     /** 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.bShowSearch$ = this.utils.getBooleanValue(this.configProps$.globalSearch ? this.configProps$.globalSearch : this.payload.globalSearch);
+    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;
@@ -184,9 +190,23 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
     this.selectionMode = this.configProps$.selectionMode;
 
+    this.checkBoxValue = this.configProps$.value;
+
     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());
     setTimeout(() => {
       PCore.getPubSubUtils().subscribe(
@@ -213,7 +233,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
       if (!this.payload) {
         this.payload = { referenceList: this.configProps$.referenceList };
       }
-      useInit({
+      init({
         pConn$: this.pConn$,
         bInForm$: this.bInForm$,
         ...this.payload,
@@ -353,7 +373,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
   }
 
   getListData() {
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
     const componentConfig = this.pConn$.getComponentConfig();
     if (this.configProps$) {
       this.preparePayload();
@@ -364,8 +383,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
       const dataViewParameters = this.payload.parameters;
 
       const workListDataPromise = !this.bInForm$
-        ? // @ts-ignore - 3rd parameter "context" should be optional in getData method
-          PCore.getDataApiUtils().getData(refList, payload)
+        ? PCore.getDataApiUtils().getData(refList, payload)
         : PCore.getDataPageUtils().getDataAsync(
             refList,
             this.pConn$.getContextName(),
@@ -505,6 +523,13 @@ export class ListViewComponent implements OnInit, OnDestroy {
     }
   }
 
+  isChecked(rowIn): any {
+    const initialVal = false;
+    return this.configProps$?.readonlyContextList?.reduce((acc, currRow) => {
+      return acc || rowIn[this.rowID] === currRow[this.rowID];
+    }, initialVal);
+  }
+
   fieldOnChange(row) {
     const value = row[this.rowID];
     const reqObj = {};
@@ -517,6 +542,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     } else {
       reqObj[this.rowID] = value;
     }
+    this.checkBoxValue = value;
     this.pConn$?.getListActions?.()?.setSelectedRows([reqObj]);
   }
 
@@ -601,7 +627,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
         this.pConn$.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
           containerName: 'primary',
           channelName: ''
-        });
+        } as any);
       } else {
         this.pConn$.getActionsApi().openWorkByHandle(pzInsKey, pxObjClass);
       }
@@ -619,10 +645,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
     }
   }
 
-  compare(a: number | string, b: number | string, isAsc: boolean) {
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-  }
-
   _headerSortClick(event, columnData) {
     // images 0 - filter, 1 - arrow, 2 - more
 
@@ -655,21 +677,22 @@ export class ListViewComponent implements OnInit, OnDestroy {
     this.filterSortGroupBy();
   }
 
-  clearOutArrows(event, columnData) {
-    const arImages = event.srcElement.parentElement.getElementsByTagName('img');
-
-    for (const theImage of arImages) {
-      // let theImage = arImages[i]
-      const arrow = theImage.getAttribute('arrow');
-      if (arrow) {
-        const arrowId = theImage.getAttribute('arrowid');
-        if (arrow != 'none' && arrowId != columnData.config.name) {
-          theImage.setAttribute('arrow', 'none');
-          theImage.src = '';
-        }
-      }
-    }
-  }
+  // Commenting below method, since the code which is using it, is already commented
+  // clearOutArrows(event, columnData) {
+  //   const arImages = event.srcElement.parentElement.getElementsByTagName('img');
+
+  //   for (const theImage of arImages) {
+  //     // let theImage = arImages[i]
+  //     const arrow = theImage.getAttribute('arrow');
+  //     if (arrow) {
+  //       const arrowId = theImage.getAttribute('arrowid');
+  //       if (arrow != 'none' && arrowId != columnData.config.name) {
+  //         theImage.setAttribute('arrow', 'none');
+  //         theImage.src = '';
+  //       }
+  //     }
+  //   }
+  // }
 
   sortCompare(a, b): number {
     let aValue = a[this.compareRef];
@@ -689,18 +712,18 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
     switch (this.arrowDirection) {
       case 'up':
-        if (aValue < bValue) {
+        if (!aValue || aValue < bValue) {
           return -1;
         }
-        if (aValue > bValue) {
+        if (!bValue || aValue > bValue) {
           return 1;
         }
         break;
       case 'down':
-        if (aValue > bValue) {
+        if (!bValue || aValue > bValue) {
           return -1;
         }
-        if (aValue < bValue) {
+        if (!aValue || aValue < bValue) {
           return 1;
         }
         break;
@@ -953,7 +976,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) {
@@ -1372,6 +1395,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);

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

@@ -3,7 +3,7 @@ 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$,
@@ -25,7 +25,6 @@ export function useInit(props) {
   let selectionCountThreshold;
 
   // promise to fetch metadata
-  // @ts-ignore - 3rd parameter "associationFilter" should be optional for getDataViewMetadata method
   const metaDataPromise = PCore.getAnalyticsUtils().getDataViewMetadata(referenceList, showDynamicFields);
 
   const promisesArray = [metaDataPromise];

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

@@ -29,6 +29,6 @@ export class NarrowWideFormComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

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

@@ -2,6 +2,7 @@ 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',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   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 +30,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-tab/one-column-tab.component.ts

@@ -29,6 +29,6 @@ export class OneColumnTabComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

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

@@ -34,7 +34,7 @@ export class PageComponent implements OnInit, OnDestroy {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PageProps;
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.title$ = this.configProps$.title;
     const operator = this.configProps$.operator;

package/lib/template/promoted-filters/promoted-filters.component.ts

@@ -81,7 +81,7 @@ export class PromotedFiltersComponent implements OnInit, OnDestroy {
     });
 
     const filtersWithClassID = { ...this.filtersProperties, classID: this.pageClass };
-    this.transientItemID = (this.pConn$.getContainerManager() as any).addTransientItem({ id: this.viewName, data: filtersWithClassID });
+    this.transientItemID = this.pConn$.getContainerManager().addTransientItem({ id: this.viewName, data: filtersWithClassID });
     this.processedFilters = [];
     this.filters.forEach(filter => {
       const filterClone = { ...filter };

package/lib/template/repeating-structures/repeating-structures.component.ts

@@ -41,8 +41,7 @@ export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.fields$ = this.initializeColumns(componentConfig.fields);
 
-    const refList = this.configProps$.referenceList;
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
+    const refList: any = this.configProps$.referenceList;
     const tableDataResults = JSON.parse(JSON.stringify(this.pConn$.getValue(refList)));
 
     // update elements like date format
@@ -108,7 +107,7 @@ export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
   openAssignment(row) {
     const { pxRefObjectClass, pzInsKey } = row;
     const sTarget = this.pConn$.getContainerName();
-    const options: any = { containerName: sTarget };
+    const options = { containerName: sTarget };
     this.pConn$
       .getActionsApi()
       .openAssignment(pzInsKey, pxRefObjectClass, options)

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

@@ -87,10 +87,8 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     const { multiRecordDisplayAs } = this.configProps$;
     let { contextClass } = this.configProps$;
     if (!contextClass) {
-      // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
       let listName = this.pConn$.getComponentConfig().referenceList;
       listName = PCore.getAnnotationUtils().getPropertyName(listName);
-      // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
       contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
     }
     if (multiRecordDisplayAs === 'fieldGroup') {

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

@@ -130,7 +130,7 @@ export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
       type: 'text',
       label: fields[index].config.label || fields[index].config.caption,
       fillAvailableSpace: !!field.config.fillAvailableSpace,
-      id: index,
+      id: `${index}`,
       name: field.config.value.substr(4),
       cellRenderer: TABLE_CELL,
       sort: false,
@@ -190,7 +190,7 @@ export const createMetaForTable = (fields, renderMode) => {
 
 export const filterDataByDate = (item, filterObj) => {
   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;
   let filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
 
   switch (filterObj.containsFilter) {