@pega/react-sdk-components 0.23.26 → 0.23.27

package/lib/components/field/Currency/currency-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"currency-utils.js","sourceRoot":"","sources":["../../../../src/components/field/Currency/currency-utils.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAC,MAAM,mCAAmC,CAAC;AAC5E,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAInF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAEtD,MAAM,cAAc,GAAG,KAAK,CAAC,kBAAkB,EAAE,CAAC,YAAY,EAAE,IAAI,OAAO,CAAC;IAE5E,IAAI,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;IACvC,IAAI,WAAW,GAAG,cAAc,CAAC;IAEjC,iEAAiE;IACjE,8BAA8B;IAC9B,+BAA+B;IAC/B,IAAI,SAAS,EAAE;QACb,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;YACnC,WAAW,GAAG,OAAO,CAAC;SACvB;aAAM;YACL,iFAAiF;YACjF,MAAM,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC;YAC7C,YAAY,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;SAC9C;KACF;SAAM,IAAI,cAAc,EAAE;QACzB,6EAA6E;QAC7E,MAAM,WAAW,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC9D,YAAY,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;KAC9C;SAAM;QACL,oDAAoD;QACpD,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;KACpC;IAED,gEAAgE;IAChE,IAAI,CAAC,YAAY,EAAE;QACjB,YAAY,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;KACvC;IAED,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,MAAM,eAAe,GAAG,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAA;IAErF,OAAO,eAAe,CAAC;AAEzB,CAAC,CAAA;AAGD,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACzD,MAAM,gBAAgB,GAAG;QACvB,iBAAiB,EAAE,GAAG;QACtB,mBAAmB,EAAE,GAAG;QACxB,sBAAsB,EAAE,GAAG;KAC5B,CAAA;IAED,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAG,OAAO,CAAC;IAC1B,MAAM,eAAe,GAAG,aAAa,CAAC,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;IAE9E,sDAAsD;IAEtD,4DAA4D;IAC5D,wCAAwC;IACxC,kCAAkC;IAClC,0CAA0C;IAE1C,gBAAgB,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IACxD,gBAAgB,CAAC,sBAAsB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAC7D,gBAAgB,CAAC,mBAAmB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAE1D,sNAAsN;IAEtN,OAAO,gBAAgB,CAAC;AAE1B,CAAC,CAAA","sourcesContent":["// eslint-disable-next-line import/no-named-default\nimport { default as CurrencyAlias} from '../../helpers/formatters/Currency';\n// eslint-disable-next-line import/no-named-default\nimport { default as CurrencyMapAlias } from '../../helpers/formatters/CurrencyMap';\n\ndeclare const PCore: any;\n\nexport const getCurrencyOptions = (inISOCode: string) => {\n\n  const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || 'en-US';\n\n  let currMapToUse = CurrencyMapAlias.US;\n  let localeToUse = operatorLocale;\n\n  // Determine CurrencyMap lookup based on ISO code (if specified).\n  //  If no ISO code, use locale\n  //  If no locale, default to US\n  if (inISOCode) {\n    if (inISOCode === \"EUR\") {\n      currMapToUse = CurrencyMapAlias.NL;\n      localeToUse = \"nl-NL\";\n    } else {\n      // For all other ISO codes, use first 2 characters as the lookup from CurrencyMap\n      const countryCode = inISOCode.substring(0,2);\n      currMapToUse = CurrencyMapAlias[countryCode];\n    }\n  } else if (operatorLocale) {\n    // No ISO Code so check for operator locale (and force upper case for lookup)\n    const countryCode = operatorLocale.substring(3).toUpperCase();\n    currMapToUse = CurrencyMapAlias[countryCode];\n  } else {\n    // no ISO code and no operator locale, default to US\n    currMapToUse = CurrencyMapAlias.US;\n  }\n\n  // If no currMapToUse at this point, default to US as a failsafe\n  if (!currMapToUse) {\n    currMapToUse = CurrencyMapAlias['US'];\n  }\n\n  const theCode = currMapToUse.currencyCode.substring(0, 3);\n  const currencyOptions = { locale: localeToUse, style: \"currency\", currency: theCode }\n\n  return currencyOptions;\n\n}\n\n\nexport const getCurrencyCharacters = (inISOCode: string) => {\n  const theCurrencyChars = {\n    theCurrencySymbol: '$',\n    theDecimalIndicator: '.',\n    theDigitGroupSeparator: ','\n  }\n\n  const theCurrencyOptions = getCurrencyOptions(inISOCode);\n\n  const testValue = 1234.56;\n  const formattedString = CurrencyAlias.Currency(testValue, theCurrencyOptions);\n\n  // console.log(`formattedString: ${formattedString}`);\n\n  // Here, we have the formatted string (ex: $1,234.56) where:\n  //  Currency symbol = formattedString[0]\n  //  Separator = formattedString[2]\n  //  DecimalIndicator = formattedString[6];\n\n  theCurrencyChars.theCurrencySymbol = formattedString[0];\n  theCurrencyChars.theDigitGroupSeparator = formattedString[2];\n  theCurrencyChars.theDecimalIndicator = formattedString[6];\n\n  // console.log(`theCurrencyChars: symbol: ${theCurrencyChars.theCurrencySymbol} | theDigitGroupSeparator: ${theCurrencyChars.theDigitGroupSeparator} | theDecimalIndicator: ${theCurrencyChars.theDecimalIndicator}`);\n\n  return theCurrencyChars;\n\n}\n"]}
+{"version":3,"file":"currency-utils.js","sourceRoot":"","sources":["../../../../src/components/field/Currency/currency-utils.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC7E,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAEnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACtD,MAAM,cAAc,GAAG,KAAK,CAAC,kBAAkB,EAAE,CAAC,YAAY,EAAE,IAAI,KAAK,CAAC,kBAAkB,EAAE,CAAC,SAAS,EAAE,IAAI,OAAO,CAAC;IAEtH,IAAI,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;IACvC,IAAI,WAAW,GAAG,cAAc,CAAC;IAEjC,iEAAiE;IACjE,8BAA8B;IAC9B,+BAA+B;IAC/B,IAAI,SAAS,EAAE;QACb,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;YACnC,WAAW,GAAG,OAAO,CAAC;SACvB;aAAM;YACL,iFAAiF;YACjF,MAAM,WAAW,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;YAC9C,YAAY,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;SAC9C;KACF;SAAM,IAAI,cAAc,EAAE;QACzB,6EAA6E;QAC7E,MAAM,WAAW,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;QAC9D,YAAY,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;KAC9C;SAAM;QACL,oDAAoD;QACpD,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;KACpC;IAED,gEAAgE;IAChE,IAAI,CAAC,YAAY,EAAE;QACjB,YAAY,GAAG,gBAAgB,CAAC,EAAE,CAAC;KACpC;IAED,MAAM,OAAO,GAAG,YAAY,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAiB,EAAE,EAAE;IACzD,MAAM,gBAAgB,GAAG;QACvB,iBAAiB,EAAE,GAAG;QACtB,mBAAmB,EAAE,GAAG;QACxB,sBAAsB,EAAE,GAAG;KAC5B,CAAC;IAEF,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAG,OAAO,CAAC;IAC1B,MAAM,eAAe,GAAG,aAAa,CAAC,QAAQ,CAAC,SAAS,EAAE,kBAAkB,CAAC,CAAC;IAE9E,sDAAsD;IAEtD,4DAA4D;IAC5D,wCAAwC;IACxC,kCAAkC;IAClC,0CAA0C;IAE1C,gBAAgB,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IACxD,gBAAgB,CAAC,sBAAsB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAC7D,gBAAgB,CAAC,mBAAmB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAC;IAE1D,sNAAsN;IAEtN,OAAO,gBAAgB,CAAC;AAC1B,CAAC,CAAC","sourcesContent":["// eslint-disable-next-line import/no-named-default\nimport { default as CurrencyAlias } from '../../helpers/formatters/Currency';\n// eslint-disable-next-line import/no-named-default\nimport { default as CurrencyMapAlias } from '../../helpers/formatters/CurrencyMap';\n\nexport const getCurrencyOptions = (inISOCode: string) => {\n  const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || PCore.getEnvironmentInfo().getLocale() || 'en-US';\n\n  let currMapToUse = CurrencyMapAlias.US;\n  let localeToUse = operatorLocale;\n\n  // Determine CurrencyMap lookup based on ISO code (if specified).\n  //  If no ISO code, use locale\n  //  If no locale, default to US\n  if (inISOCode) {\n    if (inISOCode === 'EUR') {\n      currMapToUse = CurrencyMapAlias.NL;\n      localeToUse = 'nl-NL';\n    } else {\n      // For all other ISO codes, use first 2 characters as the lookup from CurrencyMap\n      const countryCode = inISOCode.substring(0, 2);\n      currMapToUse = CurrencyMapAlias[countryCode];\n    }\n  } else if (operatorLocale) {\n    // No ISO Code so check for operator locale (and force upper case for lookup)\n    const countryCode = operatorLocale.substring(3).toUpperCase();\n    currMapToUse = CurrencyMapAlias[countryCode];\n  } else {\n    // no ISO code and no operator locale, default to US\n    currMapToUse = CurrencyMapAlias.US;\n  }\n\n  // If no currMapToUse at this point, default to US as a failsafe\n  if (!currMapToUse) {\n    currMapToUse = CurrencyMapAlias.US;\n  }\n\n  const theCode = currMapToUse.currencyCode.substring(0, 3);\n  return { locale: localeToUse, style: 'currency', currency: theCode };\n};\n\nexport const getCurrencyCharacters = (inISOCode: string) => {\n  const theCurrencyChars = {\n    theCurrencySymbol: '$',\n    theDecimalIndicator: '.',\n    theDigitGroupSeparator: ','\n  };\n\n  const theCurrencyOptions = getCurrencyOptions(inISOCode);\n\n  const testValue = 1234.56;\n  const formattedString = CurrencyAlias.Currency(testValue, theCurrencyOptions);\n\n  // console.log(`formattedString: ${formattedString}`);\n\n  // Here, we have the formatted string (ex: $1,234.56) where:\n  //  Currency symbol = formattedString[0]\n  //  Separator = formattedString[2]\n  //  DecimalIndicator = formattedString[6];\n\n  theCurrencyChars.theCurrencySymbol = formattedString[0];\n  theCurrencyChars.theDigitGroupSeparator = formattedString[2];\n  theCurrencyChars.theDecimalIndicator = formattedString[6];\n\n  // console.log(`theCurrencyChars: symbol: ${theCurrencyChars.theCurrencySymbol} | theDigitGroupSeparator: ${theCurrencyChars.theDigitGroupSeparator} | theDecimalIndicator: ${theCurrencyChars.theDecimalIndicator}`);\n\n  return theCurrencyChars;\n};\n"]}

package/lib/components/field/Date/Date.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-export default function Date(props: any): JSX.Element;
+import { PConnFieldProps } from '../../../types/PConnProps';
+interface DateProps extends PConnFieldProps {
+}
+export default function Date(props: DateProps): JSX.Element;
+export {};
 //# sourceMappingURL=Date.d.ts.map

package/lib/components/field/Date/Date.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Date.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,KAAA,eAsFjC"}
+{"version":3,"file":"Date.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAO5D,UAAU,SAAU,SAAQ,eAAe;CAE1C;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,eA+F5C"}

package/lib/components/field/Date/Date.js

@@ -1,11 +1,17 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { KeyboardDatePicker } from '@material-ui/pickers';
-import TextInput from '../TextInput';
 import handleEvent from '../../helpers/event-utils';
-import FieldValueList from '../../designSystemExtension/FieldValueList';
-import { format } from '../../helpers/formatters/';
+import { format } from '../../helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
+// Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server
+function getFormattedDate(date) {
+    return `${date.$y.toString()}-${(date.$M + 1).toString().padStart(2, '0')}-${date.$D.toString().padStart(2, '0')}`;
+}
 export default function Date(props) {
+    // Get emitted components from map (so we can get any override that may exist)
+    const TextInput = getComponentFromMap('TextInput');
+    const FieldValueList = getComponentFromMap('FieldValueList');
     const { getPConnect, label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode, hideLabel } = props;
     const pConn = getPConnect();
     const actions = pConn.getActionsApi();
@@ -19,29 +25,35 @@ export default function Date(props) {
     dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
     dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
     if (displayMode === 'LABELS_LEFT') {
-        const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedDate });
+        const formattedDate = format(props.value, 'date', {
+            format: dateFormatInfo.dateFormatString
+        });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedDate });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedDate, variant: 'stacked' });
+        const formattedDate = format(props.value, 'date', {
+            format: dateFormatInfo.dateFormatString
+        });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedDate, variant: 'stacked' });
     }
     if (readOnly) {
         // const theReadOnlyComp = <TextInput props />
-        return React.createElement(TextInput, { ...props });
+        return _jsx(TextInput, { ...props });
     }
     let testProp = {};
     testProp = {
         'data-test-id': testId
     };
     const handleChange = date => {
-        const changeValue = date && date.isValid() ? date.toISOString() : null;
-        onChange({ value: changeValue });
+        if (date && date.isValid()) {
+            onChange({ value: getFormattedDate(date) });
+        }
     };
     const handleAccept = date => {
-        const changeValue = date && date.isValid() ? date.toISOString() : null;
-        handleEvent(actions, 'changeNblur', propName, changeValue);
+        if (date && date.isValid()) {
+            handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));
+        }
     };
-    return (React.createElement(KeyboardDatePicker, { disableToolbar: true, variant: 'inline', inputVariant: 'outlined', placeholder: dateFormatInfo.dateFormatStringLC, format: dateFormatInfo.dateFormatString, mask: dateFormatInfo.dateFormatMask, fullWidth: true, autoOk: true, required: required, disabled: disabled, error: status === 'error', helperText: helperTextToDisplay, size: 'small', label: label, value: value || null, onChange: handleChange, onBlur: !readOnly ? onBlur : undefined, onAccept: handleAccept, InputProps: { ...testProp } }));
+    return (_jsx(KeyboardDatePicker, { disableToolbar: true, variant: 'inline', inputVariant: 'outlined', placeholder: dateFormatInfo.dateFormatStringLC, format: dateFormatInfo.dateFormatString, mask: dateFormatInfo.dateFormatMask, fullWidth: true, autoOk: true, required: required, disabled: disabled, error: status === 'error', helperText: helperTextToDisplay, size: 'small', label: label, value: value || null, onChange: handleChange, onBlur: !readOnly ? onBlur : undefined, onAccept: handleAccept, InputProps: { ...testProp } }));
 }
 //# sourceMappingURL=Date.js.map

package/lib/components/field/Date/Date.js.map

@@ -1 +1 @@
-{"version":3,"file":"Date.js","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { KeyboardDatePicker } from '@material-ui/pickers';\nimport TextInput from '../TextInput';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\nimport { format } from '../../helpers/formatters/';\nimport { dateFormatInfoDefault, getDateFormatInfo} from '../../helpers/date-format-utils';\n\nexport default function Date(props) {\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps().value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo()\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n\n  if (displayMode === 'LABELS_LEFT') {\n    const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    // const theReadOnlyComp = <TextInput props />\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const handleChange = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    onChange({ value: changeValue });\n  };\n\n  const handleAccept = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    handleEvent(actions, 'changeNblur', propName, changeValue);\n  };\n\n  return (\n    <KeyboardDatePicker\n      disableToolbar\n      variant='inline'\n      inputVariant='outlined'\n      placeholder={dateFormatInfo.dateFormatStringLC}\n      format={dateFormatInfo.dateFormatString}\n      mask={dateFormatInfo.dateFormatMask}\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\n      error={status === 'error'}\n      helperText={helperTextToDisplay}\n      size='small'\n      label={label}\n      value={value || null}\n      onChange={handleChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      onAccept={handleAccept}\n      InputProps={{ ...testProp }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Date.js","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":"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","sourcesContent":["import { KeyboardDatePicker } from '@material-ui/pickers';\n\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\n// Will return the date string in YYYY-MM-DD format which we'll be POSTing to the server\nfunction getFormattedDate(date) {\n  return `${date.$y.toString()}-${(date.$M + 1).toString().padStart(2, '0')}-${date.$D.toString().padStart(2, '0')}`;\n}\n\ninterface DateProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Date here\n}\n\nexport default function Date(props: DateProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo();\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n  if (displayMode === 'LABELS_LEFT') {\n    const formattedDate = format(props.value, 'date', {\n      format: dateFormatInfo.dateFormatString\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDate = format(props.value, 'date', {\n      format: dateFormatInfo.dateFormatString\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    // const theReadOnlyComp = <TextInput props />\n    return <TextInput {...props} />;\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const handleChange = date => {\n    if (date && date.isValid()) {\n      onChange({ value: getFormattedDate(date) });\n    }\n  };\n\n  const handleAccept = date => {\n    if (date && date.isValid()) {\n      handleEvent(actions, 'changeNblur', propName, getFormattedDate(date));\n    }\n  };\n\n  return (\n    <KeyboardDatePicker\n      disableToolbar\n      variant='inline'\n      inputVariant='outlined'\n      placeholder={dateFormatInfo.dateFormatStringLC}\n      format={dateFormatInfo.dateFormatString}\n      mask={dateFormatInfo.dateFormatMask}\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\n      error={status === 'error'}\n      helperText={helperTextToDisplay}\n      size='small'\n      label={label}\n      value={value || null}\n      onChange={handleChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      onAccept={handleAccept}\n      InputProps={{ ...testProp }}\n    />\n  );\n}\n"]}

package/lib/components/field/DateTime/DateTime.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-export default function DateTime(props: any): JSX.Element;
+import { PConnFieldProps } from '../../../types/PConnProps';
+interface DateTimeProps extends PConnFieldProps {
+}
+export default function DateTime(props: DateTimeProps): JSX.Element;
+export {};
 //# sourceMappingURL=DateTime.d.ts.map

package/lib/components/field/DateTime/DateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":";AAQA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,KAAA,eAmFrC"}
+{"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,aAAc,SAAQ,eAAe;CAE9C;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,eA0FpD"}

package/lib/components/field/DateTime/DateTime.js

@@ -1,11 +1,13 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { KeyboardDateTimePicker } from '@material-ui/pickers';
-import TextInput from '../TextInput';
 import handleEvent from '../../helpers/event-utils';
-import FieldValueList from '../../designSystemExtension/FieldValueList';
-import { format } from '../../helpers/formatters/';
+import { format } from '../../helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 export default function DateTime(props) {
+    // Get emitted components from map (so we can get any override that may exist)
+    const TextInput = getComponentFromMap('TextInput');
+    const FieldValueList = getComponentFromMap('FieldValueList');
     const { getPConnect, label, required, disabled, value = '', validatemessage, status, onChange, readOnly, testId, helperText, displayMode, hideLabel } = props;
     const pConn = getPConnect();
     const actions = pConn.getActionsApi();
@@ -19,16 +21,20 @@ export default function DateTime(props) {
     dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
     dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
     if (displayMode === 'LABELS_LEFT') {
-        const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedDateTime });
+        const formattedDateTime = format(props.value, 'datetime', {
+            format: `${dateFormatInfo.dateFormatString} hh:mm a`
+        });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedDateTime });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedDateTime, variant: 'stacked' });
+        const formattedDateTime = format(props.value, 'datetime', {
+            format: `${dateFormatInfo.dateFormatString} hh:mm a`
+        });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedDateTime, variant: 'stacked' });
     }
     if (readOnly) {
         const formattedDateTime = format(props.value, 'datetime');
-        return React.createElement(TextInput, { ...props, value: formattedDateTime });
+        return _jsx(TextInput, { ...props, value: formattedDateTime });
     }
     const handleChange = date => {
         const changeValue = date && date.isValid() ? date.toISOString() : null;
@@ -42,6 +48,6 @@ export default function DateTime(props) {
     // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field
     //       try an older version of the lib or use DateTimePicker
     //
-    return (React.createElement(KeyboardDateTimePicker, { variant: 'inline', inputVariant: 'outlined', fullWidth: true, autoOk: true, 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 }));
+    return (_jsx(KeyboardDateTimePicker, { variant: 'inline', inputVariant: 'outlined', fullWidth: true, autoOk: true, 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 }));
 }
 //# sourceMappingURL=DateTime.js.map

package/lib/components/field/DateTime/DateTime.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTime.js","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { KeyboardDateTimePicker } from '@material-ui/pickers';\nimport TextInput from '../TextInput';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\nimport { format } from '../../helpers/formatters/';\nimport { dateFormatInfoDefault, getDateFormatInfo} from '../../helpers/date-format-utils';\n\nexport default function DateTime(props) {\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps().value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo()\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n\n  if (displayMode === 'LABELS_LEFT') {\n    const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDateTime = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    const formattedDateTime = format(props.value, 'datetime');\n    return <TextInput {...props} value={formattedDateTime} />;\n  }\n\n  const handleChange = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    onChange({ value: changeValue });\n  };\n\n  const handleAccept = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    handleEvent(actions, 'changeNblur', propName, changeValue);\n  };\n\n  //\n  // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field\n  //       try an older version of the lib or use DateTimePicker\n  //\n\n  return (\n    <KeyboardDateTimePicker\n      variant='inline'\n      inputVariant='outlined'\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\n      placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}\n      format={`${dateFormatInfo.dateFormatString} hh:mm a`}\n      mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}\n      minutesStep={5}\n      error={status === 'error'}\n      helperText={helperTextToDisplay}\n      size='small'\n      label={label}\n      value={value || null}\n      onChange={handleChange}\n      onAccept={handleAccept}\n      data-test-id={testId}\n    />\n  );\n}\n"]}
+{"version":3,"file":"DateTime.js","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":"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","sourcesContent":["import { KeyboardDateTimePicker } from '@material-ui/pickers';\n\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { dateFormatInfoDefault, getDateFormatInfo } from '../../helpers/date-format-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\ninterface DateTimeProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on DateTime here\n}\n\nexport default function DateTime(props: DateTimeProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const TextInput = getComponentFromMap('TextInput');\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  // Start with default dateFormatInfo\n  const dateFormatInfo = dateFormatInfoDefault;\n  // and then update, as needed, based on locale, etc.\n  const theDateFormat = getDateFormatInfo();\n  dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;\n  dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;\n  dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;\n\n  if (displayMode === 'LABELS_LEFT') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    const formattedDateTime = format(props.value, 'datetime', {\n      format: `${dateFormatInfo.dateFormatString} hh:mm a`\n    });\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedDateTime} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    const formattedDateTime = format(props.value, 'datetime');\n    return <TextInput {...props} value={formattedDateTime} />;\n  }\n\n  const handleChange = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    onChange({ value: changeValue });\n  };\n\n  const handleAccept = date => {\n    const changeValue = date && date.isValid() ? date.toISOString() : null;\n    handleEvent(actions, 'changeNblur', propName, changeValue);\n  };\n\n  //\n  // TODO: Keyboard doesn't work in the minute field, it updates one digit then jump to am/pm field\n  //       try an older version of the lib or use DateTimePicker\n  //\n\n  return (\n    <KeyboardDateTimePicker\n      variant='inline'\n      inputVariant='outlined'\n      fullWidth\n      autoOk\n      required={required}\n      disabled={disabled}\n      placeholder={`${dateFormatInfo.dateFormatStringLC} hh:mm a`}\n      format={`${dateFormatInfo.dateFormatString} hh:mm a`}\n      mask={`${dateFormatInfo.dateFormatMask} __:__ _m`}\n      minutesStep={5}\n      error={status === 'error'}\n      helperText={helperTextToDisplay}\n      size='small'\n      label={label}\n      value={value || null}\n      onChange={handleChange}\n      onAccept={handleAccept}\n      data-test-id={testId}\n    />\n  );\n}\n"]}

package/lib/components/field/Decimal/Decimal.d.ts

@@ -1,3 +1,10 @@
 /// <reference types="react" />
-export default function Decimal(props: any): JSX.Element;
+import { PConnFieldProps } from '../../../types/PConnProps';
+interface DecimalProps extends PConnFieldProps {
+    currencyISOCode?: string;
+    decimalPrecision?: number;
+    showGroupSeparators?: string;
+}
+export default function Decimal(props: DecimalProps): JSX.Element;
+export {};
 //# sourceMappingURL=Decimal.d.ts.map

package/lib/components/field/Decimal/Decimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Decimal.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":";AAKA,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,KAAA,eA+CpC"}
+{"version":3,"file":"Decimal.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAI5D,UAAU,YAAa,SAAQ,eAAe;IAE5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,eAiFlD"}

package/lib/components/field/Decimal/Decimal.js

@@ -1,19 +1,41 @@
-import React from 'react';
-import { TextField } from '@material-ui/core';
-import TextInput from '../TextInput';
-import FieldValueList from '../../designSystemExtension/FieldValueList';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import CurrencyTextField from '@unicef/material-ui-currency-textfield';
+import { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';
+import handleEvent from '../../helpers/event-utils';
+import { format } from '../../helpers/formatters';
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 export default function Decimal(props) {
-    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, helperText, displayMode, hideLabel } = props;
+    // Get emitted components from map (so we can get any override that may exist)
+    const FieldValueList = getComponentFromMap('FieldValueList');
+    const { getPConnect, label, required, disabled, value = '', validatemessage, status, 
+    /* onChange, onBlur, */
+    readOnly, helperText, displayMode, hideLabel, currencyISOCode = 'USD', decimalPrecision = 2, showGroupSeparators = true, testId, placeholder } = props;
+    const pConn = getPConnect();
+    const actions = pConn.getActionsApi();
+    const propName = pConn.getStateProps().value;
     const helperTextToDisplay = validatemessage || helperText;
+    const [theCurrDec, setCurrDec] = useState('.');
+    const [theCurrSep, setCurrSep] = useState(',');
+    useEffect(() => {
+        const theSymbols = getCurrencyCharacters(currencyISOCode);
+        setCurrDec(theSymbols.theDecimalIndicator);
+        setCurrSep(theSymbols.theDigitGroupSeparator);
+    }, [currencyISOCode]);
+    const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
+    const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
     if (displayMode === 'LABELS_LEFT') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
+        return _jsx(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue, variant: 'stacked' });
     }
-    if (readOnly) {
-        return React.createElement(TextInput, { ...props });
+    const testProp = {
+        'data-test-id': testId
+    };
+    function decimalOnBlur(event, inValue) {
+        handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
     }
-    return (React.createElement(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: onChange, onBlur: !readOnly ? onBlur : undefined, error: status === 'error', label: label, value: value, type: 'text', inputProps: { inputMode: 'decimal', pattern: '[0-9]*' } }));
+    return (_jsx(CurrencyTextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: placeholder ?? '', size: 'small', required: required, disabled: disabled, error: status === 'error', label: label, value: value, readOnly: !!readOnly, type: 'text', outputFormat: 'number', textAlign: 'left', InputProps: { inputProps: { ...testProp } }, currencySymbol: '', decimalCharacter: theCurrDec, digitGroupSeparator: showGroupSeparators ? theCurrSep : '', decimalPlaces: decimalPrecision, onBlur: !readOnly ? decimalOnBlur : undefined }));
 }
 //# sourceMappingURL=Decimal.js.map

package/lib/components/field/Decimal/Decimal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Decimal.js","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK;IACnC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,UAAU,EACV,WAAW,EACX,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAI,WAAW,KAAK,aAAa,EAAE;QACjC,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;KACvE;IAED,IAAI,WAAW,KAAK,mBAAmB,EAAE;QACvC,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;KACzF;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GACvD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\nexport default function Decimal(props) {\n  const {\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    onChange,\n    onBlur,\n    readOnly,\n    helperText,\n    displayMode,\n    hideLabel\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  if (displayMode === 'LABELS_LEFT') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;\n  }\n\n  if (readOnly) {\n    return <TextInput {...props} />;\n  }\n\n  return (\n    <TextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={onChange}\n      onBlur={!readOnly ? onBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      type='text'\n      inputProps={{ inputMode: 'decimal', pattern: '[0-9]*' }}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Decimal.js","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,iBAAiB,MAAM,wCAAwC,CAAC;AAEvE,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACvF,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAYhF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAmB;IACjD,8EAA8E;IAC9E,MAAM,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAE7D,MAAM,EACJ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM;IACN,uBAAuB;IACvB,QAAQ,EACR,UAAU,EACV,WAAW,EACX,SAAS,EACT,eAAe,GAAG,KAAK,EACvB,gBAAgB,GAAG,CAAC,EACpB,mBAAmB,GAAG,IAAI,EAC1B,MAAM,EACN,WAAW,EACZ,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAI,KAAK,CAAC,aAAa,EAAU,CAAC,KAAK,CAAC;IACtD,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC/C,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;QAC1D,UAAU,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;QAC3C,UAAU,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,kBAAkB,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;IAC/D,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,gBAAgB,EAAE,CAAC,WAAW,EAAE,EAAE,kBAAkB,CAAC,CAAC;IAEjG,IAAI,WAAW,KAAK,aAAa,EAAE;QACjC,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,GAAI,CAAC;KAChF;IAED,IAAI,WAAW,KAAK,mBAAmB,EAAE;QACvC,OAAO,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,OAAO,EAAC,SAAS,GAAG,CAAC;KAClG;IAED,MAAM,QAAQ,GAAG;QACf,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,SAAS,aAAa,CAAC,KAAK,EAAE,OAAO;QACnC,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,KAAK,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAC5F,CAAC;IAED,OAAO,CACL,KAAC,iBAAiB,IAChB,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAE,WAAW,IAAI,EAAE,EAC9B,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,IAAI,EAAC,MAAM,EACX,YAAY,EAAC,QAAQ,EACrB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,EAAE,EAC3C,cAAc,EAAC,EAAE,EACjB,gBAAgB,EAAE,UAAU,EAC5B,mBAAmB,EAAE,mBAAmB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAC1D,aAAa,EAAE,gBAAgB,EAC/B,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,GAC7C,CACH,CAAC;AACJ,CAAC","sourcesContent":["import { useState, useEffect } from 'react';\nimport CurrencyTextField from '@unicef/material-ui-currency-textfield';\n\nimport { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport { PConnFieldProps } from '../../../types/PConnProps';\n\n// Using control from: https://github.com/unicef/material-ui-currency-textfield\n\ninterface DecimalProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Decimal here\n  currencyISOCode?: string;\n  decimalPrecision?: number;\n  showGroupSeparators?: string;\n}\n\nexport default function Decimal(props: DecimalProps) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const FieldValueList = getComponentFromMap('FieldValueList');\n\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    /* onChange, onBlur, */\n    readOnly,\n    helperText,\n    displayMode,\n    hideLabel,\n    currencyISOCode = 'USD',\n    decimalPrecision = 2,\n    showGroupSeparators = true,\n    testId,\n    placeholder\n  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = (pConn.getStateProps() as any).value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const [theCurrDec, setCurrDec] = useState('.');\n  const [theCurrSep, setCurrSep] = useState(',');\n\n  useEffect(() => {\n    const theSymbols = getCurrencyCharacters(currencyISOCode);\n    setCurrDec(theSymbols.theDecimalIndicator);\n    setCurrSep(theSymbols.theDigitGroupSeparator);\n  }, [currencyISOCode]);\n\n  const theCurrencyOptions = getCurrencyOptions(currencyISOCode);\n  const formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);\n\n  if (displayMode === 'LABELS_LEFT') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;\n  }\n\n  const testProp = {\n    'data-test-id': testId\n  };\n\n  function decimalOnBlur(event, inValue) {\n    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);\n  }\n\n  return (\n    <CurrencyTextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder={placeholder ?? ''}\n      size='small'\n      required={required}\n      disabled={disabled}\n      error={status === 'error'}\n      label={label}\n      value={value}\n      readOnly={!!readOnly}\n      type='text'\n      outputFormat='number'\n      textAlign='left'\n      InputProps={{ inputProps: { ...testProp } }}\n      currencySymbol=''\n      decimalCharacter={theCurrDec}\n      digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}\n      decimalPlaces={decimalPrecision}\n      onBlur={!readOnly ? decimalOnBlur : undefined}\n    />\n  );\n}\n"]}

package/lib/components/field/Decimal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/field/Decimal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Decimal';"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/field/Decimal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Decimal';\n"]}

package/lib/components/field/Dropdown/Dropdown.d.ts

@@ -1,3 +1,15 @@
 /// <reference types="react" />
-export default function Dropdown(props: any): JSX.Element | null;
+import { PConnFieldProps } from '../../../types/PConnProps';
+interface DropdownProps extends PConnFieldProps {
+    datasource?: any[];
+    onRecordChange?: any;
+    fieldMetadata?: any;
+    listType: string;
+    deferDatasource?: boolean;
+    datasourceMetadata?: any;
+    parameters?: any;
+    columns: any[];
+}
+export default function Dropdown(props: DropdownProps): JSX.Element | null;
+export {};
 //# sourceMappingURL=Dropdown.d.ts.map

package/lib/components/field/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAYA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,KAAA,sBAoFrC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAwC5D,UAAU,aAAc,SAAQ,eAAe;IAE7C,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC;IACnB,cAAc,CAAC,EAAE,GAAG,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,GAAG,CAAC;IACzB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,OAAO,EAAE,GAAG,EAAE,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,sBA4KpD"}

package/lib/components/field/Dropdown/Dropdown.js

@@ -1,27 +1,131 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { TextField } from '@material-ui/core';
 import MenuItem from '@material-ui/core/MenuItem';
+import isDeepEqual from 'fast-deep-equal/react';
 import Utils from '../../helpers/utils';
+import { getDataPage } from '../../helpers/data_page';
 import handleEvent from '../../helpers/event-utils';
-import FieldValueList from '../../designSystemExtension/FieldValueList';
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
+const flattenParameters = (params = {}) => {
+    const flatParams = {};
+    Object.keys(params).forEach(key => {
+        const { name, value: theVal } = params[key];
+        flatParams[name] = theVal;
+    });
+    return flatParams;
+};
+const preProcessColumns = columnList => {
+    return columnList.map(col => {
+        const tempColObj = { ...col };
+        tempColObj.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+        return tempColObj;
+    });
+};
+const getDisplayFieldsMetaData = columnList => {
+    const displayColumns = columnList.filter(col => col.display === 'true');
+    const metaDataObj = { key: '', primary: '', secondary: [] };
+    const keyCol = columnList.filter(col => col.key === 'true');
+    metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+    for (let index = 0; index < displayColumns.length; index += 1) {
+        if (displayColumns[index].primary === 'true') {
+            metaDataObj.primary = displayColumns[index].value;
+        }
+        else {
+            metaDataObj.secondary.push(displayColumns[index].value);
+        }
+    }
+    return metaDataObj;
+};
 export default function Dropdown(props) {
-    const { getPConnect, label, required, disabled, placeholder, value = '', datasource = [], validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel, onRecordChange } = props;
+    // Get emitted components from map (so we can get any override that may exist)
+    const FieldValueList = getComponentFromMap('FieldValueList');
+    const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, deferDatasource, datasourceMetadata, hideLabel, onRecordChange, fieldMetadata } = props;
+    let { placeholder = '' } = props;
+    const context = getPConnect().getContextName();
+    let { listType, parameters, datasource = [], columns = [] } = props;
+    placeholder = placeholder || 'Select...';
     const [options, setOptions] = useState([]);
+    const [theDatasource, setDatasource] = useState(null);
     const helperTextToDisplay = validatemessage || helperText;
     const thePConn = getPConnect();
     const actionsApi = thePConn.getActionsApi();
     const propName = thePConn.getStateProps().value;
+    const className = thePConn.getCaseInfo().getClassName();
+    const refName = propName?.slice(propName.lastIndexOf('.') + 1);
+    if (!isDeepEqual(datasource, theDatasource)) {
+        // inbound datasource is different, so update theDatasource (to trigger useEffect)
+        setDatasource(datasource);
+    }
+    // convert associated to datapage listtype and transform props
+    // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
+    if (deferDatasource && datasourceMetadata?.datasource?.name) {
+        listType = 'datapage';
+        datasource = datasourceMetadata.datasource.name;
+        const { parameters: dataSourceParameters, propertyForDisplayText, propertyForValue } = datasourceMetadata.datasource;
+        parameters = flattenParameters(dataSourceParameters);
+        const displayProp = propertyForDisplayText.startsWith('@P') ? propertyForDisplayText.substring(3) : propertyForDisplayText;
+        const valueProp = propertyForValue.startsWith('@P') ? propertyForValue.substring(3) : propertyForValue;
+        columns = [
+            {
+                key: 'true',
+                setProperty: 'Associated property',
+                value: valueProp
+            },
+            {
+                display: 'true',
+                primary: 'true',
+                useForSearch: true,
+                value: displayProp
+            }
+        ];
+    }
+    columns = preProcessColumns(columns);
+    useEffect(() => {
+        if (theDatasource) {
+            const list = Utils.getOptionList(props, getPConnect().getDataObject('')); // 1st arg empty string until typedef marked correctly
+            const optionsList = [...list];
+            optionsList.unshift({
+                key: placeholder,
+                value: thePConn.getLocalizedValue(placeholder, '', '')
+            }); // 2nd and 3rd args empty string until typedef marked correctly
+            setOptions(optionsList);
+        }
+    }, [theDatasource]);
     useEffect(() => {
-        const optionsList = Utils.getOptionList(props, getPConnect().getDataObject());
-        optionsList.unshift({ key: 'Select', value: 'Select...' });
-        setOptions(optionsList);
-    }, [datasource]);
+        if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {
+            getDataPage(datasource, parameters, context).then((results) => {
+                const optionsData = [];
+                const displayColumn = getDisplayFieldsMetaData(columns);
+                results?.forEach(element => {
+                    const val = element[displayColumn.primary]?.toString();
+                    const obj = {
+                        key: element[displayColumn.key] || element.pyGUID,
+                        value: val
+                    };
+                    optionsData.push(obj);
+                });
+                setOptions(optionsData);
+            });
+        }
+    }, []);
+    const metaData = Array.isArray(fieldMetadata) ? fieldMetadata.filter(field => field?.classID === className)[0] : fieldMetadata;
+    let displayName = metaData?.datasource?.propertyForDisplayText;
+    displayName = displayName?.slice(displayName.lastIndexOf('.') + 1);
+    const localeContext = metaData?.datasource?.tableType === 'DataPage' ? 'datapage' : 'associated';
+    const localeClass = localeContext === 'datapage' ? '@baseclass' : className;
+    const localeName = localeContext === 'datapage' ? metaData?.datasource?.name : refName;
+    const localePath = localeContext === 'datapage' ? displayName : localeName;
     let readOnlyProp = {};
     if (displayMode === 'LABELS_LEFT') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+        return (_jsx(FieldValueList, { name: hideLabel ? '' : label, 
+            // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
+            value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)) }));
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
+        return (_jsx(FieldValueList, { name: hideLabel ? '' : label, 
+            // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
+            value: thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)), variant: 'stacked' }));
     }
     if (readOnly) {
         readOnlyProp = { readOnly: true };
@@ -31,7 +135,7 @@ export default function Dropdown(props) {
         'data-test-id': testId
     };
     const handleChange = evt => {
-        const selectedValue = evt.target.value === 'Select' ? '' : evt.target.value;
+        const selectedValue = evt.target.value === placeholder ? '' : evt.target.value;
         handleEvent(actionsApi, 'changeNblur', propName, selectedValue);
         if (onRecordChange) {
             onRecordChange(evt);
@@ -39,6 +143,6 @@ export default function Dropdown(props) {
     };
     // Material UI shows a warning if the component is rendered before options are set.
     //  So, hold off on rendering anything until options are available...
-    return options.length === 0 ? null : (React.createElement(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: placeholder, size: 'small', required: required, disabled: disabled, onChange: !readOnly ? handleChange : undefined, error: status === 'error', label: label, value: value === '' && !readOnly ? 'Select' : value, select: true, InputProps: { ...readOnlyProp, ...testProp } }, options.map((option) => (React.createElement(MenuItem, { key: option.key, value: option.key }, option.value)))));
+    return options.length === 0 ? null : (_jsx(TextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: thePConn.getLocalizedValue(placeholder, '', ''), size: 'small', required: required, disabled: disabled, onChange: !readOnly ? handleChange : undefined, error: status === 'error', label: label, value: value === '' && !readOnly ? placeholder : value, select: true, InputProps: { ...readOnlyProp, ...testProp }, children: options.map((option) => (_jsx(MenuItem, { value: option.key, children: thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)) }, option.key))) }));
 }
 //# sourceMappingURL=Dropdown.js.map