npm - @pega/react-sdk-components - Versions diffs - 0.23.16 → 0.23.18 - Mend

@pega/react-sdk-components 0.23.16 → 0.23.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

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

@@ -0,0 +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"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Date.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":";~~AAMA~~,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,KAAA,~~eAwEjC~~"}
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"}

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

@@ -3,17 +3,28 @@ 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';
 export default function Date(props) {
-    const { getPConnect, label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode } = props;
+    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 helperTextToDisplay = validatemessage || helperText;
+    // Start with default dateFormatInfo
+    const dateFormatInfo = dateFormatInfoDefault;
+    // and then update, as needed, based on locale, etc.
+    const theDateFormat = getDateFormatInfo();
+    dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;
+    dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
+    dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
     if (displayMode === 'LABELS_LEFT') {
-        const field = {
-            [label]: value
-        };
-        return React.createElement(FieldValueList, { item: field });
+        const formattedDate = format(props.value, 'date', { format: dateFormatInfo.dateFormatString });
+        return React.createElement(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' });
     }
     if (readOnly) {
         // const theReadOnlyComp = <TextInput props />
@@ -31,6 +42,6 @@ export default function Date(props) {
         const changeValue = date && date.isValid() ? date.toISOString() : null;
         handleEvent(actions, 'changeNblur', propName, changeValue);
     };
-    return (React.createElement(KeyboardDatePicker, { disableToolbar: true, variant: 'inline', inputVariant: 'outlined', placeholder: 'mm/dd/yyyy', fullWidth: true, autoOk: true, required: required, disabled: disabled, format: 'MM/DD/YYYY', mask: '__/__/____', 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Date.js","sourceRoot":"","sources":["../../../../src/components/field/Date/Date.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,cAAc,MAAM,4CAA4C,CAAC;~~AAExE~~,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK;IAChC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,~~EACZ~~,GAAG,KAAK,CAAC;~~IACV~~,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,~~IAAG~~,WAAW,KAAK,aAAa,EAAE;~~QAChC~~,MAAM,~~KAAK~~,GAAG~~;YACZ~~,CAAC,KAAK,CAAC,EAAE,KAAK;~~SACf~~,CAAC;~~QACF~~,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,~~GAAI~~,~~CAAA~~;~~KACvC~~;IAED,IAAI,QAAQ,EAAE;QACZ,8CAA8C;QAC9C,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACvE,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACvE,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,kBAAkB,IACjB,cAAc,QACd,OAAO,EAAC,QAAQ,EAChB,YAAY,EAAC,UAAU,EACvB,WAAW,~~EAAC~~,~~YAAY~~,~~EACxB~~,SAAS,QACT,MAAM,QACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,~~MAAM,EAAC,YAAY,EACnB,IAAI,EAAC,YAAY,EACjB,~~KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,UAAU,EAAE,mBAAmB,EAC/B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,IAAI,IAAI,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","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';\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 } = props;\n const pConn = getPConnect();\n const actions = pConn.getActionsApi();\n const propName = pConn.getStateProps().value;\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n if(displayMode === 'LABELS_LEFT') {\n const ~~field~~ = {\n ~~[label]~~: value\n };\n return <FieldValueList ~~item~~={~~field~~} ~~/>\~~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=~~'mm/dd/yyyy'~~\n fullWidth\n autoOk\n required={required}\n disabled={disabled}\n ~~format='MM/DD/YYYY'\n mask='__/__/____'\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"]}
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"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":";~~AAOA~~,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,KAAA,~~eAuErC~~"}
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,eAoFrC"}

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

@@ -4,18 +4,27 @@ 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';
 export default function DateTime(props) {
-    const { getPConnect, label, required, disabled, value = '', validatemessage, status, onChange, readOnly, testId, helperText, displayMode } = props;
+    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 helperTextToDisplay = validatemessage || helperText;
+    // Start with default dateFormatInfo
+    const dateFormatInfo = dateFormatInfoDefault;
+    // and then update, as needed, based on locale, etc.
+    const theDateFormat = getDateFormatInfo();
+    dateFormatInfo.dateFormatString = theDateFormat.dateFormatString;
+    dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
+    dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
     if (displayMode === 'LABELS_LEFT') {
-        const formattedDate = format(props.value, 'datetime');
-        const field = {
-            [label]: formattedDate
-        };
-        return React.createElement(FieldValueList, { item: field });
+        const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedDate });
+    }
+    if (displayMode === 'STACKED_LARGE_VAL') {
+        const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: formattedDate, variant: 'stacked' });
     }
     if (readOnly) {
         const formattedDate = format(props.value, 'datetime');
@@ -34,6 +43,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: 'mm/dd/yyyy hh:mm am', format: 'MM/DD/YYYY hh:mm a', mask: '__/__/____ __:__ _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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateTime.js","sourceRoot":"","sources":["../../../../src/components/field/DateTime/DateTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,cAAc,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;~~AAEnD~~,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK;IACpC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,~~EACZ~~,GAAG,KAAK,CAAC;~~IACV~~,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,~~IAAG~~,WAAW,KAAK,aAAa,~~EAAC~~;~~QAC/B~~,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;~~QACtD~~,~~MAAM~~,KAAK,~~GAAG~~;~~YACZ~~,CAAC,KAAK,CAAC,EAAE,~~aAAa;SACvB~~,CAAC;~~QACF~~,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,GAAG,~~CAAA~~;~~KACtC~~;IAED,IAAI,QAAQ,EAAE;QACZ,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;QACtD,KAAK,CAAC,KAAK,GAAG,aAAa,CAAC;QAC5B,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACvE,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;QAC1B,MAAM,WAAW,GAAG,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACvE,WAAW,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,EAAE;IACF,iGAAiG;IACjG,8DAA8D;IAC9D,EAAE;IAEF,OAAO,CACL,oBAAC,sBAAsB,IACrB,OAAO,EAAC,QAAQ,EAChB,YAAY,EAAC,UAAU,EACvB,SAAS,QACT,MAAM,QACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,WAAW,~~EAAC~~,~~qBAAqB~~,~~EACjC~~,MAAM,~~EAAC~~,~~oBAAoB~~,~~EAC3B~~,IAAI,~~EAAC~~,~~qBAAqB~~,~~EAC1B~~,WAAW,EAAE,CAAC,EACd,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,UAAU,EAAE,mBAAmB,EAC/B,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,IAAI,IAAI,EACpB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,kBACR,MAAM,GACpB,CACH,CAAC;AACJ,CAAC","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/';\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 } = props;\n const pConn = getPConnect();\n const actions = pConn.getActionsApi();\n const propName = pConn.getStateProps().value;\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n if(displayMode === 'LABELS_LEFT'){\n const formattedDate = format(props.value, 'datetime');\n ~~const~~ ~~field~~ = {\n ~~[label]:~~ ~~formattedDate~~\n };\n return <FieldValueList ~~item~~={~~field~~}~~/>\~~n }\n\n if (readOnly) {\n const formattedDate = format(props.value, 'datetime');\n props.value = formattedDate;\n return <TextInput {...props} />;\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=~~'mm/dd/yyyy~~ hh:mm ~~am'~~\n format=~~'MM/DD/YYYY~~ hh:mm a'\n mask=~~'__/__/____~~ __:__ _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"]}
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 formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });\n return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} />;\n }\n\n if (displayMode === 'STACKED_LARGE_VAL') {\n const formattedDate = format(props.value, 'datetime', { format: `${dateFormatInfo.dateFormatString} hh:mm a` });\n return <FieldValueList name={hideLabel ? '' : label} value={formattedDate} variant='stacked' />;\n }\n\n if (readOnly) {\n const formattedDate = format(props.value, 'datetime');\n props.value = formattedDate;\n return <TextInput {...props} />;\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.map CHANGED Viewed

	@@ -1 +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,~~eA6CpC~~"}
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"}

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

@@ -3,13 +3,13 @@ import { TextField } from '@material-ui/core';
 import TextInput from '../TextInput';
 import FieldValueList from '../../designSystemExtension/FieldValueList';
 export default function Decimal(props) {
-    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, helperText, displayMode } = props;
+    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, helperText, displayMode, hideLabel } = props;
     const helperTextToDisplay = validatemessage || helperText;
     if (displayMode === 'LABELS_LEFT') {
-        const field = {
-            [label]: value
-        };
-        return React.createElement(FieldValueList, { item: field });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+    }
+    if (displayMode === 'STACKED_LARGE_VAL') {
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
     }
     if (readOnly) {
         return React.createElement(TextInput, { ...props });

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

	@@ -1 +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,~~EACZ~~,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,~~IAAG~~,WAAW,KAAK,aAAa,EAAE;~~QAChC~~,~~MAAM~~,~~KAAK~~,~~GAAG;YACZ~~,CAAC,~~KAAK~~,CAAC,EAAE,KAAK~~;SACf~~,CAAC;~~QACF~~,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,~~GAAI~~,~~CAAA~~;~~KACvC~~;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 } = props;\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n if(displayMode === 'LABELS_LEFT') {\n ~~const~~ ~~field~~ = {\n ~~[label]:~~ ~~value~~\n ~~};\n~~ return <FieldValueList ~~item~~={~~field~~} ~~/>\~~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"]}
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"]}

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

	@@ -1 +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,~~sBAkFrC~~"}
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"}

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

@@ -5,7 +5,7 @@ import Utils from '../../helpers/utils';
 import handleEvent from '../../helpers/event-utils';
 import FieldValueList from '../../designSystemExtension/FieldValueList';
 export default function Dropdown(props) {
-    const { getPConnect, label, required, disabled, placeholder, value = '', datasource = [], validatemessage, status, readOnly, testId, helperText, displayMode, onRecordChange } = props;
+    const { getPConnect, label, required, disabled, placeholder, value = '', datasource = [], validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel, onRecordChange } = props;
     const [options, setOptions] = useState([]);
     const helperTextToDisplay = validatemessage || helperText;
     const thePConn = getPConnect();
@@ -18,10 +18,10 @@ export default function Dropdown(props) {
     }, [datasource]);
     let readOnlyProp = {};
     if (displayMode === 'LABELS_LEFT') {
-        const field = {
-            [label]: value
-        };
-        return React.createElement(FieldValueList, { item: field });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+    }
+    if (displayMode === 'STACKED_LARGE_VAL') {
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
     }
     if (readOnly) {
         readOnlyProp = { readOnly: true };

package/lib/components/field/Dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/field/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAClD,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAOxE,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK;IACpC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,KAAK,GAAG,EAAE,EACV,UAAU,GAAG,EAAE,EACf,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACX,cAAc,EACf,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAC3D,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;IAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,aAAa,EAAE,CAAC,CAAC;QAC9E,WAAW,CAAC,OAAO,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QAC3D,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAI,YAAY,GAAG,EAAE,CAAC;IAEtB,IAAI,WAAW,KAAK,aAAa,EAAE;QACjC,~~MAAM~~,~~KAAK~~,~~GAAG;YACZ~~,CAAC,~~KAAK~~,CAAC,EAAE,KAAK~~;SACf~~,CAAC;~~QACF~~,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,~~GAAI~~,CAAC;~~KACxC~~;IAED,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,YAAY,GAAG,GAAG,CAAC,EAAE;QACzB,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QAC5E,WAAW,CAAC,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;QAChE,IAAI,cAAc,EAAE;YAClB,cAAc,CAAC,GAAG,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,mFAAmF;IACnF,qEAAqE;IACrE,OAAO,OAAO,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACnC,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,EAC3C,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAE,WAAW,EACxB,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAC9C,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EACnD,MAAM,QACN,UAAU,EAAE,EAAE,GAAG,YAAY,EAAE,GAAG,QAAQ,EAAE,IAE3C,OAAO,CAAC,GAAG,CAAC,CAAC,MAAW,EAAE,EAAE,CAAC,CAC5B,oBAAC,QAAQ,IAAC,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,IACzC,MAAM,CAAC,KAAK,CACJ,CACZ,CAAC,CACQ,CACb,CAAC;AACJ,CAAC","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { TextField } from '@material-ui/core';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Utils from '../../helpers/utils';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\ninterface IOption {\n key: string;\n value: string;\n}\n\nexport default function Dropdown(props) {\n const {\n getPConnect,\n label,\n required,\n disabled,\n placeholder,\n value = '',\n datasource = [],\n validatemessage,\n status,\n readOnly,\n testId,\n helperText,\n displayMode,\n onRecordChange\n } = props;\n const [options, setOptions] = useState<Array<IOption>>([]);\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n const thePConn = getPConnect();\n const actionsApi = thePConn.getActionsApi();\n const propName = thePConn.getStateProps().value;\n\n useEffect(() => {\n const optionsList = Utils.getOptionList(props, getPConnect().getDataObject());\n optionsList.unshift({ key: 'Select', value: 'Select...' });\n setOptions(optionsList);\n }, [datasource]);\n\n let readOnlyProp = {};\n\n if (displayMode === 'LABELS_LEFT') {\n ~~const~~ ~~field~~ = {\n ~~[label]:~~ ~~value~~\n ~~};\n~~ return <FieldValueList ~~item~~={~~field~~} />;\n }\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 handleChange = evt => {\n const selectedValue = evt.target.value === 'Select' ? '' : evt.target.value;\n handleEvent(actionsApi, 'changeNblur', propName, selectedValue);\n if (onRecordChange) {\n onRecordChange(evt);\n }\n };\n\n // Material UI shows a warning if the component is rendered before options are set.\n // So, hold off on rendering anything until options are available...\n return options.length === 0 ? null : (\n <TextField\n fullWidth\n variant={readOnly ? 'standard' : 'outlined'}\n helperText={helperTextToDisplay}\n placeholder={placeholder}\n size='small'\n required={required}\n disabled={disabled}\n onChange={!readOnly ? handleChange : undefined}\n error={status === 'error'}\n label={label}\n value={value === '' && !readOnly ? 'Select' : value}\n select\n InputProps={{ ...readOnlyProp, ...testProp }}\n >\n {options.map((option: any) => (\n <MenuItem key={option.key} value={option.key}>\n {option.value}\n </MenuItem>\n ))}\n </TextField>\n );\n}\n"]}
1	+ {"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../../src/components/field/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { TextField } from '@material-ui/core';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport Utils from '../../helpers/utils';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\ninterface IOption {\n key: string;\n value: string;\n}\n\nexport default function Dropdown(props) {\n const {\n getPConnect,\n label,\n required,\n disabled,\n placeholder,\n value = '',\n datasource = [],\n validatemessage,\n status,\n readOnly,\n testId,\n helperText,\n displayMode,\n hideLabel,\n onRecordChange\n } = props;\n const [options, setOptions] = useState<Array<IOption>>([]);\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n const thePConn = getPConnect();\n const actionsApi = thePConn.getActionsApi();\n const propName = thePConn.getStateProps().value;\n\n useEffect(() => {\n const optionsList = Utils.getOptionList(props, getPConnect().getDataObject());\n optionsList.unshift({ key: 'Select', value: 'Select...' });\n setOptions(optionsList);\n }, [datasource]);\n\n let readOnlyProp = {};\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 readOnlyProp = { readOnly: true };\n }\n\n let testProp = {};\n\n testProp = {\n 'data-test-id': testId\n };\n\n const handleChange = evt => {\n const selectedValue = evt.target.value === 'Select' ? '' : evt.target.value;\n handleEvent(actionsApi, 'changeNblur', propName, selectedValue);\n if (onRecordChange) {\n onRecordChange(evt);\n }\n };\n\n // Material UI shows a warning if the component is rendered before options are set.\n // So, hold off on rendering anything until options are available...\n return options.length === 0 ? null : (\n <TextField\n fullWidth\n variant={readOnly ? 'standard' : 'outlined'}\n helperText={helperTextToDisplay}\n placeholder={placeholder}\n size='small'\n required={required}\n disabled={disabled}\n onChange={!readOnly ? handleChange : undefined}\n error={status === 'error'}\n label={label}\n value={value === '' && !readOnly ? 'Select' : value}\n select\n InputProps={{ ...readOnlyProp, ...testProp }}\n >\n {options.map((option: any) => (\n <MenuItem key={option.key} value={option.key}>\n {option.value}\n </MenuItem>\n ))}\n </TextField>\n );\n}\n"]}

package/lib/components/field/Email/Email.js CHANGED Viewed

@@ -4,13 +4,13 @@ import MailOutlineIcon from '@material-ui/icons/MailOutline';
 import TextInput from '../TextInput';
 import FieldValueList from '../../designSystemExtension/FieldValueList';
 export default function Email(props) {
-    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode } = props;
+    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode, hideLabel } = props;
     const helperTextToDisplay = validatemessage || helperText;
     if (displayMode === 'LABELS_LEFT') {
-        const field = {
-            [label]: value
-        };
-        return React.createElement(FieldValueList, { item: field });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+    }
+    if (displayMode === 'STACKED_LARGE_VAL') {
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
     }
     if (readOnly) {
         return React.createElement(TextInput, { ...props });

package/lib/components/field/Email/Email.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../../src/components/field/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK;IACjC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,~~EACZ~~,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,~~IAAG~~,WAAW,KAAK,aAAa,EAAE;~~QAChC~~,~~MAAM~~,~~KAAK~~,~~GAAG;YACZ~~,CAAC,~~KAAK~~,CAAC,EAAE,KAAK~~;SACf~~,CAAC;~~QACF~~,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,~~GAAI~~,~~CAAA~~;~~KACvC~~;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;~~IAID~~,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,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,OAAO,EACZ,UAAU,EAAE;YACV,cAAc,EAAE,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;gBAC9B,oBAAC,eAAe,OAAG,CACJ,CAClB;YACD,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE;SAC5B,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField, InputAdornment } from '@material-ui/core';\nimport MailOutlineIcon from '@material-ui/icons/MailOutline';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\nexport default function Email(props) {\n const {\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 } = props;\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n if(displayMode === 'LABELS_LEFT') {\n ~~const~~ ~~field~~ = {\n ~~[label]:~~ ~~value~~\n ~~};\n~~ return <FieldValueList ~~item~~={~~field~~} ~~/>\~~n }\n\n if (readOnly) {\n return <TextInput {...props} />;\n }\n\n~~\n\n~~ let testProp = {};\n\n testProp = {\n 'data-test-id': testId\n };\n\n return (\n <TextField\n fullWidth\n variant='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='email'\n InputProps={{\n startAdornment: (\n <InputAdornment position='start'>\n <MailOutlineIcon />\n </InputAdornment>\n ),\n inputProps: { ...testProp }\n }}\n />\n );\n}\n"]}
1	+ {"version":3,"file":"Email.js","sourceRoot":"","sources":["../../../../src/components/field/Email/Email.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAC7D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK;IACjC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,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,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,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,OAAO,EACZ,UAAU,EAAE;YACV,cAAc,EAAE,CACd,oBAAC,cAAc,IAAC,QAAQ,EAAC,OAAO;gBAC9B,oBAAC,eAAe,OAAG,CACJ,CAClB;YACD,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE;SAC5B,GACD,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField, InputAdornment } from '@material-ui/core';\nimport MailOutlineIcon from '@material-ui/icons/MailOutline';\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\nexport default function Email(props) {\n const {\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 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 let testProp = {};\n\n testProp = {\n 'data-test-id': testId\n };\n\n return (\n <TextField\n fullWidth\n variant='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='email'\n InputProps={{\n startAdornment: (\n <InputAdornment position='start'>\n <MailOutlineIcon />\n </InputAdornment>\n ),\n inputProps: { ...testProp }\n }}\n />\n );\n}\n"]}

package/lib/components/field/Integer/Integer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Integer.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Integer/Integer.tsx"],"names":[],"mappings":";AAKA,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,KAAA,~~eAuEpC~~"}
1	+ {"version":3,"file":"Integer.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Integer/Integer.tsx"],"names":[],"mappings":";AAKA,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,KAAA,eAyEpC"}

package/lib/components/field/Integer/Integer.js CHANGED Viewed

@@ -3,14 +3,14 @@ import { TextField } from '@material-ui/core';
 import TextInput from '../TextInput';
 import FieldValueList from '../../designSystemExtension/FieldValueList';
 export default function Integer(props) {
-    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode } = props;
+    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode, hideLabel } = props;
     const helperTextToDisplay = validatemessage || helperText;
     // console.log(`Integer: label: ${label} value: ${value}`);
     if (displayMode === 'LABELS_LEFT') {
-        const field = {
-            [label]: value
-        };
-        return React.createElement(FieldValueList, { item: field });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+    }
+    if (displayMode === 'STACKED_LARGE_VAL') {
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
     }
     if (readOnly) {
         return React.createElement(TextInput, { ...props });

package/lib/components/field/Integer/Integer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Integer.js","sourceRoot":"","sources":["../../../../src/components/field/Integer/Integer.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,MAAM,EACN,UAAU,EACV,WAAW,~~EACZ~~,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,2DAA2D;IAE3D,~~IAAG~~,WAAW,KAAK,aAAa,EAAE;~~QAChC~~,~~MAAM~~,~~KAAK~~,~~GAAG;YACZ~~,CAAC,~~KAAK~~,CAAC,EAAE,KAAK~~;SACf~~,CAAC;~~QACF~~,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,~~GAAI~~,~~CAAA~~;~~KACvC~~;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,SAAS,WAAW,CAAC,KAAK;QACxB,qEAAqE;QAErE,mEAAmE;QACnE,0FAA0F;QAC1F,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QACnC,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAE7C,IAAI,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YACtC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACrD;QAED,mDAAmD;QACnD,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;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,WAAW,EACrB,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,GAAG,QAAQ,EAAE,GACpE,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 Integer(props) {\n const {\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 } = props;\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n // console.log(`Integer: label: ${label} value: ${value}`);\n\n if(displayMode === 'LABELS_LEFT') {\n ~~const~~ ~~field~~ = {\n ~~[label]:~~ ~~value~~\n ~~};\n~~ return <FieldValueList ~~item~~={~~field~~} ~~/>\~~n }\n\n if (readOnly) {\n return <TextInput {...props} />;\n }\n\n let testProp = {};\n\n testProp = {\n 'data-test-id': testId\n };\n\n function intOnChange(event) {\n // console.log(`Integer intOnChange inValue: ${event.target.value}`);\n\n // Disallow \".\" and \",\" (separators) since this is an integer field\n // Mimics Pega Integer behavior (where separator characters are \"eaten\" if they're typed)\n const disallowedChars = ['.', ','];\n const theAttemptedValue = event.target.value;\n const lastChar = theAttemptedValue.slice(-1);\n\n if (disallowedChars.includes(lastChar)) {\n event.target.value = theAttemptedValue.slice(0, -1);\n }\n\n // Pass through to the Constellation change handler\n onChange(event);\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={intOnChange}\n onBlur={!readOnly ? onBlur : undefined}\n error={status === 'error'}\n label={label}\n value={value}\n type='text'\n inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}\n />\n );\n}\n"]}
1	+ {"version":3,"file":"Integer.js","sourceRoot":"","sources":["../../../../src/components/field/Integer/Integer.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,MAAM,EACN,UAAU,EACV,WAAW,EACX,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,2DAA2D;IAE3D,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,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,SAAS,WAAW,CAAC,KAAK;QACxB,qEAAqE;QAErE,mEAAmE;QACnE,0FAA0F;QAC1F,MAAM,eAAe,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;QACnC,MAAM,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAC7C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAE7C,IAAI,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YACtC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SACrD;QAED,mDAAmD;QACnD,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;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,WAAW,EACrB,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,GAAG,QAAQ,EAAE,GACpE,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 Integer(props) {\n const {\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 const helperTextToDisplay = validatemessage \|\| helperText;\n\n // console.log(`Integer: label: ${label} value: ${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 if (readOnly) {\n return <TextInput {...props} />;\n }\n\n let testProp = {};\n\n testProp = {\n 'data-test-id': testId\n };\n\n function intOnChange(event) {\n // console.log(`Integer intOnChange inValue: ${event.target.value}`);\n\n // Disallow \".\" and \",\" (separators) since this is an integer field\n // Mimics Pega Integer behavior (where separator characters are \"eaten\" if they're typed)\n const disallowedChars = ['.', ','];\n const theAttemptedValue = event.target.value;\n const lastChar = theAttemptedValue.slice(-1);\n\n if (disallowedChars.includes(lastChar)) {\n event.target.value = theAttemptedValue.slice(0, -1);\n }\n\n // Pass through to the Constellation change handler\n onChange(event);\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={intOnChange}\n onBlur={!readOnly ? onBlur : undefined}\n error={status === 'error'}\n label={label}\n value={value}\n type='text'\n inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}\n />\n );\n}\n"]}

package/lib/components/field/Percentage/Percentage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Percentage.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Percentage/Percentage.tsx"],"names":[],"mappings":";AAwBA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,KAAA,~~eAyDvC~~"}
1	+ {"version":3,"file":"Percentage.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Percentage/Percentage.tsx"],"names":[],"mappings":";AAwBA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,KAAA,eA2DvC"}

package/lib/components/field/Percentage/Percentage.js CHANGED Viewed

@@ -21,14 +21,14 @@ const useStyles = makeStyles(( /* theme */) => ({
 }));
 export default function Percentage(props) {
     const classes = useStyles();
-    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode } = props;
+    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode, hideLabel } = props;
     const helperTextToDisplay = validatemessage || helperText;
     // console.log(`Percentage: label: ${label} value: ${value}`);
     if (displayMode === 'LABELS_LEFT') {
-        const field = {
-            [label]: value
-        };
-        return React.createElement(FieldValueList, { item: field });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+    }
+    if (displayMode === 'STACKED_LARGE_VAL') {
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
     }
     if (readOnly) {
         return React.createElement(TextInput, { ...props });

package/lib/components/field/Percentage/Percentage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Percentage.js","sourceRoot":"","sources":["../../../../src/components/field/Percentage/Percentage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,gHAAgH;AAChH,MAAM,SAAS,GAAG,UAAU,CAAC,EAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC7C,KAAK,EAAE;QACL,sBAAsB,EAAE;YACtB,iBAAiB,EAAE,WAAW;SAC/B;QACD,iDAAiD,EAAE;YACjD,oBAAoB,EAAE,MAAM;YAC5B,MAAM,EAAE,CAAC;SACV;QACD,iDAAiD,EAAE;YACjD,oBAAoB,EAAE,MAAM;YAC5B,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK;IACtC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,~~EACZ~~,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,8DAA8D;IAE9D,~~IAAG~~,WAAW,KAAK,aAAa,EAAE;~~QAChC~~,~~MAAM~~,~~KAAK~~,~~GAAG;YACZ~~,CAAC,~~KAAK~~,CAAC,EAAE,KAAK~~;SACf~~,CAAC;~~QACF~~,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,~~GAAI~~,~~CAAA~~;~~KACvC~~;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,oBAAC,SAAS,OAAK,KAAK,GAAI,CAAC;KACjC;IAED,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,KAAK,EACxB,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,QAAQ,EACb,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\n// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview\nconst useStyles = makeStyles((/* theme */) => ({\n input: {\n '& input[type=number]': {\n '-moz-appearance': 'textfield'\n },\n '& input[type=number]::-webkit-outer-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0\n },\n '& input[type=number]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0\n }\n }\n}));\n\nexport default function Percentage(props) {\n const classes = useStyles();\n\n const {\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 } = props;\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n // console.log(`Percentage: label: ${label} value: ${value}`);\n\n if(displayMode === 'LABELS_LEFT') {\n ~~const~~ ~~field~~ = {\n ~~[label]:~~ ~~value~~\n ~~};\n~~ return <FieldValueList ~~item~~={~~field~~} ~~/>\~~n }\n\n if (readOnly) {\n return <TextInput {...props} />;\n }\n\n let testProp = {};\n\n testProp = {\n 'data-test-id': testId\n };\n\n return (\n <TextField\n className={classes.input}\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='number'\n inputProps={{ ...testProp }}\n />\n );\n}\n"]}
1	+ {"version":3,"file":"Percentage.js","sourceRoot":"","sources":["../../../../src/components/field/Percentage/Percentage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,gHAAgH;AAChH,MAAM,SAAS,GAAG,UAAU,CAAC,EAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IAC7C,KAAK,EAAE;QACL,sBAAsB,EAAE;YACtB,iBAAiB,EAAE,WAAW;SAC/B;QACD,iDAAiD,EAAE;YACjD,oBAAoB,EAAE,MAAM;YAC5B,MAAM,EAAE,CAAC;SACV;QACD,iDAAiD,EAAE;YACjD,oBAAoB,EAAE,MAAM;YAC5B,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK;IACtC,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACX,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,8DAA8D;IAE9D,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,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,KAAK,EACxB,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,QAAQ,EACb,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport { TextField } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport TextInput from '../TextInput';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\n// Inspired by https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview\nconst useStyles = makeStyles((/* theme */) => ({\n input: {\n '& input[type=number]': {\n '-moz-appearance': 'textfield'\n },\n '& input[type=number]::-webkit-outer-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0\n },\n '& input[type=number]::-webkit-inner-spin-button': {\n '-webkit-appearance': 'none',\n margin: 0\n }\n }\n}));\n\nexport default function Percentage(props) {\n const classes = useStyles();\n\n const {\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 const helperTextToDisplay = validatemessage \|\| helperText;\n\n // console.log(`Percentage: label: ${label} value: ${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 if (readOnly) {\n return <TextInput {...props} />;\n }\n\n let testProp = {};\n\n testProp = {\n 'data-test-id': testId\n };\n\n return (\n <TextField\n className={classes.input}\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='number'\n inputProps={{ ...testProp }}\n />\n );\n}\n"]}

package/lib/components/field/Phone/Phone.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Phone/Phone.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,KAAA,~~eAqFlC~~"}
1	+ {"version":3,"file":"Phone.d.ts","sourceRoot":"","sources":["../../../../src/components/field/Phone/Phone.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,KAAA,eAsFlC"}

package/lib/components/field/Phone/Phone.js CHANGED Viewed

@@ -2,17 +2,17 @@ import React from 'react';
 import MuiPhoneNumber from 'material-ui-phone-number';
 import FieldValueList from '../../designSystemExtension/FieldValueList';
 export default function Phone(props) {
-    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode } = props;
+    const { label, required, disabled, value = '', validatemessage, status, onChange, onBlur, readOnly, testId, helperText, displayMode, hideLabel } = props;
     const helperTextToDisplay = validatemessage || helperText;
     let testProp = {};
     testProp = {
         'data-test-id': testId
     };
     if (displayMode === 'LABELS_LEFT') {
-        const field = {
-            [label]: value
-        };
-        return React.createElement(FieldValueList, { item: field });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+    }
+    if (displayMode === 'STACKED_LARGE_VAL') {
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
     }
     if (readOnly) {
         const disableDropdown = true;

package/lib/components/field/Phone/Phone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../src/components/field/Phone/Phone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK;IACjC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,~~EACZ~~,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,~~IAAG~~,WAAW,KAAK,aAAa,EAAE;~~QAChC~~,~~MAAM~~,~~KAAK~~,~~GAAG;YACZ~~,CAAC,~~KAAK~~,CAAC,EAAE,KAAK~~;SACf~~,CAAC;~~QACF~~,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,~~GAAI~~,~~CAAA~~;~~KACvC~~;IAED,IAAI,QAAQ,EAAE;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC;QAC7B,OAAO,CACL;YACE,oBAAC,cAAc,IACb,SAAS,QACT,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,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE;oBACV,QAAQ,EAAE,IAAI;iBACf,EACD,eAAe,EAAE,eAAe,GAChC,CACE,CACP,CAAC;KACH;~~IAGD~~,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE;QAC9B,IAAI,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC1D,UAAU,GAAG,IAAI,UAAU,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,MAAM,UAAU,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC;QACxC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;QACxE,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,cAAc,EAAC,IAAI,EACnB,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,KAAK,EACZ,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport MuiPhoneNumber from 'material-ui-phone-number';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\nexport default function Phone(props) {\n const {\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 } = props;\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n let testProp = {};\n\n testProp = {\n 'data-test-id': testId\n };\n\n if(displayMode === 'LABELS_LEFT') {\n ~~const~~ ~~field~~ = {\n ~~[label]:~~ ~~value~~\n ~~};\n~~ return <FieldValueList ~~item~~={~~field~~} ~~/>\~~n }\n\n if (readOnly) {\n const disableDropdown = true;\n return (\n <div>\n <MuiPhoneNumber\n fullWidth\n helperText={helperTextToDisplay}\n placeholder=''\n size='small'\n required={required}\n disabled={disabled}\n onChange={onChange}\n error={status === 'error'}\n label={label}\n value={value}\n InputProps={{\n readOnly: true\n }}\n disableDropdown={disableDropdown}\n />\n </div>\n );\n }\n\n\n const handleChange = inputVal => {\n let phoneValue = inputVal && inputVal.replace(/\\D+/g, '');\n phoneValue = `+${phoneValue}`;\n onChange({ value: phoneValue });\n };\n\n const handleBlur = event => {\n const phoneValue = event?.target?.value;\n event.target.value = `+${phoneValue && phoneValue.replace(/\\D+/g, '')}`;\n onBlur(event);\n };\n\n return (\n <MuiPhoneNumber\n fullWidth\n variant='outlined'\n helperText={helperTextToDisplay}\n placeholder=''\n size='small'\n defaultCountry='us'\n required={required}\n disabled={disabled}\n onChange={handleChange}\n onBlur={!readOnly ? handleBlur : undefined}\n error={status === 'error'}\n label={label}\n value={value}\n InputProps={{ ...testProp }}\n />\n );\n}\n"]}
1	+ {"version":3,"file":"Phone.js","sourceRoot":"","sources":["../../../../src/components/field/Phone/Phone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK;IACjC,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,eAAe,EACf,MAAM,EACN,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,MAAM,EACN,UAAU,EACV,WAAW,EACX,SAAS,EACV,GAAG,KAAK,CAAC;IACV,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,IAAI,QAAQ,GAAG,EAAE,CAAC;IAElB,QAAQ,GAAG;QACT,cAAc,EAAE,MAAM;KACvB,CAAC;IAEF,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,MAAM,eAAe,GAAG,IAAI,CAAC;QAC7B,OAAO,CACL;YACE,oBAAC,cAAc,IACb,SAAS,QACT,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,KAAK,EAAE,MAAM,KAAK,OAAO,EACzB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE;oBACV,QAAQ,EAAE,IAAI;iBACf,EACD,eAAe,EAAE,eAAe,GAChC,CACE,CACP,CAAC;KACH;IAED,MAAM,YAAY,GAAG,QAAQ,CAAC,EAAE;QAC9B,IAAI,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC1D,UAAU,GAAG,IAAI,UAAU,EAAE,CAAC;QAC9B,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,MAAM,UAAU,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC;QACxC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;QACxE,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,QACT,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,mBAAmB,EAC/B,WAAW,EAAC,EAAE,EACd,IAAI,EAAC,OAAO,EACZ,cAAc,EAAC,IAAI,EACnB,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,KAAK,EACZ,UAAU,EAAE,EAAE,GAAG,QAAQ,EAAE,GAC3B,CACH,CAAC;AACJ,CAAC","sourcesContent":["import React from 'react';\nimport MuiPhoneNumber from 'material-ui-phone-number';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\nexport default function Phone(props) {\n const {\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 const helperTextToDisplay = validatemessage \|\| helperText;\n\n let testProp = {};\n\n testProp = {\n 'data-test-id': testId\n };\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 const disableDropdown = true;\n return (\n <div>\n <MuiPhoneNumber\n fullWidth\n helperText={helperTextToDisplay}\n placeholder=''\n size='small'\n required={required}\n disabled={disabled}\n onChange={onChange}\n error={status === 'error'}\n label={label}\n value={value}\n InputProps={{\n readOnly: true\n }}\n disableDropdown={disableDropdown}\n />\n </div>\n );\n }\n\n const handleChange = inputVal => {\n let phoneValue = inputVal && inputVal.replace(/\\D+/g, '');\n phoneValue = `+${phoneValue}`;\n onChange({ value: phoneValue });\n };\n\n const handleBlur = event => {\n const phoneValue = event?.target?.value;\n event.target.value = `+${phoneValue && phoneValue.replace(/\\D+/g, '')}`;\n onBlur(event);\n };\n\n return (\n <MuiPhoneNumber\n fullWidth\n variant='outlined'\n helperText={helperTextToDisplay}\n placeholder=''\n size='small'\n defaultCountry='us'\n required={required}\n disabled={disabled}\n onChange={handleChange}\n onBlur={!readOnly ? handleBlur : undefined}\n error={status === 'error'}\n label={label}\n value={value}\n InputProps={{ ...testProp }}\n />\n );\n}\n"]}

package/lib/components/field/RadioButtons/RadioButtons.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/field/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":";AAcA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,KAAA,~~eAoEzC~~"}
1	+ {"version":3,"file":"RadioButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/field/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":";AAcA,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,KAAA,eAsEzC"}

package/lib/components/field/RadioButtons/RadioButtons.js CHANGED Viewed

@@ -4,7 +4,7 @@ import Utils from '../../helpers/utils';
 import handleEvent from '../../helpers/event-utils';
 import FieldValueList from '../../designSystemExtension/FieldValueList';
 export default function RadioButtons(props) {
-    const { getPConnect, label, value = '', readOnly, validatemessage, helperText, status, required, inline, displayMode } = props;
+    const { getPConnect, label, value = '', readOnly, validatemessage, helperText, status, required, inline, displayMode, hideLabel } = props;
     const [theSelectedButton, setSelectedButton] = useState(value);
     const thePConn = getPConnect();
     const theConfigProps = thePConn.getConfigProps();
@@ -19,10 +19,10 @@ export default function RadioButtons(props) {
         setSelectedButton(value);
     }, [value]);
     if (displayMode === 'LABELS_LEFT') {
-        const field = {
-            [label]: value
-        };
-        return React.createElement(FieldValueList, { item: field });
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value });
+    }
+    if (displayMode === 'STACKED_LARGE_VAL') {
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: value, variant: 'stacked' });
     }
     const handleChange = event => {
         handleEvent(actionsApi, 'changeNblur', propName, event.target.value);

package/lib/components/field/RadioButtons/RadioButtons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../../src/components/field/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,SAAS,EACT,cAAc,EACf,MAAM,mBAAmB,CAAC;AAE3B,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,cAAc,MAAM,4CAA4C,CAAC;AAExE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK;IACxC,MAAM,EACJ,WAAW,EACX,KAAK,EACL,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,eAAe,EACf,UAAU,EACV,MAAM,EACN,QAAQ,EACR,MAAM,EACN,WAAW,~~EACZ~~,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE/D,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,cAAc,GAAG,QAAQ,CAAC,cAAc,EAAE,CAAC;IACjD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC;IAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,CAAC;IAChD,MAAM,mBAAmB,GAAG,eAAe,IAAI,UAAU,CAAC;IAE1D,kFAAkF;IAClF,0CAA0C;IAC1C,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,EAAE,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;IAEjF,SAAS,CAAC,GAAG,EAAE;QACb,+FAA+F;QAC/F,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,WAAW,KAAK,aAAa,EAAE;QACjC,~~MAAM~~,~~KAAK~~,~~GAAG;YACZ~~,CAAC,~~KAAK~~,CAAC,EAAE,KAAK~~;SACf~~,CAAC;~~QACF~~,OAAO,oBAAC,cAAc,IAAC,IAAI,EAAE,KAAK,~~GAAI~~,CAAC;~~KACxC~~;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,EAAE;QAC3B,WAAW,CAAC,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE;QACzB,QAAQ,CAAC,gBAAgB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC3D,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,WAAW,IAAC,KAAK,EAAE,MAAM,KAAK,OAAO,EAAE,QAAQ,EAAE,QAAQ;QACxD,oBAAC,SAAS,IAAC,SAAS,EAAC,QAAQ,IAAE,KAAK,CAAa;QACjD,oBAAC,UAAU,IACT,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAC1C,GAAG,EAAE,MAAM,IAEV,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1B,OAAO,CACL,oBAAC,gBAAgB,IACf,KAAK,EAAE,SAAS,CAAC,GAAG,EACpB,GAAG,EAAE,SAAS,CAAC,GAAG,EAClB,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,OAAO,EAAE,oBAAC,KAAK,IAAC,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAE,QAAQ,GAAI,GAC1E,CACH,CAAC;QACJ,CAAC,CAAC,CACS;QACb,oBAAC,cAAc,QAAE,mBAAmB,CAAkB,CAC1C,CACf,CAAC;AACJ,CAAC","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n Radio,\n RadioGroup,\n FormControl,\n FormControlLabel,\n FormLabel,\n FormHelperText\n} from '@material-ui/core';\n\nimport Utils from '../../helpers/utils';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\nexport default function RadioButtons(props) {\n const {\n getPConnect,\n label,\n value = '',\n readOnly,\n validatemessage,\n helperText,\n status,\n required,\n inline,\n displayMode\n } = props;\n const [theSelectedButton, setSelectedButton] = useState(value);\n\n const thePConn = getPConnect();\n const theConfigProps = thePConn.getConfigProps();\n const actionsApi = thePConn.getActionsApi();\n const propName = thePConn.getStateProps().value;\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n // theOptions will be an array of JSON objects that are literally key/value pairs.\n // Ex: [ {key: \"Basic\", value: \"Basic\"} ]\n const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject());\n\n useEffect(() => {\n // This update theSelectedButton which will update the UI to show the selected button correctly\n setSelectedButton(value);\n }, [value]);\n\n if (displayMode === 'LABELS_LEFT') {\n ~~const~~ ~~field~~ = {\n ~~[label]:~~ ~~value~~\n ~~};\n~~ return <FieldValueList ~~item~~={~~field~~} />;\n }\n\n const handleChange = event => {\n handleEvent(actionsApi, 'changeNblur', propName, event.target.value);\n };\n\n const handleBlur = event => {\n thePConn.getValidationApi().validate(event.target.value);\n };\n\n return (\n <FormControl error={status === 'error'} required={required}>\n <FormLabel component='legend'>{label}</FormLabel>\n <RadioGroup\n value={theSelectedButton}\n onChange={handleChange}\n onBlur={!readOnly ? handleBlur : undefined}\n row={inline}\n >\n {theOptions.map(theOption => {\n return (\n <FormControlLabel\n value={theOption.key}\n key={theOption.key}\n label={theOption.value}\n control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}\n />\n );\n })}\n </RadioGroup>\n <FormHelperText>{helperTextToDisplay}</FormHelperText>\n </FormControl>\n );\n}\n"]}
1	+ {"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../../src/components/field/RadioButtons/RadioButtons.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport {\n Radio,\n RadioGroup,\n FormControl,\n FormControlLabel,\n FormLabel,\n FormHelperText\n} from '@material-ui/core';\n\nimport Utils from '../../helpers/utils';\nimport handleEvent from '../../helpers/event-utils';\nimport FieldValueList from '../../designSystemExtension/FieldValueList';\n\nexport default function RadioButtons(props) {\n const {\n getPConnect,\n label,\n value = '',\n readOnly,\n validatemessage,\n helperText,\n status,\n required,\n inline,\n displayMode,\n hideLabel\n } = props;\n const [theSelectedButton, setSelectedButton] = useState(value);\n\n const thePConn = getPConnect();\n const theConfigProps = thePConn.getConfigProps();\n const actionsApi = thePConn.getActionsApi();\n const propName = thePConn.getStateProps().value;\n const helperTextToDisplay = validatemessage \|\| helperText;\n\n // theOptions will be an array of JSON objects that are literally key/value pairs.\n // Ex: [ {key: \"Basic\", value: \"Basic\"} ]\n const theOptions = Utils.getOptionList(theConfigProps, thePConn.getDataObject());\n\n useEffect(() => {\n // This update theSelectedButton which will update the UI to show the selected button correctly\n setSelectedButton(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.value);\n };\n\n const handleBlur = event => {\n thePConn.getValidationApi().validate(event.target.value);\n };\n\n return (\n <FormControl error={status === 'error'} required={required}>\n <FormLabel component='legend'>{label}</FormLabel>\n <RadioGroup\n value={theSelectedButton}\n onChange={handleChange}\n onBlur={!readOnly ? handleBlur : undefined}\n row={inline}\n >\n {theOptions.map(theOption => {\n return (\n <FormControlLabel\n value={theOption.key}\n key={theOption.key}\n label={theOption.value}\n control={<Radio key={theOption.key} color='primary' disabled={readOnly} />}\n />\n );\n })}\n </RadioGroup>\n <FormHelperText>{helperTextToDisplay}</FormHelperText>\n </FormControl>\n );\n}\n"]}

package/lib/components/field/SemanticLink/SemanticLink.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SemanticLink.d.ts","sourceRoot":"","sources":["../../../../src/components/field/SemanticLink/SemanticLink.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;~~AAuCnC~~,iBAAwB,YAAY,CAAC,KAAK,KAAA,~~2BAsBzC~~;~~kBAtBuB~~,YAAY;;;;;;;eAAZ,YAAY"}
1	+ {"version":3,"file":"SemanticLink.d.ts","sourceRoot":"","sources":["../../../../src/components/field/SemanticLink/SemanticLink.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAwCnC,iBAAwB,YAAY,CAAC,KAAK,KAAA,2BA2BzC;kBA3BuB,YAAY;;;;;;;eAAZ,YAAY"}

package/lib/components/field/SemanticLink/SemanticLink.js CHANGED Viewed

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles } from '@material-ui/core/styles';
+import FieldValueList from '../../designSystemExtension/FieldValueList';
 /* although this is called the SemanticLink component, we are not yet displaying as a
 SemanticLink in SDK and only showing the value as a read only text field. */
 const useStyles = makeStyles((theme) => ({
@@ -36,7 +37,7 @@ const useStyles = makeStyles((theme) => ({
     }
 }));
 export default function SemanticLink(props) {
-    const { text, displayMode, label, } = props;
+    const { text, displayMode, label, hideLabel } = props;
     const classes = useStyles();
     if (displayMode === "LABELS_LEFT" || (!displayMode && label !== undefined)) {
         const value = text || "---";
@@ -46,6 +47,9 @@ export default function SemanticLink(props) {
             React.createElement(Grid, { item: true, xs: 6 },
                 React.createElement(Typography, { variant: "body2", component: "span", className: classes.fieldValue }, value))));
     }
+    if (displayMode === 'STACKED_LARGE_VAL') {
+        return React.createElement(FieldValueList, { name: hideLabel ? '' : label, value: text, variant: 'stacked' });
+    }
 }
 SemanticLink.propTypes = {
     text: PropTypes.string.isRequired,