@pega/dx-component-builder-sdk 0.24.1 → 0.24.2

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

@@ -46,7 +46,6 @@ const renderField = resolvedProps => {
 
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
-
   if (label === 'Email')
     val = (
       <TextField
@@ -77,7 +76,6 @@ const renderField = resolvedProps => {
         onChange={onChange}
       />
     );
-
 <%={{ }}=%>     {{! revert delimiters for mustache }}
 
   if (variant === 'inline') {

package/src/tasks/create/templates/SDK-React/template/FORM-region/mock.ts.mustache

@@ -1,132 +1,131 @@
 export const pyReviewRaw = {
-    name: 'CollectInformation',
-    type: 'View',
-    config: {
-      template: 'DefaultForm',
-      ruleClass: 'OM5W9U-SampleApp-Work-Test',
-      localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
-      context: '@P .pyViewContext'
+  name: 'CollectInformation',
+  type: 'View',
+  config: {
+    template: 'DefaultForm',
+    ruleClass: 'OM5W9U-SampleApp-Work-Test',
+    localeReference: '@LR OM5W9U-SAMPLEAPP-WORK-TEST!VIEW!COLLECTINFORMATION',
+    context: '@P .pyViewContext'
+  },
+  children: [
+    {
+      name: 'A',
+      type: 'Region',
+      children: [
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .FirstName',
+            label: '@L First Name'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .MiddleName',
+            label: '@L Middle Name'
+          }
+        },
+        {
+          type: 'TextInput',
+          config: {
+            value: '@P .LastName',
+            label: '@L Last Name'
+          }
+        }
+      ]
     },
-    children: [
-      {
-        name: 'A',
-        type: 'Region',
-        children: [
-          {
-            type: 'TextInput',
-            config: {
-              value: '@P .FirstName',
-              label: '@L First Name'
-            }
-          },
-          {
-            type: 'TextInput',
-            config: {
-              value: '@P .MiddleName',
-              label: '@L Middle Name'
-            }
-          },
-          {
-            type: 'TextInput',
-            config: {
-              value: '@P .LastName',
-              label: '@L Last Name'
-            }
+    {
+      name: 'B',
+      type: 'Region',
+      children: [
+        {
+          type: 'Email',
+          config: {
+            value: '@P .Email',
+            label: '@L Email'
           }
-        ]
-      },
-      {
-        name: 'B',
-        type: 'Region',
-        children: [
-          {
-            type: 'Email',
-            config: {
-              value: '@P .Email',
-              label: '@L Email'
-            }
-          },
-          {
-            type: 'Phone',
-            config: {
-              value: '@P .PhoneNumber',
-              label: '@L Phone Number',
-              datasource: {
-                source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
-                fields: {
-                  value: '@P .pyCallingCode'
-                }
+        },
+        {
+          type: 'Phone',
+          config: {
+            value: '@P .PhoneNumber',
+            label: '@L Phone Number',
+            datasource: {
+              source: '@DATASOURCE D_pyCountryCallingCodeList.pxResults',
+              fields: {
+                value: '@P .pyCallingCode'
               }
             }
-          },
-          {
-            type: 'Date',
-            config: {
-              value: '@P .ServiceDate',
-              label: '@L Service Date'
-            }
           }
-        ]
-      }
-    ],
-    classID: 'OM5W9U-SampleApp-Work-Test'
-  };
-  
-  export const regionChildrenResolved = [
-    {
-      readOnly: undefined,
-      value: 'John',
-      label: 'First Name',
-      hasSuggestions: false
-    },
-    {
-      readOnly: undefined,
-      value: 'Din',
-      label: 'Middle Name',
-      hasSuggestions: false
-    },
-    {
-      readOnly: undefined,
-      value: 'Doe',
-      label: 'Last Name',
-      hasSuggestions: false
-    },
-    {
-      readOnly: undefined,
-      value: 'John@doe.com',
-      label: 'Email',
-      hasSuggestions: false
-    },
-    {
-      readOnly: undefined,
-      value: '+16397975093',
-      label: 'Phone Number',
-      datasource: {
-        fields: {
-          value: undefined
         },
-        source: [
-          {
-            value: '+1'
-          },
-          {
-            value: '+91'
-          },
-          {
-            value: '+48'
-          },
-          {
-            value: '+44'
+        {
+          type: 'Date',
+          config: {
+            value: '@P .ServiceDate',
+            label: '@L Service Date'
           }
-        ]
+        }
+      ]
+    }
+  ],
+  classID: 'OM5W9U-SampleApp-Work-Test'
+};
+
+export const regionChildrenResolved = [
+  {
+    readOnly: undefined,
+    value: 'John',
+    label: 'First Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'Din',
+    label: 'Middle Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'Doe',
+    label: 'Last Name',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: 'John@doe.com',
+    label: 'Email',
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '+16397975093',
+    label: 'Phone Number',
+    datasource: {
+      fields: {
+        value: undefined
       },
-      hasSuggestions: false
+      source: [
+        {
+          value: '+1'
+        },
+        {
+          value: '+91'
+        },
+        {
+          value: '+48'
+        },
+        {
+          value: '+44'
+        }
+      ]
     },
-    {
-      readOnly: undefined,
-      value: '2023-01-25',
-      label: 'Service Date',
-      hasSuggestions: false
-    }
-  ];
-  
+    hasSuggestions: false
+  },
+  {
+    readOnly: undefined,
+    value: '2023-01-25',
+    label: 'Service Date',
+    hasSuggestions: false
+  }
+];

package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache

@@ -1,32 +1,31 @@
-import { Grid } from "@material-ui/core";
+import { Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-interface OneColumnProps{
+interface OneColumnProps {
   // If any, enter additional props that only exist on this component
-  children: any[]
+  children: any[];
 }
 
 const useStyles = makeStyles((/* theme */) => ({
   colStyles: {
-    display: "grid",
-    gap: "1rem",
-    alignContent: "baseline",
-  },
+    display: 'grid',
+    gap: '1rem',
+    alignContent: 'baseline'
+  }
 }));
 
-
 export default function OneColumn(props: OneColumnProps) {
   const classes = useStyles();
 
-  const { children} = props;
+  const { children } = props;
 
   return (
     <Grid container spacing={2}>
       <Grid item xs={12} className={classes.colStyles}>
-        {children.map(child => { return child; } )}
+        {children.map(child => {
+          return child;
+        })}
       </Grid>
     </Grid>
-  )
+  );
 }
-
-

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

@@ -9,7 +9,7 @@ import { pyHome1Resolved, pyHome1Raw } from './mock';
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}},
-  excludeStories: /.*Data$/,
+  excludeStories: /.*Data$/
 };
 
 export default meta;

package/src/tasks/create/templates/SDK-React/template/PAGE/index.tsx.mustache

@@ -19,10 +19,8 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   const OneColumn = getComponentFromMap('OneColumn');
 
   return (
-      <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-        <OneColumn
-        {...props}
-        />
-      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <OneColumn {...props} />
+    </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/template/PAGE/mock.ts.mustache

@@ -28,15 +28,15 @@ export const pyHome1Raw = {
             datasource: {
               source: [
                 {
-                    "name": "New React based UI rendering"
+                  name: 'New React based UI rendering'
                 },
                 {
-                    "name": "Support for followers and recents"
+                  name: 'Support for followers and recents'
                 },
                 {
-                    "name": "New authoring experience"
+                  name: 'New authoring experience'
                 }
-            ],
+              ],
               fields: {
                 name: '@P .pyLabel'
               }
@@ -92,16 +92,15 @@ export const pyHome1Resolved = {
             datasource: {
               source: [
                 {
-                    "name": "New React based UI rendering"
+                  name: 'New React based UI rendering'
                 },
                 {
-                    "name": "Support for followers and recents"
+                  name: 'Support for followers and recents'
                 },
                 {
-                    "name": "New authoring experience"
+                  name: 'New authoring experience'
                 }
-            ]
-            ,
+              ],
               fields: {
                 name: '@P .pyLabel'
               }

package/src/tasks/create/templates/SDK-React/widget/CASE/config.json.mustache

@@ -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-React/widget/CASE/demo.stories.tsx.mustache

@@ -33,7 +33,6 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-
   const props = {
     label: 'Case history',
 

package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache

@@ -151,9 +151,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
         const theKey = `CaseHistory-${index}`;
         theDataRows.push(
           <TableRow key={theKey}>
-            <StyledTableCell>{dataRow[0] ? dataRow[0] as any : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[1] ? dataRow[1] as any : '---'}</StyledTableCell>
-            <StyledTableCell>{dataRow[2] ? dataRow[2] as any : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[0] ? (dataRow[0] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[1] ? (dataRow[1] as any) : '---'}</StyledTableCell>
+            <StyledTableCell>{dataRow[2] ? (dataRow[2] as any) : '---'}</StyledTableCell>
           </TableRow>
         );
       });

package/src/tasks/create/templates/SDK-React/widget/PAGE/config.json.mustache

@@ -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-React/widget/PAGE/mock.ts.mustache

@@ -20,4 +20,4 @@ export const configProps = {
     ],
     fields: {}
   }
-};
+};

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

@@ -11,7 +11,7 @@ window.PCore = {
         return new Promise(resolve => {
           resolve(operatorDetails);
         });
-      },
+      }
     };
   },
   getLocaleUtils: (): any => {
@@ -33,7 +33,6 @@ export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
-
   const props = {
     getPConnect: () => {
       return {

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -10,7 +10,6 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
-
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
   label: string;

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/mock.ts.mustache

@@ -1,4 +1,3 @@
-
 export const caseOpConfig = {
   label: 'Create operator',
   createLabel: 'Created',

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

@@ -1,29 +0,0 @@
-<div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
-</div>
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-<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-label>{{ label$ }}</mat-label>
-        <input
-          matInput
-          [placeholder]="placeholder"
-          type="url"
-          [value]="value$"
-          [required]="bRequired$"
-          [formControl]="fieldControl"
-          (change)="fieldOnChange($event)"
-          (blur)="fieldOnBlur($event)"
-        />
-        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
-      </mat-form-field>
-    </div>
-  </div>
-</ng-template>
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-<ng-template #noEdit>
-  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'url' }"></component-mapper>
-</ng-template>