@pega/dx-component-builder-sdk 0.25.7 → 0.25.9

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

@@ -1,54 +1,12 @@
-import { Component, forwardRef } from '@angular/core';
+import { ChangeDetectionStrategy, 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)]
+  changeDetection: ChangeDetectionStrategy.Eager,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  arFields3$: any[] = [];
-
-  propsToUse: 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;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      const pKid = kid.getPConnect();
-      const pKidData = pKid.resolveConfigProps(pKid.getRawMetadata());
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = pKidData.children;
-      } else {
-        this.arFields2$ = pKidData.children;
-      }
-    }
-  }
-}
+export class {{COMPONENT_CLASS_NAME}}Component extends DetailsTemplateBase {}

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

@@ -1,3 +1,40 @@
+const mockField = (componentName: string, config: Record<string, unknown>) => {
+  const configProps = { displayMode: 'DISPLAY_ONLY', ...config };
+  return {
+    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 */
+      }
+    })
+  };
+};
+
+const mockRegion = (name: string, fields: ReturnType<typeof mockField>[]) => ({
+  name,
+  type: 'Region',
+  getPConnect: () => ({
+    getComponentName: () => 'Region',
+    getRawMetadata: () => ({ name, type: 'Region' }),
+    getChildren: () => fields
+  })
+});
+
 export const pyReviewRaw = {
   name: 'pyReview',
   type: 'View',
@@ -56,83 +93,20 @@ export const pyReviewRaw = {
     ]
   },
   children: [
-    {
-      getPConnect: () => {
-        return {
-          resolveConfigProps: () => {
-            return {
-              name: 'A',
-              type: 'Region',
-              children: [
-                {
-                  config: { value: 'John', label: 'First Name' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: 'Doe', label: 'Last Name' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: '+16397975093', label: 'Phone' },
-                  type: 'Phone'
-                },
-                {
-                  config: { value: '100 Mbps', label: 'Internet Plan' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: 'Texas', label: 'State' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: '', label: 'City' },
-                  type: 'TextInput'
-                }
-              ]
-            };
-          },
-          getRawMetadata: () => {
-            return {};
-          }
-        };
-      }
-    },
-    {
-      getPConnect: () => {
-        return {
-          resolveConfigProps: () => {
-            return {
-              name: 'B',
-              type: 'Region',
-              children: [
-                {
-                  config: { value: '', label: 'Middle Name' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: 'john@doe.com', label: 'Email' },
-                  type: 'Email'
-                },
-                {
-                  config: { value: '$90.99', label: 'Price' },
-                  type: 'TextInput'
-                },
-                {
-                  config: { value: false, label: 'Internet Package' },
-                  type: 'Checkbox'
-                },
-                {
-                  config: { value: '2023-12-29', label: 'Service date' },
-                  type: 'Date'
-                }
-              ]
-            };
-          },
-          getRawMetadata: () => {
-            return {};
-          }
-        };
-      }
-    }
+    mockRegion('A', [
+      mockField('TextInput', { value: 'John', label: 'First Name' }),
+      mockField('TextInput', { value: 'Doe', label: 'Last Name' }),
+      mockField('Phone', { value: '+16397975093', label: 'Phone' }),
+      mockField('TextInput', { value: '100 Mbps', label: 'Internet Plan' }),
+      mockField('TextInput', { value: 'Texas', label: 'State' }),
+      mockField('TextInput', { value: '', label: 'City' })
+    ]),
+    mockRegion('B', [
+      mockField('TextInput', { value: '', label: 'Middle Name' }),
+      mockField('Email', { value: 'john@doe.com', label: 'Email' }),
+      mockField('TextInput', { value: '$90.99', label: 'Price' }),
+      mockField('Checkbox', { value: false, label: 'Internet Package' }),
+      mockField('Date', { value: '2023-12-29', label: 'Service date' })
+    ])
   ]
 };

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
+import { provideHttpClient } from '@angular/common/http';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { children } from './mock';
 
@@ -23,11 +24,14 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   decorators: [
     moduleMetadata({
       providers: [{ provide: DatapageService, useClass: MockingDatapageService }]
+    }),
+    applicationConfig({
+      providers: [provideHttpClient()]
     })
   ],
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {
@@ -75,7 +79,9 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
           /* nothing */
         },
         getContextName: () => '',
-        clearErrorMessages: () => {/* nothing */}
+        clearErrorMessages: () => {
+          /* nothing */
+        }
       } as any,
       formGroup$: new FormBuilder().group({})
     }

package/src/tasks/create/templates/SDK-Angular/template/FORM/form.component.html.mustache

@@ -4,7 +4,7 @@
   <div key="instructions" id="instruction-text" [innerHTML]="instructions"></div>
 </div>
 <div [className]="divClass$">
-  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }">
+  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'reference' }">
     <component-mapper
       [name]="kid.getPConnect().getComponentName()"
       [props]="{

package/src/tasks/create/templates/SDK-Angular/template/FORM/form.component.ts.mustache

@@ -1,8 +1,7 @@
-import { Component, OnInit, Input, forwardRef, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, Input, forwardRef, OnChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
 import { FormTemplateBase } from '@pega/angular-sdk-components';
@@ -28,6 +27,7 @@ interface {{COMPONENT_CLASS_NAME}}Props {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBase implements OnInit, OnChanges {
@@ -91,7 +91,7 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBase implemen
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = kids[0].getPConnect().getChildren();
 
     if (areViewsChanged(this.arChildren$, children)) {
       this.arChildren$ = children;

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
+import { applicationConfig, moduleMetadata } from '@storybook/angular';
 import { FormBuilder } from '@angular/forms';
+import { provideHttpClient } from '@angular/common/http';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { children } from './mock';
 
@@ -23,11 +24,14 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   decorators: [
     moduleMetadata({
       providers: [{ provide: DatapageService, useClass: MockingDatapageService }]
+    }),
+    applicationConfig({
+      providers: [provideHttpClient()]
     })
   ],
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.ts.mustache

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
@@ -8,6 +8,7 @@ import { FormTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBase implements OnInit, OnChanges {

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

@@ -7,7 +7,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/template/PAGE/page.component.html.mustache

@@ -7,6 +7,7 @@
   <div *ngFor="let kid of arChildren$">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      <component-mapper *ngSwitchCase="'reference'" name="reference" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <div *ngSwitchDefault><%COMPONENT_CLASS_NAME%> Missing: {{ kid.getPConnect().getComponentName() }}</div>
     </div>

package/src/tasks/create/templates/SDK-Angular/template/PAGE/page.component.ts.mustache

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
@@ -14,6 +14,7 @@ interface {{COMPONENT_CLASS_NAME}}Props {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {

package/src/tasks/create/templates/SDK-Angular/widget/CASE/case.component.ts.mustache

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, ChangeDetectionStrategy, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Utils } from '@pega/angular-sdk-components';
@@ -11,6 +11,7 @@ interface {{COMPONENT_CLASS_NAME}}Props {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [CommonModule, MatTableModule]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
@@ -23,7 +24,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
   displayedColumns$ = Array<any>();
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -54,6 +58,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
       this.waitingForData = false;
+      this.cdRef.markForCheck();
     });
   }
 

package/src/tasks/create/templates/SDK-Angular/widget/CASE/demo.stories.tsx.mustache

@@ -8,11 +8,23 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => {
+  render: args => {
+    window.PCore.getConstants = (): any => {
+      return {
+        CASE_INFO: {
+          CASE_INFO_ID: 'caseInfo.ID',
+          INSTRUCTIONS: ''
+        }
+      };
+    };
     window.PCore.getDataApiUtils = (): any => {
       return {
         getData: () => {
-          return Promise.resolve(historyData);
+          return {
+            then: (callback: any) => {
+              callback(historyData);
+            }
+          };
         }
       };
     };

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/demo.stories.tsx.mustache

@@ -8,7 +8,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => {
+  render: args => {
     window.PCore.getDataApiUtils = (): any => {
       return {
         getData: () => {

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.html.mustache

@@ -5,13 +5,12 @@
   <div>
     <p>{{ configProps$.description }}</p>
     <div>
-      <h3>{{ configProps$.label }}</h3>
       <ul>
         <li *ngFor="let detail of details$">{{ detail }}</li>
       </ul>
     </div>
   </div>
-  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
+  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button [href]="configProps$.whatsnewlink">See what's new</a>
 </article>
 <br />
 <table mat-table [dataSource]="workList">

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.ts.mustache

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, ChangeDetectionStrategy, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -17,6 +17,7 @@ interface {{COMPONENT_CLASS_NAME}}Props {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [CommonModule, MatButtonModule, MatTableModule]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
@@ -30,7 +31,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
   workList: MatTableDataSource<any>;
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -83,6 +87,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
           this.workList = new MatTableDataSource();
           this.waitingForData = false;
         }
+        this.cdRef.markForCheck();
       })
       .catch((error: any) => {
         this.workList = new MatTableDataSource();

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -18,7 +18,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/widget/PAGE-CASE/page-case.component.html.mustache

@@ -4,10 +4,12 @@
   <div class="psdk-label">
     {{ label$ }}
   </div>
-  <div class="psdk-double">
-    <button mat-button color="primary" style="text-decoration: underline" (click)="showOperator()">{{ name$ }}</button>
+  <div class="psdk-operator-details">
+    <div class="psdk-double">
+      <button mat-button color="primary" style="text-decoration: underline" (click)="showOperator()">{{ name$ }}</button>
+    </div>
+    <div>{{ date$ }}</div>
   </div>
-  <div>{{ date$ }}</div>
 </div>
 
 <div>

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.component.ts.mustache

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit, Input, Renderer2, ChangeDetectorRef, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnInit, Input, Renderer2, ChangeDetectorRef, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { Utils } from '@pega/angular-sdk-components';
@@ -7,6 +7,7 @@ import { Utils } from '@pega/angular-sdk-components';
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [CommonModule, MatButtonModule]
 })
 export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges, OnDestroy {
@@ -112,7 +113,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges, OnD
         ];
 
         this.bShowPopover$ = true;
-        this.cdRef.detectChanges();
+        this.cdRef.markForCheck();
       } else {
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${this.id$}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
@@ -144,6 +145,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges, OnD
             value: fillerString
           }
         ];
+        this.cdRef.markForCheck();
       }
     });
   }

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache

@@ -99,7 +99,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           console.log(error);
         });
     }
-  }, [PConnect, countryCode, showTable]);
+  }, [countryCode, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -118,7 +118,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       {{=<% %>=}}
       <div style={{ display: 'flex', alignItems: 'center' }} data-testid={testId}>
         <ArrowForwardIcon />
-        <TextContent displayAs='body' content={localLabel} />
+        <TextContent displayAs='Paragraph' content={localLabel} />
         <Tooltip title={PConnect.getLocalizedValue('Click to show/hide state list', '', '')}>
           <IconButton onClick={showHideTable} style={{ padding: '0 0.25rem' }}>
             <FormatListNumberedIcon />

package/src/tasks/create-all/index.js

@@ -38,6 +38,7 @@ import {
   updateComponentDefaultLibrary
 } from '../../util.js';
 import { COMPONENT_SCHEMA } from '../../constants.js';
+import { getPrettierFormattedString } from '../map/map.js';
 
 const copy = promisify(ncp);
 
@@ -131,7 +132,7 @@ export const compileMustacheTemplates = async (
   const framework = await getFramework();
 
   // allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
-  files.forEach(file => {
+  await Promise.all(files.map(async (file) => {
     const filePath = path.join(componentDirectory, file);
 
     const output = compileMustacheTemplate(filePath, {
@@ -151,24 +152,31 @@ export const compileMustacheTemplates = async (
       IS_BOOLEAN: isBool,
       IS_PHONE: isPhone
     });
-    fs.writeFileSync(filePath, output);
+
+    const formattedOutput = await getPrettierFormattedString(output, filePath.replace(/\.mustache$/, ''));
+
+    fs.writeFileSync(filePath, formattedOutput);
 
     switch (framework) {
       case "SDK-React":
         fs.renameSync(filePath, filePath.replace('.mustache', ''));
         break;
       case "SDK-Angular":
+        {
         let newFilePath = filePath.replace('.mustache', '');
         const typeAng = convertIntoKebabCase(convertIntoPascalCase(fileSubType)).concat(".component");
         newFilePath = newFilePath.replace(typeAng, componentKeyKebab.concat(".component"));
 
         fs.renameSync(filePath, newFilePath);
+        }
         break;
       case "SDK-WebComponents":
         fs.renameSync(filePath, filePath.replace('.mustache', ''));
         break;
+      default:
+          break;
     }
-  });
+  }));
 };
 
 
@@ -422,6 +430,13 @@ export const validateCompile = async (
 export default async options => {
   showVersion();
 
+  console.log(
+    chalk.red(
+      'Custom-constellation are aligned with Pega constellation which is still on react 18.\n' +
+      'Please make sure any changes to custom-constellation should be aligned with React 18 development.'
+    )
+  );
+
   await checkPathAccess(pegaConfigJsonPath);
 
   let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });

package/src/tasks/map/map.js

@@ -38,17 +38,23 @@ const pegaLocalReactComponentMapPath = path.join(path.resolve(), SDK_LOCAL_REACT
 const pegaLocalAngularComponentMapPath = path.join(path.resolve(),  SDK_LOCAL_ANGULAR_COMPONENT_MAP_FILENAME);
 const prettierConfigJsonPath = path.join(path.resolve(), PRETTIER_CONFIG_FILENAME);
 
-export const getPrettierFormattedString = async (content) => {
+export const getPrettierFormattedString = async (content, filepath) => {
   const options = await prettier.resolveConfig(prettierConfigJsonPath);
 
   // format the contents
   if (options) {
-    options.parser = 'babel';
-    return  prettier.format(content, options);
-  }
-  else {
-    return content;
+    let parser = 'babel';
+    if (filepath) {
+      const { inferredParser } = await prettier.getFileInfo(filepath);
+      if (!inferredParser) return content;
+      parser = inferredParser;
+    }
+
+    const formatOptions = { ...options, parser };
+    return prettier.format(content, formatOptions);
   }
+  
+  return content;
 }
 
 //

package/src/tasks/override/index.js

@@ -6,7 +6,7 @@ import { join } from 'path';
 import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
-import { updateComponentMap  } from '../map/map.js';
+import { getPrettierFormattedString, updateComponentMap  } from '../map/map.js';
 
 import {
   checkPathAccess,
@@ -65,8 +65,10 @@ const checkAndCreateConfigComponentKey = async (targetDirectory) => {
       // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
       const configContent = JSON.stringify(configObj, null, 4);
 
+      const configContentFormatted = await getPrettierFormattedString(configContent);
+
       // update file
-      fs.writeFileSync(configFile, configContent, { encoding: 'utf8' });
+      fs.writeFileSync(configFile, configContentFormatted, { encoding: 'utf8' });
     }
 
   }