@pega/dx-component-builder-sdk 24.1.12 → 24.2.11

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

@@ -8,6 +8,8 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyTimeOfDayProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Time here
@@ -43,6 +45,9 @@ export class PegaDxilMyTimeOfDayComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
+  formattedValue$: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -111,6 +116,9 @@ export class PegaDxilMyTimeOfDayComponent implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -119,6 +127,12 @@ export class PegaDxilMyTimeOfDayComponent implements OnInit, OnDestroy {
       this.cdRef.detectChanges();
     });
 
+    if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
+      this.formattedValue$ = format(this.value$, 'timeonly', {
+        format: 'hh:mm A'
+      });
+    }
+
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
@@ -138,7 +152,7 @@ export class PegaDxilMyTimeOfDayComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -151,15 +165,15 @@ export class PegaDxilMyTimeOfDayComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    event.value = event.target.value;
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    event.value = event.target.value;
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

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

@@ -13,15 +13,26 @@ const meta: Meta<PegaDxilMyUrlComponent> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };

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

@@ -14,7 +14,7 @@
           [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
+          (change)="fieldOnChange()"
           (blur)="fieldOnBlur($event)"
         />
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>

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

@@ -1,4 +1,3 @@
-
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { PegaDxilMyUrlComponent } from './pega-dxil-my-url.component';
@@ -9,9 +8,8 @@ describe('PegaDxilMyUrlComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyUrlComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyUrlComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyUrlProps extends PConnFieldProps {
   // If any, enter additional props that only exist on URL here
@@ -43,6 +44,8 @@ export class PegaDxilMyUrlComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,6 +116,9 @@ export class PegaDxilMyUrlComponent implements OnInit, OnDestroy {
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {
       if (this.configProps$.required != null) {
@@ -140,7 +146,7 @@ export class PegaDxilMyUrlComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
 
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
@@ -153,13 +159,15 @@ export class PegaDxilMyUrlComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
+  fieldOnChange() {
+    this.pConn$.clearErrorMessages({
+      property: this.propName
+    });
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const value = event?.target?.value;
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }
 
   getErrorMessage() {

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

@@ -12,30 +12,31 @@ const meta: Meta<PegaDxilMyDetailsComponent> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: (props) => props,
-      getRawMetadata: () => {
-        return pyReviewRaw.config;
-      },
-      getChildren: () => {
-        return pyReviewRaw.children;
-      },
-      isEditable: () => true,
-      setAction: () => {
-        /* nothing */
-      },
-      getActions: () => {
-        return {
-          onChange: () => {},
-          onBlur: () => {}
-        };
-      },
-      populateAdditionalProps: () => {
-        /* nothing */
-      },
-      getConfigProps: () => {
-        /* nothing */
-      }
-    } as any
+        resolveConfigProps: props => props,
+        getRawMetadata: () => {
+          return pyReviewRaw.config;
+        },
+        getChildren: () => {
+          return pyReviewRaw.children;
+        },
+        isEditable: () => true,
+        setAction: () => {
+          /* nothing */
+        },
+        getActions: () => {
+          return {
+            onChange: () => {},
+            onBlur: () => {}
+          };
+        },
+        populateAdditionalProps: () => {
+          /* nothing */
+        },
+        getConfigProps: () => {
+          /* nothing */
+        },
+        getContextName: () => ''
+      } as any
     }
   })
 };

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

@@ -1,64 +1,64 @@
 export const pyReviewRaw = {
-  name: "pyReview",
-  type: "View",
+  name: 'pyReview',
+  type: 'View',
   config: {
-    template: "Details",
-    ruleClass: "MyCo-MyCompon-Work-MyComponents",
+    template: 'Details',
+    ruleClass: 'MyCo-MyCompon-Work-MyComponents',
     showLabel: true,
-    label: "@L Details",
-    localeReference: "@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW",
+    label: '@L Details',
+    localeReference: '@LR MYCO-MYCOMPON-WORK-MYCOMPONENTS!VIEW!PYREVIEW',
     showHighlightedData: true,
     highlightedData: [
       {
-        type: "TextInput",
+        type: 'TextInput',
         config: {
-          value: "@P .pyStatusWork",
-          label: "@L Work Status",
-          displayMode: "STACKED_LARGE_VAL",
-          displayAsStatus: true,
-        },
+          value: '@P .pyStatusWork',
+          label: '@L Work Status',
+          displayMode: 'STACKED_LARGE_VAL',
+          displayAsStatus: true
+        }
       },
       {
-        type: "TextInput",
+        type: 'TextInput',
         config: {
-          value: "@P .pyID",
-          label: "@L Case ID",
-          displayMode: "STACKED_LARGE_VAL",
-        },
+          value: '@P .pyID',
+          label: '@L Case ID',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
       },
       {
-        type: "DateTime",
+        type: 'DateTime',
         config: {
-          value: "@P .pxCreateDateTime",
-          label: "@L Create date/time",
-          displayMode: "STACKED_LARGE_VAL",
-        },
+          value: '@P .pxCreateDateTime',
+          label: '@L Create date/time',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
       },
       {
-        type: "UserReference",
+        type: 'UserReference',
         config: {
-          label: "@L Create Operator",
-          value: "@USER .pxCreateOperator",
-          placeholder: "Select...",
-          displayMode: "STACKED_LARGE_VAL",
-        },
-      },
+          label: '@L Create Operator',
+          value: '@USER .pxCreateOperator',
+          placeholder: 'Select...',
+          displayMode: 'STACKED_LARGE_VAL'
+        }
+      }
     ],
     inheritedProps: [
       {
-        prop: "label",
-        value: "@L Details",
+        prop: 'label',
+        value: '@L Details'
       },
       {
-        prop: "showLabel",
-        value: true,
-      },
-    ],
+        prop: 'showLabel',
+        value: true
+      }
+    ]
   },
   children: [
     {
-      name: "A",
-      type: "Region",
+      name: 'A',
+      type: 'Region',
       getPConnect: () => {
         return {
           getChildren: () => {
@@ -67,136 +67,136 @@ export const pyReviewRaw = {
                 getPConnect: () => {
                   return {
                     getComponentName: () => {
-                      return 'TextInput'
+                      return 'TextInput';
                     },
                     getConfigProps: () => {
                       return {
                         readOnly: undefined,
-                        placeholder: "First Name",
-                        value: "John",
-                        label: "First Name",
+                        placeholder: 'First Name',
+                        value: 'John',
+                        label: 'First Name',
                         hasSuggestions: false,
-                        displayMode: "LABELS_LEFT"
-                      }
+                        displayMode: 'DISPLAY_ONLY'
+                      };
                     }
-                  }
+                  };
                 }
               },
               {
                 getPConnect: () => {
                   return {
                     getComponentName: () => {
-                      return 'TextInput'
+                      return 'TextInput';
                     },
                     getConfigProps: () => {
                       return {
                         readOnly: undefined,
-                        placeholder: "Middle Name",
-                        value: "",
-                        label: "Middle Name",
+                        placeholder: 'Middle Name',
+                        value: '',
+                        label: 'Middle Name',
                         hasSuggestions: false,
-                        displayMode: "LABELS_LEFT"
-                      }
+                        displayMode: 'DISPLAY_ONLY'
+                      };
                     }
-                  }
+                  };
                 }
               },
               {
                 getPConnect: () => {
                   return {
                     getComponentName: () => {
-                      return 'TextInput'
+                      return 'TextInput';
                     },
                     getConfigProps: () => {
                       return {
                         readOnly: undefined,
-                        placeholder: "Last Name",
-                        value: "Doe",
-                        label: "Last Name",
+                        placeholder: 'Last Name',
+                        value: 'Doe',
+                        label: 'Last Name',
                         hasSuggestions: false,
-                        displayMode: "LABELS_LEFT"
-                      }
+                        displayMode: 'DISPLAY_ONLY'
+                      };
                     }
-                  }
+                  };
                 }
               },
               {
                 getPConnect: () => {
                   return {
                     getComponentName: () => {
-                      return 'Email'
+                      return 'Email';
                     },
                     getConfigProps: () => {
                       return {
-                        value: "john@doe.com",
-                        label: "Email",
+                        value: 'john@doe.com',
+                        label: 'Email',
                         required: true,
-                        testId: "CE8AE9DA5B7CD6C3DF2929543A9AF92D",
+                        testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
                         hasSuggestions: false,
-                        displayMode: "LABELS_LEFT",
-                      }
+                        displayMode: 'DISPLAY_ONLY'
+                      };
                     }
-                  }
+                  };
                 }
               },
               {
                 getPConnect: () => {
                   return {
                     getComponentName: () => {
-                      return 'phone'
+                      return 'phone';
                     },
                     getConfigProps: () => {
                       return {
                         readOnly: undefined,
-                        value: "+16397975093",
-                        label: "Phone",
-                        displayMode: "LABELS_LEFT",
-                        hasSuggestions: false,
-                      }
+                        value: '+16397975093',
+                        label: 'Phone',
+                        displayMode: 'DISPLAY_ONLY',
+                        hasSuggestions: false
+                      };
                     }
-                  }
+                  };
                 }
               },
               {
                 getPConnect: () => {
                   return {
                     getComponentName: () => {
-                      return 'currency'
+                      return 'currency';
                     },
                     getConfigProps: () => {
                       return {
                         readOnly: undefined,
-                        value: "90.99",
-                        label: "Price",
-                        displayMode: "LABELS_LEFT",
-                        hasSuggestions: false,
-                      }
+                        value: '90.99',
+                        label: 'Price',
+                        displayMode: 'DISPLAY_ONLY',
+                        hasSuggestions: false
+                      };
                     }
-                  }
+                  };
                 }
               },
               {
                 getPConnect: () => {
                   return {
                     getComponentName: () => {
-                      return 'radio'
+                      return 'radio';
                     },
                     getConfigProps: () => {
                       return {
                         readOnly: undefined,
-                        value: "1000 Mbps",
-                        label: "Internet Plan",
-                        displayMode: "LABELS_LEFT",
-                        hasSuggestions: false,
-                      }
+                        value: '1000 Mbps',
+                        label: 'Internet Plan',
+                        displayMode: 'DISPLAY_ONLY',
+                        hasSuggestions: false
+                      };
                     }
-                  }
+                  };
                 }
-              },
+              }
             ];
-          },
+          }
         };
-      },
-    },
-  ],
-}
+      }
+    }
+  ]
+};

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-details/pega-dxil-my-details.component.spec.ts

@@ -8,9 +8,8 @@ describe('PegaDxilMyDetailsComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyDetailsComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyDetailsComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -1,5 +1,5 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService, ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
+import { ComponentMapperComponent, DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-pega-dxil-my-details',
@@ -8,49 +8,15 @@ import { AngularPConnectData, AngularPConnectService, ComponentMapperComponent }
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class PegaDxilMyDetailsComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
+export class PegaDxilMyDetailsComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   highlightedDataArr: any[] = [];
   showHighlightedData: boolean;
   arFields$: any[] = [];
 
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    this.checkAndUpdate();
-  }
-
-  ngOnDestroy() {
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  onStateChange() {
-    this.checkAndUpdate();
-  }
-
-  checkAndUpdate() {
-    // Should always check the bridge to see if the component should
-    // update itself (re-render)
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-
-    // ONLY call updateSelf when the component should update
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
-
-  updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps((this.pConn$.getRawMetadata() as any).config);
+  override updateSelf() {
+    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {
@@ -78,7 +44,7 @@ export class PegaDxilMyDetailsComponent implements OnInit, OnDestroy {
         if (theCompType === 'reference' || theCompType === 'group') {
           const configProps = thePConn.getConfigProps();
           configProps.readOnly = true;
-          configProps.displayMode = 'LABELS_LEFT';
+          configProps.displayMode = 'DISPLAY_ONLY';
           const propToUse = { ...thePConn.getInheritedProps() };
           configProps.label = propToUse?.label;
           const options = {