@vitrosoftware/common-ui-ts 1.1.74 → 1.1.77

package/dist/index.js

@@ -20893,6 +20893,9 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
   _proto.showColumns = function showColumns() {
     this.grid.ShowColumns();
   };
+  _proto.getFirstCol = function getFirstCol(section) {
+    return this.grid.GetFirstCol(section);
+  };
   _createClass(TreeGridTableViewContextImpl, [{
     key: "columnList",
     get: function get() {
@@ -21045,6 +21048,7 @@ var CELL_TYPE;
 var ATTRIBUTE;
 (function (ATTRIBUTE) {
   ATTRIBUTE["BUTTON"] = "Button";
+  ATTRIBUTE["BUTTON_TEXT"] = "ButtonText";
   ATTRIBUTE["ON_CLICK_SIDE_BUTTON"] = "OnClickSideButton";
   ATTRIBUTE["ICON"] = "Icon";
   ATTRIBUTE["ICON_ALIGN"] = "IconAlign";
@@ -60686,10 +60690,10 @@ var OverflowButton = function OverflowButton(props) {
     className: styles$b['vitro-dropdown-button'],
     itemList: props.list.map(function (x, i) {
       return _extends({}, x, {
-        value: props.offset + i,
+        value: x.index,
         key: x.text,
         onClick: function onClick() {
-          return props.onSelect(props.offset + i);
+          return props.onSelect(x.index);
         }
       });
     })
@@ -60713,29 +60717,54 @@ var Tab = function Tab(props) {
 };
 
 var TabGroupHeader = function TabGroupHeader(props) {
+  var _useState = React.useState(),
+    activeItem = _useState[0],
+    setActiveItem = _useState[1];
   var overflowTabList = [];
   var tabMinWidth = 120;
-  if (!props.itemList || props.itemList.length === 0 || props.itemList.length === 1 && !props.itemList[0].text) {
-    return React__default.createElement(Nav$2, null);
-  }
+  var onClick = function onClick(index) {
+    var overflowItem = overflowTabList.find(function (item) {
+      return item.index === index;
+    });
+    if (overflowItem) {
+      setActiveItem(overflowItem);
+    } else {
+      setActiveItem(null);
+    }
+    props.changeTab(index);
+  };
   return React__default.createElement(Nav$2, null, props.width > 0 && props.itemList && props.itemList.map(function (item, index) {
-    if ((index + 1) * tabMinWidth < props.width || !props.wrap) {
+    if ((activeItem ? index + 2 : index + 1) * tabMinWidth < props.width || !props.wrap) {
+      if (activeItem && activeItem.index === index) {
+        setActiveItem(null);
+      }
       return React__default.createElement(Tab, {
         key: item.text,
         index: index,
         active: index === props.currentTab,
-        onClick: props.changeTab,
+        onClick: onClick,
         eventKey: item.eventKey,
         icon: item.icon,
         title: item.text
       });
     }
+    if (activeItem && activeItem.index === index) {
+      return null;
+    }
     overflowTabList.push(item);
     return null;
+  }), activeItem && React__default.createElement(Tab, {
+    key: activeItem.text,
+    index: activeItem.index,
+    active: true,
+    onClick: function onClick() {},
+    eventKey: activeItem.eventKey,
+    icon: activeItem.icon,
+    title: activeItem.text
   }), props.itemList && props.wrap && React__default.createElement(OverflowButton, {
     list: overflowTabList,
     offset: props.itemList.length - overflowTabList.length,
-    onSelect: props.changeTab
+    onSelect: onClick
   }));
 };
 
@@ -60750,6 +60779,9 @@ var TabGroupComponent = function TabGroupComponent(props) {
   var _useState3 = React.useState(null),
     component = _useState3[0],
     setComponent = _useState3[1];
+  var _useState4 = React.useState([]),
+    tabList = _useState4[0],
+    setTabList = _useState4[1];
   var changeTab = function changeTab(index) {
     setCurrentTab(index);
     if (props.onChange) {
@@ -60781,11 +60813,21 @@ var TabGroupComponent = function TabGroupComponent(props) {
       setComponent(null);
     }
   }, [currentTab, props.itemList]);
+  React.useEffect(function () {
+    if (props.itemList) {
+      var list = props.itemList.map(function (item, index) {
+        return _extends({}, item, {
+          index: index
+        });
+      });
+      setTabList(list);
+    }
+  }, [props.itemList]);
   return React__default.createElement("div", {
     className: styles$b['vitro-tab'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     ref: ref
   }, React__default.createElement(TabGroupHeader, {
-    itemList: props.itemList,
+    itemList: tabList,
     width: width,
     currentTab: currentTab,
     changeTab: changeTab,
@@ -61200,7 +61242,145 @@ var IssueTile = function IssueTile(props) {
   }));
 };
 
+var styles$k = {"vitro-file-version-select":"_file-version-select_vitro-file-version-select_1wIyab3","vitro-selected-version":"_file-version-select_vitro-selected-version_2BVgaBC","vitro-file-name":"_file-version-select_vitro-file-name_1PtLh8A","vitro-position-absolute":"_file-version-select_vitro-position-absolute_1ENrwLq","vitro-button-collapse-up":"_file-version-select_vitro-button-collapse-up_2GaCEdu","vitro-button-collapse-bottom":"_file-version-select_vitro-button-collapse-bottom_38zg3bU","vitro-version-name-red":"_file-version-select_vitro-version-name-red_-j6Z9ap","vitro-version-name-green":"_file-version-select_vitro-version-name-green_7PfVUHk","vitro-version-list":"_file-version-select_vitro-version-list_3h5D3pD","vitro-file-version-item":"_file-version-select_vitro-file-version-item_38KWa8a","vitro-content":"_file-version-select_vitro-content_zDUhjj0","vitro-version-name":"_file-version-select_vitro-version-name_1821bal","vitro-flex":"_file-version-select_vitro-flex_35zCAQv","vitro-active":"_file-version-select_vitro-active_1PRyjUa"};
+
+var VERSION_PREFIX = 'V';
+var Item$1 = function Item(props) {
+  return React__default.createElement("li", {
+    className: styles$k['vitro-file-version-item'] + CTRL.SPACE + (props.isActive ? styles$k['vitro-active'] : CTRL.EMPTY),
+    onClick: function onClick() {
+      return props.onClick(props.version);
+    }
+  }, React__default.createElement("div", {
+    className: props.isActive ? props.isCurrent ? styles$k['vitro-version-name-green'] : styles$k['vitro-version-name-red'] : styles$k['vitro-version-name']
+  }, VERSION_PREFIX + props.version.name), React__default.createElement("div", {
+    className: styles$k['vitro-content']
+  }, React__default.createElement("div", {
+    className: styles$k['vitro-file-name']
+  }, props.fileName), React__default.createElement("div", {
+    className: styles$k['vitro-flex']
+  }, React__default.createElement("span", null, props.version.userName), React__default.createElement("span", null, props.version.date))));
+};
+
+var PLACEMENT$1;
+(function (PLACEMENT) {
+  PLACEMENT["LEFT"] = "left";
+  PLACEMENT["TOP"] = "top";
+  PLACEMENT["RIGHT"] = "right";
+  PLACEMENT["BOTTOM"] = "bottom";
+})(PLACEMENT$1 || (PLACEMENT$1 = {}));
+
+var TooltipConstants = {
+    __proto__: null,
+    get PLACEMENT () { return PLACEMENT$1; }
+};
+
+var styles$l = {"vitro-tooltip":"_tooltip_vitro-tooltip_JvGPShz"};
+
+var Tooltip$1 = function Tooltip(props) {
+  return React__default.createElement(OverlayTrigger, {
+    placement: props.placement || PLACEMENT$1.TOP,
+    delay: {
+      show: 750,
+      hide: 0
+    },
+    show: props.isShow,
+    overlay: React__default.createElement(TooltipComponent, {
+      className: styles$l['vitro-tooltip']
+    }, props.text)
+  }, props.children);
+};
+
+var VERSION_PREFIX$1 = 'v';
+var FileVersionSelect = function FileVersionSelect(props) {
+  var _useState = React.useState(false),
+    showValueList = _useState[0],
+    setShowValueList = _useState[1];
+  var _useState2 = React.useState(false),
+    showFileName = _useState2[0],
+    setShowFileName = _useState2[1];
+  var _useState3 = React.useState(null),
+    selectedVersion = _useState3[0],
+    setSelectedVersion = _useState3[1];
+  var _useState4 = React.useState(false),
+    isCurrent = _useState4[0],
+    setIsCurrent = _useState4[1];
+  var selectRef = React.useRef(null);
+  var fileNameRef = React.useRef(null);
+  React.useEffect(function () {
+    window.addEventListener(exports.EVENT.MOUSEDOWN, onBlur);
+    return function () {
+      window.removeEventListener(exports.EVENT.MOUSEDOWN, onBlur);
+    };
+  }, []);
+  React.useEffect(function () {
+    var selectedVersion = props.itemList.find(function (version) {
+      return version.id === props.selectedVersionId;
+    });
+    if (selectedVersion) {
+      setIsCurrent(selectedVersion.id === props.currentVersionId);
+      setSelectedVersion(selectedVersion);
+    }
+  }, [props.selectedVersionId]);
+  var onCollapseButtonClick = function onCollapseButtonClick() {
+    setShowValueList(!showValueList);
+  };
+  var onChange = function onChange(version) {
+    setShowValueList(false);
+    setSelectedVersion(version);
+    props.onChange(version);
+  };
+  var onBlur = function onBlur(e) {
+    if (selectRef.current && !selectRef.current.contains(e.target)) {
+      setShowValueList(false);
+    }
+  };
+  var onMouseOver = function onMouseOver() {
+    var fileName = fileNameRef.current;
+    if (fileName && fileName.scrollWidth > fileName.offsetWidth) {
+      setShowFileName(true);
+    }
+  };
+  return React__default.createElement("div", {
+    className: styles$k['vitro-file-version-select'],
+    ref: selectRef
+  }, selectedVersion && React__default.createElement("div", {
+    className: styles$k['vitro-selected-version']
+  }, React__default.createElement("div", {
+    ref: fileNameRef,
+    onMouseOver: onMouseOver,
+    onMouseLeave: function onMouseLeave() {
+      return setShowFileName(false);
+    },
+    className: styles$k['vitro-file-name'] + (showFileName ? CTRL.SPACE + styles$k['vitro-position-absolute'] : CTRL.EMPTY)
+  }, props.fileName), React__default.createElement(Tooltip$1, {
+    placement: PLACEMENT$1.BOTTOM,
+    text: isCurrent ? props.tooltipTextCurrent : props.tooltipTextNotCurrent
+  }, React__default.createElement("div", {
+    className: isCurrent ? styles$k['vitro-version-name-green'] : styles$k['vitro-version-name-red']
+  }, VERSION_PREFIX$1 + selectedVersion.name)), React__default.createElement("div", {
+    onClick: onCollapseButtonClick,
+    className: showValueList ? styles$k['vitro-button-collapse-up'] : styles$k['vitro-button-collapse-bottom']
+  })), showValueList && React__default.createElement("ul", {
+    className: styles$k['vitro-version-list']
+  }, React__default.createElement(ScrollBar, null, props.itemList.map(function (item) {
+    return React__default.createElement(Item$1, {
+      version: item,
+      fileName: props.fileName,
+      isActive: props.selectedVersionId === item.id,
+      isCurrent: item.id === props.currentVersionId,
+      onClick: onChange
+    });
+  }))));
+};
+
 var w$7 = window;
+var CSS_CLASS_SIDEBAR_CONTENT = 'body__sidebar-content';
+var CSS_CLASS_ACTIVE = 'vitro-active';
+var CSS_CLASS_ISSUE_TILE = 'vitro-issue-tile';
+var ID_VIEWER_CONTAINER = 'viewerContainer';
+var ID_FILE_VERSION_SELECT = 'fileVersionSelect';
+var EVENT_PAGE_RENDERED = 'webViewerPageRendered';
 var Viewer = function Viewer(props) {
   React.useEffect(function () {
     if (props.context.file) {
@@ -61214,6 +61394,7 @@ var Viewer = function Viewer(props) {
           initIssueList: initIssueList
         });
         w$7.initPdfViewer(context);
+        initFileVersionSelect();
       } else {
         setTimeout(initViewer, 100);
       }
@@ -61221,8 +61402,8 @@ var Viewer = function Viewer(props) {
     initViewer();
   };
   var initIssueList = function initIssueList() {
-    var sidebar = document.getElementsByClassName('body__sidebar-content')[0];
-    $('body__sidebar-content').empty();
+    var sidebar = document.getElementsByClassName(CSS_CLASS_SIDEBAR_CONTENT)[0];
+    $(CSS_CLASS_SIDEBAR_CONTENT).empty();
     props.context.getIssueList().then(function (list) {
       var component = React__default.createElement(React__default.Fragment, null, list.map(function (issue) {
         return React__default.createElement(IssueTile, Object.assign({}, issue, {
@@ -61238,8 +61419,8 @@ var Viewer = function Viewer(props) {
   var onIssueTileClick = function onIssueTileClick(issue) {
     var id = issue.id;
     var markup = JSON.parse(issue.markup);
-    $('.body__sidebar-content').children().removeClass('vitro-active');
-    $(CTRL.SHARP + 'vitro-issue-tile-' + id).addClass('vitro-active');
+    $(CTRL.DOT + CSS_CLASS_SIDEBAR_CONTENT).children().removeClass(CSS_CLASS_ACTIVE);
+    $(CTRL.SHARP + CSS_CLASS_ISSUE_TILE + CTRL.DASH + id).addClass(CSS_CLASS_ACTIVE);
     var numPages = w$7.PDFViewerApplication.pagesCount;
     if (markup && markup.pageNr <= numPages && markup.pageNr >= 1) {
       if (markup.pageNr != w$7.PDFViewerApplication.pdfViewer.currentPageNumber) {
@@ -61248,7 +61429,7 @@ var Viewer = function Viewer(props) {
       if ($(CTRL.SHARP + id).length) {
         scrollToMarkup(id);
       } else {
-        $(document).on('webViewerPageRendered', function (e, pageNrRendered) {
+        $(document).on(EVENT_PAGE_RENDERED, function (e, pageNrRendered) {
           if (markup.pageNr == pageNrRendered) {
             scrollToMarkup(id);
           }
@@ -61260,16 +61441,29 @@ var Viewer = function Viewer(props) {
     var markup = $(CTRL.SHARP + id);
     if (markup) {
       var _markup$offset;
-      $('#viewerContainer').animate({
-        'scrollTop': $('#viewerContainer')[0].scrollTop + ((markup === null || markup === void 0 ? void 0 : (_markup$offset = markup.offset()) === null || _markup$offset === void 0 ? void 0 : _markup$offset.top) || 0) - 50
+      $(CTRL.SHARP + ID_VIEWER_CONTAINER).animate({
+        'scrollTop': $(CTRL.SHARP + ID_VIEWER_CONTAINER)[0].scrollTop + ((markup === null || markup === void 0 ? void 0 : (_markup$offset = markup.offset()) === null || _markup$offset === void 0 ? void 0 : _markup$offset.top) || 0) - 50
       }, 200);
     }
   };
+  var initFileVersionSelect = function initFileVersionSelect() {
+    var selectContainer = document.getElementById(ID_FILE_VERSION_SELECT);
+    var select = React__default.createElement(FileVersionSelect, {
+      fileName: props.context.file.fieldValueMap.name,
+      itemList: props.context.fileVersionList,
+      currentVersionId: props.context.currentVersionId,
+      selectedVersionId: props.context.versionId || props.context.file.fieldValueMap.version.id,
+      tooltipTextCurrent: props.context.currentVersionTooltipText || CTRL.EMPTY,
+      tooltipTextNotCurrent: props.context.notCurrentVersionTooltipText || CTRL.EMPTY,
+      onChange: props.context.onChangeFileVersion
+    });
+    reactDom.render(select, selectContainer);
+  };
   return React__default.createElement(React__default.Fragment, null);
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.74";
+var version$1 = "1.1.77";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -61280,7 +61474,7 @@ var engines = {
 	node: ">=10"
 };
 var scripts = {
-	build: "node clean.js && microbundle-crl --no-compress --format cjs --css-modules _[name]_[local]_[hash:base64:7] && concat-glob-cli -f lib/**/*.js -o lib/third-party.js && node src/controls/PdfViewer/build.js",
+	build: "node clean.js && node build.js && microbundle-crl --no-compress --format cjs --css-modules _[name]_[local]_[hash:base64:7] && node src/controls/PdfViewer/build.js  && node src/controls/BimViewer/build.js",
 	start: "microbundle-crl watch --no-compress --format modern,cjs",
 	prepare: "run-s build",
 	test: "run-s test:unit test:lint test:build",
@@ -61335,13 +61529,15 @@ var files = [
 	"css",
 	"lib",
 	"src/controls/PdfViewer/js/init-viewer-page.js",
-	"src/controls/PdfViewer/js/pdf-viewer.js"
+	"src/controls/PdfViewer/js/pdf-viewer.js",
+	"src/controls/BimViewer/js/init-viewer-page.js",
+	"src/controls/BimViewer/js/bim-viewer.js"
 ];
 var dependencies = {
 	"rollup-plugin-postcss": "^3.1.3",
 	inversify: "6.0.1",
 	"inversify-react": "1.0.2",
-	"@vitrosoftware/common-ui": "1.1.29",
+	"@vitrosoftware/common-ui": "1.1.31",
 	"react-router-bootstrap": "^0.24.4",
 	"m-react-splitters": "^1.2.0"
 };
@@ -61380,7 +61576,7 @@ var PdfViewer = function PdfViewer(props) {
   }));
 };
 
-var styles$k = {"vitro-control":"_checkbox_vitro-control_DfB5DDM","vitro-checkbox-content":"_checkbox_vitro-checkbox-content_2fBG1zl","vitro-label":"_checkbox_vitro-label_qZxCbCP","vitro-left-label":"_checkbox_vitro-left-label_Uu1Tp31"};
+var styles$m = {"vitro-control":"_checkbox_vitro-control_DfB5DDM","vitro-checkbox-content":"_checkbox_vitro-checkbox-content_2fBG1zl","vitro-label":"_checkbox_vitro-label_qZxCbCP","vitro-left-label":"_checkbox_vitro-left-label_Uu1Tp31"};
 
 var Checkbox = function Checkbox(props) {
   var _useState = React.useState(props.value ? true : false),
@@ -61393,14 +61589,14 @@ var Checkbox = function Checkbox(props) {
   React.useEffect(function () {
     setValue(props.value ? true : false);
   }, [props.value]);
-  var className = styles$k['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$k['vitro-left-label'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
+  var className = styles$m['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$m['vitro-left-label'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className
   }, props.labelPosition === POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$k['vitro-label']
+    className: styles$m['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$k['vitro-checkbox-content']
+    className: styles$m['vitro-checkbox-content']
   }, React__default.createElement("input", {
     disabled: props.isDisabled,
     type: 'checkbox',
@@ -61409,25 +61605,25 @@ var Checkbox = function Checkbox(props) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$k['vitro-label']
+    className: styles$m['vitro-label']
   })));
 };
 
-var styles$l = {"vitro-login-layout":"_login_vitro-login-layout_1C8owlz","vitro-form-login":"_login_vitro-form-login_2nyw95B","vitro-logo":"_login_vitro-logo_3-qTjgy","vitro-title":"_login_vitro-title_nfoHltS","vitro-flex":"_login_vitro-flex_2CffX6W","vitro-error":"_login_vitro-error_1Nk25em","vitro-link":"_login_vitro-link_az1ZWIc","vitro-separator":"_login_vitro-separator_2jHZJHO","vitro-control":"_login_vitro-control_3YqxIR2","vitro-password-control":"_login_vitro-password-control_2Zp5fJi","vitro-login-checkbox":"_login_vitro-login-checkbox_39NOnZg","vitro-button":"_login_vitro-button_2OCqKtD","vitro-footer":"_login_vitro-footer_1lceaP0","vitro-link-list":"_login_vitro-link-list_1rQQg9u","vitro-copyright":"_login_vitro-copyright_1gm65Ao","vitro-language":"_login_vitro-language_2T3uktL","vitro-link-register":"_login_vitro-link-register_3FH012R"};
+var styles$n = {"vitro-login-layout":"_login_vitro-login-layout_1C8owlz","vitro-form-login":"_login_vitro-form-login_2nyw95B","vitro-logo":"_login_vitro-logo_3-qTjgy","vitro-title":"_login_vitro-title_nfoHltS","vitro-flex":"_login_vitro-flex_2CffX6W","vitro-error":"_login_vitro-error_1Nk25em","vitro-link":"_login_vitro-link_az1ZWIc","vitro-separator":"_login_vitro-separator_2jHZJHO","vitro-control":"_login_vitro-control_3YqxIR2","vitro-password-control":"_login_vitro-password-control_2Zp5fJi","vitro-login-checkbox":"_login_vitro-login-checkbox_39NOnZg","vitro-button":"_login_vitro-button_2OCqKtD","vitro-footer":"_login_vitro-footer_1lceaP0","vitro-link-list":"_login_vitro-link-list_1rQQg9u","vitro-copyright":"_login_vitro-copyright_1gm65Ao","vitro-language":"_login_vitro-language_2T3uktL","vitro-link-register":"_login_vitro-link-register_3FH012R"};
 
 var LoginFooter = function LoginFooter(props) {
   return React__default.createElement("div", {
-    className: styles$l['vitro-footer']
+    className: styles$n['vitro-footer']
   }, React__default.createElement("div", {
-    className: styles$l['vitro-language']
+    className: styles$n['vitro-language']
   }), React__default.createElement("ul", {
-    className: styles$l['vitro-link-list']
+    className: styles$n['vitro-link-list']
   }, props.itemList && props.itemList.map(function (item) {
     return React__default.createElement("li", null, React__default.createElement("a", {
       href: item.url
     }, item.text));
   })), React__default.createElement("div", {
-    className: styles$l['vitro-copyright']
+    className: styles$n['vitro-copyright']
   }, props.copyright));
 };
 
@@ -61437,22 +61633,22 @@ var TYPE;
   TYPE["PASSWORD"] = "password";
 })(TYPE || (TYPE = {}));
 
-var styles$m = {"vitro-button-show-password":"_password-input_vitro-button-show-password_2jL4nM-","vitro-button-hide-password":"_password-input_vitro-button-hide-password_vPoUeVl"};
+var styles$o = {"vitro-button-show-password":"_password-input_vitro-button-show-password_2jL4nM-","vitro-button-hide-password":"_password-input_vitro-button-hide-password_vPoUeVl"};
 
 var PasswordInput = React.forwardRef(function (props, ref) {
   var _useState = React.useState(TYPE.PASSWORD),
     type = _useState[0],
     setType = _useState[1];
-  var _useState2 = React.useState(styles$m['vitro-button-show-password']),
+  var _useState2 = React.useState(styles$o['vitro-button-show-password']),
     icon = _useState2[0],
     setIcon = _useState2[1];
   var togglePassword = function togglePassword() {
     if (type === TYPE.PASSWORD) {
       setType(TYPE.TEXT);
-      setIcon(styles$m['vitro-button-hide-password']);
+      setIcon(styles$o['vitro-button-hide-password']);
     } else {
       setType(TYPE.PASSWORD);
-      setIcon(styles$m['vitro-button-show-password']);
+      setIcon(styles$o['vitro-button-show-password']);
     }
   };
   return React__default.createElement(Input, Object.assign({}, props, {
@@ -61580,14 +61776,14 @@ var Login = React.forwardRef(function (props, ref) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$l['vitro-login-layout'],
+    className: styles$n['vitro-login-layout'],
     onKeyDown: onKeyDown
   }, React__default.createElement("div", {
-    className: styles$l['vitro-form-login']
+    className: styles$n['vitro-form-login']
   }, React__default.createElement("div", {
-    className: styles$l['vitro-logo']
+    className: styles$n['vitro-logo']
   }), React__default.createElement("div", {
-    className: styles$l['vitro-title']
+    className: styles$n['vitro-title']
   }, localeService.create(LOCALE$3.TITLE)), React__default.createElement(Input, {
     name: FIELD_NAME.USER_NAME,
     label: localeService.create(LOCALE$3.FIELD_NAME),
@@ -61597,7 +61793,7 @@ var Login = React.forwardRef(function (props, ref) {
       return _onFocus(FIELD_NAME.USER_NAME);
     },
     isError: errorMessage ? true : false,
-    className: styles$l['vitro-control']
+    className: styles$n['vitro-control']
   }), React__default.createElement(PasswordInput, {
     name: FIELD_NAME.PASSWORD,
     label: localeService.create(LOCALE$3.FIELD_PASSWORD),
@@ -61607,26 +61803,26 @@ var Login = React.forwardRef(function (props, ref) {
       return _onFocus(FIELD_NAME.PASSWORD);
     },
     isError: errorMessage ? true : false,
-    className: styles$l['vitro-control']
+    className: styles$n['vitro-control']
   }), (props.onSaveData || props.onResetPassword) && React__default.createElement("div", {
-    className: styles$l['vitro-flex'] + (passwordErrorMessage || errorMessage || userNameErrorMessage ? CTRL.SPACE + styles$l['vitro-error'] : CTRL.EMPTY)
+    className: styles$n['vitro-flex'] + (passwordErrorMessage || errorMessage || userNameErrorMessage ? CTRL.SPACE + styles$n['vitro-error'] : CTRL.EMPTY)
   }, props.onSaveData && React__default.createElement(Checkbox, {
     label: localeService.create(LOCALE$3.ACTION_SAVE_DATA),
     name: FIELD_NAME.SAVE_DATA,
     onChange: props.onSaveData,
-    className: styles$l['vitro-login-checkbox']
+    className: styles$n['vitro-login-checkbox']
   }), props.onResetPassword && React__default.createElement("a", {
-    className: styles$l['vitro-link'],
+    className: styles$n['vitro-link'],
     onClick: props.onResetPassword
   }, localeService.create(LOCALE$3.ACTION_RESET_PASSWORD))), React__default.createElement(Button$2, {
-    className: styles$l['vitro-button'],
+    className: styles$n['vitro-button'],
     text: localeService.create(LOCALE$3.ACTION_LOGIN),
     onClick: submit,
     isDisabled: loading
   }), props.onRegister && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$l['vitro-separator']
+    className: styles$n['vitro-separator']
   }, localeService.create(LOCALE$3.SEPARATOR_TEXT)), React__default.createElement("a", {
-    className: styles$l['vitro-link-register'],
+    className: styles$n['vitro-link-register'],
     onClick: props.onRegister
   }, localeService.create(LOCALE$3.ACTION_REGISTER)))), React__default.createElement(LoginFooter, {
     copyright: props.copyright || localeService.create(LOCALE$3.COPYRIGHT),
@@ -61746,16 +61942,16 @@ var LABEL_POSITION;
   LABEL_POSITION["LEFT"] = "left";
 })(LABEL_POSITION || (LABEL_POSITION = {}));
 
-var PLACEMENT$1;
+var PLACEMENT$2;
 (function (PLACEMENT) {
   PLACEMENT["TOP"] = "top";
   PLACEMENT["BOTTOM"] = "bottom";
   PLACEMENT["LEFT"] = "left";
   PLACEMENT["RIGHT"] = "right";
   PLACEMENT["AUTO"] = "auto";
-})(PLACEMENT$1 || (PLACEMENT$1 = {}));
+})(PLACEMENT$2 || (PLACEMENT$2 = {}));
 
-var styles$n = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-button-copy":"_date-picker_vitro-button-copy_1cGY1Uu","vitro-control-container":"_date-picker_vitro-control-container_2CVwecs","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-text":"_date-picker_vitro-error-text_15CdrRj"};
+var styles$p = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-button-copy":"_date-picker_vitro-button-copy_1cGY1Uu","vitro-control-container":"_date-picker_vitro-control-container_2CVwecs","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-text":"_date-picker_vitro-error-text_15CdrRj"};
 
 var $$3 = window.$;
 var DatePicker = React.forwardRef(function (props, ref) {
@@ -61805,7 +62001,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
     }
   }, [props.isWorkDay]);
   React.useEffect(function () {
-    props.errorMessage ? setState(styles$n['vitro-error']) : setState(CTRL.EMPTY);
+    props.errorMessage ? setState(styles$p['vitro-error']) : setState(CTRL.EMPTY);
   }, [props.errorMessage]);
   React.useEffect(function () {
     if (isOpened && !props.isFlipDropdown && controlRef.current) {
@@ -61877,13 +62073,13 @@ var DatePicker = React.forwardRef(function (props, ref) {
     $$3(inputRef.current).data(componentName).setOptions(options);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$n['vitro-focus']);
+    setState(styles$p['vitro-focus']);
     if (props.onFocus) {
       props.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage ? styles$n['vitro-error'] : styles$n[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$p['vitro-error'] : styles$p[CTRL.EMPTY]);
     if (props.onBlur) {
       props.onBlur(e);
     }
@@ -61911,12 +62107,12 @@ var DatePicker = React.forwardRef(function (props, ref) {
     navigator.clipboard.writeText("" + props.value);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$n['vitro-control'], props.className];
+    var classList = [styles$p['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$n['vitro-read-only']);
+      classList.push(styles$p['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$n['vitro-left-label']);
+      classList.push(styles$p['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -61928,29 +62124,29 @@ var DatePicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$n['vitro-label']
+    className: styles$p['vitro-label']
   }), React__default.createElement("input", {
     ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$n['vitro-button-copy'],
+    className: styles$p['vitro-button-copy'],
     onClick: copyValue
   }) : null, props.isFlipDropdown ? React__default.createElement("div", {
     ref: containerRef,
-    className: styles$n['vitro-control-container']
+    className: styles$p['vitro-control-container']
   }) : React__default.createElement(Overlay$1, {
     show: true,
     target: inputRef.current,
-    placement: PLACEMENT$1.AUTO
+    placement: PLACEMENT$2.AUTO
   }, React__default.createElement("div", {
     style: style ? style : {},
-    className: styles$n['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$n['vitro-display-none'])
+    className: styles$p['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$p['vitro-display-none'])
   }, React__default.createElement("div", {
     ref: containerRef
   }))), props.errorMessage && React__default.createElement("span", {
-    className: styles$n['vitro-error-text']
+    className: styles$p['vitro-error-text']
   }, props.errorMessage));
 });
 
@@ -61971,7 +62167,7 @@ var COMPONENT_TYPE;
   COMPONENT_TYPE["MODERN"] = "modern";
 })(COMPONENT_TYPE || (COMPONENT_TYPE = {}));
 
-var styles$o = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-button-copy":"_time-picker_vitro-button-copy_QZg3bTW","vitro-control-container":"_time-picker_vitro-control-container_3ys3rMN","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-text":"_time-picker_vitro-error-text_2BNoBKW"};
+var styles$q = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-button-copy":"_time-picker_vitro-button-copy_QZg3bTW","vitro-control-container":"_time-picker_vitro-control-container_3ys3rMN","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-text":"_time-picker_vitro-error-text_2BNoBKW"};
 
 var $$4 = window.$;
 var TimePicker = React.forwardRef(function (props, ref) {
@@ -62071,13 +62267,13 @@ var TimePicker = React.forwardRef(function (props, ref) {
     }
   };
   var onFocus = function onFocus(e) {
-    setState(styles$o['vitro-focus']);
+    setState(styles$q['vitro-focus']);
     if (props.onFocus) {
       props.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage ? styles$o['vitro-error'] : styles$o[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$q['vitro-error'] : styles$q[CTRL.EMPTY]);
     if (props.onBlur) {
       props.onBlur(e);
     }
@@ -62086,12 +62282,12 @@ var TimePicker = React.forwardRef(function (props, ref) {
     navigator.clipboard.writeText("" + props.value);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$o['vitro-control'], props.className];
+    var classList = [styles$q['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$o['vitro-read-only']);
+      classList.push(styles$q['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$o['vitro-left-label']);
+      classList.push(styles$q['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -62103,38 +62299,38 @@ var TimePicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$o['vitro-label']
+    className: styles$q['vitro-label']
   }), React__default.createElement("input", {
     ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$o['vitro-button-copy'],
+    className: styles$q['vitro-button-copy'],
     onClick: copyValue
   }) : null, props.isFlipDropdown ? React__default.createElement("div", {
     ref: containerRef,
-    className: styles$o['vitro-control-container']
+    className: styles$q['vitro-control-container']
   }) : React__default.createElement(Overlay$1, {
     show: true,
     target: inputRef.current,
-    placement: PLACEMENT$1.AUTO
+    placement: PLACEMENT$2.AUTO
   }, React__default.createElement("div", {
     style: style ? style : {},
-    className: styles$o['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$o['vitro-display-none'])
+    className: styles$q['vitro-control-container'] + (style ? CTRL.EMPTY : CTRL.SPACE + styles$q['vitro-display-none'])
   }, React__default.createElement("div", {
     ref: containerRef
   }))), props.errorMessage && React__default.createElement("span", {
-    className: styles$o['vitro-error-text']
+    className: styles$q['vitro-error-text']
   }, props.errorMessage));
 });
 
-var styles$p = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
+var styles$r = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
 
 var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
 var SelectedValueList = function SelectedValueList(props) {
-  var className = props.isMultiSelect ? styles$p['vitro-selected-item-multi'] : styles$p['vitro-selected-item'];
+  var className = props.isMultiSelect ? styles$r['vitro-selected-item-multi'] : styles$r['vitro-selected-item'];
   return React__default.createElement(React__default.Fragment, null, props.list.map(function (x) {
     var title = props.selectedValueTemplate(x);
     return React__default.createElement("div", {
@@ -62147,7 +62343,7 @@ var SelectedValueList = function SelectedValueList(props) {
       onClick: function onClick() {
         return props.onOptionValueDelete(x.id);
       },
-      className: styles$p['vitro-button-close']
+      className: styles$r['vitro-button-close']
     }));
   }));
 };
@@ -62213,7 +62409,7 @@ var ValueList = function ValueList(props) {
     show: props.isVisible,
     target: props.contentRef,
     container: props.isFlip ? props.containerRef : null,
-    placement: PLACEMENT$1.AUTO,
+    placement: PLACEMENT$2.AUTO,
     flip: props.isFlip ? true : false
   }, React__default.createElement("div", {
     style: style ? style : {},
@@ -62237,7 +62433,7 @@ var LOCALE$4;
   LOCALE["PLACEHOLDER_EMPTY"] = "app.common.lookupPicker.empty";
 })(LOCALE$4 || (LOCALE$4 = {}));
 
-var styles$q = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-text":"_lookup-picker_vitro-error-text_273lqvD","vitro-button-copy":"_lookup-picker_vitro-button-copy_2UIHHZD","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83"};
+var styles$s = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-lookup-picker-multi-select":"_lookup-picker_vitro-lookup-picker-multi-select_3Lkq2tk","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-text":"_lookup-picker_vitro-error-text_273lqvD","vitro-button-copy":"_lookup-picker_vitro-button-copy_2UIHHZD","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83"};
 
 var $$5 = window.$;
 var LookupPicker = React.forwardRef(function (props, ref) {
@@ -62260,7 +62456,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   var _useState6 = React.useState(null),
     valueListRequestToken = _useState6[0],
     setValueListRequestToken = _useState6[1];
-  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$q['vitro-read-only'] : CTRL.EMPTY),
+  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$s['vitro-read-only'] : CTRL.EMPTY),
     state = _useState7[0],
     setState = _useState7[1];
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
@@ -62318,6 +62514,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
       focus: function focus() {
         if (inputRef.current) {
           inputRef.current.focus();
+          onFocus(null);
         }
       }
     };
@@ -62354,7 +62551,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }
   }, [selectedValueList]);
   React.useEffect(function () {
-    setState(props.errorMessage ? styles$q['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage ? styles$s['vitro-error'] : CTRL.EMPTY);
   }, [props.errorMessage]);
   var updateFilteredValueList = function updateFilteredValueList(valueList) {
     var availableValueList = inputValue ? filteredValueList : valueList;
@@ -62376,7 +62573,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     return props.selectedValueTemplate ? props.selectedValueTemplate(value) : value.title;
   };
   var onChange = function onChange(e) {
-    setState(styles$q['vitro-focus']);
+    setState(styles$s['vitro-focus']);
     setValueListVisible(true);
     setInputValue(e.target.value);
   };
@@ -62384,8 +62581,8 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     var keyBoardBackSpace = 8;
     if (e.keyCode === keyBoardBackSpace && e.target.value.length === 0 && selectedValueList.length > 0) {
       var newValueList = [].concat(selectedValueList);
-      newValueList.pop();
-      setSelectedValueList(newValueList);
+      var lastValue = newValueList.pop();
+      onOptionValueDelete(lastValue.id);
     }
   };
   var filterByText = function filterByText(value) {
@@ -62430,7 +62627,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
   };
   var onFocusOut = function onFocusOut(e) {
     var target = e.currentTarget;
-    setState(props.errorMessage ? styles$q['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage ? styles$s['vitro-error'] : CTRL.EMPTY);
     setTimeout(function () {
       var _document$activeEleme;
       if (!target.contains(document.activeElement) && !((_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.classList.contains(valueListStyles['vitro-item']))) {
@@ -62445,7 +62642,7 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     });
   };
   var onFocus = function onFocus(e) {
-    setState(styles$q['vitro-focus']);
+    setState(styles$s['vitro-focus']);
     setValueListVisible(true);
     if (props.onFocus) {
       props.onFocus(e);
@@ -62463,12 +62660,12 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     }).join(CTRL.COMMA));
   };
   var getClassName = function getClassName() {
-    var classList = [styles$q['vitro-lookup-picker'], props.className];
+    var classList = [styles$s['vitro-lookup-picker'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$q['vitro-read-only']);
+      classList.push(styles$s['vitro-read-only']);
     }
     if (props.isMultiSelect) {
-      classList.push(styles$q['vitro-lookup-picker-multi-select']);
+      classList.push(styles$s['vitro-lookup-picker-multi-select']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -62488,9 +62685,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$q['vitro-label']
+    className: styles$s['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$q['vitro-content'],
+    className: styles$s['vitro-content'],
     onClick: onFocus,
     ref: contentRef
   }, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
@@ -62506,9 +62703,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onChange: onChange,
     onClick: onFocus
   }), !props.isDisabled && props.children, React__default.createElement("div", {
-    className: styles$q['vitro-right']
+    className: styles$s['vitro-right']
   }, !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && isEditable && React__default.createElement("div", {
-    className: styles$q['vitro-button-close'],
+    className: styles$s['vitro-button-close'],
     onClick: function onClick() {
       return onOptionValueDelete();
     }
@@ -62516,9 +62713,9 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     onClick: function onClick() {
       return onCollapseButtonClick(valueListVisible);
     },
-    className: valueListVisible ? styles$q['vitro-button-collapse-up'] : styles$q['vitro-button-collapse-bottom']
+    className: valueListVisible ? styles$s['vitro-button-collapse-up'] : styles$s['vitro-button-collapse-bottom']
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$q['vitro-button-copy'],
+    className: styles$s['vitro-button-copy'],
     onClick: copyValue
   }) : null)), isEditable && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
@@ -62533,38 +62730,38 @@ var LookupPicker = React.forwardRef(function (props, ref) {
     emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$4.PLACEHOLDER_EMPTY),
     getHtmlValue: getHtmlValue
   }), props.errorMessage && React__default.createElement("span", {
-    className: styles$q['vitro-error-text']
+    className: styles$s['vitro-error-text']
   }, props.errorMessage));
 });
 
-var styles$r = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
+var styles$t = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
 
 var CommandMenu = function CommandMenu(props) {
   return React__default.createElement("nav", {
-    className: styles$r['vitro-command-menu'] + CTRL.SPACE + 'navbar'
+    className: styles$t['vitro-command-menu'] + CTRL.SPACE + 'navbar'
   }, React__default.createElement("ul", {
     className: 'nav'
   }, props.children));
 };
 
-var styles$s = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-icon":"_command-menu-button_vitro-icon_1xB4d09"};
+var styles$u = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-icon":"_command-menu-button_vitro-icon_1xB4d09"};
 
 var CommandMenuButton = function CommandMenuButton(props) {
   return React__default.createElement("li", null, React__default.createElement(Button$2, Object.assign({
-    className: styles$s['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    imageClassName: styles$s['vitro-icon']
+    className: styles$u['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    imageClassName: styles$u['vitro-icon']
   }, props)));
 };
 
 var itemStyles = {"vitro-item":"_command-menu-item_vitro-item_2pVhk23"};
 
-var styles$t = {"vitro-item-lookup-picker":"_command-menu-lookup-picker_vitro-item-lookup-picker_28SsSpP","vitro-command-menu-lookup-picker":"_command-menu-lookup-picker_vitro-command-menu-lookup-picker_1840wlg","vitro-content":"_command-menu-lookup-picker_vitro-content_3fNJUmC","vitro-value-list":"_command-menu-lookup-picker_vitro-value-list_3_OCO0r","ps":"_command-menu-lookup-picker_ps_2nXaPqA","ps--active-y":"_command-menu-lookup-picker_ps--active-y_1PYkoqT","vitro-selected-item":"_command-menu-lookup-picker_vitro-selected-item_2oLYUbH","vitro-item":"_command-menu-lookup-picker_vitro-item_16ocUuf","vitro-right":"_command-menu-lookup-picker_vitro-right_3sBWu8H"};
+var styles$v = {"vitro-item-lookup-picker":"_command-menu-lookup-picker_vitro-item-lookup-picker_28SsSpP","vitro-command-menu-lookup-picker":"_command-menu-lookup-picker_vitro-command-menu-lookup-picker_1840wlg","vitro-content":"_command-menu-lookup-picker_vitro-content_3fNJUmC","vitro-value-list":"_command-menu-lookup-picker_vitro-value-list_3_OCO0r","ps":"_command-menu-lookup-picker_ps_2nXaPqA","ps--active-y":"_command-menu-lookup-picker_ps--active-y_1PYkoqT","vitro-selected-item":"_command-menu-lookup-picker_vitro-selected-item_2oLYUbH","vitro-item":"_command-menu-lookup-picker_vitro-item_16ocUuf","vitro-right":"_command-menu-lookup-picker_vitro-right_3sBWu8H"};
 
 var CommandMenuLookupPicker = function CommandMenuLookupPicker(props) {
   return React__default.createElement("li", {
-    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$t['vitro-item-lookup-picker']
+    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$v['vitro-item-lookup-picker']
   }, React__default.createElement(LookupPicker, Object.assign({}, props, {
-    className: styles$t['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$v['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   })));
 };
 
@@ -64145,7 +64342,7 @@ UncontrolledDropdown.propTypes = _objectSpread$2({
   onToggle: propTypes.func
 }, Dropdown$2.propTypes);
 
-var styles$u = {"vitro-command-menu-dropdown-button":"_command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3","vitro-dropdown-button-container":"_command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O","vitro-icon":"_command-menu-dropdown-button_vitro-icon_36InzPx","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a"};
+var styles$w = {"vitro-command-menu-dropdown-button":"_command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3","vitro-dropdown-button-container":"_command-menu-dropdown-button_vitro-dropdown-button-container_29qd-_O","vitro-icon":"_command-menu-dropdown-button_vitro-icon_36InzPx","vitro-button-collapse-bottom":"_command-menu-dropdown-button_vitro-button-collapse-bottom_1OS_X_a"};
 
 var CommandMenuSubItem = function CommandMenuSubItem(props) {
   var onClick = function onClick(e) {
@@ -64164,7 +64361,7 @@ var CommandMenuSubItem = function CommandMenuSubItem(props) {
     onClick: onClick,
     toggle: props.toggle === false ? false : true
   }, props.isShowImage && React__default.createElement("div", {
-    className: styles$u['vitro-icon']
+    className: styles$w['vitro-icon']
   }, props.imageUrl && React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl
@@ -64182,15 +64379,15 @@ var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
     },
-    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$u['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$w['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     "data-show": props.isVisibleFunction
   }, props.imageUrl && React__default.createElement(Icon, {
     isHover: isHover,
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
-    className: styles$u['vitro-icon']
+    className: styles$w['vitro-icon']
   }), React__default.createElement("span", null, props.text), !props.isHideChevronDown && React__default.createElement("div", {
-    className: styles$u['vitro-button-collapse-bottom']
+    className: styles$w['vitro-button-collapse-bottom']
   }));
 };
 
@@ -64202,7 +64399,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   return React__default.createElement(UncontrolledDropdown, {
     nav: true,
     inNavbar: true,
-    className: styles$u['vitro-dropdown-button-container']
+    className: styles$w['vitro-dropdown-button-container']
   }, React__default.createElement(DropdownToggle$2, {
     nav: true,
     caret: true
@@ -64218,18 +64415,18 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$v = {"vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-icon":"_sidebar-item_vitro-icon_2B88tow","vitro-item":"_sidebar-item_vitro-item_1BR_7F0"};
+var styles$x = {"vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-icon":"_sidebar-item_vitro-icon_2B88tow","vitro-item":"_sidebar-item_vitro-item_1BR_7F0"};
 
-var Item$1 = function Item(props) {
+var Item$2 = function Item(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
     isHover: props.isHover,
-    className: styles$v['vitro-icon']
+    className: styles$x['vitro-icon']
   }), React__default.createElement("span", {
-    className: styles$v['vitro-icon-text']
+    className: styles$x['vitro-icon-text']
   }, props.text)), React__default.createElement("span", {
-    className: styles$v['vitro-item-text']
+    className: styles$x['vitro-item-text']
   }, props.text));
 };
 
@@ -64246,7 +64443,7 @@ var LinkItem$1 = function LinkItem(props) {
     isHover = _useState[0],
     setIsHover = _useState[1];
   var isActive = props.link === props.currentUrl || props.activeItem === props.id || props.altUrlList && props.altUrlList.includes(props.currentUrl);
-  var className = isActive ? styles$v['vitro-active'] : isHover ? styles$v['vitro-hover'] : CTRL.EMPTY;
+  var className = isActive ? styles$x['vitro-active'] : isHover ? styles$x['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
     if (props.link) {
       var event = new CustomEvent(exports.EVENT.HISTORY_UPDATE, {
@@ -64267,24 +64464,24 @@ var LinkItem$1 = function LinkItem(props) {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO
     },
-    className: styles$v['vitro-item']
+    className: styles$x['vitro-item']
   }, props.link && React__default.createElement("a", {
     onClick: onClick,
     className: className
-  }, React__default.createElement(Item$1, Object.assign({}, props, {
+  }, React__default.createElement(Item$2, Object.assign({}, props, {
     isHover: isHover || isActive
   }))), props.onClick && React__default.createElement("a", {
     onClick: function onClick() {
       return w$8[props.onClick || CTRL.EMPTY]();
     },
     className: className
-  }, React__default.createElement(Item$1, Object.assign({}, props, {
+  }, React__default.createElement(Item$2, Object.assign({}, props, {
     isHover: isHover || isActive
   }))), props.href && React__default.createElement("a", {
     href: props.href,
     target: props.isExternal ? TARGET.BLANK : TARGET.SELF,
     className: className
-  }, React__default.createElement(Item$1, Object.assign({}, props, {
+  }, React__default.createElement(Item$2, Object.assign({}, props, {
     isHover: isHover || isActive
   }))));
 };
@@ -64315,7 +64512,7 @@ var SectionList = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$w = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9"};
+var styles$y = {"vitro-sidebar":"_sidebar_vitro-sidebar_1IxGYiU","vitro-scroll-container":"_sidebar_vitro-scroll-container_3K-iJy8","vitro-button-more":"_sidebar_vitro-button-more_3s9oZY9"};
 
 var Sidebar = function Sidebar(props) {
   var _useState = React.useState(window.location.pathname),
@@ -64390,7 +64587,7 @@ var Sidebar = function Sidebar(props) {
     var width = containerWidth / count;
     setLinkItemWidth(width);
   };
-  var className = styles$w['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
+  var className = styles$y['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className,
     id: 'vitro-sidebar'
@@ -64403,7 +64600,7 @@ var Sidebar = function Sidebar(props) {
     currentUrl: currentUrl,
     activeItem: props.activeItem
   })) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$w['vitro-scroll-container'],
+    className: styles$y['vitro-scroll-container'],
     ref: menuRef
   }, React__default.createElement(SectionList, {
     itemList: itemList,
@@ -64413,40 +64610,40 @@ var Sidebar = function Sidebar(props) {
     linkItemWidth: linkItemWidth
   })), React__default.createElement("button", {
     onClick: scroll,
-    className: styles$w['vitro-button-more']
+    className: styles$y['vitro-button-more']
   })));
 };
 
-var styles$x = {"vitro-task-tile":"_task-tile_vitro-task-tile_35bZu48","vitro-active":"_task-tile_vitro-active_11W9nJz","vitro-content":"_task-tile_vitro-content_rl2ERCQ","vitro-description":"_task-tile_vitro-description_qtyUbLy","vitro-comment":"_task-tile_vitro-comment_2im2AJj","vitro-title":"_task-tile_vitro-title_1pXrIrB","vitro-top-right":"_task-tile_vitro-top-right_19tbPX4","vitro-dropdown-button":"_task-tile_vitro-dropdown-button_2YgEUdg","vitro-bottom-right":"_task-tile_vitro-bottom-right_2E9WAle","vitro-button-cancel":"_task-tile_vitro-button-cancel_1lgja1K"};
+var styles$z = {"vitro-task-tile":"_task-tile_vitro-task-tile_35bZu48","vitro-active":"_task-tile_vitro-active_11W9nJz","vitro-content":"_task-tile_vitro-content_rl2ERCQ","vitro-description":"_task-tile_vitro-description_qtyUbLy","vitro-comment":"_task-tile_vitro-comment_2im2AJj","vitro-title":"_task-tile_vitro-title_1pXrIrB","vitro-top-right":"_task-tile_vitro-top-right_19tbPX4","vitro-dropdown-button":"_task-tile_vitro-dropdown-button_2YgEUdg","vitro-bottom-right":"_task-tile_vitro-bottom-right_2E9WAle","vitro-button-cancel":"_task-tile_vitro-button-cancel_1lgja1K"};
 
 var TaskTile = function TaskTile(props) {
   return React__default.createElement("div", {
-    className: styles$x['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$x['vitro-active'] : CTRL.EMPTY),
+    className: styles$z['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$z['vitro-active'] : CTRL.EMPTY),
     onClick: props.onClick
   }, props.dropdownItemList && React__default.createElement("div", {
-    className: styles$x['vitro-top-right']
+    className: styles$z['vitro-top-right']
   }, React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
-    className: styles$x['vitro-dropdown-button']
+    className: styles$z['vitro-dropdown-button']
   })), props.isShowDeleteButton && React__default.createElement("div", {
-    className: styles$x['vitro-button-cancel'],
+    className: styles$z['vitro-button-cancel'],
     onClick: props.onDeleteClick
   }), props.description && React__default.createElement("div", {
-    className: styles$x['vitro-description']
+    className: styles$z['vitro-description']
   }, props.description), React__default.createElement("div", {
-    className: styles$x['vitro-title']
+    className: styles$z['vitro-title']
   }, props.title), props.comment && React__default.createElement("div", {
-    className: styles$x['vitro-comment']
+    className: styles$z['vitro-comment']
   }, props.comment), React__default.createElement("div", {
-    className: styles$x['vitro-content']
+    className: styles$z['vitro-content']
   }, props.userList && React__default.createElement(commonUi.TaskUserList, {
     itemList: props.userList
   })), React__default.createElement("div", {
-    className: styles$x['vitro-bottom-right']
+    className: styles$z['vitro-bottom-right']
   }, props.dateComment, " \xA0 ", props.date), props.children);
 };
 
-var styles$y = {"vitro-alert":"_alert_vitro-alert_3sPAkJb","vitro-alert-content":"_alert_vitro-alert-content_10fW1n4","vitro-button-close":"_alert_vitro-button-close_39K9cqW","vitro-icon":"_alert_vitro-icon_pK385gF","vitro-text":"_alert_vitro-text_37Erxqj","vitro-alert-action-list":"_alert_vitro-alert-action-list_2XzbaCO","vitro-position-center":"_alert_vitro-position-center_1r_lK_e"};
+var styles$A = {"vitro-alert":"_alert_vitro-alert_3sPAkJb","vitro-alert-content":"_alert_vitro-alert-content_10fW1n4","vitro-button-close":"_alert_vitro-button-close_39K9cqW","vitro-icon":"_alert_vitro-icon_pK385gF","vitro-text":"_alert_vitro-text_37Erxqj","vitro-alert-action-list":"_alert_vitro-alert-action-list_2XzbaCO","vitro-position-center":"_alert_vitro-position-center_1r_lK_e"};
 
 var Alert$1 = function Alert(props) {
   var ref = React.useRef(null);
@@ -64478,7 +64675,7 @@ var Alert$1 = function Alert(props) {
     }
   };
   var actionList = props.actionList && React__default.createElement("div", {
-    className: styles$y['vitro-alert-action-list']
+    className: styles$A['vitro-alert-action-list']
   }, props.actionList.map(function (a) {
     return React__default.createElement(Button$1, {
       key: a.text,
@@ -64487,7 +64684,7 @@ var Alert$1 = function Alert(props) {
       }
     }, a.text);
   }));
-  var className = styles$y['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$y['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
+  var className = styles$A['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$A['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     tabIndex: 1,
     onBlur: onFocusOut,
@@ -64497,13 +64694,13 @@ var Alert$1 = function Alert(props) {
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
-    className: styles$y['vitro-alert-content']
+    className: styles$A['vitro-alert-content']
   }, React__default.createElement("div", {
-    className: styles$y['vitro-icon']
+    className: styles$A['vitro-icon']
   }), React__default.createElement("div", {
-    className: styles$y['vitro-text']
+    className: styles$A['vitro-text']
   }, props.title && React__default.createElement("strong", null, props.title), props.text, !props.text && props.children), !props.isMultiline && actionList, props.isDismissible && React__default.createElement("div", {
-    className: styles$y['vitro-button-close'],
+    className: styles$A['vitro-button-close'],
     onClick: onClose
   })), props.text && props.children, props.isMultiline && actionList));
 };
@@ -64529,34 +64726,34 @@ var DialogComponent = function DialogComponent(props) {
   }, props.children);
 };
 
-var styles$z = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
+var styles$B = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
 
 var DialogContent = function DialogContent(props) {
   return React__default.createElement("div", {
-    className: styles$z['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$B['vitro-dialog-content'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, props.children);
 };
 
-var styles$A = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-title":"_dialog-header_vitro-title_2k8SPhE","vitro-description":"_dialog-header_vitro-description_Hiq51VI","vitro-icon":"_dialog-header_vitro-icon_3GtsVWO"};
+var styles$C = {"vitro-dialog-header":"_dialog-header_vitro-dialog-header_2W3GraU","vitro-title":"_dialog-header_vitro-title_2k8SPhE","vitro-description":"_dialog-header_vitro-description_Hiq51VI","vitro-icon":"_dialog-header_vitro-icon_3GtsVWO"};
 
 var DialogHeader = function DialogHeader(props) {
   return React__default.createElement("div", {
-    className: styles$A['vitro-dialog-header']
+    className: styles$C['vitro-dialog-header']
   }, props.imageUrl && React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
-    className: styles$A['vitro-icon']
+    className: styles$C['vitro-icon']
   }), React__default.createElement("div", null, React__default.createElement("h1", {
-    className: styles$A['vitro-title']
+    className: styles$C['vitro-title']
   }, props.title), props.description && React__default.createElement("h2", {
-    className: styles$A['vitro-description']
+    className: styles$C['vitro-description']
   }, props.description)));
 };
 
-var styles$B = {"vitro-dialog-button":"_dialog-button_vitro-dialog-button_1fQ5l22"};
+var styles$D = {"vitro-dialog-button":"_dialog-button_vitro-dialog-button_1fQ5l22"};
 
 var DialogButton = function DialogButton(props) {
   return React__default.createElement(Button$2, Object.assign({}, props, {
-    className: styles$B['vitro-dialog-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$D['vitro-dialog-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }));
 };
 
@@ -64589,7 +64786,7 @@ var LOCALE$5;
   LOCALE["ACTION_SAVE"] = "app.common.action.save";
 })(LOCALE$5 || (LOCALE$5 = {}));
 
-var styles$C = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
+var styles$E = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
 
 var DialogFooter = function DialogFooter(props) {
   var _props$buttonList, _props$buttonList2;
@@ -64601,7 +64798,7 @@ var DialogFooter = function DialogFooter(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$C['vitro-dialog-footer']
+    className: styles$E['vitro-dialog-footer']
   }, props.isDismissible && props.onClose && React__default.createElement(DialogCloseButton, {
     text: labelClose,
     isDisabled: !props.isDismissible,
@@ -64665,7 +64862,7 @@ var Dialog = function Dialog(props) {
   }) : null));
 };
 
-var styles$D = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta","vitro-avatar":"_user-profile_vitro-avatar_3SzDPAi"};
+var styles$F = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta","vitro-avatar":"_user-profile_vitro-avatar_3SzDPAi"};
 
 var UserProfileMenuItem = function UserProfileMenuItem(props) {
   var onClick = function onClick() {
@@ -64676,7 +64873,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   };
   if (props.link) {
     return React__default.createElement("div", {
-      className: styles$D['vitro-dropdown-item'],
+      className: styles$F['vitro-dropdown-item'],
       onClick: onClick
     }, React__default.createElement("a", {
       href: props.link
@@ -64687,7 +64884,7 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   }
   if (props.onClick) {
     return React__default.createElement("div", {
-      className: styles$D['vitro-dropdown-item'],
+      className: styles$F['vitro-dropdown-item'],
       key: props.text,
       onClick: onClick
     }, props.imageUrl && React__default.createElement(Icon, {
@@ -64721,15 +64918,15 @@ var UserProfile = function UserProfile(props) {
   return React__default.createElement(Dropdown$2, {
     isOpen: dropdownOpen,
     toggle: toggle,
-    className: styles$D['vitro-user-profile']
+    className: styles$F['vitro-user-profile']
   }, React__default.createElement(DropdownToggle$2, {
     caret: true
   }, React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$D['vitro-text-color-white']
+    className: styles$F['vitro-text-color-white']
   }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.image,
-    className: styles$D['vitro-avatar']
+    className: styles$F['vitro-avatar']
   }))), React__default.createElement(DropdownMenu$2, {
     right: true
   }, props.dropdownMenuItemList && props.dropdownMenuItemList.length > 0 && props.dropdownMenuItemList.map(function (item) {
@@ -64739,7 +64936,7 @@ var UserProfile = function UserProfile(props) {
   })));
 };
 
-var styles$E = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
+var styles$G = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
 
 var UserLookupPicker = React.forwardRef(function (props, ref) {
   var lookupPickerRef = React.useRef(null);
@@ -64747,7 +64944,7 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
     var prop = props.getHtmlValueTemplateProps(item);
     if (props.isMultiSelect) {
       return _extends({}, prop, {
-        className: styles$E['vitro-avatar']
+        className: styles$G['vitro-avatar']
       });
     }
     return prop;
@@ -64768,44 +64965,44 @@ var UserLookupPicker = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$F = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
+var styles$H = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
 
 var Activity = function Activity(props) {
   return React__default.createElement("div", {
     className: 'vitro-activity'
   }, (props.filterDropdownList || props.title) && React__default.createElement("div", {
-    className: styles$F['vitro-title']
+    className: styles$H['vitro-title']
   }, props.filterDropdownList && React__default.createElement(DropdownButton, {
     itemList: props.filterDropdownList,
-    className: styles$F['vitro-dropdown-button']
+    className: styles$H['vitro-dropdown-button']
   }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
     className: 'vitro-content'
   }, props.children));
 };
 
-var styles$G = {"vitro-item":"_activity-item_vitro-item_3Tprske","vitro-active":"_activity-item_vitro-active_2kENgvf","vitro-title":"_activity-item_vitro-title__QItISm","vitro-due-date":"_activity-item_vitro-due-date_1mBIraY","vitro-content":"_activity-item_vitro-content_3Lt7XRy","vitro-message":"_activity-item_vitro-message_1ndqhgR","vitro-flex":"_activity-item_vitro-flex_37IxBWe","vitro-dropdown-button":"_activity-item_vitro-dropdown-button_1J50ja7","vitro-avatar":"_activity-item_vitro-avatar_218ZqAk"};
+var styles$I = {"vitro-item":"_activity-item_vitro-item_3Tprske","vitro-active":"_activity-item_vitro-active_2kENgvf","vitro-title":"_activity-item_vitro-title__QItISm","vitro-due-date":"_activity-item_vitro-due-date_1mBIraY","vitro-content":"_activity-item_vitro-content_3Lt7XRy","vitro-message":"_activity-item_vitro-message_1ndqhgR","vitro-flex":"_activity-item_vitro-flex_37IxBWe","vitro-dropdown-button":"_activity-item_vitro-dropdown-button_1J50ja7","vitro-avatar":"_activity-item_vitro-avatar_218ZqAk"};
 
 var ActivityItem = function ActivityItem(props) {
   return React__default.createElement("div", {
-    className: styles$G['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$G['vitro-active'] : CTRL.EMPTY)
+    className: styles$I['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$I['vitro-active'] : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$G['vitro-flex']
+    className: styles$I['vitro-flex']
   }, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImageUrl,
-    className: styles$G['vitro-avatar']
+    className: styles$I['vitro-avatar']
   }), React__default.createElement("div", {
-    className: styles$G['vitro-content']
+    className: styles$I['vitro-content']
   }, React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$G['vitro-title']
+    className: styles$I['vitro-title']
   }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
-    className: styles$G['vitro-due-date']
+    className: styles$I['vitro-due-date']
   }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
     onToggle: props.onDropdownToggle,
-    className: styles$G['vitro-dropdown-button']
+    className: styles$I['vitro-dropdown-button']
   })), React__default.createElement("div", {
-    className: styles$G['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
+    className: styles$I['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
   }, React__default.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.message
@@ -64813,36 +65010,7 @@ var ActivityItem = function ActivityItem(props) {
   }), props.children)))));
 };
 
-var PLACEMENT$2;
-(function (PLACEMENT) {
-  PLACEMENT["LEFT"] = "left";
-  PLACEMENT["TOP"] = "top";
-  PLACEMENT["RIGHT"] = "right";
-  PLACEMENT["BOTTOM"] = "bottom";
-})(PLACEMENT$2 || (PLACEMENT$2 = {}));
-
-var TooltipConstants = {
-    __proto__: null,
-    get PLACEMENT () { return PLACEMENT$2; }
-};
-
-var styles$H = {"vitro-tooltip":"_tooltip_vitro-tooltip_JvGPShz"};
-
-var Tooltip$1 = function Tooltip(props) {
-  return React__default.createElement(OverlayTrigger, {
-    placement: props.placement || PLACEMENT$2.TOP,
-    delay: {
-      show: 750,
-      hide: 0
-    },
-    show: props.isShow,
-    overlay: React__default.createElement(TooltipComponent, {
-      className: styles$H['vitro-tooltip']
-    }, props.text)
-  }, props.children);
-};
-
-var styles$I = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-value":"_activity-message_vitro-value_O4DpuTR","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
+var styles$J = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-value":"_activity-message_vitro-value_O4DpuTR","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
 
 var ActivityMessage = function ActivityMessage(props) {
   var _useState = React.useState(false),
@@ -64884,25 +65052,25 @@ var ActivityMessage = function ActivityMessage(props) {
     return false;
   };
   return React__default.createElement("div", {
-    className: styles$I['vitro-activity-message']
+    className: styles$J['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$I['vitro-item']
+      className: styles$J['vitro-item']
     }, item.fieldName && React__default.createElement("span", {
-      className: styles$I['vitro-field-name']
+      className: styles$J['vitro-field-name']
     }, "" + item.fieldName + CTRL.COLON), item.oldValue && React__default.createElement(React__default.Fragment, null, React__default.createElement(Tooltip$1, {
       text: item.oldValue,
       isShow: isShowOldValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: styles$I['vitro-value'],
+      className: styles$J['vitro-value'],
       ref: oldValueRef
     }, item.oldValue)), React__default.createElement("span", {
-      className: styles$I['vitro-separator']
+      className: styles$J['vitro-separator']
     })), React__default.createElement(Tooltip$1, {
       text: item.newValue,
       isShow: isShowNewValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: item.isMessage ? styles$I['vitro-message'] : styles$I['vitro-value'],
+      className: item.isMessage ? styles$J['vitro-message'] : styles$J['vitro-value'],
       ref: newValueRef
     }, item.newValue)));
   }));
@@ -64924,7 +65092,7 @@ var LOCALE$6;
   LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
 })(LOCALE$6 || (LOCALE$6 = {}));
 
-var styles$J = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ"};
+var styles$K = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ"};
 
 var NEW_LINE = '\n';
 var MessageInput = function MessageInput(props) {
@@ -64975,14 +65143,14 @@ var MessageInput = function MessageInput(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$J['vitro-message-input'],
+    className: styles$K['vitro-message-input'],
     onDrop: props.onDrop
   }, React__default.createElement("div", {
-    className: styles$J['vitro-control']
+    className: styles$K['vitro-control']
   }, !props.isDisabled && React__default.createElement(ScrollBar, {
     isHideScrollX: true
   }, React__default.createElement("div", {
-    className: styles$J['vitro-message'],
+    className: styles$K['vitro-message'],
     ref: inputRef,
     onChange: onChange,
     onKeyDown: onKeyDown,
@@ -64990,17 +65158,17 @@ var MessageInput = function MessageInput(props) {
     onBlur: onBlur,
     contentEditable: true
   }, isShowPlaceholder && React__default.createElement("span", {
-    className: styles$J['vitro-placeholder']
+    className: styles$K['vitro-placeholder']
   }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onAddFile && React__default.createElement("button", {
     onClick: props.onAddFile,
-    className: styles$J['vitro-button-add-file']
+    className: styles$K['vitro-button-add-file']
   })), React__default.createElement("button", {
     onClick: onEnter,
-    className: styles$J['vitro-button-send']
+    className: styles$K['vitro-button-send']
   }));
 };
 
-var styles$K = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultIcon-wrapper":"_image-picker_vitro-image-picker-defaultIcon-wrapper_1XLKgLW","vitro-image-picker-icon-wrapper":"_image-picker_vitro-image-picker-icon-wrapper_3DNyLS0","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-icon-default":"_image-picker_vitro-icon-default_2Hdhta2","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL"};
+var styles$L = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultIcon-wrapper":"_image-picker_vitro-image-picker-defaultIcon-wrapper_1XLKgLW","vitro-image-picker-icon-wrapper":"_image-picker_vitro-image-picker-icon-wrapper_3DNyLS0","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-icon-default":"_image-picker_vitro-icon-default_2Hdhta2","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL"};
 
 var ACTION$1;
 (function (ACTION) {
@@ -65019,16 +65187,16 @@ var ImagePicker = function ImagePicker(props) {
   var renderPreview = function renderPreview() {
     if (props.defaultUrl) {
       return React__default.createElement("div", {
-        className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$K['vitro-image-picker-icon-wrapper']
+        className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$L['vitro-image-picker-icon-wrapper']
       }, React__default.createElement(Icon, {
         defaultUrl: props.defaultUrl,
-        className: props.classNameIcon ? props.classNameIcon : styles$K['vitro-image-picker-icon']
+        className: props.classNameIcon ? props.classNameIcon : styles$L['vitro-image-picker-icon']
       }));
     } else {
       return React__default.createElement("div", {
-        className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$K['vitro-image-picker-defaultIcon-wrapper']
+        className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$L['vitro-image-picker-defaultIcon-wrapper']
       }, React__default.createElement("div", {
-        className: styles$K['vitro-icon-default']
+        className: styles$L['vitro-icon-default']
       }));
     }
   };
@@ -65068,24 +65236,24 @@ var ImagePicker = function ImagePicker(props) {
     return (_props$itemList = props.itemList) !== null && _props$itemList !== void 0 && _props$itemList.length ? result.concat(props.itemList) : result;
   }, [props.itemList, props.defaultUrl]);
   return React__default.createElement("div", {
-    className: styles$K['vitro-image-picker-wrapper']
+    className: styles$L['vitro-image-picker-wrapper']
   }, React__default.createElement("div", {
-    className: styles$K['vitro-image-picker-label-wrapper']
+    className: styles$L['vitro-image-picker-label-wrapper']
   }, props.label ? props.label : ''), React__default.createElement("div", {
-    className: props.classNameRoot ? props.classNameRoot : styles$K['vitro-image-picker-root']
+    className: props.classNameRoot ? props.classNameRoot : styles$L['vitro-image-picker-root']
   }, React__default.createElement(DropdownButton, {
     itemList: defaultItemList,
-    className: styles$K['vitro-image-picker-dropdown-wrapper']
+    className: styles$L['vitro-image-picker-dropdown-wrapper']
   }), React__default.createElement("input", {
     type: 'file',
-    className: styles$K['vitro-image-picker-input'],
+    className: styles$L['vitro-image-picker-input'],
     ref: inputFileRef,
     onChange: onChange,
     accept: "image/*"
   }), renderPreview()));
 };
 
-var styles$L = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list-container":"_criterion_vitro-condition-list-container_ERfumwB","vitro-operator-list-container":"_criterion_vitro-operator-list-container_RgT0R_Z","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
+var styles$M = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list-container":"_criterion_vitro-condition-list-container_ERfumwB","vitro-operator-list-container":"_criterion_vitro-operator-list-container_RgT0R_Z","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
 
 var ROOT_ID = 'root';
 var ConditionSelect = React.forwardRef(function (props, ref) {
@@ -65143,13 +65311,13 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
     var root = document.getElementById(ROOT_ID);
     if (position && root) {
       var container = document.createElement('div');
-      container.className = styles$L['vitro-condition-list-container'];
+      container.className = styles$M['vitro-condition-list-container'];
       container.style.left = position.left + UNIT.PX;
       container.style.top = position.top + UNIT.PX;
       setConditionListContainer(container);
       var content = React__default.createElement("ul", {
         ref: listRef,
-        className: styles$L['vitro-condition-list'],
+        className: styles$M['vitro-condition-list'],
         onBlur: onBlur
       }, props.itemList.map(function (item) {
         return React__default.createElement("li", {
@@ -65158,7 +65326,7 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
           }
         }, item.imageUrl && React__default.createElement(Icon, {
           defaultUrl: item.imageUrl,
-          className: styles$L['vitro-icon']
+          className: styles$M['vitro-icon']
         }), item.text);
       }));
       reactDom.render(content, container);
@@ -65167,12 +65335,12 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
   };
   return React__default.createElement(React__default.Fragment, null, condition && React__default.createElement("div", {
     ref: ref,
-    className: styles$L['vitro-condition-select']
+    className: styles$M['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Icon, {
     defaultUrl: condition.imageUrl,
-    className: styles$L['vitro-icon']
+    className: styles$M['vitro-icon']
   }) : condition.text)));
 });
 
@@ -65252,13 +65420,13 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$L['vitro-focus']);
+    setState(styles$M['vitro-focus']);
     if (componentProps.onFocus) {
       componentProps.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(componentProps.errorMessage ? styles$L['vitro-error'] : CTRL.EMPTY);
+    setState(componentProps.errorMessage ? styles$M['vitro-error'] : CTRL.EMPTY);
     if (componentProps.onBlur) {
       componentProps.onBlur(e);
     }
@@ -65288,12 +65456,12 @@ var Criterion = function Criterion(props) {
     var root = document.getElementById(ROOT_ID$1);
     if (position && root) {
       var container = document.createElement('div');
-      container.className = styles$L['vitro-operator-list-container'];
+      container.className = styles$M['vitro-operator-list-container'];
       container.style.left = position.right + UNIT.PX;
       container.style.top = position.top + UNIT.PX;
       setOperatorListContainer(container);
       var content = React__default.createElement("ul", {
-        className: styles$L['vitro-operator-list']
+        className: styles$M['vitro-operator-list']
       }, props.operatorList.map(function (item) {
         return React__default.createElement("li", {
           onClick: function onClick() {
@@ -65306,25 +65474,25 @@ var Criterion = function Criterion(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$L['vitro-criterion-container']
+    className: styles$M['vitro-criterion-container']
   }, React__default.createElement("div", {
-    className: styles$L['vitro-operator-select-container']
+    className: styles$M['vitro-operator-select-container']
   }, props.isShowOperatorSelect && React__default.createElement("div", {
     ref: operatorSelectRef,
-    className: styles$L['vitro-operator-select'],
+    className: styles$M['vitro-operator-select'],
     onClick: toggleOperatorSelect
   }, React__default.createElement("div", null, operator.text))), React__default.createElement("div", {
-    className: styles$L['vitro-control'] + CTRL.SPACE + state
+    className: styles$M['vitro-control'] + CTRL.SPACE + state
   }, React__default.createElement("div", {
     ref: labelRef,
-    className: styles$L['vitro-label']
+    className: styles$M['vitro-label']
   }, React__default.createElement("span", null, props.label)), React__default.createElement(ConditionSelect, {
     ref: conditionSelectRef,
     itemList: props.conditionList,
     onSelect: onConditionClick,
     defaultValue: defaultCondition
   }), React__default.createElement(props.content.component, _extends({}, componentProps, {
-    className: styles$L['vitro-control'],
+    className: styles$M['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
     onChange: onControlChange,
@@ -65336,7 +65504,7 @@ var Criterion = function Criterion(props) {
     onClick: function onClick() {
       return props.onDelete(componentProps.id);
     },
-    className: styles$L['vitro-button-cancel']
+    className: styles$M['vitro-button-cancel']
   }));
 };
 
@@ -65346,7 +65514,7 @@ var LOCALE$8;
   LOCALE["EMPTY_PLACEHOLDER"] = "app.common.search.checkboxList.emptyPlaceholder";
 })(LOCALE$8 || (LOCALE$8 = {}));
 
-var styles$M = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-button-search":"_input_vitro-button-search_15PeWCS","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
+var styles$N = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-button-search":"_input_vitro-button-search_15PeWCS","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
 
 var NEW_LINE$1 = '\n';
 var Input$1 = function Input(props) {
@@ -65392,15 +65560,15 @@ var Input$1 = function Input(props) {
     onSubmit();
   };
   var onFocus = function onFocus() {
-    setState(styles$M['vitro-focus']);
+    setState(styles$N['vitro-focus']);
     if (props.onFocus) {
       props.onFocus();
     }
   };
   var getClassName = function getClassName() {
-    var classList = [styles$M['vitro-control'], props.className || CTRL.EMPTY, state];
+    var classList = [styles$N['vitro-control'], props.className || CTRL.EMPTY, state];
     if (props.isActive) {
-      classList.push(styles$M['vitro-active']);
+      classList.push(styles$N['vitro-active']);
     }
     return classList.join(CTRL.SPACE);
   };
@@ -65443,24 +65611,24 @@ var Input$1 = function Input(props) {
     var firstValue = valueList[0];
     var list = valueList.slice(1);
     return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: styles$M['vitro-search-value']
+      className: styles$N['vitro-search-value']
     }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue([firstValue]);
       },
-      className: styles$M['vitro-button-cancel']
+      className: styles$N['vitro-button-cancel']
     })), list.length >= 1 ? React__default.createElement(Tooltip$1, {
       text: getTextValueList(list),
-      placement: PLACEMENT$2.BOTTOM
+      placement: PLACEMENT$1.BOTTOM
     }, React__default.createElement("div", {
-      className: styles$M['vitro-search-value']
+      className: styles$N['vitro-search-value']
     }, localeService.create(LOCALE$8.INPUT_MORE, {
       count: list.length
     }), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue(list);
       },
-      className: styles$M['vitro-button-cancel']
+      className: styles$N['vitro-button-cancel']
     }))) : null);
   };
   var onSearchClick = function onSearchClick() {
@@ -65473,10 +65641,10 @@ var Input$1 = function Input(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: getClassName()
   }, React__default.createElement("button", {
-    className: styles$M['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$M['vitro-active'] : CTRL.EMPTY),
+    className: styles$N['vitro-button-search'] + (props.isSettingsActive ? CTRL.SPACE + styles$N['vitro-active'] : CTRL.EMPTY),
     onClick: onSearchClick
   }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$M['vitro-search-value-list']
+    className: styles$N['vitro-search-value-list']
   }, props.valueList.length ? getSelectedValueList(props.valueList) : React__default.createElement("input", {
     type: 'text',
     ref: inputRef,
@@ -65487,10 +65655,10 @@ var Input$1 = function Input(props) {
     placeholder: !props.isActive ? props.placeholder : CTRL.EMPTY
   })), props.isActive && React__default.createElement(React__default.Fragment, null, props.isShowSettings && React__default.createElement("button", {
     onClick: onSettingsClick,
-    className: styles$M['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$M['vitro-active'] : CTRL.EMPTY)
+    className: styles$N['vitro-button-settings'] + (props.isSettingsActive ? CTRL.SPACE + styles$N['vitro-active'] : CTRL.EMPTY)
   }), React__default.createElement("button", {
     onClick: onCancel,
-    className: styles$M['vitro-button-cancel']
+    className: styles$N['vitro-button-cancel']
   })))));
 };
 
@@ -65678,7 +65846,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })));
 });
 
-var styles$N = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
+var styles$O = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
 
 var Filter = function Filter(props) {
   var _useState = React.useState(null),
@@ -65736,7 +65904,7 @@ var Filter = function Filter(props) {
     props.onChange(changedFieldValueMap);
   };
   return React__default.createElement("div", {
-    className: styles$N['vitro-filter']
+    className: styles$O['vitro-filter']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
     fieldValueMap: fieldValueMap,
@@ -65747,7 +65915,7 @@ var Filter = function Filter(props) {
   }));
 };
 
-var styles$O = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-control":"_checkbox-list_vitro-control_cxgm4cj","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
+var styles$P = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-control":"_checkbox-list_vitro-control_cxgm4cj","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
 
 var CheckboxList = function CheckboxList(props) {
   var _useState = React.useState(props.itemList),
@@ -65800,18 +65968,18 @@ var CheckboxList = function CheckboxList(props) {
       onChange: function onChange(value, name) {
         return _onChange(value, item.id);
       },
-      className: styles$O['vitro-checkbox']
+      className: styles$P['vitro-checkbox']
     });
   };
   return React__default.createElement("div", {
-    className: styles$O['vitro-checkbox-list']
+    className: styles$P['vitro-checkbox-list']
   }, React__default.createElement(Input$1, {
     valueList: [],
     onCancel: onSearchCancel,
     onChange: onInputChange,
     onSubmit: onInputChange,
     isActive: false,
-    className: styles$O['vitro-control'],
+    className: styles$P['vitro-control'],
     isMobileView: false
   }), React__default.createElement(ScrollBar, null, isShowSearchResult ? searchItemList.length ? searchItemList.map(function (item) {
     return getCheckbox(item);
@@ -65886,7 +66054,7 @@ var Search = function Search(props) {
   }, [window.innerWidth]);
   React.useEffect(function () {
     if (selectedSearchCriterionList.length) {
-      setState(styles$N['vitro-active']);
+      setState(styles$O['vitro-active']);
     }
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
@@ -66026,7 +66194,7 @@ var Search = function Search(props) {
     }
   };
   var onFocusInput = function onFocusInput() {
-    setState(styles$N['vitro-active']);
+    setState(styles$O['vitro-active']);
   };
   var onRemoveValue = function onRemoveValue(valueList) {
     setSearchCriterionList(valueList);
@@ -66034,7 +66202,7 @@ var Search = function Search(props) {
   };
   return React__default.createElement("div", {
     ref: searchRef,
-    className: styles$N['vitro-search'] + CTRL.SPACE + state
+    className: styles$O['vitro-search'] + CTRL.SPACE + state
   }, React__default.createElement(Input$1, {
     valueList: selectedSearchCriterionList,
     onSettingsClick: onSettingsClick,
@@ -66049,7 +66217,7 @@ var Search = function Search(props) {
     isMobileView: isMobileView,
     isShowSettings: true
   }), isShowDialog && React__default.createElement("div", {
-    className: styles$N['vitro-settings-dialog']
+    className: styles$O['vitro-settings-dialog']
   }, React__default.createElement(Filter, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
@@ -66060,24 +66228,24 @@ var Search = function Search(props) {
     getConditionList: props.getConditionList,
     getDefaultCondition: props.getDefaultCondition
   }), isShowAddFieldButton && React__default.createElement("div", {
-    className: styles$N['vitro-add-field']
+    className: styles$O['vitro-add-field']
   }, React__default.createElement(Button$2, {
     text: props.labelAddField,
     onClick: onAddField,
-    className: styles$N['vitro-add-field-button']
+    className: styles$O['vitro-add-field-button']
   }), isShowAddFieldDialog && React__default.createElement("div", {
     ref: addFieldDialogRef,
-    className: styles$N['vitro-add-field-dialog']
+    className: styles$O['vitro-add-field-dialog']
   }, React__default.createElement(CheckboxList, {
     itemList: checkboxFieldList,
     onChange: onFieldListChange,
     isAllSelected: props.isAllFieldsVisible
   }))), React__default.createElement("div", {
-    className: styles$N['vitro-footer']
+    className: styles$O['vitro-footer']
   }, React__default.createElement(Button$2, {
     text: props.labelCancel,
     onClick: closeSettings,
-    className: styles$N['vitro-button-cancel']
+    className: styles$O['vitro-button-cancel']
   }), React__default.createElement(Button$2, {
     text: props.labelSearch,
     onClick: onSubmit
@@ -66117,7 +66285,7 @@ var Splitter = function Splitter(props) {
   }, props.children);
 };
 
-var styles$P = {"vitro-route-item":"_route-item_vitro-route-item_bBCgBZG","vitro-route-item-body":"_route-item_vitro-route-item-body_1_1fjOZ","vitro-route-item-content":"_route-item_vitro-route-item-content_2CcLogk","vitro-button-collapse":"_route-item_vitro-button-collapse_1kVB5Vo","vitro-button-expand":"_route-item_vitro-button-expand_3IuABa1","vitro-button-hide-comment":"_route-item_vitro-button-hide-comment_2CiY-Ch","vitro-button-show-comment":"_route-item_vitro-button-show-comment_DJt2SLC","vitro-avatar":"_route-item_vitro-avatar_3Dypnmz","vitro-date":"_route-item_vitro-date_3ojnKSb","vitro-route-item-header":"_route-item_vitro-route-item-header_y69bLwZ","vitro-flex":"_route-item_vitro-flex_3ebkqZ9","vitro-comment":"_route-item_vitro-comment_2K7RwrZ","vitro-status-color":"_route-item_vitro-status-color_VgXzXKD"};
+var styles$Q = {"vitro-route-item":"_route-item_vitro-route-item_bBCgBZG","vitro-route-item-body":"_route-item_vitro-route-item-body_1_1fjOZ","vitro-route-item-content":"_route-item_vitro-route-item-content_2CcLogk","vitro-button-collapse":"_route-item_vitro-button-collapse_1kVB5Vo","vitro-button-expand":"_route-item_vitro-button-expand_3IuABa1","vitro-button-hide-comment":"_route-item_vitro-button-hide-comment_2CiY-Ch","vitro-button-show-comment":"_route-item_vitro-button-show-comment_DJt2SLC","vitro-avatar":"_route-item_vitro-avatar_3Dypnmz","vitro-date":"_route-item_vitro-date_3ojnKSb","vitro-route-item-header":"_route-item_vitro-route-item-header_y69bLwZ","vitro-flex":"_route-item_vitro-flex_3ebkqZ9","vitro-comment":"_route-item_vitro-comment_2K7RwrZ","vitro-status-color":"_route-item_vitro-status-color_VgXzXKD"};
 
 var RouteItem = function RouteItem(props) {
   var _useState = React.useState(true),
@@ -66127,45 +66295,119 @@ var RouteItem = function RouteItem(props) {
     isShowComment = _useState2[0],
     setIsShowComment = _useState2[1];
   return React__default.createElement("div", {
-    className: styles$P['vitro-route-item']
+    className: styles$Q['vitro-route-item']
   }, props.children ? React__default.createElement("button", {
-    className: isExpanded ? styles$P['vitro-button-collapse'] : styles$P['vitro-button-expand'],
+    className: isExpanded ? styles$Q['vitro-button-collapse'] : styles$Q['vitro-button-expand'],
     onClick: function onClick() {
       return setIsExpanded(!isExpanded);
     }
   }) : null, React__default.createElement("div", {
-    className: styles$P['vitro-route-item-content']
+    className: styles$Q['vitro-route-item-content']
   }, props.userName && props.status && React__default.createElement("div", {
-    className: styles$P['vitro-route-item-header']
+    className: styles$Q['vitro-route-item-header']
   }, React__default.createElement("div", null, React__default.createElement("div", null, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImage,
-    className: styles$P['vitro-avatar']
+    className: styles$Q['vitro-avatar']
   }), props.userName), React__default.createElement("div", {
-    className: styles$P['vitro-date']
+    className: styles$Q['vitro-date']
   }, props.date)), React__default.createElement("div", null, React__default.createElement("div", null, props.statusColor && React__default.createElement("div", {
-    className: styles$P['vitro-status-color'],
+    className: styles$Q['vitro-status-color'],
     style: {
       background: props.statusColor
     }
   }), props.status), React__default.createElement("div", null, React__default.createElement("a", {
     href: props.itemUrl
   }, CTRL.SHARP + props.itemId)))), React__default.createElement("div", {
-    className: styles$P['vitro-route-item-body']
+    className: styles$Q['vitro-route-item-body']
   }, React__default.createElement("div", {
-    className: styles$P['vitro-flex']
+    className: styles$Q['vitro-flex']
   }, React__default.createElement("span", null, props.name), props.comment && React__default.createElement("button", {
-    className: isShowComment ? styles$P['vitro-button-hide-comment'] : styles$P['vitro-button-show-comment'],
+    className: isShowComment ? styles$Q['vitro-button-hide-comment'] : styles$Q['vitro-button-show-comment'],
     onClick: function onClick() {
       return setIsShowComment(!isShowComment);
     }
   })), isShowComment && props.comment && React__default.createElement("div", {
-    className: styles$P['vitro-comment']
+    className: styles$Q['vitro-comment']
   }, props.comment)), isExpanded && React__default.createElement("div", {
-    className: styles$P['vitro-route-item-child']
+    className: styles$Q['vitro-route-item-child']
   }, props.children)));
 };
 
+var w$9 = window;
+var ID_FILE_VERSION_SELECT$1 = 'fileVersionSelect';
+var Viewer$1 = function Viewer(props) {
+  React.useEffect(function () {
+    if (props.context) {
+      init();
+    }
+  }, [props.context]);
+  var init = function init() {
+    var initViewer = function initViewer() {
+      if (w$9.initBimViewer) {
+        var context = _extends({}, props.context, {
+          initIssueList: initIssueList
+        });
+        w$9.initBimViewer(context);
+        initFileVersionSelect();
+      } else {
+        setTimeout(initViewer, 100);
+      }
+    };
+    initViewer();
+  };
+  var initIssueList = function initIssueList(onIssueTileClick, _onShowMoreClick) {
+    var sidebar = document.getElementsByClassName('sidebar-content')[0];
+    $('sidebar-content').empty();
+    props.context.getIssueList().then(function (list) {
+      var component = React__default.createElement(React__default.Fragment, null, list.map(function (issue) {
+        return React__default.createElement(IssueTile, Object.assign({}, issue, {
+          onClick: function onClick() {
+            return onIssueTileClick(issue);
+          },
+          onShowMoreClick: function onShowMoreClick() {
+            return _onShowMoreClick(issue);
+          },
+          createLocale: props.context.createLocale
+        }));
+      }));
+      reactDom.render(component, sidebar);
+    });
+  };
+  var initFileVersionSelect = function initFileVersionSelect() {
+    var selectContainer = document.getElementById(ID_FILE_VERSION_SELECT$1);
+    var select = React__default.createElement(FileVersionSelect, {
+      fileName: props.context.file.fieldValueMap.name,
+      itemList: props.context.fileVersionList,
+      currentVersionId: props.context.currentVersionId,
+      selectedVersionId: props.context.versionId || props.context.file.fieldValueMap.version.id,
+      tooltipTextCurrent: props.context.currentVersionTooltipText || CTRL.EMPTY,
+      tooltipTextNotCurrent: props.context.notCurrentVersionTooltipText || CTRL.EMPTY,
+      onChange: props.context.onChangeFileVersion
+    });
+    reactDom.render(select, selectContainer);
+  };
+  return React__default.createElement(React__default.Fragment, null);
+};
+
+var BimViewer = function BimViewer(props) {
+  var scriptList = [{
+    'url': 'resource/bimViewer/js/init-viewer-page.js?version=v' + Package.version,
+    'id': 'vitro-script-init-bim-viewer'
+  }];
+  return React__default.createElement(commonUi.ScriptLoader, {
+    urlList: scriptList.map(function (x) {
+      return x.url;
+    }),
+    idList: scriptList.map(function (x) {
+      return x.id;
+    }),
+    placeholder: React__default.createElement(commonUi.Progress, null)
+  }, React__default.createElement(Viewer$1, {
+    context: props.context
+  }));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
@@ -66174,6 +66416,7 @@ exports.ActivityItem = ActivityItem;
 exports.ActivityMessage = ActivityMessage;
 exports.Alert = Alert$1;
 exports.Avatar = Avatar;
+exports.BimViewer = BimViewer;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$2;
 exports.CONTROL = CONTROL;
@@ -66193,6 +66436,7 @@ exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
 exports.DropdownButton = DropdownButton;
 exports.FieldIterator = FieldIterator;
+exports.FileVersionSelect = FileVersionSelect;
 exports.Icon = Icon;
 exports.ImagePicker = ImagePicker;
 exports.Input = Input;
@@ -66224,6 +66468,7 @@ exports.TimePicker = TimePicker;
 exports.Tooltip = Tooltip$1;
 exports.TopLevelMenu = TopLevelMenu;
 exports.TreeView = TreeView;
+exports.UNIT = UNIT;
 exports.UserLookupPicker = UserLookupPicker;
 exports.UserProfile = UserProfile;
 exports.View = View;