@pega/dx-component-builder-sdk 24.2.10 → 24.2.12

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

@@ -38,6 +38,7 @@ export class PegaDxilMyTextComponent implements OnInit, OnDestroy {
   bHideLabel$ = false;
   testId = '';
   helperText: string;
+  displayMode$?: string = '';
 
   controlName$: string;
   bHasForm$ = true;
@@ -100,15 +101,18 @@ export class PegaDxilMyTextComponent implements OnInit, OnDestroy {
 
   // updateSelf
   updateSelf(): void {
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PegaDxilMyTextProps;
 
-    this.value$ = this.configProps$.value || '';
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    this.displayMode$ = this.configProps$.displayMode;
 
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);

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

@@ -9,19 +9,30 @@ const meta: Meta<PegaDxilMyTextInputComponent> = {
   title: 'PegaDxilMyTextInput',
   component: PegaDxilMyTextInputComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyTextInputComponent) => ({
+  render: (args) => ({
     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-text-input/pega-dxil-my-text-input.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-text-input/pega-dxil-my-text-input.component.spec.ts

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

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

@@ -8,6 +8,7 @@ import { AngularPConnectService, AngularPConnectData } 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 PegaDxilMyTextInputProps extends PConnFieldProps {
   // If any, enter additional props that only exist on TextInput here
@@ -15,7 +16,7 @@ interface PegaDxilMyTextInputProps extends PConnFieldProps {
 }
 
 @Component({
- selector: 'app-pega-dxil-my-text-input',
+  selector: 'app-pega-dxil-my-text-input',
   templateUrl: './pega-dxil-my-text-input.component.html',
   styleUrls: ['./pega-dxil-my-text-input.component.scss'],
   standalone: true,
@@ -44,6 +45,8 @@ export class PegaDxilMyTextInputComponent implements OnInit, OnDestroy {
   placeholder: string;
 
   fieldControl = new FormControl('', null);
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -113,7 +116,10 @@ export class PegaDxilMyTextInputComponent implements OnInit, OnDestroy {
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
+
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
 
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
@@ -155,13 +161,15 @@ export class PegaDxilMyTextInputComponent 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/field/pega-dxil-my-time-of-day/demo.stories.tsx

@@ -9,19 +9,30 @@ const meta: Meta<PegaDxilMyTimeOfDayComponent> = {
   title: 'PegaDxilMyTimeOfDay',
   component: PegaDxilMyTimeOfDayComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyTimeOfDayComponent) => ({
+  render: (args) => ({
     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-time-of-day/pega-dxil-my-time-of-day.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">
@@ -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-time-of-day/pega-dxil-my-time-of-day.component.spec.ts

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

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

@@ -9,19 +9,30 @@ const meta: Meta<PegaDxilMyUrlComponent> = {
   title: 'PegaDxilMyUrl',
   component: PegaDxilMyUrlComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyUrlComponent) => ({
+  render: (args) => ({
     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

@@ -8,34 +8,35 @@ const meta: Meta<PegaDxilMyDetailsComponent> = {
   title: 'PegaDxilMyDetails',
   component: PegaDxilMyDetailsComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyDetailsComponent) => ({
+  render: (args) => ({
     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
     }
   })
 };