npm - @pega/dx-component-builder-sdk - Versions diffs - 24.2.10 → 24.2.11 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (470) hide show

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

@@ -40,38 +40,39 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
     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<{{COMPONENT_CLASS_NAME}}Component>;
 export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-  }
+  args: {}
 };

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

@@ -11,7 +11,7 @@
 .psdk-two-column-column {
   width: 50%;
   float: left;
-  padding: 0rem 0rem;
+  padding: 0rem 1.5rem;
   height: 100%;
 }

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

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

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

@@ -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 { FormTemplateBase } from '@pega/angular-sdk-components';
 @Component({
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class {{COMPONENT_CLASS_NAME}}Component extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges {
   }
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/src/tasks/create/templates/SDK-Angular/template/FORM-region/mock.ts.mustache CHANGED Viewed

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

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

@@ -7,41 +7,54 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args: {{COMPONENT_CLASS_NAME}}Component) => ({
-    props: {
-      ...args,
-      pConn$: {
-      getChildren: () => {
-        return [
-          {
-            getPConnect: () => {
-              return {
-                getComponentName: () => {
-                  return 'Region';
-                },
-                getChildren: () => {
-                  return children;
-                }
-              };
-            }
-          }
-        ];
-      },
-      getConfigProps: () => {
-        return {
-          title: 'Annoucements',
-          operator: ''
-        };
-      },
-      resolveConfigProps: () => {
+  render: (args: {{COMPONENT_CLASS_NAME}}Component) => {
+    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/src/tasks/create/templates/SDK-Angular/template/PAGE/page.component.spec.ts.mustache CHANGED Viewed

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

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

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

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

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

package/src/tasks/create/templates/SDK-Angular/widget/CASE/config.json.mustache CHANGED Viewed

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

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

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

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/config.json.mustache CHANGED Viewed

@@ -11,49 +11,49 @@
   "subtype": {{{SUB_TYPE}}},
   "icon": "OneColumnPage.svg",
   "properties": [
-      {
-        "name": "description",
-        "label": "Description",
-        "format": "TEXT",
-        "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
-      },
-      {
-        "name": "whatsnewlink",
-        "label": "What's new link",
-        "format": "TEXT",
-        "defaultValue": "https://design.pega.com"
-      },
-      {
-        "name": "image",
-        "label": "Image link",
-        "format": "TEXT",
-        "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
-      },
-      {
-        "name": "datasource",
-        "label": "Data source for details",
-        "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
-        "format": "DATASOURCE",
-        "required": true,
-        "properties": [
-          {
-            "name": "name",
-            "label": "Label",
-            "defaultValue": "@P .pyLabel"
-          }
-        ]
-      },
-      {
-        "label": "Conditions",
-        "format": "GROUP",
-        "properties": [
-          {
-            "name": "visibility",
-            "label": "Visibility",
-            "format": "VISIBILITY"
-          }
-        ]
-      }
+    {
+      "name": "description",
+      "label": "Description",
+      "format": "TEXT",
+      "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
+    },
+    {
+      "name": "whatsnewlink",
+      "label": "What's new link",
+      "format": "TEXT",
+      "defaultValue": "https://design.pega.com"
+    },
+    {
+      "name": "image",
+      "label": "Image link",
+      "format": "TEXT",
+      "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
+    },
+    {
+      "name": "datasource",
+      "label": "Data source for details",
+      "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
+      "format": "DATASOURCE",
+      "required": true,
+      "properties": [
+        {
+          "name": "name",
+          "label": "Label",
+          "defaultValue": "@P .pyLabel"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
   ],
   "defaultConfig": {}
 }

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

@@ -34,7 +34,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
           }
         } as any
       }
-    }
+    };
   }
 };

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

@@ -1,4 +1,3 @@
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
 <article class="psdk-announcement">

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/pagecomponent.spec.ts.mustache CHANGED Viewed

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

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

@@ -30,11 +30,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        }
+      } as any
     }
   })
 };

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/mock.ts.mustache CHANGED Viewed

@@ -14,7 +14,7 @@ export const configProps = {
   },
   hideLabel: true,
   key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 export const operatorDetails = {

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

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

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

@@ -45,12 +45,15 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges, OnD
     }
   }
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
   ngOnDestroy(): void {
-    this.renderer.destroy();
+    // Ref: https://medium.com/@kamil.galek/mythical-angular-component-styles-cleanup-in-angular-17-f799a08b2abc
+    // Commenting the below line as it is causing the Operator component's styles not getting applied.
+    // this.renderer.destroy();
   }
   updateSelf(): void {
-    const configProps$ = this.pConn$.getConfigProps() as any;
+    const configProps$ = this.pConn$.getConfigProps();
     this.displayLabel = this.displayLabel?.toLowerCase();
     const label = configProps$?.label?.toLowerCase();
     if (label === 'create operator' || this.displayLabel === 'create operator') {

package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache CHANGED Viewed

@@ -73,7 +73,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   if (formatter === 'Currency') {
     formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
   } else {
-    formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+    formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
   }
   if (displayMode === 'DISPLAY_ONLY') {

package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache CHANGED Viewed

@@ -62,7 +62,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const theCurrSep = theSymbols.theDigitGroupSeparator;
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly

package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache CHANGED Viewed

@@ -54,7 +54,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const helperTextToDisplay = validatemessage || helperText;
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
-  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+  const formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly

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

@@ -23,7 +23,7 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', readOnly, onChange, onBlur, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
+  const { displayMode, value = '', label = '', onChange, required, disabled, helperText, placeholder, validatemessage, status, testId } = resolvedProps;
   const helperTextToDisplay = validatemessage || helperText;
   let testProp = {};
@@ -33,7 +33,7 @@ const renderField = resolvedProps => {
   };
   const variant = displayMode === 'DISPLAY_ONLY' ? 'inline' : 'stacked';
   let val: any = '';
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
   if (label === 'Service Date')
@@ -72,24 +72,27 @@ const renderField = resolvedProps => {
   if (label === 'First Name' || label === 'Last Name' || label === 'Middle Name')
     val = <TextField value={value} fullWidth size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
+  const disableDropdown = true;
   if (label === 'Phone Number')
     val = (
       <MuiTelInput
-        fullWidth
-        variant='outlined'
-        helperText={helperTextToDisplay}
-        placeholder={placeholder ?? ''}
-        size='small'
-        defaultCountry='US'
-        required={required}
-        disabled={disabled}
-        onChange={onChange}
-        onBlur={!readOnly ? onBlur : undefined}
-        error={status === 'error'}
-        label={label}
-        value={value}
-        InputProps={{ ...testProp }}
-      />
+      fullWidth
+      helperText={helperTextToDisplay}
+      placeholder={placeholder ?? ''}
+      size='small'
+      defaultCountry='US'
+      required={required}
+      disabled={disabled}
+      onChange={onChange}
+      error={status === 'error'}
+      label={label}
+      value={value}
+      InputProps={{
+        readOnly: true,
+        inputProps: { ...testProp }
+      }}
+      disableDropdown={disableDropdown}
+    />
     );
 <%={{ }}=%>     {{! revert delimiters for mustache }}
@@ -170,8 +173,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
       hasSuggestions: false,
       onChange: val => {
         setPhone(val);
-      },
-      onBlur: () => {}
+      }
     },
     {
       readOnly: undefined,

package/src/tasks/index.js CHANGED Viewed

@@ -9,6 +9,7 @@ export { default as mapAllComponents } from './map-all/index.js';
 export { default as publishComponent } from './publish/index.js';
 export { default as publishAllComponents } from './publish-all/index.js';
 export { default as renameComponent } from './rename/index.js';
+export { default as quarantine } from './quarantine/index.js';
 export { default as listComponents } from './list/index.js';
 export { default as updateComponent } from './update/index.js';
 export { default as validate } from './validator/index.js';

package/src/tasks/map/map.js CHANGED Viewed

@@ -43,7 +43,8 @@ export const getPrettierFormattedString = async (content) => {
   // format the contents
   if (options) {
-    return prettier.format(content, options);
+    options.parser = 'babel';
+    return  prettier.format(content, options);
   }
   else {
     return content;