@pega/angular-sdk-overrides 24.2.12 → 25.1.10

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

@@ -18,7 +18,6 @@ interface RepeatingStructuresProps {
   selector: 'app-repeating-structures',
   templateUrl: './repeating-structures.component.html',
   styleUrls: ['./repeating-structures.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTableModule, MatSortModule, MatPaginatorModule]
 })
 export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
@@ -69,7 +68,6 @@ export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
   }
 
   rowClick(row) {
-    // eslint-disable-next-line sonarjs/no-small-switch
     switch (this.configProps$.rowClickAction) {
       case 'openAssignment':
         this.psService.sendMessage(true);

package/lib/template/self-service-case-view/self-service-case-view.component.html

@@ -0,0 +1,78 @@
+<div class="psdk-self-service-case-view">
+  <div class="psdk-self-service-case-view-header">
+    <div class="heading">{{ this.heading$ }}</div>
+    <div *ngIf="showCaseActions" class="psdk-case-view-buttons">
+      <button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu">{{ localizedVal('Actions...', localeCategory) }}</button>
+      <mat-menu #actionMenu="matMenu" overlapTrigger="false">
+        <ng-container *ngFor="let action of arAvailableActions$">
+          <button mat-menu-item (click)="_menuActionClick(action)">
+            {{ localizedVal(action.name, '', localeKey) }}
+          </button>
+        </ng-container>
+        <ng-container *ngFor="let process of arAvailabeProcesses$">
+          <button mat-menu-item (click)="_menuProcessClick(process)">
+            {{ process.name }}
+          </button>
+        </ng-container>
+      </mat-menu>
+    </div>
+  </div>
+  <div class="psdk-case-view" id="case-view">
+    <div class="psdk-case-view-info" *ngIf="showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)">
+      <mat-toolbar class="psdk-case-view-toolbar">
+        <mat-toolbar-row class="psdk-case-view-toolbar-row">
+          <div class="psdk-case-view-heading">
+            <div>
+              <h1 id="case-name">{{ heading$ }}</h1>
+            </div>
+            <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
+            <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
+          </div>
+        </mat-toolbar-row>
+      </mat-toolbar>
+      <div class="psdk-case-view-divider"></div>
+      <div class="psdk-case-view-summary">
+        <component-mapper
+          name="CaseSummaryFields"
+          [props]="{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }"
+        ></component-mapper>
+      </div>
+    </div>
+    <div class="psdk-case-view-main">
+      <div>
+        <div *ngFor="let kid of arChildren$">
+          <div
+            *ngIf="
+              kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' &&
+              kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages' &&
+              showCaseLifecycle
+            "
+          >
+            <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+          </div>
+        </div>
+      </div>
+
+      <div *ngFor="let kid of arChildren$">
+        <div
+          *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'"
+        >
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+        </div>
+      </div>
+
+      <div *ngFor="let kid of arChildren$">
+        <div *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'">
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+        </div>
+      </div>
+    </div>
+    <div class="psdk-case-view-utilities" *ngIf="arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()">
+      <div *ngFor="let kid of arChildren$">
+        <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/lib/template/self-service-case-view/self-service-case-view.component.scss

@@ -0,0 +1,132 @@
+h1 {
+  font-size: 1.1rem;
+  line-height: 1.3rem;
+}
+
+::ng-deep .mat-mdc-menu-panel {
+  overflow: unset;
+  max-width: unset;
+}
+
+.psdk-case-view-label {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(0.2em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(0.2em) scale(0.75);
+  width: 133.33333%;
+  border-radius: 0.6125rem;
+}
+
+.psdk-case-view {
+  box-sizing: border-box;
+  display: flex;
+}
+
+.ng-case-view-toolbar {
+  padding: 0.625rem 0.625rem;
+}
+
+.psdk-case-icon-div {
+  background-color: var(--mat-sys-on-primary-fixed);
+  border-radius: 1rem;
+  padding: 0.5rem 0.3rem 0.3rem 0.3rem;
+}
+.psdk-case-svg-icon {
+  width: 2rem;
+  padding: 0rem 0.3125rem;
+  filter: var(--app-white-color-filter);
+}
+
+.psdk-case-view-info-box {
+  display: flex;
+  flex-direction: row;
+  padding: 0rem 0.3125rem 0rem 0rem;
+}
+
+.psdk-case-view-info {
+  flex: 0 0 auto;
+  width: 25rem;
+  float: left;
+  // padding: 0rem 0.3125rem 0rem 0rem;
+  background-color: var(--mat-sys-surface-container);
+  height: 100%;
+}
+
+.psdk-case-view-main {
+  flex-grow: 2;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%;
+  padding-left: 0;
+}
+
+.psdk-case-view-summary {
+  padding-left: 0.75rem;
+}
+
+.psdk-case-view-heading {
+  display: block;
+  text-align: left;
+  padding-left: 0.5rem;
+  padding-bottom: 0;
+  padding-top: 5px;
+}
+.psdk-case-view-heading-id {
+  font-size: 0.9rem;
+  font-weight: normal;
+}
+
+.psdk-case-view-buttons {
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.3125rem;
+}
+
+.psdk-case-view-utilities {
+  background-color: var(--mat-sys-surface-container);
+  width: 21.875rem;
+  float: left;
+  padding: 0rem 0.3125rem;
+}
+
+.psdk-case-view-divider {
+  border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
+}
+
+.psdk-status {
+  padding: 0.3125rem 0.3125rem;
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-surface-container);
+  width: fit-content;
+  margin: 0.625rem;
+}
+
+.psdk-case-view-toolbar {
+  background-color: var(--mat-sys-primary);
+  justify-content: center;
+}
+
+button {
+  margin: 0rem 0.3125rem;
+}
+
+.psdk-case-view-toolbar-row {
+  padding-left: 1rem;
+  white-space: normal;
+  height: auto;
+}
+
+.psdk-self-service-case-view-header {
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--mat-sys-primary);
+  padding: 0px 8px;
+}
+
+.heading {
+  font-size: 20px;
+  color: var(--mat-sys-on-primary);
+  font-weight: 600;
+}

package/lib/template/self-service-case-view/self-service-case-view.component.spec.ts

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

package/lib/template/self-service-case-view/self-service-case-view.component.ts

@@ -0,0 +1,207 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { interval } from 'rxjs';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { prepareCaseSummaryData } from '@pega/angular-sdk-components';
+
+interface SelfServiceCaseViewProps {
+  // If any, enter additional props that only exist on this component
+  icon: string;
+  subheader: string;
+  header: string;
+  showCaseLifecycle: any;
+  showSummaryRegion: any;
+  showUtilitiesRegion: any;
+  showCaseActions: any;
+  caseClass: any;
+}
+
+@Component({
+  selector: 'app-self-service-case-view',
+  templateUrl: './self-service-case-view.component.html',
+  styleUrls: ['./self-service-case-view.component.scss'],
+  providers: [Utils],
+  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class SelfServiceCaseViewComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: SelfServiceCaseViewProps;
+
+  arChildren$: any[];
+
+  heading$ = '';
+  id$ = '';
+  status$ = '';
+
+  arAvailableActions$: any[] = [];
+  arAvailabeProcesses$: any[] = [];
+
+  caseSummaryPConn$: any;
+  currentCaseID = '';
+  editAction: boolean;
+  localizedVal: any;
+  localeCategory = 'CaseView';
+  localeKey: any;
+  showCaseLifecycle: boolean;
+  showSummaryRegion: boolean;
+  showUtilitiesRegion: boolean;
+  showCaseActions: boolean;
+  utilityRegion: any;
+  primarySummaryFields: any;
+  secondarySummaryFields: any;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.checkAndUpdate();
+    this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    //    AND removing the "gate" that was put there since shouldComponentUpdate
+    //      should be the real "gate"
+    if (bUpdateSelf) {
+      // generally, don't want to refresh everything when data changes in caseView, it is usually the
+      // case summary.  But check if the case ID changes, this means a different case and we should
+      // update all.
+      if (this.hasCaseIDChanged()) {
+        this.fullUpdate();
+
+        // update okToInitFlowContainer, because case view was drawn, flow container will need to be init
+        // to match Nebula/Constellation
+        sessionStorage.setItem('okToInitFlowContainer', 'true');
+      } else {
+        this.updateHeaderAndSummary();
+      }
+    }
+  }
+
+  hasCaseIDChanged(): boolean {
+    if (this.currentCaseID !== this.pConn$.getDataObject().caseInfo.ID) {
+      this.currentCaseID = this.pConn$.getDataObject().caseInfo.ID;
+      return true;
+    }
+    return false;
+  }
+
+  updateHeaderAndSummary() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SelfServiceCaseViewProps;
+
+    const kids = this.pConn$.getChildren() as any[];
+    for (const kid of kids) {
+      const meta = kid.getPConnect().getRawMetadata();
+      if (meta.type.toLowerCase() == 'region' && meta.name.toLowerCase() == 'summary') {
+        this.caseSummaryPConn$ = kid.getPConnect().getChildren()[0].getPConnect();
+      }
+    }
+
+    // have to put in a timeout, otherwise get an angular change event error
+    const timer = interval(100).subscribe(() => {
+      timer.unsubscribe();
+
+      this.heading$ = PCore.getLocaleUtils().getLocaleValue(this.configProps$.header, '', this.localeKey);
+      this.id$ = this.configProps$.subheader;
+      this.status$ = this.pConn$.getValue('.pyStatusWork');
+    });
+  }
+
+  fullUpdate() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SelfServiceCaseViewProps;
+    this.localeKey = this.pConn$?.getCaseLocaleReference();
+    this.updateHeaderAndSummary();
+
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+
+    const caseInfo = this.pConn$.getDataObject().caseInfo;
+    this.currentCaseID = caseInfo.ID;
+    this.arAvailableActions$ = caseInfo?.availableActions ? caseInfo.availableActions : [];
+    this.editAction = this.arAvailableActions$.find(action => action.ID === 'pyUpdateCaseDetails');
+    this.arAvailabeProcesses$ = caseInfo?.availableProcesses ? caseInfo.availableProcesses : [];
+
+    const { showCaseLifecycle = true, showSummaryRegion = true, showUtilitiesRegion = true, showCaseActions = true, caseClass } = this.configProps$;
+    this.showCaseLifecycle = this.utils.getBooleanValue(showCaseLifecycle);
+    this.showSummaryRegion = this.utils.getBooleanValue(showSummaryRegion);
+    this.showUtilitiesRegion = this.utils.getBooleanValue(showUtilitiesRegion);
+    this.showCaseActions = this.utils.getBooleanValue(showCaseActions);
+    const isObjectType: boolean = (PCore.getCaseUtils() as any).isObjectCaseType(caseClass);
+    this.utilityRegion = isObjectType ? this.filterUtilities(this.arChildren$[2]) : this.filterUtilities(this.arChildren$[4]);
+    if (this.showSummaryRegion) {
+      const { primarySummaryFields, secondarySummaryFields } = prepareCaseSummaryData(
+        this.arChildren$[0],
+        (config: any) => config?.availableInChannel?.selfService === true
+      );
+      this.primarySummaryFields = primarySummaryFields;
+      this.secondarySummaryFields = secondarySummaryFields;
+    }
+  }
+
+  filterUtilities(utils) {
+    let utilsMeta;
+    const pConnect = utils.getPConnect();
+    utilsMeta = pConnect.getRawMetadata?.();
+    if (!utilsMeta?.children?.length) return;
+    utilsMeta = {
+      ...utilsMeta,
+      children: utilsMeta.children.filter((child: any) => child.config?.availableInChannel?.selfService === true)
+    };
+    return utilsMeta.children?.length ? pConnect.createComponent(utilsMeta) : undefined;
+  }
+
+  isUtilitiesRegionNotEmpty() {
+    if (this.utilityRegion && this.utilityRegion.getPConnect()?.getChildren()?.length > 0) {
+      return this.utilityRegion
+        .getPConnect()
+        .getChildren()
+        .some((prop: { getPConnect: () => any }) => prop.getPConnect().getConfigProps().visibility !== false);
+    }
+    return false;
+  }
+
+  updateSelf() {
+    this.fullUpdate();
+  }
+
+  _menuActionClick(data) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+
+    openLocalAction(data.ID, { ...data, containerName: 'modal', type: 'express' });
+  }
+
+  _menuProcessClick(data) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const openProcessAction = actionsAPI.openProcessAction.bind(actionsAPI);
+
+    openProcessAction(data.ID, { ...data });
+  }
+}

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

@@ -28,7 +28,6 @@ interface SimpleTableProps {
   selector: 'app-simple-table',
   templateUrl: './simple-table.component.html',
   styleUrls: ['./simple-table.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class SimpleTableComponent implements OnInit, OnDestroy {
@@ -80,7 +79,6 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SimpleTableProps;
 
     if (this.configProps$.visibility != null) {
-      // eslint-disable-next-line no-multi-assign
       this.bVisible$ = this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
 

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

@@ -126,11 +126,125 @@ export const buildMetaForListView = (fieldMetadata, fields, type, ruleClass, nam
   };
 };
 
-export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
+const PRIMARY_FIELDS = 'pyPrimaryFields';
+const SUPPORTED_FIELD_TYPES = [
+  'Address',
+  'TextArea',
+  'TextInput',
+  'Phone',
+  'Email',
+  'Time',
+  'URL',
+  'Percentage',
+  'Integer',
+  'Decimal',
+  'Date',
+  'DateTime',
+  'Currency',
+  'Checkbox',
+  'Dropdown',
+  'AutoComplete',
+  'UserReference',
+  'RichText'
+];
+
+export const getConfigFields = (rawFields, contextClass, primaryFieldsViewIndex) => {
+  let primaryFields: any = [];
+  let configFields: any = [];
+
+  if (primaryFieldsViewIndex > -1) {
+    let primaryFieldVMD: any = PCore.getMetadataUtils().resolveView(PRIMARY_FIELDS);
+    if (Array.isArray(primaryFieldVMD)) {
+      primaryFieldVMD = primaryFieldVMD.find(primaryFieldView => primaryFieldView.classID === contextClass);
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    } else if (primaryFieldVMD?.classID === contextClass) {
+      primaryFields = primaryFieldVMD?.children?.[0]?.children || [];
+    }
+
+    if (primaryFields.length) {
+      primaryFields = primaryFields.filter(primaryField => SUPPORTED_FIELD_TYPES.includes(primaryField.type));
+    }
+  }
+
+  configFields = [...rawFields.slice(0, primaryFieldsViewIndex), ...primaryFields, ...rawFields.slice(primaryFieldsViewIndex + 1)];
+  // filter duplicate fields after combining raw fields and primary fields
+  return configFields.filter((field, index) => configFields.findIndex(_field => field.config?.value === _field.config?.value) === index);
+};
+
+export function isFLProperty(label) {
+  return label?.startsWith('@FL');
+}
+
+/**
+ * [getFieldLabel]
+ * Description - A utility that returns resolved field label for "@FL" annotation i.e from data model.
+ * @param {Object} fieldConfig
+ * @returns {string} resolved label string
+ *
+ * example:
+ * fieldConfig = {label: "@FL .pyID", classID: "TestCase-Work"};
+ * return "Case ID"
+ */
+export 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;
+  return fieldLabel;
+}
+
+export const updateFieldLabels = (fields, configFields, primaryFieldsViewIndex, pConnect, options) => {
+  const labelsOfFields: any = [];
+  const { columnsRawConfig = [] } = options;
+  fields.forEach((field, idx) => {
+    const rawColumnConfig = columnsRawConfig[idx]?.config;
+    if (field.config.value === PRIMARY_FIELDS) {
+      labelsOfFields.push('');
+    } else if (isFLProperty(rawColumnConfig?.label ?? rawColumnConfig?.caption)) {
+      labelsOfFields.push(getFieldLabel(rawColumnConfig) || field.config.label || field.config.caption);
+    } else {
+      labelsOfFields.push(field.config.label || field.config.caption);
+    }
+  });
+
+  if (primaryFieldsViewIndex > -1) {
+    const totalPrimaryFieldsColumns = configFields.length - fields.length + 1;
+    if (totalPrimaryFieldsColumns) {
+      const primaryFieldLabels: any = [];
+      for (let i = primaryFieldsViewIndex; i < primaryFieldsViewIndex + totalPrimaryFieldsColumns; i += 1) {
+        let label = configFields[i].config?.label;
+        if (isFLProperty(label)) {
+          label = getFieldLabel(configFields[i].config);
+        } else if (label.startsWith('@')) {
+          label = label.substring(3);
+        }
+        if (pConnect) {
+          label = pConnect.getLocalizedValue(label);
+        }
+        primaryFieldLabels.push(label);
+      }
+      labelsOfFields.splice(primaryFieldsViewIndex, 1, ...primaryFieldLabels);
+    } else {
+      labelsOfFields.splice(primaryFieldsViewIndex, 1);
+    }
+  }
+  return labelsOfFields;
+};
+
+export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, options) => {
+  const { primaryFieldsViewIndex, fields } = options;
+
+  // get resolved field labels for primary fields raw config included in configFields
+  const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
+    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
+  });
+
   const fieldDefs = configFields?.map((field, index) => {
     return {
       type: 'text',
-      label: fields[index].config.label || fields[index].config.caption,
+      label: fieldsLabels[index],
       fillAvailableSpace: !!field.config.fillAvailableSpace,
       id: `${index}`,
       name: field.config.value.substr(4),
@@ -290,7 +404,7 @@ export const createPConnect = (contextName, referenceList, pageReference) => {
 
   // create PConnect object
   const config = { meta: {}, options };
-  const { getPConnect } = PCore.createPConnect(config);
+  const { getPConnect } = PCore.createPConnect(config as any);
 
   return getPConnect();
 };

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

@@ -44,7 +44,7 @@
           <td mat-cell *matCellDef="let element; index as j">
             <div class="header-icon">
               <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
-                <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
+                <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
                 <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
@@ -58,7 +58,7 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       <tr class="mat-row psdk-no-records" *matNoDataRow>
         <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
-          {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </td>
       </tr>
     </table>
@@ -82,7 +82,7 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element; index as j">
           <button id="delete-button" mat-icon-button (click)="deleteRecord(j)">
-            <img class="psdk-utility-card-action-svg-icon" src="{{ menuIconOverride$ }}" />
+            <mat-icon>delete</mat-icon>
           </button>
         </td>
       </ng-container>
@@ -90,7 +90,7 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       <tr class="mat-row psdk-no-records" *matNoDataRow>
         <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
-          {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </td>
       </tr>
     </table>