@pega/dx-component-builder-sdk 8.23.16 → 8.23.17

package/src/tasks/create/templates/Constellation/field/Date/DateFormatter.js.mustache

@@ -1,13 +1,13 @@
 import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import localizedFormat from 'dayjs/plugin/localizedFormat';
-import utc from 'dayjs/plugin/utc';
-import tzone from 'dayjs/plugin/timezone';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
-dayjs.extend(tzone);
+dayjs.extend(timezone);
 
 const types = ['fromNow', 'customFormat'];
 
@@ -16,12 +16,12 @@ const types = ['fromNow', 'customFormat'];
 // value should be in ISO 8601 format.
 function DateFormatter(
   value,
-  { type = types[1], format = "DD/MM/YYYY", timezone } = {}
+  { type = types[1], format = "DD/MM/YYYY", tzone } = {}
 ) {
   if (!value) return value;
   switch (type) {
     case types[1]:
-      if (timezone) return dayjs(value).tz(timezone).format(format);
+      if (tzone) return dayjs(value).tz(tzone).format(format);
       return dayjs(value).format(format);
     case types[0]:
       return dayjs(value).from(dayjs());

package/src/tasks/create/templates/Constellation/field/Date/date.js.mustache

@@ -1,16 +1,16 @@
 /* eslint-disable no-undef */
 import dayjs from 'dayjs';
-import DateFormatter from './DateFormatter';
+import DateFormatter from './DateFormatter.js';
 
-const relativeTime = require('dayjs/plugin/relativeTime');
-const utc = require('dayjs/plugin/utc');
-const localizedFormat = require('dayjs/plugin/localizedFormat');
-const tzone = require('dayjs/plugin/timezone');
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
-dayjs.extend(tzone);
+dayjs.extend(timezone);
 
 function isIsoDate(str) {
   if (!/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z/.test(str)) return false;
@@ -372,8 +372,8 @@ export const getDateTimeOptions = (withSeconds, is12h = false) => {
   };
 };
 
-export function getCurrentTimezone(timezone) {
-  if (timezone) return timezone;
+export function getCurrentTimezone(tzone) {
+  if (tzone) return tzone;
   return PCore?.getLocaleUtils?.().getTimeZoneInUse?.();
 }
 

package/src/tasks/create/templates/Constellation/field/Date/index.jsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import { useEffect, useState } from 'react';
 import { DateInput, FieldValueList, DateTimeDisplay, Text,  } from '@pega/cosmos-react-core';
 import PropTypes from 'prop-types';
@@ -222,7 +221,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   showWeekNumber: false,
   nextYearRange: "",
   previousYearRange: "",
-  testId: null,
+  testId: '',
   showAsFormattedText: false,
   additionalProps: {},
   displayMode: null,

package/src/tasks/create/templates/Constellation/field/Date/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/DateTime/date-time.js.mustache

@@ -1,25 +1,25 @@
 import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import localizedFormat from "dayjs/plugin/localizedFormat";
-import utc from "dayjs/plugin/utc";
-import tzone from "dayjs/plugin/timezone";
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
-dayjs.extend(tzone);
+dayjs.extend(timezone);
 
 const types = ["fromNow", "customFormat"];
 
 // value should be in ISO 8601 format.
 function DateFormatter(
   value,
-  { type = types[1], format = "DD/MM/YYYY", timezone, fieldType } = {}
+  { type = types[1], format = "DD/MM/YYYY", tzone, fieldType } = {}
 ) {
   if (!value) return value;
   switch (type) {
     case types[1]:
-      if (timezone && fieldType !== 'Date') return dayjs(value).tz(timezone).format(format); // Date only value should be formatted without timezone
+      if (tzone && fieldType !== 'Date') return dayjs(value).tz(tzone).format(format); // Date only value should be formatted without timezone
       return dayjs(value).format(format);
     case types[0]:
       return dayjs(value).from(dayjs());
@@ -74,9 +74,9 @@ export default {
         })
       : value;
   },
-  convertFromTimezone: (value, timezone) =>
-  value && timezone
-  ? dayjs.tz(value, timezone).utc().format("YYYY-MM-DDTHH:mm:ss[Z]")
+  convertFromTimezone: (value, tzone) =>
+  value && tzone
+  ? dayjs.tz(value, tzone).utc().format("YYYY-MM-DDTHH:mm:ss[Z]")
   : value,
   Date: (value, options) =>
     DateFormatter(value, { type: "customFormat", ...options }),

package/src/tasks/create/templates/Constellation/field/DateTime/date-utils.js.mustache

@@ -1,13 +1,13 @@
-/* eslint-disable no-undef */
 import dayjs from "dayjs";
-
-const relativeTime = require("dayjs/plugin/relativeTime");
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
-
-const utc = require("dayjs/plugin/utc");
-
+dayjs.extend(localizedFormat);
 dayjs.extend(utc);
+dayjs.extend(timezone);
 
 /**
  * Return relative time in fromNow for the given datetime

package/src/tasks/create/templates/Constellation/field/DateTime/date.js.mustache

@@ -1,11 +1,13 @@
-/* eslint-disable no-undef */
 import dayjs from 'dayjs';
-
-const relativeTime = require('dayjs/plugin/relativeTime');
-const utc = require('dayjs/plugin/utc');
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import utc from 'dayjs/plugin/utc.js';
+import timezone from 'dayjs/plugin/timezone.js';
 
 dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
 dayjs.extend(utc);
+dayjs.extend(timezone);
 
 export const datetimedisplayformatter = (formatter) => {
   const objectvalues = {};

package/src/tasks/create/templates/Constellation/field/DateTime/index.jsx.mustache

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import { useEffect, useState } from 'react';
 import { DateTimeInput, FieldValueList, DateTimeDisplay, Text } from "@pega/cosmos-react-core";
 import PropTypes from "prop-types";
@@ -218,7 +217,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   showWeekNumber: false,
   nextYearRange: "",
   previousYearRange: "",
-  testId: null,
+  testId: "",
   additionalProps: {},
   displayMode: null,
   variant: "inline",

package/src/tasks/create/templates/Constellation/field/DateTime/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Decimal/index.jsx.mustache

@@ -100,7 +100,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
     }
 
 
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
 
     const displayComp =
@@ -128,7 +128,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
         />
       );
 
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
@@ -225,7 +225,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   decimalPrecision: '',
   showGroupSeparators: false,
   displayMode: null,

package/src/tasks/create/templates/Constellation/field/Decimal/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Decimal-Currency/index.jsx.mustache

@@ -95,7 +95,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
 
     const displayValue = !value && value !== 0 ? undefined : Number(currencyValue);
 
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
 
     displayComp = (
@@ -151,7 +151,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       );
     }
 
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
@@ -251,7 +251,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   allowDecimals: true,
   currencyISOCode: 'USD',
   isoCodeSelection: 'constant',
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/src/tasks/create/templates/Constellation/field/Decimal-Currency/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/index.jsx.mustache

@@ -101,7 +101,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       }
     }
 
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
 
     displayComp = (
@@ -132,7 +132,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       );
     }
 
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
 
     return displayMode === 'DISPLAY_ONLY' ? (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -149,7 +149,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
     );
   }
 
-  {{! pick new delimiteres for mustache }}
+  {{! pick new delimiters for mustache }}
   {{=<% %>=}}
 
   if (displayMode === 'STACKED_LARGE_VAL') {
@@ -164,7 +164,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       />
     );
 
-  <%={{ }}=%>     {{! revert delimiteres for mustache }}
+  <%={{ }}=%>     {{! revert delimiters for mustache }}
 
     return (
       <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
@@ -243,7 +243,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   decimalPrecision: '',
   showGroupSeparators: false,
   additionalProps: {},

package/src/tasks/create/templates/Constellation/field/Decimal-Percentage/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Integer/index.jsx.mustache

@@ -112,7 +112,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
       }
     }
 
-    {{! pick new delimiteres for mustache }}
+    {{! pick new delimiters for mustache }}
     {{=<% %>=}}
 
     const displayComp =
@@ -141,7 +141,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
         />
       );
 
-    <%={{ }}=%>     {{! revert delimiteres for mustache }}
+    <%={{ }}=%>     {{! revert delimiters for mustache }}
 
     switch (displayMode) {
       case 'DISPLAY_ONLY': {
@@ -275,7 +275,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   showGroupSeparators: false,
   displayMode: null,
   displayAs: 'input',

package/src/tasks/create/templates/Constellation/field/Integer/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Picklist/index.jsx.mustache

@@ -305,7 +305,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   helperText: '',
   datasource: [],
   listType: '',

package/src/tasks/create/templates/Constellation/field/Picklist/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Text/index.jsx.mustache

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { Input, Label } from '@pega/cosmos-react-core';
+import { Input } from '@pega/cosmos-react-core';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 
@@ -9,7 +9,7 @@ import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
 // 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
 const {{COMPONENT_CLASS_NAME}} = props => {
-  const { getPConnect, value, placeholder, disabled, readOnly, required, label, testId } = props;
+  const { getPConnect, value, placeholder, disabled, readOnly, required, label, hideLabel, testId } = props;
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -22,9 +22,10 @@ const {{COMPONENT_CLASS_NAME}} = props => {
 
   return (
     <Styled{{COMPONENT_CLASS_NAME}}Wrapper>
-      <Label>{label}</Label>
       <Input
         type='text'
+        label={label}
+        labelHidden={hideLabel}
         value={value}
         placeholder={placeholder}
         disabled={disabled}
@@ -39,15 +40,17 @@ const {{COMPONENT_CLASS_NAME}} = props => {
 
 {{COMPONENT_CLASS_NAME}}.defaultProps = {
   value: '',
+  hideLabel: false,
   placeholder: '',
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null
+  testId: ''
 };
 
 {{COMPONENT_CLASS_NAME}}.propTypes = {
   label: PropTypes.string,
+  hideLabel: PropTypes.bool,
   value: PropTypes.string,
   placeholder: PropTypes.string,
   getPConnect: PropTypes.func.isRequired,

package/src/tasks/create/templates/Constellation/field/Text/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Text-Email/index.jsx.mustache

@@ -199,7 +199,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   displayMode: null,
   additionalProps: {},
   variant: 'inline',

package/src/tasks/create/templates/Constellation/field/Text-Email/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Text-Input/index.jsx.mustache

@@ -100,7 +100,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
     } else if (!hasSuggestions && status !== 'success') {
       setStatus(validatemessage !== '' ? 'error' : undefined);
     }
-  }, [validatemessage, hasSuggestions]);
+  }, [validatemessage, hasSuggestions, status]);
 
   const onResolveSuggestionHandler = (accepted) => {
     suggestionsHandler(accepted, pConn, setStatus);
@@ -204,7 +204,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   fieldMetadata: {},
   additionalProps: {},
   displayMode: null,

package/src/tasks/create/templates/Constellation/field/Text-Input/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });

package/src/tasks/create/templates/Constellation/field/Text-Paragraph/index.jsx.mustache

@@ -197,7 +197,7 @@ const {{COMPONENT_CLASS_NAME}} = props => {
   disabled: false,
   readOnly: false,
   required: false,
-  testId: null,
+  testId: '',
   displayMode: null,
   fieldMetadata: {},
   additionalProps: {},

package/src/tasks/create/templates/Constellation/field/Text-Paragraph/styles.js.mustache

@@ -1,7 +1,14 @@
-import styled, { css } from 'styled-components';
+// utilizing theming, comment out, if want individual style
+import styled from 'styled-components';
+import { Configuration } from '@pega/cosmos-react-core';
 
-export default styled.div(() => {
-  return css`
-    margin: 0px 0px;
-  `;
-});
+export default styled(Configuration)``;
+
+// individual style, comment out above, and uncomment here and add styles
+// import styled, { css } from 'styled-components';
+//
+// export default styled.div(() => {
+//  return css`
+//    margin: 0px 0;
+//  `;
+// });