@pega/dx-component-builder-sdk 0.242.9 → 0.242.11

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

@@ -4,11 +4,11 @@ import { FormGroup } from '@angular/forms';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
+import { FormTemplateBaseComponent } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
-  template: string;
   instructions: string;
 }
 
@@ -19,37 +19,21 @@ interface PegaDxilMyFormProps {
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class PegaDxilMyFormComponent implements OnInit {
-  @Input() pConn$: typeof PConnect;
+export class PegaDxilMyFormComponent extends FormTemplateBaseComponent implements OnInit {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
   divClass$: string;
-  template: any;
-  showLabel: any;
-  label: any;
   instructions: string;
 
-  NO_HEADER_TEMPLATES = [
-    'SubTabs',
-    'SimpleTable',
-    'Details',
-    'DetailsTwoColumn',
-    'DetailsThreeColumn',
-    'NarrowWideDetails',
-    'WideNarrowDetails',
-    'Confirmation'
-  ];
-
-  constructor(private templateUtils: TemplateUtils) {}
+  constructor(private templateUtils: TemplateUtils) {
+    super();
+  }
 
   ngOnInit(): void {
     const configProps = this.pConn$.getConfigProps() as PegaDxilMyFormProps;
-    this.template = configProps?.template;
-    const propToUse: any = { ...this.pConn$.getInheritedProps() };
-    this.showLabel = propToUse?.showLabel;
-    this.label = propToUse?.label;
-    const kids = this.pConn$.getChildren() as any[];
+    const kids = this.pConn$.getChildren();
     this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
 
     const numCols = configProps.NumCols ? configProps.NumCols : '1';

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

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

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

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

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

@@ -34,7 +34,7 @@ export class PegaDxilMyPageComponent implements OnInit, OnDestroy {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PegaDxilMyPageProps;
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.title$ = this.configProps$.title;
     const operator = this.configProps$.operator;

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

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

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

@@ -1,60 +1,60 @@
 /* eslint-disable no-useless-return */
 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: [
     {
@@ -62,41 +62,40 @@ export const pyReviewRaw = {
         return {
           resolveConfigProps: () => {
             return {
-              name: "A",
-              type: "Region",
+              name: 'A',
+              type: 'Region',
               children: [
                 {
-                  config: {value: 'John', label: 'First Name'},
-                  type: "TextInput"
+                  config: { value: 'John', label: 'First Name' },
+                  type: 'TextInput'
                 },
                 {
-                  config: {value: 'Doe', label: 'Last Name'},
-                  type: "TextInput"
+                  config: { value: 'Doe', label: 'Last Name' },
+                  type: 'TextInput'
                 },
                 {
-                  config: {value: '+16397975093', label: 'Phone'},
-                  type: "Phone"
+                  config: { value: '+16397975093', label: 'Phone' },
+                  type: 'Phone'
                 },
                 {
-                  config: {value: '100 Mbps', label: 'Internet Plan'},
-                  type: "TextInput"
+                  config: { value: '100 Mbps', label: 'Internet Plan' },
+                  type: 'TextInput'
                 },
                 {
-                  config: {value: 'Texas', label: 'State'},
-                  type: "TextInput"
+                  config: { value: 'Texas', label: 'State' },
+                  type: 'TextInput'
                 },
                 {
-                  config: {value: '', label: 'City'},
-                  type: "TextInput"
+                  config: { value: '', label: 'City' },
+                  type: 'TextInput'
                 }
               ]
-            }
-
+            };
           },
           getRawMetadata: () => {
             return {};
           }
-        }
+        };
       }
     },
     {
@@ -104,38 +103,37 @@ export const pyReviewRaw = {
         return {
           resolveConfigProps: () => {
             return {
-              name: "B",
-              type: "Region",
+              name: 'B',
+              type: 'Region',
               children: [
                 {
-                  config: {value: '', label: 'Middle Name'},
-                  type: "TextInput"
+                  config: { value: '', label: 'Middle Name' },
+                  type: 'TextInput'
                 },
                 {
-                  config: {value: 'john@doe.com', label: 'Email'},
-                  type: "Email"
+                  config: { value: 'john@doe.com', label: 'Email' },
+                  type: 'Email'
                 },
                 {
-                  config: {value: '$90.99', label: 'Price'},
-                  type: "TextInput"
+                  config: { value: '$90.99', label: 'Price' },
+                  type: 'TextInput'
                 },
                 {
-                  config: {value: false, label: 'Internet Package'},
-                  type: "Checkbox"
+                  config: { value: false, label: 'Internet Package' },
+                  type: 'Checkbox'
                 },
                 {
-                  config: {value: '2023-12-29', label: 'Service date'},
-                  type: "Date"
+                  config: { value: '2023-12-29', label: 'Service date' },
+                  type: 'Date'
                 }
               ]
-            }
-
+            };
           },
           getRawMetadata: () => {
             return {};
           }
-        }
+        };
       }
     }
-  ],
-}
+  ]
+};

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

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

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

@@ -57,7 +57,7 @@ export class PegaDxilMyTwoColumnDetailsComponent implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps((this.pConn$.getRawMetadata() as any).config);
+    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 
     if (this.showHighlightedData) {
@@ -74,7 +74,7 @@ export class PegaDxilMyTwoColumnDetailsComponent implements OnInit, OnDestroy {
       });
     }
 
-    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     this.pConn$.setInheritedProp('readOnly', true);
 
     const kids = this.pConn$.getChildren() as any[];

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

@@ -40,38 +40,39 @@ const meta: Meta<PegaDxilMyTwoColumnFormComponent> = {
     props: {
       ...args,
       pConn$: {
-      getChildren: () => {
-        return children;
-      },
-      resolveConfigProps: () => {},
-      getValue: () => {
-        /* nothing */
-      },
-      getCurrentView: () => {
-        /* nothing */
-      },
-      getCurrentClassID: () => {
-        /* nothing */
-      },
-      isEditable: () => true,
-      setAction: () => {},
-      getActions: () => {
-        return {
-          onChange: () => {},
-          onBlur: () => {}
-        };
-      },
-      populateAdditionalProps: () => {},
-      getConfigProps: () => {
-        return {
-          NumCols: '1'
-        };
-      },
-      getInheritedProps: () => {
-        /* nothing */
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        getChildren: () => {
+          return children;
+        },
+        resolveConfigProps: () => {},
+        getValue: () => {
+          /* nothing */
+        },
+        getCurrentView: () => {
+          /* nothing */
+        },
+        getCurrentClassID: () => {
+          /* nothing */
+        },
+        isEditable: () => true,
+        setAction: () => {},
+        getActions: () => {
+          return {
+            onChange: () => {},
+            onBlur: () => {}
+          };
+        },
+        populateAdditionalProps: () => {},
+        getConfigProps: () => {
+          return {
+            NumCols: '1'
+          };
+        },
+        getInheritedProps: () => {
+          /* nothing */
+        },
+        getContextName: () => ''
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };
@@ -80,7 +81,5 @@ export default meta;
 type Story = StoryObj<PegaDxilMyTwoColumnFormComponent>;
 
 export const PegaDxilMyTwoColumnForm: Story = {
-  args: {
-
-  }
+  args: {}
 };

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

@@ -231,7 +231,7 @@ export const child2 = [
             readOnly: false,
             placeholder: 'Phone',
             value: '2015550123',
-            label: '',
+            label: 'Phone Number',
             hasSuggestions: false
           };
         },

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 0rem;
+  padding: 0rem 1.5rem;
   height: 100%;
 }
 

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

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

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

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBaseComponent } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-pega-dxil-my-two-column-form',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class PegaDxilMyTwoColumnFormComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class PegaDxilMyTwoColumnFormComponent extends FormTemplateBaseComponent implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class PegaDxilMyTwoColumnFormComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-case-widget/config.json

@@ -11,13 +11,13 @@
   "subtype": "CASE",
   "icon": "OneColumnPage.svg",
   "properties": [
-   {
+    {
       "name": "label",
       "label": "Label value",
       "format": "TEXT"
     }
   ],
   "defaultConfig": {
-     "label": "@L My Case Widget"
+    "label": "@L My Case Widget"
   }
 }

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

@@ -33,18 +33,18 @@ const meta: Meta<PegaDxilMyCaseWidgetComponent> = {
           getConfigProps: () => {
             return configProps;
           },
-          getValue: (value) => {
+          getValue: value => {
             return value;
           },
           getContextName: () => {
             return 'app/primary_1';
           },
-          getLocalizedValue: (value) => {
+          getLocalizedValue: value => {
             return value;
           }
         } as any
       }
-    }
+    };
   }
 };
 

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

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