{{ label$ }}
@@ -10,7 +10,14 @@
type="text"
matInput
currencyMask
- [options]="{ prefix: '', thousands: currSep, decimal: currDec, align: 'left', nullable: true }"
+ [options]="{
+ prefix: bReadonly$ && formatter === 'Currency' ? currSym : '',
+ thousands: currSep,
+ decimal: currDec,
+ align: 'left',
+ nullable: true,
+ inputMode: inputMode
+ }"
[placeholder]="placeholder"
step="0.01"
[formControlName]="controlName$"
@@ -18,6 +25,7 @@
[formControl]="fieldControl"
[attr.data-test-id]="testId"
(blur)="fieldOnBlur($event)"
+ [readonly]="bReadonly$"
/>
{{ getErrorMessage() }}
@@ -27,3 +35,6 @@
+
+
diff --git a/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts b/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts
index dca233db..850eda58 100644
--- a/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts
+++ b/packages/angular-sdk-components/src/lib/_components/field/decimal/decimal.component.ts
@@ -3,13 +3,14 @@ import { CommonModule } from '@angular/common';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
-import { NgxCurrencyDirective } from 'ngx-currency';
+import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
import { Utils } from '../../../_helpers/utils';
import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
import { handleEvent } from '../../../_helpers/event-util';
-import { getCurrencyCharacters } from '../../../_helpers/currency-utils';
+import { getCurrencyCharacters, getCurrencyOptions } from '../../../_helpers/currency-utils';
import { PConnFieldProps } from '../../../_types/PConnProps.interface';
+import { format } from '../../../_helpers/formatters';
interface DecimalProps extends PConnFieldProps {
// If any, enter additional props that only exist on Decimal here
@@ -59,7 +60,12 @@ export class DecimalComponent implements OnInit, OnDestroy {
fieldControl = new FormControl(null, null);
currDec: string;
currSep: string;
+ currSym: string;
decimalPrecision: number | undefined;
+ formatter;
+ formattedValue: any;
+ inputMode: any;
+
constructor(
private angularPConnect: AngularPConnectService,
private cdRef: ChangeDetectorRef,
@@ -123,6 +129,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
this.testId = this.configProps$.testId;
this.label$ = this.configProps$.label;
this.displayMode$ = this.configProps$.displayMode;
+ this.inputMode = NgxCurrencyInputMode.Natural;
let nValue: any = this.configProps$.value;
if (nValue) {
if (typeof nValue === 'string') {
@@ -139,6 +146,15 @@ export class DecimalComponent implements OnInit, OnDestroy {
this.currDec = theSymbols.theDecimalIndicator;
this.currSep = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
+ const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+ this.formatter = this.configProps$.formatter;
+
+ if (this.formatter === 'Currency') {
+ this.formattedValue = format(this.value$, this.formatter.toLowerCase(), theCurrencyOptions);
+ } else {
+ this.formattedValue = format(this.value$, this.pConn$.getComponentName().toLowerCase(), theCurrencyOptions);
+ }
+
// timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
if (this.configProps$.required != null) {
@@ -166,6 +182,12 @@ export class DecimalComponent implements OnInit, OnDestroy {
this.fieldControl.enable();
}
+ if (this.bReadonly$ && this.formatter === 'Currency') {
+ this.currSym = theSymbols.theCurrencySymbol;
+ } else {
+ this.currSym = '';
+ }
+
this.componentReference = (this.pConn$.getStateProps() as any).value;
}
diff --git a/playwright.config.js b/playwright.config.js
index e81182f1..f6c4ccdc 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -44,7 +44,7 @@ const config = {
slowMo: 200
}
},
- testIgnore: 'e2e/DigV2/ComplexFields/ManyToMany.spec.js',
+ testIgnore: ['e2e/DigV2/ComplexFields/ManyToMany.spec.js', 'e2e/DigV2/Localization/Localization.spec.js'],
/* Configure projects for major browsers */
projects: [
{
diff --git a/projects/angular-test-app/src/app/_samples/embedded/mc-nav/mc-nav.component.ts b/projects/angular-test-app/src/app/_samples/embedded/mc-nav/mc-nav.component.ts
index 2e6a79c3..03a4031e 100644
--- a/projects/angular-test-app/src/app/_samples/embedded/mc-nav/mc-nav.component.ts
+++ b/projects/angular-test-app/src/app/_samples/embedded/mc-nav/mc-nav.component.ts
@@ -197,7 +197,8 @@ export class MCNavComponent implements OnInit, OnDestroy {
showHideProgress(bShow: boolean) {
this.isProgress$ = bShow;
- this.cdRef.detectChanges();
+ // causing failure on actions buttons in emebedded mode
+ // this.cdRef.detectChanges();
}
logOff() {
diff --git a/projects/angular-test-app/tests/e2e/DigV2/FormFields/Decimal.spec.js b/projects/angular-test-app/tests/e2e/DigV2/FormFields/Decimal.spec.js
index 86d597d9..6ff5fdcb 100644
--- a/projects/angular-test-app/tests/e2e/DigV2/FormFields/Decimal.spec.js
+++ b/projects/angular-test-app/tests/e2e/DigV2/FormFields/Decimal.spec.js
@@ -103,6 +103,11 @@ test.describe('E2E test', () => {
attributes = await common.getAttributes(editableDecimal);
await expect(attributes.includes('readonly')).toBeFalsy();
+ const decimalAsCurrency = page.locator('input[data-test-id="9e438afab6d7ec67b5582bded10f5172"]');
+ attributes = await common.getAttributes(decimalAsCurrency);
+ await expect(attributes.includes('readonly')).toBeTruthy();
+ await expect(await decimalAsCurrency.inputValue()).toBe('$20.00');
+
/** Selecting Visibility from the Sub Category dropdown */
selectedSubCategory = page.locator('mat-select[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
await selectedSubCategory.click();