@pega/angular-sdk-overrides 24.2.12 → 25.1.11

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/field-group-list/field-group-list.component.ts

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

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges, signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -29,10 +29,9 @@ interface FieldGroupTemplateProps {
   selector: 'app-field-group-template',
   templateUrl: './field-group-template.component.html',
   styleUrls: ['./field-group-template.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
+export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges {
   @Input() configProps$: FieldGroupTemplateProps;
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
@@ -46,7 +45,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   heading: any;
   children: any;
   menuIconOverride$: any;
-  referenceListLength: number;
+  referenceListLength = signal<number | null>(null);
   fieldHeader: any;
 
   allowAdd = true;
@@ -59,10 +58,6 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   ) {}
 
   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.menuIconOverride$ = this.utils.getImageSrc('trash', this.utils.getSDKStaticContentUrl());
 
     const { allowActions, allowTableEdit, referenceList } = this.configProps$;
@@ -87,16 +82,6 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     }
   }
 
-  onStateChange() {
-    // 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();
-    }
-  }
-
   ngOnChanges(changes) {
     if (changes && changes.configProps$) {
       const props = changes.configProps$;
@@ -108,16 +93,14 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
         }
 
         this.updateSelf();
+
+        setTimeout(() => {
+          this.angularPConnect.shouldComponentUpdate(this);
+        }, 100);
       }
     }
   }
 
-  ngAfterViewInit() {
-    const resolvedList = getReferenceList(this.pConn$);
-    // @ts-ignore - Expected 3 arguments, but got 1
-    this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
-  }
-
   updateSelf() {
     const inheritedProps: any = this.pConn$.getInheritedProps();
 
@@ -142,7 +125,10 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
       this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }
 
-    if (this.referenceListLength != referenceList?.length) {
+    if (this.referenceListLength() != referenceList?.length) {
+      // @ts-ignore - Expected 3 arguments, but got 1
+      this.pConn$.getListActions().initDefaultPageInstructions(resolvedList);
+
       this.children = referenceList?.map((item, index) => {
         return {
           id: index,
@@ -152,7 +138,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
         };
       });
     }
-    this.referenceListLength = referenceList?.length || 0;
+    this.referenceListLength.set(referenceList?.length || 0);
   }
 
   getStaticHeader = (heading, index) => {
@@ -160,14 +146,14 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   };
 
   getDynamicHeader = (item, index) => {
-    if (this.fieldHeader === 'propertyRef' && this.heading && item[this.heading.substring(1)]) {
+    if (this.heading && item[this.heading.substring(1)]) {
       return item[this.heading.substring(1)];
     }
     return `Row ${index + 1}`;
   };
 
   addFieldGroupItem() {
-    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength);
+    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceListLength() as number);
   }
 
   deleteFieldGroupItem(index) {

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

@@ -5,7 +5,6 @@ import { Component, Input } from '@angular/core';
   selector: 'app-field-value-list',
   templateUrl: './field-value-list.component.html',
   styleUrls: ['./field-value-list.component.scss'],
-  standalone: true,
   imports: [CommonModule]
 })
 export class FieldValueListComponent {

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

@@ -13,7 +13,6 @@ interface InlineDashboardProps {
   selector: 'app-inline-dashboard',
   templateUrl: './inline-dashboard.component.html',
   styleUrls: ['./inline-dashboard.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class InlineDashboardComponent {

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

@@ -15,7 +15,6 @@ interface InlineDashboardPageProps {
   selector: 'app-inline-dashboard-page',
   templateUrl: './inline-dashboard-page.component.html',
   styleUrls: ['./inline-dashboard-page.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class InlineDashboardPageComponent implements OnInit, OnChanges {
@@ -46,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-page/list-page.component.ts

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

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

@@ -1,188 +1,196 @@
 <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="" />
-    </mat-form-field>
+    <div style="display: flex; justify-content: space-between; align-items: center; margin: 0 10px">
+      <h3 *ngIf="label" class="label" style="font-weight: bold; margin: 0">
+        {{ label }} <span class="results-count">{{ getResultsText() }}</span>
+      </h3>
+      <mat-form-field *ngIf="bShowSearch$">
+        <mat-label class="search-label"><mat-icon>search</mat-icon><span class="psdk-search-label">Search</span> </mat-label>
+        <input matInput id="search" (keyup)="applySearch($event)" placeholder="" />
+      </mat-form-field>
+    </div>
 
     <div *ngIf="!bInForm$" class="psdk-outer-div-in-form">
       <div class="psdk-inner-div-in-form" *ngIf="bColumnReorder$">
-        <div>
-          <table
-            mat-table
-            id="list-view"
-            [dataSource]="repeatList$"
-            matSort
-            cdkDropList
-            cdkDropListOrientation="horizontal"
-            (cdkDropListDropped)="drop($event)"
-          >
-            <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
-              <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
-                {{ dCol.config.label }}
-                <div class="psdk-mat-header-filter">
-                  <img class="psdk-filter-svg-icon" name="filterOnIcon" />
-                </div>
-                <div class="psdk-mat-header-arrow">
-                  <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
-                </div>
-                <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
-                  <button mat-icon-button [matMenuTriggerFor]="groupMenu">
-                    <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
-                  </button>
-                  <mat-menu #groupMenu>
-                    <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
-                    </button>
-                    <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
-                    </button>
-                    <button mat-menu-item (click)="_filter($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
-                    </button>
-                  </mat-menu>
-                </div>
-              </th>
-              <td mat-cell *matCellDef="let element; index as i">
-                <button
-                  *ngIf="_showButton(dCol.config.name, dCol); else regular"
-                  mat-button
-                  color="primary"
-                  (click)="_listViewClick(dCol.config, element)"
-                >
-                  {{ element[dCol.config.name] || '---' }}
+        <table
+          mat-table
+          id="list-view"
+          [dataSource]="repeatList$"
+          matSort
+          cdkDropList
+          cdkDropListOrientation="horizontal"
+          (cdkDropListDropped)="drop($event)"
+        >
+          <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
+            <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before" cdkDrag>
+              {{ dCol.config.label }}
+              <div class="psdk-mat-header-filter">
+                <img class="psdk-filter-svg-icon" name="filterOnIcon" />
+              </div>
+              <div class="psdk-mat-header-arrow">
+                <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
+              </div>
+              <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
+                <button mat-icon-button [matMenuTriggerFor]="groupMenu">
+                  <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
                 </button>
-                <ng-template #regular>
-                  {{ element[dCol.config.name] || '---' }}
-                </ng-template>
-              </td>
-            </ng-container>
+                <mat-menu #groupMenu>
+                  <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
+                  </button>
+                  <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
+                  </button>
+                  <button mat-menu-item (click)="_filter($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
+                  </button>
+                </mat-menu>
+              </div>
+            </th>
+            <td mat-cell *matCellDef="let element; index as i">
+              <button
+                *ngIf="_showButton(dCol.config.name, dCol); else regular"
+                mat-button
+                color="primary"
+                (click)="_listViewClick(dCol.config, element)"
+              >
+                {{ element[dCol.config.name] || '---' }}
+              </button>
+              <ng-template #regular>
+                {{ element[dCol.config.name] || '---' }}
+              </ng-template>
+            </td>
+          </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
 
-            <!-- Group header -->
-            <ng-container matColumnDef="groupHeader">
-              <td mat-cell colspan="999" *matCellDef="let group">
-                <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
-                <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
-                <strong
-                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
-                    group.totalCounts
-                  }})</strong
-                >
-              </td>
-            </ng-container>
+          <!-- Group header -->
+          <ng-container matColumnDef="groupHeader">
+            <td mat-cell colspan="999" *matCellDef="let group">
+              <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
+              <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
+              <strong
+                >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
+                  group.totalCounts
+                }})</strong
+              >
+            </td>
+          </ng-container>
 
-            <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
-          </table>
-        </div>
+          <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
+        </table>
       </div>
       <div class="psdk-inner-div-in-form" *ngIf="!bColumnReorder$">
-        <div>
-          <table mat-table id="list-view" [dataSource]="repeatList$" matSort>
-            <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
-              <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
-                {{ dCol.config.label }}
-                <div class="psdk-mat-header-filter">
-                  <img class="psdk-filter-svg-icon" name="filterOnIcon" />
-                </div>
-                <div class="psdk-mat-header-arrow">
-                  <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
-                </div>
-                <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
-                  <button mat-icon-button [matMenuTriggerFor]="groupMenu">
-                    <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
-                  </button>
-                  <mat-menu #groupMenu>
-                    <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
-                    </button>
-                    <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
-                    </button>
-                    <button mat-menu-item (click)="_filter($event, dCol)">
-                      <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
-                    </button>
-                  </mat-menu>
-                </div>
-              </th>
-              <td mat-cell *matCellDef="let element; index as i">
-                <button
-                  *ngIf="_showButton(dCol.config.name, dCol); else regular"
-                  mat-button
-                  color="primary"
-                  (click)="_listViewClick(dCol.config, element)"
-                >
-                  {{ element[dCol.config.name] || '---' }}
+        <table mat-table id="list-view" [dataSource]="repeatList$" matSort>
+          <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name" sticky="true">
+            <th mat-header-cell *matHeaderCellDef class="psdk-mat-header" (click)="_headerSortClick($event, dCol)" arrowPosition="before">
+              {{ dCol.config.label }}
+              <div class="psdk-mat-header-filter">
+                <img class="psdk-filter-svg-icon" name="filterOnIcon" />
+              </div>
+              <div class="psdk-mat-header-arrow">
+                <img class="psdk-arrow-svg-icon" arrow="none" [attr.arrowid]="dCol.config.name" />
+              </div>
+              <div class="psdk-mat-header-button" (click)="$event.stopPropagation()">
+                <button mat-icon-button [matMenuTriggerFor]="groupMenu">
+                  <img class="psdk-list-view-svg-icon" src="{{ menuSvgIcon$ }}" />
                 </button>
-                <ng-template #regular>
-                  {{ element[dCol.config.name] || '---' }}
-                </ng-template>
-              </td>
-            </ng-container>
+                <mat-menu #groupMenu>
+                  <button *ngIf="!_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_groupBy($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Group By</span>
+                  </button>
+                  <button *ngIf="_showUnGroupBy(dCol) && bGrouping$" mat-menu-item (click)="_unGroupBy($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ groupBySvgIcon$ }}" /><span>Ungroup</span>
+                  </button>
+                  <button mat-menu-item (click)="_filter($event, dCol)">
+                    <img class="psdk-list-view-svg-icon" src="{{ filterSvgIcon$ }}" /><span>Filter</span>
+                  </button>
+                </mat-menu>
+              </div>
+            </th>
+            <td mat-cell *matCellDef="let element; index as i">
+              <button
+                *ngIf="_showButton(dCol.config.name, dCol); else regular"
+                mat-button
+                color="primary"
+                (click)="_listViewClick(dCol.config, element)"
+              >
+                {{ element[dCol.config.name] || '---' }}
+              </button>
+              <ng-template #regular>
+                {{ element[dCol.config.name] || '---' }}
+              </ng-template>
+            </td>
+          </ng-container>
 
-            <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
-            <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns$; sticky: true"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
 
-            <!-- Group header -->
-            <ng-container matColumnDef="groupHeader">
-              <td mat-cell colspan="999" *matCellDef="let group">
-                <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
-                <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
-                <strong
-                  >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
-                    group.totalCounts
-                  }})</strong
-                >
-              </td>
-            </ng-container>
+          <!-- Group header -->
+          <ng-container matColumnDef="groupHeader">
+            <td mat-cell colspan="999" *matCellDef="let group">
+              <mat-icon *ngIf="group.expanded" [attr.style]="_getIconStyle(group.level)">expand_less</mat-icon>
+              <mat-icon *ngIf="!group.expanded" [attr.style]="_getIconStyle(group.level)">expand_more</mat-icon>
+              <strong
+                >{{ _getGroupName(groupByColumns$[group.level - 1]) }}: {{ group[groupByColumns$[group.level - 1]] }} ({{
+                  group.totalCounts
+                }})</strong
+              >
+            </td>
+          </ng-container>
 
-            <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
-          </table>
-        </div>
+          <tr mat-row *matRowDef="let row; columns: ['groupHeader']; when: isGroup" (click)="_groupHeaderClick(row)"></tr>
+        </table>
       </div>
     </div>
     <div *ngIf="bInForm$">
-      <div>
-        <div class="psdk-inner-div-in-form">
-          <table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
-            <ng-container *ngIf="singleSelectionMode" matColumnDef="select">
-              <th mat-header-cell *matHeaderCellDef></th>
-              <td mat-cell *matCellDef="let row">
-                <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]" [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 }}
+      <div class="psdk-inner-div-in-form">
+        <table id="list-view" *ngIf="repeatListData.length > 0" mat-table [dataSource]="repeatList$" matSort>
+          <ng-container *ngIf="singleSelectionMode" matColumnDef="select">
+            <th mat-header-cell *matHeaderCellDef></th>
+            <td mat-cell *matCellDef="let row">
+              <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>
+              <mat-checkbox
+                (change)="toggleAllRows()"
+                [checked]="selection.hasValue() && isAllSelected()"
+                [indeterminate]="selection.hasValue() && !isAllSelected()"
+              >
+              </mat-checkbox>
+            </th>
+            <td mat-cell *matCellDef="let row">
+              <mat-checkbox (change)="onCheckboxClick(row)" [checked]="selection.isSelected(row)"> </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>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns$"></tr>
+        </table>
+        <div *ngIf="repeatListData?.length === 0">
+          <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>
-              <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
             </ng-container>
 
+            <!-- Render only header row -->
             <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>
-            <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>
-              </ng-container>
-              <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.') }}
-          </div>
+        </div>
+        <div class="psdk-no-records" *ngIf="repeatListData?.length === 0">
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </div>
       </div>
     </div>

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

@@ -1,12 +1,16 @@
 .psdk-list-header {
-  background-color: var(--app-form-color);
-  padding: 1rem;
-  margin: 0.5rem;
-  border-radius: 0.6125rem;
+  border: 1px solid var(--mat-sys-outline-variant);
+  background-color: var(--mat-sys-surface-container);
 }
 
 table {
   width: 100%;
+  border-bottom: 1px solid var(--mat-sys-on-secondary-container);
+}
+
+.search-label {
+  display: flex;
+  align-items: center;
 }
 
 ::ng-deep .mat-sort-header-content {
@@ -69,6 +73,7 @@ td.mat-mdc-footer-cell {
   padding: 0.125rem 0.125rem;
   min-width: unset;
   width: 1.1rem;
+  margin-right: 1rem;
 }
 
 .psdk-outer-div-in-form {
@@ -110,11 +115,11 @@ td.mat-mdc-footer-cell {
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: var(--app-form-color);
-  border: 1px solid var(--app-inverse-form-color);
+  background-color: var(--mat-sys-surface);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
+  box-shadow: 0 0 10px 3px var(--mat-sys-level3);
   position: absolute;
   z-index: 99;
 }
@@ -126,7 +131,7 @@ td.mat-mdc-footer-cell {
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-dialog-background-color);
+  background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -137,11 +142,11 @@ td.mat-mdc-footer-cell {
   display: table;
   margin: auto;
   min-width: 150px;
-  background-color: var(--app-form-color);
-  border: 1px solid var(--app-inverse-form-color);
+  background-color: var(--mat-sys-surface-container);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-radius: 10px;
   padding: 20px;
-  box-shadow: 0 0 10px 3px var(--app-box-shadow-color);
+  box-shadow: 0 0 10px 3px var(--mat-sys-level3);
 }
 
 tr.mat-mdc-row {
@@ -153,19 +158,10 @@ tr.mat-mdc-row {
   justify-content: center;
   display: flex;
   align-items: center;
-  border: 1px solid var(--app-neutral-light-color);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-top: none;
 }
 
-.psdk-table-field-link {
-  color: var(--app-primary-color);
-  padding: 0;
-  cursor: pointer;
-  border: 0;
-  background-color: transparent;
-  align-items: center;
-}
-
 .results-count {
   opacity: 0.7;
   font-size: 0.8rem;
@@ -176,3 +172,11 @@ tr.mat-mdc-row {
 .label {
   margin: 8px;
 }
+
+::ng-deep th.mat-mdc-header-cell,
+td.mat-mdc-cell,
+td.mat-mdc-footer-cell {
+  border-right: 1px solid var(--mat-sys-on-secondary-container);
+  padding: 8px !important;
+  // min-width: 10rem;
+}