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

package/tests/assets/sdk-a/components/createAll/override-sdk/field/decimal/decimal.component.ts

@@ -7,17 +7,27 @@ 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 DecimalProps extends PConnFieldProps {
+interface DecimalProps 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({
@@ -40,12 +50,10 @@ export class DecimalComponent 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.
@@ -59,66 +67,34 @@ export class DecimalComponent 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);
-
-    if (this.bReadonly$ && formatter === 'Currency') {
-      this.currencySymbol = theSymbols.theCurrencySymbol;
+  protected updateDecimalProperties(configProps: DecimalProps): void {
+    const { decimalPrecision, showGroupSeparators = true } = configProps;
+    const numberOfDecimals = parseDecimalPrecision(decimalPrecision, 2);
+    const groupSeparators = this.utils.getBooleanValue(showGroupSeparators);
+
+    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 (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
+      this.formattedValue = formatNumberFieldForDisplay('Decimal', this.value$, configProps);
     }
-
-    if (this.bReadonly$ && formatter === 'Percentage') {
-      this.suffix = '%';
-    }
-
-    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/override-sdk/field/dropdown/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "Dropdown",
-    "name": "Dropdown",
-    "label": "Dropdown",
-    "description": "Picklist",
-    "type": "Field",
-    "subtype": "Picklist",
-    "properties": []
-}
+  "name": "Dropdown",
+  "label": "Dropdown",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/dropdown/dropdown.component.html

@@ -11,12 +11,14 @@
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <mat-select
           [value]="value$"
+          [placeholder]="placeholderText"
           [required]="bRequired$"
           [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           (selectionChange)="fieldOnChange($event)"
           [formControl]="fieldControl"
         >
+          <mat-option>{{ placeholderText }}</mat-option>
           <mat-option *ngFor="let opt of options$" [value]="opt.key">
             {{ getLocalizedOptionValue(opt) }}
           </mat-option>

package/tests/assets/sdk-a/components/createAll/override-sdk/field/dropdown/dropdown.component.ts

@@ -80,16 +80,19 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
   localeName = '';
   localePath = '';
   localizedValue = '';
+  placeholderText = '';
 
   set options(options: IOption[]) {
     this.options$ = options;
     if (this.displayMode$) {
       this.value$ = this.options$?.find(option => option.key === this.value$)?.value || this.value$;
       this.localizedValue = this.pConn$.getLocalizedValue(
-        this.value$ === 'Select...' ? '' : this.value$,
+        this.value$,
         this.localePath,
         this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
       );
+
+      this.cdRef.markForCheck();
     }
   }
 
@@ -115,20 +118,15 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
     const { value, fieldMetadata, datasource } = configProps;
 
     this.value$ = value;
+    this.placeholderText = this.pConn$.getLocalizedValue(this.placeholder || 'Select...', '', '');
 
     if (!isEqual(datasource, this.theDatasource)) {
       // inbound datasource is different, so update theDatasource
       this.theDatasource = datasource || null;
     }
 
-    if (this.value$ === '' && !this.bReadonly$) {
-      this.value$ = 'Select';
-    }
-
     if (this.theDatasource) {
-      const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
-      optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-      this.options = optionsList;
+      this.options = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
     }
 
     this.actionsApi = this.pConn$.getActionsApi();
@@ -215,27 +213,21 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
             };
             optionsData.push(obj);
           });
-          optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
           this.options = optionsData;
         });
       });
   }
 
-  isSelected(buttonValue: string): boolean {
-    return this.value$ === buttonValue;
-  }
-
   fieldOnChange(event: any) {
-    if (event?.value === 'Select') {
-      event.value = '';
-    }
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
+    // The reset option has no value; Pega expects '' for a cleared field
+    const value = event.value ?? '';
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
 
     this.pConn$.clearErrorMessages({
       property: this.propName
     });
     if (this.onRecordChange) {
-      this.onRecordChange.emit(event.value);
+      this.onRecordChange.emit(value);
     }
   }
 

package/tests/assets/sdk-a/components/createAll/override-sdk/field/email/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "Email",
-    "name": "Email",
-    "label": "Email",
-    "description": "Email",
-    "type": "Field",
-    "subtype": "Text-Email",
-    "properties": []
-}
+  "name": "Email",
+  "label": "Email",
+  "description": "Email",
+  "type": "Field",
+  "subtype": "Text-Email",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/config-ext.json

@@ -1,8 +1,7 @@
 {
-    "componentKey": "Group",
-    "name": "Group",
-    "label": "Field Group",
-    "description": "Field Group",
-    "type": "Group",
-    "properties": []
-}
+  "name": "Group",
+  "label": "Field Group",
+  "description": "Field Group",
+  "type": "Group",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/group/group.component.ts

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -20,7 +19,7 @@ interface GroupProps extends PConnFieldProps {
   styleUrls: ['./group.component.scss'],
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class GroupComponent implements OnInit {
+export class GroupComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
@@ -43,6 +42,12 @@ export class GroupComponent implements OnInit {
     this.checkAndUpdate();
   }
 
+  additionalProps() {
+    return {
+      visibility: this.pConn$.getComputedVisibility()
+    };
+  }
+
   // Callback passed when subscribing to store change
   onStateChange() {
     this.checkAndUpdate();
@@ -64,7 +69,7 @@ export class GroupComponent implements OnInit {
    */
   updateSelf(): void {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as GroupProps;
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility;
     this.showHeading$ = this.configProps$.showHeading;
     this.heading$ = this.configProps$.heading;
@@ -87,4 +92,10 @@ export class GroupComponent implements OnInit {
       });
     }
   }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/field/integer/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "Integer",
-    "name": "Integer",
-    "label": "Integer",
-    "description": "Integer",
-    "type": "Field",
-    "subtype": "Integer",
-    "properties": []
-}
+  "name": "Integer",
+  "label": "Integer",
+  "description": "Integer",
+  "type": "Field",
+  "subtype": "Integer",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/integer/integer.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
@@ -8,10 +8,19 @@
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
+          type="text"
+          currencyMask
+          [options]="{
+            prefix: '',
+            suffix: '',
+            thousands: thousandSeparator,
+            decimal: decimalSeparator,
+            align: 'left',
+            nullable: true,
+            precision: 0,
+            inputMode: inputMode
+          }"
           [placeholder]="placeholder"
-          type="number"
-          step="1"
-          [value]="value$"
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"

package/tests/assets/sdk-a/components/createAll/override-sdk/field/integer/integer.component.ts

@@ -3,26 +3,48 @@ import { CommonModule } from '@angular/common';
 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 {
+  formatNumberFieldForDisplay,
+  getNumberInputFormat,
+  NumberInputFormat,
+  parseFormattedNumber,
+  saveNumberOnBlur
+} from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
-interface IntegerProps extends PConnFieldProps {
+interface IntegerProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Integer here
+  value?: number | string;
+  showGroupSeparators?: boolean | string;
+  formatter?: string;
+  decimalPrecision?: number | string;
+  currencyISOCode?: string;
+  currencyDisplay?: 'symbol' | 'code' | 'name';
+  negative?: 'minus-sign' | 'parentheses';
+  notation?: 'standard' | 'compact';
+  currencyDecimalPrecision?: string;
 }
 
 @Component({
   selector: 'app-integer',
   templateUrl: './integer.component.html',
   styleUrls: ['./integer.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class IntegerComponent extends FieldBase {
   configProps$: IntegerProps;
   override fieldControl = new FormControl<number | null>(null, null);
 
+  decimalSeparator: string;
+  thousandSeparator: string;
+  formattedValue: string;
+  inputMode: any = NgxCurrencyInputMode.Natural;
+  private inputFormat: NumberInputFormat;
+
   /**
    * Updates the component when there are changes in the state.
    */
@@ -35,8 +57,25 @@ export class IntegerComponent extends FieldBase {
 
     // Extract and normalize the value property
     const { value } = this.configProps$;
-    if (value) {
-      this.value$ = typeof value === 'string' ? parseInt(value, 10) : value;
+    this.value$ = value === undefined || value === null || value === '' ? '' : Number(value);
+    this.fieldControl.setValue(this.value$ === '' ? null : this.value$);
+
+    this.updateIntegerProperties(this.configProps$);
+  }
+
+  /**
+   * Updates the input mask and read-only value, matching the Constellation DX Integer component.
+   */
+  protected updateIntegerProperties(configProps: IntegerProps): void {
+    const { showGroupSeparators = true } = configProps;
+    const groupSeparators = this.utils.getBooleanValue(showGroupSeparators);
+
+    this.inputFormat = getNumberInputFormat();
+    this.decimalSeparator = this.inputFormat.decimalSeparator;
+    this.thousandSeparator = groupSeparators ? this.inputFormat.thousandSeparator : '';
+
+    if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
+      this.formattedValue = formatNumberFieldForDisplay('Integer', this.value$, configProps);
     }
   }
 
@@ -52,12 +91,7 @@ export class IntegerComponent extends FieldBase {
   }
 
   fieldOnBlur(event: any) {
-    const oldVal = this.value$ ?? '';
-    const isValueChanged = event.target.value.toString() !== oldVal.toString();
-
-    if (isValueChanged) {
-      const value = event?.target?.value;
-      handleEvent(this.actionsApi, 'changeNblur', this.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/override-sdk/field/location/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "Location",
-    "name": "Location",
-    "label": "Location",
-    "description": "Location",
-    "type": "Field",
-    "subtype": "Location",
-    "properties": []
-}
+  "name": "Location",
+  "label": "Location",
+  "description": "Location",
+  "type": "Field",
+  "subtype": "Location",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/multiselect/multiselect.component.html

@@ -1,7 +1,7 @@
 <div [formGroup]="formGroup$">
   <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
     <mat-label>{{ label$ }}</mat-label>
-    <mat-chip-grid #chipGrid>
+    <mat-chip-grid #chipGrid [required]="bRequired$">
       <ng-container *ngFor="let select of selectedItems">
         <mat-chip-row (removed)="removeChip(select)">
           {{ select.primary }}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/percentage/config-ext.json

@@ -1,9 +1,8 @@
 {
-    "componentKey": "Percentage",
-    "name": "Percentage",
-    "label": "Percentage",
-    "description": "Percentage",
-    "type": "Field",
-    "subtype": "Decimal-Percentage",
-    "properties": []
-}
+  "name": "Percentage",
+  "label": "Percentage",
+  "description": "Percentage",
+  "type": "Field",
+  "subtype": "Decimal-Percentage",
+  "properties": []
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/field/percentage/percentage.component.html

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