@pega/angular-sdk-overrides 0.25.1 → 0.25.3

package/lib/template/data-reference/search-form/search-form.component.ts

@@ -0,0 +1,167 @@
+import { Component, forwardRef, Input, OnChanges, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { getFirstVisibleTabId, getActiveTabId, searchtabsClick } from '@pega/angular-sdk-components';
+import { MatRadioModule } from '@angular/material/radio';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule, MatDialogActions, MatDialogContent, MatDialogTitle } from '@angular/material/dialog';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getTabCountSources, getData } from './tabsData';
+import { getFieldMeta } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-search-form',
+  templateUrl: './search-form.component.html',
+  styleUrls: ['./search-form.component.scss'],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatTabsModule,
+    MatDialogModule,
+    MatDialogActions,
+    MatDialogContent,
+    MatDialogTitle,
+    MatButtonModule,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class SearchFormComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() searchSelectCacheKey;
+
+  configProps$: any;
+  isInitialized = false;
+
+  currentTabId: string;
+  nextTabId: string;
+  openDialog = false;
+  tabItems: any[] = [];
+  searchCategoriesComp: any;
+  propsToUse: any;
+  tabData: any = [];
+  tabCountSources: any;
+  deferLoadedTabs: any;
+  @ViewChild('dialogTemplate') dialogTemplate!: TemplateRef<any>;
+  dialogRef: any;
+  constructor(private dialog: MatDialog) {}
+
+  ngOnInit(): void {
+    this.isInitialized = true;
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.propsToUse = { ...this.pConn$.getInheritedProps() };
+    this.deferLoadedTabs = this.pConn$.getChildren()[2];
+    const cache: any = PCore.getNavigationUtils().getComponentCache(this.searchSelectCacheKey) ?? {};
+    const { selectedCategory } = cache;
+    const firstTabId = getFirstVisibleTabId(this.deferLoadedTabs, selectedCategory);
+    this.currentTabId = getActiveTabId(this.deferLoadedTabs.getPConnect().getChildren(), firstTabId);
+    this.updateSelf();
+  }
+
+  ngOnChanges() {
+    if (this.isInitialized) {
+      this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    this.tabCountSources = getTabCountSources(this.deferLoadedTabs);
+    this.tabData = getData(this.deferLoadedTabs, this.tabCountSources, this.currentTabId, this.tabData);
+    this.tabItems = this.tabData?.filter(tab => tab.visibility()) || [];
+    this.initializeSearchCategories();
+  }
+
+  initializeSearchCategories(): void {
+    if (this.tabItems.length >= 3) {
+      this.searchCategoriesComp = 'dropdown';
+    } else if (this.tabItems.length > 1) {
+      this.searchCategoriesComp = 'radio';
+    }
+  }
+
+  handleTabClick(event) {
+    const tabId = event.target.value;
+    const viewName = this.tabData
+      .find((tab: any) => tab.id === this.currentTabId)
+      ?.getPConnect()
+      .getConfigProps().name;
+
+    if (this.checkIfSelectionsExist(this.pConn$)) {
+      event.preventDefault();
+      this.nextTabId = tabId;
+      this.dialogRef = this.dialog.open(this.dialogTemplate, {
+        width: '400px'
+      });
+    } else {
+      // @ts-ignore
+      this.publishEvent({ viewName, tabId });
+      this.currentTabId = tabId;
+      this.tabData = getData(this.deferLoadedTabs, this.tabCountSources, this.currentTabId, this.tabData);
+      this.tabItems = this.tabData?.filter(tab => tab.visibility()) || [];
+    }
+  }
+
+  clearSelectionAndSwitchTab(): void {
+    const viewName = this.tabItems
+      .find((tab: any) => tab.id === this.currentTabId)
+      .getPConnect()
+      .getConfigProps().name;
+
+    this.publishEvent({ clearSelections: true, viewName });
+    searchtabsClick(this.nextTabId, this.tabData, this.currentTabId);
+    this.onDialogClose();
+    this.currentTabId = this.nextTabId;
+    this.tabData = getData(this.deferLoadedTabs, this.tabCountSources, this.currentTabId, this.tabData);
+    this.tabItems = this.tabData?.filter(tab => tab.visibility()) || [];
+  }
+
+  onDialogClose(): void {
+    this.dialogRef.close();
+  }
+
+  publishEvent({ clearSelections, viewName }) {
+    const payload: any = {};
+
+    if (clearSelections) {
+      payload.clearSelections = clearSelections;
+    }
+
+    if (viewName) {
+      payload.viewName = viewName;
+    }
+
+    PCore.getPubSubUtils().publish('update-advanced-search-selections', payload);
+  }
+
+  get activeTabPConnect() {
+    const tabData = this.tabItems.find(tab => tab.id === this.currentTabId);
+    return tabData.content?.getPConnect();
+  }
+
+  checkIfSelectionsExist(getPConnect) {
+    const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+    const { selectionMode, readonlyContextList, contextPage, contextClass, name } = getPConnect.getConfigProps();
+    const isMultiSelectMode = selectionMode === MULTI;
+
+    const dataRelationshipContext = contextClass && name ? name : null;
+
+    const { compositeKeys } = getFieldMeta(getPConnect, dataRelationshipContext);
+
+    let selectionsExist = false;
+    if (isMultiSelectMode) {
+      selectionsExist = readonlyContextList?.length > 0;
+    } else if (contextPage) {
+      selectionsExist = compositeKeys?.filter(key => !['', null, undefined].includes(contextPage[key]))?.length > 0;
+    }
+    return selectionsExist;
+  }
+}

package/lib/template/data-reference/search-form/tabsData.ts

@@ -0,0 +1,160 @@
+import { getTabLabel } from '@pega/angular-sdk-components';
+
+export function getTabCountSources(deferLoadedTabs) {
+  const availableTabs = deferLoadedTabs.getPConnect().getChildren() || [];
+  const viewName = deferLoadedTabs?.getPConnect()?.options?.viewName || null;
+  return availableTabs.reduce(
+    (prev, tab, index) => {
+      const config = tab.getPConnect().getConfigProps();
+      const { value: showTabCount } = config.inheritedProps?.find(item => item.prop === 'showTabCount') || {};
+      const { value } = config.inheritedProps?.find(item => item.prop === 'count') || {};
+      const tabCountSource = config.inheritedProps?.find(item => item.prop === 'tabCount');
+      const name = getTabLabel(tab.getPConnect());
+      const tabId = `${viewName}-${config.name || name}-${index}`;
+      if (showTabCount) {
+        if (tabCountSource?.value?.fields?.count) {
+          const isPrefixedByDot = tabCountSource.value.fields.count.substring(0, 1) === '.';
+          return {
+            ...prev,
+            dataPageSources: [
+              ...prev.dataPageSources,
+              {
+                dataPageName: tabCountSource.value.source,
+                tabId,
+                tabCountProp: isPrefixedByDot ? tabCountSource.value.fields.count.substring(1) : tabCountSource.value.fields.count,
+                dataViewParameters: tabCountSource.value?.parameters || {}
+              }
+            ]
+          };
+        }
+        if (Number.isInteger(value) && value % 1 === 0) {
+          return {
+            ...prev,
+            calculatedFields: [
+              ...prev.calculatedFields,
+              {
+                count: value,
+                context: tab.getPConnect().getContextName(),
+                tabId
+              }
+            ]
+          };
+        }
+        if (value?.isDeferred) {
+          return {
+            ...prev,
+            calculatedFields: [
+              ...prev.calculatedFields,
+              {
+                propertyName: value.propertyName,
+                context: 'content',
+                tabId
+              }
+            ]
+          };
+        }
+      }
+      return prev;
+    },
+    {
+      dataPageSources: [],
+      calculatedFields: []
+    }
+  );
+}
+
+function tabContent(id, index, overideTabContent, tab, data, currentTabId, template) {
+  if (id === currentTabId || template === 'HierarchicalForm') {
+    if (overideTabContent) {
+      return tab.getPConnect().getComponent();
+    }
+    if (data[index]?.content) {
+      return data[index]?.content;
+    }
+    return tab.getPConnect().getComponent();
+  }
+  if (template !== 'HierarchicalForm') {
+    return overideTabContent ? null : data[index]?.content;
+  }
+}
+
+function getTabsData(deferLoadedTabs, countMetadata, currentTabId, data) {
+  const availableTabs = deferLoadedTabs.getPConnect().getChildren() || [];
+  const viewName = deferLoadedTabs?.getPConnect()?.options?.viewName || null;
+  return availableTabs.map((tab, index) => {
+    const config = tab.getPConnect().getConfigProps();
+    const name = getTabLabel(tab.getPConnect());
+    const tabId = `${viewName}-${config.name || name}-${index}`;
+    const count = countMetadata.find(item => item.tabId === tabId)?.count;
+
+    return {
+      name,
+      id: tabId,
+      getPConnect: tab.getPConnect,
+      content: tabContent(tabId, index, '', tab, data, currentTabId, ''),
+      loaded: tabId === currentTabId || Boolean(data[index]?.content),
+      visibility: () => {
+        const tabConfig = tab.getPConnect().getConfigProps();
+        const isVisible = !('visibility' in tabConfig) || tabConfig.visibility === true;
+        if (!isVisible) {
+          tab.getPConnect().removeNode();
+        }
+        return isVisible;
+      },
+      count
+    };
+  });
+}
+
+export function getData(deferLoadedTabs, tabCountSources, currentTabId, data) {
+  let countMetadata;
+  let tabData;
+  const pConn = deferLoadedTabs.getPConnect();
+  const { dataPageSources, calculatedFields } = tabCountSources;
+  const calculatedFieldsWithoutValue = calculatedFields.filter(item => item.propertyName);
+  if (dataPageSources.length) {
+    Promise.all(dataPageSources.map(item => PCore.getDataPageUtils().getPageDataAsync(item.dataPageName, '', item.dataViewParameters)))
+      .then(res => {
+        const temp = res.map((r, index) => ({
+          ...dataPageSources[index],
+          count: r[dataPageSources[index].tabCountProp]
+        }));
+        countMetadata = temp;
+        tabData = getTabsData(deferLoadedTabs, countMetadata, currentTabId, data);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  } else if (calculatedFieldsWithoutValue.length) {
+    PCore.getViewRuleApi()
+      // @ts-ignore
+      .getCalculatedFields(
+        pConn.getCaseInfo().getKey(),
+        pConn.getCurrentView(),
+        calculatedFieldsWithoutValue.map(({ propertyName, context }) => ({
+          name: propertyName,
+          context
+        }))
+      )
+      .then(res => {
+        const values = (res?.data as any)?.caseInfo?.content || {};
+        const temp = calculatedFields.map(field => ({
+          ...field,
+          count: values[field.propertyName?.substring(1)] || field.count
+        }));
+        countMetadata = temp;
+        tabData = getTabsData(deferLoadedTabs, countMetadata, currentTabId, data);
+      })
+      .catch(err => {
+        console.log(err);
+      });
+  } else {
+    countMetadata = calculatedFields.map(field => ({
+      ...field,
+      count: field.count
+    }));
+    tabData = getTabsData(deferLoadedTabs, countMetadata, currentTabId, data);
+  }
+
+  return tabData;
+}

package/lib/template/data-reference/utils.ts

@@ -0,0 +1,92 @@
+const isSelfReferencedProperty = (param, referenceProp) => {
+  const [, parentPropName] = param.split('.');
+  const referencePropParent = referenceProp?.split('.').pop();
+  return parentPropName === referencePropParent;
+};
+
+export function getFieldMeta(getPConnect, dataRelationshipContext) {
+  const pConn = getPConnect;
+  const { selectionMode, selectionList } = pConn.getConfigProps();
+  const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+  const isMultiSelectMode = selectionMode === MULTI;
+
+  const pageReference = pConn.getPageReference();
+  let referenceProp = isMultiSelectMode ? selectionList.substring(1) : pageReference.substring(pageReference.lastIndexOf('.') + 1);
+  // Replace here to use the context name instead
+  let contextPageReference = null;
+  if (dataRelationshipContext !== null && selectionMode === 'single') {
+    referenceProp = dataRelationshipContext;
+    contextPageReference = pageReference.concat('.').concat(referenceProp);
+  }
+
+  const fieldMetadata =
+    (isMultiSelectMode ? pConn.getFieldMetadata(`${referenceProp}`) : pConn.getCurrentPageFieldMetadata(contextPageReference)) ?? {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach((param: any) => {
+    if (isSelfReferencedProperty(param, referenceProp)) {
+      compositeKeys.push(param.substring(param.lastIndexOf('.') + 1));
+    }
+  });
+
+  return { compositeKeys, fieldMetadata };
+}
+
+/**
+ * returns array of self-referenced properties of the datasource
+ * Ex: returns ["@P .DataRef.pyGUID", "@P .DataRef.customerID"]
+ */
+const getCompositeKeys = (pConnect, property) => {
+  const fieldMetadata = pConnect.getFieldMetadata(property) || {};
+  const { datasource: { parameters: fieldParameters = {} } = {} } = fieldMetadata;
+  const compositeKeys: any = [];
+  Object.values(fieldParameters).forEach(param => {
+    if (isSelfReferencedProperty(param, property)) {
+      compositeKeys.push(param);
+    }
+  });
+  return compositeKeys;
+};
+
+export const getFirstChildConfig = ({
+  firstChildMeta,
+  getPConnect,
+  rawViewMetadata,
+  contextClass,
+  dataReferenceConfigToChild,
+  isCreateNewReferenceEnabled,
+  disableStartingFieldsForReference,
+  pyID
+}) => {
+  const config = {
+    ...firstChildMeta.config,
+    ...dataReferenceConfigToChild
+  };
+  const compositeKeys = getCompositeKeys(getPConnect, dataReferenceConfigToChild?.dataRelationshipContext);
+  return {
+    ...config,
+    viewName: getPConnect.getCurrentView(),
+    referenceList: config.referenceList ?? rawViewMetadata.config.referenceList,
+    parameters: rawViewMetadata.config.parameters,
+    localeReference: rawViewMetadata.config.localeReference,
+    contextClass: config.contextClass || rawViewMetadata?.config?.contextClass || rawViewMetadata?.config?.targetObjectClass,
+    allowAddingNewRecords: firstChildMeta.type === 'SimpleTableSelect' && isCreateNewReferenceEnabled ? true : undefined,
+    actions: firstChildMeta.type === 'SimpleTableSelect' &&
+      isCreateNewReferenceEnabled && [
+        {
+          action: 'ADD_CASE',
+          config: {
+            label: '@L Add',
+            caseType: contextClass,
+            inputFields: disableStartingFieldsForReference
+              ? {}
+              : {
+                  [`.pyAddCaseContextPage.${pyID}`]: `@P .${pyID}`
+                }
+          }
+        }
+      ],
+    compositeKeys
+  };
+};

package/lib/template/default-form/default-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
@@ -30,7 +30,7 @@ interface DefaultFormProps {
   styleUrls: ['./default-form.component.scss'],
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent extends FormTemplateBase implements OnInit {
+export class DefaultFormComponent extends FormTemplateBase implements OnInit, OnChanges {
   @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
@@ -59,6 +59,14 @@ export class DefaultFormComponent extends FormTemplateBase implements OnInit {
     this.updateSelf();
   }
 
+  ngOnChanges(changes) {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && !PCore.isDeepEqual(pConn$.previousValue.getConfigProps(), pConn$.currentValue.getConfigProps())) {
+      this.updateSelf();
+    }
+  }
+
   updateSelf() {
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
     const kids = this.pConn$.getChildren();

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

@@ -0,0 +1,34 @@
+<div *ngIf="enableBanner$; else nonBannerMode">
+  <component-mapper
+    name="Banner"
+    [props]="{
+      configProps$,
+      arChildren$,
+      title: heading,
+      message,
+      backgroundImage,
+      layout$
+    }"
+  ></component-mapper>
+</div>
+
+<ng-template #nonBannerMode>
+  <div>
+    <h1 *ngIf="title">{{ title }}</h1>
+    <p *ngIf="heading">{{ heading }}</p>
+    <div
+      [ngClass]="{
+        'psdk-grid-filter-1': this.layout$ === 'one-column',
+        'psdk-grid-filter-2': this.layout$ === 'two-column',
+        'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
+        'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
+      }"
+    >
+      <component-mapper
+        *ngFor="let child of arChildren$"
+        [name]="child.getPConnect().getComponentName()"
+        [props]="{ pConn$: child.getPConnect() }"
+      ></component-mapper>
+    </div>
+  </div>
+</ng-template>

package/lib/template/default-page/default-page.component.scss

@@ -0,0 +1,31 @@
+.psdk-grid-filter-1 {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-2 {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-wide-narrow {
+  display: grid;
+  grid-template-columns: 7fr 3fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}
+
+.psdk-grid-filter-narrow-wide {
+  display: grid;
+  grid-template-columns: 3fr 7fr;
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

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

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { DefaultPageComponent } from './default-page.component';
+
+describe('DefaultPageComponent', () => {
+  let component: DefaultPageComponent;
+  let fixture: ComponentFixture<DefaultPageComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [DefaultPageComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DefaultPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,64 @@
+import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface DefaultPageProps {
+  // If any, enter additional props that only exist on this component
+  layout?: string;
+  title?: string;
+  heading?: string;
+  message?: string;
+  backgroundImage?: string;
+  enableBanner?: boolean;
+}
+
+@Component({
+  selector: 'app-default-page',
+  templateUrl: './default-page.component.html',
+  styleUrls: ['./default-page.component.scss'],
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DefaultPageComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: any;
+
+  configProps$: DefaultPageProps;
+  arChildren$: any[];
+  title?: string;
+  heading: any;
+  message?: string;
+  backgroundImage?: string;
+  layout$?: string;
+  enableBanner$?: boolean;
+
+  constructor() {
+    this.backgroundImage = this.configProps$?.backgroundImage;
+  }
+
+  ngOnInit() {
+    this.backgroundImage = this.configProps$?.backgroundImage;
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+    this.backgroundImage = this.configProps$?.backgroundImage;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DefaultPageProps;
+
+    this.layout$ = this.configProps$.layout;
+    this.heading = this.configProps$.heading;
+    this.message = this.configProps$.message;
+    this.backgroundImage = this.configProps$.backgroundImage;
+    this.enableBanner$ = this.configProps$.enableBanner;
+
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+  }
+}

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

@@ -1,5 +1,4 @@
 .psdk-details-fields-label {
-  color: var(--app-label-color);
   margin: 8px 0px;
 }
 

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

@@ -45,7 +45,7 @@ export class InlineDashboardPageComponent implements OnInit, OnChanges {
   updateSelf() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as InlineDashboardPageProps;
     const arChildren$ = this.pConn$.getChildren();
-    const allFilters = this.pConn$.getRawMetadata()?.children[1];
+    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

@@ -173,15 +173,20 @@
             <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
           </table>
           <div *ngIf="repeatListData?.length === 0">
-            <table id="list-view" *ngIf="repeatListData?.length === 0" mat-table [dataSource]="repeatList$">
-              <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
-                <th mat-header-cell *matHeaderCellDef>{{ dCol.config.label }}</th>
+            <table id="list-view" mat-table [dataSource]="[]">
+              <!-- Define columns for headers -->
+              <ng-container *ngFor="let col of displayedColumns$" [matColumnDef]="col">
+                <th mat-header-cell *matHeaderCellDef>
+                  {{ getValue(col) }}
+                </th>
               </ng-container>
+
+              <!-- Render only header row -->
               <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
             </table>
           </div>
           <div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
-            {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
+            {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
           </div>
         </div>
       </div>