@vitrosoftware/common-ui-ts 1.1.258 → 1.1.260

package/dist/index.js

@@ -22737,20 +22737,25 @@ var TelerikUploaderServiceImpl = /*#__PURE__*/function () {
       var fileList = [];
       var length = items.length;
       var _i = 0;
-      var _temp3 = _for(function () {
+      var _temp4 = _for(function () {
         return _i < length;
       }, function () {
         return _i++;
       }, function () {
         var item = items[_i];
-        return Promise.resolve(_this5.initFileList(item)).then(function (subFileList) {
-          for (var _iterator2 = _createForOfIteratorHelperLoose(subFileList), _step2; !(_step2 = _iterator2()).done;) {
-            var subFile = _step2.value;
-            fileList.push(subFile);
+        var _temp3 = function () {
+          if (item) {
+            return Promise.resolve(_this5.initFileList(item)).then(function (subFileList) {
+              for (var _iterator2 = _createForOfIteratorHelperLoose(subFileList), _step2; !(_step2 = _iterator2()).done;) {
+                var subFile = _step2.value;
+                fileList.push(subFile);
+              }
+            });
           }
-        });
+        }();
+        if (_temp3 && _temp3.then) return _temp3.then(function () {});
       });
-      return Promise.resolve(_temp3 && _temp3.then ? _temp3.then(function () {
+      return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(function () {
         return fileList;
       }) : fileList);
     } catch (e) {
@@ -22806,15 +22811,31 @@ var ProgressBar = React.forwardRef(function (props, ref) {
 var UNIT = function UNIT() {};
 UNIT.PX = 'px';
 
-var styles$8 = {"vitro-flex-row":"_flex-box_vitro-flex-row_2kWIov_","vitro-flex-column":"_flex-box_vitro-flex-column_2TWAp5t"};
+var styles$8 = {"vitro-flex-row":"_flex-box_vitro-flex-row_2kWIov_","vitro-flex-column":"_flex-box_vitro-flex-column_2TWAp5t","vitro-full-width":"_flex-box_vitro-full-width_3Ab4IAg","vitro-full-height":"_flex-box_vitro-full-height_2N1FKQH","vitro-wrap":"_flex-box_vitro-wrap_1h7g_oL"};
 
 var FlexBox = React.forwardRef(function (props, ref) {
+  var getClassName = function getClassName() {
+    var classList = [props.isColumn ? styles$8['vitro-flex-column'] : styles$8['vitro-flex-row']];
+    if (props.isFullWidth) {
+      classList.push(styles$8['vitro-full-width']);
+    }
+    if (props.isFullHeight) {
+      classList.push(styles$8['vitro-full-height']);
+    }
+    if (props.isWrap) {
+      classList.push(styles$8['vitro-wrap']);
+    }
+    if (props.className) {
+      classList.push(props.className);
+    }
+    return classList.join(CTRL.SPACE);
+  };
   return React__default.createElement("div", Object.assign({}, props, {
     ref: ref,
     style: props.gap ? _extends({}, props.style, {
       gridGap: props.gap + UNIT.PX
     }) : _extends({}, props.style),
-    className: [props.isColumn ? styles$8['vitro-flex-column'] : styles$8['vitro-flex-row'], props.className || CTRL.EMPTY].join(CTRL.SPACE)
+    className: getClassName()
   }), props.children);
 });
 
@@ -60162,7 +60183,7 @@ var Tooltip$1 = function Tooltip(props) {
       style: props.style,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave
-    }, React__default.createElement(ScrollBar, null, props.isRichText ? React__default.createElement("p", {
+    }, React__default.createElement(ScrollBar, null, props.isRichText && typeof props.text === 'string' ? React__default.createElement("p", {
       dangerouslySetInnerHTML: {
         __html: props.text
       }
@@ -60656,20 +60677,22 @@ var ConfirmDialog = function ConfirmDialog(props) {
   }, props.text && React__default.createElement(DialogContent, null, props.text));
 };
 
+var TARGET$1 = function TARGET() {};
+TARGET$1.BLANK = '_blank';
+TARGET$1.SELF = '_self';
+
 var styles$n = {"vitro-link":"_link_vitro-link_2ePaXvd"};
 
-var Link = function Link(props) {
+var Link = React.forwardRef(function (props, ref) {
   return React__default.createElement("a", {
     className: styles$n['vitro-link'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     href: props.href,
     onClick: props.href ? function () {} : props.onClick,
-    target: props.target
+    target: props.isTargetBlank ? TARGET$1.BLANK : props.target,
+    ref: ref,
+    style: props.style
   }, props.text);
-};
-
-var TARGET$1 = function TARGET() {};
-TARGET$1.BLANK = '_blank';
-TARGET$1.SELF = '_self';
+});
 
 var styles$o = {"vitro-action-result-list":"_action-result-list_vitro-action-result-list_fJtJWdL","vitro-scrollbar":"_action-result-list_vitro-scrollbar_1mcualw","vitro-result-item":"_action-result-list_vitro-result-item_2AUSpie","vitro-image-container":"_action-result-list_vitro-image-container_ModalRS","vitro-flex-column":"_action-result-list_vitro-flex-column_3z0h2Y_","vitro-name":"_action-result-list_vitro-name_10TEfnU","vitro-error-message":"_action-result-list_vitro-error-message_12OqWLU","vitro-success-message":"_action-result-list_vitro-success-message_1yRyyKc","vitro-warning-message":"_action-result-list_vitro-warning-message_2UEX9Kp","vitro-image-success":"_action-result-list_vitro-image-success_2ovrZNi","vitro-image-error":"_action-result-list_vitro-image-error_KGQj2dj","vitro-image-warning":"_action-result-list_vitro-image-warning_3SKqDID","vitro-hidden":"_action-result-list_vitro-hidden_1_bZmps","vitro-visible":"_action-result-list_vitro-visible_2K_m-HH","vitro-link-list":"_action-result-list_vitro-link-list_2mScWX3","vitro-link":"_action-result-list_vitro-link_1xl-Pq-"};
 
@@ -61182,7 +61205,7 @@ var ActionHandler = function ActionHandler(props) {
   }));
 };
 
-var styles$q = {"vitro-dropdown-button-container":"_dropdown-button_vitro-dropdown-button-container_zx8iZtY","vitro-dropdown-toggle":"_dropdown-button_vitro-dropdown-toggle_-Nj8qLe","vitro-dropdown-menu":"_dropdown-button_vitro-dropdown-menu_2B1Wr1Y","vitro-right":"_dropdown-button_vitro-right_gHoXO9n","vitro-dropdown-button-item":"_dropdown-button_vitro-dropdown-button-item_2XZNxoG","vitro-dropdown-button-dropdown-item":"_dropdown-button_vitro-dropdown-button-dropdown-item_3Nwnp_-","vitro-image-container":"_dropdown-button_vitro-image-container_3Kf-a2A","vitro-button-collapse-bottom":"_dropdown-button_vitro-button-collapse-bottom_Ivm3AkU","vitro-image":"_dropdown-button_vitro-image_3bX1quk","vitro-scrollbar":"_dropdown-button_vitro-scrollbar_2DCwQvu","vitro-separator":"_dropdown-button_vitro-separator_3UJOlCk","vitro-dropdown-button-dropdown-item-menu":"_dropdown-button_vitro-dropdown-button-dropdown-item-menu_39eSYtN"};
+var styles$q = {"vitro-dropdown-button-container":"_dropdown-button_vitro-dropdown-button-container_zx8iZtY","vitro-dropdown-toggle":"_dropdown-button_vitro-dropdown-toggle_-Nj8qLe","vitro-dropdown-menu":"_dropdown-button_vitro-dropdown-menu_2B1Wr1Y","vitro-right":"_dropdown-button_vitro-right_gHoXO9n","vitro-dropdown-button-item":"_dropdown-button_vitro-dropdown-button-item_2XZNxoG","vitro-dropdown-button-dropdown-item":"_dropdown-button_vitro-dropdown-button-dropdown-item_3Nwnp_-","vitro-image-container":"_dropdown-button_vitro-image-container_3Kf-a2A","vitro-button-collapse-bottom":"_dropdown-button_vitro-button-collapse-bottom_Ivm3AkU","vitro-image":"_dropdown-button_vitro-image_3bX1quk","vitro-scrollbar":"_dropdown-button_vitro-scrollbar_2DCwQvu","vitro-separator":"_dropdown-button_vitro-separator_3UJOlCk","vitro-dropdown-button-dropdown-item-menu":"_dropdown-button_vitro-dropdown-button-dropdown-item-menu_39eSYtN","vitro-compact-view":"_dropdown-button_vitro-compact-view_2GdpKud"};
 
 var DropdownButtonItem = function DropdownButtonItem(props) {
   var onClick = function onClick(e) {
@@ -61343,28 +61366,62 @@ var DropdownToggleContent = function DropdownToggleContent(props) {
 };
 
 var DropdownButton = React.forwardRef(function (props, ref) {
-  var _props$itemList;
   var _useState = React.useState(false),
     isShow = _useState[0],
     setIsShow = _useState[1];
   var _useState2 = React.useState(false),
     isRight = _useState2[0],
     setIsRight = _useState2[1];
-  var isShowImage = (_props$itemList = props.itemList) !== null && _props$itemList !== void 0 && _props$itemList.find(function (item) {
-    return item.imageUrl;
-  }) ? true : false;
-  var onClick = function onClick(e) {
-    var value = !isShow;
-    setIsShow(value);
-    if (props.onClick) {
-      props.onClick(e, value);
+  var _useState3 = React.useState(props.itemList || []),
+    itemList = _useState3[0],
+    setItemList = _useState3[1];
+  var _useState4 = React.useState(props.itemList ? true : false),
+    isItemListLoaded = _useState4[0],
+    setIsItemListLoaded = _useState4[1];
+  var _useState5 = React.useState(true),
+    isShowImage = _useState5[0],
+    setIsShowImage = _useState5[1];
+  React.useEffect(function () {
+    setIsShowImage(itemList !== null && itemList !== void 0 && itemList.find(function (item) {
+      return item.imageUrl;
+    }) ? true : false);
+  }, [itemList]);
+  React.useEffect(function () {
+    if (props.itemList) {
+      setItemList(props.itemList);
+      setIsItemListLoaded(true);
     } else {
-      var event = new CustomEvent(exports.EVENT.COMMAND_MENU_TOGGLE, {
-        detail: {
-          isToggle: true
+      setItemList([]);
+      setIsItemListLoaded(false);
+    }
+  }, [props.itemList]);
+  var onClick = function onClick(e) {
+    try {
+      var _temp2 = function _temp2() {
+        var value = !isShow;
+        setIsShow(value);
+        if (props.onClick) {
+          props.onClick(e, value);
+        } else {
+          var event = new CustomEvent(exports.EVENT.COMMAND_MENU_TOGGLE, {
+            detail: {
+              isToggle: true
+            }
+          });
+          window.dispatchEvent(event);
         }
-      });
-      window.dispatchEvent(event);
+      };
+      var _temp = function () {
+        if (props.getItemList && !isItemListLoaded) {
+          return Promise.resolve(props.getItemList()).then(function (list) {
+            setItemList(list);
+            setIsItemListLoaded(true);
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(_temp2) : _temp2(_temp));
+    } catch (e) {
+      return Promise.reject(e);
     }
   };
   return React__default.createElement(Dropdown, {
@@ -61373,8 +61430,8 @@ var DropdownButton = React.forwardRef(function (props, ref) {
     isRight: isRight,
     isInNavbar: props.isInNavbar,
     className: styles$q['vitro-dropdown-button-container'] + (props.containerClassName ? CTRL.SPACE + props.containerClassName : CTRL.EMPTY),
-    toggleClassName: props.className,
-    menuClassName: props.menuClassName,
+    toggleClassName: props.className + (props.isCompactView ? CTRL.SPACE + styles$q['vitro-compact-view'] : CTRL.EMPTY),
+    menuClassName: props.menuClassName + (props.isCompactView ? CTRL.SPACE + styles$q['vitro-compact-view'] : CTRL.EMPTY),
     menuContainer: props.menuContainer,
     onGetMenuRef: props.onGetMenuRef,
     placement: props.placement,
@@ -61382,7 +61439,7 @@ var DropdownButton = React.forwardRef(function (props, ref) {
       className: undefined,
       setIsRight: setIsRight
     }))
-  }, props.itemList && props.itemList.length !== 0 && props.itemList.map(function (item) {
+  }, itemList && itemList.length !== 0 && itemList.map(function (item) {
     if (item.itemList) {
       return React__default.createElement(_DropdownButtonDropdownItem, Object.assign({}, item));
     }
@@ -61524,15 +61581,17 @@ var ValueTooltip = React.forwardRef(function (props, ref) {
     return container.clientHeight + 1 < container.scrollHeight;
   };
   var getTextWidth = function getTextWidth(text, font, scrollWidth) {
-    if (!canvasRef.current) {
-      canvasRef.current = document.createElement('canvas');
-    }
-    var canvas = canvasRef.current;
-    var context = canvas.getContext('2d');
-    if (context) {
-      context.font = font;
-      var metrics = context.measureText(text);
-      return metrics.width;
+    if (typeof text === 'string') {
+      if (!canvasRef.current) {
+        canvasRef.current = document.createElement('canvas');
+      }
+      var canvas = canvasRef.current;
+      var context = canvas.getContext('2d');
+      if (context) {
+        context.font = font;
+        var metrics = context.measureText(text);
+        return metrics.width;
+      }
     }
     return scrollWidth;
   };
@@ -67699,7 +67758,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.258";
+var version$1 = "1.1.260";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -86820,10 +86879,307 @@ var Icon = function Icon(props) {
   }
   return React__default.createElement("div", {
     style: style,
-    className: props.style ? CTRL.EMPTY : styles$22['vitro-icon-default']
+    className: (props.style ? CTRL.EMPTY : styles$22['vitro-icon-default']) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   });
 };
 
+var styles$23 = {"vitro-workflow-route-task":"_workflow-route-task_vitro-workflow-route-task_s9KlfUa","vitro-workflow-route-task-mobile":"_workflow-route-task_vitro-workflow-route-task-mobile_1sahTAH","vitro-link":"_workflow-route-task_vitro-link_2tS5zX0","vitro-right":"_workflow-route-task_vitro-right_iJRgs4i","vitro-user-container":"_workflow-route-task_vitro-user-container_1gdonRr","vitro-user-list-container":"_workflow-route-task_vitro-user-list-container_33ry81_","vitro-end-date-fact-container":"_workflow-route-task_vitro-end-date-fact-container_2Lgf_dN","vitro-end-date-plan":"_workflow-route-task_vitro-end-date-plan_-UEwN9v","vitro-end-date-fact":"_workflow-route-task_vitro-end-date-fact_1ZRyVGc","vitro-expired":"_workflow-route-task_vitro-expired_8V5Pjkv","vitro-dropdown-button-container":"_workflow-route-task_vitro-dropdown-button-container_YymV91e","vitro-toggle-comment":"_workflow-route-task_vitro-toggle-comment_1RUySd9","vitro-toggle-comment-active":"_workflow-route-task_vitro-toggle-comment-active_27jENPe","vitro-assigned-to":"_workflow-route-task_vitro-assigned-to_11Ds0v5","vitro-assigned-to-fact":"_workflow-route-task_vitro-assigned-to-fact_2VHoXwX","vitro-assigned-to-list":"_workflow-route-task_vitro-assigned-to-list_2Wk_aFi","vitro-issue":"_workflow-route-task_vitro-issue_2h-dEkP","vitro-icon-container":"_workflow-route-task_vitro-icon-container_2_0Mn4f","vitro-status-icon":"_workflow-route-task_vitro-status-icon_2eFxk15","vitro-status-container":"_workflow-route-task_vitro-status-container_2mg3Tnc","vitro-comment":"_workflow-route-task_vitro-comment_QFyCoao","vitro-comment-container":"_workflow-route-task_vitro-comment-container_346FY3k","vitro-data-container":"_workflow-route-task_vitro-data-container_1xfMmR3","vitro-data-container-mobile":"_workflow-route-task_vitro-data-container-mobile_3ehoX9t","vitro-date-container":"_workflow-route-task_vitro-date-container_hSQMuDR"};
+
+var WorkflowRouteTask = function WorkflowRouteTask(props) {
+  var _useState = React.useState(false),
+    isCommentVisible = _useState[0],
+    setIsCommentVisible = _useState[1];
+  var _useState2 = React.useState(props.idWidth || 0),
+    idWidth = _useState2[0],
+    setIdWidth = _useState2[1];
+  var date = React__default.createElement(React__default.Fragment, null, props.endDatePlan && React__default.createElement(FlexBox, {
+    className: styles$23['vitro-end-date-plan'],
+    gap: 4
+  }, props.endDatePlan), React__default.createElement(FlexBox, {
+    className: styles$23['vitro-end-date-fact-container'],
+    isColumn: true
+  }, props.endDateFact && React__default.createElement(FlexBox, {
+    className: styles$23['vitro-end-date-fact'] + (props.isExpired ? CTRL.SPACE + styles$23['vitro-expired'] : CTRL.EMPTY),
+    gap: 4
+  }, props.endDateFact)));
+  return React__default.createElement(FlexBox, {
+    gap: 8,
+    className: props.isMobileView ? styles$23['vitro-workflow-route-task-mobile'] : styles$23['vitro-workflow-route-task'],
+    isFullWidth: true
+  }, React__default.createElement(FlexBox, {
+    isColumn: true,
+    isFullWidth: true
+  }, React__default.createElement(FlexBox, {
+    className: props.isMobileView ? styles$23['vitro-data-container-mobile'] : styles$23['vitro-data-container'],
+    isFullWidth: true
+  }, React__default.createElement(Link, {
+    text: props.id,
+    href: props.url,
+    className: styles$23['vitro-link'],
+    ref: function ref(_ref) {
+      return _ref && !idWidth && setIdWidth(_ref.clientWidth);
+    },
+    style: idWidth ? {
+      width: idWidth + UNIT.PX
+    } : undefined,
+    isTargetBlank: true
+  }), props.assignedToFact && React__default.createElement(FlexBox, {
+    className: styles$23['vitro-user-container'],
+    gap: 4
+  }, props.assignedToFactLabel ? props.assignedToFactLabel + CTRL.COLON : React__default.createElement(FlexBox, {
+    className: styles$23['vitro-icon-container'],
+    isColumn: true
+  }, React__default.createElement("span", {
+    className: styles$23['vitro-assigned-to-fact']
+  })), React__default.createElement(FlexBox, {
+    gap: 4
+  }, React__default.createElement(Avatar, {
+    userName: props.assignedToFact.name,
+    image: props.assignedToFact.imageUrl
+  }), React__default.createElement("span", null, props.createUserShortFullName ? props.createUserShortFullName(props.assignedToFact.name) : props.assignedToFact.name))), !props.assignedToFact && props.assignedTo && React__default.createElement(FlexBox, {
+    className: styles$23['vitro-user-container'],
+    gap: 4
+  }, props.assignedToLabel ? props.assignedToLabel + CTRL.COLON : React__default.createElement(FlexBox, {
+    className: styles$23['vitro-icon-container'],
+    isColumn: true
+  }, React__default.createElement("span", {
+    className: styles$23['vitro-assigned-to']
+  })), React__default.createElement(FlexBox, {
+    gap: 4
+  }, React__default.createElement(Avatar, {
+    userName: props.assignedTo.name,
+    image: props.assignedTo.imageUrl
+  }), React__default.createElement("span", null, props.createUserShortFullName ? props.createUserShortFullName(props.assignedTo.name) : props.assignedTo.name))), React__default.createElement(FlexBox, {
+    className: styles$23['vitro-right']
+  }, !props.isMobileView && date, props.isIssueButtonContainerVisible && React__default.createElement(FlexBox, {
+    className: styles$23['vitro-icon-container'],
+    isColumn: true
+  }, props.isIssueButtonVisible && React__default.createElement("span", {
+    className: styles$23['vitro-issue']
+  })), props.isCommentButtonContainerVisible && React__default.createElement(FlexBox, {
+    className: styles$23['vitro-icon-container'],
+    isColumn: true
+  }, props.comment && React__default.createElement(ImageButton, {
+    onClick: function onClick() {
+      return setIsCommentVisible(!isCommentVisible);
+    },
+    className: isCommentVisible ? styles$23['vitro-toggle-comment-active'] : styles$23['vitro-toggle-comment']
+  })), React__default.createElement(FlexBox, {
+    className: styles$23['vitro-status-container'],
+    isColumn: true
+  }, props.status && (props.status.color ? React__default.createElement(Tooltip$1, {
+    text: React__default.createElement(FlexBox, {
+      gap: 8
+    }, props.status.color && React__default.createElement(Icon, {
+      color: props.status.color,
+      className: styles$23['vitro-status-icon']
+    }), props.status.name)
+  }, React__default.createElement(FlexBox, null, React__default.createElement(Icon, {
+    color: props.status.color,
+    className: styles$23['vitro-status-icon']
+  }))) : props.status.name)), React__default.createElement(FlexBox, {
+    className: styles$23['vitro-dropdown-button-container']
+  }, props.getDropdownItemList && React__default.createElement(DropdownButton, {
+    getItemList: props.getDropdownItemList,
+    className: STYLE$1.CONTEXT + CTRL.SPACE + styles$23['vitro-dropdown-button'],
+    isCompactView: true
+  })))), props.isMobileView && React__default.createElement(FlexBox, {
+    style: {
+      paddingLeft: idWidth ? idWidth + UNIT.PX : undefined
+    },
+    className: styles$23['vitro-date-container'],
+    isFullWidth: true
+  }, date), props.assignedToList && props.assignedToList.length !== 0 && React__default.createElement(FlexBox, {
+    className: styles$23['vitro-user-list-container'],
+    gap: 4,
+    style: {
+      paddingLeft: idWidth ? idWidth + UNIT.PX : undefined
+    },
+    isFullWidth: true
+  }, props.assignedToListLabel ? props.assignedToListLabel + CTRL.COLON : React__default.createElement(FlexBox, {
+    className: styles$23['vitro-icon-container'],
+    isColumn: true
+  }, React__default.createElement("span", {
+    className: styles$23['vitro-assigned-to-list']
+  })), React__default.createElement(FlexBox, {
+    gap: 4,
+    isFullWidth: true,
+    isWrap: true
+  }, props.assignedToList.map(function (item, index) {
+    return React__default.createElement(FlexBox, {
+      gap: 4,
+      key: index
+    }, React__default.createElement(Avatar, {
+      userName: item.name,
+      image: item.imageUrl
+    }), props.createUserShortFullName ? props.createUserShortFullName(item.name) : item.name);
+  }))), props.comment && isCommentVisible && React__default.createElement(FlexBox, {
+    className: styles$23['vitro-comment-container'],
+    isFullWidth: true
+  }, React__default.createElement("p", {
+    className: styles$23['vitro-comment'],
+    dangerouslySetInnerHTML: {
+      __html: props.comment
+    }
+  }))));
+};
+
+var styles$24 = {"vitro-disabled":"_workflow-route-step_vitro-disabled_3fS250E","vitro-right":"_workflow-route-step_vitro-right_g0dPprY","vitro-workflow-route-step-header":"_workflow-route-step_vitro-workflow-route-step-header_1p1OJgZ","vitro-workflow-route-step-header-mobile":"_workflow-route-step_vitro-workflow-route-step-header-mobile_1NqMXva","vitro-active":"_workflow-route-step_vitro-active_2Fa8NqQ","vitro-workflow-route-step":"_workflow-route-step_vitro-workflow-route-step_38f87gr","vitro-expand-collapse-button":"_workflow-route-step_vitro-expand-collapse-button_2SzZ9Iu","vitro-expand-collapse-button-mobile":"_workflow-route-step_vitro-expand-collapse-button-mobile_2y0xNA8","vitro-dropdown-button-container":"_workflow-route-step_vitro-dropdown-button-container_3jZhGMp","vitro-status-icon":"_workflow-route-step_vitro-status-icon_2vRq55-","vitro-name":"_workflow-route-step_vitro-name_1aPgc9j"};
+
+var WorkflowRouteStepContent = function WorkflowRouteStepContent(props) {
+  if (props.isMobileView) {
+    return React__default.createElement(FlexBox, {
+      className: styles$24['vitro-workflow-route-step-content'],
+      gap: 4,
+      isFullWidth: true,
+      isColumn: true
+    }, React__default.createElement(FlexBox, {
+      gap: 4,
+      isFullWidth: true
+    }, React__default.createElement("span", {
+      className: styles$24['vitro-name']
+    }, props.index !== undefined && props.index + CTRL.DOT + "\xA0", props.name), React__default.createElement(FlexBox, {
+      className: styles$24['vitro-dropdown-button-container'] + CTRL.SPACE + styles$24['vitro-right']
+    }, props.getDropdownItemList && !props.isDisabled && React__default.createElement(DropdownButton, {
+      getItemList: props.getDropdownItemList,
+      className: STYLE$1.CONTEXT + CTRL.SPACE + styles$24['vitro-dropdown-button'],
+      isCompactView: true
+    }))), props.status && (props.status.color ? React__default.createElement(Tooltip$1, {
+      text: React__default.createElement(FlexBox, {
+        gap: 8
+      }, props.status.color && React__default.createElement(Icon, {
+        color: props.status.color,
+        className: styles$24['vitro-status-icon']
+      }), props.status.name)
+    }, React__default.createElement(FlexBox, {
+      className: styles$24['vitro-right']
+    }, React__default.createElement(Icon, {
+      color: props.status.color,
+      className: styles$24['vitro-status-icon']
+    }))) : React__default.createElement(FlexBox, {
+      className: styles$24['vitro-right']
+    }, props.status.name)));
+  }
+  return React__default.createElement(FlexBox, {
+    className: styles$24['vitro-workflow-route-step-content'],
+    isFullWidth: true
+  }, React__default.createElement("span", {
+    className: styles$24['vitro-name']
+  }, props.index !== undefined && props.index + CTRL.DOT + "\xA0", props.name), React__default.createElement(FlexBox, {
+    className: styles$24['vitro-right'],
+    gap: 4
+  }, props.status && (props.status.color ? React__default.createElement(Tooltip$1, {
+    text: React__default.createElement(FlexBox, {
+      gap: 8
+    }, props.status.color && React__default.createElement(Icon, {
+      color: props.status.color,
+      className: styles$24['vitro-status-icon']
+    }), props.status.name)
+  }, React__default.createElement(FlexBox, null, React__default.createElement(Icon, {
+    color: props.status.color,
+    className: styles$24['vitro-status-icon']
+  }))) : props.status.name), React__default.createElement(FlexBox, {
+    className: styles$24['vitro-dropdown-button-container']
+  }, props.getDropdownItemList && !props.isDisabled && React__default.createElement(DropdownButton, {
+    getItemList: props.getDropdownItemList,
+    className: STYLE$1.CONTEXT + CTRL.SPACE + styles$24['vitro-dropdown-button'],
+    isCompactView: true
+  }))));
+};
+
+var WorkflowRouteStep = function WorkflowRouteStep(props) {
+  var _useState = React.useState(props.isExpanded || false),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var onExpandClick = function onExpandClick(isExpanded) {
+    setIsExpanded(isExpanded);
+  };
+  return React__default.createElement(ExpandControlGroup, {
+    className: styles$24['vitro-workflow-route-step'] + (props.isDisabled ? CTRL.SPACE + styles$24['vitro-disabled'] : CTRL.EMPTY),
+    isExpanded: isExpanded,
+    button: React__default.createElement(FlexBox, {
+      className: (props.isMobileView ? styles$24['vitro-workflow-route-step-header-mobile'] : styles$24['vitro-workflow-route-step-header']) + (props.isActive ? CTRL.SPACE + styles$24['vitro-active'] : CTRL.EMPTY),
+      gap: 4
+    }, React__default.createElement(ExpandCollapseButton, {
+      onClick: onExpandClick,
+      isExpanded: isExpanded,
+      className: props.isMobileView ? styles$24['vitro-expand-collapse-button-mobile'] : styles$24['vitro-expand-collapse-button']
+    }), React__default.createElement(WorkflowRouteStepContent, Object.assign({}, props)))
+  }, props.children);
+};
+
+var styles$25 = {"vitro-workflow-route":"_workflow-route_vitro-workflow-route_3dG_len","vitro-resolved":"_workflow-route_vitro-resolved_kJ_qzSx","vitro-right":"_workflow-route_vitro-right_2M1Zu0u","vitro-workflow-route-header":"_workflow-route_vitro-workflow-route-header_35BWBU5","vitro-workflow-route-header-mobile":"_workflow-route_vitro-workflow-route-header-mobile_2AvvUfH","vitro-active":"_workflow-route_vitro-active_1_97-zX","vitro-workflow-route-content":"_workflow-route_vitro-workflow-route-content_32GXb3u","vitro-name":"_workflow-route_vitro-name_28vFhFk","vitro-expand-collapse-button":"_workflow-route_vitro-expand-collapse-button_fnksjDH","vitro-expand-collapse-button-mobile":"_workflow-route_vitro-expand-collapse-button-mobile_2FBiUgU","vitro-dropdown-button-container":"_workflow-route_vitro-dropdown-button-container_1YxXjBP"};
+
+var WorkflowRouteContent = function WorkflowRouteContent(props) {
+  if (props.isMobileView) {
+    var _props$status, _props$status2, _props$status3;
+    return React__default.createElement(FlexBox, {
+      className: styles$25['vitro-workflow-route-content'],
+      gap: 4,
+      isFullWidth: true,
+      isColumn: true
+    }, React__default.createElement(FlexBox, {
+      gap: 4,
+      isFullWidth: true
+    }, React__default.createElement("span", {
+      className: styles$25['vitro-name'] + (props.isResolved ? CTRL.SPACE + styles$25['vitro-resolved'] : CTRL.EMPTY)
+    }, props.name), React__default.createElement(FlexBox, {
+      className: styles$25['vitro-dropdown-button-container'] + CTRL.SPACE + styles$25['vitro-right']
+    }, props.getDropdownItemList && !props.isResolved && React__default.createElement(DropdownButton, {
+      getItemList: props.getDropdownItemList,
+      className: STYLE$1.CONTEXT + CTRL.SPACE + styles$25['vitro-dropdown-button'],
+      isCompactView: true
+    }))), (props.status || props.currentStep) && React__default.createElement(FlexBox, {
+      className: styles$25['vitro-right'],
+      gap: 8
+    }, props.isResolved ? React__default.createElement(React__default.Fragment, null, ((_props$status = props.status) === null || _props$status === void 0 ? void 0 : _props$status.color) && React__default.createElement(Icon, {
+      color: (_props$status2 = props.status) === null || _props$status2 === void 0 ? void 0 : _props$status2.color
+    }), (_props$status3 = props.status) === null || _props$status3 === void 0 ? void 0 : _props$status3.name) : props.currentStep));
+  }
+  return React__default.createElement(FlexBox, {
+    className: styles$25['vitro-workflow-route-content'],
+    gap: 6,
+    isFullWidth: true
+  }, React__default.createElement(Label, {
+    text: props.name,
+    className: props.isResolved ? styles$25['vitro-resolved'] : CTRL.EMPTY
+  }), React__default.createElement(FlexBox, {
+    className: styles$25['vitro-right'],
+    gap: 4
+  }, props.isResolved && props.status ? React__default.createElement(FlexBox, {
+    gap: 8
+  }, props.status.color && React__default.createElement(Icon, {
+    color: props.status.color
+  }), props.status.name) : props.currentStep, React__default.createElement(FlexBox, {
+    className: styles$25['vitro-dropdown-button-container']
+  }, props.getDropdownItemList && !props.isResolved && React__default.createElement(DropdownButton, {
+    getItemList: props.getDropdownItemList,
+    className: STYLE$1.CONTEXT + CTRL.SPACE + styles$25['vitro-dropdown-button'],
+    isCompactView: true
+  }))));
+};
+
+var WorkflowRoute = function WorkflowRoute(props) {
+  var _useState = React.useState(props.isExpanded || false),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var onExpandClick = function onExpandClick(isExpanded) {
+    setIsExpanded(isExpanded);
+  };
+  return React__default.createElement(ExpandControlGroup, {
+    className: styles$25['vitro-workflow-route'],
+    isExpanded: isExpanded,
+    button: React__default.createElement(FlexBox, {
+      className: (props.isMobileView ? styles$25['vitro-workflow-route-header-mobile'] : styles$25['vitro-workflow-route-header']) + (props.isActive ? CTRL.SPACE + styles$25['vitro-active'] : CTRL.EMPTY),
+      gap: 4
+    }, React__default.createElement(ExpandCollapseButton, {
+      onClick: onExpandClick,
+      isExpanded: isExpanded,
+      className: props.isMobileView ? styles$25['vitro-expand-collapse-button-mobile'] : styles$25['vitro-expand-collapse-button']
+    }), React__default.createElement(WorkflowRouteContent, Object.assign({}, props)))
+  }, props.children);
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.AbortExceptionImpl = AbortExceptionImpl;
@@ -86842,6 +87198,7 @@ exports.Button = Button$1;
 exports.ButtonCancel = ButtonCancel;
 exports.ButtonGroup = ButtonGroup;
 exports.CONTROL = CONTROL;
+exports.CSS_PROPERTY = CSS_PROPERTY;
 exports.CenterAlignControlGroup = CenterAlignControlGroup;
 exports.Checkbox = Checkbox;
 exports.CheckboxReorderableList = CheckboxReorderableList;
@@ -86965,6 +87322,9 @@ exports.UserProfile = UserProfile;
 exports.ValueTooltip = ValueTooltip;
 exports.VideoViewer = VideoViewer;
 exports.View = View;
+exports.WorkflowRoute = WorkflowRoute;
+exports.WorkflowRouteStep = WorkflowRouteStep;
+exports.WorkflowRouteTask = WorkflowRouteTask;
 exports.commonEn = commonEn;
 exports.commonRu = commonRu;
 //# sourceMappingURL=index.js.map