@pega/angular-sdk-overrides 0.26.2 → 0.26.4

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

@@ -17,7 +17,7 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { getReferenceList } from '@pega/angular-sdk-components';
-import { buildFieldsForTable, filterDataByCommonFields, filterDataByDate, getContext } from './helpers';
+import { buildFieldsForTable, filterDataByCommonFields, filterDataByDate, getConfigFields, getContext, isPrimaryFieldsValue } from './helpers';
 import { evaluateAllowRowAction } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { getSeconds } from '@pega/angular-sdk-components';
@@ -47,7 +47,8 @@ interface SimpleTableManualProps {
   displayMode?: string;
   useSeparateViewForEdit: any;
   viewForEditModal: any;
-  targetClassLabel: string;
+  targetClassLabel?: string;
+  uniqueField?: string;
 }
 
 class Group {
@@ -115,6 +116,9 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   elementsData: MatTableDataSource<any>;
   originalElementsData: MatTableDataSource<any>;
   rawFields: any;
+  configFields: any[] = [];
+  uniqueField?: string;
+  normalizedUniqueField?: string;
   label?: string = '';
   searchIcon$: string;
 
@@ -172,7 +176,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   settingsSvgIcon$: string;
 
   isInitialized = false;
-  targetClassLabel: string;
+  targetClassLabel = '';
+  addButtonLabel$ = '';
   localizedVal = PCore.getLocaleUtils().getLocaleValue;
   localeCategory = 'SimpleTable';
   hideEditRow: any;
@@ -261,9 +266,15 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       displayMode,
       useSeparateViewForEdit,
       viewForEditModal,
-      targetClassLabel
+      targetClassLabel,
+      uniqueField
     } = this.configProps$;
 
+    // uniqueField is authored as a property reference (ex: ".EmbedListUUID__"); page instructions expect it
+    // with the leading dot while the inserted row payload expects the bare property name.
+    this.uniqueField = uniqueField;
+    this.normalizedUniqueField = uniqueField?.startsWith('.') ? uniqueField.substring(1) : uniqueField;
+
     const simpleTableManualProps: any = {};
     if (this.checkIfAllowActionsOrRowEditingExist(allowActions) && editMode) {
       simpleTableManualProps.hideAddRow = allowActions?.allowAdd === false;
@@ -279,7 +290,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.referenceListStr = getContext(this.pConn$).referenceListStr;
     this.label = labelProp || propertyLabel;
     this.parameters = fieldMetadata?.datasource?.parameters;
-    this.targetClassLabel = targetClassLabel;
+    this.targetClassLabel = targetClassLabel ?? '';
+    this.addButtonLabel$ = this.getAddButtonLabel();
     let { contextClass } = this.configProps$;
     this.referenceList = referenceList;
     if (!contextClass) {
@@ -316,7 +328,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.readOnlyMode = renderMode === 'ReadOnly';
     this.editableMode = renderMode === 'Editable';
     const isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
-    this.showAddRowButton = !this.readOnlyMode && !simpleTableManualProps.hideAddRow;
+    this.showAddRowButton = this.getShowAddRowButton(simpleTableManualProps.hideAddRow);
     this.hideEditRow = simpleTableManualProps.hideEditRow;
     this.hideDeleteRow = simpleTableManualProps.hideDeleteRow;
     this.allowEditingInModal =
@@ -333,9 +345,14 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.defaultActionId = this.editType === 'action' ? editModeConfig?.defaultAction : undefined;
     this.editActionId =
       this.editType === 'action' && editModeConfig?.useSeparateActionForEdit ? editModeConfig?.editAction : editModeConfig?.defaultAction;
-    const primaryFieldsViewIndex = resolvedFields.findIndex(field => field.config.value === 'pyPrimaryFields');
+    const primaryFieldsViewIndex = resolvedFields?.findIndex(field => isPrimaryFieldsValue(field.config.value)) ?? -1;
     // const showDeleteButton = !this.readOnlyMode && !hideDeleteRow;
 
+    // "pyPrimaryFields" is a single authored column that expands into several real columns, so the
+    // resolved/raw children can no longer be used directly - configFields is the expanded column list.
+    const configFields = getConfigFields(rawFields, contextClass, primaryFieldsViewIndex);
+    this.configFields = configFields.filter(field => !(field?.config?.hide === true));
+
     // Nebula has other handling for isReadOnlyMode but has Cosmos-specific code
     //  so ignoring that for now...
     // fieldDefs will be an array where each entry will have a "name" which will be the
@@ -344,7 +361,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula does). It will also have the "label", and "meta" contains the original,
     //  unchanged config info. For now, much of the info here is carried over from
     //  Nebula and we may not end up using it all.
-    this.fieldDefs = buildFieldsForTable(rawFields, this.pConn$, this.showActionColumn, {
+    this.fieldDefs = buildFieldsForTable(configFields, this.pConn$, this.showActionColumn, {
       primaryFieldsViewIndex,
       fields: resolvedFields
     });
@@ -360,7 +377,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       return field.name ? field.name : field.cellRenderer;
     });
 
-    // And now we can process the resolvedFields to add in the "name"
+    // And now we can process the configFields to add in the "name"
     //  from from the fieldDefs. This "name" is the value that
     //  we'll share to connect things together in the table.
 
@@ -368,12 +385,9 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       return { ...acc, [curr.name]: curr.label };
     }, {});
 
-    this.processedFields = [];
-
-    this.processedFields = resolvedFields.map((field, i) => {
-      field.config.name = this.displayedColumns[i]; // .config["value"].replace(/ ./g,"_");   // replace space dot with underscore
-      field.config.label = labelsMap[field.config.name] || field.config.label;
-      return field;
+    this.processedFields = this.configFields.map((field, i) => {
+      const name = this.displayedColumns[i];
+      return { ...field, config: { ...field.config, name, label: labelsMap[name] || field.config.label } };
     });
 
     // for adding rows to table when editable and not modal view
@@ -419,11 +433,12 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       this.pConn$.getListActions().initDefaultPageInstructions(
         this.pConn$.getReferenceList(),
         // Temporary filter for attachments to align with constellation payload behavior.
-        this.fieldDefs.filter(item => item.name && item.meta?.type !== 'Attachment').map(item => item.name)
+        this.fieldDefs.filter(item => item.name && item.meta?.type !== 'Attachment').map(item => item.name),
+        this.uniqueField
       );
     } else {
-      // @ts-ignore - An argument for 'propertyNames' was not provided.
-      this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
+      // @ts-ignore - 'propertyNames' is optional at runtime; uniqueField is passed as the 3rd argument.
+      this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList(), undefined, this.uniqueField);
     }
   }
 
@@ -1030,7 +1045,11 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
           this.defaultActionId
         );
     } else {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
+      const payload: any = { classID: this.contextClass };
+      if (this.normalizedUniqueField) {
+        payload[this.normalizedUniqueField] = crypto.randomUUID();
+      }
+      this.pConn$.getListActions().insert(payload, this.referenceList.length);
     }
 
     this.pConn$.clearErrorMessages({
@@ -1038,6 +1057,18 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     });
   }
 
+  getAddButtonLabel(): string {
+    const addLabel = this.targetClassLabel
+      ? this.localizedVal('Add {0}', this.localeCategory).replace('{0}', this.targetClassLabel)
+      : this.localizedVal('Add', this.localeCategory);
+
+    return this.localizedVal(addLabel, this.localeCategory);
+  }
+
+  getShowAddRowButton(hideAddRow?: boolean): boolean {
+    return !this.readOnlyMode && !hideAddRow;
+  }
+
   editRecord(data, index) {
     if (data && Number.isInteger(index) && index >= 0 && index < this.referenceList.length) {
       const viewForEdit = this.bUseSeparateViewForEdit ? this.editView : this.defaultView;
@@ -1070,7 +1101,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       const isRowEditable = evaluateAllowRowAction(allowRowEdit, element);
       const data: any = [];
       data.__originalIndex = index;
-      this.rawFields?.forEach(item => {
+      this.configFields?.forEach(item => {
         if (!item?.config?.hide) {
           item = {
             ...item,

package/lib/template/single-reference-readonly/single-reference-readonly.component.scss

@@ -7,10 +7,6 @@
   margin-top: 1rem;
 }
 
-.psdk-grid-nondisplay {
-  margin-top: 1rem;
-}
-
 .psdk-details-reference-value {
   margin-top: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.26.2",
+  "version": "0.26.4",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/lib/designSystemExtension/material-details/material-details.component.html

@@ -1,40 +0,0 @@
-<div id="details-fields-list">
-  <div
-    *ngIf="arHighlightedFields && arHighlightedFields.length > 0"
-    [ngClass]="{
-      'psdk-grid-filter-1': this.layout === 'one-column',
-      'psdk-grid-filter-2': this.layout === 'two-column',
-      'psdk-grid-filter-3': this.layout === 'three-column',
-      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
-      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
-    }"
-  >
-    <div *ngFor="let field of arHighlightedFields">
-      <div class="psdk-details-fields-label">
-        {{ field.config.label }}
-      </div>
-      <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
-        <span *ngSwitchCase="'textinput'" class="psdk-details-text-style-hf">{{ _getValue(field.config.value) }}</span>
-        <span *ngSwitchCase="'status'" class="psdk-details-status-style-hf">{{ _getValue(field.config.value) }}</span>
-        <a *ngSwitchCase="'phone'" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-        <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-        <span *ngSwitchCase="'date'" class="psdk-details-text-style-hf">{{ _formatDate(field.config.value, field.type) }}</span>
-        <span *ngSwitchCase="'caseoperator'"></span>
-        <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>
-      </div>
-    </div>
-  </div>
-  <div
-    [ngClass]="{
-      'psdk-grid-filter-1': this.layout === 'one-column',
-      'psdk-grid-filter-2': this.layout === 'two-column',
-      'psdk-grid-filter-3': this.layout === 'three-column',
-      'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
-      'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
-    }"
-  >
-    <component-mapper *ngIf="arFields$" name="DetailsFields" [props]="{ arFields$: arFields$ }"></component-mapper>
-    <component-mapper *ngIf="arFields2$" name="DetailsFields" [props]="{ arFields$: arFields2$ }"></component-mapper>
-    <component-mapper *ngIf="arFields3$" name="DetailsFields" [props]="{ arFields$: arFields3$ }"></component-mapper>
-  </div>
-</div>

package/lib/designSystemExtension/material-details/material-details.component.scss

@@ -1,116 +0,0 @@
-.psdk-details-group {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.psdk-details-fields {
-  padding: calc(2 * 0.5rem);
-  grid-row-gap: calc(2 * 0.5rem);
-}
-
-.psdk-details-fields-primary {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-column-gap: calc(2 * 0.5rem);
-  grid-row-gap: calc(1 * 0.5rem);
-}
-
-.psdk-details-fields-single {
-  display: grid;
-  grid-template-columns: 20ch 1fr;
-  grid-column-gap: calc(2 * 0.5rem);
-}
-
-.psdk-details-fields-label {
-  margin: 8px 0px;
-}
-
-.psdk-details-fields-value {
-  word-break: break-word;
-  grid-column-start: 2;
-  grid-row-start: 1;
-}
-
-span.psdk-details-text-style-hf {
-  font-weight: 500;
-  font-size: 1.25rem;
-}
-
-span.psdk-details-text-style {
-  font-weight: 400;
-}
-
-span.psdk-details-status-style {
-  border-radius: calc(0.25 * 0.5rem);
-  display: inline-block;
-  font-size: 0.75rem;
-  font-weight: bold;
-  line-height: calc(0.5rem * 2.5);
-  height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
-  text-transform: uppercase;
-}
-
-.psdk-grid-filter {
-  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-csf-primary-field-value {
-  margin: 8px 0;
-}
-
-span.psdk-details-status-style-hf {
-  border-radius: calc(0.25 * 0.5rem);
-  display: inline-block;
-  font-size: 1.25rem;
-  font-weight: 500;
-  line-height: calc(0.5rem * 2.5);
-  height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
-  text-transform: uppercase;
-}
-
-.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-3 {
-  display: grid;
-  grid-template-columns: repeat(3, 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/designSystemExtension/material-details/material-details.component.spec.ts

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

package/lib/designSystemExtension/material-details/material-details.component.ts

@@ -1,31 +0,0 @@
-import { Component, Input, forwardRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Utils } from '@pega/angular-sdk-components';
-import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-
-@Component({
-  selector: 'app-material-details',
-  templateUrl: './material-details.component.html',
-  styleUrls: ['./material-details.component.scss'],
-  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
-})
-export class MaterialDetailsComponent {
-  constructor(private utils: Utils) {}
-
-  @Input() arFields$: any[];
-  @Input() arFields2$: any[];
-  @Input() arFields3$: any[];
-  @Input() arHighlightedFields: any[];
-  @Input() layout: any;
-
-  _getValue(configValue) {
-    if (configValue && configValue != '') {
-      return configValue;
-    }
-    return '---';
-  }
-
-  _formatDate(dateValue: string, dateFormat: string): string {
-    return this.utils.generateDate(dateValue, dateFormat);
-  }
-}

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -1,50 +0,0 @@
-<div id="details-fields-list">
-  <div *ngFor="let field of arFields$">
-    <div *ngIf="field.type === 'group'; else noGroup">
-      <component-mapper name="Group" [props]="{ pConn$: field.pConn }"></component-mapper>
-    </div>
-    <ng-template #noGroup>
-      <div *ngIf="field.type === 'reference'; else showDetails">
-        <component-mapper name="reference" [props]="{ pConn$: field.pConn }"></component-mapper>
-      </div>
-    </ng-template>
-
-    <ng-template #showDetails>
-      <div class="psdk-grid-filter" *ngIf="field.config.label && _getVisibility(field.config)">
-        <div class="psdk-details-fields-label">
-          {{ field.config.label }}
-        </div>
-        <ng-container *ngIf="field.type.toLowerCase() === 'objectreference'; else standardFieldValue">
-          <div>
-            <component-mapper name="ObjectReference" [props]="{ pConn$: field.pConn, isDetails$: true }"></component-mapper>
-          </div>
-        </ng-container>
-        <ng-template #standardFieldValue>
-          <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
-            <span *ngSwitchCase="'textinput'" class="psdk-details-text-style">{{ _getValue(field.config.value) }}</span>
-            <span *ngSwitchCase="'status'" class="psdk-details-status-style">{{ _getValue(field.config.value) }}</span>
-            <a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-            <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
-            <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
-            <span *ngSwitchCase="'decimal'" class="psdk-details-text-style">{{ _formatDecimal(field) }}</span>
-            <span *ngSwitchCase="'currency'" class="psdk-details-text-style">{{ _formatCurrency(field) }}</span>
-            <span *ngSwitchCase="'richtext'" class="psdk-details-text-style" [innerHTML]="_getValue(field.config.value)"></span>
-            <ng-container *ngSwitchCase="'scalarlist'">
-              <span *ngIf="field.config.componentType?.toLowerCase() === 'decimal'" class="psdk-details-text-style">{{ _formatDecimal(field) }}</span>
-              <span *ngIf="field.config.componentType?.toLowerCase() === 'currency'" class="psdk-details-text-style">{{
-                _formatCurrency(field)
-              }}</span>
-              <span
-                *ngIf="field.config.componentType?.toLowerCase() !== 'decimal' && field.config.componentType?.toLowerCase() !== 'currency'"
-                class="psdk-details-text-style"
-                >{{ _getValue(field.config.value) }}</span
-              >
-            </ng-container>
-            <span *ngSwitchCase="'caseoperator'"></span>
-            <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>
-          </div>
-        </ng-template>
-      </div>
-    </ng-template>
-  </div>
-</div>

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.scss

@@ -1,34 +0,0 @@
-.psdk-details-fields-label {
-  margin: 8px 0px;
-}
-
-span.psdk-details-text-style-hf {
-  font-weight: bold;
-}
-
-span.psdk-details-status-style-hf {
-  border-radius: calc(0.25 * 0.5rem);
-  display: inline-block;
-  font-size: 0.75rem;
-  font-weight: bold;
-  line-height: calc(0.5rem * 2.5);
-  height: calc(0.5rem * 2.5);
-  padding: 0 0.5rem;
-  text-transform: uppercase;
-}
-
-.psdk-grid-filter {
-  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-csf-primary-field-value {
-  margin: 8px 0;
-}
-
-.psdk-primary-color {
-  color: var(--mat-sys-primary);
-}

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.spec.ts

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

package/lib/designSystemExtension/material-details-fields/material-details-fields.component.ts

@@ -1,61 +0,0 @@
-import { Component, Input, forwardRef } from '@angular/core';
-import { Utils } from '@pega/angular-sdk-components';
-import { CommonModule } from '@angular/common';
-import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { getCurrencyOptions } from '@pega/angular-sdk-components';
-import { format } from '@pega/angular-sdk-components';
-
-@Component({
-  selector: 'app-material-details-fields',
-  templateUrl: './material-details-fields.component.html',
-  styleUrls: ['./material-details-fields.component.scss'],
-  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
-})
-export class MaterialDetailsFieldsComponent {
-  constructor(private utils: Utils) {}
-
-  @Input() arFields$: any[];
-  @Input() arHighlightedFields: any[];
-
-  _getValue(configValue, field: any = {}) {
-    if (field?.type === 'userreference') {
-      return configValue.userName;
-    }
-    if (configValue && configValue != '') {
-      return configValue;
-    }
-    return '---';
-  }
-
-  _formatDate(dateValue: string, dateFormat: string): string {
-    return this.utils.generateDate(dateValue, dateFormat);
-  }
-
-  _formatDecimal(field: any): string {
-    const { currencyISOCode = '', formatter } = field.config;
-
-    const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-    const formatterLower = formatter?.toLowerCase() || 'decimal';
-    const formattedValue = format(field.config.value, formatterLower, theCurrencyOptions);
-
-    return formattedValue;
-  }
-
-  _formatCurrency(field: any): string {
-    const { currencyISOCode = 'USD', formatter } = field.config;
-
-    const formattedValue = format(
-      field.config.value,
-      formatter ? (formatter.toLowerCase() === 'defaultcurrency' ? 'currency' : formatter.toLowerCase()) : 'currency',
-      getCurrencyOptions(currencyISOCode)
-    );
-
-    return formattedValue;
-  }
-
-  _getVisibility(config): boolean {
-    const { visibility = true } = config;
-
-    return this.utils.getBooleanValue(visibility);
-  }
-}