@pega/react-sdk-components 8.23.11 → 23.1.10

package/lib/components/field/Checkbox/Checkbox.js

@@ -1,31 +1,59 @@
 import React, { useState, useEffect } from 'react';
 import { Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText } from '@material-ui/core';
 import handleEvent from '../../helpers/event-utils';
-import FieldValueList from '../../designSystemExtension/FieldValueList';
-export default function CheckboxComponent(props) {
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
+// import type { PConnProps } from '../../../types/PConnProps';
+// Checkbox passes in 'value' as a boolean. So can't use the default
+//  PConnFieldProps since it expects value to be a string.
+// But can't use CheckBoxProps until getValidationApi() knows about validate method
+//  Currently just thinks that returns an "object"
+// interface CheckboxProps extends PConnProps {
+//   // If any, enter additional props that only exist on Checkbox here
+//   // Everything from PConnFieldProps except value and change type of value to boolean
+//   value?: boolean,
+//   label: string,
+//   required: boolean,
+//   disabled: boolean,
+//   validatemessage: string,
+//   status?: string,
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   onChange: any,
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   onBlur?: any,
+//   readOnly: boolean,
+//   testId: string,
+//   helperText: string,
+//   displayMode?: string,
+//   hideLabel: boolean,
+//   // eslint-disable-next-line react/no-unused-prop-types
+//   placeholder?: string
+// }
+export default function CheckboxComponent(props /* : CheckboxProps */) {
+    // 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, required, disabled, status, helperText, validatemessage, displayMode, hideLabel } = props;
     const helperTextToDisplay = validatemessage || helperText;
     const thePConn = getPConnect();
     const theConfigProps = thePConn.getConfigProps();
-    const { caption } = theConfigProps;
+    const caption = theConfigProps['caption'];
     const actionsApi = thePConn.getActionsApi();
-    const propName = thePConn.getStateProps().value;
+    const propName = thePConn.getStateProps()['value'];
     const [checked, setChecked] = useState(false);
     useEffect(() => {
         // This update theSelectedButton which will update the UI to show the selected button correctly
         setChecked(value);
     }, [value]);
     if (displayMode === 'LABELS_LEFT') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value.toString() });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
+        return (React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value.toString(), variant: 'stacked' }));
     }
     const handleChange = event => {
         handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);
     };
     const handleBlur = event => {
-        thePConn.getValidationApi().validate(event.target.checked);
+        thePConn.getValidationApi().validate(event.target.checked, ''); // 2nd arg empty string until typedef marked correctly as optional
     };
     let theCheckbox = React.createElement(Checkbox, { color: 'primary', disabled: disabled });
     if (readOnly) {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/field/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Checkbox,\n  FormControl,\n  FormControlLabel,\n  FormGroup,\n  FormHelperText\n} from '@material-ui/core';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\nexport default function CheckboxComponent(props) {\n  const {\n    getPConnect,\n    label,\n    value = false,\n    readOnly,\n    testId,\n    required,\n    disabled,\n    status,\n    helperText,\n    validatemessage,\n    displayMode,\n    hideLabel\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const thePConn = getPConnect();\n  const theConfigProps = thePConn.getConfigProps();\n  const { caption } = theConfigProps;\n  const actionsApi = thePConn.getActionsApi();\n  const propName = thePConn.getStateProps().value;\n\n  const [checked, setChecked] = useState(false);\n  useEffect(() => {\n    // This update theSelectedButton which will update the UI to show the selected button correctly\n    setChecked(value);\n  }, [value]);\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  const handleChange = event => {\n    handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);\n  };\n\n  const handleBlur = event => {\n    thePConn.getValidationApi().validate(event.target.checked);\n  };\n\n  let theCheckbox = <Checkbox color='primary' disabled={disabled} />;\n\n  if (readOnly) {\n    // Workaround for lack of InputProps readOnly from https://github.com/mui-org/material-ui/issues/17043\n    //  Also note that we need to turn off the onChange call in the FormControlLabel wrapper, too. See below!\n    theCheckbox = <Checkbox value={value || false} readOnly={readOnly} />;\n  }\n\n  return (\n    <FormControl required={required} error={status === 'error'}>\n      <FormGroup>\n        <FormControlLabel\n          control={theCheckbox}\n          checked={checked}\n          onChange={!readOnly ? handleChange : undefined}\n          onBlur={!readOnly ? handleBlur : undefined}\n          label={caption}\n          labelPlacement='end'\n          data-test-id={testId}\n        />\n      </FormGroup>\n      <FormHelperText>{helperTextToDisplay}</FormHelperText>\n    </FormControl>\n  );\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/field/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,cAAc,EACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAChF,+DAA+D;AAE/D,oEAAoE;AACpE,0DAA0D;AAC1D,mFAAmF;AACnF,kDAAkD;AAClD,+CAA+C;AAC/C,uEAAuE;AACvE,wFAAwF;AAExF,qBAAqB;AACrB,mBAAmB;AACnB,uBAAuB;AACvB,uBAAuB;AACvB,6BAA6B;AAC7B,qBAAqB;AACrB,2DAA2D;AAC3D,mBAAmB;AACnB,2DAA2D;AAC3D,kBAAkB;AAClB,uBAAuB;AACvB,oBAAoB;AACpB,wBAAwB;AACxB,0BAA0B;AAC1B,wBAAwB;AACxB,2DAA2D;AAC3D,yBAAyB;AACzB,IAAI;AACJ,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,CAAC,qBAAqB;IACnE,8EAA8E;IAC9E,MAAM,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAE7D,MAAM,EACJ,WAAW,EACX,KAAK,EACL,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,UAAU,EACV,eAAe,EACf,WAAW,EACX,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,EAAE,CAAC;IACjD,MAAM,OAAO,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;IAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC;IAEnD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,+FAA+F;QAC/F,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,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,CAAC,QAAQ,EAAE,GAAI,CAAC;KAClF;IAED,IAAI,WAAW,KAAK,mBAAmB,EAAE;QACvC,OAAO,CACL,oBAAC,cAAc,IAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAC,SAAS,GAAG,CAC5F,CAAC;KACH;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE;QAC3B,WAAW,CAAC,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,kEAAkE;IACpI,CAAC,CAAC;IAEF,IAAI,WAAW,GAAG,oBAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC;IAEnE,IAAI,QAAQ,EAAE;QACZ,sGAAsG;QACtG,yGAAyG;QACzG,WAAW,GAAG,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAI,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;KACvE;IAED,OAAO,CACL,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO;QACxD,oBAAC,SAAS;YACR,oBAAC,gBAAgB,IACf,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC9C,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,OAAO,EACd,cAAc,EAAC,KAAK,kBACN,MAAM,GACpB,CACQ;QACZ,oBAAC,cAAc,QAAE,mBAAmB,CAAkB,CAC1C,CACf,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n  Checkbox,\n  FormControl,\n  FormControlLabel,\n  FormGroup,\n  FormHelperText\n} from '@material-ui/core';\nimport handleEvent from '../../helpers/event-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\n// import type { PConnProps } from '../../../types/PConnProps';\n\n// Checkbox passes in 'value' as a boolean. So can't use the default\n//  PConnFieldProps since it expects value to be a string.\n// But can't use CheckBoxProps until getValidationApi() knows about validate method\n//  Currently just thinks that returns an \"object\"\n// interface CheckboxProps extends PConnProps {\n//   // If any, enter additional props that only exist on Checkbox here\n//   // Everything from PConnFieldProps except value and change type of value to boolean\n\n//   value?: boolean,\n//   label: string,\n//   required: boolean,\n//   disabled: boolean,\n//   validatemessage: string,\n//   status?: string,\n//   // eslint-disable-next-line react/no-unused-prop-types\n//   onChange: any,\n//   // eslint-disable-next-line react/no-unused-prop-types\n//   onBlur?: any,\n//   readOnly: boolean,\n//   testId: string,\n//   helperText: string,\n//   displayMode?: string,\n//   hideLabel: boolean,\n//   // eslint-disable-next-line react/no-unused-prop-types\n//   placeholder?: string\n// }\nexport default function CheckboxComponent(props /* : CheckboxProps */) {\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    value = false,\n    readOnly,\n    testId,\n    required,\n    disabled,\n    status,\n    helperText,\n    validatemessage,\n    displayMode,\n    hideLabel\n  } = props;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const thePConn = getPConnect();\n  const theConfigProps = thePConn.getConfigProps();\n  const caption = theConfigProps['caption'];\n  const actionsApi = thePConn.getActionsApi();\n  const propName = thePConn.getStateProps()['value'];\n\n  const [checked, setChecked] = useState(false);\n  useEffect(() => {\n    // This update theSelectedButton which will update the UI to show the selected button correctly\n    setChecked(value);\n  }, [value]);\n\n  if (displayMode === 'LABELS_LEFT') {\n    return <FieldValueList name={hideLabel ? '' : label} value={value.toString()} />;\n  }\n\n  if (displayMode === 'STACKED_LARGE_VAL') {\n    return (\n      <FieldValueList name={hideLabel ? '' : label} value={value.toString()} variant='stacked' />\n    );\n  }\n\n  const handleChange = event => {\n    handleEvent(actionsApi, 'changeNblur', propName, event.target.checked);\n  };\n\n  const handleBlur = event => {\n    thePConn.getValidationApi().validate(event.target.checked, ''); // 2nd arg empty string until typedef marked correctly as optional\n  };\n\n  let theCheckbox = <Checkbox color='primary' disabled={disabled} />;\n\n  if (readOnly) {\n    // Workaround for lack of InputProps readOnly from https://github.com/mui-org/material-ui/issues/17043\n    //  Also note that we need to turn off the onChange call in the FormControlLabel wrapper, too. See below!\n    theCheckbox = <Checkbox value={value || false} readOnly={readOnly} />;\n  }\n\n  return (\n    <FormControl required={required} error={status === 'error'}>\n      <FormGroup>\n        <FormControlLabel\n          control={theCheckbox}\n          checked={checked}\n          onChange={!readOnly ? handleChange : undefined}\n          onBlur={!readOnly ? handleBlur : undefined}\n          label={caption}\n          labelPlacement='end'\n          data-test-id={testId}\n        />\n      </FormGroup>\n      <FormHelperText>{helperTextToDisplay}</FormHelperText>\n    </FormControl>\n  );\n}\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Currency/Currency.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,KAAA,eAwGrC"}
+{"version":3,"file":"Currency.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Currency/Currency.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAIjE,UAAU,cAAe,SAAQ,eAAe;IAE9C,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,cAAc,eA2GrD"}

package/lib/components/field/Currency/Currency.js

@@ -1,18 +1,18 @@
 import React, { useState, useEffect } from 'react';
-// import { TextField } from "@material-ui/core";
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
 import handleEvent from '../../helpers/event-utils';
-import FieldValueList from '../../designSystemExtension/FieldValueList';
-import { format } from "../../helpers/formatters";
+import { format } from '../../helpers/formatters';
 import { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';
-// Using control from: https://github.com/unicef/material-ui-currency-textfield
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 export default function Currency(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, testId, helperText, displayMode, hideLabel, currencyISOCode = "USD" } = props;
+    readOnly, testId, helperText, displayMode, hideLabel, currencyISOCode = 'USD' } = props;
     const pConn = getPConnect();
     const actions = pConn.getActionsApi();
-    const propName = pConn.getStateProps().value;
+    const propName = pConn.getStateProps()["value"];
     const helperTextToDisplay = validatemessage || helperText;
     // console.log(`Currency: label: ${label} value: ${value}`);
     let readOnlyProp = {}; // Note: empty if NOT ReadOnly
@@ -23,10 +23,10 @@ export default function Currency(props) {
     testProp = {
         'data-test-id': testId
     };
-    const [currValue, setCurrValue] = useState();
-    const [theCurrSym, setCurrSym] = useState("$");
-    const [theCurrDec, setCurrDec] = useState(".");
-    const [theCurrSep, setCurrSep] = useState(",");
+    const [currValue, setCurrValue] = useState('');
+    const [theCurrSym, setCurrSym] = useState('$');
+    const [theCurrDec, setCurrDec] = useState('.');
+    const [theCurrSep, setCurrSep] = useState(',');
     useEffect(() => {
         // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }
         const theSymbols = getCurrencyCharacters(currencyISOCode);
@@ -44,7 +44,7 @@ export default function Currency(props) {
         return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue, variant: 'stacked' });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue, variant: "stacked" });
     }
     // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
     function currOnChange(event, inValue) {
@@ -57,6 +57,6 @@ export default function Currency(props) {
         handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
     }
     // console.log(`theCurrSym: ${theCurrSym} | theCurrDec: ${theCurrDec} | theCurrSep: ${theCurrSep}`);
-    return (React.createElement(CurrencyTextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: currOnChange, onBlur: !readOnly ? currOnBlur : undefined, error: status === 'error', label: label, value: currValue, type: 'text', outputFormat: 'number', textAlign: 'left', InputProps: { ...readOnlyProp, inputProps: { ...testProp, value: currValue } }, currencySymbol: theCurrSym, decimalCharacter: theCurrDec, digitGroupSeparator: theCurrSep }));
+    return (React.createElement(CurrencyTextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: "", size: "small", required: required, disabled: disabled, onChange: currOnChange, onBlur: !readOnly ? currOnBlur : undefined, error: status === 'error', label: label, value: currValue, type: "text", outputFormat: "number", textAlign: "left", InputProps: { ...readOnlyProp, inputProps: { ...testProp, value: currValue } }, currencySymbol: theCurrSym, decimalCharacter: theCurrDec, digitGroupSeparator: theCurrSep }));
 }
 //# sourceMappingURL=Currency.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","sourceRoot":"","sources":["../../../../src/components/field/Currency/Currency.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\n// import { TextField } from \"@material-ui/core\";\nimport CurrencyTextField from '@unicef/material-ui-currency-textfield';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\nimport { format } from \"../../helpers/formatters\";\nimport { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';\n\n// Using control from: https://github.com/unicef/material-ui-currency-textfield\n\nexport default function Currency(props) {\n  const {\n    getPConnect,\n    label,\n    required,\n    disabled,\n    value = '',\n    validatemessage,\n    status,\n    /* onChange, onBlur, */\n    readOnly,\n    testId,\n    helperText,\n    displayMode,\n    hideLabel,\n    currencyISOCode = \"USD\"\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  // console.log(`Currency: label: ${label} value: ${value}`);\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const [currValue, setCurrValue] = useState();\n  const [theCurrSym, setCurrSym] = useState(\"$\");\n  const [theCurrDec, setCurrDec] = useState(\".\");\n  const [theCurrSep, setCurrSep] = useState(\",\");\n\n  useEffect(() => {\n    // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }\n    const theSymbols = getCurrencyCharacters(currencyISOCode);\n    setCurrSym(theSymbols.theCurrencySymbol);\n    setCurrDec(theSymbols.theDecimalIndicator);\n    setCurrSep(theSymbols.theDigitGroupSeparator);\n  }, [currencyISOCode]);\n\n  useEffect(() => {\n    // const testVal = value;\n    setCurrValue(value.toString());\n  }, [value]);\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  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\n  function currOnChange(event, inValue) {\n    // console.log(`Currency currOnChange inValue: ${inValue}`);\n\n    // update internal value\n    setCurrValue(event?.target?.value);\n  }\n\n  function currOnBlur(event, inValue) {\n    // console.log(`Currency currOnBlur inValue: ${inValue}`);\n    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);\n  }\n\n  // console.log(`theCurrSym: ${theCurrSym} | theCurrDec: ${theCurrDec} | theCurrSep: ${theCurrSep}`);\n\n  return (\n    <CurrencyTextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={currOnChange}\n      onBlur={!readOnly ? currOnBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={currValue}\n      type='text'\n      outputFormat='number'\n      textAlign='left'\n      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}\n      currencySymbol={theCurrSym}\n      decimalCharacter={theCurrDec}\n      digitGroupSeparator={theCurrSep}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Currency.js","sourceRoot":"","sources":["../../../../src/components/field/Currency/Currency.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,iBAAiB,MAAM,wCAAwC,CAAC;AACvE,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAUhF,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAqB;IACpD,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,MAAM,EACN,UAAU,EACV,WAAW,EACX,SAAS,EACT,eAAe,GAAG,KAAK,EACxB,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC,CAAC;IAChD,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,4DAA4D;IAE5D,IAAI,YAAY,GAAG,EAAE,CAAC,CAAC,8BAA8B;IAErD,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACnC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,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;IAC/C,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,2GAA2G;QAC3G,MAAM,UAAU,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;QAC1D,UAAU,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACzC,UAAU,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAC;QAC3C,UAAU,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,SAAS,CAAC,GAAG,EAAE;QACb,yBAAyB;QACzB,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,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,oBAAC,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,oBAAC,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,6EAA6E;IAC7E,SAAS,YAAY,CAAC,KAAK,EAAE,OAAO;QAClC,4DAA4D;QAE5D,wBAAwB;QACxB,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,SAAS,UAAU,CAAC,KAAK,EAAE,OAAO;QAChC,0DAA0D;QAC1D,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,oGAAoG;IAEpG,OAAO,CACL,oBAAC,iBAAiB,IAChB,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,YAAY,EACtB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,MAAM,EACX,YAAY,EAAC,QAAQ,EACrB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAC9E,cAAc,EAAE,UAAU,EAC1B,gBAAgB,EAAE,UAAU,EAC5B,mBAAmB,EAAE,UAAU,GAC/B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport CurrencyTextField from '@unicef/material-ui-currency-textfield';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from '../../helpers/formatters';\nimport { getCurrencyCharacters, getCurrencyOptions } from './currency-utils';\nimport { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';\nimport type { PConnFieldProps } from '../../../types/PConnProps';\n\n// Using control from: https://github.com/unicef/material-ui-currency-textfield\n\ninterface CurrrencyProps extends PConnFieldProps {\n  // If any, enter additional props that only exist on Currency here\n  currencyISOCode?: string;\n}\n\nexport default function Currency(props: CurrrencyProps) {\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    testId,\n    helperText,\n    displayMode,\n    hideLabel,\n    currencyISOCode = 'USD'\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  // console.log(`Currency: label: ${label} value: ${value}`);\n\n  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  const [currValue, setCurrValue] = useState('');\n  const [theCurrSym, setCurrSym] = useState('$');\n  const [theCurrDec, setCurrDec] = useState('.');\n  const [theCurrSep, setCurrSep] = useState(',');\n\n  useEffect(() => {\n    // currencySymbols looks like this: { theCurrencySymbol: '$', theDecimalIndicator: '.', theSeparator: ',' }\n    const theSymbols = getCurrencyCharacters(currencyISOCode);\n    setCurrSym(theSymbols.theCurrencySymbol);\n    setCurrDec(theSymbols.theDecimalIndicator);\n    setCurrSep(theSymbols.theDigitGroupSeparator);\n  }, [currencyISOCode]);\n\n  useEffect(() => {\n    // const testVal = value;\n    setCurrValue(value.toString());\n  }, [value]);\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  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars\n  function currOnChange(event, inValue) {\n    // console.log(`Currency currOnChange inValue: ${inValue}`);\n\n    // update internal value\n    setCurrValue(event?.target?.value);\n  }\n\n  function currOnBlur(event, inValue) {\n    // console.log(`Currency currOnBlur inValue: ${inValue}`);\n    handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);\n  }\n\n  // console.log(`theCurrSym: ${theCurrSym} | theCurrDec: ${theCurrDec} | theCurrSep: ${theCurrSep}`);\n\n  return (\n    <CurrencyTextField\n      fullWidth\n      variant={readOnly ? 'standard' : 'outlined'}\n      helperText={helperTextToDisplay}\n      placeholder=\"\"\n      size=\"small\"\n      required={required}\n      disabled={disabled}\n      onChange={currOnChange}\n      onBlur={!readOnly ? currOnBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={currValue}\n      type=\"text\"\n      outputFormat=\"number\"\n      textAlign=\"left\"\n      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: currValue } }}\n      currencySymbol={theCurrSym}\n      decimalCharacter={theCurrDec}\n      digitGroupSeparator={theCurrSep}\n    />\n  );\n}\n"]}

package/lib/components/field/Currency/currency-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"currency-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Currency/currency-utils.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,kBAAkB,cAAe,MAAM;;;;CAsCnD,CAAA;AAGD,eAAO,MAAM,qBAAqB,cAAe,MAAM;;;;CA2BtD,CAAA"}
+{"version":3,"file":"currency-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Currency/currency-utils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,kBAAkB,cAAe,MAAM;;;;CAsCnD,CAAA;AAGD,eAAO,MAAM,qBAAqB,cAAe,MAAM;;;;CA2BtD,CAAA"}

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

@@ -3,7 +3,7 @@ import { default as CurrencyAlias } from '../../helpers/formatters/Currency';
 // eslint-disable-next-line import/no-named-default
 import { default as CurrencyMapAlias } from '../../helpers/formatters/CurrencyMap';
 export const getCurrencyOptions = (inISOCode) => {
-    const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || 'en-US';
+    const operatorLocale = PCore.getEnvironmentInfo().getUseLocale() || PCore.getEnvironmentInfo().getLocale() || 'en-US';
     let currMapToUse = CurrencyMapAlias.US;
     let localeToUse = operatorLocale;
     // Determine CurrencyMap lookup based on ISO code (if specified).

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;AAOnF,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\nimport PCoreType from '@pega/pcore-pconnect-typedefs/types/pcore';\n\ndeclare const PCore: typeof PCoreType;\n\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,EAAC,MAAM,mCAAmC,CAAC;AAC5E,mDAAmD;AACnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,SAAiB,EAAE,EAAE;IAEtD,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,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\n\nexport const getCurrencyOptions = (inISOCode: string) => {\n\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  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"]}

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

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-export default function Date(props: any): JSX.Element;
+import type { 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":";AAaA,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,KAAA,eAwFjC"}
+{"version":3,"file":"Date.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAOjE,UAAU,SAAU,SAAQ,eAAe;CAE1C;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,eA2F5C"}

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

@@ -1,19 +1,21 @@
 import React from 'react';
 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 { 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();
-    const propName = pConn.getStateProps().value;
+    const propName = pConn.getStateProps()["value"];
     const helperTextToDisplay = validatemessage || helperText;
     // Start with default dateFormatInfo
     const dateFormatInfo = dateFormatInfoDefault;
@@ -28,7 +30,7 @@ export default function Date(props) {
     }
     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' });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedDate, variant: "stacked" });
     }
     if (readOnly) {
         // const theReadOnlyComp = <TextInput props />
@@ -38,16 +40,16 @@ export default function Date(props) {
     testProp = {
         'data-test-id': testId
     };
-    const handleChange = date => {
+    const handleChange = (date) => {
         if (date && date.isValid()) {
             onChange({ value: getFormattedDate(date) });
         }
     };
-    const handleAccept = date => {
+    const handleAccept = (date) => {
         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 (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 } }));
 }
 //# 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\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\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    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"]}
+{"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 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 type { 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()[\"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', { 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    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 type { 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,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,UAAU,aAAc,SAAQ,eAAe;CAE9C;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,eA0FpD"}

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

@@ -1,15 +1,17 @@
 import React from 'react';
 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 { 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();
-    const propName = pConn.getStateProps().value;
+    const propName = pConn.getStateProps()["value"];
     const helperTextToDisplay = validatemessage || helperText;
     // Start with default dateFormatInfo
     const dateFormatInfo = dateFormatInfoDefault;
@@ -19,22 +21,26 @@ 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` });
+        const formattedDateTime = format(props.value, 'datetime', {
+            format: `${dateFormatInfo.dateFormatString} hh:mm a`
+        });
         return React.createElement(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 React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedDateTime, variant: "stacked" });
     }
     if (readOnly) {
         const formattedDateTime = format(props.value, 'datetime');
         return React.createElement(TextInput, { ...props, value: formattedDateTime });
     }
-    const handleChange = date => {
+    const handleChange = (date) => {
         const changeValue = date && date.isValid() ? date.toISOString() : null;
         onChange({ value: changeValue });
     };
-    const handleAccept = date => {
+    const handleAccept = (date) => {
         const changeValue = date && date.isValid() ? date.toISOString() : null;
         handleEvent(actions, 'changeNblur', propName, changeValue);
     };
@@ -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 (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 }));
 }
 //# 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 React from 'react';\nimport { KeyboardDateTimePicker } from '@material-ui/pickers';\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 type { 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()[\"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 type { 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":";AASA,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,KAAA,eA+FpC"}
+{"version":3,"file":"Decimal.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAIjE,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,eAkGlD"}

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

@@ -1,21 +1,22 @@
 import React, { useState, useEffect } from 'react';
 import CurrencyTextField from '@unicef/material-ui-currency-textfield';
-import FieldValueList from '../../designSystemExtension/FieldValueList';
 import { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';
 import handleEvent from '../../helpers/event-utils';
-import { format } from "../../helpers/formatters";
-// Using control from: https://github.com/unicef/material-ui-currency-textfield
+import { format } from '../../helpers/formatters';
+import { getComponentFromMap } from '../../../bridge/helpers/sdk_component_map';
 export default function Decimal(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 } = props;
+    readOnly, helperText, displayMode, hideLabel, currencyISOCode = 'USD', decimalPrecision = 2, showGroupSeparators = true, testId } = props;
     const pConn = getPConnect();
     const actions = pConn.getActionsApi();
-    const propName = pConn.getStateProps().value;
+    const propName = pConn.getStateProps()["value"];
     const helperTextToDisplay = validatemessage || helperText;
-    const [decValue, setDecimalvalue] = useState();
-    const [theCurrDec, setCurrDec] = useState(".");
-    const [theCurrSep, setCurrSep] = useState(",");
+    const [decValue, setDecimalvalue] = useState('');
+    const [theCurrDec, setCurrDec] = useState('.');
+    const [theCurrSep, setCurrSep] = useState(',');
     useEffect(() => {
         const theSymbols = getCurrencyCharacters(currencyISOCode);
         setCurrDec(theSymbols.theDecimalIndicator);
@@ -30,7 +31,7 @@ export default function Decimal(props) {
         return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue });
     }
     if (displayMode === 'STACKED_LARGE_VAL') {
-        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue, variant: 'stacked' });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedValue, variant: "stacked" });
     }
     let readOnlyProp = {}; // Note: empty if NOT ReadOnly
     if (readOnly) {
@@ -47,6 +48,6 @@ export default function Decimal(props) {
     function decimalOnBlur(event, inValue) {
         handleEvent(actions, 'changeNblur', propName, inValue !== '' ? Number(inValue) : inValue);
     }
-    return (React.createElement(CurrencyTextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: '', size: 'small', required: required, disabled: disabled, onChange: decimalOnChange, onBlur: !readOnly ? decimalOnBlur : undefined, error: status === 'error', label: label, value: decValue, type: 'text', outputFormat: 'number', textAlign: 'left', InputProps: { ...readOnlyProp, inputProps: { ...testProp, value: decValue } }, currencySymbol: '', decimalCharacter: theCurrDec, digitGroupSeparator: showGroupSeparators ? theCurrSep : '', decimalPlaces: decimalPrecision }));
+    return (React.createElement(CurrencyTextField, { fullWidth: true, variant: readOnly ? 'standard' : 'outlined', helperText: helperTextToDisplay, placeholder: "", size: "small", required: required, disabled: disabled, onChange: decimalOnChange, onBlur: !readOnly ? decimalOnBlur : undefined, error: status === 'error', label: label, value: decValue, type: "text", outputFormat: "number", textAlign: "left", InputProps: { ...readOnlyProp, inputProps: { ...testProp, value: decValue } }, currencySymbol: "", decimalCharacter: theCurrDec, digitGroupSeparator: showGroupSeparators ? theCurrSep : '', decimalPlaces: decimalPrecision }));
 }
 //# 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,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,iBAAiB,MAAM,wCAAwC,CAAC;AACvE,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACvF,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,+EAA+E;AAE/E,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK;IACnC,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,EACP,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAC7C,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,CAAC,QAAQ,EAAE,eAAe,CAAC,GAAG,QAAQ,EAAE,CAAC;IAC/C,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,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,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,oBAAC,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,oBAAC,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,IAAI,YAAY,GAAG,EAAE,CAAC,CAAC,8BAA8B;IAErD,IAAI,QAAQ,EAAE;QACZ,YAAY,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;KACnC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,SAAS,eAAe,CAAC,KAAK;QAC5B,wBAAwB;QACxB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,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,oBAAC,iBAAiB,IAChB,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,eAAe,EACzB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC7C,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,QAAQ,EACf,IAAI,EAAC,MAAM,EACX,YAAY,EAAC,QAAQ,EACrB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAC7E,cAAc,EAAC,EAAE,EACjB,gBAAgB,EAAE,UAAU,EAC5B,mBAAmB,EAAE,mBAAmB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAC1D,aAAa,EAAE,gBAAgB,GAC/B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport CurrencyTextField from '@unicef/material-ui-currency-textfield';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\nimport { getCurrencyCharacters, getCurrencyOptions } from '../Currency/currency-utils';\nimport handleEvent from '../../helpers/event-utils';\nimport { format } from \"../../helpers/formatters\";\n\n// Using control from: https://github.com/unicef/material-ui-currency-textfield\n\nexport default function Decimal(props) {\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  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps().value;\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const [decValue, setDecimalvalue] = useState();\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  useEffect(() => {\n    setDecimalvalue(value.toString());\n  }, [value]);\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  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  function decimalOnChange(event) {\n    // update internal value\n    setDecimalvalue(event?.target?.value);\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=''\n      size='small'\n      required={required}\n      disabled={disabled}\n      onChange={decimalOnChange}\n      onBlur={!readOnly ? decimalOnBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={decValue}\n      type='text'\n      outputFormat='number'\n      textAlign='left'\n      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: decValue } }}\n      currencySymbol=''\n      decimalCharacter={theCurrDec}\n      digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}\n      decimalPlaces={decimalPrecision}\n    />\n  );\n}\n"]}
+{"version":3,"file":"Decimal.js","sourceRoot":"","sources":["../../../../src/components/field/Decimal/Decimal.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport CurrencyTextField from '@unicef/material-ui-currency-textfield';\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 type { 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  } = props;\n\n  const pConn = getPConnect();\n  const actions = pConn.getActionsApi();\n  const propName = pConn.getStateProps()[\"value\"];\n  const helperTextToDisplay = validatemessage || helperText;\n\n  const [decValue, setDecimalvalue] = useState('');\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  useEffect(() => {\n    setDecimalvalue(value.toString());\n  }, [value]);\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  let readOnlyProp = {}; // Note: empty if NOT ReadOnly\n\n  if (readOnly) {\n    readOnlyProp = { readOnly: true };\n  }\n\n  let testProp = {};\n\n  testProp = {\n    'data-test-id': testId\n  };\n\n  function decimalOnChange(event) {\n    // update internal value\n    setDecimalvalue(event?.target?.value);\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=\"\"\n      size=\"small\"\n      required={required}\n      disabled={disabled}\n      onChange={decimalOnChange}\n      onBlur={!readOnly ? decimalOnBlur : undefined}\n      error={status === 'error'}\n      label={label}\n      value={decValue}\n      type=\"text\"\n      outputFormat=\"number\"\n      textAlign=\"left\"\n      InputProps={{ ...readOnlyProp, inputProps: { ...testProp, value: decValue } }}\n      currencySymbol=\"\"\n      decimalCharacter={theCurrDec}\n      digitGroupSeparator={showGroupSeparators ? theCurrSep : ''}\n      decimalPlaces={decimalPrecision}\n    />\n  );\n}\n"]}

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,sBA2HrC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Dropdown/Dropdown.tsx"],"names":[],"mappings":";AA0BA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,KAAA,sBAmHrC"}