@pega/react-sdk-components 0.23.0

package/lib/components/infra/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,86 @@
+// Adapted from nebula ErrorBoundary (remove Cosmos dependencies)
+import React from "react";
+import PropTypes from "prop-types";
+function ErrorBoundary(props) {
+    const ERROR_TEXT = PCore.getErrorHandler().getGenericFailedMessage();
+    const WORK_AREA = "workarea";
+    const ERROR_WHILE_RENDERING = "ERROR_WHILE_RENDERING";
+    const { getPConnect, isInternalError } = props;
+    const theErrorDiv = React.createElement("div", null, ERROR_TEXT);
+    if (!getPConnect) {
+        return (theErrorDiv
+        // <Flex
+        //   container={{
+        //     alignItems: "center",
+        //     justify: "center",
+        //     itemGap: 1
+        //   }}
+        // >
+        //   <Text status="error">
+        //     <Icon name="warn-solid" />
+        //   </Text>
+        //   <Text data-testid="errorText">{ERROR_TEXT}</Text>
+        // </Flex>
+        );
+    }
+    const pConn = getPConnect();
+    if (!isInternalError) {
+        // eslint-disable-next-line no-console
+        console.error(`Unable to load the component ${pConn.getComponentName()}
+    This might be due to the view meta data getting corrupted or the component file missing.
+    Raw meta data for the component: ${JSON.stringify(pConn.getRawMetadata())}`);
+    }
+    if (pConn.getConfigProps().type === "page") {
+        return (theErrorDiv
+        // <Banner
+        //   data-testid="errorBanner"
+        //   variant="urgent"
+        //   heading="Error"
+        //   messages={[ERROR_TEXT]}
+        // />
+        );
+    }
+    if (pConn.getContainerName() === WORK_AREA ||
+        pConn.isInsideList() === true ||
+        pConn.getContainerName() === "modal") {
+        const { publish } = PCore.getPubSubUtils();
+        publish(ERROR_WHILE_RENDERING);
+        return null;
+    }
+    return (theErrorDiv
+    // <Card>
+    //   <CardHeader>
+    //     <Text variant="h3">
+    //       {pConn.getConfigProps().label || pConn.getComponentName()}
+    //     </Text>
+    //   </CardHeader>
+    //   <CardContent
+    //     direction="row"
+    //     style={{ minHeight: "5rem", justifyContent: "center" }}
+    //   >
+    //     <Flex
+    //       container={{
+    //         alignItems: "center",
+    //         justify: "center",
+    //         itemGap: 1
+    //       }}
+    //     >
+    //       <Text status="error">
+    //         <Icon name="warn-solid" />
+    //       </Text>
+    //       <Text>{ERROR_TEXT}</Text>
+    //     </Flex>
+    //   </CardContent>
+    // </Card>
+    );
+}
+ErrorBoundary.propTypes = {
+    getPConnect: PropTypes.func,
+    isInternalError: PropTypes.bool
+};
+ErrorBoundary.defaultProps = {
+    getPConnect: null,
+    isInternalError: false
+};
+export default ErrorBoundary;
+//# sourceMappingURL=ErrorBoundary.js.map

package/lib/components/infra/ErrorBoundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../../src/components/infra/ErrorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,iEAAiE;AAEjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC,SAAS,aAAa,CAAC,KAAK;IAC1B,MAAM,UAAU,GAAG,KAAK,CAAC,eAAe,EAAE,CAAC,uBAAuB,EAAE,CAAC;IACrE,MAAM,SAAS,GAAG,UAAU,CAAC;IAC7B,MAAM,qBAAqB,GAAG,uBAAuB,CAAC;IACtD,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAE/C,MAAM,WAAW,GAAG,iCAAM,UAAU,CAAO,CAAA;IAE3C,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,CACL,WAAW;QACX,QAAQ;QACR,iBAAiB;QACjB,4BAA4B;QAC5B,yBAAyB;QACzB,iBAAiB;QACjB,OAAO;QACP,IAAI;QACJ,0BAA0B;QAC1B,iCAAiC;QACjC,YAAY;QACZ,sDAAsD;QACtD,UAAU;SACX,CAAC;KACH;IAED,MAAM,KAAK,GAAG,WAAW,EAAE,CAAC;IAE5B,IAAI,CAAC,eAAe,EAAE;QACpB,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,gCAAgC,KAAK,CAAC,gBAAgB,EAAE;;uCAEnC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,cAAc,EAAE,CAAC,EAAE,CAAC,CAAC;KAC9E;IAED,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC,IAAI,KAAK,MAAM,EAAE;QAC1C,OAAO,CACL,WAAW;QACX,UAAU;QACV,8BAA8B;QAC9B,qBAAqB;QACrB,oBAAoB;QACpB,4BAA4B;QAC5B,KAAK;SACN,CAAC;KACH;IAED,IACE,KAAK,CAAC,gBAAgB,EAAE,KAAK,SAAS;QACtC,KAAK,CAAC,YAAY,EAAE,KAAK,IAAI;QAC7B,KAAK,CAAC,gBAAgB,EAAE,KAAK,OAAO,EACpC;QACA,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;QAC3C,OAAO,CAAC,qBAAqB,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,WAAW;IACX,SAAS;IACT,iBAAiB;IACjB,0BAA0B;IAC1B,mEAAmE;IACnE,cAAc;IACd,kBAAkB;IAClB,iBAAiB;IACjB,sBAAsB;IACtB,8DAA8D;IAC9D,MAAM;IACN,YAAY;IACZ,qBAAqB;IACrB,gCAAgC;IAChC,6BAA6B;IAC7B,qBAAqB;IACrB,WAAW;IACX,QAAQ;IACR,8BAA8B;IAC9B,qCAAqC;IACrC,gBAAgB;IAChB,kCAAkC;IAClC,cAAc;IACd,mBAAmB;IACnB,UAAU;KACX,CAAC;AACJ,CAAC;AACD,aAAa,CAAC,SAAS,GAAG;IACxB,WAAW,EAAE,SAAS,CAAC,IAAI;IAC3B,eAAe,EAAE,SAAS,CAAC,IAAI;CAChC,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG;IAC3B,WAAW,EAAE,IAAI;IACjB,eAAe,EAAE,KAAK;CACvB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Adapted from nebula ErrorBoundary (remove Cosmos dependencies)\n\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\ndeclare const PCore;\n\nfunction ErrorBoundary(props) {\n  const ERROR_TEXT = PCore.getErrorHandler().getGenericFailedMessage();\n  const WORK_AREA = \"workarea\";\n  const ERROR_WHILE_RENDERING = \"ERROR_WHILE_RENDERING\";\n  const { getPConnect, isInternalError } = props;\n\n  const theErrorDiv = <div>{ERROR_TEXT}</div>\n\n  if (!getPConnect) {\n    return (\n      theErrorDiv\n      // <Flex\n      //   container={{\n      //     alignItems: \"center\",\n      //     justify: \"center\",\n      //     itemGap: 1\n      //   }}\n      // >\n      //   <Text status=\"error\">\n      //     <Icon name=\"warn-solid\" />\n      //   </Text>\n      //   <Text data-testid=\"errorText\">{ERROR_TEXT}</Text>\n      // </Flex>\n    );\n  }\n\n  const pConn = getPConnect();\n\n  if (!isInternalError) {\n    // eslint-disable-next-line no-console\n    console.error(`Unable to load the component ${pConn.getComponentName()}\n    This might be due to the view meta data getting corrupted or the component file missing.\n    Raw meta data for the component: ${JSON.stringify(pConn.getRawMetadata())}`);\n  }\n\n  if (pConn.getConfigProps().type === \"page\") {\n    return (\n      theErrorDiv\n      // <Banner\n      //   data-testid=\"errorBanner\"\n      //   variant=\"urgent\"\n      //   heading=\"Error\"\n      //   messages={[ERROR_TEXT]}\n      // />\n    );\n  }\n\n  if (\n    pConn.getContainerName() === WORK_AREA ||\n    pConn.isInsideList() === true ||\n    pConn.getContainerName() === \"modal\"\n  ) {\n    const { publish } = PCore.getPubSubUtils();\n    publish(ERROR_WHILE_RENDERING);\n    return null;\n  }\n\n  return (\n    theErrorDiv\n    // <Card>\n    //   <CardHeader>\n    //     <Text variant=\"h3\">\n    //       {pConn.getConfigProps().label || pConn.getComponentName()}\n    //     </Text>\n    //   </CardHeader>\n    //   <CardContent\n    //     direction=\"row\"\n    //     style={{ minHeight: \"5rem\", justifyContent: \"center\" }}\n    //   >\n    //     <Flex\n    //       container={{\n    //         alignItems: \"center\",\n    //         justify: \"center\",\n    //         itemGap: 1\n    //       }}\n    //     >\n    //       <Text status=\"error\">\n    //         <Icon name=\"warn-solid\" />\n    //       </Text>\n    //       <Text>{ERROR_TEXT}</Text>\n    //     </Flex>\n    //   </CardContent>\n    // </Card>\n  );\n}\nErrorBoundary.propTypes = {\n  getPConnect: PropTypes.func,\n  isInternalError: PropTypes.bool\n};\n\nErrorBoundary.defaultProps = {\n  getPConnect: null,\n  isInternalError: false\n};\n\nexport default ErrorBoundary;\n"]}

package/lib/components/infra/ErrorBoundary/index.d.ts

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

package/lib/components/infra/ErrorBoundary/index.d.ts.map

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

package/lib/components/infra/ErrorBoundary/index.js

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

package/lib/components/infra/ErrorBoundary/index.js.map

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

package/lib/components/infra/MultiStep/MultiStep.css

@@ -0,0 +1,261 @@
+.psdk-case-view-divider {
+  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-icon-current {
+  color: var(--app-primary-color);
+}
+
+.psdk-icon-not-current {
+  color: var(--app-neutral-color);
+}
+
+.psdk-current-svg-icon {
+  width: 1.0rem;
+  filter: var(--app-primary-color-filter);
+}
+
+.psdk-not-current-svg-icon {
+  width: 1.0rem;
+  filter: var(--app-neutral-color-filter);
+}
+
+
+mat-vertical-stepper {
+  background-color: transparent;
+}
+mat-horizontal-stepper {
+  background-color: transparent;
+}
+
+.psdk-sub-step-current {
+  padding-left: 0.625rem; 
+  font-weight: bold;
+  color: rgba(0,0,0,.87);
+}
+
+.psdk-sub-step-not-current {
+  padding-left: 0.625rem;
+  color: rgba(0,0,0,.54);
+}
+
+.psdk-flow-container-top {
+  border-radius: 0.3125rem;
+
+}
+.psdk-flow-container {
+  padding-left: 2.1875rem;
+}
+
+.psdk-sub-step-list {
+  list-style: none; 
+  padding-bottom: 0.625rem;
+}
+
+
+
+.psdk-vertical-stepper {
+  background-color: transparent;
+  display: block;
+  text-align: left;
+}
+
+.psdk-vertical-step {
+  display: block;
+}
+
+.psdk-vertical-step-header {
+  overflow: hidden;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding: 24px 24px;
+}
+
+.psdk-vertical-step-icon {
+  margin-right: 12px;
+  background-color: var(--app-neutral-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.psdk-vertical-step-icon-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+}
+
+.psdk-vertical-step-icon-selected {
+  margin-right: 12px;
+  background-color: var(--app-primary-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.psdk-vertical-step-label {
+  color: rgba(0,0,0,.54);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.psdk-vertical-step-label-selected {
+  color: rgba(0,0,0,.87);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.psdk-vertical-step-body {
+  margin-left: 36px;
+  border: 0;
+  position: relative;
+  display: block;
+  text-align: left;
+}
+.psdk-vertical-step-line {
+  display: block;
+}
+
+.psdk-vertical-step-line::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  border-left-width: 1px;
+  border-left-style: solid;
+  top: -16px;
+  bottom: -16px;
+  border-left-color: rgba(0,0,0,.12);
+}
+
+.psdk-horizontal-stepper {
+  background-color: transparent;
+  display: block;
+}
+
+.psdk-horizontal-stepper-header-container {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  text-align: left;
+}
+
+.psdk-horizontal-step-header {
+  overflow: hidden;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+  display: flex;
+  height: 72px;
+  overflow: hidden;
+  align-items: center;
+  padding: 0 24px;
+}
+
+.psdk-horizontal-step-icon {
+  background-color: var(--app-neutral-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+  display: block;
+  margin-right: 8px;
+  flex: none;
+}
+
+.psdk-horizontal-step-icon-content {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.psdk-horizontal-step-icon-selected {
+  background-color: var(--app-primary-color);
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+  display: block;
+  margin-right: 8px;
+  flex: none;
+}
+
+.psdk-horizontal-step-label {
+  color: rgba(0,0,0,.54);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.psdk-horizontal-step-label-selected {
+  color: rgba(0,0,0,.87);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.psdk-horizontal-step-text-label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: block;
+}
+
+.psdk-horizontal-step-line {
+  border-top-color: rgba(0,0,0,.12);
+  border-top-width: 1px;
+  border-top-style: solid;
+  flex: auto;
+  height: 0;
+  margin: 0 -16px;
+  min-width: 32px;
+}

package/lib/components/infra/MultiStep/MultiStep.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import PropTypes from "prop-types";
+import './MultiStep.css';
+declare function MultiStep(props: any): JSX.Element;
+declare namespace MultiStep {
+    var propTypes: {
+        children: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        getPConnect: PropTypes.Validator<(...args: any[]) => any>;
+        itemKey: PropTypes.Requireable<string>;
+        actionButtons: PropTypes.Requireable<object>;
+        onButtonPress: PropTypes.Requireable<(...args: any[]) => any>;
+        bIsVertical: PropTypes.Requireable<boolean>;
+        arCurrentStepIndicies: PropTypes.Requireable<any[]>;
+        arNavigationSteps: PropTypes.Requireable<any[]>;
+    };
+    var defaultProps: {
+        itemKey: null;
+    };
+}
+export default MultiStep;
+//# sourceMappingURL=MultiStep.d.ts.map

package/lib/components/infra/MultiStep/MultiStep.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStep.d.ts","sourceRoot":"","sources":["../../../../src/components/infra/MultiStep/MultiStep.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,iBAAiB,CAAC;AAMzB,iBAAwB,SAAS,CAAC,KAAK,KAAA,eAuMpC;kBAvMqB,SAAS;;;;;;;;;;;;;;;eAAT,SAAS"}

package/lib/components/infra/MultiStep/MultiStep.js

@@ -0,0 +1,130 @@
+import React from "react";
+import PropTypes from "prop-types";
+import './MultiStep.css';
+import AssignmentCard from '../AssignmentCard';
+// import { useConstellationContext } from "../../bridge/Context/StoreContext";
+export default function MultiStep(props) {
+    const { getPConnect, children, itemKey, actionButtons, onButtonPress } = props;
+    const { bIsVertical, arNavigationSteps } = props;
+    // const svgCurrent = Utils.getImageSrc("circle-solid", PCore.getAssetLoader().getStaticServerUrl());
+    // const svgNotCurrent = Utils.getImageSrc("circle-solid", PCore.getAssetLoader().getStaticServerUrl());
+    function _getVIconClass(status) {
+        if (status === "current") {
+            return "psdk-vertical-step-icon-selected";
+        }
+        return "psdk-vertical-step-icon";
+    }
+    function _getVLabelClass(status) {
+        if (status === "current") {
+            return "psdk-vertical-step-label-selected";
+        }
+        return "psdk-vertical-step-label";
+    }
+    function _getVBodyClass(index) {
+        if (index < arNavigationSteps.length - 1) {
+            return "psdk-vertical-step-body psdk-vertical-step-line";
+        }
+        return "psdk-vertical-step-body";
+    }
+    function _getHIconClass(status) {
+        if (status === "current") {
+            return "psdk-horizontal-step-icon-selected";
+        }
+        return "psdk-horizontal-step-icon";
+    }
+    function _getHLabelClass(status) {
+        if (status === "current") {
+            return "psdk-horizontal-step-label-selected";
+        }
+        return "psdk-horizontal-step-label";
+    }
+    function _showHLine(index) {
+        // eslint-disable-next-line sonarjs/prefer-single-boolean-return
+        if (index < arNavigationSteps.length - 1) {
+            return true;
+        }
+        return false;
+    }
+    function buttonPress(sAction, sButtonType) {
+        onButtonPress(sAction, sButtonType);
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, bIsVertical ?
+            React.createElement("div", { className: "psdk-vertical-stepper" }, arNavigationSteps.map((mainStep, index) => {
+                return (React.createElement(React.Fragment, { key: mainStep.actionID },
+                    React.createElement("div", { className: "psdk-vertical-step" },
+                        React.createElement("div", { className: "psdk-vertical-step-header" },
+                            React.createElement("div", { className: _getVIconClass(mainStep.visited_status) },
+                                React.createElement("div", { className: "psdk-vertical-step-icon-content" },
+                                    React.createElement("span", null, index + 1))),
+                            React.createElement("div", { className: _getVLabelClass(mainStep.visited_status) }, mainStep.name)),
+                        React.createElement("div", { className: _getVBodyClass(index) },
+                            mainStep?.steps &&
+                                React.createElement(React.Fragment, null,
+                                    React.createElement("ul", { style: { paddingInlineStart: "0rem", marginLeft: "-7px" } }, mainStep.steps.forEach((subStep) => {
+                                        React.createElement("li", { className: "psdk-sub-step-list" },
+                                            React.createElement("div", { style: { display: "inline-flex" } },
+                                                subStep.visited_status === 'current' &&
+                                                    React.createElement("img", { className: "psdk-current-svg-icon", src: "{svgCurrent}" }),
+                                                subStep.visited_status !== 'current' &&
+                                                    React.createElement("img", { className: "psdk-not-current-svg-icon", src: "{svgNotCurrent}" }),
+                                                subStep.visited_status === 'current' &&
+                                                    React.createElement("label", { className: "psdk-sub-step-current" }, subStep.name),
+                                                subStep.visited_status !== 'current' &&
+                                                    React.createElement("label", { className: "psdk-sub-step-not-current" }, subStep.name)),
+                                            subStep.visited_status === 'current' &&
+                                                React.createElement("div", null,
+                                                    React.createElement(AssignmentCard, { getPConnect: getPConnect, itemKey: itemKey, actionButtons: actionButtons, onButtonPress: buttonPress }, children)));
+                                    }))),
+                            !mainStep?.steps && mainStep.visited_status === 'current' &&
+                                React.createElement(AssignmentCard, { getPConnect: getPConnect, itemKey: itemKey, actionButtons: actionButtons, onButtonPress: buttonPress }, children)))));
+            }))
+            :
+                React.createElement("div", { className: "psdk-horizontal-stepper" },
+                    React.createElement("div", { className: "psdk-horizontal-stepper-header-container" }, arNavigationSteps.map((mainStep, index) => {
+                        return (React.createElement(React.Fragment, { key: mainStep.actionID },
+                            React.createElement("div", { className: "psdk-horizontal-step-header" },
+                                React.createElement("div", { className: _getHIconClass(mainStep.visited_status) },
+                                    React.createElement("div", { className: "psdk-horizontal-step-icon-content" },
+                                        React.createElement("span", null, index + 1))),
+                                React.createElement("div", { className: _getHLabelClass(mainStep.visited_status) },
+                                    React.createElement("div", { className: "psdk-horizontal-step-text-label" }, mainStep.name))),
+                            _showHLine(index) &&
+                                React.createElement("div", { className: "psdk-horizontal-step-line" })));
+                    })),
+                    arNavigationSteps.map((mainStep) => {
+                        return (React.createElement(React.Fragment, { key: mainStep.actionID },
+                            mainStep.steps &&
+                                React.createElement(React.Fragment, null,
+                                    React.createElement("ul", { style: { paddingInlineStart: "0rem", marginLeft: "35px" } }, mainStep.steps.map((subStep) => (React.createElement(React.Fragment, null,
+                                        React.createElement("li", { className: "psdk-sub-step-list" },
+                                            React.createElement("div", { style: { display: "inline-flex" } },
+                                                subStep.visited_status === 'current' &&
+                                                    React.createElement("img", { className: "psdk-current-svg-icon", src: "{svgCurrent}" }),
+                                                subStep.visited_status !== 'current' &&
+                                                    React.createElement("img", { className: "psdk-not-current-svg-icon", src: "{svgNotCurrent}" }),
+                                                subStep.visited_status === 'current' &&
+                                                    React.createElement("label", { className: "psdk-sub-step-current" }, subStep.name),
+                                                subStep.visited_status !== 'current' &&
+                                                    React.createElement("label", { className: "psdk-sub-step-not-current" }, subStep.name)),
+                                            subStep.visited_status === 'current' &&
+                                                React.createElement(AssignmentCard, { getPConnect: getPConnect, itemKey: itemKey, actionButtons: actionButtons, onButtonPress: buttonPress }, children))))))),
+                            !mainStep?.steps && mainStep.visited_status === 'current' &&
+                                React.createElement(AssignmentCard, { getPConnect: getPConnect, itemKey: itemKey, actionButtons: actionButtons, onButtonPress: buttonPress }, children)));
+                    })))));
+}
+MultiStep.propTypes = {
+    children: PropTypes.node.isRequired,
+    getPConnect: PropTypes.func.isRequired,
+    itemKey: PropTypes.string,
+    actionButtons: PropTypes.object,
+    onButtonPress: PropTypes.func,
+    bIsVertical: PropTypes.bool,
+    // eslint-disable-next-line react/no-unused-prop-types
+    arCurrentStepIndicies: PropTypes.array,
+    arNavigationSteps: PropTypes.array
+};
+MultiStep.defaultProps = {
+    itemKey: null
+};
+//# sourceMappingURL=MultiStep.js.map

package/lib/components/infra/MultiStep/MultiStep.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStep.js","sourceRoot":"","sources":["../../../../src/components/infra/MultiStep/MultiStep.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport './MultiStep.css';\n\nimport AssignmentCard from '../AssignmentCard';\n\n// import { useConstellationContext } from \"../../bridge/Context/StoreContext\";\n\nexport default function MultiStep(props) {\n    const { getPConnect, children, itemKey, actionButtons, onButtonPress} = props;\n    const { bIsVertical, arNavigationSteps } = props;\n\n    // const svgCurrent = Utils.getImageSrc(\"circle-solid\", PCore.getAssetLoader().getStaticServerUrl());\n    // const svgNotCurrent = Utils.getImageSrc(\"circle-solid\", PCore.getAssetLoader().getStaticServerUrl());\n\n    function _getVIconClass(status): string {\n        if (status === \"current\") {\n          return \"psdk-vertical-step-icon-selected\";\n        }\n\n        return \"psdk-vertical-step-icon\";\n      }\n\n      function _getVLabelClass(status): string {\n        if (status === \"current\") {\n          return \"psdk-vertical-step-label-selected\";\n        }\n\n        return \"psdk-vertical-step-label\";\n      }\n\n      function _getVBodyClass(index: number): string {\n        if (index < arNavigationSteps.length - 1) {\n          return \"psdk-vertical-step-body psdk-vertical-step-line\";\n        }\n\n        return \"psdk-vertical-step-body\";\n      }\n\n      function _getHIconClass(status): string {\n        if (status === \"current\") {\n          return \"psdk-horizontal-step-icon-selected\";\n        }\n\n        return \"psdk-horizontal-step-icon\";\n      }\n\n      function _getHLabelClass(status): string {\n        if (status === \"current\") {\n          return \"psdk-horizontal-step-label-selected\";\n        }\n\n        return \"psdk-horizontal-step-label\";\n      }\n\n      function _showHLine(index: number): boolean {\n        // eslint-disable-next-line sonarjs/prefer-single-boolean-return\n        if (index < arNavigationSteps.length - 1) {\n          return true;\n        }\n\n        return false;\n      }\n\n      function buttonPress(sAction: string, sButtonType: string) {\n        onButtonPress(sAction, sButtonType);\n      }\n\n    return (\n      <React.Fragment>\n          <div>\n              {bIsVertical ?\n                <div className=\"psdk-vertical-stepper\">\n                    {arNavigationSteps.map((mainStep, index) =>   {\n                      return (\n                        <React.Fragment key={mainStep.actionID}>\n                        <div className=\"psdk-vertical-step\">\n                            <div className=\"psdk-vertical-step-header\">\n                                <div className={ _getVIconClass(mainStep.visited_status)}>\n                                    <div className=\"psdk-vertical-step-icon-content\">\n                                        <span>{index + 1}</span>\n                                    </div>\n                                </div>\n                                <div className={ _getVLabelClass(mainStep.visited_status)}>\n                                    {mainStep.name}\n                                </div>\n                            </div>\n                            <div className={ _getVBodyClass(index)}>\n                                {mainStep?.steps &&\n                                <React.Fragment>\n                                <ul style={{paddingInlineStart: \"0rem\", marginLeft: \"-7px\"}}>\n                                    {mainStep.steps.forEach((subStep) => {\n                                        <li className=\"psdk-sub-step-list\">\n                                        <div style={{display: \"inline-flex\"}}>\n                                            {subStep.visited_status === 'current' &&\n                                            <img className=\"psdk-current-svg-icon\" src=\"{svgCurrent}\" />\n                                            }\n                                            {subStep.visited_status !== 'current' &&\n                                            <img className=\"psdk-not-current-svg-icon\" src=\"{svgNotCurrent}\" />\n                                            }\n                                            {subStep.visited_status === 'current' &&\n                                            <label className=\"psdk-sub-step-current\">{subStep.name}</label>\n                                            }\n                                            {subStep.visited_status !== 'current' &&\n                                            <label className=\"psdk-sub-step-not-current\">{subStep.name}</label>\n                                            }\n                                        </div>\n                                        {subStep.visited_status === 'current' &&\n                                            <div>\n                                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress} >\n                                                    {children}\n                                                </AssignmentCard>\n                                            </div>\n                                        }\n\n\n                                        </li>\n                                    })}\n\n                                </ul>\n                                </React.Fragment>\n                                }\n                                {!mainStep?.steps && mainStep.visited_status === 'current' &&\n                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress} >\n                                        {children}\n                                 </AssignmentCard>\n                                }\n                            </div>\n                        </div>\n                        </React.Fragment>\n                    )})}\n                </div>\n\n              :\n                <div className=\"psdk-horizontal-stepper\">\n                     <div className=\"psdk-horizontal-stepper-header-container\">\n                     {arNavigationSteps.map((mainStep, index) => {\n                        return (\n                        <React.Fragment key={mainStep.actionID}>\n                        <div className=\"psdk-horizontal-step-header\">\n                            <div className={ _getHIconClass(mainStep.visited_status)}>\n                                <div className=\"psdk-horizontal-step-icon-content\">\n                                <span>{index + 1}</span>\n                                </div>\n                            </div>\n                            <div className={ _getHLabelClass(mainStep.visited_status)}>\n                                <div className=\"psdk-horizontal-step-text-label\">\n                                {mainStep.name}\n                                </div>\n                            </div>\n                        </div>\n                        { _showHLine(index) &&\n                            <div className=\"psdk-horizontal-step-line\"></div>\n                        }\n                        </React.Fragment>\n                     )})}\n                     </div>\n                     {arNavigationSteps.map((mainStep) => {\n                        return (\n                         <React.Fragment key={mainStep.actionID}>\n                         {mainStep.steps &&\n                            <React.Fragment>\n                            <ul style={{paddingInlineStart: \"0rem\", marginLeft: \"35px\"}}>\n                            {mainStep.steps.map((subStep) => (\n                                <React.Fragment>\n                                <li className=\"psdk-sub-step-list\">\n                                <div style={{display: \"inline-flex\"}}>\n                                    {subStep.visited_status === 'current' &&\n                                    <img className=\"psdk-current-svg-icon\" src=\"{svgCurrent}\" />\n                                    }\n                                    {subStep.visited_status !== 'current' &&\n                                    <img className=\"psdk-not-current-svg-icon\" src=\"{svgNotCurrent}\" />\n                                    }\n                                    {subStep.visited_status === 'current' &&\n                                    <label className=\"psdk-sub-step-current\">{subStep.name}</label>\n                                    }\n                                    {subStep.visited_status !== 'current' &&\n                                    <label className=\"psdk-sub-step-not-current\">{subStep.name}</label>\n                                    }\n                                </div>\n                                {subStep.visited_status === 'current' &&\n                                <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress} >\n                                        {children}\n                                 </AssignmentCard>\n                                }\n                              </li>\n                              </React.Fragment>\n                            ))}\n\n                          </ul>\n                          </React.Fragment>\n                        }\n                        { !mainStep?.steps && mainStep.visited_status === 'current' &&\n                            <AssignmentCard getPConnect={getPConnect} itemKey={itemKey} actionButtons={actionButtons} onButtonPress={buttonPress} >\n                                {children}\n                            </AssignmentCard>\n                        }\n                        </React.Fragment>\n                     )})}\n                </div>\n              }\n\n          </div>\n\n      </React.Fragment>\n\n    )\n  }\n\n  MultiStep.propTypes = {\n    children: PropTypes.node.isRequired,\n    getPConnect: PropTypes.func.isRequired,\n    itemKey: PropTypes.string,\n    actionButtons: PropTypes.object,\n    onButtonPress: PropTypes.func,\n    bIsVertical: PropTypes.bool,\n    // eslint-disable-next-line react/no-unused-prop-types\n    arCurrentStepIndicies: PropTypes.array,\n    arNavigationSteps: PropTypes.array\n  };\n\n  MultiStep.defaultProps = {\n    itemKey: null\n  };\n"]}

package/lib/components/infra/MultiStep/index.d.ts

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

package/lib/components/infra/MultiStep/index.d.ts.map

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

package/lib/components/infra/MultiStep/index.js

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

package/lib/components/infra/MultiStep/index.js.map

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