@pega/dx-component-builder-sdk 25.1.15 → 25.1.17

package/tests/assets/sdk-a/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageWidget/index.tsx

@@ -9,17 +9,16 @@ import StyledPegaDxilMyPageWidgetWrapper from './styles';
 // interface for props
 interface PegaDxilMyPageWidgetProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
-    datasource: Array<any>;
-    header: string;
-    description: string;
-    whatsnewlink: string;
-    image: string;
+  datasource: Array<any>;
+  header: string;
+  description: string;
+  whatsnewlink: string;
+  image: string;
 }
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
 // any default values in config.pros should be set in defaultProps at bottom of this file
 function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
-
   const { header, description, datasource = [], whatsnewlink, image, getPConnect } = props;
   const [worklist, setWorklist] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -31,7 +30,7 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   // @ts-ignore
   if (datasource && datasource.source) {
     // @ts-ignore
-    details = datasource.source.map((item) => {
+    details = datasource.source.map(item => {
       return item.name;
     });
   }
@@ -49,7 +48,6 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
   // get data from a data page and a PConnect function
   // to get getContextName
   useEffect(() => {
-
     PCore.getDataApiUtils()
       .getData(dataViewName, {}, context)
       // @ts-ignore
@@ -71,12 +69,10 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
               };
             })
           );
-        }
-        else {
+        } else {
           setWorklist([]);
           setIsLoading(false);
         }
-
       })
       .catch((error: any) => {
         setWorklist([]);
@@ -87,24 +83,23 @@ function PegaDxilMyPageWidget(props: PegaDxilMyPageWidgetProps) {
 
   return (
     <StyledPegaDxilMyPageWidgetWrapper>
-    <PegaAppAnnouncement
-      heading={header}
-      description={description}
-      details={details}
-      whatsNewLink={whatsnewlink}
-      image={image.replace(/ /g, '+')}
-    />
-    <br />
-    <Table
-      title={PConnect.getLocalizedValue('Work list', '', '')}
-      columns={columns}
-      data={worklist}
-      loading={isLoading}
-      loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
-    />
+      <PegaAppAnnouncement
+        heading={header}
+        description={description}
+        details={details}
+        whatsNewLink={whatsnewlink}
+        image={image.replace(/ /g, '+')}
+      />
+      <br />
+      <Table
+        title={PConnect.getLocalizedValue('Work list', '', '')}
+        columns={columns}
+        data={worklist}
+        loading={isLoading}
+        loadingMessage={PConnect.getLocalizedValue('Loading Work list', '', '')}
+      />
     </StyledPegaDxilMyPageWidgetWrapper>
   );
-
 }
 
 export default withConfiguration(PegaDxilMyPageWidget);

package/tests/assets/sdk-a/components/createAll/custom-constellation/widget/Pega_DXIL_MyPageWidget/mock.ts

@@ -1,4 +1,3 @@
-
 // @ts-nocheck
 const configProps = {
   label: 'App announcement',

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyBooleanComponent> = {
   title: 'PegaDxilMyBoolean',
   component: PegaDxilMyBooleanComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.html

@@ -13,7 +13,7 @@
       <div class="mat-form-field-infix" *ngIf="showLabel$">
         <span>
           <label class="mat-form-field-label psdk-label-readonly" [ngClass]="{ 'label-required': bRequired$ && selectionMode === 'multi' }">
-            {{label$}}
+            {{ label$ }}
           </label>
         </span>
       </div>

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.scss

@@ -39,4 +39,4 @@ mat-checkbox {
   display: inline;
   content: ' *';
   vertical-align: top;
-}
+}

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.ts

@@ -4,6 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatOptionModule } from '@angular/material/core';
+
 import { FieldBase } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyCurrencyComponent> = {
   title: 'PegaDxilMyCurrency',
   component: PegaDxilMyCurrencyComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/pega-dxil-my-currency.component.html

@@ -14,6 +14,7 @@
             currencyMask
             [options]="{
               prefix: currencySymbol,
+              suffix: currencySuffix,
               thousands: thousandSeparator,
               decimal: decimalSeparator,
               align: 'left',

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/pega-dxil-my-currency.component.ts

@@ -4,18 +4,30 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
+
 import { FieldBase } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { handleEvent } from '@pega/angular-sdk-components';
-import { getCurrencyCharacters, getCurrencyOptions } from '@pega/angular-sdk-components';
-import { format } from '@pega/angular-sdk-components';
+import {
+  formatNumberFieldForDisplay,
+  getCurrencyInputFormat,
+  NumberInputFormat,
+  parseFormattedNumber,
+  saveNumberOnBlur
+} from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
-interface PegaDxilMyCurrencyProps extends PConnFieldProps {
+interface PegaDxilMyCurrencyProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Currency here
+  value?: number | string;
   currencyISOCode?: string;
+  alwaysShowISOCode?: boolean;
   allowDecimals: boolean;
   formatter?: string;
+  currencyDisplay?: 'symbol' | 'code' | 'name';
+  negative?: 'minus-sign' | 'parentheses';
+  notation?: 'standard' | 'compact';
+  currencyDecimalPrecision?: string;
+  decimalPrecision?: number | string;
 }
 
 @Component({
@@ -28,14 +40,14 @@ export class PegaDxilMyCurrencyComponent extends FieldBase {
   configProps$: PegaDxilMyCurrencyProps;
   override fieldControl = new FormControl<number | null>(null, { updateOn: 'blur' });
 
-  currencyOptions: object = {};
   currencySymbol: string;
+  currencySuffix: string;
   thousandSeparator: string;
   decimalSeparator: string;
   decimalPrecision: number | undefined;
   formattedValue: string;
-  formatter;
   inputMode = NgxCurrencyInputMode.Natural;
+  private inputFormat: NumberInputFormat;
 
   /**
    * Updates the component when there are changes in the state.
@@ -49,56 +61,38 @@ export class PegaDxilMyCurrencyComponent extends FieldBase {
 
     // Extract and normalize the value property
     const { value } = this.configProps$;
-    if (value) {
-      this.value$ = typeof value === 'string' ? parseFloat(value) : value;
-      this.fieldControl.setValue(this.value$);
-    }
+    this.value$ = value === undefined || value === null || value === '' ? '' : Number(value);
+    this.fieldControl.setValue(this.value$ === '' ? null : this.value$);
 
     // update currency properties
     this.updateCurrencyProperties(this.configProps$);
   }
 
   /**
-   * Updates the currency properties
-   *
-   * @param {Object} configProps - Configuration properties.
-   * @param {boolean} configProps.allowDecimals - Whether to allow decimal values.
-   * @param {string} configProps.currencyISOCode - The ISO code of the currency.
-   * @param {string} configProps.formatter - The formatter type (e.g., 'currency').
+   * Updates the input mask and read-only value, matching the Constellation DX Currency component.
    */
-  protected updateCurrencyProperties(configProps): void {
-    const { allowDecimals, currencyISOCode = 'USD', formatter } = configProps;
+  protected updateCurrencyProperties(configProps: PegaDxilMyCurrencyProps): void {
+    const { allowDecimals = true, currencyISOCode = 'USD', alwaysShowISOCode = false } = configProps;
 
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    this.currencySymbol = theSymbols.theCurrencySymbol;
-    this.thousandSeparator = theSymbols.theDigitGroupSeparator;
-    this.decimalSeparator = theSymbols.theDecimalIndicator;
-    this.decimalPrecision = allowDecimals ? 2 : 0;
+    const inputFormat = getCurrencyInputFormat(
+      currencyISOCode,
+      this.utils.getBooleanValue(alwaysShowISOCode),
+      this.utils.getBooleanValue(allowDecimals)
+    );
+    this.inputFormat = inputFormat;
+    this.currencySymbol = inputFormat.prefix;
+    this.currencySuffix = inputFormat.suffix;
+    this.thousandSeparator = inputFormat.thousandSeparator;
+    this.decimalSeparator = inputFormat.decimalSeparator;
+    this.decimalPrecision = inputFormat.precision;
 
     if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
-      this.formattedValue = format(this.value$, formatter ? formatter.toLowerCase() : 'currency', getCurrencyOptions(currencyISOCode));
+      this.formattedValue = formatNumberFieldForDisplay('Currency', this.value$, { ...configProps, currencyISOCode });
     }
   }
 
   fieldOnBlur(event: any) {
-    const oldVal = this.value$ ?? '';
-    const isValueChanged = event.target.value.toString() !== oldVal.toString();
-
-    if (isValueChanged) {
-      const actionsApi = this.pConn$?.getActionsApi();
-      const propName = this.pConn$?.getStateProps().value;
-      let value = event?.target?.value;
-      value = value?.substring(1);
-      // replacing thousand separator with empty string as not required in api call
-      const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
-      let regExp = new RegExp(String.raw`${thousandSep}`, 'g');
-      value = value?.replace(regExp, '');
-      // replacing decimal separator with '.'
-      if (this.decimalSeparator !== '.') {
-        regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
-        value = value.replace(regExp, '.');
-      }
-      handleEvent(actionsApi, 'changeNblur', propName, value);
-    }
+    const parsed = parseFormattedNumber(event?.target?.value, this.inputFormat);
+    saveNumberOnBlur(this.pConn$, parsed !== '' ? Number(parsed) : '', this.configProps$?.value);
   }
 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyDateComponent> = {
   title: 'PegaDxilMyDate',
   component: PegaDxilMyDateComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/pega-dxil-my-date.component.ts

@@ -7,6 +7,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MAT_DATE_FORMATS } from '@angular/material/core';
 import { MomentDateModule } from '@angular/material-moment-adapter';
+
 import { FieldBase } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { getDateFormatInfo } from '@pega/angular-sdk-components';

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyDateTimeComponent> = {
   title: 'PegaDxilMyDateTime',
   component: PegaDxilMyDateTimeComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/pega-dxil-my-date-time.component.scss

@@ -20,61 +20,67 @@
     width: auto;
   }
 
-  .mat-datepicker-content,
-  .time-container {
-    box-shadow:
-      0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-      0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-    display: block;
-    border-radius: 4px;
-    background-color: var(--mat-datepicker-calendar-container-background-color);
-    color: var(--mat-datepicker-calendar-container-text-color);
+  .owl-dt-container {
+    background-color: var(--mat-sys-surface-container);
+    color: var(--mat-sys-on-surface);
   }
 
-  .mat-calendar-body-cell-content {
-    color: var(--mat-datepicker-calendar-date-text-color);
-    border-color: var(--mat-datepicker-calendar-date-outline-color);
+  .owl-dt-container-row,
+  .owl-dt-container-info .owl-dt-container-range:last-child {
+    border-color: var(--mat-sys-outline-variant);
   }
 
-  .mat-calendar-body-selected {
-    background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
-    color: var(--mat-datepicker-calendar-date-selected-state-text-color);
+  .owl-dt-calendar-control,
+  .owl-dt-calendar-table .owl-dt-calendar-cell {
+    color: var(--mat-sys-on-surface);
   }
 
-  .mat-calendar-body-cell-content {
-    border: none !important;
+  .owl-dt-calendar-table .owl-dt-calendar-header,
+  .owl-dt-calendar-table .owl-dt-calendar-cell-disabled > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) {
+    color: var(--mat-sys-on-surface-variant);
   }
 
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
-    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
+  .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider::after {
+    background-color: var(--mat-sys-outline-variant);
   }
 
-  .mat-calendar-arrow {
-    fill: var(--mat-datepicker-calendar-period-button-icon-color);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) {
+    border-color: var(--mat-sys-outline);
   }
 
-  .mat-calendar-table-header th {
-    text-align: center;
-    padding: 0 0 8px 0;
-    color: var(--mat-datepicker-calendar-header-text-color);
-    font-size: var(--mat-datepicker-calendar-header-text-size);
-    font-weight: var(--mat-datepicker-calendar-header-text-weight);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-selected {
+    background-color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
   }
 
-  .mat-datepicker-content .mat-calendar-previous-button,
-  .mat-datepicker-content .mat-calendar-next-button {
-    color: var(--mat-datepicker-calendar-navigation-button-icon-color);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-active:focus > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
+  .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
+  .owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button:hover,
+  .owl-dt-control-period-button:hover > .owl-dt-control-button-content,
+  .owl-dt-container-control-button:hover .owl-dt-control-button-content,
+  .owl-dt-control:focus > .owl-dt-control-content {
+    background-color: var(--mat-sys-surface-container-high);
   }
 
-  .mat-calendar-table-header-divider::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -8px;
-    right: -8px;
-    height: 1px;
-    background: var(--mat-datepicker-calendar-header-divider-color);
+  .owl-dt-timer-content .owl-dt-timer-input {
+    border-color: var(--mat-sys-outline);
+    background-color: var(--mat-sys-surface-container-highest);
+    color: var(--mat-sys-on-surface);
+  }
+
+  .owl-dt-container-buttons,
+  .owl-dt-container-info .owl-dt-container-info-active,
+  .owl-dt-timer-hour12 {
+    color: var(--mat-sys-primary);
+  }
+
+  .owl-dt-control-arrow-button[disabled] {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  .owl-dt-timer-hour12 .owl-dt-timer-hour12-box:focus .owl-dt-control-button-content,
+  .owl-dt-timer-hour12 .owl-dt-timer-hour12-box:hover .owl-dt-control-button-content {
+    background-color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
   }
 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/pega-dxil-my-date-time.component.ts

@@ -95,6 +95,12 @@ export class PegaDxilMyDateTimeComponent extends FieldBase implements OnInit, On
   }
 
   fieldOnDateChange(event: any) {
+    // owl picker emits null when the typed text can't be parsed; clear the input instead of defaulting to now
+    if (!event.value) {
+      this.fieldControl.setValue('');
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, '');
+      return;
+    }
     // this comes from the date pop up
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
@@ -104,4 +110,25 @@ export class PegaDxilMyDateTimeComponent extends FieldBase implements OnInit, On
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
+
+  override getErrorMessage() {
+    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
+    if (this.fieldControl.hasError('message')) {
+      return this.angularPConnectData.validateMessage ?? '';
+    }
+
+    if (this.fieldControl.hasError('required')) {
+      return 'You must enter a value';
+    }
+
+    if (this.fieldControl.hasError('owlDateTimeParse')) {
+      return `${this.fieldControl.errors?.['owlDateTimeParse'].text} is not a valid date time value`;
+    }
+
+    if (this.fieldControl.errors) {
+      return 'Invalid date time value';
+    }
+
+    return '';
+  }
 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyDecimalComponent> = {
   title: 'PegaDxilMyDecimal',
   component: PegaDxilMyDecimalComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/pega-dxil-my-decimal.component.html

@@ -11,8 +11,8 @@
           matInput
           currencyMask
           [options]="{
-            prefix: currencySymbol,
-            suffix: suffix,
+            prefix: '',
+            suffix: '',
             thousands: thousandSeparator,
             decimal: decimalSeparator,
             align: 'left',

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/pega-dxil-my-decimal.component.ts

@@ -4,19 +4,30 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
+
 import { FieldBase } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { handleEvent } from '@pega/angular-sdk-components';
-import { getCurrencyCharacters, getCurrencyOptions } from '@pega/angular-sdk-components';
-import { format } from '@pega/angular-sdk-components';
+import {
+  formatNumberFieldForDisplay,
+  getNumberInputFormat,
+  NumberInputFormat,
+  parseDecimalPrecision,
+  parseFormattedNumber,
+  saveNumberOnBlur
+} from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
-interface PegaDxilMyDecimalProps extends PConnFieldProps {
+interface PegaDxilMyDecimalProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Decimal here
+  value?: number | string;
   currencyISOCode?: string;
-  decimalPrecision?: number;
-  showGroupSeparators?: string;
+  decimalPrecision?: number | string;
+  showGroupSeparators?: boolean | string;
   formatter?: string;
+  currencyDisplay?: 'symbol' | 'code' | 'name';
+  negative?: 'minus-sign' | 'parentheses';
+  notation?: 'standard' | 'compact';
+  currencyDecimalPrecision?: string;
 }
 
 @Component({
@@ -39,12 +50,10 @@ export class PegaDxilMyDecimalComponent extends FieldBase {
 
   decimalSeparator: string;
   thousandSeparator: string;
-  currencySymbol = '';
   decimalPrecision: number | undefined;
-  formatter;
   formattedValue: any;
   inputMode: any = NgxCurrencyInputMode.Natural;
-  suffix = '';
+  private inputFormat: NumberInputFormat;
 
   /**
    * Updates the component when there are changes in the state.
@@ -58,66 +67,34 @@ export class PegaDxilMyDecimalComponent extends FieldBase {
 
     // Extract and normalize the value property
     const { value } = this.configProps$;
-    if (value) {
-      this.value$ = typeof value === 'string' ? parseFloat(value) : value;
-      this.fieldControl.setValue(this.value$);
-    }
+    this.value$ = value === undefined || value === null || value === '' ? '' : Number(value);
+    this.fieldControl.setValue(this.value$ === '' ? null : this.value$);
 
     // updates decimal properties
     this.updateDecimalProperties(this.configProps$);
   }
 
   /**
-   * Updates decimal properties based on the provided configuration.
-   *
-   * @param {Object} configProps - Configuration properties.
-   * @param {string} configProps.currencyISOCode - ISO code of the currency.
-   * @param {string} configProps.formatter - Formatter type (e.g., 'decimal', 'currency').
-   * @param {boolean} configProps.showGroupSeparators - Whether to show group separators.
+   * Updates the input mask and read-only value, matching the Constellation DX Decimal component.
    */
-  protected updateDecimalProperties(configProps): void {
-    const { currencyISOCode = '', formatter, showGroupSeparators } = configProps;
-
-    // Extract currency symbols and options
-    const theSymbols = getCurrencyCharacters(currencyISOCode);
-    this.decimalSeparator = theSymbols.theDecimalIndicator;
-    this.thousandSeparator = showGroupSeparators ? theSymbols.theDigitGroupSeparator : '';
-
-    const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-    const formatterLower = formatter?.toLowerCase() || 'decimal';
-    this.formattedValue = format(this.value$, formatterLower, theCurrencyOptions);
+  protected updateDecimalProperties(configProps: PegaDxilMyDecimalProps): void {
+    const { decimalPrecision, showGroupSeparators = true } = configProps;
+    const numberOfDecimals = parseDecimalPrecision(decimalPrecision, 2);
+    const groupSeparators = this.utils.getBooleanValue(showGroupSeparators);
 
-    if (this.bReadonly$ && formatter === 'Currency') {
-      this.currencySymbol = theSymbols.theCurrencySymbol;
-    }
+    this.inputFormat = getNumberInputFormat();
+    this.decimalSeparator = this.inputFormat.decimalSeparator;
+    this.thousandSeparator = groupSeparators ? this.inputFormat.thousandSeparator : '';
+    // ngx-currency needs a fixed precision; Constellation allows any number of decimals when none is configured
+    this.decimalPrecision = numberOfDecimals ?? 2;
 
-    if (this.bReadonly$ && formatter === 'Percentage') {
-      this.suffix = '%';
+    if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
+      this.formattedValue = formatNumberFieldForDisplay('Decimal', this.value$, configProps);
     }
-
-    this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
   }
 
   fieldOnBlur(event: any) {
-    const oldVal = this.value$ ?? '';
-    const isValueChanged = event.target.value.toString() !== oldVal.toString();
-
-    if (isValueChanged) {
-      const actionsApi = this.pConn$?.getActionsApi();
-      const propName = this.pConn$?.getStateProps().value;
-      let value = event?.target?.value;
-      // replacing thousand separator with empty string as not required in api call
-      if (this.configProps$.showGroupSeparators) {
-        const thousandSep = this.thousandSeparator === '.' ? '\\.' : this.thousandSeparator;
-        const regExp = new RegExp(String.raw`${thousandSep}`, 'g');
-        value = value?.replace(regExp, '');
-      }
-      // replacing decimal separator with '.'
-      if (this.decimalSeparator !== '.') {
-        const regExp = new RegExp(String.raw`${this.decimalSeparator}`, 'g');
-        value = value.replace(regExp, '.');
-      }
-      handleEvent(actionsApi, 'changeNblur', propName, value);
-    }
+    const parsed = parseFormattedNumber(event?.target?.value, this.inputFormat);
+    saveNumberOnBlur(this.pConn$, parsed !== '' ? Number(parsed) : '', this.configProps$?.value);
   }
 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-email/demo.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<PegaDxilMyEmailComponent> = {
   title: 'PegaDxilMyEmail',
   component: PegaDxilMyEmailComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-email/pega-dxil-my-email.component.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+
 import { FieldBase } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';