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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.23.13",
+  "version": "0.23.15",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/constants.js

@@ -300,6 +300,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Email',
         value: 'Email'
       },
+      {
+        name: 'Field Group',
+        value: 'Group'
+      },
       {
         name: 'Integer',
         value: 'Integer'
@@ -688,6 +692,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Email',
         value: 'Email'
       },
+      {
+        name: 'Field Group',
+        value: 'Group'
+      },
       {
         name: 'Integer',
         value: 'Integer'
@@ -704,6 +712,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Radio Buttons',
         value: 'RadioButtons'
       },
+      {
+        name: 'Rich Text',
+        value: 'RichText'
+      },
       {
         name: 'Scalar List',
         value: 'ScalarList'
@@ -754,6 +766,10 @@ export const COMPONENT_SCHEMA = {
         name: 'Case Create Stage',
         value: 'CaseCreateStage'
       },
+      {
+        name: 'Field Group',
+        value: 'FieldGroup'
+      },
       {
         name: 'Material Case Summary',
         value: 'MaterialCaseSummary'
@@ -789,6 +805,10 @@ export const COMPONENT_SCHEMA = {
       {
         name: 'Pulse',
         value: 'Pulse'
+      },
+      {
+        name: 'Rich Text Editor',
+        value: 'RichTextEditor'
       }
     ],
     infra: [

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache

@@ -1,5 +1,9 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper
+    *ngIf="bVisible$ !== false"
+    name="FieldValueList"
+    [props]="{ label$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
+  ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.ts.mustache

@@ -13,6 +13,8 @@ interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   // Everything from PConnFieldProps except value and change type of value to boolean
   value: boolean;
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 @Component({
@@ -45,6 +47,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
+  trueLabel$?: string;
+  falseLabel$?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -116,6 +120,8 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
 
     this.caption$ = this.configProps$.caption;
     this.helperText = this.configProps$.helperText;
+    this.trueLabel$ = this.configProps$.trueLabel;
+    this.falseLabel$ = this.configProps$.falseLabel;
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {

package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.html.mustache

@@ -1,5 +1,9 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper
+    *ngIf="bVisible$ !== false"
+    name="FieldValueList"
+    [props]="{ label$, value$: getFormattedValue(), displayMode$ }"
+  ></component-mapper>
 </div>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}

package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.ts.mustache

@@ -14,6 +14,7 @@ import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -242,4 +243,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
     }
     return errMessage;
   }
+
+  getFormattedValue() {
+    return format(this.value$, 'date', {
+      format: this.theDateFormat.dateFormatString
+    });
+  }
 }

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

@@ -75,7 +75,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
       fields?.forEach(field => {
         const thePConn = field.getPConnect();
         const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference') {
+        if (theCompType === 'reference' || theCompType === 'group') {
           const configProps = thePConn.getConfigProps();
           configProps.readOnly = true;
           configProps.displayMode = 'LABELS_LEFT';
@@ -88,6 +88,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
           };
           const viewContConfig = {
             meta: {
+              ...thePConn.getMetadata(),
               type: theCompType,
               config: configProps
             },

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

@@ -1,27 +1,31 @@
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-two-column {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-three-column {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
 }
 
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
 }
 
 .template-title-container {
@@ -29,3 +33,8 @@
   font-weight: 600;
   margin: 10px 0px;
 }
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}

package/src/tasks/create/templates/SDK-React/field/Boolean/demo.stories.tsx.mustache

@@ -14,7 +14,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 [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -35,12 +35,16 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => { /* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getValidationApi: () => {
           return {
-            validate: () => { /* nothing */}
+            validate: () => {
+              /* nothing */
+            }
           };
         }
       };
@@ -60,5 +64,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

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

@@ -2,28 +2,28 @@ import { useState, useEffect } from 'react';
 import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
-import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
 import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
 interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on this componentName
   value?: boolean;
   // eslint-disable-next-line react/no-unused-prop-types
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 // 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');
 
   const {
     getPConnect,
-    label,
     value = false,
     readOnly,
     testId,
@@ -33,7 +33,9 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
     helperText,
     validatemessage,
     displayMode,
-    hideLabel
+    hideLabel,
+    trueLabel,
+    falseLabel
   } = props;
   const helperTextToDisplay = validatemessage || helperText;
 
@@ -50,11 +52,11 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   }, [value]);
 
   if (displayMode === 'LABELS_LEFT') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
   }
 
   if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} variant='stacked' />;
+    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />;
   }
 
   const handleChange = event => {
@@ -62,7 +64,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   };
 
   const handleBlur = event => {
-    thePConn.getValidationApi().validate(event.target.checked, ''); // 2nd arg empty string until typedef marked correctly as optional
+    thePConn.getValidationApi().validate(event.target.checked);
   };
 
   let theCheckbox = <Checkbox color='primary' disabled={disabled} />;
@@ -75,20 +77,20 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-    <FormControl required={required} error={status === 'error'}>
-      <FormGroup>
-        <FormControlLabel
-          control={theCheckbox}
-          checked={checked}
-          onChange={!readOnly ? handleChange : undefined}
-          onBlur={!readOnly ? handleBlur : undefined}
-          label={caption}
-          labelPlacement='end'
-          data-test-id={testId}
-        />
-      </FormGroup>
-      <FormHelperText>{helperTextToDisplay}</FormHelperText>
-    </FormControl>
+      <FormControl required={required} error={status === 'error'}>
+        <FormGroup>
+          <FormControlLabel
+            control={theCheckbox}
+            checked={checked}
+            onChange={!readOnly ? handleChange : undefined}
+            onBlur={!readOnly ? handleBlur : undefined}
+            label={caption}
+            labelPlacement='end'
+            data-test-id={testId}
+          />
+        </FormGroup>
+        <FormHelperText>{helperTextToDisplay}</FormHelperText>
+      </FormControl>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );
 }

package/src/tasks/create/templates/SDK-React/field/Date/demo.stories.tsx.mustache

@@ -9,21 +9,21 @@ window.PCore = {
   ...window.PCore,
   getLocaleUtils: (): any => {
     return {
-      getLocaleValue: (value) => {
+      getLocaleValue: value => {
         return value;
       }
-    }
+    };
   },
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
- }
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
@@ -35,7 +35,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 [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -47,7 +47,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
@@ -73,5 +75,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

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

@@ -16,11 +16,9 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
 }
 
-
 // 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 TextInput = getComponentFromMap('TextInput');
@@ -96,30 +94,30 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <MuiPickersUtilsProvider utils={DayjsUtils}>
-    <KeyboardDatePicker
-      disableToolbar
-      variant='inline'
-      inputVariant='outlined'
-      placeholder={dateFormatInfo.dateFormatStringLC}
-      format={dateFormatInfo.dateFormatString}
-      mask={dateFormatInfo.dateFormatMask}
-      fullWidth
-      autoOk
-      required={required}
-      disabled={disabled}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={handleChange}
-      onBlur={!readOnly ? onBlur : undefined}
-      onAccept={handleAccept}
-    {{! pick new delimiters for mustache }}
-    {{=<% %>=}}
-      InputProps={{ ...testProp }}
-     <%={{ }}=%>     {{! revert delimiters for mustache }}
-    />
+        <KeyboardDatePicker
+          disableToolbar
+          variant='inline'
+          inputVariant='outlined'
+          placeholder={dateFormatInfo.dateFormatStringLC}
+          format={dateFormatInfo.dateFormatString}
+          mask={dateFormatInfo.dateFormatMask}
+          fullWidth
+          autoOk
+          required={required}
+          disabled={disabled}
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={handleChange}
+          onBlur={!readOnly ? onBlur : undefined}
+          onAccept={handleAccept}
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+          InputProps={{ ...testProp }}
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+        />
      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/DateTime/demo.stories.tsx.mustache

@@ -4,19 +4,18 @@ import type { Meta, StoryObj } from '@storybook/react';
 import {{COMPONENT_CLASS_NAME}} from './index';
 import { configProps, stateProps } from './mock';
 
-
 window.PCore = {
   ...window.PCore,
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-}
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
@@ -28,7 +27,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 [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -40,7 +39,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue);
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -53,7 +54,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
@@ -66,5 +67,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };

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

@@ -12,11 +12,9 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on this componentName
 }
 
-
 // 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 TextInput = getComponentFromMap('TextInput');
@@ -88,26 +86,26 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
       <MuiPickersUtilsProvider utils={DayjsUtils}>
-    <KeyboardDateTimePicker
-      variant='inline'
-      inputVariant='outlined'
-      fullWidth
-      autoOk
-      required={required}
-      disabled={disabled}
-      placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
-      format={`${dateFormatInfo.dateFormatString} hh:mm a`}
-      mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
-      minutesStep={5}
-      error={status === 'error'}
-      helperText={helperTextToDisplay}
-      size='small'
-      label={label}
-      value={value || null}
-      onChange={handleChange}
-      onAccept={handleAccept}
-      data-test-id={testId}
-    />
+        <KeyboardDateTimePicker
+          variant='inline'
+          inputVariant='outlined'
+          fullWidth
+          autoOk
+          required={required}
+          disabled={disabled}
+          placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}
+          format={`${dateFormatInfo.dateFormatString} hh:mm a`}
+          mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}
+          minutesStep={5}
+          error={status === 'error'}
+          helperText={helperTextToDisplay}
+          size='small'
+          label={label}
+          value={value || null}
+          onChange={handleChange}
+          onAccept={handleAccept}
+          data-test-id={testId}
+        />
      </MuiPickersUtilsProvider>
     </Styled{{COMPONENT_CLASS_NAME}}Wrapper>
   );

package/src/tasks/create/templates/SDK-React/field/Decimal/demo.stories.tsx.mustache

@@ -7,15 +7,15 @@ import { configProps, fieldMetadata } from './mock';
 window.PCore = {
   ...window.PCore,
   getEnvironmentInfo: (): any => {
-  return {
-    getUseLocale: () => {
-      return 'en-GB';
-    },
-    getLocale: () => {
-      return 'en-GB';
-    }
-  };
-}
+    return {
+      getUseLocale: () => {
+        return 'en-GB';
+      },
+      getLocale: () => {
+        return 'en-GB';
+      }
+    };
+  }
 };
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
@@ -27,7 +27,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 [value, setValue] = useState(configProps.value);
 
   const props = {
@@ -41,7 +41,9 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
             updateFieldValue: (propName, theValue) => {
               setValue(theValue?.toString());
             },
-            triggerFieldChange: () => {/* nothing */}
+            triggerFieldChange: () => {
+              /* nothing */
+            }
           };
         },
         getStateProps: () => {
@@ -60,7 +62,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = (args) => {
     }
   };
 
-  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />
+  return <{{COMPONENT_CLASS_NAME}} {...props} {...args} />;
 };
 
 Base{{COMPONENT_CLASS_NAME}}.args = {
@@ -73,6 +75,5 @@ Base{{COMPONENT_CLASS_NAME}}.args = {
   status: configProps.status,
   hideLabel: configProps.hideLabel,
   displayMode: configProps.displayMode,
-  validatemessage: configProps.validatemessage,
+  validatemessage: configProps.validatemessage
 };
-