@pega/react-sdk-components 0.23.0

package/lib/components/designSystemExtensions/DetailsFields/DetailsFields.js

@@ -0,0 +1,112 @@
+/* eslint-disable react/no-array-index-key */
+import React, { createElement, isValidElement } from 'react';
+import PropTypes from 'prop-types';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import createPConnectComponent from '../../../bridge/react_pconnect';
+import { format } from '../../helpers/formatters';
+const useStyles = makeStyles(theme => ({
+    root: {
+        paddingRight: theme.spacing(1),
+        paddingLeft: theme.spacing(1),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        marginLeft: theme.spacing(1),
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+    },
+    fieldLabel: {
+        display: 'block',
+        fontWeight: 400,
+        color: theme.palette.text.secondary
+    },
+    fieldValue: {
+        fontWeight: 400,
+        color: theme.palette.text.primary
+    }
+}));
+export default function DetailsFields(props) {
+    // const componentName = "DetailsFields";
+    const { fields } = props;
+    const classes = useStyles();
+    const fieldComponents = [];
+    fields?.forEach((field, index) => {
+        const thePConn = field.getPConnect();
+        const theCompType = thePConn.getComponentName().toLowerCase();
+        const { label, value } = thePConn.getConfigProps();
+        // If value is "" then also we would have to get viewMetadata using getReferencedView.
+        if (theCompType === 'reference' || value === '') {
+            const configObj = thePConn?.getReferencedView();
+            configObj.config.readOnly = theCompType === 'reference';
+            configObj.config.displayMode = 'LABELS_LEFT';
+            const propToUse = { ...thePConn.getInheritedProps() };
+            configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;
+            fieldComponents.push({
+                type: theCompType,
+                label,
+                value: (React.createElement(React.Fragment, { key: index }, createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())))
+            });
+        }
+        else {
+            fieldComponents.push({ type: theCompType, value, label });
+        }
+    });
+    function getGridItemLabel(field, keyVal) {
+        const dispValue = field.label;
+        return (React.createElement(Grid, { item: true, xs: 6, key: keyVal },
+            React.createElement(Typography, { variant: 'body2', component: 'span', className: `${classes.fieldLabel}` }, dispValue)));
+    }
+    function formatItemValue(inField) {
+        const { type, value } = inField;
+        let formattedVal = value;
+        // eslint-disable-next-line sonarjs/no-small-switch
+        switch (type) {
+            case 'date':
+                formattedVal = format(value, type);
+                break;
+            default:
+                // No match means we return the value as we received it
+                break;
+        }
+        // Finally, if the value is undefined or an empty string, we want to display it as "---"
+        if (formattedVal === undefined || formattedVal === '') {
+            formattedVal = '---';
+        }
+        return formattedVal;
+    }
+    function getGridItemValue(field, keyVal) {
+        const formattedValue = formatItemValue(field);
+        return (React.createElement(Grid, { item: true, xs: 6, key: keyVal },
+            React.createElement(Typography, { variant: 'body2', component: 'span', className: classes.fieldValue }, formattedValue)));
+    }
+    function getGridItem(field, keyVal) {
+        return (React.createElement(Grid, { item: true, xs: 12, key: keyVal },
+            React.createElement(Typography, { variant: 'body2', component: 'span', className: classes.fieldValue }, field?.value)));
+    }
+    function getGridItems() {
+        const gridItems = fieldComponents.map((field, index) => {
+            if (field?.type === 'reference') {
+                return field?.value;
+            }
+            else if (isValidElement(field?.value)) {
+                return (React.createElement(Grid, { container: true, spacing: 1, style: { padding: '4px 0px' }, key: index }, getGridItem(field, `${index}-item`)));
+            }
+            else {
+                return (React.createElement(Grid, { container: true, spacing: 1, style: { padding: '4px 0px' }, key: index },
+                    getGridItemLabel(field, `${index}-label`),
+                    getGridItemValue(field, `${index}-value`)));
+            }
+        });
+        return gridItems;
+    }
+    return React.createElement(React.Fragment, null, getGridItems());
+}
+DetailsFields.defaultProps = {
+    fields: []
+};
+DetailsFields.propTypes = {
+    fields: PropTypes.arrayOf(PropTypes.any)
+};
+//# sourceMappingURL=DetailsFields.js.map

package/lib/components/designSystemExtensions/DetailsFields/DetailsFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailsFields.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/DetailsFields/DetailsFields.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/no-array-index-key */\nimport React, { createElement, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\n\nimport createPConnectComponent from '../../../bridge/react_pconnect';\n\nimport { format } from '../../helpers/formatters';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    paddingRight: theme.spacing(1),\n    paddingLeft: theme.spacing(1),\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1),\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldLabel: {\n    display: 'block',\n    fontWeight: 400,\n    color: theme.palette.text.secondary\n  },\n  fieldValue: {\n    fontWeight: 400,\n    color: theme.palette.text.primary\n  }\n}));\n\nexport default function DetailsFields(props) {\n  // const componentName = \"DetailsFields\";\n  const { fields } = props;\n  const classes = useStyles();\n  const fieldComponents: Array<any> = [];\n\n  fields?.forEach((field, index) => {\n    const thePConn = field.getPConnect();\n    const theCompType = thePConn.getComponentName().toLowerCase();\n    const { label, value } = thePConn.getConfigProps();\n    // If value is \"\" then also we would have to get viewMetadata using getReferencedView.\n    if (theCompType === 'reference' || value === '') {\n      const configObj = thePConn?.getReferencedView();\n      configObj.config.readOnly = theCompType === 'reference';\n      configObj.config.displayMode = 'LABELS_LEFT';\n      const propToUse = { ...thePConn.getInheritedProps() };\n      configObj.config.label = theCompType === 'reference' ? propToUse?.label : label;\n      fieldComponents.push({\n        type: theCompType,\n        label,\n        value: (\n          <React.Fragment key={index}>\n            {createElement(createPConnectComponent(), thePConn.getReferencedViewPConnect())}\n          </React.Fragment>\n        )\n      });\n    } else {\n      fieldComponents.push({ type: theCompType, value, label });\n    }\n  });\n\n  function getGridItemLabel(field: any, keyVal: string) {\n    const dispValue = field.label;\n\n    return (\n      <Grid item xs={6} key={keyVal}>\n        <Typography variant='body2' component='span' className={`${classes.fieldLabel}`}>\n          {dispValue}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function formatItemValue(inField: any) {\n    const { type, value } = inField;\n    let formattedVal = value;\n\n    // eslint-disable-next-line sonarjs/no-small-switch\n    switch (type) {\n      case 'date':\n        formattedVal = format(value, type);\n        break;\n\n      default:\n        // No match means we return the value as we received it\n        break;\n    }\n\n    // Finally, if the value is undefined or an empty string, we want to display it as \"---\"\n    if (formattedVal === undefined || formattedVal === '') {\n      formattedVal = '---';\n    }\n\n    return formattedVal;\n  }\n\n  function getGridItemValue(field: any, keyVal: string) {\n    const formattedValue = formatItemValue(field);\n\n    return (\n      <Grid item xs={6} key={keyVal}>\n        <Typography variant='body2' component='span' className={classes.fieldValue}>\n          {formattedValue}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function getGridItem(field: any, keyVal: string) {\n\n    return (\n      <Grid item xs={12} key={keyVal}>\n        <Typography variant='body2' component='span' className={classes.fieldValue}>\n          {field?.value}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function getGridItems() {\n    const gridItems: Array<any> = fieldComponents.map((field, index) => {\n      if (field?.type === 'reference') {\n        return field?.value;\n      } else if (isValidElement(field?.value)) {\n        return (\n          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>\n            {getGridItem(field, `${index}-item`)}\n          </Grid>\n        );\n      } else {\n        return (\n          <Grid container spacing={1} style={{ padding: '4px 0px' }} key={index}>\n            {getGridItemLabel(field, `${index}-label`)}\n            {getGridItemValue(field, `${index}-value`)}\n          </Grid>\n        );\n      }\n    });\n    return gridItems;\n  }\n\n  return <React.Fragment>{getGridItems()}</React.Fragment>;\n}\n\nDetailsFields.defaultProps = {\n  fields: []\n};\n\nDetailsFields.propTypes = {\n  fields: PropTypes.arrayOf(PropTypes.any)\n};\n"]}

package/lib/components/designSystemExtensions/DetailsFields/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './DetailsFields';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/designSystemExtensions/DetailsFields/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/DetailsFields/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/designSystemExtensions/DetailsFields/index.js

@@ -0,0 +1,2 @@
+export { default } from './DetailsFields';
+//# sourceMappingURL=index.js.map

package/lib/components/designSystemExtensions/DetailsFields/index.js.map

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

package/lib/components/designSystemExtensions/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const FieldGroup: (props: any) => JSX.Element;
+export default FieldGroup;
+//# sourceMappingURL=FieldGroup.d.ts.map

package/lib/components/designSystemExtensions/FieldGroup/FieldGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";AAuCA,QAAA,MAAM,UAAU,6BAuEf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/components/designSystemExtensions/FieldGroup/FieldGroup.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Utils from '../../helpers/utils';
+function generateFields(item, fields) {
+    for (const label in item) {
+        if (Utils.isObject(item[label])) {
+            generateFields(item[label], fields);
+        }
+        else if (label !== 'classID') {
+            fields.push({ label, value: item[label] });
+        }
+    }
+}
+const useStyles = makeStyles(theme => ({
+    root: {
+        marginRight: theme.spacing(1),
+        marginLeft: theme.spacing(1),
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+    },
+    fieldMargin: {
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+    },
+    fieldLabel: {
+        fontWeight: 400,
+        color: theme.palette.text.secondary
+    },
+    fieldValue: {
+        fontWeight: 400,
+        color: theme.palette.text.primary
+    }
+}));
+const FieldGroup = props => {
+    const classes = useStyles();
+    const fields = [];
+    generateFields(props.item, fields);
+    function getGridItemLabel(label) {
+        const dispValue = label;
+        return (React.createElement(Grid, { item: true, xs: 6 },
+            React.createElement(Typography, { variant: 'body2', component: 'span', className: `${classes.fieldLabel} ${classes.fieldMargin}` }, dispValue)));
+    }
+    function formatItemValue(value) {
+        let formattedVal = value;
+        // if the value is an empty string, we want to display it as "---"
+        if (formattedVal === '') {
+            formattedVal = '---';
+        }
+        return formattedVal;
+    }
+    function getGridItemValue(value) {
+        const formattedValue = formatItemValue(value);
+        return (React.createElement(Grid, { item: true, xs: 6 },
+            React.createElement(Typography, { variant: 'body2', component: 'span', className: classes.fieldValue }, formattedValue)));
+    }
+    function getGridItems() {
+        const gridItems = fields.map((item) => {
+            return (React.createElement(Grid, { key: `${item.label}-${item.value}`, container: true, spacing: 1 },
+                getGridItemLabel(item.label),
+                getGridItemValue(item.value)));
+        });
+        return gridItems;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true, spacing: 4, justifyContent: 'space-between' },
+            React.createElement(Grid, { item: true, style: { width: '100%' } },
+                fields.length > 0 && (React.createElement("div", { className: classes.fieldMargin },
+                    React.createElement("b", null, props.name))),
+                getGridItems()))));
+};
+export default FieldGroup;
+//# sourceMappingURL=FieldGroup.js.map

package/lib/components/designSystemExtensions/FieldGroup/FieldGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport Utils from '../../helpers/utils';\n\nfunction generateFields(item, fields) {\n  for (const label in item) {\n    if (Utils.isObject(item[label])) {\n      generateFields(item[label], fields);\n    } else if (label !== 'classID') {\n      fields.push({ label, value: item[label] });\n    }\n  }\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldMargin: {\n    paddingTop: theme.spacing(1),\n    paddingBottom: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldLabel: {\n    fontWeight: 400,\n    color: theme.palette.text.secondary\n  },\n  fieldValue: {\n    fontWeight: 400,\n    color: theme.palette.text.primary\n  }\n}));\n\nconst FieldGroup = props => {\n  const classes = useStyles();\n\n  const fields: any = [];\n  generateFields(props.item, fields);\n\n  function getGridItemLabel(label) {\n    const dispValue = label;\n\n    return (\n      <Grid item xs={6}>\n        <Typography\n          variant='body2'\n          component='span'\n          className={`${classes.fieldLabel} ${classes.fieldMargin}`}\n        >\n          {dispValue}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function formatItemValue(value) {\n    let formattedVal = value;\n\n    // if the value is an empty string, we want to display it as \"---\"\n    if (formattedVal === '') {\n      formattedVal = '---';\n    }\n\n    return formattedVal;\n  }\n\n  function getGridItemValue(value) {\n    const formattedValue = formatItemValue(value);\n\n    return (\n      <Grid item xs={6}>\n        <Typography variant='body2' component='span' className={classes.fieldValue}>\n          {formattedValue}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function getGridItems() {\n    const gridItems = fields.map((item) => {\n      return (\n        <Grid key={`${item.label}-${item.value}`} container spacing={1}>\n          {getGridItemLabel(item.label)}\n          {getGridItemValue(item.value)}\n        </Grid>\n      );\n    });\n    return gridItems;\n  }\n\n  return (\n    <React.Fragment>\n      <Grid container spacing={4} justifyContent='space-between'>\n        <Grid item style={{ width: '100%' }}>\n          {fields.length > 0 && (\n            <div className={classes.fieldMargin}>\n              <b>{props.name}</b>\n            </div>\n          )}\n          {getGridItems()}\n        </Grid>\n      </Grid>\n    </React.Fragment>\n  );\n};\n\nexport default FieldGroup;\n"]}

package/lib/components/designSystemExtensions/FieldGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldGroup';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/designSystemExtensions/FieldGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/FieldGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/designSystemExtensions/FieldGroup/index.js

@@ -0,0 +1,2 @@
+export { default } from './FieldGroup';
+//# sourceMappingURL=index.js.map

package/lib/components/designSystemExtensions/FieldGroup/index.js.map

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

package/lib/components/designSystemExtensions/FieldGroupList/FieldGroupList.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const FieldGroupList: (props: any) => JSX.Element;
+export default FieldGroupList;
+//# sourceMappingURL=FieldGroupList.d.ts.map

package/lib/components/designSystemExtensions/FieldGroupList/FieldGroupList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/FieldGroupList/FieldGroupList.tsx"],"names":[],"mappings":";AAUA,QAAA,MAAM,cAAc,6BAwCnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/designSystemExtensions/FieldGroupList/FieldGroupList.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Divider from '@material-ui/core/Divider';
+import Link from '@material-ui/core/Link';
+import { Utils } from '../../helpers/utils';
+const FieldGroupList = props => {
+    let menuIconOverride$ = 'trash';
+    if (menuIconOverride$) {
+        menuIconOverride$ = Utils.getImageSrc(menuIconOverride$, PCore.getAssetLoader().getStaticServerUrl());
+    }
+    return (React.createElement(Grid, { container: true, spacing: 4, justifyContent: 'space-between' },
+        React.createElement(Grid, { item: true, style: { width: '100%' } },
+            React.createElement(Grid, { container: true, spacing: 1 },
+                props.items.map(item => (React.createElement(Grid, { item: true, style: { width: '100%' } },
+                    React.createElement("b", null, item.name),
+                    React.createElement("button", { type: 'button', style: { float: 'right' }, className: 'psdk-utility-button', id: `delete-row-${Utils.getLastChar(item.name)}`, onClick: () => {
+                            props.onDelete(item.id);
+                        } },
+                        React.createElement("img", { className: 'psdk-utility-card-action-svg-icon', src: menuIconOverride$ })),
+                    item.children,
+                    React.createElement("br", null),
+                    React.createElement(Divider, null),
+                    React.createElement("br", null)))),
+                React.createElement(Link, { onClick: props.onAdd, style: { cursor: 'pointer' } }, "+Add")))));
+};
+export default FieldGroupList;
+//# sourceMappingURL=FieldGroupList.js.map

package/lib/components/designSystemExtensions/FieldGroupList/FieldGroupList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/FieldGroupList/FieldGroupList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAC1C,OAAO,OAAO,MAAM,2BAA2B,CAAC;AAChD,OAAO,IAAI,MAAM,wBAAwB,CAAC;AAE1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAI5C,MAAM,cAAc,GAAG,KAAK,CAAC,EAAE;IAC7B,IAAI,iBAAiB,GAAG,OAAO,CAAC;IAChC,IAAI,iBAAiB,EAAE;QACrB,iBAAiB,GAAG,KAAK,CAAC,WAAW,CACnC,iBAAiB,EACjB,KAAK,CAAC,cAAc,EAAE,CAAC,kBAAkB,EAAE,CAC5C,CAAC;KACH;IAED,OAAO,CACL,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC,EAAE,cAAc,EAAC,eAAe;QACxD,oBAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;YACjC,oBAAC,IAAI,IAAC,SAAS,QAAC,OAAO,EAAE,CAAC;gBACvB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACvB,oBAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;oBACjC,+BAAI,IAAI,CAAC,IAAI,CAAK;oBAClB,gCACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EACzB,SAAS,EAAC,qBAAqB,EAC/B,EAAE,EAAE,cAAc,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAChD,OAAO,EAAE,GAAG,EAAE;4BACZ,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;wBAC1B,CAAC;wBAED,6BAAK,SAAS,EAAC,mCAAmC,EAAC,GAAG,EAAE,iBAAiB,GAAQ,CAC1E;oBACR,IAAI,CAAC,QAAQ;oBACd,+BAAM;oBACN,oBAAC,OAAO,OAAG;oBACX,+BAAM,CACD,CACR,CAAC;gBACF,oBAAC,IAAI,IAAC,OAAO,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAEjD,CACF,CACF,CACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React from 'react';\n\nimport Grid from '@material-ui/core/Grid';\nimport Divider from '@material-ui/core/Divider';\nimport Link from '@material-ui/core/Link';\n\nimport { Utils } from '../../helpers/utils';\n\ndeclare const PCore: any;\n\nconst FieldGroupList = props => {\n  let menuIconOverride$ = 'trash';\n  if (menuIconOverride$) {\n    menuIconOverride$ = Utils.getImageSrc(\n      menuIconOverride$,\n      PCore.getAssetLoader().getStaticServerUrl()\n    );\n  }\n\n  return (\n    <Grid container spacing={4} justifyContent='space-between'>\n      <Grid item style={{ width: '100%' }}>\n        <Grid container spacing={1}>\n          {props.items.map(item => (\n            <Grid item style={{ width: '100%' }}>\n              <b>{item.name}</b>\n              <button\n                type='button'\n                style={{ float: 'right' }}\n                className='psdk-utility-button'\n                id={`delete-row-${Utils.getLastChar(item.name)}`}\n                onClick={() => {\n                  props.onDelete(item.id);\n                }}\n              >\n                <img className='psdk-utility-card-action-svg-icon' src={menuIconOverride$}></img>\n              </button>\n              {item.children}\n              <br />\n              <Divider />\n              <br />\n            </Grid>\n          ))}\n          <Link onClick={props.onAdd} style={{ cursor: 'pointer' }}>\n            +Add\n          </Link>\n        </Grid>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport default FieldGroupList;\n"]}

package/lib/components/designSystemExtensions/FieldGroupList/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldGroupList';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/designSystemExtensions/FieldGroupList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/FieldGroupList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/designSystemExtensions/FieldGroupList/index.js

@@ -0,0 +1,2 @@
+export { default } from './FieldGroupList';
+//# sourceMappingURL=index.js.map

package/lib/components/designSystemExtensions/FieldGroupList/index.js.map

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

package/lib/components/designSystemExtensions/FieldValueList/FieldValueList.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const FieldValueList: (props: any) => JSX.Element;
+export default FieldValueList;
+//# sourceMappingURL=FieldValueList.d.ts.map

package/lib/components/designSystemExtensions/FieldValueList/FieldValueList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":";AAiCA,QAAA,MAAM,cAAc,6BAsEnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/designSystemExtensions/FieldValueList/FieldValueList.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+const useStyles = makeStyles(theme => ({
+    root: {
+        marginRight: theme.spacing(1),
+        marginLeft: theme.spacing(1),
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(1)
+    },
+    fieldMargin: {
+    // paddingRight: theme.spacing(1),
+    // paddingLeft: theme.spacing(1),
+    // paddingTop: theme.spacing(1),
+    // paddingBottom: theme.spacing(1),
+    // marginRight: theme.spacing(1),
+    // marginLeft: theme.spacing(1),
+    // marginTop: theme.spacing(1),
+    // marginBottom: theme.spacing(1)
+    },
+    fieldLabel: {
+        fontWeight: 400,
+        color: theme.palette.text.secondary
+    },
+    fieldValue: {
+        fontWeight: 400,
+        color: theme.palette.text.primary
+    }
+}));
+const FieldValueList = props => {
+    const classes = useStyles();
+    const fields = [];
+    // eslint-disable-next-line guard-for-in
+    for (const label in props.item) {
+        fields.push({ label, value: props.item[label] });
+    }
+    function getGridItemLabel(label) {
+        const dispValue = label;
+        return (React.createElement(Grid, { item: true, xs: 6 },
+            React.createElement(Typography, { variant: 'body2', component: 'span', className: `${classes.fieldLabel} ${classes.fieldMargin}` }, dispValue)));
+    }
+    function formatItemValue(value) {
+        let formattedVal = value;
+        // if the value is undefined or an empty string, we want to display it as "---"
+        if (formattedVal === undefined || formattedVal === '') {
+            formattedVal = '---';
+        }
+        return formattedVal;
+    }
+    function getGridItemValue(value) {
+        const formattedValue = formatItemValue(value);
+        return (React.createElement(Grid, { item: true, xs: 6 },
+            React.createElement(Typography, { variant: 'body2', component: 'span', className: classes.fieldValue }, formattedValue)));
+    }
+    function getGridItems() {
+        const gridItems = fields.map(item => {
+            return (React.createElement(Grid, { container: true, spacing: 1, key: item.label },
+                getGridItemLabel(item.label),
+                getGridItemValue(item.value)));
+        });
+        return gridItems;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid, { container: true, spacing: 4, justifyContent: 'space-between' },
+            React.createElement(Grid, { item: true, style: { width: '100%' } }, getGridItems()))));
+};
+export default FieldValueList;
+//# sourceMappingURL=FieldValueList.js.map

package/lib/components/designSystemExtensions/FieldValueList/FieldValueList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.js","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/FieldValueList/FieldValueList.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport Grid from '@material-ui/core/Grid';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginRight: theme.spacing(1),\n    marginLeft: theme.spacing(1),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  fieldMargin: {\n    // paddingRight: theme.spacing(1),\n    // paddingLeft: theme.spacing(1),\n    // paddingTop: theme.spacing(1),\n    // paddingBottom: theme.spacing(1),\n    // marginRight: theme.spacing(1),\n    // marginLeft: theme.spacing(1),\n    // marginTop: theme.spacing(1),\n    // marginBottom: theme.spacing(1)\n  },\n  fieldLabel: {\n    fontWeight: 400,\n    color: theme.palette.text.secondary\n  },\n  fieldValue: {\n    fontWeight: 400,\n    color: theme.palette.text.primary\n  }\n}));\n\nconst FieldValueList = props => {\n  const classes = useStyles();\n\n  const fields: any = [];\n\n  // eslint-disable-next-line guard-for-in\n  for (const label in props.item) {\n    fields.push({ label, value: props.item[label] });\n  }\n\n  function getGridItemLabel(label) {\n    const dispValue = label;\n\n    return (\n      <Grid item xs={6}>\n        <Typography\n          variant='body2'\n          component='span'\n          className={`${classes.fieldLabel} ${classes.fieldMargin}`}\n        >\n          {dispValue}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function formatItemValue(value) {\n    let formattedVal = value;\n\n    // if the value is undefined or an empty string, we want to display it as \"---\"\n    if (formattedVal === undefined || formattedVal === '') {\n      formattedVal = '---';\n    }\n\n    return formattedVal;\n  }\n\n  function getGridItemValue(value) {\n    const formattedValue = formatItemValue(value);\n\n    return (\n      <Grid item xs={6}>\n        <Typography variant='body2' component='span' className={classes.fieldValue}>\n          {formattedValue}\n        </Typography>\n      </Grid>\n    );\n  }\n\n  function getGridItems() {\n    const gridItems = fields.map(item => {\n      return (\n        <Grid container spacing={1} key={item.label}>\n          {getGridItemLabel(item.label)}\n          {getGridItemValue(item.value)}\n        </Grid>\n      );\n    });\n    return gridItems;\n  }\n\n  return (\n    <React.Fragment>\n      <Grid container spacing={4} justifyContent='space-between'>\n        <Grid item style={{ width: '100%' }}>\n          {getGridItems()}\n        </Grid>\n      </Grid>\n    </React.Fragment>\n  );\n};\n\nexport default FieldValueList;\n"]}

package/lib/components/designSystemExtensions/FieldValueList/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldValueList';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/designSystemExtensions/FieldValueList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/FieldValueList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/designSystemExtensions/FieldValueList/index.js

@@ -0,0 +1,2 @@
+export { default } from './FieldValueList';
+//# sourceMappingURL=index.js.map

package/lib/components/designSystemExtensions/FieldValueList/index.js.map

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

package/lib/components/designSystemExtensions/Operator/Operator.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
+declare function Operator(props: any): JSX.Element;
+declare namespace Operator {
+    var defaultProps: {};
+    var propTypes: {
+        caseOpConfig: PropTypes.Validator<object>;
+    };
+}
+export default Operator;
+//# sourceMappingURL=Operator.d.ts.map

package/lib/components/designSystemExtensions/Operator/Operator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../../src/components/designSystemExtensions/Operator/Operator.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAuBnC,iBAAwB,QAAQ,CAAC,KAAK,KAAA,eAmKrC;kBAnKuB,QAAQ;;;;;;eAAR,QAAQ"}

package/lib/components/designSystemExtensions/Operator/Operator.js

@@ -0,0 +1,154 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import TextField from '@material-ui/core/TextField';
+import Popover from '@material-ui/core/Popover';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import Utils from '../../helpers/utils';
+const useStyles = makeStyles((theme) => ({
+    root: {
+        padding: theme.spacing(1),
+        margin: theme.spacing(1),
+    },
+    popover: {
+        padding: theme.spacing(1),
+        margin: theme.spacing(1),
+    }
+}));
+export default function Operator(props) {
+    // const componentName = "Operator";
+    const { caseOpConfig } = props;
+    const classes = useStyles();
+    const fieldLabel = caseOpConfig.label.toLowerCase();
+    let caseOpLabel = "---";
+    let caseOpName = "---";
+    let caseOpId = "";
+    let caseTime = null;
+    if (fieldLabel === "create operator") {
+        caseOpLabel = caseOpConfig.createLabel;
+        caseOpName = caseOpConfig.createOperator.userName;
+        caseTime = caseOpConfig.createDateTime;
+        caseOpId = caseOpConfig.createOperator.userId;
+    }
+    else if (fieldLabel === "update operator") {
+        caseOpLabel = caseOpConfig.updateLabel;
+        caseOpName = caseOpConfig.updateOperator.userName;
+        caseTime = caseOpConfig.updateDateTime;
+        caseOpId = caseOpConfig.updateOperator.userId;
+    }
+    // Popover-related
+    const [popoverAnchorEl, setPopoverAnchorEl] = useState(null);
+    const [popoverFields, setPopoverFields] = useState([]);
+    const popoverOpen = Boolean(popoverAnchorEl);
+    const popoverId = popoverOpen ? 'operator-details-popover' : undefined;
+    const handlePopoverClose = (() => {
+        setPopoverAnchorEl(null);
+    });
+    function showOperatorDetails(event) {
+        const operatorPreviewPromise = PCore.getUserApi().getOperatorDetails(caseOpId);
+        operatorPreviewPromise.then((res) => {
+            const fillerString = "---";
+            let fields = [];
+            if (res.data &&
+                res.data.pyOperatorInfo &&
+                res.data.pyOperatorInfo.pyUserName) {
+                fields = [
+                    {
+                        id: "pyPosition",
+                        name: "Position",
+                        value: res.data.pyOperatorInfo.pyPosition ? res.data.pyOperatorInfo.pyPosition : fillerString
+                    },
+                    {
+                        id: "pyOrganization",
+                        name: "Organization",
+                        value: res.data.pyOperatorInfo.pyOrganization ? res.data.pyOperatorInfo.pyOrganization : fillerString
+                    },
+                    {
+                        id: "ReportToUserName",
+                        name: "Reports to",
+                        value: res.data.pyOperatorInfo.pyReportToUserName ? res.data.pyOperatorInfo.pyReportToUserName : fillerString
+                    },
+                    {
+                        id: "pyTelephone",
+                        name: "Telephone",
+                        value: res.data.pyOperatorInfo.pyTelephone ? React.createElement("a", { href: `tel:${res.data.pyOperatorInfo.pyTelephone}` }, res.data.pyOperatorInfo.pyTelephone) : fillerString
+                    },
+                    {
+                        id: "pyEmailAddress",
+                        name: "Email address",
+                        value: res.data.pyOperatorInfo.pyEmailAddress ? React.createElement("a", { href: `mailto:${res.data.pyOperatorInfo.pyEmailAddress}` }, res.data.pyOperatorInfo.pyEmailAddress) : fillerString
+                    }
+                ];
+            }
+            else {
+                // eslint-disable-next-line no-console
+                console.log(`Operator: PCore.getUserApi().getOperatorDetails(${caseOpId}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`);
+                fields = [
+                    {
+                        id: "pyPosition",
+                        name: "Position",
+                        value: fillerString
+                    },
+                    {
+                        id: "pyOrganization",
+                        name: "Organization",
+                        value: fillerString
+                    },
+                    {
+                        id: "ReportToUserName",
+                        name: "Reports to",
+                        value: fillerString
+                    },
+                    {
+                        id: "pyTelephone",
+                        name: "Telephone",
+                        value: fillerString
+                    },
+                    {
+                        id: "pyEmailAddress",
+                        name: "Email address",
+                        value: fillerString
+                    }
+                ];
+            }
+            // Whatever the fields are, update the component's popoverFields
+            setPopoverFields(fields);
+        });
+        setPopoverAnchorEl(event.currentTarget);
+    }
+    function getPopoverGrid() {
+        // return popoverFields.map((field) => {
+        //   return <div className={classes.popover}>{field.name}: {field.value}</div>
+        // })
+        if (popoverFields.length === 0) {
+            return;
+        }
+        // There are fields, so build the grid.
+        return React.createElement(Grid, { container: true, className: classes.popover, spacing: 1 },
+            React.createElement(Grid, { item: true, xs: 12 },
+                React.createElement(Typography, { variant: "h6" }, caseOpName)),
+            popoverFields.map((field) => {
+                return React.createElement(React.Fragment, { key: field.id },
+                    React.createElement(Grid, { container: true, item: true, xs: 12, spacing: 1 },
+                        React.createElement(Grid, { item: true, xs: 6 },
+                            React.createElement(Typography, { variant: "caption" }, field.name)),
+                        React.createElement(Grid, { item: true, xs: 6 },
+                            React.createElement(Typography, { variant: "subtitle2" }, field.value))));
+            }));
+    }
+    // End of popover-related
+    return React.createElement(React.Fragment, null,
+        React.createElement(TextField, { defaultValue: caseOpName, label: caseOpLabel, onClick: showOperatorDetails, InputProps: {
+                readOnly: true,
+                inputProps: { style: { cursor: 'pointer' } }
+            } }),
+        React.createElement("br", null),
+        Utils.generateDateTime(caseTime, "DateTime-Since"),
+        React.createElement(Popover, { id: popoverId, open: popoverOpen, anchorEl: popoverAnchorEl, onClose: handlePopoverClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }, PaperProps: { style: { maxWidth: '45ch' } } }, getPopoverGrid()));
+}
+Operator.defaultProps = {};
+Operator.propTypes = {
+    caseOpConfig: PropTypes.object.isRequired,
+};
+//# sourceMappingURL=Operator.js.map