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

package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache

@@ -14,7 +14,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // 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 FieldValueList = getComponentFromMap('FieldValueList');
@@ -81,24 +80,24 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <TextField
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={handleChange}
-      onBlur={!readOnly ? handleBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={inputValue}
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+      <TextField
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={inputValue}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache

@@ -13,7 +13,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // 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 FieldValueList = getComponentFromMap('FieldValueList');
@@ -63,27 +62,27 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <TextField
-      multiline
-      minRows={5}
-      maxRows={5}
-      fullWidth
-      variant={readOnly ? 'standard' : 'outlined'}
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value}
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-      InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+      <TextField
+        multiline
+        minRows={5}
+        maxRows={5}
+        fullWidth
+        variant={readOnly ? 'standard' : 'outlined'}
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{ ...readOnlyProp, inputProps: { maxLength, ...testProp } }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache

@@ -12,7 +12,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // 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 FieldValueList = getComponentFromMap('FieldValueList');
@@ -54,26 +53,26 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     return (
       <div>
         <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-        <MuiPhoneNumber
-          fullWidth
-          helperText={helperTextToDisplay}
-          placeholder={placeholder ?? ''}
-          size='small'
-          required={required}
-          disabled={disabled}
-          onChange={onChange}
-          error={status === 'error'}
-          label={label}
-          value={value}
-          {{! pick new delimiters for mustache }}
-          {{=<% %>=}}
-          InputProps={{
-            readOnly: true,
-            inputProps: { ...testProp }
-          }}
-          <%={{ }}=%>     {{! revert delimiters for mustache }}
-          disableDropdown={disableDropdown}
-        />
+          <MuiPhoneNumber
+            fullWidth
+            helperText={helperTextToDisplay}
+            placeholder={placeholder ?? ''}
+            size='small'
+            required={required}
+            disabled={disabled}
+            onChange={onChange}
+            error={status === 'error'}
+            label={label}
+            value={value}
+            {{! pick new delimiters for mustache }}
+            {{=<% %>=}}
+            InputProps={{
+              readOnly: true,
+              inputProps: { ...testProp }
+            }}
+            <%={{ }}=%>     {{! revert delimiters for mustache }}
+            disableDropdown={disableDropdown}
+          />
          </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       </div>
     );
@@ -93,25 +92,25 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <MuiPhoneNumber
-      fullWidth
-      variant='outlined'
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      defaultCountry='us'
-      required={required}
-      disabled={disabled}
-      onChange={handleChange}
-      onBlur={!readOnly ? handleBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value}
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
-      InputProps={{ ...testProp }}
-<%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+      <MuiPhoneNumber
+        fullWidth
+        variant='outlined'
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        defaultCountry='us'
+        required={required}
+        disabled={disabled}
+        onChange={handleChange}
+        onBlur={!readOnly ? handleBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{ ...testProp }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

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

@@ -11,7 +11,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // 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 FieldValueList = getComponentFromMap('FieldValueList');
@@ -55,25 +54,25 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <TextField
-      type='url'
-      fullWidth
-      variant='outlined'
-      helperText={helperTextToDisplay}
-      placeholder={placeholder ?? ''}
-      size='small'
-      required={required}
-      disabled={disabled}
-      onChange={onChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      error={status === 'error'}
-      label={label}
-      value={value}
-    {{! pick new delimiters for mustache }}
-    {{=<% %>=}}
-      InputProps={{ inputProps: { ...testProp } }}
-    <%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+      <TextField
+        type='url'
+        fullWidth
+        variant='outlined'
+        helperText={helperTextToDisplay}
+        placeholder={placeholder ?? ''}
+        size='small'
+        required={required}
+        disabled={disabled}
+        onChange={onChange}
+        onBlur={!readOnly ? onBlur : undefined}
+        error={status === 'error'}
+        label={label}
+        value={value}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        InputProps={{ inputProps: { ...testProp } }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      />
      </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache

@@ -15,7 +15,6 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
 // 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 FieldValueList = getComponentFromMap('FieldValueList');
@@ -79,10 +78,10 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           format='hh:mm a'
           value={timeValue}
           onChange={handleChange}
-      {{! pick new delimiters for mustache }}
-      {{=<% %>=}}
-        InputProps={{ inputProps: { ...testProp } }}
-      <%={{ }}=%>     {{! revert delimiters for mustache }}
+          {{! pick new delimiters for mustache }}
+          {{=<% %>=}}
+          InputProps={{ inputProps: { ...testProp } }}
+          <%={{ }}=%>     {{! revert delimiters for mustache }}
         />
       </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>

package/src/tasks/create/templates/SDK-React/template/DETAILS/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={12} 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={12} key={`hf-${i + 1}`}>
+                {child}
+              </Grid>
+            ))}
+          </Grid>
+        )}
+        <Grid container spacing={1}>
+          {children.map((child, i) => (
+            <Grid item xs={12} key={`r-${i + 1}`}>
               {child}
             </Grid>
           ))}
         </Grid>
-      )}
-      <Grid container spacing={1}>
-        {children.map((child, i) => (
-          <Grid item xs={12} 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/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/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/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/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/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/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>
   );
-}
+}