@pega/dx-component-builder-sdk 0.23.13 → 0.23.15

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

@@ -15,7 +15,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
 }
 // Duplicated runtime code from React SDK
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Get emitted components from map (so we can get any override that may exist)
   const FieldGroup = getComponentFromMap('FieldGroup');
@@ -55,28 +54,28 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }
 
   return (
-  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-    <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
-      {showHighlightedData && highlightedDataArr.length > 0 && (
-        <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
-          {highlightedDataArr.map((child, i) => (
-            <Grid item xs={6} key={`hf-${i + 1}`}>
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      {{! pick new delimiters for mustache }}
+      {{=<% %>=}}
+      <FieldGroup name={propsToUse.showLabel ? propsToUse.label : ''}>
+        {showHighlightedData && highlightedDataArr.length > 0 && (
+          <Grid container spacing={1} style={{ padding: '0 0 1em' }}>
+            {highlightedDataArr.map((child, i) => (
+              <Grid item xs={6} key={`hf-${i + 1}`}>
+                {child}
+              </Grid>
+            ))}
+          </Grid>
+        )}
+        <Grid container spacing={1}>
+          {children.map((child, i) => (
+            <Grid item xs={6} key={`r-${i + 1}`}>
               {child}
             </Grid>
           ))}
         </Grid>
-      )}
-      <Grid container spacing={1}>
-        {children.map((child, i) => (
-          <Grid item xs={6} key={`r-${i + 1}`}>
-            {child}
-          </Grid>
-        ))}
-      </Grid>
-    </FieldGroup>
-<%={{ }}=%>     {{! revert delimiters for mustache }}
+      </FieldGroup>
+      <%={{ }}=%>     {{! revert delimiters for mustache }}
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
-}
+}

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

@@ -11,16 +11,16 @@ window.PCore = {
       getGenericFailedMessage() {
         /* nothing */
       }
-    }
+    };
   },
   getConstants: (): any => {
     return {
       CASE_INFO: {
-        INSTRUCTIONS: ""
+        INSTRUCTIONS: ''
       }
-    }
-}
-}
+    };
+  }
+};
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -34,7 +34,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const [firstName, setFirstName] = useState('John');
   const [middleName, setMiddleName] = useState('');
@@ -44,10 +44,10 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
   const [email, setEmail] = useState('john@doe.com');
 
   const props = {
-    NumCols: "1",
+    NumCols: '1',
     template: 'DefaultForm',
 
-     getPConnect: () => {
+    getPConnect: () => {
       return {
         getChildren: () => {
           return [
@@ -69,8 +69,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                           return {
                             getActionsApi: () => {
                               return {
-                                updateFieldValue: () => {/* nothing */},
-                                triggerFieldChange: () => {/* nothing */}
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
                               };
                             },
                             getStateProps: () => {
@@ -95,8 +99,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                           return {
                             getActionsApi: () => {
                               return {
-                                updateFieldValue: () => {/* nothing */},
-                                triggerFieldChange: () => {/* nothing */}
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
                               };
                             },
                             getStateProps: () => {
@@ -123,8 +131,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                           return {
                             getActionsApi: () => {
                               return {
-                                updateFieldValue: () => {/* nothing */},
-                                triggerFieldChange: () => {/* nothing */}
+                                updateFieldValue: () => {
+                                  /* nothing */
+                                },
+                                triggerFieldChange: () => {
+                                  /* nothing */
+                                }
                               };
                             },
                             getStateProps: () => {
@@ -263,14 +275,14 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             }
           ];
         },
-        getValue: (val) => {
+        getValue: val => {
           return val;
         },
         getCurrentView: () => {
-          return "";
+          return '';
         },
         getCurrentClassID: () => {
-          return "";
+          return '';
         }
       };
     }
@@ -279,4 +291,4 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
   return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
-Base{{COMPONENT_CLASS_NAME}}.args = {}
+Base{{COMPONENT_CLASS_NAME}}.args = {};

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

@@ -25,7 +25,6 @@ const Child = connectToState(mapStateToProps)(props => {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMPONENT_CLASS_NAME}}Props>) {
   const { getPConnect, NumCols = '1' } = props;
   const instructions = getInstructions(getPConnect(), props.instructions);
@@ -63,11 +62,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
         <div className='psdk-default-form-instruction-text'>
           {/* server performs sanitization method for instructions html content */}
           {/* eslint-disable react/no-danger */}
-          <div key='instructions' id='instruction-text' 
-    {{! pick new delimiters for mustache }}
-    {{=<% %>=}}
-          dangerouslySetInnerHTML={{ __html: instructions }} 
-    <%={{ }}=%>     {{! revert delimiters for mustache }}
+          <div key='instructions' id='instruction-text'
+          {{! pick new delimiters for mustache }}
+          {{=<% %>=}}
+          dangerouslySetInnerHTML={{ __html: instructions }}
+          <%={{ }}=%>     {{! revert delimiters for mustache }}
           />
         </div>
       )}
@@ -75,4 +74,4 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
     </>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
-}
+}

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

@@ -14,44 +14,69 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   component: {{COMPONENT_CLASS_NAME}},
   excludeStories: /.*Data$/,
   parameters: {
-    type: "TwoColumnForm",
-  },
+    type: 'TwoColumnForm'
+  }
 };
 
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
 const renderField = resolvedProps => {
-  const { displayMode, value = '', label = '', onChange} = resolvedProps;
+  const { displayMode, value = '', label = '', onChange } = resolvedProps;
 
   const variant = displayMode === 'LABELS_LEFT' ? 'inline' : 'stacked';
   let val: any = '';
   if (label === 'Service Date')
-    val = <MuiPickersUtilsProvider utils={DayjsUtils}><KeyboardDatePicker
-      variant='inline'
-      inputVariant='outlined'
-      placeholder='mm/dd/yyyy'
-      fullWidth
-      format='MM/DD/YYYY'
-      mask='__/__/____'
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={onChange}
-    />
-    </MuiPickersUtilsProvider>
+    val = (
+      <MuiPickersUtilsProvider utils={DayjsUtils}>
+        <KeyboardDatePicker
+          variant='inline'
+          inputVariant='outlined'
+          placeholder='mm/dd/yyyy'
+          fullWidth
+          format='MM/DD/YYYY'
+          mask='__/__/____'
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={onChange}
+        />
+      </MuiPickersUtilsProvider>
+    );
 
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
 
   if (label === 'Email')
-    val = <TextField type='email' fullWidth value={value} size='small' variant='outlined' style={{ fontSize: '14px' }} label={label} onChange={onChange} />;
+    val = (
+      <TextField
+        type='email'
+        fullWidth
+        value={value}
+        size='small'
+        variant='outlined'
+        style={{ fontSize: '14px' }}
+        label={label}
+        onChange={onChange}
+      />
+    );
 
   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} />;
 
   if (label === 'Phone Number')
-    val = <MuiPhoneNumber value={value} fullWidth variant='outlined' size='small' style={{ fontSize: '14px' }} defaultCountry='us' label={label} onChange={onChange} />;
+    val = (
+      <MuiPhoneNumber
+        value={value}
+        fullWidth
+        variant='outlined'
+        size='small'
+        style={{ fontSize: '14px' }}
+        defaultCountry='us'
+        label={label}
+        onChange={onChange}
+      />
+    );
 
 <%={{ }}=%>     {{! revert delimiters for mustache }}
 
@@ -62,7 +87,7 @@ const renderField = resolvedProps => {
   return <span key={label}>{val}</span>;
 };
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const [firstName, setFirstName] = useState('John');
   const [middleName, setMiddleName] = useState('');
   const [lastName, setLastName] = useState('Joe');
@@ -143,7 +168,6 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
         const changeValue = date && date.isValid() ? date.toISOString() : null;
         setServiceDate(changeValue);
       }
-
     }
   ];
   const props = {
@@ -182,10 +206,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
     return props.getPConnect().createComponent(child);
   });
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} >
-        {regionAChildren}
-        {regionBChildren}
-      </{{COMPONENT_CLASS_NAME}}>;
+  return (
+    <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
+      {regionAChildren}
+      {regionBChildren}
+    </{{COMPONENT_CLASS_NAME}}>
+  );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {};

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

@@ -21,7 +21,6 @@ const useStyles = makeStyles(() => ({
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMPONENT_CLASS_NAME}}Props>) {
   const classes = useStyles();
 
@@ -50,14 +49,14 @@ export default function {{COMPONENT_CLASS_NAME}}(props: PropsWithChildren<{{COMP
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <Grid container spacing={1}>
-      <Grid item xs={12} md={aSize} className={classes.colStyles}>
-        {childrenToRender[0]}
+      <Grid container spacing={1}>
+        <Grid item xs={12} md={aSize} className={classes.colStyles}>
+          {childrenToRender[0]}
+        </Grid>
+        <Grid item xs={12} md={bSize} className={classes.colStyles}>
+          {childrenToRender[1]}
+        </Grid>
       </Grid>
-      <Grid item xs={12} md={bSize} className={classes.colStyles}>
-        {childrenToRender[1]}
-      </Grid>
-    </Grid>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
-}
+}

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unstable-nested-components */
 import type { Meta, StoryObj } from '@storybook/react';
 
-import AppAnnouncement from "@pega/react-sdk-components/lib/components/widget/AppAnnouncement";
+import AppAnnouncement from '@pega/react-sdk-components/lib/components/widget/AppAnnouncement';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { pyHome1Resolved, pyHome1Raw } from './mock';
@@ -15,8 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
-  
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const configProps = pyHome1Resolved.children[0].children[0].config;
 
   const props = {
@@ -32,8 +31,12 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
                 resolve({});
               });
             },
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getChildren: () => {
@@ -49,31 +52,44 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
           return pyHome1Raw;
         },
         createComponent: config => {
-         if(config.type === 'AppAnnouncement') {
-              return (
-                <AppAnnouncement
-                  key='announcement'
-                  header='Announcements'
-                  description={configProps.description}
-                  datasource={configProps.datasource}
-                  whatsnewlink={configProps.whatsnewlink}
-                />
-              );
+          if (config.type === 'AppAnnouncement') {
+            return (
+              <AppAnnouncement
+                key='announcement'
+                header='Announcements'
+                description={configProps.description}
+                datasource={configProps.datasource}
+                whatsnewlink={configProps.whatsnewlink}
+                getPConnect={(): typeof PConnect => ({}) as typeof PConnect}
+              />
+            );
           }
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };
 
   const regionAChildren = pyHome1Raw.children[0].children.map(child => {
-   return props.getPConnect().createComponent(child);
+    return props.getPConnect().createComponent(child);
   });
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} >{regionAChildren}</{{COMPONENT_CLASS_NAME}}>;
+  return (
+    <{{COMPONENT_CLASS_NAME}} {...props} {...args}>
+      {regionAChildren}
+    </{{COMPONENT_CLASS_NAME}}>
+  );
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {};

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

@@ -14,16 +14,15 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
 // Duplicated runtime code from React SDK
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Get emitted components from map (so we can get any override that may exist)
   const OneColumn = getComponentFromMap('OneColumn');
 
   return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <OneColumn
-       {...props}
-      />
+        <OneColumn
+        {...props}
+        />
       </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
-}
+}

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

@@ -5,14 +5,14 @@ import { historyData } from './mock';
 
 window.PCore = {
   ...window.PCore,
-  getDataApiUtils: () : any => {
+  getDataApiUtils: (): any => {
     return {
       getData: (): any => {
         return new Promise(resolve => {
           resolve(historyData);
         });
       }
-    }
+    };
   },
   getConstants: (): any => {
     return {
@@ -21,7 +21,7 @@ window.PCore = {
       }
     };
   }
-}
+};
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -32,7 +32,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
 
   const props = {
     label: 'Case history',
@@ -50,14 +50,26 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {/* nothing */},
-            triggerFieldChange: () => {/* nothing */}
+            updateFieldValue: () => {
+              /* nothing */
+            },
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
-        ignoreSuggestion: () => {/* nothing */},
-        acceptSuggestion: () => {/* nothing */},
-        setInheritedProps: () => {/* nothing */},
-        resolveConfigProps: () => {/* nothing */}
+        ignoreSuggestion: () => {
+          /* nothing */
+        },
+        acceptSuggestion: () => {
+          /* nothing */
+        },
+        setInheritedProps: () => {
+          /* nothing */
+        },
+        resolveConfigProps: () => {
+          /* nothing */
+        }
       };
     }
   };

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

@@ -39,7 +39,6 @@ const StyledTableCell = withStyles((theme: Theme) =>
 // Case widget example is a "history table"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { getPConnect } = props;
   const thePConn = getPConnect();
@@ -164,15 +163,15 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }
 
   return (
-  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <div id='CaseHistory'>
-      <TableContainer>
-        <Table>
-          <TableHead>{getTableHeader()}</TableHead>
-          <TableBody>{getTableData()}</TableBody>
-        </Table>
-      </TableContainer>
-    </div>
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <div id='CaseHistory'>
+        <TableContainer>
+          <Table>
+            <TableHead>{getTableHeader()}</TableHead>
+            <TableBody>{getTableData()}</TableBody>
+          </Table>
+        </TableContainer>
+      </div>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
-}
+}

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

@@ -12,8 +12,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
-  
+export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
   const props = {
     datasource: configProps.datasource,
     whatsnewlink: configProps.whatsnewlink
@@ -24,5 +23,5 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
   header: configProps.header,
-  description: configProps.description,
-}
+  description: configProps.description
+};

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

@@ -25,7 +25,6 @@ const useStyles = makeStyles(theme => ({
 // Page Widget example is the "App Announcment"
 
 // props passed in combination of props from property panel (config.json) and run time props from Constellation
-// any default values in config.pros should be set in defaultProps at bottom of this file
 export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
   let details = [];
@@ -42,28 +41,28 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   };
 
   return (
-  <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <Card title='AppAnnouncement' className={classes.root}>
-      <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
-      <CardContent>
-        <Typography variant='body1' gutterBottom>
-          {description}
-        </Typography>
-        {details.map((itm, idx) => {
-          const theKey = `AppAnn-item-${idx}`;
-          return (
-            <Typography key={theKey} variant='body2'>
-              - {itm}
-            </Typography>
-          );
-        })}
-      </CardContent>
-      <CardActions>
-        <Button color='primary' onClick={handleClick} size='small'>
-          See what&apos;s new
-        </Button>
-      </CardActions>
-    </Card>
+    <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
+      <Card title='AppAnnouncement' className={classes.root}>
+        <CardHeader title={<Typography variant='h6'>{header}</Typography>} />
+        <CardContent>
+          <Typography variant='body1' gutterBottom>
+            {description}
+          </Typography>
+          {details.map((itm, idx) => {
+            const theKey = `AppAnn-item-${idx}`;
+            return (
+              <Typography key={theKey} variant='body2'>
+                - {itm}
+              </Typography>
+            );
+          })}
+        </CardContent>
+        <CardActions>
+          <Button color='primary' onClick={handleClick} size='small'>
+            See what&apos;s new
+          </Button>
+        </CardActions>
+      </Card>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
-}
+}