@pega/dx-component-builder-sdk 0.242.17 → 0.242.19

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

@@ -7,54 +7,42 @@ const meta: Meta<PegaDxilMyPageComponent> = {
   title: 'PegaDxilMyPage',
   component: PegaDxilMyPageComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPageComponent) => {
-    window.PCore = {
-      ...window.PCore,
-      getContextTreeManager: (): any => {
-        return {
-          removeContextTreeNode: () => {
-            /* nothing */
-          }
-        };
-      }
-    };
-    return {
-      props: {
-        ...args,
-        pConn$: {
-          getChildren: () => {
-            return [
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'Region';
-                    },
-                    getChildren: () => {
-                      return children;
-                    }
-                  };
-                }
+  render: (args) => ({
+    props: {
+      ...args,
+      pConn$: {
+        getChildren: () => {
+          return [
+            {
+              getPConnect: () => {
+                return {
+                  getComponentName: () => {
+                    return 'Region';
+                  },
+                  getChildren: () => {
+                    return children;
+                  }
+                };
               }
-            ];
-          },
-          getConfigProps: () => {
-            return {
-              title: 'Announcements',
-              operator: ''
-            };
-          },
-          resolveConfigProps: () => {
-            return {
-              title: 'Announcements',
-              operator: ''
-            };
-          },
-          getContextName: () => ''
-        } as any
-      }
-    };
-  }
+            }
+          ];
+        },
+        getConfigProps: () => {
+          return {
+            title: 'Announcements',
+            operator: ''
+          };
+        },
+        resolveConfigProps: () => {
+          return {
+            title: 'Announcements',
+            operator: ''
+          };
+        },
+        getContextName: () => ''
+      } as any
+    }
+  })
 };
 
 export default meta;

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-details/demo.stories.tsx

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/demo.stories.tsx

@@ -10,21 +10,12 @@ class MockingDatapageService {
   getDataPageData = () => Promise.resolve({});
 }
 
-window.PCore = {
-  ...window.PCore,
-  getConstants: (): any => {
-    return {
-      CASE_INFO: {
-        INSTRUCTIONS: 'caseInfo.assignments[0].instructions'
-      }
-    };
-  },
-  setBehaviorOverride: () => {},
-  getStore: () => {
-    return {
-      subscribe: () => {}
-    };
-  }
+window.PCore.getContextTreeManager = (): any => {
+  return {
+    removeContextTreeNode: () => {
+      /* nothing */
+    }
+  };
 };
 
 const meta: Meta<PegaDxilMyTwoColumnFormComponent> = {
@@ -36,7 +27,7 @@ const meta: Meta<PegaDxilMyTwoColumnFormComponent> = {
   ],
   component: PegaDxilMyTwoColumnFormComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyTwoColumnFormComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/mock.ts

@@ -44,6 +44,9 @@ export const child1 = [
             label: 'First Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -93,6 +96,9 @@ export const child1 = [
             label: 'Middle Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -142,6 +148,9 @@ export const child1 = [
             label: 'Last Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -194,6 +203,9 @@ export const child2 = [
             label: 'Email',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -243,6 +255,9 @@ export const child2 = [
             label: 'Phone Number',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -349,7 +364,10 @@ export const child2 = [
         getContextName: () => {
           return 'app/primary_1/workarea_9';
         },
-        getDataObject: () => {}
+        getDataObject: () => {},
+        clearErrorMessages: () => {
+          /* nothing */
+        }
       };
     }
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/pega-dxil-my-two-column-form.component.scss

@@ -11,7 +11,7 @@
 .psdk-two-column-column {
   width: 50%;
   float: left;
-  padding: 0rem 1.5rem;
+  padding: 0rem 0.3125rem;
   height: 100%;
 }
 

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

@@ -8,23 +8,13 @@ const meta: Meta<PegaDxilMyCaseWidgetComponent> = {
   title: 'PegaDxilMyCaseWidget',
   component: PegaDxilMyCaseWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyCaseWidgetComponent) => {
-    window.PCore = {
-      ...window.PCore,
-      getConstants: () => {
-        return {
-          CASE_INFO: {
-            CASE_INFO_ID: 'caseInfo.ID'
-          }
-        } as any;
-      },
-      getDataApiUtils: () => {
-        return {
-          getData: () => {
-            return Promise.resolve(historyData);
-          }
-        } as any;
-      }
+  render: (args) => {
+    window.PCore.getDataApiUtils = (): any => {
+      return {
+        getData: () => {
+          return Promise.resolve(historyData);
+        }
+      };
     };
     return {
       props: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/demo.stories.tsx

@@ -4,29 +4,21 @@ import { configProps, operatorDetails } from './mock';
 
 import { PegaDxilMyPageCaseWidgetComponent } from './pega-dxil-my-page-case-widget.component';
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: () => {
-    return {
-      getOperatorDetails: () => {
-        return Promise.resolve(operatorDetails);
-      }
-    };
-  },
-  getLocaleUtils: () => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    } as any;
-  }
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
 };
 
 const meta: Meta<PegaDxilMyPageCaseWidgetComponent> = {
   title: 'PegaDxilMyPageCaseWidget',
   component: PegaDxilMyPageCaseWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPageCaseWidgetComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {

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

@@ -8,16 +8,13 @@ const meta: Meta<PegaDxilMyPageWidgetComponent> = {
   title: 'PegaDxilMyPageWidget',
   component: PegaDxilMyPageWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPageWidgetComponent) => {
-    window.PCore = {
-      ...window.PCore,
-      getDataApiUtils: () => {
-        return {
-          getData: () => {
-            return Promise.resolve(worklistData);
-          }
-        } as any;
-      }
+  render: (args) => {
+    window.PCore.getDataApiUtils = (): any => {
+      return {
+        getData: () => {
+          return Promise.resolve(worklistData);
+        }
+      };
     };
     return {
       props: {

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.ts

@@ -27,7 +27,6 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
     this.updateLabelAndDate(this.secondaryFields$);
   }
 
-  // eslint-disable-next-line sonarjs/no-identical-functions
   ngOnChanges() {
     this.updatePrimaryWithStatus();
     this.updateLabelAndDate(this.primaryFieldsWithStatus$);

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -10,7 +10,7 @@
     </ng-template>
 
     <ng-template #showDetails>
-      <div class="psdk-grid-filter" *ngIf="field.config.label">
+      <div class="psdk-grid-filter" *ngIf="field.config.label && getVisibility(field.config)">
         <div class="psdk-details-fields-label">
           {{ field.config.label }}
         </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.ts

@@ -29,4 +29,10 @@ export class MaterialDetailsFieldsComponent {
   _formatDate(dateValue: string, dateFormat: string): string {
     return this.utils.generateDate(dateValue, dateFormat);
   }
+
+  getVisibility(config): boolean {
+    const { visibility = true } = config;
+
+    return this.utils.getBooleanValue(visibility);
+  }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/operator/operator.component.html

@@ -1,4 +1,4 @@
-<div class="psdk-operator psdk-double">
+<div class="psdk-operator psdk-double" [ngClass]="{ 'flex-row': displayLabel }">
   <div class="psdk-label">
     {{ label$ }}
   </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/operator/operator.component.scss

@@ -1,9 +1,18 @@
 .psdk-operator {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   font-size: 0.8rem;
   color: var(--app-neutral-color);
+  padding-left: 0.625rem;
+  margin: 16px 0 8px 0;
+}
+
+.psdk-operator.flex-row {
+  flex-direction: row;
   align-items: center;
+  text-align: center;
+  padding-left: 0;
+  margin: 0;
 }
 
 .psdk-operator-popover {
@@ -35,7 +44,6 @@
 
 .psdk-double {
   column-gap: 1rem;
-  text-align: center;
 }
 
 .psdk-top-pad {

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/operator/operator.component.ts

@@ -13,10 +13,11 @@ import { Utils } from '@pega/angular-sdk-components';
 export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() displayLabel;
+  @Input() name$?: string;
+
   fields$: any[] = [];
   bShowPopover$: boolean;
   date$: string;
-  name$: string;
   label$: string;
   id$: string;
   constructor(
@@ -40,7 +41,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnChanges(changes: SimpleChanges): void {
     const { pConn$ } = changes;
-    if (pConn$.previousValue !== pConn$.currentValue) {
+    if (pConn$ && pConn$.previousValue !== pConn$.currentValue) {
       this.updateSelf();
     }
   }
@@ -69,7 +70,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
       this.id$ = configProps$.resolveOperator.userId;
       this.label$ = configProps$.resolveLabel;
     } else {
-      this.name$ = configProps$?.value.userName;
+      this.name$ = this.name$ || configProps$?.value.userName;
       this.id$ = configProps$?.value.userId;
       this.label$ = configProps$.label;
     }

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

@@ -130,6 +130,7 @@ export class CurrencyComponent implements OnInit, OnDestroy {
         nValue = parseFloat(nValue);
       }
       this.value$ = nValue;
+      this.fieldControl.setValue(this.value$);
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
@@ -197,20 +198,25 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    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, '.');
+    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);
     }
-    handleEvent(actionsApi, 'changeNblur', propName, value);
   }
 
   getErrorMessage() {

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

@@ -13,7 +13,6 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           (dateTimeChange)="fieldOnDateChange($event)"
-          [value]="value$"
           [required]="bRequired$"
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>

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

@@ -6,6 +6,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
 import { interval } from 'rxjs';
+import dayjs from 'dayjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -13,6 +14,7 @@ import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-comp
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { format } from '@pega/angular-sdk-components';
+import { DateFormatters } from '@pega/angular-sdk-components';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -68,6 +70,7 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   actionsApi: Object;
   propName: string;
   formattedValue$: any;
+  timezone = PCore.getEnvironmentInfo()?.getTimeZone();
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -88,7 +91,12 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     if (this.formGroup$) {
       // add control to formGroup
       this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
+      let dateTimeValue = this.value$ ?? '';
+
+      if (this.value$) {
+        dateTimeValue = dayjs(DateFormatters?.convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString();
+      }
+      this.fieldControl.setValue(dateTimeValue);
       this.bHasForm$ = true;
     } else {
       this.bReadonly$ = true;
@@ -132,7 +140,11 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     this.testId = this.configProps$.testId;
     this.helperText = this.configProps$.helperText;
     this.value$ = this.configProps$?.value;
-    this.fieldControl.setValue(this.value$);
+    let dateTimeValue = this.configProps$?.value ?? '';
+    if (this.value$) {
+      dateTimeValue = dayjs(DateFormatters?.convertToTimezone(this.value$, { timezone: this.timezone }))?.toISOString();
+    }
+    this.fieldControl.setValue(dateTimeValue);
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -186,7 +198,9 @@ export class DateTimeComponent implements OnInit, OnDestroy {
     // this comes from the date pop up
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
-      event.value = event.value?.toISOString();
+      const dateTime = dayjs(event.value?.toISOString());
+      const timeZoneDateTime = dayjs.tz(dateTime.format('YYYY-MM-DDTHH:mm:ss'), this.timezone);
+      event.value = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }

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

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

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

@@ -4,6 +4,7 @@ import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angul
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
+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';
@@ -65,6 +66,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
   formatter;
   formattedValue: any;
   inputMode: any;
+  suffix = '';
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -136,6 +138,7 @@ export class DecimalComponent implements OnInit, OnDestroy {
         nValue = parseFloat(nValue);
       }
       this.value$ = nValue;
+      this.fieldControl.setValue(this.value$);
     }
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
@@ -185,27 +188,47 @@ export class DecimalComponent implements OnInit, OnDestroy {
     if (this.bReadonly$ && this.formatter === 'Currency') {
       this.currencySymbol = theSymbols.theCurrencySymbol;
     }
+
+    if (this.bReadonly$ && this.formatter === 'Percentage') {
+      this.suffix = '%';
+    }
+
     this.decimalPrecision = this.configProps$?.decimalPrecision ?? 2;
 
     this.componentReference = this.pConn$.getStateProps().value;
+
+    // trigger display of error message with field control
+    if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
+      const timer = interval(100).subscribe(() => {
+        this.fieldControl.setErrors({ message: true });
+        this.fieldControl.markAsTouched();
+
+        timer.unsubscribe();
+      });
+    }
   }
 
   fieldOnBlur(event: any) {
-    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 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);
+    }
   }
 
   getErrorMessage() {