@capillarytech/blaze-ui 5.23.3-beta.1 → 5.23.3-beta.10

package/CapMultiplePath/index.js

@@ -1,29 +1,24 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import cloneDeep from 'lodash/cloneDeep';
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import CapBlock from "../CapBlock";
-import CapButton from "../CapButton";
-import { getCombinedNanoId } from "../CapDnDGraph/utils";
-import CapInput from "../CapInput";
-import CapLabel from "../CapLabel";
-import CapModal from "../CapModal";
-import CapRow from "../CapRow";
-import CapTooltip from "../CapTooltip";
-import LocaleHoc from "../LocaleHoc";
-import * as StyledVars from "../styles/_variables";
-import { ARROW_UP, ARROW_DOWN, HORIZONTAL, VERTICAL, BORDER_DASHED, PATH_NAME_MAX_LENGTH } from "./constants";
-import { MultiplePathRowWrapper, PathConnector, StyledArrowIcon, StyledPathNamePlaceHolder, StyledPathNameHolder, StyledAddPath, StyledPathInput, StyledCapIcon } from "./styles";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-var {
-  CapLabelInline
-} = CapLabel;
-var {
-  CAP_G07
-} = StyledVars;
-var CapMultiplePath = props => {
-  var _pathList$deletePathI;
-  var {
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import cloneDeep from "lodash/cloneDeep";
+import PropTypes from "prop-types";
+import { useState } from "react";
+import CapBlock from "../CapBlock/index.js";
+import CapButton from "../CapButton/index.js";
+import { getCombinedNanoId } from "../CapDnDGraph/utils.js";
+import InputFinal from "../CapInput/index.js";
+import CapLabelWithStatic from "../CapLabel/index.js";
+import CapModalWithHoc from "../CapModal/index.js";
+import CapRow from "../CapRow/index.js";
+import CapTooltip from "../CapTooltip/index.js";
+import LocaleHoc from "../LocaleHoc/index.js";
+import * as styles__variables from "../styles/_variables.js";
+import { ARROW_UP, ARROW_DOWN, VERTICAL, HORIZONTAL, BORDER_DASHED, PATH_NAME_MAX_LENGTH } from "./constants.js";
+import { MultiplePathRowWrapper, StyledArrowIcon, StyledCapIcon, PathConnector, StyledAddPath, StyledPathNameHolder, StyledPathNamePlaceHolder, StyledPathInput } from "./styles.js";
+const { CapLabelInline } = CapLabelWithStatic;
+const { CAP_G07 } = styles__variables;
+const CapMultiplePath = (props) => {
+  var _a;
+  const {
     pathList,
     setPathList,
     capBlockWidth,
@@ -53,25 +48,12 @@ var CapMultiplePath = props => {
     onDeletePath,
     addPathMessage
   } = props;
-
-  /**
-   * If any path name is being editted
-   * -- Set state 'indexOfPathEditEnabled' with index of path being edited.
-   *
-   */
-  var [indexOfPathEditEnabled, setIndexOfPathEditEnabled] = useState(-1);
-  var [isPathNameDuplicateOrEmpty, setIsPathNameDuplicateOrEmpty] = useState(false);
-  var [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
-  var [deletePathIndex, setDeletePathIndex] = useState(null);
-  var [tempPathName, setTempPathName] = useState(null);
-  /**
-   *
-   * @param {*} e
-   * If currently editing the pathname, and clicked outside the input box
-   * setIndexOfPathEditEnabled to -1
-   */
-  var onPathNameClickOutside = () => {
-    /** If clicked outside and PathNames are duplicate do not update state, if unique show div with updated pathname.*/
+  const [indexOfPathEditEnabled, setIndexOfPathEditEnabled] = useState(-1);
+  const [isPathNameDuplicateOrEmpty, setIsPathNameDuplicateOrEmpty] = useState(false);
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
+  const [deletePathIndex, setDeletePathIndex] = useState(null);
+  const [tempPathName, setTempPathName] = useState(null);
+  const onPathNameClickOutside = () => {
     if (!isPathNameDuplicateOrEmpty && tempPathName) {
       updatePathName(indexOfPathEditEnabled, tempPathName);
     }
@@ -79,232 +61,140 @@ var CapMultiplePath = props => {
     setIndexOfPathEditEnabled(-1);
     setIsPathNameDuplicateOrEmpty(false);
   };
-  var onPressEnterCall = e => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+  const onPressEnterCall = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       onPathNameClickOutside();
     }
   };
-
-  /**
-   * Used to check if Pathnames are duplicate or not.
-   * @returns true if the Pathnames are Duplicate
-   */
-  var checkDuplicateOrEmptyPathName = currentPathName => {
-    var _pathList$filter;
-    var isPathNameEmpty = !(currentPathName != null && currentPathName.trim());
+  const checkDuplicateOrEmptyPathName = (currentPathName) => {
+    var _a2;
+    const isPathNameEmpty = !(currentPathName == null ? void 0 : currentPathName.trim());
     if (isPathNameEmpty) {
       setIsPathNameDuplicateOrEmpty(true);
       return true;
     }
-
-    /**
-     * To check for duplicate, remove from current Path
-     * from remaining path check if currentPathName is same as any other pathname.
-     */
-    var isPathNameDuplicate = pathList == null || (_pathList$filter = pathList.filter((path, index) => index !== indexOfPathEditEnabled)) == null ? void 0 : _pathList$filter.some(path => (path == null ? void 0 : path.pathName) === currentPathName);
+    const isPathNameDuplicate = (_a2 = pathList == null ? void 0 : pathList.filter((path, index2) => index2 !== indexOfPathEditEnabled)) == null ? void 0 : _a2.some((path) => (path == null ? void 0 : path.pathName) === currentPathName);
     setIsPathNameDuplicateOrEmpty(isPathNameDuplicate);
     return isPathNameDuplicate;
   };
-
-  /**
-   * Add a path.
-   */
-  var addPath = () => {
+  const addPath = () => {
     if (addPathDisabled) return;
     if (!continueAddPath()) return;
-    var temp = {
+    const temp = {
       contents: defaultContents,
       pathName: null,
       id: getCombinedNanoId(7, 3)
     };
-    var clonedPathList = cloneDeep(pathList);
-    var newPathList = [...clonedPathList, temp];
+    const clonedPathList = cloneDeep(pathList);
+    const newPathList = [...clonedPathList, temp];
     setPathList(newPathList);
   };
-
-  /**
-   * Delete a path.
-   */
-  var deletePath = index => {
-    var newPathList = cloneDeep(pathList);
-    newPathList.splice(index, 1);
-    if (allowDeletePath(index)) {
+  const deletePath = (index2) => {
+    const newPathList = cloneDeep(pathList);
+    newPathList.splice(index2, 1);
+    if (allowDeletePath(index2)) {
       setPathList(newPathList);
     }
-    // This is required in case of store upload to update the data
-    onDeletePath && onDeletePath(index);
+    onDeletePath && onDeletePath(index2);
   };
-
-  /**
-   *
-   * @param {*} btnType : ARROW_UP / ARROW_DOWN
-   * @param {*} index : Path index
-   * @returns checkDisabled is true for ARROW_UP of first Path & ARROW_DOWN of last path
-   */
-  var checkDisabled = (btnType, index) => {
-    if (btnType === ARROW_UP && index === 0) return true;
-    if (btnType === ARROW_DOWN && index === pathList.length - 1) return true;
+  const checkDisabled = (btnType, index2) => {
+    if (btnType === ARROW_UP && index2 === 0) return true;
+    if (btnType === ARROW_DOWN && index2 === pathList.length - 1) return true;
     return false;
   };
-
-  /**
-   * Toggle Path position UP or DOWN based on btnType.
-   * @param {*} btnType : either ARROW_UP or ARROW_DOWN
-   * @param {*} index : index of path to toggle.
-   */
-  var togglePosition = (btnType, index) => {
+  const togglePosition = (btnType, index2) => {
     if (btnType === ARROW_UP) {
-      if (index === 0) return;
-      if (allowTogglePaths([index - 1, index])) {
-        // Sending path indices and storeUploadPathChangeRequired flag as per the requirements in journey
-        setPathList(swapArrayElements(index, index - 1, pathList), {
-          oldIndex: index,
-          newIndex: index - 1,
+      if (index2 === 0) return;
+      if (allowTogglePaths([index2 - 1, index2])) {
+        setPathList(swapArrayElements(index2, index2 - 1, pathList), {
+          oldIndex: index2,
+          newIndex: index2 - 1,
           storeUploadPathChangeRequired: true
         });
       }
       return;
     }
     if (btnType === ARROW_DOWN) {
-      if (index === pathList.length - 1) return;
-      if (allowTogglePaths([index, index + 1])) {
-        // Sending path indices and storeUploadPathChangeRequired flag as per the requirements in journey
-        setPathList(swapArrayElements(index, index + 1, pathList), {
-          oldIndex: index,
-          newIndex: index + 1,
+      if (index2 === pathList.length - 1) return;
+      if (allowTogglePaths([index2, index2 + 1])) {
+        setPathList(swapArrayElements(index2, index2 + 1, pathList), {
+          oldIndex: index2,
+          newIndex: index2 + 1,
           storeUploadPathChangeRequired: true
         });
       }
     }
   };
-
-  /**
-   * Swap Array element at ith position with element at jth position and returns
-   * new Array.
-   * @param {*} i
-   * @param {*} j
-   * @param {*} arr
-   * @returns
-   */
-
-  var swapArrayElements = (i, j, arr) => {
-    var newArr = cloneDeep(arr);
+  const swapArrayElements = (i, j, arr) => {
+    const newArr = cloneDeep(arr);
     newArr[j] = arr[i];
     newArr[i] = arr[j];
     return newArr;
   };
-
-  /**
-   *
-   * @param {*} index
-   * @returns Up and Down arrow icons to toggle position of Path component
-   */
-  var TogglePositionIcons = _ref => {
-    var {
-      index
-    } = _ref;
-    var onClickUp = () => togglePosition(ARROW_UP, index);
-    var onClickDown = () => togglePosition(ARROW_DOWN, index);
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(StyledArrowIcon, {
-        disabled: checkDisabled(ARROW_UP, index),
-        type: ARROW_UP,
-        onClick: onClickUp
-      }), /*#__PURE__*/_jsx(StyledArrowIcon, {
-        disabled: checkDisabled(ARROW_DOWN, index),
-        type: ARROW_DOWN,
-        onClick: onClickDown
-      })]
-    });
+  const TogglePositionIcons = ({ index: index2 }) => {
+    const onClickUp = () => togglePosition(ARROW_UP, index2);
+    const onClickDown = () => togglePosition(ARROW_DOWN, index2);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        StyledArrowIcon,
+        {
+          disabled: checkDisabled(ARROW_UP, index2),
+          type: ARROW_UP,
+          onClick: onClickUp
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StyledArrowIcon,
+        {
+          disabled: checkDisabled(ARROW_DOWN, index2),
+          type: ARROW_DOWN,
+          onClick: onClickDown
+        }
+      )
+    ] });
   };
-
-  /**
-   *
-   * @param {*} type
-   * @returns Returns a vertical or horizontal line to connect different components
-   */
-  var getPathConnector = type => {
+  const getPathConnector = (type) => {
     if (type === VERTICAL) {
-      /**
-       * <PathConnector> is basically a div
-       * if isToggleEnabled, set a left margin of 32px
-       * and give a width equal to 85% of CapBlockWidth
-       */
-      var marginLeft = isToggleEnabled ? '32px' : '0px';
-      var width = parseInt(capBlockWidth * 0.85, 10);
-      return /*#__PURE__*/_jsx(PathConnector, {
-        type: VERTICAL,
-        height: "44px",
-        marginLeft: marginLeft,
-        width: width + "px"
-      });
+      const marginLeft = isToggleEnabled ? "32px" : "0px";
+      const width = parseInt(capBlockWidth * 0.85, 10);
+      return /* @__PURE__ */ jsx(PathConnector, { type: VERTICAL, height: "44px", marginLeft, width: `${width}px` });
     }
-    return /*#__PURE__*/_jsx(PathConnector, {
-      type: HORIZONTAL,
-      width: "24px"
-    });
+    return /* @__PURE__ */ jsx(PathConnector, { type: HORIZONTAL, width: "24px" });
   };
-
-  /**
-   * onPathNameClick : If PathName is clicked. Display InputBox.TextArea instead of text.
-   * setIndexOfPathEditEnabled with index of path.
-   * @param {*} index
-   */
-  var onPathNameClick = index => {
-    setIndexOfPathEditEnabled(index);
+  const onPathNameClick = (index2) => {
+    setIndexOfPathEditEnabled(index2);
   };
-
-  /**
-   * updatePathName : OnChange handler for updating pathname.
-   * @param {*} index
-   * @param {*} value
-   */
-  var updatePathName = (index, value) => {
-    var newPaths = cloneDeep(pathList);
-    newPaths[index].pathName = value;
+  const updatePathName = (index2, value) => {
+    const newPaths = cloneDeep(pathList);
+    newPaths[index2].pathName = value;
     setPathList(newPaths);
     setIsPathNameDuplicateOrEmpty(false);
   };
-  var onDeleteOk = () => {
+  const onDeleteOk = () => {
     deletePath(deletePathIndex);
     setDeletePathIndex(null);
     setShowDeleteConfirmation(false);
   };
-
-  /**
-   * getPathNameOrEdit :
-   * If Pathname is currently being edited (when index === indexOfPathEditEnabled),
-   * then display a InputBox
-   * else
-   * Display Text
-   * @param {*} index
-   */
-  var getPathNameOrEdit = index => {
-    var _pathList$index2;
-    var onClick = () => onPathNameClick(index);
-    var onTextAreaChange = e => {
+  const getPathNameOrEdit = (index2) => {
+    var _a2;
+    const onClick = () => onPathNameClick(index2);
+    const onTextAreaChange = (e) => {
       if (e.target.value.length <= PATH_NAME_MAX_LENGTH) {
         setTempPathName(e.target.value);
         checkDuplicateOrEmptyPathName(e.target.value);
       }
     };
-    var style = {
-      marginTop: indexOfPathEditEnabled === index && '-16px'
-    };
-    return /*#__PURE__*/_jsxs(CapRow, {
-      style: style,
-      children: [/*#__PURE__*/_jsx(StyledPathNamePlaceHolder, {
-        children: pathList[index].pathName || indexOfPathEditEnabled === index ? getPathNamePlaceHolder(index) : null
-      }), indexOfPathEditEnabled === index ? /*#__PURE__*/_jsx(StyledPathInput, {
-        hasError: isPathNameDuplicateOrEmpty,
-        children: /*#__PURE__*/_jsx(CapInput.TextArea, {
+    const style = { marginTop: indexOfPathEditEnabled === index2 && "-16px" };
+    return /* @__PURE__ */ jsxs(CapRow, { style, children: [
+      /* @__PURE__ */ jsx(StyledPathNamePlaceHolder, { children: pathList[index2].pathName || indexOfPathEditEnabled === index2 ? getPathNamePlaceHolder(index2) : null }),
+      indexOfPathEditEnabled === index2 ? /* @__PURE__ */ jsx(StyledPathInput, { hasError: isPathNameDuplicateOrEmpty, children: /* @__PURE__ */ jsx(
+        InputFinal.TextArea,
+        {
           "path-name-edit": "true",
           value: tempPathName,
           onChange: onTextAreaChange,
-          style: {
-            width: '80px'
-          },
+          style: { width: "80px" },
           autosize: {
             minRows: 1,
             maxRows: 5
@@ -313,213 +203,164 @@ var CapMultiplePath = props => {
           onBlur: onPathNameClickOutside,
           onPressEnter: onPressEnterCall,
           onFocus: () => {
-            var _pathList$index;
-            setTempPathName((_pathList$index = pathList[index]) == null ? void 0 : _pathList$index.pathName);
+            var _a3;
+            setTempPathName((_a3 = pathList[index2]) == null ? void 0 : _a3.pathName);
           },
           autoFocus: true,
           showCount: false
-        })
-      }) : /*#__PURE__*/_jsx(StyledPathNameHolder, {
-        children: /*#__PURE__*/_jsx(CapTooltip, {
-          title: (_pathList$index2 = pathList[index]) == null ? void 0 : _pathList$index2.pathName,
-          children: /*#__PURE__*/_jsx(CapRow, {
-            "path-name-edit": "false",
-            onClick: onClick,
-            children: pathList[index].pathName || getPathNamePlaceHolder(index)
-          })
-        })
-      })]
-    });
+        }
+      ) }) : /* @__PURE__ */ jsx(StyledPathNameHolder, { children: /* @__PURE__ */ jsx(CapTooltip, { title: (_a2 = pathList[index2]) == null ? void 0 : _a2.pathName, children: /* @__PURE__ */ jsx(CapRow, { "path-name-edit": "false", onClick, children: pathList[index2].pathName || getPathNamePlaceHolder(index2) }) }) })
+    ] });
   };
-
-  /**
-   *
-   * @returns A component which can be used to add another Path at end
-   */
-  var getAddPathComponent = () => {
-    /**
-     * set marginLeft equal to 85% of capBlockWidth
-     * if isToggleEnabled add extra 32px marginLeft
-     */
-    var marginLeft = parseInt(capBlockWidth * 0.85, 10);
+  const getAddPathComponent = () => {
+    let marginLeft = parseInt(capBlockWidth * 0.85, 10);
     marginLeft = isToggleEnabled ? marginLeft + 32 : marginLeft;
-
-    /**
-     * After the last vertical line, the structure is as follows:
-     * --------Path n--------->
-     * horizontalLineWidth, denotes the width of two horizontal lines,
-     * Remaining 15% capBlockWidth is divided equally into two horizontal lines
-     * and 24px are added to each.(Since all horizontal lines above the last had 24px width)
-     */
-    var horizontalLineWidth = parseInt(capBlockWidth * 0.075 + 24, 10);
-    var capAddPathRender = /*#__PURE__*/_jsx("span", {
-      className: "button-disabled-tooltip-wrapper",
-      children: /*#__PURE__*/_jsx(CapButton, {
+    const horizontalLineWidth = parseInt(capBlockWidth * 0.075 + 24, 10);
+    const capAddPathRender = /* @__PURE__ */ jsx("span", { className: "button-disabled-tooltip-wrapper", children: /* @__PURE__ */ jsx(
+      CapButton,
+      {
         type: "flat",
         isAddBtn: true,
-        style: {
-          transform: 'translateX(-50%)'
-        },
+        style: { transform: "translateX(-50%)" },
         onClick: addPath,
         disabled: addPathDisabled,
         children: addPathMessage
-      })
-    });
-    return /*#__PURE__*/_jsxs(StyledAddPath, {
-      marginLeft: marginLeft + "px",
-      children: [/*#__PURE__*/_jsx(PathConnector, {
-        type: VERTICAL,
-        borderType: BORDER_DASHED,
-        height: "44px",
-        borderWidth: "2px"
-      }), addPathDisabled ? /*#__PURE__*/_jsx(CapTooltip, {
-        placement: "top",
-        title: addPathDisabledMessage,
-        align: {
-          offset: [-50, 0]
-        },
-        children: capAddPathRender
-      }) : capAddPathRender, /*#__PURE__*/_jsx(PathConnector, {
-        type: VERTICAL,
-        borderType: BORDER_DASHED,
-        height: "44px",
-        borderWidth: "2px"
-      }), /*#__PURE__*/_jsxs(CapRow, {
-        type: "flex",
-        align: "middle",
-        style: {
-          transform: 'translateY(-50%)'
-        },
-        children: [
-        /**
-         * If addPathDisabled, show only horizontal line.
-         */
-        addPathDisabled ? /*#__PURE__*/_jsx(PathConnector, {
-          type: HORIZONTAL,
-          borderType: BORDER_DASHED,
-          width: horizontalLineWidth * 2 + 80 + "px",
-          borderWidth: "2px"
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(PathConnector, {
-            type: HORIZONTAL,
-            borderType: BORDER_DASHED,
-            width: horizontalLineWidth + "px",
-            borderWidth: "2px"
-          }), /*#__PURE__*/_jsx(StyledPathNameHolder, {
-            style: {
-              textAlign: 'center'
-            },
-            children: pathList.length === 1 ? noMsg : pathMsg + " " + (pathList.length + 1)
-          }), /*#__PURE__*/_jsx(PathConnector, {
-            type: HORIZONTAL,
-            borderType: BORDER_DASHED,
-            width: horizontalLineWidth + "px",
-            borderWidth: "2px"
-          })]
-        }), /*#__PURE__*/_jsx(StyledCapIcon, {
-          type: "chevron-right",
-          color: CAP_G07,
+      }
+    ) });
+    return /* @__PURE__ */ jsxs(StyledAddPath, { marginLeft: `${marginLeft}px`, children: [
+      /* @__PURE__ */ jsx(PathConnector, { type: VERTICAL, borderType: BORDER_DASHED, height: "44px", borderWidth: "2px" }),
+      addPathDisabled ? /* @__PURE__ */ jsx(CapTooltip, { placement: "top", title: addPathDisabledMessage, align: { offset: [-50, 0] }, children: capAddPathRender }) : capAddPathRender,
+      /* @__PURE__ */ jsx(PathConnector, { type: VERTICAL, borderType: BORDER_DASHED, height: "44px", borderWidth: "2px" }),
+      /* @__PURE__ */ jsxs(
+        CapRow,
+        {
+          type: "flex",
+          align: "middle",
           style: {
-            transform: 'translateX(-50%)'
-          }
-        })]
-      })]
-    });
+            transform: "translateY(-50%)"
+          },
+          /**
+           * If addPathDisabled, show only horizontal line.
+           */
+          children: [
+            addPathDisabled ? /* @__PURE__ */ jsx(
+              PathConnector,
+              {
+                type: HORIZONTAL,
+                borderType: BORDER_DASHED,
+                width: `${horizontalLineWidth * 2 + 80}px`,
+                borderWidth: "2px"
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                PathConnector,
+                {
+                  type: HORIZONTAL,
+                  borderType: BORDER_DASHED,
+                  width: `${horizontalLineWidth}px`,
+                  borderWidth: "2px"
+                }
+              ),
+              /* @__PURE__ */ jsx(StyledPathNameHolder, { style: { textAlign: "center" }, children: pathList.length === 1 ? noMsg : `${pathMsg} ${pathList.length + 1}` }),
+              /* @__PURE__ */ jsx(
+                PathConnector,
+                {
+                  type: HORIZONTAL,
+                  borderType: BORDER_DASHED,
+                  width: `${horizontalLineWidth}px`,
+                  borderWidth: "2px"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              StyledCapIcon,
+              {
+                type: "chevron-right",
+                color: CAP_G07,
+                style: { transform: "translateX(-50%)" }
+              }
+            )
+          ]
+        }
+      )
+    ] });
   };
-
-  /**
-   * returns PathNamePlaceHolder : if 1 Path : return Yes,
-   * if more than 1 path : return Path 1, Path 2 and so on.
-   */
-  var getPathNamePlaceHolder = index => {
-    if (index === 0 && pathList.length === 1) return yesMsg;
-    return pathMsg + " " + (index + 1);
+  const getPathNamePlaceHolder = (index2) => {
+    if (index2 === 0 && pathList.length === 1) return yesMsg;
+    return `${pathMsg} ${index2 + 1}`;
   };
-
-  /**
-   * After CapBlock give a Arrow like structure with PathName details in between.
-   * @param {*} index
-   */
-  var getEditOrDisplayPathName = index => /*#__PURE__*/_jsxs(CapRow, {
-    type: "flex",
-    align: "middle",
-    children: [getPathConnector(HORIZONTAL), getPathNameOrEdit(index), getPathConnector(HORIZONTAL), /*#__PURE__*/_jsx(StyledCapIcon, {
-      color: CAP_G07,
-      type: "chevron-right",
-      style: {
-        transform: 'translateX(-50%)'
+  const getEditOrDisplayPathName = (index2) => /* @__PURE__ */ jsxs(CapRow, { type: "flex", align: "middle", children: [
+    getPathConnector(HORIZONTAL),
+    getPathNameOrEdit(index2),
+    getPathConnector(HORIZONTAL),
+    /* @__PURE__ */ jsx(
+      StyledCapIcon,
+      {
+        color: CAP_G07,
+        type: "chevron-right",
+        style: { transform: "translateX(-50%)" }
       }
-    })]
-  });
-
-  /**
-   * Gives skeleton structure using CapBlock.
-   * CapBlock displays contents inside it using 'ContentsRenderer' received from parent.
-   * @param {*} index
-   * @param {*} path
-   * @returns A Rectangle shaped Path Component.
-   */
-  var getPathComponent = index => {
-    var _pathList$index3, _pathList$index4;
-    var deleteCallback = () => {
+    )
+  ] });
+  const getPathComponent = (index2) => {
+    var _a2, _b, _c;
+    const deleteCallback = () => {
       setShowDeleteConfirmation(true);
-      setDeletePathIndex(index);
+      setDeletePathIndex(index2);
     };
-    return /*#__PURE__*/_jsx(CapBlock, {
-      isDeleteEnabled: !hideDeleteBtn && (pathList == null ? void 0 : pathList.length) > 1,
-      deleteCallback: deleteCallback,
-      isCollapseEnabled: !hideCollapseBtn,
-      width: capBlockWidth + "px",
-      borderLeftColor: customLeftBorderColor ? customLeftBorderColor : pathBlockColorMapping == null ? void 0 : pathBlockColorMapping[(_pathList$index3 = pathList[index]) == null || (_pathList$index3 = _pathList$index3.contents) == null ? void 0 : _pathList$index3.operator],
-      pathBlockText: (_pathList$index4 = pathList[index]) == null ? void 0 : _pathList$index4.pathBlockText,
-      children: /*#__PURE__*/_jsx(ContentsRenderer, _extends({
-        pathList: pathList,
-        setPathList: setPathList,
-        pathIndex: index
-      }, contentsRendererProps))
-    });
+    return /* @__PURE__ */ jsx(
+      CapBlock,
+      {
+        isDeleteEnabled: !hideDeleteBtn && (pathList == null ? void 0 : pathList.length) > 1,
+        deleteCallback,
+        isCollapseEnabled: !hideCollapseBtn,
+        width: `${capBlockWidth}px`,
+        borderLeftColor: customLeftBorderColor ? customLeftBorderColor : pathBlockColorMapping == null ? void 0 : pathBlockColorMapping[(_b = (_a2 = pathList[index2]) == null ? void 0 : _a2.contents) == null ? void 0 : _b.operator],
+        pathBlockText: (_c = pathList[index2]) == null ? void 0 : _c.pathBlockText,
+        children: /* @__PURE__ */ jsx(
+          ContentsRenderer,
+          {
+            pathList,
+            setPathList,
+            pathIndex: index2,
+            ...contentsRendererProps
+          }
+        )
+      }
+    );
   };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [pathList.map((path, index) => /*#__PURE__*/_jsxs(CapRow, {
-      children: [/*#__PURE__*/_jsxs(MultiplePathRowWrapper, {
-        children: [isToggleEnabled ? /*#__PURE__*/_jsx(TogglePositionIcons, {
-          index: index
-        }) : null, getPathComponent(index), !isSinglePath && getEditOrDisplayPathName(index)]
-      }), index !== pathList.length - 1 ? getPathConnector(VERTICAL) : null]
-    }, path.id)), !isSinglePath && getAddPathComponent(), /*#__PURE__*/_jsxs(CapModal, {
-      visible: showDeleteConfirmation,
-      onCancel: () => {
-        setShowDeleteConfirmation(false);
-        setDeletePathIndex(null);
-      },
-      onOk: onDeleteOk,
-      title: deleteConfirmationTitleMsg,
-      okText: deleteButtonTextMsg,
-      children: [/*#__PURE__*/_jsxs(CapRow, {
-        style: {
-          marginBottom: '8px'
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    pathList.map((path, index2) => /* @__PURE__ */ jsxs(CapRow, { children: [
+      /* @__PURE__ */ jsxs(MultiplePathRowWrapper, { children: [
+        isToggleEnabled ? /* @__PURE__ */ jsx(TogglePositionIcons, { index: index2 }) : null,
+        getPathComponent(index2),
+        !isSinglePath && getEditOrDisplayPathName(index2)
+      ] }),
+      index2 !== pathList.length - 1 ? getPathConnector(VERTICAL) : null
+    ] }, path.id)),
+    !isSinglePath && getAddPathComponent(),
+    /* @__PURE__ */ jsxs(
+      CapModalWithHoc,
+      {
+        visible: showDeleteConfirmation,
+        onCancel: () => {
+          setShowDeleteConfirmation(false);
+          setDeletePathIndex(null);
         },
-        children: [/*#__PURE__*/_jsx(CapLabelInline, {
-          type: "label9",
-          children: deleteConfirmationTextMsg + " "
-        }), /*#__PURE__*/_jsx("q", {
-          children: /*#__PURE__*/_jsx(CapLabelInline, {
-            type: "label8",
-            children: ((_pathList$deletePathI = pathList[deletePathIndex]) == null ? void 0 : _pathList$deletePathI.pathName) || pathMsg + " " + (deletePathIndex + 1)
-          })
-        }), /*#__PURE__*/_jsx(CapLabelInline, {
-          type: "label9",
-          children: " ?"
-        })]
-      }), /*#__PURE__*/_jsx(CapLabel, {
-        style: {
-          marginBottom: '8px'
-        },
-        type: "label9",
-        children: deleteConfirmationWarningMsg
-      })]
-    })]
-  });
+        onOk: onDeleteOk,
+        title: deleteConfirmationTitleMsg,
+        okText: deleteButtonTextMsg,
+        children: [
+          /* @__PURE__ */ jsxs(CapRow, { style: { marginBottom: "8px" }, children: [
+            /* @__PURE__ */ jsx(CapLabelInline, { type: "label9", children: `${deleteConfirmationTextMsg} ` }),
+            /* @__PURE__ */ jsx("q", { children: /* @__PURE__ */ jsx(CapLabelInline, { type: "label8", children: ((_a = pathList[deletePathIndex]) == null ? void 0 : _a.pathName) || `${pathMsg} ${deletePathIndex + 1}` }) }),
+            /* @__PURE__ */ jsx(CapLabelInline, { type: "label9", children: " ?" })
+          ] }),
+          /* @__PURE__ */ jsx(CapLabelWithStatic, { style: { marginBottom: "8px" }, type: "label9", children: deleteConfirmationWarningMsg })
+        ]
+      }
+    )
+  ] });
 };
 CapMultiplePath.propTypes = {
   pathList: PropTypes.array,
@@ -551,15 +392,16 @@ CapMultiplePath.defaultProps = {
   isToggleEnabled: true,
   addPathDisabled: false,
   capBlockWidth: 676,
-  notUniqueMsg: '',
+  notUniqueMsg: "",
   isSinglePath: false,
   continueAddPath: () => true,
   allowDeletePath: () => true,
   allowTogglePaths: () => true,
   hideDeleteBtn: false,
   hideCollapseBtn: false,
-  customLeftBorderColor: ''
+  customLeftBorderColor: ""
+};
+const index = LocaleHoc(CapMultiplePath, { key: "CapMultiplePath" });
+export {
+  index as default
 };
-export default LocaleHoc(CapMultiplePath, {
-  key: 'CapMultiplePath'
-});