@vitrosoftware/common-ui-ts 1.1.17 → 1.1.20

package/dist/index.js

@@ -20128,6 +20128,7 @@ var EVENT$1;
   EVENT["CLOSE_NODE"] = "close_node.jstree";
   EVENT["SELECT_NODE"] = "select_node.jstree";
   EVENT["LOADED"] = "loaded.jstree";
+  EVENT["MODEL"] = "model.jstree";
 })(EVENT$1 || (EVENT$1 = {}));
 var NODE_TYPE;
 (function (NODE_TYPE) {
@@ -20970,7 +20971,6 @@ var MicroFrontend = function MicroFrontend(props) {
 
 var EVENT$3;
 (function (EVENT) {
-  EVENT["UPLOAD_START"] = "vitro.upload.start";
   EVENT["ADD_FILE"] = "vitro.file.add";
   EVENT["READY_STATE_CHANGE"] = "readystatechange";
 })(EVENT$3 || (EVENT$3 = {}));
@@ -20993,7 +20993,7 @@ var COLOR_GREEN = '#198754';
 var KENDO_UPLOAD = 'kendoUpload';
 var AUTHORIZATION_TOKEN_HEADER = 'AuthorizationToken';
 var TelerikUploaderContextImpl = /*#__PURE__*/function () {
-  function TelerikUploaderContextImpl(uploader, container, dropZone, settings, localeService, onUploadComplete) {
+  function TelerikUploaderContextImpl(uploader, container, dropZone, settings, localeService, toggleButtons) {
     this.token = CTRL.EMPTY;
     this.successCount = 0;
     this.errorCount = 0;
@@ -21005,14 +21005,14 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
     this.container = container[0];
     this.settings = settings;
     this.localeService = localeService;
-    this.onUploadComplete = onUploadComplete;
+    this.toggleButtons = toggleButtons;
     this.id = uploader[0].id;
     var component = this;
     var telerikConfig = {
       async: {
         saveUrl: settings.async.saveUrl,
-        autoUpload: settings.async.autoUpload,
-        batch: settings.async.batch
+        autoUpload: settings.async.isAutoUpload,
+        batch: settings.async.isBatch
       },
       upload: function upload(e) {
         return component.upload(e);
@@ -21038,7 +21038,7 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
       cancel: function cancel(e) {
         return component.cancel(e);
       },
-      directoryDrop: settings.directoryDrop,
+      directoryDrop: settings.isDirectoryDrop,
       dropZone: dropZone,
       localization: {
         cancel: this.localeService.create(LOCALE.CANCEL),
@@ -21065,6 +21065,7 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
     this.subtitle.empty();
     this.title.empty();
     this.progressInfo.removeClass('vitro-upload-complete');
+    $$1(this.container).removeClass('vitro-upload-active');
   };
   _proto.initAuthorization = function initAuthorization(e, token) {
     var xhr = e.XMLHttpRequest;
@@ -21077,10 +21078,7 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
   _proto.upload = function upload(e) {
     this.initAuthorization(e, this.token);
     this.fileList = [].concat(this.fileList, e.files);
-    var event = new CustomEvent(EVENT$3.UPLOAD_START, {
-      detail: this
-    });
-    window.dispatchEvent(event);
+    this.toggleButtons(true);
     if (this.settings.upload) {
       this.settings.upload(e);
     }
@@ -21097,18 +21095,30 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
   _proto.progress = function progress(e) {
     this.progressInfo.show();
     this.setFileProgress(e.files[0].uid, e.percentComplete);
-    if (e.percentComplete == 100 || this.successCount + this.errorCount == 0) {
-      var info = this.getProgressInfo();
-      this.title.text(this.localeService.create(LOCALE.PROGRESS_PERCENT, {
-        percent: info.percent
-      }));
-      this.subtitle.text(this.localeService.create(LOCALE.PROGRESS_COUNT, {
-        count: info.count
-      }));
-      this.setProgressBar(info.percent);
+    var info = {
+      count: 0,
+      percent: 0
+    };
+    if (this.fileList.length === 1) {
+      info = {
+        count: 1,
+        percent: e.percentComplete
+      };
+    } else {
+      if (e.percentComplete == 100 || this.successCount + this.errorCount == 0) {
+        info = this.getProgressInfo();
+      }
     }
+    this.title.text(this.localeService.create(LOCALE.PROGRESS_PERCENT, {
+      percent: info.percent
+    }));
+    this.subtitle.text(this.localeService.create(LOCALE.PROGRESS_COUNT, {
+      count: info.count
+    }));
+    this.setProgressBar(info.percent);
   };
   _proto.complete = function complete(e) {
+    var _this = this;
     this.progressInfo.addClass('vitro-upload-complete');
     this.subtitle.empty();
     this.title.text(this.localeService.create(LOCALE.SUCCESS, {
@@ -21120,7 +21130,12 @@ var TelerikUploaderContextImpl = /*#__PURE__*/function () {
       }));
     }
     this.setProgressBar(100);
-    this.onUploadComplete();
+    if (this.settings.isAutoReset) {
+      window.setTimeout(function () {
+        _this.clearAllFiles();
+        _this.toggleButtons(false);
+      }, this.settings.resetDurationMs || 5000);
+    }
   };
   _proto.select = function select(e) {
     this.container.classList.remove('vitro-dropzone-active');
@@ -21230,7 +21245,7 @@ var TelerikUploader = function TelerikUploader(props) {
       var input = $$2(uploaderRef.current);
       var dropZone = $$2(dropZoneRef.current);
       var container = $$2(containerRef.current);
-      var _kendoUploader = new TelerikUploaderContextImpl(input, container, dropZone, props.settings, localeService, onUploadComplete);
+      var _kendoUploader = new TelerikUploaderContextImpl(input, container, dropZone, props.settings, localeService, toggleButtons);
       setKendoUploader(_kendoUploader);
       if (props.onInit) {
         props.onInit(_kendoUploader);
@@ -21239,7 +21254,6 @@ var TelerikUploader = function TelerikUploader(props) {
   }, [uploaderRef, dropZoneRef]);
   React.useEffect(function () {
     if (kendoUploader) {
-      window.addEventListener(EVENT$3.UPLOAD_START, onUpload);
       window.addEventListener(EVENT$3.ADD_FILE, addFile);
       window.addEventListener(EVENT.DRAGOVER, function (e) {
         return onDragOver(e);
@@ -21249,7 +21263,6 @@ var TelerikUploader = function TelerikUploader(props) {
       });
     }
     return function () {
-      window.removeEventListener(EVENT$3.UPLOAD_START, onUpload);
       window.removeEventListener(EVENT$3.ADD_FILE, addFile);
       window.removeEventListener(EVENT.DRAGOVER, function (e) {
         return onDragOver(e);
@@ -21264,26 +21277,15 @@ var TelerikUploader = function TelerikUploader(props) {
       kendoUploader.addFile();
     }
   };
-  var onUpload = function onUpload(e) {
-    var uploader = e.detail;
-    if (uploader.id === props.id) {
-      setShowClose(true);
-    }
-  };
-  var onUploadComplete = function onUploadComplete() {
-    if (props.isAutoClose) {
-      window.setTimeout(function () {
-        clearUploadResult();
-      }, props.durationMs || 5000);
-    }
+  var toggleButtons = function toggleButtons(show) {
+    setShowClose(show);
+    setHide(false);
   };
   var clearUploadResult = function clearUploadResult() {
     if (kendoUploader) {
       kendoUploader.clearAllFiles();
     }
-    setShowClose(false);
-    setHide(false);
-    containerRef.current.classList.remove('vitro-upload-active');
+    toggleButtons(false);
   };
   var hideUploadResult = function hideUploadResult() {
     setHide(!hide);
@@ -21291,13 +21293,15 @@ var TelerikUploader = function TelerikUploader(props) {
   var onDragOver = function onDragOver(e) {
     var includesFiles = e.dataTransfer.types.includes(TYPE_FILES);
     e.preventDefault();
-    if (!containerRef.current.classList.contains('vitro-dropzone-active') && includesFiles) {
+    if (containerRef.current && !containerRef.current.classList.contains('vitro-dropzone-active') && includesFiles) {
       containerRef.current.classList.add('vitro-dropzone-active');
     }
   };
   var onDragLeave = function onDragLeave(e) {
     e.preventDefault();
-    containerRef.current.classList.remove('vitro-dropzone-active');
+    if (containerRef.current) {
+      containerRef.current.classList.remove('vitro-dropzone-active');
+    }
   };
   return React__default.createElement("div", {
     id: componentName,
@@ -59292,6 +59296,22 @@ function OverlayTrigger({
   });
 }
 
+var Icon = function Icon(props) {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("img", {
+    src: props.defaultUrl,
+    className: (props.className || 'vitro-icon') + (!props.hoverUrl || !props.isHover ? CTRL.EMPTY : ' vitro-display-none') + (props.hoverUrl ? ' vitro-icon-default' : CTRL.EMPTY),
+    onClick: function onClick() {
+      return props.onClick && props.onClick();
+    }
+  }), props.hoverUrl && React__default.createElement("img", {
+    src: props.hoverUrl,
+    className: (props.className || 'vitro-icon') + ' vitro-icon-hover' + (props.isHover ? CTRL.EMPTY : ' vitro-display-none'),
+    onClick: function onClick() {
+      return props.onClick && props.onClick();
+    }
+  }));
+};
+
 var styles$5 = {"vitro-button":"_button_vitro-button_hVfBuSO","vitro-animation-ripple":"_button_vitro-animation-ripple_7CFAk_a"};
 
 var PX_UNIT = 'px';
@@ -59347,11 +59367,10 @@ var Button$2 = function Button(props) {
     title: CTRL.EMPTY,
     onClick: onClick,
     onMouseDown: props.isCreateRipple ? createRipple : function () {}
-  }, React__default.createElement("div", null, props.imageUrl && React__default.createElement(commonUi.Icon, {
+  }, React__default.createElement("div", null, props.imageUrl && React__default.createElement(Icon, {
     isHover: isHover,
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
-    alt: CTRL.EMPTY,
     className: "" + (props.imageClassName || CTRL.EMPTY)
   }), React__default.createElement("div", null, props.text)));
   if (props.to) {
@@ -59935,7 +59954,7 @@ var ViewPart = function ViewPart(props) {
     } else {
       setComponent(null);
     }
-  }, [props.component]);
+  }, [props.component, props.settings, props.item]);
   return React__default.createElement("div", {
     className: styles$8["vitro-view-part"]
   }, component);
@@ -60002,9 +60021,9 @@ var DropdownButton = function DropdownButton(props) {
       onClick: function onClick(e) {
         return item.onClick(item.value, e);
       }
-    }, item.imageUrl && React__default.createElement(commonUi.Icon, {
-      imageUrl: item.imageUrl,
-      imageHoverUrl: item.imageHoverUrl,
+    }, item.imageUrl && React__default.createElement(Icon, {
+      defaultUrl: item.imageUrl,
+      hoverUrl: item.imageHoverUrl,
       className: styles$a['vitro-icon']
     }), React__default.createElement("span", null, item.text));
   }), dropItemList.length > 0 && React__default.createElement(BootstrapDropdown, {
@@ -60035,9 +60054,9 @@ var DropdownButton = function DropdownButton(props) {
       onClick: function onClick(e) {
         return x.onClick(x.value, e);
       }
-    }, x.imageUrl && React__default.createElement(commonUi.Icon, {
-      imageUrl: x.imageUrl,
-      imageHoverUrl: x.imageHoverUrl,
+    }, x.imageUrl && React__default.createElement(Icon, {
+      defaultUrl: x.imageUrl,
+      hoverUrl: x.imageHoverUrl,
       className: styles$a['vitro-icon']
     }), React__default.createElement("span", null, x.text));
   }))));
@@ -60234,7 +60253,8 @@ var GetGroupControl = function GetGroupControl(props) {
     return React__default.createElement(ViewPart, {
       component: viewPart.component,
       settings: viewPart.settings,
-      props: props
+      props: props,
+      item: props.item
     });
   }));
 };
@@ -60300,7 +60320,8 @@ var Input = function Input(props) {
     }
   }, []);
   React.useEffect(function () {
-    if (props.value && inputValue !== props.value) updateValue(props.value, true);
+    var value = props.value ? props.value : CTRL.EMPTY;
+    if (inputValue !== value) updateValue(value, true);
   }, [props.value]);
   React.useEffect(function () {
     setState(props.errorMessage ? styles$e['vitro-error'] : CTRL.EMPTY);
@@ -60655,6 +60676,39 @@ var PdfViewer = function PdfViewer(props) {
   }));
 };
 
+var styles$j = {"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),
+    value = _useState[0],
+    setValue = _useState[1];
+  var onChange = function onChange() {
+    props.onChange && props.onChange(!value);
+    setValue(!value);
+  };
+  React.useEffect(function () {
+    setValue(props.value ? true : false);
+  }, [props.value]);
+  var className = styles$j['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$j['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$j['vitro-label']
+  }), React__default.createElement("div", {
+    className: styles$j['vitro-checkbox-content']
+  }, React__default.createElement("input", {
+    disabled: props.isDisabled,
+    type: 'checkbox',
+    name: props.name,
+    checked: value,
+    onChange: onChange
+  }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
+    text: props.label,
+    className: styles$j['vitro-label']
+  })));
+};
+
 var LOCALE$3;
 (function (LOCALE) {
   LOCALE["ERROR_EMPTY"] = "app.common.login.error.empty";
@@ -60676,7 +60730,7 @@ var INPUT_TYPE;
   INPUT_TYPE["TEXT"] = "text";
 })(INPUT_TYPE || (INPUT_TYPE = {}));
 
-var styles$j = {"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-link":"_login_vitro-link_az1ZWIc","vitro-separator":"_login_vitro-separator_2jHZJHO","vitro-login-control":"_login_vitro-login-control_cksptcC","vitro-error":"_login_vitro-error_1Nk25em","vitro-control":"_login_vitro-control_3YqxIR2","vitro-button":"_login_vitro-button_2OCqKtD","vitro-button-show-password":"_login_vitro-button-show-password_3NpbpN5","vitro-button-hide-password":"_login_vitro-button-hide-password_27R-yFe","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"};
+var styles$k = {"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-link":"_login_vitro-link_az1ZWIc","vitro-separator":"_login_vitro-separator_2jHZJHO","vitro-login-control":"_login_vitro-login-control_cksptcC","vitro-error":"_login_vitro-error_1Nk25em","vitro-control":"_login_vitro-control_3YqxIR2","vitro-login-checkbox":"_login_vitro-login-checkbox_39NOnZg","vitro-button":"_login_vitro-button_2OCqKtD","vitro-button-show-password":"_login_vitro-button-show-password_3NpbpN5","vitro-button-hide-password":"_login_vitro-button-hide-password_27R-yFe","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"};
 
 var LoginInput = function LoginInput(props) {
   var _useState = React.useState(CTRL.EMPTY),
@@ -60685,7 +60739,7 @@ var LoginInput = function LoginInput(props) {
   var _useState2 = React.useState(props.type || INPUT_TYPE.TEXT),
     type = _useState2[0],
     setType = _useState2[1];
-  var _useState3 = React.useState(styles$j['vitro-button-show-password']),
+  var _useState3 = React.useState(styles$k['vitro-button-show-password']),
     icon = _useState3[0],
     setIcon = _useState3[1];
   var _useState4 = React.useState(CTRL.EMPTY),
@@ -60702,7 +60756,7 @@ var LoginInput = function LoginInput(props) {
   }, [props.isValidate]);
   React.useEffect(function () {
     if (props.error) {
-      setState(styles$j['vitro-error']);
+      setState(styles$k['vitro-error']);
       setError(props.error);
     }
   }, [props.error]);
@@ -60728,10 +60782,10 @@ var LoginInput = function LoginInput(props) {
   var togglePassword = function togglePassword() {
     if (type === INPUT_TYPE.PASSWORD) {
       setType(INPUT_TYPE.TEXT);
-      setIcon(styles$j['vitro-button-hide-password']);
+      setIcon(styles$k['vitro-button-hide-password']);
     } else {
       setType(INPUT_TYPE.PASSWORD);
-      setIcon(styles$j['vitro-button-show-password']);
+      setIcon(styles$k['vitro-button-show-password']);
     }
   };
   var validate = function validate() {
@@ -60741,14 +60795,14 @@ var LoginInput = function LoginInput(props) {
         fieldName: fieldName
       });
       setError(text);
-      setState(styles$j['vitro-error']);
+      setState(styles$k['vitro-error']);
     } else {
       setError(CTRL.EMPTY);
       setState(CTRL.EMPTY);
     }
   };
   return React__default.createElement("div", {
-    className: styles$j['vitro-login-control'] + CTRL.SPACE + state
+    className: styles$k['vitro-login-control'] + CTRL.SPACE + state
   }, React__default.createElement(Input, {
     type: type,
     name: props.name,
@@ -60761,7 +60815,7 @@ var LoginInput = function LoginInput(props) {
     onFocus: onFocus,
     onBlur: onBlur,
     errorMessage: error,
-    className: styles$j['vitro-control']
+    className: styles$k['vitro-control']
   }), props.type === INPUT_TYPE.PASSWORD && React__default.createElement("span", {
     className: icon,
     onClick: togglePassword
@@ -60770,22 +60824,23 @@ var LoginInput = function LoginInput(props) {
 
 var LoginFooter = function LoginFooter(props) {
   return React__default.createElement("div", {
-    className: styles$j['vitro-footer']
+    className: styles$k['vitro-footer']
   }, React__default.createElement("div", {
-    className: styles$j['vitro-language']
+    className: styles$k['vitro-language']
   }), React__default.createElement("ul", {
-    className: styles$j['vitro-link-list']
+    className: styles$k['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$j['vitro-copyright']
+    className: styles$k['vitro-copyright']
   }, props.copyright));
 };
 
 var FIELD_USER_NAME = 'userName';
 var FIELD_PASSWORD = 'password';
+var CHECKBOX_SAVE_DATA = 'saveData';
 var KEY_ENTER = 'Enter';
 var Login = function Login(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
@@ -60835,13 +60890,13 @@ var Login = function Login(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$j['vitro-login-layout']
+    className: styles$k['vitro-login-layout']
   }, React__default.createElement("div", {
-    className: styles$j['vitro-form-login']
+    className: styles$k['vitro-form-login']
   }, React__default.createElement("div", {
-    className: styles$j['vitro-logo']
+    className: styles$k['vitro-logo']
   }), React__default.createElement("div", {
-    className: styles$j['vitro-title']
+    className: styles$k['vitro-title']
   }, localeService.create(LOCALE$3.TITLE)), React__default.createElement(LoginInput, {
     label: localeService.create(LOCALE$3.PLACEHOLDER_NAME),
     name: FIELD_USER_NAME,
@@ -60864,22 +60919,24 @@ var Login = function Login(props) {
     isValidate: validateData,
     error: error[FIELD_PASSWORD]
   }), React__default.createElement("div", {
-    className: styles$j['vitro-flex']
-  }, React__default.createElement(commonUi.Checkbox, {
+    className: styles$k['vitro-flex']
+  }, React__default.createElement(Checkbox, {
     label: localeService.create(LOCALE$3.ACTION_SAVE_DATA),
-    onChange: props.onSaveData
+    name: CHECKBOX_SAVE_DATA,
+    onChange: props.onSaveData,
+    className: styles$k['vitro-login-checkbox']
   }), React__default.createElement("a", {
-    className: styles$j['vitro-link'],
+    className: styles$k['vitro-link'],
     onClick: props.onResetPassword
   }, localeService.create(LOCALE$3.ACTION_RESET_PASSWORD))), React__default.createElement(Button$2, {
-    className: styles$j['vitro-button'],
+    className: styles$k['vitro-button'],
     text: localeService.create(LOCALE$3.ACTION_LOGIN),
     onClick: submit,
     isDisabled: loading
   }), React__default.createElement("div", {
-    className: styles$j['vitro-separator']
+    className: styles$k['vitro-separator']
   }, localeService.create(LOCALE$3.SEPARATOR_TEXT)), React__default.createElement("a", {
-    className: styles$j['vitro-link'],
+    className: styles$k['vitro-link'],
     onClick: props.onRegister
   }, localeService.create(LOCALE$3.ACTION_REGISTER))), React__default.createElement(LoginFooter, {
     copyright: props.copyright || localeService.create(LOCALE$3.COPYRIGHT),
@@ -60903,7 +60960,7 @@ var LABEL_POSITION;
   LABEL_POSITION["LEFT"] = "left";
 })(LABEL_POSITION || (LABEL_POSITION = {}));
 
-var styles$k = {"vitro-control":"_date-picker_vitro-control_2AYXegb","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$l = {"vitro-control":"_date-picker_vitro-control_2AYXegb","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 = function DatePicker(props) {
@@ -60969,24 +61026,24 @@ var DatePicker = function DatePicker(props) {
     if (props.maxValue) $$3(ref.current).data(componentName).max(props.maxValue);
   }, [props.maxValue]);
   React.useEffect(function () {
-    props.errorMessage ? setState(styles$k['vitro-error']) : setState(CTRL.EMPTY);
+    props.errorMessage ? setState(styles$l['vitro-error']) : setState(CTRL.EMPTY);
   }, [props.errorMessage]);
   var onFocus = function onFocus() {
-    setState(styles$k['vitro-focus']);
+    setState(styles$l['vitro-focus']);
   };
   var onBlur = function onBlur() {
-    setState(props.errorMessage ? styles$k['vitro-error'] : styles$k[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$l['vitro-error'] : styles$l[CTRL.EMPTY]);
   };
   var copyValue = function copyValue() {
     navigator.clipboard.writeText("" + props.value);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$k['vitro-control'], props.className];
+    var classList = [styles$l['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$k['vitro-read-only']);
+      classList.push(styles$l['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$k['vitro-left-label']);
+      classList.push(styles$l['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -60997,20 +61054,20 @@ var DatePicker = function DatePicker(props) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$k['vitro-label']
+    className: styles$l['vitro-label']
   }), React__default.createElement("input", {
     ref: ref,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$k['vitro-button-copy'],
+    className: styles$l['vitro-button-copy'],
     onClick: copyValue
   }) : null, React__default.createElement("div", {
     ref: container,
-    className: styles$k['vitro-control-container']
+    className: styles$l['vitro-control-container']
   }), props.errorMessage && React__default.createElement("span", {
-    className: styles$k['vitro-error-text']
+    className: styles$l['vitro-error-text']
   }, props.errorMessage));
 };
 
@@ -61031,7 +61088,7 @@ var COMPONENT_TYPE;
   COMPONENT_TYPE["MODERN"] = "modern";
 })(COMPONENT_TYPE || (COMPONENT_TYPE = {}));
 
-var styles$l = {"vitro-control":"_time-picker_vitro-control_1sx07It","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$m = {"vitro-control":"_time-picker_vitro-control_1sx07It","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 = function TimePicker(props) {
@@ -61077,21 +61134,21 @@ var TimePicker = function TimePicker(props) {
     $$4(ref.current).data(componentName).value(props.value);
   }, [props.value]);
   var onFocus = function onFocus() {
-    setState(styles$l['vitro-focus']);
+    setState(styles$m['vitro-focus']);
   };
   var onBlur = function onBlur() {
-    setState(props.errorMessage ? styles$l['vitro-error'] : styles$l[CTRL.EMPTY]);
+    setState(props.errorMessage ? styles$m['vitro-error'] : styles$m[CTRL.EMPTY]);
   };
   var copyValue = function copyValue() {
     navigator.clipboard.writeText("" + props.value);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$l['vitro-control'], props.className];
+    var classList = [styles$m['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$l['vitro-read-only']);
+      classList.push(styles$m['vitro-read-only']);
     }
     if (props.labelPosition === POSITION.LEFT) {
-      classList.push(styles$l['vitro-left-label']);
+      classList.push(styles$m['vitro-left-label']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -61102,24 +61159,24 @@ var TimePicker = function TimePicker(props) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$l['vitro-label']
+    className: styles$m['vitro-label']
   }), React__default.createElement("input", {
     ref: ref,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$l['vitro-button-copy'],
+    className: styles$m['vitro-button-copy'],
     onClick: copyValue
   }) : null, React__default.createElement("div", {
     ref: container,
-    className: styles$l['vitro-control-container']
+    className: styles$m['vitro-control-container']
   }), props.errorMessage && React__default.createElement("span", {
-    className: styles$l['vitro-error-text']
+    className: styles$m['vitro-error-text']
   }, props.errorMessage));
 };
 
-var styles$m = {"vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth"};
+var styles$n = {"vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth"};
 
 var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
@@ -61128,7 +61185,7 @@ var SelectedValueList = function SelectedValueList(props) {
     var title = props.selectedValueTemplate(x);
     return React__default.createElement("div", {
       key: x.id,
-      className: styles$m['vitro-selected-item'],
+      className: styles$n['vitro-selected-item'],
       title: title
     }, props.getHtmlValue ? React__default.createElement("div", {
       className: htmlValueStyles['vitro-item-html-value']
@@ -61136,17 +61193,17 @@ var SelectedValueList = function SelectedValueList(props) {
       onClick: function onClick() {
         return props.onOptionValueDelete(x.id);
       },
-      className: styles$m['vitro-button-close']
+      className: styles$n['vitro-button-close']
     }));
   }));
 };
 
-var styles$n = {"vitro-value-list":"_lookup-picker-value-list_vitro-value-list_LSdCMjq","vitro-item":"_lookup-picker-value-list_vitro-item_7yZBz5u","vitro-item-html-value":"_lookup-picker-value-list_vitro-item-html-value_1yl9tXx","vitro-placeholder-empty":"_lookup-picker-value-list_vitro-placeholder-empty_fTVHWwc","vitro-keyword-highlight":"_lookup-picker-value-list_vitro-keyword-highlight_1uESHan","vitro-display-none":"_lookup-picker-value-list_vitro-display-none_2kDzC6K"};
+var styles$o = {"vitro-value-list":"_lookup-picker-value-list_vitro-value-list_LSdCMjq","vitro-item":"_lookup-picker-value-list_vitro-item_7yZBz5u","vitro-item-html-value":"_lookup-picker-value-list_vitro-item-html-value_1yl9tXx","vitro-placeholder-empty":"_lookup-picker-value-list_vitro-placeholder-empty_fTVHWwc","vitro-keyword-highlight":"_lookup-picker-value-list_vitro-keyword-highlight_1uESHan","vitro-display-none":"_lookup-picker-value-list_vitro-display-none_2kDzC6K"};
 
 var ValueListItem = function ValueListItem(props) {
   return React__default.createElement("div", {
     key: props.item.id,
-    className: styles$n['vitro-item'],
+    className: styles$o['vitro-item'],
     onClick: function onClick() {
       return props.onSelect(props.item.id);
     }
@@ -61172,11 +61229,11 @@ var ValueList = function ValueList(props) {
   });
   var createDisplayValue = function createDisplayValue(item) {
     return props.inputValue ? props.filterValueTemplate(item).replace(reg, function (str) {
-      return "<span class=" + styles$n['vitro-keyword-highlight'] + ">" + str + '</span>';
+      return "<span class=" + styles$o['vitro-keyword-highlight'] + ">" + str + '</span>';
     }) : props.filterValueTemplate(item);
   };
   return React__default.createElement("div", {
-    className: styles$n['vitro-value-list'] + (props.isVisible ? CTRL.EMPTY : CTRL.SPACE + styles$n['vitro-display-none'])
+    className: styles$o['vitro-value-list'] + (props.isVisible ? CTRL.EMPTY : CTRL.SPACE + styles$o['vitro-display-none'])
   }, React__default.createElement(commonUi.ScrollBar, {
     onInit: setScrollableElement
   }, props.isPending && React__default.createElement(commonUi.Progress, null), !props.isPending && React__default.createElement(React__default.Fragment, null, props.list.length > 0 ? props.list.map(function (x) {
@@ -61187,7 +61244,7 @@ var ValueList = function ValueList(props) {
       htmlValue: props.getHtmlValue && props.getHtmlValue(x)
     });
   }) : React__default.createElement("div", {
-    className: styles$n['vitro-placeholder-empty']
+    className: styles$o['vitro-placeholder-empty']
   }, props.emptyPlaceholder))));
 };
 
@@ -61196,7 +61253,7 @@ var LOCALE$4;
   LOCALE["PLACEHOLDER_EMPTY"] = "app.common.lookupPicker.empty";
 })(LOCALE$4 || (LOCALE$4 = {}));
 
-var styles$o = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","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$p = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","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 = function LookupPicker(props) {
@@ -61219,7 +61276,7 @@ var LookupPicker = function LookupPicker(props) {
   var _useState6 = React.useState(null),
     valueListRequestToken = _useState6[0],
     setValueListRequestToken = _useState6[1];
-  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$o['vitro-read-only'] : CTRL.EMPTY),
+  var _useState7 = React.useState(props.isDisabled || props.isReadOnly ? styles$p['vitro-read-only'] : CTRL.EMPTY),
     state = _useState7[0],
     setState = _useState7[1];
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
@@ -61295,6 +61352,9 @@ var LookupPicker = function LookupPicker(props) {
       }));
     }
   }, [selectedValueList]);
+  React.useEffect(function () {
+    setState(props.errorMessage ? styles$p['vitro-error'] : CTRL.EMPTY);
+  }, [props.errorMessage]);
   var updateFilteredValueList = function updateFilteredValueList(valueList) {
     var availableValueList = inputValue ? filteredValueList : valueList;
     if (inputValue && inputValue.length >= (props.charCount || 0)) {
@@ -61367,7 +61427,7 @@ var LookupPicker = function LookupPicker(props) {
   };
   var onFocusOut = function onFocusOut(e) {
     var target = e.currentTarget;
-    setState(props.errorMessage ? styles$o['vitro-error'] : CTRL.EMPTY);
+    setState(props.errorMessage ? styles$p['vitro-error'] : CTRL.EMPTY);
     setTimeout(function () {
       if (!target.contains(document.activeElement)) {
         setValueListVisible(false);
@@ -61381,19 +61441,19 @@ var LookupPicker = function LookupPicker(props) {
     });
   };
   var onFocus = function onFocus() {
-    setState(styles$o['vitro-focus']);
+    setState(styles$p['vitro-focus']);
     setValueListVisible(true);
   };
   var copyValue = function copyValue() {
     navigator.clipboard.writeText(selectedValueList.join(CTRL.COMMA));
   };
   var getClassName = function getClassName() {
-    var classList = [styles$o['vitro-lookup-picker'], props.className];
+    var classList = [styles$p['vitro-lookup-picker'], props.className];
     if (props.isDisabled || props.isReadOnly) {
-      classList.push(styles$o['vitro-read-only']);
+      classList.push(styles$p['vitro-read-only']);
     }
     if (props.isMultiSelect) {
-      classList.push(styles$o['vitro-lookup-picker-multi-select']);
+      classList.push(styles$p['vitro-lookup-picker-multi-select']);
     }
     classList.push(state);
     return classList.join(CTRL.SPACE);
@@ -61412,9 +61472,9 @@ var LookupPicker = function LookupPicker(props) {
     text: props.label,
     isRequired: props.isRequired,
     width: props.labelWidth,
-    className: styles$o['vitro-label']
+    className: styles$p['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$o['vitro-content'],
+    className: styles$p['vitro-content'],
     onClick: onFocus
   }, selectedValueList && selectedValueList.length > 0 && (props.isMultiSelect ? true : inputValue.length === 0) ? React__default.createElement(SelectedValueList, {
     list: selectedValueList,
@@ -61431,19 +61491,19 @@ var LookupPicker = function LookupPicker(props) {
     disabled: props.isDisabled,
     readOnly: props.isReadOnly
   }), !props.isDisabled && props.children, React__default.createElement("div", {
-    className: styles$o['vitro-right']
+    className: styles$p['vitro-right']
   }, !props.isMultiSelect && selectedValueList && selectedValueList.length > 0 && !props.isDisabled && !props.isReadOnly && React__default.createElement("div", {
-    className: styles$o['vitro-button-close'],
+    className: styles$p['vitro-button-close'],
     onClick: function onClick() {
       return onOptionValueDelete();
     }
-  }), !props.isDisabled && React__default.createElement("div", {
+  }), !props.isDisabled && !props.isReadOnly && React__default.createElement("div", {
     onClick: function onClick() {
       return setValueListVisible(!valueListVisible);
     },
-    className: valueListVisible ? styles$o['vitro-button-collapse-up'] : styles$o['vitro-button-collapse-bottom']
+    className: valueListVisible ? styles$p['vitro-button-collapse-up'] : styles$p['vitro-button-collapse-bottom']
   }), props.isReadOnly ? React__default.createElement("span", {
-    className: styles$o['vitro-button-copy'],
+    className: styles$p['vitro-button-copy'],
     onClick: copyValue
   }) : null)), !props.isDisabled && (!props.filterMinLength || props.filterMinLength <= inputValue.length) && React__default.createElement(ValueList, {
     isPending: pending,
@@ -61455,38 +61515,38 @@ var LookupPicker = function LookupPicker(props) {
     emptyPlaceholder: props.emptyPlaceholder || localeService.create(LOCALE$4.PLACEHOLDER_EMPTY),
     getHtmlValue: getHtmlValue
   }), props.errorMessage && React__default.createElement("span", {
-    className: styles$o['vitro-error-text']
+    className: styles$p['vitro-error-text']
   }, props.errorMessage));
 };
 
-var styles$p = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
+var styles$q = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
 
 var CommandMenu = function CommandMenu(props) {
   return React__default.createElement("nav", {
-    className: styles$p['vitro-command-menu'] + CTRL.SPACE + 'navbar'
+    className: styles$q['vitro-command-menu'] + CTRL.SPACE + 'navbar'
   }, React__default.createElement("ul", {
     className: 'nav'
   }, props.children));
 };
 
-var styles$q = {"vitro-command-menu-button":"_command-menu-button_vitro-command-menu-button_2IiXVbP","vitro-icon":"_command-menu-button_vitro-icon_1xB4d09"};
+var styles$r = {"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$q['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    imageClassName: styles$q['vitro-icon']
+    className: styles$r['vitro-command-menu-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    imageClassName: styles$r['vitro-icon']
   }, props)));
 };
 
 var itemStyles = {"vitro-item":"_command-menu-item_vitro-item_2pVhk23"};
 
-var styles$r = {"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$s = {"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$r['vitro-item-lookup-picker']
+    className: itemStyles['vitro-item'] + CTRL.SPACE + 'nav-item ' + styles$s['vitro-item-lookup-picker']
   }, React__default.createElement(LookupPicker, Object.assign({}, props, {
-    className: styles$r['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$s['vitro-command-menu-lookup-picker'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   })));
 };
 
@@ -63304,17 +63364,16 @@ UncontrolledDropdown.propTypes = _objectSpread$2({
   onToggle: propTypes.func
 }, Dropdown$2.propTypes);
 
-var styles$s = {"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$t = {"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) {
   return React__default.createElement(DropdownItem$2, {
     onClick: props.onClick,
     toggle: props.toggle === false ? false : true
-  }, props.imageUrl && React__default.createElement(commonUi.Icon, {
+  }, props.imageUrl && React__default.createElement(Icon, {
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
-    alt: props.title,
-    className: styles$s['vitro-icon']
+    className: styles$t['vitro-icon']
   }), props.href ? React__default.createElement(Link, {
     to: props.href
   }, props.text) : React__default.createElement("span", null, props.text));
@@ -63331,16 +63390,15 @@ var CommandMenuItemHeader = function CommandMenuItemHeader(props) {
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
     },
-    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$s['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: itemStyles['vitro-item'] + CTRL.SPACE + styles$t['vitro-command-menu-dropdown-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     "data-show": props.isVisibleFunction
-  }, props.imageUrl && React__default.createElement(commonUi.Icon, {
+  }, props.imageUrl && React__default.createElement(Icon, {
     isHover: isHover,
     defaultUrl: props.imageUrl,
     hoverUrl: props.imageHoverUrl,
-    alt: props.text,
-    className: styles$s['vitro-icon']
+    className: styles$t['vitro-icon']
   }), React__default.createElement("span", null, props.text), !props.isHideChevronDown && React__default.createElement("div", {
-    className: styles$s['vitro-button-collapse-bottom']
+    className: styles$t['vitro-button-collapse-bottom']
   }));
 };
 
@@ -63348,7 +63406,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   return React__default.createElement(UncontrolledDropdown, {
     nav: true,
     inNavbar: true,
-    className: styles$s['vitro-dropdown-button-container']
+    className: styles$t['vitro-dropdown-button-container']
   }, React__default.createElement(DropdownToggle$2, {
     nav: true,
     caret: true
@@ -63362,18 +63420,18 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children));
 };
 
-var styles$t = {"vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-icon-text":"_sidebar-item_vitro-icon-text_3ROhyLK","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-icon":"_sidebar-item_vitro-icon_2B88tow","vitro-item":"_sidebar-item_vitro-item_1BR_7F0"};
+var styles$u = {"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) {
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, React__default.createElement(commonUi.Icon, {
+  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$t['vitro-icon']
+    className: styles$u['vitro-icon']
   }), React__default.createElement("span", {
-    className: styles$t['vitro-icon-text']
+    className: styles$u['vitro-icon-text']
   }, props.text)), React__default.createElement("span", {
-    className: styles$t['vitro-item-text']
+    className: styles$u['vitro-item-text']
   }, props.text));
 };
 
@@ -63390,7 +63448,8 @@ var LinkItem$1 = function LinkItem(props) {
   var _useState = React.useState(false),
     isHover = _useState[0],
     setIsHover = _useState[1];
-  var isActive = isHover || props.link === props.currentUrl || props.activeItem === props.id;
+  var isActive = props.link === props.currentUrl || props.activeItem === props.id;
+  var className = isActive ? styles$u['vitro-active'] : isHover ? styles$u['vitro-hover'] : CTRL.EMPTY;
   return React__default.createElement("li", {
     onMouseEnter: function onMouseEnter() {
       return setIsHover(true);
@@ -63401,24 +63460,25 @@ var LinkItem$1 = function LinkItem(props) {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + PX_UNIT$3 : WIDTH_AUTO
     },
-    className: styles$t['vitro-item']
+    className: styles$u['vitro-item']
   }, props.link && React__default.createElement(Link, {
     to: props.link,
-    className: isActive ? styles$t['vitro-active'] : CTRL.EMPTY
+    className: className
   }, React__default.createElement(Item$1, Object.assign({}, props, {
-    isHover: isActive
+    isHover: isHover || isActive
   }))), props.onClick && React__default.createElement("a", {
     onClick: function onClick() {
       return w$7[props.onClick || CTRL.EMPTY]();
     },
-    className: isActive ? styles$t['vitro-active'] : CTRL.EMPTY
+    className: className
   }, React__default.createElement(Item$1, Object.assign({}, props, {
-    isHover: isActive
+    isHover: isHover || isActive
   }))), props.href && React__default.createElement("a", {
     href: props.href,
-    target: props.isExternal ? TARGET.BLANK : TARGET.SELF
+    target: props.isExternal ? TARGET.BLANK : TARGET.SELF,
+    className: className
   }, React__default.createElement(Item$1, Object.assign({}, props, {
-    isHover: isActive
+    isHover: isHover || isActive
   }))));
 };
 
@@ -63448,7 +63508,7 @@ var SectionList = React.forwardRef(function (props, ref) {
   }));
 });
 
-var styles$u = {"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$v = {"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(props.history.location.pathname),
@@ -63521,7 +63581,7 @@ var Sidebar = function Sidebar(props) {
     var width = containerWidth / count;
     setLinkItemWidth(width);
   };
-  var className = styles$u['vitro-sidebar'] + (props.theme ? CTRL.SPACE + props.theme : CTRL.EMPTY) + CTRL.SPACE + (isMobileView ? 'vitro-bottom-menu' : CTRL.EMPTY);
+  var className = styles$v['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'
@@ -63534,7 +63594,7 @@ var Sidebar = function Sidebar(props) {
     currentUrl: currentUrl,
     activeItem: props.activeItem
   })) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$u['vitro-scroll-container'],
+    className: styles$v['vitro-scroll-container'],
     ref: menuRef
   }, React__default.createElement(SectionList, {
     itemList: itemList,
@@ -63544,40 +63604,40 @@ var Sidebar = function Sidebar(props) {
     linkItemWidth: linkItemWidth
   })), React__default.createElement("button", {
     onClick: scroll,
-    className: styles$u['vitro-button-more']
+    className: styles$v['vitro-button-more']
   })));
 };
 
-var styles$v = {"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$w = {"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$v['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$v['vitro-active'] : CTRL.EMPTY),
+    className: styles$w['vitro-task-tile'] + (props.isActive ? CTRL.SPACE + styles$w['vitro-active'] : CTRL.EMPTY),
     onClick: props.onClick
   }, props.dropdownItemList && React__default.createElement("div", {
-    className: styles$v['vitro-top-right']
+    className: styles$w['vitro-top-right']
   }, React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
-    className: styles$v['vitro-dropdown-button']
+    className: styles$w['vitro-dropdown-button']
   })), props.isShowDeleteButton && React__default.createElement("div", {
-    className: styles$v['vitro-button-cancel'],
+    className: styles$w['vitro-button-cancel'],
     onClick: props.onDeleteClick
   }), props.description && React__default.createElement("div", {
-    className: styles$v['vitro-description']
+    className: styles$w['vitro-description']
   }, props.description), React__default.createElement("div", {
-    className: styles$v['vitro-title']
+    className: styles$w['vitro-title']
   }, props.title), props.comment && React__default.createElement("div", {
-    className: styles$v['vitro-comment']
+    className: styles$w['vitro-comment']
   }, props.comment), React__default.createElement("div", {
-    className: styles$v['vitro-content']
+    className: styles$w['vitro-content']
   }, props.userList && React__default.createElement(commonUi.TaskUserList, {
     itemList: props.userList
   })), React__default.createElement("div", {
-    className: styles$v['vitro-bottom-right']
+    className: styles$w['vitro-bottom-right']
   }, props.dateComment, " \xA0 ", props.date), props.children);
 };
 
-var styles$w = {"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$x = {"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);
@@ -63609,7 +63669,7 @@ var Alert$1 = function Alert(props) {
     }
   };
   var actionList = props.actionList && React__default.createElement("div", {
-    className: styles$w['vitro-alert-action-list']
+    className: styles$x['vitro-alert-action-list']
   }, props.actionList.map(function (a) {
     return React__default.createElement(Button$1, {
       key: a.text,
@@ -63618,7 +63678,7 @@ var Alert$1 = function Alert(props) {
       }
     }, a.text);
   }));
-  var className = styles$w['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$w['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
+  var className = styles$x['vitro-alert'] + CTRL.SPACE + (props.isPositionCenter && styles$x['vitro-position-center']) + CTRL.SPACE + (props.className ? props.className : CTRL.EMPTY);
   return React__default.createElement("div", {
     tabIndex: 1,
     onBlur: onFocusOut,
@@ -63628,13 +63688,13 @@ var Alert$1 = function Alert(props) {
     variant: props.type,
     onClose: props.onClose
   }, React__default.createElement("div", {
-    className: styles$w['vitro-alert-content']
+    className: styles$x['vitro-alert-content']
   }, React__default.createElement("div", {
-    className: styles$w['vitro-icon']
+    className: styles$x['vitro-icon']
   }), React__default.createElement("div", {
-    className: styles$w['vitro-text']
+    className: styles$x['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$w['vitro-button-close'],
+    className: styles$x['vitro-button-close'],
     onClick: onClose
   })), props.text && props.children, props.isMultiline && actionList));
 };
@@ -63670,7 +63730,7 @@ var DialogHeader = function DialogHeader(props) {
 
 var dialogStyles = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg"};
 
-var styles$x = {"vitro-dialog-button-close":"_dialog-button-close_vitro-dialog-button-close_1p27cEz","vitro-button-close":"_dialog-button-close_vitro-button-close_2BpzTR0"};
+var styles$y = {"vitro-dialog-button-close":"_dialog-button-close_vitro-dialog-button-close_1p27cEz","vitro-button-close":"_dialog-button-close_vitro-button-close_2BpzTR0"};
 
 var Dialog = function Dialog(props) {
   var className = dialogStyles['vitro-dialog'];
@@ -63691,7 +63751,7 @@ var Dialog = function Dialog(props) {
     width: props.width,
     height: props.height
   }, props.isDismissible && React__default.createElement("button", {
-    className: styles$x['vitro-dialog-button-close'],
+    className: styles$y['vitro-dialog-button-close'],
     onClick: onClose
   }), React__default.createElement(DialogHeader, {
     title: props.title
@@ -63700,19 +63760,19 @@ var Dialog = function Dialog(props) {
   }) : React__default.cloneElement(props.children, _extends({}, props))));
 };
 
-var styles$y = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
+var styles$z = {"vitro-dialog-content":"_dialog-content_vitro-dialog-content_qQNWu6x"};
 
 var DialogContent = function DialogContent(props) {
   return React__default.createElement("div", {
-    className: styles$y['vitro-dialog-content']
+    className: styles$z['vitro-dialog-content']
   }, props.children);
 };
 
-var styles$z = {"vitro-dialog-button":"_dialog-button_vitro-dialog-button_1fQ5l22"};
+var styles$A = {"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$z['vitro-dialog-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$A['vitro-dialog-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }));
 };
 
@@ -63732,7 +63792,7 @@ var DialogCloseButton = function DialogCloseButton(props) {
     onClick: props.onClose,
     text: props.text,
     isDisabled: props.isDisabled,
-    className: styles$x['vitro-button-close']
+    className: styles$y['vitro-button-close']
   });
 };
 
@@ -63743,14 +63803,14 @@ var LOCALE$5;
   LOCALE["ACTION_SAVE"] = "app.common.action.save";
 })(LOCALE$5 || (LOCALE$5 = {}));
 
-var styles$A = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
+var styles$B = {"vitro-dialog-footer":"_dialog-footer_vitro-dialog-footer_2vUQ3aG"};
 
 var DialogFooter = function DialogFooter(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var labelClose = props.labelClose || localeService.create(props.onActionClick ? LOCALE$5.ACTION_CANCEL : LOCALE$5.ACTION_CLOSE);
   var labelAction = props.labelAction || localeService.create(LOCALE$5.ACTION_SAVE);
   return React__default.createElement("div", {
-    className: styles$A['vitro-dialog-footer']
+    className: styles$B['vitro-dialog-footer']
   }, props.children, props.onActionClick && React__default.createElement(DialogButton, {
     text: labelAction,
     onClick: props.onActionClick
@@ -63760,7 +63820,7 @@ var DialogFooter = function DialogFooter(props) {
   }));
 };
 
-var styles$B = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta"};
+var styles$C = {"vitro-user-profile":"_user-profile_vitro-user-profile_11XpBoQ","vitro-dropdown-item":"_user-profile_vitro-dropdown-item_dSErsta"};
 
 var UserProfileMenuItem = function UserProfileMenuItem(props) {
   var onClick = function onClick() {
@@ -63771,21 +63831,21 @@ var UserProfileMenuItem = function UserProfileMenuItem(props) {
   };
   if (props.link) {
     return React__default.createElement("div", {
-      className: styles$B['vitro-dropdown-item'],
+      className: styles$C['vitro-dropdown-item'],
       onClick: onClick
     }, React__default.createElement(Link, {
       to: props.link
-    }, props.imageUrl && React__default.createElement(commonUi.Icon, {
+    }, props.imageUrl && React__default.createElement(Icon, {
       defaultUrl: props.imageUrl,
       hoverUrl: props.hoverImageUrl
     }), props.text));
   }
   if (props.onClick) {
     return React__default.createElement("div", {
-      className: styles$B['vitro-dropdown-item'],
+      className: styles$C['vitro-dropdown-item'],
       key: props.text,
       onClick: onClick
-    }, props.imageUrl && React__default.createElement(commonUi.Icon, {
+    }, props.imageUrl && React__default.createElement(Icon, {
       defaultUrl: props.imageUrl,
       hoverUrl: props.hoverImageUrl
     }), props.text);
@@ -63816,11 +63876,11 @@ var UserProfile = function UserProfile(props) {
   return React__default.createElement(Dropdown$2, {
     isOpen: dropdownOpen,
     toggle: toggle,
-    className: styles$B['vitro-user-profile']
+    className: styles$C['vitro-user-profile']
   }, React__default.createElement(DropdownToggle$2, {
     caret: true
   }, React__default.createElement("div", null, React__default.createElement("span", {
-    className: styles$B['vitro-text-color-white']
+    className: styles$C['vitro-text-color-white']
   }, createSurnameWithInitials(props.userName)), React__default.createElement(Avatar, {
     userName: props.userName,
     isBigSize: true
@@ -63840,13 +63900,61 @@ var UserLookupPicker = function UserLookupPicker(props) {
   }));
 };
 
+var styles$D = {"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'
+  }, React__default.createElement("div", {
+    className: styles$D['vitro-title']
+  }, props.filterDropdownList && React__default.createElement(DropdownButton, {
+    itemList: props.filterDropdownList,
+    className: styles$D['vitro-dropdown-button']
+  }), React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
+    className: 'vitro-content'
+  }, props.children));
+};
+
+var styles$E = {"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$E['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$E['vitro-active'] : CTRL.EMPTY)
+  }, React__default.createElement("div", {
+    className: styles$E['vitro-flex']
+  }, React__default.createElement(Avatar, {
+    userName: props.userName,
+    image: props.userImageUrl,
+    className: styles$E['vitro-avatar']
+  }), React__default.createElement("div", {
+    className: styles$E['vitro-content']
+  }, React__default.createElement("div", null, React__default.createElement("div", {
+    className: styles$E['vitro-title']
+  }, React__default.createElement("span", null, props.title || props.userName)), React__default.createElement("div", {
+    className: styles$E['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
+  }, React__default.createElement("p", {
+    dangerouslySetInnerHTML: {
+      __html: props.message
+    }
+  }), props.children)), props.isShowDetail && React__default.createElement("span", {
+    className: styles$E['vitro-due-date']
+  }, props.date)), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
+    itemList: props.dropdownItemList,
+    onToggle: props.onDropdownToggle,
+    className: styles$E['vitro-dropdown-button']
+  })));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
+exports.Activity = Activity;
+exports.ActivityItem = ActivityItem;
 exports.Alert = Alert$1;
 exports.Avatar = Avatar;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button$2;
+exports.Checkbox = Checkbox;
 exports.CommandMenu = CommandMenu;
 exports.CommandMenuButton = CommandMenuButton;
 exports.CommandMenuDropdownButton = CommandMenuDropdownButton;
@@ -63860,6 +63968,7 @@ exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
 exports.DropdownButton = DropdownButton;
+exports.Icon = Icon;
 exports.Input = Input;
 exports.IssueTile = IssueTile;
 exports.Label = Label;