@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/text.component.html.mustache

@@ -6,7 +6,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -19,6 +19,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/text.component.ts.mustache

@@ -3,7 +3,9 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -17,7 +19,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/demo.stories.tsx.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.html.mustache

@@ -7,7 +7,7 @@
   <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$">
       <div *ngIf="bVisible$">
-        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
           <mat-label>{{ label$ }}</mat-label>
           <textarea
             matInput
@@ -23,6 +23,7 @@
             (change)="fieldOnChange($event)"
             (blur)="fieldOnBlur($event)"
           ></textarea>
+          <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
         </mat-form-field>
       </div>

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.ts.mustache

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -18,7 +19,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;

package/src/tasks/create/templates/SDK-Angular/field/Text-Phone/demo.stories.tsx.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Text-Phone/text-phone.component.html.mustache

@@ -4,26 +4,25 @@
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
 <ng-template #noDisplayMode>
-  <div *ngIf="bHasForm$; else noEdit">
-    <div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
-        <mat-tel-input
-          [attr.data-test-id]="testId"
-          [formControl]="fieldControl"
-          [preferredCountries]="preferredCountries"
-          [enablePlaceholder]="true"
-          [enableSearch]="true"
-          [placeholder]="placeholder"
-          [required]="bRequired$"
-          [disabled]="bDisabled$ || bReadonly$"
-          (change)="fieldOnChange()"
-          (blur)="fieldOnBlur()"
-        >
-        </mat-tel-input>
-        <mat-label>{{ label$ }}</mat-label>
-        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
-      </mat-form-field>
-    </div>
+  <div *ngIf="bHasForm$ && bVisible$; else noEdit">
+    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" floatLabel="always">
+      <mat-tel-input
+        [attr.data-test-id]="testId"
+        [formControl]="fieldControl"
+        [preferredCountries]="preferredCountries"
+        [enablePlaceholder]="true"
+        [enableSearch]="true"
+        [placeholder]="placeholder"
+        [required]="bRequired$"
+        [disabled]="bDisabled$ || bReadonly$"
+        (change)="fieldOnChange()"
+        (blur)="fieldOnBlur()"
+      >
+      </mat-tel-input>
+      <mat-label>{{ label$ }}</mat-label>
+      <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
+      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+    </mat-form-field>
   </div>
 </ng-template>
 <%={{ }}=%>     {{! revert delimiters for mustache }}

package/src/tasks/create/templates/SDK-Angular/field/Text-Phone/text-phone.component.ts.mustache

@@ -6,6 +6,7 @@ import { MatTelInput } from 'mat-tel-input';
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -18,7 +19,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;
@@ -54,8 +55,7 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
     const isValueChanged = newVal?.toString() !== oldVal.toString();
 
     if (isValueChanged) {
-      const value = this.formGroup$.controls[this.controlName$].value;
-      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, newVal);
     }
   }
 

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/demo.stories.tsx.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.html.mustache

@@ -6,7 +6,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -19,6 +19,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.ts.mustache

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -17,7 +18,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/demo.stories.tsx.mustache

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

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.html.mustache

@@ -6,7 +6,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -19,6 +19,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.ts.mustache

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { format } from '@pega/angular-sdk-components';
@@ -18,7 +19,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/demo.stories.tsx.mustache

@@ -8,11 +8,15 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {
-        resolveConfigProps: props => props,
+        resolveConfigProps: () => ({
+          label: 'Details',
+          showLabel: true,
+          showHighlightedData: false
+        }),
         getRawMetadata: () => {
           return pyReviewRaw.config;
         },
@@ -32,7 +36,9 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         populateAdditionalProps: () => {
           /* nothing */
         },
-        getConfigProps: () => {
+        getConfigProps: () => pyReviewRaw.config,
+        getInheritedProps: () => ({}),
+        setInheritedProp: () => {
           /* nothing */
         },
         getContextName: () => ''

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.html.mustache

@@ -1,3 +1,23 @@
-<div>
-  <component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
-</div>
+<component-mapper
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
+></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-1">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.scss.mustache

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.ts.mustache

@@ -1,78 +1,11 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent, DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-  arFields$: any[] = [];
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      this.arFields$ = [];
-      const pKid = kid.getPConnect();
-      const fields = pKid.getChildren();
-      fields?.forEach(field => {
-        const thePConn = field.getPConnect();
-        const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference' || theCompType === 'group') {
-          const configProps = thePConn.getConfigProps();
-          configProps.readOnly = true;
-          configProps.displayMode = 'DISPLAY_ONLY';
-          const propToUse = { ...thePConn.getInheritedProps() };
-          configProps.label = propToUse?.label;
-          const options = {
-            context: thePConn.getContextName(),
-            pageReference: thePConn.getPageReference(),
-            referenceList: thePConn.getReferenceList()
-          };
-          const viewContConfig = {
-            meta: {
-              ...thePConn.getMetadata(),
-              type: theCompType,
-              config: configProps
-            },
-            options
-          };
-          const theViewCont = PCore.createPConnect(viewContConfig);
-          const data = {
-            type: theCompType,
-            pConn: theViewCont?.getPConnect()
-          };
-          this.arFields$.push(data);
-        } else {
-          const data = {
-            type: theCompType,
-            config: thePConn.getConfigProps()
-          };
-          this.arFields$.push(data);
-        }
-      });
-    }
-  }
-}
+export class {{COMPONENT_CLASS_NAME}}Component extends DetailsTemplateBase {}

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/mock.ts.mustache

@@ -1,3 +1,27 @@
+const mockField = (componentName: string, configProps: Record<string, unknown>) => ({
+  getPConnect: () => ({
+    getComponentName: () => componentName,
+    getConfigProps: () => configProps,
+    resolveConfigProps: () => configProps,
+    getStateProps: () => ({ value: '' }),
+    getDataObject: () => ({}),
+    getCaseInfo: () => ({ getClassName: () => 'MyCo-MyCompon-Work-MyComponents' }),
+    getLocalizedValue: (value: string) => value,
+    getLocaleRuleNameFromKeys: () => '',
+    getActionsApi: () => ({
+      updateFieldValue: () => {
+        /* nothing */
+      },
+      triggerFieldChange: () => {
+        /* nothing */
+      }
+    }),
+    clearErrorMessages: () => {
+      /* nothing */
+    }
+  })
+});
+
 export const pyReviewRaw = {
   name: 'pyReview',
   type: 'View',
@@ -61,140 +85,67 @@ export const pyReviewRaw = {
       type: 'Region',
       getPConnect: () => {
         return {
-          getChildren: () => {
-            return [
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'TextInput';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        placeholder: 'First Name',
-                        value: 'John',
-                        label: 'First Name',
-                        hasSuggestions: false,
-                        displayMode: 'DISPLAY_ONLY'
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'TextInput';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        placeholder: 'Middle Name',
-                        value: '',
-                        label: 'Middle Name',
-                        hasSuggestions: false,
-                        displayMode: 'DISPLAY_ONLY'
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'TextInput';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        placeholder: 'Last Name',
-                        value: 'Doe',
-                        label: 'Last Name',
-                        hasSuggestions: false,
-                        displayMode: 'DISPLAY_ONLY'
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'Email';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        value: 'john@doe.com',
-                        label: 'Email',
-                        required: true,
-                        testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
-                        hasSuggestions: false,
-                        displayMode: 'DISPLAY_ONLY'
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'phone';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        value: '+16397975093',
-                        label: 'Phone',
-                        displayMode: 'DISPLAY_ONLY',
-                        hasSuggestions: false
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'currency';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        value: '90.99',
-                        label: 'Price',
-                        displayMode: 'DISPLAY_ONLY',
-                        hasSuggestions: false
-                      };
-                    }
-                  };
-                }
-              },
-              {
-                getPConnect: () => {
-                  return {
-                    getComponentName: () => {
-                      return 'radio';
-                    },
-                    getConfigProps: () => {
-                      return {
-                        readOnly: undefined,
-                        value: '1000 Mbps',
-                        label: 'Internet Plan',
-                        displayMode: 'DISPLAY_ONLY',
-                        hasSuggestions: false
-                      };
-                    }
-                  };
-                }
-              }
-            ];
-          }
+          getComponentName: () => 'Region',
+          getChildren: () => [
+            mockField('TextInput', {
+              readOnly: undefined,
+              placeholder: 'First Name',
+              value: 'John',
+              label: 'First Name',
+              hasSuggestions: false,
+              displayMode: 'DISPLAY_ONLY'
+            }),
+            mockField('TextInput', {
+              readOnly: undefined,
+              placeholder: 'Middle Name',
+              value: '',
+              label: 'Middle Name',
+              hasSuggestions: false,
+              displayMode: 'DISPLAY_ONLY'
+            }),
+            mockField('TextInput', {
+              readOnly: undefined,
+              placeholder: 'Last Name',
+              value: 'Doe',
+              label: 'Last Name',
+              hasSuggestions: false,
+              displayMode: 'DISPLAY_ONLY'
+            }),
+            mockField('Email', {
+              value: 'john@doe.com',
+              label: 'Email',
+              required: true,
+              testId: 'CE8AE9DA5B7CD6C3DF2929543A9AF92D',
+              hasSuggestions: false,
+              displayMode: 'DISPLAY_ONLY'
+            }),
+            mockField('Phone', {
+              readOnly: undefined,
+              value: '+16397975093',
+              label: 'Phone',
+              displayMode: 'DISPLAY_ONLY',
+              hasSuggestions: false
+            }),
+            mockField('Currency', {
+              readOnly: undefined,
+              value: '90.99',
+              label: 'Price',
+              displayMode: 'DISPLAY_ONLY',
+              hasSuggestions: false
+            }),
+            mockField('RadioButtons', {
+              readOnly: undefined,
+              value: '1000 Mbps',
+              label: 'Internet Plan',
+              listType: 'associated',
+              datasource: [
+                { key: '100 Mbps', value: '100 Mbps' },
+                { key: '1000 Mbps', value: '1000 Mbps' }
+              ],
+              displayMode: 'DISPLAY_ONLY',
+              hasSuggestions: false
+            })
+          ]
         };
       }
     }