@pega/react-sdk-components 0.23.26 → 0.23.28

package/lib/components/template/WideNarrow/WideNarrowForm/WideNarrowForm.d.ts

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../../types/PConnProps';
 import './WideNarrowForm.css';
-export default function WideNarrowForm(props: any): JSX.Element;
+interface WideNarrowFormProps extends PConnProps {
+}
+export default function WideNarrowForm(props: PropsWithChildren<WideNarrowFormProps>): JSX.Element;
+export {};
 //# sourceMappingURL=WideNarrowForm.d.ts.map

package/lib/components/template/WideNarrow/WideNarrowForm/WideNarrowForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WideNarrowForm.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowForm/WideNarrowForm.tsx"],"names":[],"mappings":";AAEA,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,KAAA,eAmB3C"}
+{"version":3,"file":"WideNarrowForm.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowForm/WideNarrowForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAgB,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,sBAAsB,CAAC;AAE9B,UAAU,mBAAoB,SAAQ,UAAU;CAE/C;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,eAanF"}

package/lib/components/template/WideNarrow/WideNarrowForm/WideNarrowForm.js

@@ -1,10 +1,7 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import './WideNarrowForm.css';
 export default function WideNarrowForm(props) {
     const { children } = props;
-    return (React.createElement(React.Fragment, null, children && children.length === 2 &&
-        React.createElement("div", { className: "psdk-wide-narrow-column" },
-            React.createElement("div", { className: "psdk-wide-column-column" }, children[0]),
-            React.createElement("div", { className: "psdk-narrow-column-column" }, children[1]))));
+    return (_jsx(_Fragment, { children: children && children.length === 2 && (_jsxs("div", { className: 'psdk-wide-narrow-column', children: [_jsx("div", { className: 'psdk-wide-column-column', children: children[0] }), _jsx("div", { className: 'psdk-narrow-column-column', children: children[1] })] })) }));
 }
 //# sourceMappingURL=WideNarrowForm.js.map

package/lib/components/template/WideNarrow/WideNarrowForm/WideNarrowForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"WideNarrowForm.js","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowForm/WideNarrowForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK;IAC1C,MAAM,EAAC,QAAQ,EAAC,GAAG,KAAK,CAAC;IAEzB,OAAO,CACL,oBAAC,KAAK,CAAC,QAAQ,QACd,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAChC,6BAAK,SAAS,EAAC,yBAAyB;YACtC,6BAAK,SAAS,EAAC,yBAAyB,IACrC,QAAQ,CAAC,CAAC,CAAC,CACR;YACN,6BAAK,SAAS,EAAC,2BAA2B,IACvC,QAAQ,CAAC,CAAC,CAAC,CACR,CACF,CAES,CAElB,CAAA;AAEH,CAAC","sourcesContent":["import React from \"react\";\n\nimport './WideNarrowForm.css';\n\nexport default function WideNarrowForm(props) {\n  const {children} = props;\n\n  return (\n    <React.Fragment>\n    {children && children.length === 2 &&\n      <div className=\"psdk-wide-narrow-column\">\n        <div className=\"psdk-wide-column-column\">\n          {children[0]}\n        </div>\n        <div className=\"psdk-narrow-column-column\">\n          {children[1]}\n        </div>\n      </div>\n    }\n    </React.Fragment>\n\n  )\n\n}\n"]}
+{"version":3,"file":"WideNarrowForm.js","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowForm/WideNarrowForm.tsx"],"names":[],"mappings":";AAEA,OAAO,sBAAsB,CAAC;AAM9B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA6C;IAClF,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,OAAO,CACL,4BACG,QAAQ,IAAK,QAA2B,CAAC,MAAM,KAAK,CAAC,IAAI,CACxD,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,yBAAyB,YAAE,QAAQ,CAAC,CAAC,CAAC,GAAO,EAC5D,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,CAAC,CAAC,CAAC,GAAO,IAC1D,CACP,GACA,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { PropsWithChildren, ReactElement } from 'react';\nimport { PConnProps } from '../../../../types/PConnProps';\nimport './WideNarrowForm.css';\n\ninterface WideNarrowFormProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n}\n\nexport default function WideNarrowForm(props: PropsWithChildren<WideNarrowFormProps>) {\n  const { children } = props;\n\n  return (\n    <>\n      {children && (children as ReactElement[]).length === 2 && (\n        <div className='psdk-wide-narrow-column'>\n          <div className='psdk-wide-column-column'>{children[0]}</div>\n          <div className='psdk-narrow-column-column'>{children[1]}</div>\n        </div>\n      )}\n    </>\n  );\n}\n"]}

package/lib/components/template/WideNarrow/WideNarrowPage/WideNarrowPage.d.ts

@@ -1,17 +1,10 @@
-/// <reference types="react" />
-import PropTypes from "prop-types";
-declare function WideNarrowPage(props: any): JSX.Element;
-declare namespace WideNarrowPage {
-    var propTypes: {
-        children: PropTypes.Validator<PropTypes.ReactNodeLike[]>;
-        title: PropTypes.Validator<string>;
-        templateCol: PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<string>;
-    };
-    var defaultProps: {
-        templateCol: string;
-        icon: string;
-    };
+import { PropsWithChildren } from 'react';
+import { PConnProps } from '../../../../types/PConnProps';
+interface WideNarrowPageProps extends PConnProps {
+    title: string;
+    templateCol?: string;
+    icon?: string;
 }
-export default WideNarrowPage;
+export default function WideNarrowPage(props: PropsWithChildren<WideNarrowPageProps>): JSX.Element;
+export {};
 //# sourceMappingURL=WideNarrowPage.d.ts.map

package/lib/components/template/WideNarrow/WideNarrowPage/WideNarrowPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WideNarrowPage.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowPage/WideNarrowPage.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AASnC,iBAAwB,cAAc,CAAC,KAAK,KAAA,eAe3C;kBAfuB,cAAc;;;;;;;;;;;;eAAd,cAAc"}
+{"version":3,"file":"WideNarrowPage.d.ts","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowPage/WideNarrowPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,UAAU,mBAAoB,SAAQ,UAAU;IAE9C,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAMD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,mBAAmB,CAAC,eAYnF"}

package/lib/components/template/WideNarrow/WideNarrowPage/WideNarrowPage.js

@@ -1,25 +1,15 @@
-import React, { Children } from "react";
-import PropTypes from "prop-types";
-// import { TwoColumnPage as TwoColumn } from "@pega/cosmos-react-core";
-import WideNarrow from '../WideNarrow/WideNarrow';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from 'react';
+import { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';
 /*
  * The wrapper handles knowing how to take in just children and mapping
  * to the Cosmos template.
  */
 export default function WideNarrowPage(props) {
-    const { children, title, templateCol, icon } = props;
+    // Get emitted components from map (so we can get any override that may exist)
+    const WideNarrow = getComponentFromMap('WideNarrow');
+    const { children, title, templateCol = '1fr 1fr', icon = '' } = props;
     const childArray = Children.toArray(children);
-    return (React.createElement("div", null,
-        React.createElement(WideNarrow, { a: childArray[0], b: childArray[1], title: title, cols: templateCol, icon: icon?.replace("pi pi-", "") })));
+    return (_jsx("div", { children: _jsx(WideNarrow, { a: childArray[0], b: childArray[1], title: title, cols: templateCol, icon: icon?.replace('pi pi-', '') }) }));
 }
-WideNarrowPage.propTypes = {
-    children: PropTypes.arrayOf(PropTypes.node).isRequired,
-    title: PropTypes.string.isRequired,
-    templateCol: PropTypes.string,
-    icon: PropTypes.string
-};
-WideNarrowPage.defaultProps = {
-    templateCol: "1fr 1fr",
-    icon: ""
-};
 //# sourceMappingURL=WideNarrowPage.js.map

package/lib/components/template/WideNarrow/WideNarrowPage/WideNarrowPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"WideNarrowPage.js","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowPage/WideNarrowPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,wEAAwE;AACxE,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK;IAC1C,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACrD,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE9C,OAAO,CACL;QACA,oBAAC,UAAU,IACP,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAChB,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,WAAW,EACjB,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,GACjC,CACE,CACP,CAAC;AACJ,CAAC;AAED,cAAc,CAAC,SAAS,GAAG;IACzB,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,UAAU;IACtD,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,IAAI,EAAE,SAAS,CAAC,MAAM;CACvB,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG;IAC5B,WAAW,EAAE,SAAS;IACtB,IAAI,EAAE,EAAE;CACT,CAAC","sourcesContent":["import React, { Children } from \"react\";\nimport PropTypes from \"prop-types\";\n\n// import { TwoColumnPage as TwoColumn } from \"@pega/cosmos-react-core\";\nimport WideNarrow from '../WideNarrow/WideNarrow';\n\n/*\n * The wrapper handles knowing how to take in just children and mapping\n * to the Cosmos template.\n */\nexport default function WideNarrowPage(props) {\n  const { children, title, templateCol, icon } = props;\n  const childArray = Children.toArray(children);\n\n  return (\n    <div>\n    <WideNarrow\n        a={childArray[0]}\n        b={childArray[1]}\n        title={title}\n        cols={templateCol}\n        icon={icon?.replace(\"pi pi-\", \"\")}\n      />\n    </div>\n  );\n}\n\nWideNarrowPage.propTypes = {\n  children: PropTypes.arrayOf(PropTypes.node).isRequired,\n  title: PropTypes.string.isRequired,\n  templateCol: PropTypes.string,\n  icon: PropTypes.string\n};\n\nWideNarrowPage.defaultProps = {\n  templateCol: \"1fr 1fr\",\n  icon: \"\"\n};\n"]}
+{"version":3,"file":"WideNarrowPage.js","sourceRoot":"","sources":["../../../../../src/components/template/WideNarrow/WideNarrowPage/WideNarrowPage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAUnF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAA6C;IAClF,8EAA8E;IAC9E,MAAM,UAAU,GAAG,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAErD,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,GAAG,SAAS,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IACtE,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAE9C,OAAO,CACL,wBACE,KAAC,UAAU,IAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,GAAI,GAClH,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Children, PropsWithChildren } from 'react';\nimport { getComponentFromMap } from '../../../../bridge/helpers/sdk_component_map';\nimport { PConnProps } from '../../../../types/PConnProps';\n\ninterface WideNarrowPageProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  title: string;\n  templateCol?: string;\n  icon?: string;\n}\n\n/*\n * The wrapper handles knowing how to take in just children and mapping\n * to the Cosmos template.\n */\nexport default function WideNarrowPage(props: PropsWithChildren<WideNarrowPageProps>) {\n  // Get emitted components from map (so we can get any override that may exist)\n  const WideNarrow = getComponentFromMap('WideNarrow');\n\n  const { children, title, templateCol = '1fr 1fr', icon = '' } = props;\n  const childArray = Children.toArray(children);\n\n  return (\n    <div>\n      <WideNarrow a={childArray[0]} b={childArray[1]} title={title} cols={templateCol} icon={icon?.replace('pi pi-', '')} />\n    </div>\n  );\n}\n"]}

package/lib/components/template/WideNarrow/WideNarrowPage/index.js.map

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

package/lib/components/template/WssNavBar/WssNavBar.d.ts

@@ -1,4 +1,21 @@
 /// <reference types="react" />
+import { PConnProps } from '../../../types/PConnProps';
 import './WssNavBar.css';
-export default function WssNavBar(props: any): JSX.Element;
+interface WssNavBarProps extends PConnProps {
+    appInfo: any;
+    navLinks: any[];
+    operator: {
+        currentUserInitials: string;
+    };
+    navDisplayOptions: {
+        alignment: string;
+        position: string;
+    };
+    portalName: string;
+    imageSrc: string;
+    fullImageSrc: string;
+    appName: any;
+}
+export default function WssNavBar(props: WssNavBarProps): JSX.Element;
+export {};
 //# sourceMappingURL=WssNavBar.d.ts.map

package/lib/components/template/WssNavBar/WssNavBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WssNavBar.d.ts","sourceRoot":"","sources":["../../../../src/components/template/WssNavBar/WssNavBar.tsx"],"names":[],"mappings":";AAWA,OAAO,iBAAiB,CAAC;AAuBzB,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,KAAA,eA+GtC"}
+{"version":3,"file":"WssNavBar.d.ts","sourceRoot":"","sources":["../../../../src/components/template/WssNavBar/WssNavBar.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,iBAAiB,CAAC;AAEzB,UAAU,cAAe,SAAQ,UAAU;IAEzC,OAAO,EAAE,GAAG,CAAC;IACb,QAAQ,EAAE,GAAG,EAAE,CAAC;IAChB,QAAQ,EAAE;QAAE,mBAAmB,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,iBAAiB,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAE3D,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAEjB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,GAAG,CAAC;CACd;AAuBD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,eA4GtD"}

package/lib/components/template/WssNavBar/WssNavBar.js

@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Box from '@material-ui/core/Box';
 import Toolbar from '@material-ui/core/Toolbar';
 import Container from '@material-ui/core/Container';
-import { IconButton, Menu, MenuItem, Typography } from '@material-ui/core';
-import { Button } from '@material-ui/core';
+import { IconButton, Menu, MenuItem, Typography, Button } from '@material-ui/core';
 import Avatar from '@material-ui/core/Avatar';
 import MenuIcon from '@material-ui/icons/Menu';
-import { logout } from '../../helpers/authManager';
+import { logout } from '@pega/auth/lib/sdk-auth-manager';
 import './WssNavBar.css';
 const useStyles = makeStyles(theme => ({
     root: {
@@ -48,38 +48,19 @@ export default function WssNavBar(props) {
     const handleCloseUserMenu = () => {
         setAnchorElUser(null);
     };
-    const navLinksContent = (React.createElement(Box, { sx: { flexGrow: 1, display: { xs: 'none', md: 'flex' } }, style: { justifyContent: alignment } }, navLinks.map(link => (React.createElement(Button, { className: 'link-style', key: link.text, onClick: link.onClick }, link.text)))));
-    return (React.createElement("div", { id: 'NavBar', className: 'nav-bar' },
-        React.createElement(AppBar, { position: 'static', color: 'primary' },
-            React.createElement(Container, { maxWidth: 'xl' },
-                React.createElement(Toolbar, { disableGutters: true, style: { justifyContent: 'space-between' } },
-                    React.createElement(Button, { style: { textTransform: 'capitalize' }, onClick: appInfo.onClick },
-                        React.createElement("img", { src: appInfo.imageSrc, className: classes.appListLogo }),
-                        React.createElement("span", { className: classes.appName }, appInfo.appName)),
-                    React.createElement(Box, { sx: { flexGrow: 1, display: { xs: 'flex', md: 'none' } } },
-                        React.createElement(IconButton, { size: 'small', "aria-label": 'account of current user', "aria-controls": 'menu-appbar', "aria-haspopup": 'true', onClick: handleOpenNavMenu, color: 'inherit' },
-                            React.createElement(MenuIcon, null)),
-                        React.createElement(Menu, { id: 'menu-appbar', anchorEl: anchorElNav, anchorOrigin: {
-                                vertical: 'bottom',
-                                horizontal: 'left'
-                            }, keepMounted: true, transformOrigin: {
-                                vertical: 'top',
-                                horizontal: 'left'
-                            }, open: Boolean(anchorElNav), onClose: handleCloseNavMenu }, navLinks.map(link => (React.createElement(MenuItem, { key: link.text, onClick: link.onClick },
-                            React.createElement(Typography, null, link.text)))))),
-                    position === 'inline' && React.createElement(React.Fragment, null, navLinksContent),
-                    React.createElement(Box, { sx: { flexGrow: 0 } },
-                        React.createElement(IconButton, { onClick: handleOpenUserMenu },
-                            React.createElement(Avatar, null, operator.currentUserInitials)),
-                        React.createElement(Menu, { id: 'menu-appbar', anchorEl: anchorElUser, anchorOrigin: {
-                                vertical: 'top',
-                                horizontal: 'right'
-                            }, keepMounted: true, transformOrigin: {
-                                vertical: 'top',
-                                horizontal: 'right'
-                            }, open: Boolean(anchorElUser), onClose: handleCloseUserMenu },
-                            React.createElement(MenuItem, { onClick: logout },
-                                React.createElement(Typography, null, "Logout"))))),
-                position === 'below' && React.createElement(React.Fragment, null, navLinksContent)))));
+    const navLinksContent = (_jsx(Box, { id: 'nav-links', sx: { flexGrow: 1, display: { xs: 'none', md: 'flex' } }, style: { justifyContent: alignment }, children: navLinks.map(link => (_jsx(Button, { className: 'link-style', onClick: link.onClick, children: link.text }, link.text))) }));
+    return (_jsx("div", { id: 'NavBar', className: 'nav-bar', children: _jsx(AppBar, { position: 'static', color: 'primary', children: _jsxs(Container, { maxWidth: 'xl', children: [_jsxs(Toolbar, { disableGutters: true, style: { justifyContent: 'space-between' }, children: [_jsxs(Button, { id: 'appName', style: { textTransform: 'capitalize' }, onClick: appInfo.onClick, children: [_jsx("img", { src: appInfo.imageSrc, className: classes.appListLogo }), _jsx("span", { className: classes.appName, children: appInfo.appName })] }), _jsxs(Box, { sx: { flexGrow: 1, display: { xs: 'flex', md: 'none' } }, children: [_jsx(IconButton, { size: 'small', "aria-label": 'account of current user', "aria-controls": 'menu-appbar', "aria-haspopup": 'true', onClick: handleOpenNavMenu, color: 'inherit', children: _jsx(MenuIcon, {}) }), _jsx(Menu, { id: 'menu-appbar', anchorEl: anchorElNav, anchorOrigin: {
+                                            vertical: 'bottom',
+                                            horizontal: 'left'
+                                        }, keepMounted: true, transformOrigin: {
+                                            vertical: 'top',
+                                            horizontal: 'left'
+                                        }, open: Boolean(anchorElNav), onClose: handleCloseNavMenu, children: navLinks.map(link => (_jsx(MenuItem, { onClick: link.onClick, children: _jsx(Typography, { children: link.text }) }, link.text))) })] }), position === 'inline' && _jsx(_Fragment, { children: navLinksContent }), _jsxs(Box, { sx: { flexGrow: 0 }, children: [_jsx(IconButton, { onClick: handleOpenUserMenu, children: _jsx(Avatar, { children: operator.currentUserInitials }) }), _jsx(Menu, { id: 'menu-appbar', anchorEl: anchorElUser, anchorOrigin: {
+                                            vertical: 'top',
+                                            horizontal: 'right'
+                                        }, keepMounted: true, transformOrigin: {
+                                            vertical: 'top',
+                                            horizontal: 'right'
+                                        }, open: Boolean(anchorElUser), onClose: handleCloseUserMenu, children: _jsx(MenuItem, { onClick: logout, children: _jsx(Typography, { children: "Logout" }) }) })] })] }), position === 'below' && _jsx(_Fragment, { children: navLinksContent })] }) }) }));
 }
 //# sourceMappingURL=WssNavBar.js.map

package/lib/components/template/WssNavBar/WssNavBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"WssNavBar.js","sourceRoot":"","sources":["../../../../src/components/template/WssNavBar/WssNavBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Box from '@material-ui/core/Box';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Container from '@material-ui/core/Container';\nimport { IconButton, Menu, MenuItem, Typography } from '@material-ui/core';\nimport { Button } from '@material-ui/core';\nimport Avatar from '@material-ui/core/Avatar';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport { logout } from '../../helpers/authManager';\nimport './WssNavBar.css';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex'\n  },\n  content: {\n    flexGrow: 1,\n    height: '100vh',\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2)\n  },\n  appListLogo: {\n    width: '3.6rem'\n  },\n  appName: {\n    color: 'white',\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(4),\n    fontSize: '1.5rem'\n  }\n}));\n\nexport default function WssNavBar(props) {\n  const { appInfo, navLinks, operator, navDisplayOptions } = props;\n  const { alignment, position } = navDisplayOptions;\n  const classes = useStyles();\n\n  const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);\n  const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);\n\n  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorElNav(event.currentTarget);\n  };\n  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorElUser(event.currentTarget);\n  };\n\n  const handleCloseNavMenu = () => {\n    setAnchorElNav(null);\n  };\n\n  const handleCloseUserMenu = () => {\n    setAnchorElUser(null);\n  };\n\n  const navLinksContent = (\n    <Box\n      sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}\n      style={{ justifyContent: alignment }}\n    >\n      {navLinks.map(link => (\n        <Button className='link-style' key={link.text} onClick={link.onClick}>\n          {link.text}\n        </Button>\n      ))}\n    </Box>\n  );\n\n  return (\n    <div id='NavBar' className='nav-bar'>\n      <AppBar position='static' color='primary'>\n        <Container maxWidth='xl'>\n          <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>\n            <Button style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>\n              <img src={appInfo.imageSrc} className={classes.appListLogo} />\n              <span className={classes.appName}>{appInfo.appName}</span>\n            </Button>\n            <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>\n              <IconButton\n                size='small'\n                aria-label='account of current user'\n                aria-controls='menu-appbar'\n                aria-haspopup='true'\n                onClick={handleOpenNavMenu}\n                color='inherit'\n              >\n                <MenuIcon />\n              </IconButton>\n              <Menu\n                id='menu-appbar'\n                anchorEl={anchorElNav}\n                anchorOrigin={{\n                  vertical: 'bottom',\n                  horizontal: 'left'\n                }}\n                keepMounted\n                transformOrigin={{\n                  vertical: 'top',\n                  horizontal: 'left'\n                }}\n                open={Boolean(anchorElNav)}\n                onClose={handleCloseNavMenu}\n              >\n                {navLinks.map(link => (\n                  <MenuItem key={link.text} onClick={link.onClick}>\n                    <Typography>{link.text}</Typography>\n                  </MenuItem>\n                ))}\n              </Menu>\n            </Box>\n\n            {position === 'inline' && <>{navLinksContent}</>}\n\n            <Box sx={{ flexGrow: 0 }}>\n              <IconButton onClick={handleOpenUserMenu}>\n                <Avatar>{operator.currentUserInitials}</Avatar>\n              </IconButton>\n              <Menu\n                id='menu-appbar'\n                anchorEl={anchorElUser}\n                anchorOrigin={{\n                  vertical: 'top',\n                  horizontal: 'right'\n                }}\n                keepMounted\n                transformOrigin={{\n                  vertical: 'top',\n                  horizontal: 'right'\n                }}\n                open={Boolean(anchorElUser)}\n                onClose={handleCloseUserMenu}\n              >\n                <MenuItem onClick={logout}>\n                  <Typography>Logout</Typography>\n                </MenuItem>\n              </Menu>\n            </Box>\n          </Toolbar>\n          {position === 'below' && <>{navLinksContent}</>}\n        </Container>\n      </AppBar>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"WssNavBar.js","sourceRoot":"","sources":["../../../../src/components/template/WssNavBar/WssNavBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\nimport AppBar from '@material-ui/core/AppBar';\nimport Box from '@material-ui/core/Box';\nimport Toolbar from '@material-ui/core/Toolbar';\nimport Container from '@material-ui/core/Container';\nimport { IconButton, Menu, MenuItem, Typography, Button } from '@material-ui/core';\nimport Avatar from '@material-ui/core/Avatar';\nimport MenuIcon from '@material-ui/icons/Menu';\nimport { logout } from '@pega/auth/lib/sdk-auth-manager';\nimport { PConnProps } from '../../../types/PConnProps';\nimport './WssNavBar.css';\n\ninterface WssNavBarProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  appInfo: any;\n  navLinks: any[];\n  operator: { currentUserInitials: string };\n  navDisplayOptions: { alignment: string; position: string };\n  // eslint-disable-next-line react/no-unused-prop-types\n  portalName: string;\n  imageSrc: string;\n  // eslint-disable-next-line react/no-unused-prop-types\n  fullImageSrc: string;\n  appName: any;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    display: 'flex'\n  },\n  content: {\n    flexGrow: 1,\n    height: '100vh',\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2)\n  },\n  appListLogo: {\n    width: '3.6rem'\n  },\n  appName: {\n    color: 'white',\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(4),\n    fontSize: '1.5rem'\n  }\n}));\n\nexport default function WssNavBar(props: WssNavBarProps) {\n  const { appInfo, navLinks, operator, navDisplayOptions } = props;\n  const { alignment, position } = navDisplayOptions;\n  const classes = useStyles();\n\n  const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);\n  const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);\n\n  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorElNav(event.currentTarget);\n  };\n  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorElUser(event.currentTarget);\n  };\n\n  const handleCloseNavMenu = () => {\n    setAnchorElNav(null);\n  };\n\n  const handleCloseUserMenu = () => {\n    setAnchorElUser(null);\n  };\n\n  const navLinksContent = (\n    <Box id='nav-links' sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }} style={{ justifyContent: alignment }}>\n      {navLinks.map(link => (\n        <Button className='link-style' key={link.text} onClick={link.onClick}>\n          {link.text}\n        </Button>\n      ))}\n    </Box>\n  );\n\n  return (\n    <div id='NavBar' className='nav-bar'>\n      <AppBar position='static' color='primary'>\n        <Container maxWidth='xl'>\n          <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>\n            <Button id='appName' style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>\n              <img src={appInfo.imageSrc} className={classes.appListLogo} />\n              <span className={classes.appName}>{appInfo.appName}</span>\n            </Button>\n            <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>\n              <IconButton\n                size='small'\n                aria-label='account of current user'\n                aria-controls='menu-appbar'\n                aria-haspopup='true'\n                onClick={handleOpenNavMenu}\n                color='inherit'\n              >\n                <MenuIcon />\n              </IconButton>\n              <Menu\n                id='menu-appbar'\n                anchorEl={anchorElNav}\n                anchorOrigin={{\n                  vertical: 'bottom',\n                  horizontal: 'left'\n                }}\n                keepMounted\n                transformOrigin={{\n                  vertical: 'top',\n                  horizontal: 'left'\n                }}\n                open={Boolean(anchorElNav)}\n                onClose={handleCloseNavMenu}\n              >\n                {navLinks.map(link => (\n                  <MenuItem key={link.text} onClick={link.onClick}>\n                    <Typography>{link.text}</Typography>\n                  </MenuItem>\n                ))}\n              </Menu>\n            </Box>\n\n            {position === 'inline' && <>{navLinksContent}</>}\n\n            <Box sx={{ flexGrow: 0 }}>\n              <IconButton onClick={handleOpenUserMenu}>\n                <Avatar>{operator.currentUserInitials}</Avatar>\n              </IconButton>\n              <Menu\n                id='menu-appbar'\n                anchorEl={anchorElUser}\n                anchorOrigin={{\n                  vertical: 'top',\n                  horizontal: 'right'\n                }}\n                keepMounted\n                transformOrigin={{\n                  vertical: 'top',\n                  horizontal: 'right'\n                }}\n                open={Boolean(anchorElUser)}\n                onClose={handleCloseUserMenu}\n              >\n                <MenuItem onClick={logout}>\n                  <Typography>Logout</Typography>\n                </MenuItem>\n              </Menu>\n            </Box>\n          </Toolbar>\n          {position === 'below' && <>{navLinksContent}</>}\n        </Container>\n      </AppBar>\n    </div>\n  );\n}\n"]}

package/lib/components/widget/AppAnnouncement/AppAnnouncement.d.ts

@@ -1,19 +1,11 @@
 /// <reference types="react" />
-import PropTypes from "prop-types";
-declare const AppAnnouncement: {
-    (props: any): JSX.Element;
-    propTypes: {
-        header: PropTypes.Requireable<string>;
-        description: PropTypes.Requireable<string>;
-        datasource: PropTypes.Requireable<Object>;
-        whatsnewlink: PropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        header: string;
-        description: string;
-        datasource: never[];
-        whatsnewlink: string;
-    };
-};
-export default AppAnnouncement;
+import { PConnProps } from '../../../types/PConnProps';
+interface AppAnnouncementProps extends PConnProps {
+    header?: string;
+    description?: string;
+    datasource?: any;
+    whatsnewlink?: string;
+}
+export default function AppAnnouncement(props: AppAnnouncementProps): JSX.Element;
+export {};
 //# sourceMappingURL=AppAnnouncement.d.ts.map

package/lib/components/widget/AppAnnouncement/AppAnnouncement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../../src/components/widget/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAanC,QAAA,MAAM,eAAe;;;;;;;;;;;;;;CAkCpB,CAAC;AAkBF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AppAnnouncement.d.ts","sourceRoot":"","sources":["../../../../src/components/widget/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,UAAU,oBAAqB,SAAQ,UAAU;IAE/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAWD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAsClE"}

package/lib/components/widget/AppAnnouncement/AppAnnouncement.js

@@ -1,20 +1,19 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { Card, CardContent, CardHeader, Typography, CardActions, Button } from "@material-ui/core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles(theme => ({
     root: {
         marginTop: theme.spacing(1),
         marginBottom: theme.spacing(1),
-        borderLeft: "6px solid",
+        borderLeft: '6px solid',
         borderLeftColor: theme.palette.primary.light
-    },
+    }
 }));
-const AppAnnouncement = (props) => {
-    const { header, description, datasource, whatsnewlink } = props;
+export default function AppAnnouncement(props) {
+    const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;
     let details = [];
     if (datasource && datasource.source) {
-        details = datasource.source.map((item) => {
+        details = datasource.source.map(item => {
             return item.name;
         });
     }
@@ -22,32 +21,9 @@ const AppAnnouncement = (props) => {
     const handleClick = () => {
         window.open(whatsnewlink);
     };
-    return (React.createElement(Card, { title: "AppAnnouncement", className: classes.root },
-        React.createElement(CardHeader, { title: React.createElement(Typography, { variant: "h6" }, header) }),
-        React.createElement(CardContent, null,
-            React.createElement(Typography, { variant: "body1", gutterBottom: true }, description),
-            details.map((itm, idx) => {
-                const theKey = `AppAnn-item-${idx}`;
-                return (React.createElement(Typography, { key: theKey, variant: "body2" },
-                    "- ",
-                    itm));
-            })),
-        React.createElement(CardActions, null,
-            React.createElement(Button, { color: "primary", onClick: handleClick, size: "small" }, "See what's new"))));
-};
-AppAnnouncement.propTypes = {
-    header: PropTypes.string,
-    description: PropTypes.string,
-    datasource: PropTypes.instanceOf(Object),
-    whatsnewlink: PropTypes.string,
-    // image: PropTypes.string
-};
-AppAnnouncement.defaultProps = {
-    header: "",
-    description: "",
-    // image: "",
-    datasource: [],
-    whatsnewlink: ""
-};
-export default AppAnnouncement;
+    return (_jsxs(Card, { title: 'AppAnnouncement', className: classes.root, children: [_jsx(CardHeader, { title: _jsx(Typography, { variant: 'h6', children: header }) }), _jsxs(CardContent, { children: [_jsx(Typography, { variant: 'body1', gutterBottom: true, children: description }), details.map((itm, idx) => {
+                        const theKey = `AppAnn-item-${idx}`;
+                        return (_jsxs(Typography, { variant: 'body2', children: ["- ", itm] }, theKey));
+                    })] }), _jsx(CardActions, { children: _jsx(Button, { color: 'primary', onClick: handleClick, size: 'small', children: "See what's new" }) })] }));
+}
 //# sourceMappingURL=AppAnnouncement.js.map

package/lib/components/widget/AppAnnouncement/AppAnnouncement.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../../src/components/widget/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACvC,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9B,UAAU,EAAE,WAAW;QACvB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK;KAC7C;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,CAAC,KAAK,EAAE,EAAE;IAChC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAChE,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,EAAE;QACnC,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACvC,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC,CAAC,CAAC;KACJ;IAED,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5B,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI;QACnD,oBAAC,UAAU,IAAC,KAAK,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,IAAI,IAAE,MAAM,CAAc,GAAI;QACrE,oBAAC,WAAW;YACV,oBAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,YAAY,UAAE,WAAW,CAAc;YAEjE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;gBACvB,MAAM,MAAM,GAAG,eAAe,GAAG,EAAE,CAAC;gBACpC,OAAO,CACL,oBAAC,UAAU,IAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAC,OAAO;;oBAAI,GAAG,CAAc,CAC9D,CAAA;YACH,CAAC,CAAC,CAEQ;QACd,oBAAC,WAAW;YACV,oBAAC,MAAM,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,qBAA6B,CAC3E,CACT,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,SAAS,GAAG;IAC1B,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,WAAW,EAAE,SAAS,CAAC,MAAM;IAC7B,UAAU,EAAE,SAAS,CAAC,UAAU,CAAC,MAAM,CAAC;IACxC,YAAY,EAAE,SAAS,CAAC,MAAM;IAC9B,0BAA0B;CAC3B,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG;IAC7B,MAAM,EAAE,EAAE;IACV,WAAW,EAAE,EAAE;IACf,aAAa;IACb,UAAU,EAAE,EAAE;IACd,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Card, CardContent, CardHeader, Typography, CardActions, Button } from \"@material-ui/core\";\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n    borderLeft: \"6px solid\",\n    borderLeftColor: theme.palette.primary.light\n  },\n}));\n\nconst AppAnnouncement = (props) => {\n  const { header, description, datasource, whatsnewlink } = props;\n  let details = [];\n  if (datasource && datasource.source) {\n    details = datasource.source.map((item) => {\n      return item.name;\n    });\n  }\n\n  const classes = useStyles();\n\n  const handleClick = () => {\n    window.open(whatsnewlink);\n  }\n\n  return (\n    <Card title=\"AppAnnouncement\" className={classes.root}>\n      <CardHeader title={<Typography variant=\"h6\">{header}</Typography>} />\n      <CardContent>\n        <Typography variant=\"body1\" gutterBottom>{description}</Typography>\n        {\n          details.map((itm, idx) => {\n            const theKey = `AppAnn-item-${idx}`;\n            return (\n              <Typography key={theKey} variant=\"body2\">- {itm}</Typography>\n            )\n          })\n        }\n      </CardContent>\n      <CardActions>\n        <Button color=\"primary\" onClick={handleClick} size=\"small\">See what&apos;s new</Button>\n      </CardActions>\n    </Card>\n  );\n};\n\nAppAnnouncement.propTypes = {\n  header: PropTypes.string,\n  description: PropTypes.string,\n  datasource: PropTypes.instanceOf(Object),\n  whatsnewlink: PropTypes.string,\n  // image: PropTypes.string\n};\n\nAppAnnouncement.defaultProps = {\n  header: \"\",\n  description: \"\",\n  // image: \"\",\n  datasource: [],\n  whatsnewlink: \"\"\n};\n\nexport default AppAnnouncement;\n"]}
+{"version":3,"file":"AppAnnouncement.js","sourceRoot":"","sources":["../../../../src/components/widget/AppAnnouncement/AppAnnouncement.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AACnG,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAWtD,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;QAC9B,UAAU,EAAE,WAAW;QACvB,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK;KAC7C;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAA2B;IACjE,MAAM,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,EAAE,YAAY,GAAG,EAAE,EAAE,GAAG,KAAK,CAAC;IACpF,IAAI,OAAO,GAAG,EAAE,CAAC;IACjB,IAAI,UAAU,IAAI,UAAU,CAAC,MAAM,EAAE;QACnC,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACrC,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC,CAAC,CAAC;KACJ;IAED,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,aACnD,KAAC,UAAU,IAAC,KAAK,EAAE,KAAC,UAAU,IAAC,OAAO,EAAC,IAAI,YAAE,MAAM,GAAc,GAAI,EACrE,MAAC,WAAW,eACV,KAAC,UAAU,IAAC,OAAO,EAAC,OAAO,EAAC,YAAY,kBACrC,WAAW,GACD,EACZ,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;wBACxB,MAAM,MAAM,GAAG,eAAe,GAAG,EAAE,CAAC;wBACpC,OAAO,CACL,MAAC,UAAU,IAAc,OAAO,EAAC,OAAO,mBACnC,GAAG,KADS,MAAM,CAEV,CACd,CAAC;oBACJ,CAAC,CAAC,IACU,EACd,KAAC,WAAW,cACV,KAAC,MAAM,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAC,OAAO,+BAEjD,GACG,IACT,CACR,CAAC;AACJ,CAAC","sourcesContent":["import { Card, CardContent, CardHeader, Typography, CardActions, Button } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport { PConnProps } from '../../../types/PConnProps';\n\ninterface AppAnnouncementProps extends PConnProps {\n  // If any, enter additional props that only exist on this component\n  header?: string;\n  description?: string;\n  datasource?: any;\n  whatsnewlink?: string;\n}\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1),\n    borderLeft: '6px solid',\n    borderLeftColor: theme.palette.primary.light\n  }\n}));\n\nexport default function AppAnnouncement(props: AppAnnouncementProps) {\n  const { header = '', description = '', datasource = [], whatsnewlink = '' } = props;\n  let details = [];\n  if (datasource && datasource.source) {\n    details = datasource.source.map(item => {\n      return item.name;\n    });\n  }\n\n  const classes = useStyles();\n\n  const handleClick = () => {\n    window.open(whatsnewlink);\n  };\n\n  return (\n    <Card title='AppAnnouncement' className={classes.root}>\n      <CardHeader title={<Typography variant='h6'>{header}</Typography>} />\n      <CardContent>\n        <Typography variant='body1' gutterBottom>\n          {description}\n        </Typography>\n        {details.map((itm, idx) => {\n          const theKey = `AppAnn-item-${idx}`;\n          return (\n            <Typography key={theKey} variant='body2'>\n              - {itm}\n            </Typography>\n          );\n        })}\n      </CardContent>\n      <CardActions>\n        <Button color='primary' onClick={handleClick} size='small'>\n          See what&apos;s new\n        </Button>\n      </CardActions>\n    </Card>\n  );\n}\n"]}

package/lib/components/widget/Attachment/Attachment.css

@@ -4,7 +4,15 @@
 }
 
 .file-div {
-  border: 1px dashed #262626;
+  border: 1px dashed var(--app-neutral-dark-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.file-div-error {
+  border: 1px dashed var(--app-error-color);
   width: 100%;
   padding: 0.5rem;
   text-align: center;
@@ -17,9 +25,72 @@
   left: 47%;
 }
 
-file-label::after {
+.file-label::after {
   display: inline;
-  content: " *";
+  content: ' *';
   vertical-align: top;
-  color: rgb(217, 28, 41);
+  color: var(--app-neutral-dark-color);
+}
+
+.file-error {
+  color: var(--app-error-color);
+}
+
+.psdk-utility-card {
+  display: flex;
+  flex-direction: row;
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.psdk-utility-card-icon {
+  flex-grow: 1;
+  max-width: 2.813rem;
+  align-content: center;
+  display: flex;
+}
+
+.psdk-utility-card-svg-icon {
+  width: 2.5rem;
+  display: inline-block;
+}
+
+.psdk-utility-card-main {
+  flex-grow: 2;
+  margin-left: 5px;
+}
+
+.psdk-utility-card-main-primary-label {
+  font-weight: bold;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.psdk-utility-card {
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid rgb(207, 207, 207);
+  border-radius: calc(0.25rem);
+  min-height: 3rem;
+}
+
+.psdk-utility-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.psdk-utility-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.file-disabled {
+  opacity: 0.4;
 }

package/lib/components/widget/Attachment/Attachment.d.ts

@@ -1,4 +1,11 @@
 /// <reference types="react" />
+import { PConnFieldProps } from '../../../types/PConnProps';
 import './Attachment.css';
-export default function Attachment(props: any): JSX.Element;
+interface AttachmentProps extends Omit<PConnFieldProps, 'value'> {
+    value: any;
+    allowMultiple: string;
+    extensions: string;
+}
+export default function Attachment(props: AttachmentProps): JSX.Element;
+export {};
 //# sourceMappingURL=Attachment.d.ts.map

package/lib/components/widget/Attachment/Attachment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/widget/Attachment/Attachment.tsx"],"names":[],"mappings":";AAKA,OAAO,kBAAkB,CAAC;AAW1B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,KAAA,eAucvC"}
+{"version":3,"file":"Attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/widget/Attachment/Attachment.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,kBAAkB,CAAC;AAE1B,UAAU,eAAgB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IAE9D,KAAK,EAAE,GAAG,CAAC;IACX,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACpB;AAeD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,eAAe,eAmaxD"}