@vitrosoftware/common-ui-ts 1.1.102 → 1.1.104

package/dist/index.js

@@ -195,7 +195,11 @@ var app$1 = {
 			textareaLabel: "Описание"
 		},
 		messageInput: {
-			placeholder: "Добавить комментарий..."
+			placeholder: "Добавить комментарий...",
+			action: {
+				deleteFile: "Удалить файл",
+				addFile: "Прикрепить файл"
+			}
 		},
 		linkInput: {
 			tooltip: {
@@ -21462,6 +21466,8 @@ var ATTRIBUTE;
   ATTRIBUTE["ALIGN"] = "Align";
   ATTRIBUTE["TIP"] = "Tip";
   ATTRIBUTE["TIP_POSITION"] = "TipPosition";
+  ATTRIBUTE["HTML"] = "Html";
+  ATTRIBUTE["CLASS"] = "Class";
 })(ATTRIBUTE || (ATTRIBUTE = {}));
 var DRAG_ITEM_TYPE;
 (function (DRAG_ITEM_TYPE) {
@@ -60411,7 +60417,7 @@ var KEY_CODE = function KEY_CODE() {};
 KEY_CODE.ENTER = 13;
 KEY_CODE.ESC = 27;
 
-var styles$i = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg","vitro-dialog-button-close":"_dialog_vitro-dialog-button-close_2TF5iry","vitro-hidden-content":"_dialog_vitro-hidden-content_niGbpGx","vitro-hidden":"_dialog_vitro-hidden_1kSAyNC"};
+var styles$i = {"vitro-dialog":"_dialog_vitro-dialog_2NzcRZg","vitro-dialog-button-close":"_dialog_vitro-dialog-button-close_2TF5iry","vitro-hidden-content":"_dialog_vitro-hidden-content_niGbpGx","vitro-hidden":"_dialog_vitro-hidden_1kSAyNC","vitro-display-none":"_dialog_vitro-display-none_T-eWeyA"};
 
 var Dialog = function Dialog(props) {
   var _props$buttonList;
@@ -60424,7 +60430,7 @@ var Dialog = function Dialog(props) {
   var _useState3 = React.useState(false),
     isMobileView = _useState3[0],
     setIsMobileView = _useState3[1];
-  var className = styles$i['vitro-dialog'];
+  var className = styles$i['vitro-dialog'] + (props.isShow === false ? CTRL.SPACE + styles$i['vitro-display-none'] : CTRL.EMPTY);
   var showFooter = !props.isHideFooter && (((_props$buttonList = props.buttonList) === null || _props$buttonList === void 0 ? void 0 : _props$buttonList.length) || props.onClose);
   React.useEffect(function () {
     updateIsMobileView();
@@ -60471,7 +60477,7 @@ var Dialog = function Dialog(props) {
   }, props.isDismissible && React__default.createElement(ImageButton, {
     className: styles$i['vitro-dialog-button-close'],
     onClick: onClose
-  }), React__default.createElement(DialogHeader, {
+  }), (props.title || props.subtitle) && React__default.createElement(DialogHeader, {
     title: props.title,
     subtitle: props.subtitle,
     imageUrl: props.imageUrl,
@@ -61055,7 +61061,8 @@ var DropdownButton = function DropdownButton(props) {
     className: styles$n['vitro-dropdown-icon']
   })), React__default.createElement(BootstrapDropdown.Menu, {
     renderOnMount: true,
-    flip: props.flip !== false
+    flip: props.flip !== false,
+    style: props.menuStyle || {}
   }, dropItemList.map(function (x) {
     return React__default.createElement(BootstrapDropdown.Item, {
       key: x.key,
@@ -61085,7 +61092,10 @@ var OverflowButton = function OverflowButton(props) {
           return props.onSelect(x.index);
         }
       });
-    })
+    }),
+    menuStyle: {
+      maxWidth: props.width - 32 + UNIT.PX
+    }
   });
 };
 
@@ -61112,18 +61122,25 @@ var TabGroupHeader = function TabGroupHeader(props) {
   var overflowTabList = [];
   var tabMinWidth = 120;
   var onClick = function onClick(index) {
-    var overflowItem = overflowTabList.find(function (item) {
-      return item.index === index;
-    });
-    if (overflowItem) {
-      setActiveItem(overflowItem);
-    } else {
-      setActiveItem(null);
+    if (!props.isDisabled) {
+      var overflowItem = overflowTabList.find(function (item) {
+        return item.index === index;
+      });
+      if (overflowItem) {
+        setActiveItem(overflowItem);
+      } else {
+        setActiveItem(null);
+      }
+      props.changeTab(index);
     }
-    props.changeTab(index);
+  };
+  var getWidth = function getWidth() {
+    var count = props.itemList.length - overflowTabList.length;
+    var width = props.width - count * 16;
+    return width >= tabMinWidth ? width : tabMinWidth;
   };
   return React__default.createElement(Nav$2, null, props.width > 0 && props.itemList && props.itemList.map(function (item, index) {
-    if ((activeItem ? index + 2 : index + 1) * tabMinWidth < props.width || !props.wrap) {
+    if ((activeItem ? index + 2 : index + 1) * tabMinWidth < getWidth() || !props.wrap) {
       if (activeItem && activeItem.index === index) {
         setActiveItem(null);
       }
@@ -61153,6 +61170,7 @@ var TabGroupHeader = function TabGroupHeader(props) {
   }), props.itemList && props.wrap && React__default.createElement(OverflowButton, {
     list: overflowTabList,
     offset: props.itemList.length - overflowTabList.length,
+    width: props.width,
     onSelect: onClick
   }));
 };
@@ -61220,7 +61238,8 @@ var TabGroupComponent = function TabGroupComponent(props) {
     width: width,
     currentTab: currentTab,
     changeTab: changeTab,
-    wrap: props.wrap
+    wrap: props.wrap,
+    isDisabled: props.isDisabled
   }), React__default.createElement("div", {
     className: 'vitro-content'
   }, component));
@@ -61295,6 +61314,7 @@ var View = function View(props) {
     className: styles$q['vitro-view']
   }, React__default.createElement(TabGroup, {
     itemList: tabList,
+    isDisabled: props.isDisabled,
     className: styles$q['vitro-tab'],
     wrap: true
   }));
@@ -61847,7 +61867,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.102";
+var version$1 = "1.1.104";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -63564,16 +63584,18 @@ var LinkItem$1 = function LinkItem(props) {
   var isActive = !!props.link && (props.link === props.currentUrl && (!props.activeItem || props.activeItem === props.id) || props.altUrlList && props.altUrlList.includes(props.currentUrl));
   var className = isActive ? styles$R['vitro-active'] : isHover ? styles$R['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
-    if (props.onClick) {
-      props.onClick(e);
-    } else if (props.link) {
-      var event = new CustomEvent(exports.EVENT.HISTORY_UPDATE, {
-        detail: {
-          pathname: props.link,
-          newWindow: e && e.button === 1
-        }
-      });
-      window.dispatchEvent(event);
+    if (!props.isDisabled) {
+      if (props.onClick) {
+        props.onClick(e);
+      } else if (props.link) {
+        var event = new CustomEvent(exports.EVENT.HISTORY_UPDATE, {
+          detail: {
+            pathname: props.link,
+            newWindow: e && e.button === 1
+          }
+        });
+        window.dispatchEvent(event);
+      }
     }
   };
   var onMouseDown = function onMouseDown(e) {
@@ -63617,7 +63639,7 @@ var LinkItem$1 = function LinkItem(props) {
     onBlur: function onBlur() {
       return setIsHover(false);
     },
-    href: props.href,
+    href: props.isDisabled ? undefined : props.href,
     target: props.isExternal ? TARGET.BLANK : TARGET.SELF,
     className: className
   }, React__default.createElement(Item$2, Object.assign({}, props, {
@@ -63790,7 +63812,8 @@ var GroupItem = function GroupItem(props) {
       currentUrl: props.currentUrl,
       isSidebarExpanded: props.isSidebarExpanded,
       isMobileView: props.isMobileView,
-      isHidden: !isExpanded
+      isHidden: !isExpanded,
+      isDisabled: props.isDisabled
     }, i)) : i.itemList ? React__default.createElement(GroupItem, Object.assign({
       isSidebarExpanded: props.isSidebarExpanded,
       link: i.link,
@@ -63800,7 +63823,8 @@ var GroupItem = function GroupItem(props) {
       setActiveItem: props.setActiveItem,
       key: i.text,
       currentUrl: props.currentUrl,
-      isMobileView: props.isMobileView
+      isMobileView: props.isMobileView,
+      isDisabled: props.isDisabled
     }, i)) : null;
   }));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("li", {
@@ -63849,7 +63873,8 @@ var Section = function Section(props) {
       key: i.text,
       currentUrl: props.currentUrl,
       isSidebarExpanded: props.isExpanded,
-      isMobileView: props.isMobileView
+      isMobileView: props.isMobileView,
+      isDisabled: props.isDisabled
     }, i)) : i.itemList ? React__default.createElement(GroupItem, Object.assign({
       isSidebarExpanded: props.isExpanded,
       itemList: i.itemList,
@@ -63858,7 +63883,8 @@ var Section = function Section(props) {
       setActiveItem: props.setActiveItem,
       key: i.text,
       currentUrl: props.currentUrl,
-      isMobileView: props.isMobileView
+      isMobileView: props.isMobileView,
+      isDisabled: props.isDisabled
     }, i)) : React__default.createElement("div", null);
   })) : React__default.createElement(React__default.Fragment, null));
 };
@@ -63880,7 +63906,8 @@ var SectionList = React.forwardRef(function (props, ref) {
       activeItem: props.activeItem,
       isMobileView: props.isMobileView,
       container: props.container,
-      setActiveItem: props.setActiveItem
+      setActiveItem: props.setActiveItem,
+      isDisabled: props.isDisabled
     }, section));
   }));
 });
@@ -63977,14 +64004,16 @@ var Sidebar = function Sidebar(props) {
     activeItem: activeItem,
     setActiveItem: setActiveItem,
     isExpanded: !props.sidebar,
-    isMobileView: isMobileView
+    isMobileView: isMobileView,
+    isDisabled: props.isDisabled
   }), React__default.createElement(SectionList, {
     itemList: props.bottomItemList || [],
     currentUrl: currentUrl,
     activeItem: activeItem,
     setActiveItem: setActiveItem,
     isExpanded: !props.sidebar,
-    isMobileView: isMobileView
+    isMobileView: isMobileView,
+    isDisabled: props.isDisabled
   })), React__default.createElement("div", {
     className: styles$T['vitro-logo-container']
   }, React__default.createElement(Item$2, {
@@ -64007,7 +64036,8 @@ var Sidebar = function Sidebar(props) {
     setActiveItem: setActiveItem,
     linkItemWidth: linkItemWidth,
     isExpanded: !props.sidebar,
-    isMobileView: isMobileView
+    isMobileView: isMobileView,
+    isDisabled: props.isDisabled
   }), React__default.createElement(Item$2, {
     text: props.logoText,
     imageUrl: props.logo,
@@ -64282,7 +64312,128 @@ var Activity = function Activity(props) {
   }, props.children));
 };
 
-var styles$$ = {"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$$ = {"vitro-file":"_file_vitro-file_2xkXgkS","vitro-preview":"_file_vitro-preview_2RVdrbm","vitro-preview-container":"_file_vitro-preview-container_2dmbDD7","vitro-flex":"_file_vitro-flex_3nGTlWX","vitro-image":"_file_vitro-image_2Bt3otk","vitro-file-name":"_file_vitro-file-name_2t9Y643","vitro-file-size":"_file_vitro-file-size_15f_E_0","vitro-dropdown-button":"_file_vitro-dropdown-button_3MgI2n9"};
+
+var File = function File(props) {
+  var onClick = function onClick() {
+    if (props.onClick) {
+      props.onClick(props.id);
+    }
+  };
+  var className = [styles$$['vitro-file'], props.className || CTRL.EMPTY, props.isImage ? styles$$['vitro-preview'] : CTRL.EMPTY].join(CTRL.SPACE);
+  return React__default.createElement("div", {
+    className: className
+  }, props.actionList && props.actionList.length ? React__default.createElement(DropdownButton, {
+    itemList: props.actionList,
+    className: styles$$['vitro-dropdown-button'],
+    isIgnoreOverflow: true,
+    flip: false
+  }) : null, React__default.createElement(Tooltip$1, {
+    placement: PLACEMENT.TOP,
+    text: props.tooltip || CTRL.EMPTY
+  }, React__default.createElement("div", {
+    className: styles$$['vitro-preview-container'],
+    onClick: onClick
+  }, React__default.createElement("img", {
+    src: props.preview
+  }))), !props.isImage && React__default.createElement("div", {
+    className: styles$$['vitro-flex']
+  }, props.image && React__default.createElement("img", {
+    src: props.image,
+    className: styles$$['vitro-image']
+  }), React__default.createElement("div", null, React__default.createElement("span", {
+    className: styles$$['vitro-file-name']
+  }, props.name), React__default.createElement("span", {
+    className: styles$$['vitro-file-size']
+  }, props.size))));
+};
+
+var styles$10 = {"vitro-file-list-container":"_attached-file-list_vitro-file-list-container_5PIFyI7","vitro-overflow-button":"_attached-file-list_vitro-overflow-button_39QxX1m","vitro-item-count":"_attached-file-list_vitro-item-count_35PIT1U","vitro-file":"_attached-file-list_vitro-file_2mPE3Rq"};
+
+var AttachedFileListItem = function AttachedFileListItem(props) {
+  var _useState = React.useState(null),
+    hiddenFileList = _useState[0],
+    setHiddenFileList = _useState[1];
+  var onHiddenFileListClick = function onHiddenFileListClick(fileList) {
+    if (props.showHiddenFileList) {
+      props.showHiddenFileList(fileList);
+    } else {
+      setHiddenFileList(fileList);
+    }
+  };
+  return React__default.createElement(React__default.Fragment, null, props.fileList.map(function (file, index) {
+    if (index < props.maxVisibleFileCount) {
+      return React__default.createElement(File, Object.assign({}, file, {
+        className: styles$10['vitro-file']
+      }));
+    }
+    return React__default.createElement(React__default.Fragment, null);
+  }), props.fileList.length > props.maxVisibleFileCount && !hiddenFileList ? React__default.createElement("div", {
+    className: styles$10['vitro-overflow-button']
+  }, React__default.createElement("div", {
+    className: styles$10['vitro-item-count'],
+    onClick: function onClick() {
+      return onHiddenFileListClick(props.fileList.slice(props.maxVisibleFileCount));
+    }
+  }, React__default.createElement(Tooltip$1, {
+    placement: PLACEMENT.TOP,
+    text: props.hiddenFileCountTooltip || CTRL.EMPTY
+  }, React__default.createElement("div", null, CTRL.PLUS + (props.fileList.length - props.maxVisibleFileCount)))), React__default.createElement(File, Object.assign({}, props.fileList[props.maxVisibleFileCount], {
+    actionList: [],
+    className: styles$10['vitro-file']
+  }))) : null, hiddenFileList && hiddenFileList.map(function (file) {
+    return React__default.createElement(File, Object.assign({}, file, {
+      className: styles$10['vitro-file']
+    }));
+  }));
+};
+
+var AttachedFileList = function AttachedFileList(props) {
+  var _useState = React.useState(null),
+    fileList = _useState[0],
+    selFileList = _useState[1];
+  var _useState2 = React.useState(null),
+    imageList = _useState2[0],
+    setImageList = _useState2[1];
+  var maxImageCount = props.maxVisibleImageCount || 3;
+  var maxFileCount = props.maxVisibleFileCount || 3;
+  React.useEffect(function () {
+    init();
+  }, [props.fileList]);
+  var init = function init() {
+    if (props.fileList) {
+      var _imageList = [];
+      var _fileList = [];
+      props.fileList.map(function (file) {
+        if (file.isImage) {
+          _imageList.push(file);
+        } else {
+          _fileList.push(file);
+        }
+      });
+      selFileList(_fileList.length ? _fileList : null);
+      setImageList(_imageList.length ? _imageList : null);
+    } else {
+      selFileList(null);
+      setImageList(null);
+    }
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$10['vitro-file-list-container']
+  }, imageList && React__default.createElement(AttachedFileListItem, {
+    fileList: imageList,
+    maxVisibleFileCount: maxImageCount,
+    hiddenFileCountTooltip: props.hiddenImageCountTooltip,
+    showHiddenFileList: props.showHiddenImageList
+  }), fileList && React__default.createElement(AttachedFileListItem, {
+    fileList: fileList,
+    maxVisibleFileCount: maxFileCount,
+    hiddenFileCountTooltip: props.hiddenFileCountTooltip,
+    showHiddenFileList: props.showHiddenFileList
+  })));
+};
+
+var styles$11 = {"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),
@@ -64323,29 +64474,31 @@ var ActivityMessage = function ActivityMessage(props) {
     }
     return false;
   };
-  return React__default.createElement("div", {
-    className: styles$$['vitro-activity-message']
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$11['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$$['vitro-item']
+      className: styles$11['vitro-item']
     }, item.fieldName && React__default.createElement("span", {
-      className: styles$$['vitro-field-name']
+      className: styles$11['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$$['vitro-value'],
+      className: styles$11['vitro-value'],
       ref: oldValueRef
     }, item.oldValue)), React__default.createElement("span", {
-      className: styles$$['vitro-separator']
-    })), React__default.createElement(Tooltip$1, {
+      className: styles$11['vitro-separator']
+    })), item.newValue && React__default.createElement(Tooltip$1, {
       text: item.newValue,
       isShow: isShowNewValueTooltip ? undefined : false
     }, React__default.createElement("div", {
-      className: item.isMessage ? styles$$['vitro-message'] : styles$$['vitro-value'],
+      className: item.isMessage ? styles$11['vitro-message'] : styles$11['vitro-value'],
       ref: newValueRef
     }, item.newValue)));
-  }));
+  })), props.fileList && React__default.createElement(AttachedFileList, Object.assign({
+    fileList: props.fileList
+  }, props)));
 };
 
 var CONTROL = function CONTROL() {};
@@ -64363,19 +64516,90 @@ CONTROL.LINK_INPUT = 'LinkInput';
 var LOCALE$6;
 (function (LOCALE) {
   LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
+  LOCALE["DELETE_FILE"] = "app.common.messageInput.action.deleteFile";
+  LOCALE["ADD_FILE"] = "app.common.messageInput.action.addFile";
 })(LOCALE$6 || (LOCALE$6 = {}));
 
-var styles$10 = {"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$12 = {"vitro-attached-file-container":"_attached-file_vitro-attached-file-container_3AhHHlm","vitro-attached-file":"_attached-file_vitro-attached-file_1R6PPQN","vitro-button-remove":"_attached-file_vitro-button-remove_3ehToHf"};
+
+var AttachedFile = function AttachedFile(props) {
+  var _useState = React.useState(null),
+    file = _useState[0],
+    setFile = _useState[1];
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  React.useEffect(function () {
+    init();
+  }, [props.file]);
+  var getImageData = function getImageData() {
+    var url = window.URL || window.webkitURL;
+    return {
+      isImage: true,
+      preview: url.createObjectURL(props.file)
+    };
+  };
+  var getFileData = function getFileData() {
+    var name = props.file.name;
+    var size = props.getFileSize(props.file.size);
+    return {
+      isImage: false,
+      preview: props.getFileImage(name),
+      name: name,
+      size: size
+    };
+  };
+  var init = function init() {
+    if (props.file.type.includes('image')) {
+      setFile(getImageData());
+    } else {
+      setFile(getFileData());
+    }
+  };
+  if (!file) {
+    return null;
+  }
+  return React__default.createElement("div", {
+    className: styles$12['vitro-attached-file-container']
+  }, React__default.createElement(Tooltip$1, {
+    placement: PLACEMENT.TOP,
+    text: localeService.create(LOCALE$6.DELETE_FILE)
+  }, React__default.createElement("button", {
+    className: styles$12['vitro-button-remove'],
+    onClick: function onClick() {
+      return props.onDelete(props.index);
+    }
+  })), React__default.createElement(File, Object.assign({
+    id: "" + props.index
+  }, file, {
+    className: styles$12['vitro-attached-file']
+  })));
+};
+
+var styles$13 = {"vitro-flex-box":"_flex-box_vitro-flex-box_3jGTD6k"};
+
+var FlexBox = function FlexBox(props) {
+  return React__default.createElement("div", Object.assign({}, props, {
+    style: props.gap ? {
+      gridGap: props.gap + UNIT.PX
+    } : {},
+    className: styles$13['vitro-flex-box'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }), props.children);
+};
+
+var styles$14 = {"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","vitro-display-none":"_message-input_vitro-display-none_2dYTZ22","vitro-attached-file-list":"_message-input_vitro-attached-file-list_l95S4VR","vitro-flex":"_message-input_vitro-flex_18M_7xU"};
 
-var NEW_LINE = '\n';
 var MessageInput = function MessageInput(props) {
   var _useState = React.useState(true),
     isShowPlaceholder = _useState[0],
     setIsShowPlaceholder = _useState[1];
+  var _useState2 = React.useState([]),
+    fileList = _useState2[0],
+    setFileList = _useState2[1];
   var inputRef = React.useRef(null);
+  var fileInputRef = React.useRef(null);
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var onEnter = function onEnter() {
-    props.onSubmit(getValue());
+    props.onSubmit(getValue(), fileList);
+    setFileList([]);
     resetValue();
   };
   var onKeyDown = function onKeyDown(e) {
@@ -64386,8 +64610,8 @@ var MessageInput = function MessageInput(props) {
     }
   };
   var onChange = function onChange(e) {
+    var value = getValue();
     if (props.onChange) {
-      var value = getValue();
       props.onChange(value);
     }
   };
@@ -64405,7 +64629,7 @@ var MessageInput = function MessageInput(props) {
       return CTRL.EMPTY;
     }
     if (inputRef.current) {
-      return inputRef.current.innerText.replace(NEW_LINE, CTRL.EMPTY);
+      return inputRef.current.innerText;
     }
     return CTRL.EMPTY;
   };
@@ -64414,34 +64638,90 @@ var MessageInput = function MessageInput(props) {
       inputRef.current.innerText = CTRL.EMPTY;
       setIsShowPlaceholder(true);
     }
+    if (fileInputRef.current) {
+      fileInputRef.current.value = CTRL.EMPTY;
+    }
+  };
+  var onSelectFile = function onSelectFile(e) {
+    var fileArray = e.target.files ? Array.from(e.target.files) : null;
+    if (fileArray && fileArray.length) {
+      var list = [].concat(fileList, fileArray);
+      setFileList(list);
+      if (props.onSelectFiles) {
+        props.onSelectFiles(fileArray);
+      }
+    }
+  };
+  var onPasteImage = function onPasteImage(e) {
+    if (e.clipboardData) {
+      var fileArray = Array.from(e.clipboardData.files);
+      if (fileArray.length) {
+        var list = [].concat(fileList, fileArray);
+        setFileList(list);
+        e.preventDefault();
+        if (props.onPasteImage) {
+          props.onPasteImage(fileArray);
+        }
+      }
+    }
+  };
+  var selectFile = function selectFile() {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+  var onDeleteAttachedFile = function onDeleteAttachedFile(index) {
+    var newFileList = [].concat(fileList);
+    newFileList.splice(index, 1);
+    setFileList(newFileList);
   };
   return React__default.createElement("div", {
-    className: styles$10['vitro-message-input'],
+    className: styles$14['vitro-message-input'],
     onDrop: props.onDrop
   }, React__default.createElement("div", {
-    className: styles$10['vitro-control']
+    className: styles$14['vitro-control']
+  }, fileList.length ? React__default.createElement("div", {
+    className: styles$14['vitro-attached-file-list']
+  }, React__default.createElement(ScrollBar, null, fileList.map(function (file, index) {
+    return React__default.createElement(AttachedFile, {
+      file: file,
+      index: index,
+      getFileImage: props.getFileImage,
+      onDelete: onDeleteAttachedFile,
+      getFileSize: props.getFileSize
+    });
+  }))) : null, React__default.createElement(FlexBox, {
+    className: styles$14['vitro-flex']
   }, !props.isDisabled && React__default.createElement(ScrollBar, {
     isHideScrollX: true
   }, React__default.createElement("div", {
-    className: styles$10['vitro-message'],
+    className: styles$14['vitro-message'],
     ref: inputRef,
-    onChange: onChange,
+    onInput: onChange,
     onKeyDown: onKeyDown,
     onFocus: onFocus,
     onBlur: onBlur,
+    onPaste: onPasteImage,
     contentEditable: true
   }, isShowPlaceholder && React__default.createElement("span", {
-    className: styles$10['vitro-placeholder']
-  }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onAddFile && React__default.createElement("button", {
-    onClick: props.onAddFile,
-    className: styles$10['vitro-button-add-file']
-  })), React__default.createElement("button", {
+    className: styles$14['vitro-placeholder']
+  }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onSelectFiles && React__default.createElement(React__default.Fragment, null, React__default.createElement(ImageButton, {
+    onClick: selectFile,
+    tooltipText: localeService.create(LOCALE$6.ADD_FILE),
+    className: styles$14['vitro-button-add-file']
+  }), React__default.createElement("input", {
+    type: 'file',
+    onChange: onSelectFile,
+    ref: fileInputRef,
+    className: styles$14['vitro-display-none'],
+    multiple: true
+  })))), React__default.createElement(ImageButton, {
     onClick: onEnter,
-    className: styles$10['vitro-button-send']
+    className: styles$14['vitro-button-send']
   }));
 };
 
-var styles$11 = {"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-defaultImage-wrapper":"_image-picker_vitro-image-picker-defaultImage-wrapper_1BHZ1he","vitro-image-picker-image-wrapper":"_image-picker_vitro-image-picker-image-wrapper_328OVLU","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-image-default":"_image-picker_vitro-image-default_LhN4iy6","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL","vitro-required":"_image-picker_vitro-required_2lpwlb0","vitro-error-text":"_image-picker_vitro-error-text_3xviMND"};
+var styles$15 = {"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-defaultImage-wrapper":"_image-picker_vitro-image-picker-defaultImage-wrapper_1BHZ1he","vitro-image-picker-image-wrapper":"_image-picker_vitro-image-picker-image-wrapper_328OVLU","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-image-default":"_image-picker_vitro-image-default_LhN4iy6","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL","vitro-required":"_image-picker_vitro-required_2lpwlb0","vitro-error-text":"_image-picker_vitro-error-text_3xviMND"};
 
 var ACTION$1;
 (function (ACTION) {
@@ -64460,16 +64740,16 @@ var ImagePicker = function ImagePicker(props) {
   var renderPreview = function renderPreview() {
     if (props.defaultUrl) {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$11['vitro-image-picker-image-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$15['vitro-image-picker-image-wrapper']
       }, React__default.createElement(Image, {
         defaultUrl: props.defaultUrl,
-        className: props.classNameImage ? props.classNameImage : styles$11['vitro-image-picker-image']
+        className: props.classNameImage ? props.classNameImage : styles$15['vitro-image-picker-image']
       }));
     } else {
       return React__default.createElement("div", {
-        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$11['vitro-image-picker-defaultImage-wrapper']
+        className: props.classNameDefaultImage ? props.classNameDefaultImage : styles$15['vitro-image-picker-defaultImage-wrapper']
       }, React__default.createElement("div", {
-        className: styles$11['vitro-image-default']
+        className: styles$15['vitro-image-default']
       }));
     }
   };
@@ -64509,28 +64789,28 @@ 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$11['vitro-image-picker-wrapper']
+    className: styles$15['vitro-image-picker-wrapper']
   }, React__default.createElement("div", {
-    className: styles$11['vitro-image-picker-label-wrapper']
+    className: styles$15['vitro-image-picker-label-wrapper']
   }, props.label ? props.label : '', props.isRequired && React__default.createElement("span", {
-    className: styles$11['vitro-required']
+    className: styles$15['vitro-required']
   }, CTRL.ASTERISK)), React__default.createElement("div", {
-    className: props.classNameRoot ? props.classNameRoot : styles$11['vitro-image-picker-root']
+    className: props.classNameRoot ? props.classNameRoot : styles$15['vitro-image-picker-root']
   }, !props.isReadOnly && React__default.createElement(DropdownButton, {
     itemList: defaultItemList,
-    className: styles$11['vitro-image-picker-dropdown-wrapper']
+    className: styles$15['vitro-image-picker-dropdown-wrapper']
   }), React__default.createElement("input", {
     type: 'file',
-    className: styles$11['vitro-image-picker-input'],
+    className: styles$15['vitro-image-picker-input'],
     ref: inputFileRef,
     onChange: onChange,
     accept: "image/*"
   }), renderPreview()), props.errorMessage && React__default.createElement("span", {
-    className: styles$11['vitro-error-text']
+    className: styles$15['vitro-error-text']
   }, props.errorMessage));
 };
 
-var styles$12 = {"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-image":"_criterion_vitro-image_1f6DKPL","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$16 = {"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-image":"_criterion_vitro-image_1f6DKPL","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) {
@@ -64588,13 +64868,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$12['vitro-condition-list-container'];
+      container.className = styles$16['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$12['vitro-condition-list'],
+        className: styles$16['vitro-condition-list'],
         onBlur: onBlur
       }, props.itemList.map(function (item) {
         return React__default.createElement("li", {
@@ -64603,7 +64883,7 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
           }
         }, item.imageUrl && React__default.createElement(Image, {
           defaultUrl: item.imageUrl,
-          className: styles$12['vitro-image']
+          className: styles$16['vitro-image']
         }), item.text);
       }));
       reactDom.render(content, container);
@@ -64612,12 +64892,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$12['vitro-condition-select']
+    className: styles$16['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Image, {
     defaultUrl: condition.imageUrl,
-    className: styles$12['vitro-image']
+    className: styles$16['vitro-image']
   }) : condition.text)));
 });
 
@@ -64697,13 +64977,13 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$12['vitro-focus']);
+    setState(styles$16['vitro-focus']);
     if (componentProps.onFocus) {
       componentProps.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(componentProps.errorMessage ? styles$12['vitro-error'] : CTRL.EMPTY);
+    setState(componentProps.errorMessage ? styles$16['vitro-error'] : CTRL.EMPTY);
     if (componentProps.onBlur) {
       componentProps.onBlur(e);
     }
@@ -64733,12 +65013,12 @@ var Criterion = function Criterion(props) {
     var root = document.getElementById(ROOT_ID$1);
     if (position && root) {
       var container = document.createElement('div');
-      container.className = styles$12['vitro-operator-list-container'];
+      container.className = styles$16['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$12['vitro-operator-list']
+        className: styles$16['vitro-operator-list']
       }, props.operatorList.map(function (item) {
         return React__default.createElement("li", {
           onClick: function onClick() {
@@ -64751,25 +65031,25 @@ var Criterion = function Criterion(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$12['vitro-criterion-container']
+    className: styles$16['vitro-criterion-container']
   }, React__default.createElement("div", {
-    className: styles$12['vitro-operator-select-container']
+    className: styles$16['vitro-operator-select-container']
   }, props.isShowOperatorSelect && React__default.createElement("div", {
     ref: operatorSelectRef,
-    className: styles$12['vitro-operator-select'],
+    className: styles$16['vitro-operator-select'],
     onClick: toggleOperatorSelect
   }, React__default.createElement("div", null, operator.text))), React__default.createElement("div", {
-    className: styles$12['vitro-control'] + CTRL.SPACE + state
+    className: styles$16['vitro-control'] + CTRL.SPACE + state
   }, React__default.createElement("div", {
     ref: labelRef,
-    className: styles$12['vitro-label']
+    className: styles$16['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$12['vitro-control'],
+    className: styles$16['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
     onChange: onControlChange,
@@ -64781,30 +65061,19 @@ var Criterion = function Criterion(props) {
     onClick: function onClick() {
       return props.onDelete(componentProps.id);
     },
-    className: styles$12['vitro-button-cancel']
+    className: styles$16['vitro-button-cancel']
   }));
 };
 
-var styles$13 = {"vitro-flex-box":"_flex-box_vitro-flex-box_3jGTD6k"};
-
-var FlexBox = function FlexBox(props) {
-  return React__default.createElement("div", Object.assign({}, props, {
-    style: props.gap ? {
-      gridGap: props.gap + UNIT.PX
-    } : {},
-    className: styles$13['vitro-flex-box'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
-  }), props.children);
-};
-
 var LOCALE$8;
 (function (LOCALE) {
   LOCALE["VALUE_COUNT"] = "app.common.searchInput.valueCount";
   LOCALE["PLACEHOLDER"] = "app.common.searchInput.placeholder";
 })(LOCALE$8 || (LOCALE$8 = {}));
 
-var styles$14 = {"vitro-search-input":"_search-input_vitro-search-input_3M9i4Gi","vitro-search-value-list":"_search-input_vitro-search-value-list_1Gqj4bm","vitro-button-cancel":"_search-input_vitro-button-cancel_xqdMNLo","vitro-search-value":"_search-input_vitro-search-value_TJm1BCf"};
+var styles$17 = {"vitro-search-input":"_search-input_vitro-search-input_3M9i4Gi","vitro-search-value-list":"_search-input_vitro-search-value-list_1Gqj4bm","vitro-button-cancel":"_search-input_vitro-button-cancel_xqdMNLo","vitro-search-value":"_search-input_vitro-search-value_TJm1BCf"};
 
-var NEW_LINE$1 = '\n';
+var NEW_LINE = '\n';
 var SearchInput = function SearchInput(props) {
   var _props$searchCriterio;
   var _useState = React.useState(CTRL.EMPTY),
@@ -64886,10 +65155,10 @@ var SearchInput = function SearchInput(props) {
     var list = valueList.map(function (x) {
       return getTextValue(x);
     });
-    return list.join(NEW_LINE$1);
+    return list.join(NEW_LINE);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$14['vitro-search-input'], props.className || CTRL.EMPTY, state];
+    var classList = [styles$17['vitro-search-input'], props.className || CTRL.EMPTY, state];
     if (props.isActive) {
       classList.push('vitro-active');
     }
@@ -64899,24 +65168,24 @@ var SearchInput = function SearchInput(props) {
     var firstValue = valueList[0];
     var list = valueList.slice(1);
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
-      className: styles$14['vitro-search-value']
+      className: styles$17['vitro-search-value']
     }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue([firstValue]);
       },
-      className: styles$14['vitro-button-cancel']
+      className: styles$17['vitro-button-cancel']
     })), list.length >= 1 ? React__default.createElement(Tooltip$1, {
       text: getTextValueList(list),
       placement: PLACEMENT.BOTTOM
     }, React__default.createElement("div", null, React__default.createElement(FlexBox, {
-      className: styles$14['vitro-search-value']
+      className: styles$17['vitro-search-value']
     }, localeService.create(LOCALE$8.VALUE_COUNT, {
       count: list.length
     }), React__default.createElement("button", {
       onClick: function onClick() {
         return onRemoveValue(list);
       },
-      className: styles$14['vitro-button-cancel']
+      className: styles$17['vitro-button-cancel']
     })))) : null);
   };
   return React__default.createElement("div", {
@@ -64925,7 +65194,7 @@ var SearchInput = function SearchInput(props) {
     className: 'vitro-button-search',
     onClick: onSubmit
   }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
-    className: styles$14['vitro-search-value-list']
+    className: styles$17['vitro-search-value-list']
   }, props.searchCriterionList && props.searchCriterionList.length ? getSelectedValueList(props.searchCriterionList) : React__default.createElement("input", {
     type: 'text',
     ref: inputRef,
@@ -64936,7 +65205,7 @@ var SearchInput = function SearchInput(props) {
     placeholder: !props.isActive ? props.placeholder || localeService.create(LOCALE$8.PLACEHOLDER) : CTRL.EMPTY
   })), props.children, value || (_props$searchCriterio = props.searchCriterionList) !== null && _props$searchCriterio !== void 0 && _props$searchCriterio.length || props.isActive ? React__default.createElement("button", {
     onClick: onCancel,
-    className: styles$14['vitro-button-cancel']
+    className: styles$17['vitro-button-cancel']
   }) : null));
 };
 
@@ -65124,7 +65393,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })));
 });
 
-var styles$15 = {"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","vitro-button-settings":"_search_vitro-button-settings_oJCn__t"};
+var styles$18 = {"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","vitro-button-settings":"_search_vitro-button-settings_oJCn__t"};
 
 var Filter = function Filter(props) {
   var _useState = React.useState(null),
@@ -65182,7 +65451,7 @@ var Filter = function Filter(props) {
     props.onChange(changedFieldValueMap);
   };
   return React__default.createElement("div", {
-    className: styles$15['vitro-filter']
+    className: styles$18['vitro-filter']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
     fieldValueMap: fieldValueMap,
@@ -65198,7 +65467,7 @@ var LOCALE$9;
   LOCALE["EMPTY_PLACEHOLDER"] = "app.common.searchValueList.emptyPlaceholder";
 })(LOCALE$9 || (LOCALE$9 = {}));
 
-var styles$16 = {"vitro-search-input-container":"_search-value-list_vitro-search-input-container_167CEqB","vitro-empty-placeholder":"_search-value-list_vitro-empty-placeholder_2f08lDK"};
+var styles$19 = {"vitro-search-input-container":"_search-value-list_vitro-search-input-container_167CEqB","vitro-empty-placeholder":"_search-value-list_vitro-empty-placeholder_2f08lDK"};
 
 var SearchValueList = function SearchValueList(props) {
   var _useState = React.useState(props.itemList),
@@ -65225,7 +65494,7 @@ var SearchValueList = function SearchValueList(props) {
   return React__default.createElement("div", {
     className: props.className || CTRL.EMPTY
   }, React__default.createElement("div", {
-    className: styles$16['vitro-search-input-container']
+    className: styles$19['vitro-search-input-container']
   }, React__default.createElement(SearchInput, {
     onCancel: onSearchCancel,
     onChange: onInputChange,
@@ -65234,11 +65503,11 @@ var SearchValueList = function SearchValueList(props) {
   })), React__default.createElement(ScrollBar, null, props.children, itemList.length ? itemList.map(function (item) {
     return props.valueTemplate(item);
   }) : React__default.createElement("span", {
-    className: styles$16['vitro-empty-placeholder']
+    className: styles$19['vitro-empty-placeholder']
   }, props.emptyPlaceHolder || localeService.create(LOCALE$9.EMPTY_PLACEHOLDER))));
 };
 
-var styles$17 = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
+var styles$1a = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
 
 var CheckboxList = function CheckboxList(props) {
   var _useState = React.useState(props.itemList),
@@ -65273,14 +65542,14 @@ var CheckboxList = function CheckboxList(props) {
       onChange: function onChange(value, name) {
         return _onChange(value, item.id);
       },
-      className: styles$17['vitro-checkbox']
+      className: styles$1a['vitro-checkbox']
     });
   };
   var filterValueTemplate = function filterValueTemplate(item) {
     return item.name;
   };
   return React__default.createElement("div", {
-    className: styles$17['vitro-checkbox-list']
+    className: styles$1a['vitro-checkbox-list']
   }, React__default.createElement(SearchValueList, {
     itemList: props.itemList,
     valueTemplate: getCheckbox,
@@ -65353,7 +65622,7 @@ var Search = function Search(props) {
   }, [window.innerWidth]);
   React.useEffect(function () {
     if (selectedSearchCriterionList.length) {
-      setState(styles$15['vitro-active']);
+      setState(styles$18['vitro-active']);
     }
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
@@ -65503,7 +65772,7 @@ var Search = function Search(props) {
     }
   };
   var onFocusInput = function onFocusInput() {
-    setState(styles$15['vitro-active']);
+    setState(styles$18['vitro-active']);
   };
   var onRemoveValue = function onRemoveValue(valueList) {
     setSearchCriterionList(valueList);
@@ -65511,7 +65780,7 @@ var Search = function Search(props) {
   };
   return React__default.createElement("div", {
     ref: searchRef,
-    className: styles$15['vitro-search'] + CTRL.SPACE + state
+    className: styles$18['vitro-search'] + CTRL.SPACE + state
   }, React__default.createElement(SearchInput, {
     searchCriterionList: selectedSearchCriterionList,
     onCancel: onCancel,
@@ -65522,12 +65791,12 @@ var Search = function Search(props) {
     onFocus: onFocusInput,
     isActive: state || isShowDialog ? true : false,
     isMobileView: isMobileView,
-    className: styles$15['vitro-control']
+    className: styles$18['vitro-control']
   }, (state || isShowDialog) && React__default.createElement("button", {
     onClick: onSettingsClick,
-    className: styles$15['vitro-button-settings'] + (isShowDialog ? CTRL.SPACE + styles$15['vitro-active'] : CTRL.EMPTY)
+    className: styles$18['vitro-button-settings'] + (isShowDialog ? CTRL.SPACE + styles$18['vitro-active'] : CTRL.EMPTY)
   })), isShowDialog && React__default.createElement("div", {
-    className: styles$15['vitro-settings-dialog']
+    className: styles$18['vitro-settings-dialog']
   }, React__default.createElement(Filter, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
@@ -65538,24 +65807,24 @@ var Search = function Search(props) {
     getConditionList: props.getConditionList,
     getDefaultCondition: props.getDefaultCondition
   }), isShowAddFieldButton && React__default.createElement("div", {
-    className: styles$15['vitro-add-field']
+    className: styles$18['vitro-add-field']
   }, React__default.createElement(Button$2, {
     text: props.labelAddField,
     onClick: onAddField,
-    className: styles$15['vitro-add-field-button']
+    className: styles$18['vitro-add-field-button']
   }), isShowAddFieldDialog && React__default.createElement("div", {
     ref: addFieldDialogRef,
-    className: styles$15['vitro-add-field-dialog']
+    className: styles$18['vitro-add-field-dialog']
   }, React__default.createElement(CheckboxList, {
     itemList: checkboxFieldList,
     onChange: onFieldListChange,
     isAllSelected: props.isAllFieldsVisible
   }))), React__default.createElement("div", {
-    className: styles$15['vitro-footer']
+    className: styles$18['vitro-footer']
   }, React__default.createElement(Button$2, {
     text: props.labelCancel,
     onClick: closeSettings,
-    className: styles$15['vitro-button-cancel']
+    className: styles$18['vitro-button-cancel']
   }), React__default.createElement(Button$2, {
     text: props.labelSearch,
     onClick: onSubmit
@@ -65595,7 +65864,7 @@ var Splitter = function Splitter(props) {
   }, props.children);
 };
 
-var styles$18 = {"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$1b = {"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),
@@ -65605,42 +65874,42 @@ var RouteItem = function RouteItem(props) {
     isShowComment = _useState2[0],
     setIsShowComment = _useState2[1];
   return React__default.createElement("div", {
-    className: styles$18['vitro-route-item']
+    className: styles$1b['vitro-route-item']
   }, props.children ? React__default.createElement("button", {
-    className: isExpanded ? styles$18['vitro-button-collapse'] : styles$18['vitro-button-expand'],
+    className: isExpanded ? styles$1b['vitro-button-collapse'] : styles$1b['vitro-button-expand'],
     onClick: function onClick() {
       return setIsExpanded(!isExpanded);
     }
   }) : null, React__default.createElement("div", {
-    className: styles$18['vitro-route-item-content']
+    className: styles$1b['vitro-route-item-content']
   }, props.userName && props.status && React__default.createElement("div", {
-    className: styles$18['vitro-route-item-header']
+    className: styles$1b['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$18['vitro-avatar']
+    className: styles$1b['vitro-avatar']
   }), props.userName), React__default.createElement("div", {
-    className: styles$18['vitro-date']
+    className: styles$1b['vitro-date']
   }, props.date)), React__default.createElement("div", null, React__default.createElement("div", null, props.statusColor && React__default.createElement("div", {
-    className: styles$18['vitro-status-color'],
+    className: styles$1b['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$18['vitro-route-item-body']
+    className: styles$1b['vitro-route-item-body']
   }, React__default.createElement("div", {
-    className: styles$18['vitro-flex']
+    className: styles$1b['vitro-flex']
   }, React__default.createElement("span", null, props.name), props.comment && React__default.createElement("button", {
-    className: isShowComment ? styles$18['vitro-button-hide-comment'] : styles$18['vitro-button-show-comment'],
+    className: isShowComment ? styles$1b['vitro-button-hide-comment'] : styles$1b['vitro-button-show-comment'],
     onClick: function onClick() {
       return setIsShowComment(!isShowComment);
     }
   })), isShowComment && props.comment && React__default.createElement("div", {
-    className: styles$18['vitro-comment']
+    className: styles$1b['vitro-comment']
   }, props.comment)), isExpanded && React__default.createElement("div", {
-    className: styles$18['vitro-route-item-child']
+    className: styles$1b['vitro-route-item-child']
   }, props.children)));
 };
 
@@ -65748,7 +66017,132 @@ var BimViewer = function BimViewer(props) {
   });
 };
 
-var styles$19 = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
+var styles$1c = {"vitro-scroll-view":"_scroll-view_vitro-scroll-view_TXQ8QQh"};
+
+var COMPONENT_NAME = 'kendoScrollView';
+var CONTENT_HEIGHT = 100;
+var ScrollView = function ScrollView(props) {
+  var scrollViewRef = React.useRef(null);
+  React.useEffect(function () {
+    destroy();
+    init();
+  }, [props.itemList]);
+  var init = function init() {
+    window.$(scrollViewRef.current).kendoScrollView({
+      navigatable: true,
+      contentHeight: CONTENT_HEIGHT + CTRL.PERCENT,
+      enablePager: props.isEnablePager,
+      change: onChange
+    });
+  };
+  var destroy = function destroy() {
+    var scrollView = window.$(scrollViewRef.current).data(COMPONENT_NAME);
+    if (scrollView) {
+      scrollView.destroy();
+    }
+  };
+  var onChange = function onChange(e) {
+    if (props.onChange) {
+      props.onChange(e.nextPage, e);
+    }
+  };
+  return React__default.createElement("div", {
+    ref: scrollViewRef,
+    className: styles$1c['vitro-scroll-view'] + CTRL.SPACE + (props.className || CTRL.EMPTY)
+  }, props.itemList.map(function (item, index) {
+    return React__default.createElement(item.component, item.props);
+  }));
+};
+
+var styles$1d = {"vitro-image-container":"_page_vitro-image-container_QEXhGHE"};
+
+var Page = function Page(props) {
+  return React__default.createElement("div", {
+    className: styles$1d['vitro-page'],
+    "data-role": "page"
+  }, React__default.createElement("div", {
+    className: styles$1d['vitro-image-container']
+  }, React__default.createElement("img", {
+    src: props.url
+  })));
+};
+
+var styles$1e = {"vitro-image-viewer":"_image-viewer_vitro-image-viewer_19T7Auc","vitro-header":"_image-viewer_vitro-header_1KIbDWk","vitro-button-close":"_image-viewer_vitro-button-close_36TY-iY","vitro-scroll-view":"_image-viewer_vitro-scroll-view_3nuGD7c","vitro-dropdown-button":"_image-viewer_vitro-dropdown-button_2TOT1pw","vitro-pager":"_image-viewer_vitro-pager_1FiaoGR"};
+
+var ImageViewer = React.forwardRef(function (props, ref) {
+  var _props$itemList$;
+  var _useState = React.useState([]),
+    itemList = _useState[0],
+    _setItemList = _useState[1];
+  var _useState2 = React.useState(((_props$itemList$ = props.itemList[0]) === null || _props$itemList$ === void 0 ? void 0 : _props$itemList$.actionList) || []),
+    actionList = _useState2[0],
+    setActionList = _useState2[1];
+  React.useImperativeHandle(ref, function () {
+    return {
+      addImage: function addImage(image) {
+        _setItemList(function (prevState) {
+          return [].concat(prevState, [getPage(image)]);
+        });
+      },
+      setItemList: function setItemList(itemList) {
+        _setItemList(itemList.map(function (item) {
+          return getPage(item);
+        }));
+      }
+    };
+  });
+  React.useEffect(function () {
+    init();
+    window.addEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
+    return function () {
+      window.removeEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
+    };
+  }, []);
+  var init = function init() {
+    var list = props.itemList.map(function (item) {
+      return getPage(item);
+    });
+    _setItemList(list);
+  };
+  var getPage = function getPage(image) {
+    return {
+      component: Page,
+      props: {
+        url: image.url,
+        actionList: image.actionList
+      }
+    };
+  };
+  var onChange = function onChange(nextPage) {
+    if (nextPage !== undefined) {
+      var nextItem = props.itemList[nextPage];
+      setActionList(nextItem ? nextItem.actionList : []);
+    }
+  };
+  var onEscClick = function onEscClick(e) {
+    if (e.keyCode === KEY_CODE.ESC) {
+      props.onCloseClick();
+    }
+  };
+  return React__default.createElement(React__default.Fragment, null, itemList.length ? React__default.createElement("div", {
+    className: styles$1e['vitro-image-viewer']
+  }, React__default.createElement("div", {
+    className: styles$1e['vitro-header']
+  }, React__default.createElement("button", {
+    className: styles$1e['vitro-button-close'],
+    onClick: props.onCloseClick
+  }), actionList.length ? React__default.createElement(DropdownButton, {
+    itemList: actionList,
+    className: styles$1e['vitro-dropdown-button']
+  }) : null), React__default.createElement(ScrollView, {
+    itemList: itemList,
+    onChange: onChange,
+    className: styles$1e['vitro-scroll-view'],
+    isEnablePager: true
+  })) : null);
+});
+
+var styles$1f = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
 
 var PageLayout = function PageLayout(props) {
   var getClassName = function getClassName(sidebar) {
@@ -65762,7 +66156,7 @@ var PageLayout = function PageLayout(props) {
     return CTRL.SPACE + classNameArr.join(CTRL.SPACE);
   };
   return React__default.createElement("div", {
-    className: styles$19['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$1f['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     id: 'vitro-page'
   }, props.children);
 };
@@ -65777,7 +66171,7 @@ var HeaderConstants = {
     get LOCAL_STORAGE_KEY () { return LOCAL_STORAGE_KEY; }
 };
 
-var styles$1a = {"vitro-header":"_header_vitro-header_ta9aLJn"};
+var styles$1g = {"vitro-header":"_header_vitro-header_ta9aLJn"};
 
 var onChangeSidebarMode = function onChangeSidebarMode() {};
 var Header = function Header(props) {
@@ -65820,44 +66214,44 @@ var Header = function Header(props) {
     }
   }, [props.sidebar]);
   return React__default.createElement("div", {
-    className: styles$1a['vitro-header'],
+    className: styles$1g['vitro-header'],
     id: 'vitro-header',
     ref: ref
   }, props.children);
 };
 
-var styles$1b = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
+var styles$1h = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
 
 var SidebarButton = function SidebarButton(props) {
   return React__default.createElement("button", {
-    className: styles$1b['vitro-nav-bar-sidebar-button'],
+    className: styles$1h['vitro-nav-bar-sidebar-button'],
     onClick: props.onClick
   });
 };
 
-var styles$1c = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
+var styles$1i = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
 
 var HeaderNavBar = function HeaderNavBar(props) {
   return React__default.createElement("nav", {
-    className: styles$1c['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
+    className: styles$1i['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
   }, React__default.createElement(SidebarButton, {
     onClick: onChangeSidebarMode
   }), props.children);
 };
 
-var styles$1d = {"vitro-nav-service":"_header-nav-service_vitro-nav-service_1-i4GOh"};
+var styles$1j = {"vitro-nav-service":"_header-nav-service_vitro-nav-service_1-i4GOh"};
 
 var logoStyles = {"vitro-customer-logo":"_header-customer-logo_vitro-customer-logo_2htY4zG"};
 
 var HeaderNavService = function HeaderNavService(props) {
   return React__default.createElement("div", {
-    className: styles$1d['vitro-nav-service']
+    className: styles$1j['vitro-nav-service']
   }, React__default.createElement("div", {
     className: logoStyles['vitro-customer-logo']
   }), props.children);
 };
 
-var styles$1e = {"vitro-product-title":"_product-title_vitro-product-title_2gZcA5j"};
+var styles$1k = {"vitro-product-title":"_product-title_vitro-product-title_2gZcA5j"};
 
 var ProductTitle = function ProductTitle(props) {
   var content = React__default.createElement(React__default.Fragment, null, React__default.createElement(Image, {
@@ -65867,7 +66261,7 @@ var ProductTitle = function ProductTitle(props) {
   if (props.href) {
     return React__default.createElement("a", {
       href: props.href,
-      className: styles$1e['vitro-product-title'],
+      className: styles$1k['vitro-product-title'],
       title: props.imageCaption
     }, content);
   }
@@ -65882,16 +66276,16 @@ var ProductTitle = function ProductTitle(props) {
   };
   return React__default.createElement("a", {
     onClick: onClick,
-    className: styles$1e['vitro-product-title'],
+    className: styles$1k['vitro-product-title'],
     title: props.imageCaption
   }, content);
 };
 
-var styles$1f = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
+var styles$1l = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
 
 var RightAlignControlGroup = function RightAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1f['vitro-right']
+    className: styles$1l['vitro-right']
   }, props.children);
 };
 
@@ -65901,32 +66295,32 @@ var LeftAlignControlGroup = function LeftAlignControlGroup(props) {
   }, props.children);
 };
 
-var styles$1g = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
+var styles$1m = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
 
 var CenterAlignControlGroup = function CenterAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1g['vitro-center']
+    className: styles$1m['vitro-center']
   }, props.children);
 };
 
-var styles$1h = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
+var styles$1n = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
 
 var Main = function Main(props) {
   return React__default.createElement("div", {
-    className: styles$1h['vitro-main'],
+    className: styles$1n['vitro-main'],
     id: 'vitro-main'
   }, props.children);
 };
 
-var styles$1i = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
+var styles$1o = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
 
 var TableViewDetail = function TableViewDetail(props) {
   return React__default.createElement("div", {
-    className: styles$1i['vitro-table-view-detail']
+    className: styles$1o['vitro-table-view-detail']
   }, props.children);
 };
 
-var styles$1j = {"vitro-title":"_expand-control-group_vitro-title_3nqqfyQ","vitro-expand-collapse-button":"_expand-control-group_vitro-expand-collapse-button_hBX5TTj","vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-content":"_expand-control-group_vitro-content_2UPEUhm","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL","vitro-right":"_expand-control-group_vitro-right_jD5r2aS","vitro-button-collapse":"_expand-control-group_vitro-button-collapse_14wEdB1","vitro-button-expand":"_expand-control-group_vitro-button-expand_bwV3dXl"};
+var styles$1p = {"vitro-title":"_expand-control-group_vitro-title_3nqqfyQ","vitro-expand-collapse-button":"_expand-control-group_vitro-expand-collapse-button_hBX5TTj","vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-content":"_expand-control-group_vitro-content_2UPEUhm","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL","vitro-right":"_expand-control-group_vitro-right_jD5r2aS","vitro-button-collapse":"_expand-control-group_vitro-button-collapse_14wEdB1","vitro-button-expand":"_expand-control-group_vitro-button-expand_bwV3dXl"};
 
 var ExpandControlGroup = function ExpandControlGroup(props) {
   var _useState = React.useState(props.isOpen),
@@ -65937,20 +66331,20 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
     props.onClick && props.onClick();
   };
   return React__default.createElement("div", {
-    className: styles$1j['vitro-expand-control-group']
+    className: styles$1p['vitro-expand-control-group']
   }, React__default.createElement("div", {
-    className: styles$1j['vitro-title'],
+    className: styles$1p['vitro-title'],
     onClick: onClick
   }, React__default.createElement(ExpandCollapseButton, {
     isExpanded: isOpen,
     onClick: onClick,
-    className: styles$1j['vitro-expand-collapse-button'] + (props.isRight ? CTRL.SPACE + styles$1j['vitro-right'] : CTRL.EMPTY)
+    className: styles$1p['vitro-expand-collapse-button'] + (props.isRight ? CTRL.SPACE + styles$1p['vitro-right'] : CTRL.EMPTY)
   }), props.title), React__default.createElement("div", {
-    className: styles$1j['vitro-content'] + (isOpen ? CTRL.EMPTY : CTRL.SPACE + styles$1j['vitro-display-none'])
+    className: styles$1p['vitro-content'] + (isOpen ? CTRL.EMPTY : CTRL.SPACE + styles$1p['vitro-display-none'])
   }, props.children));
 };
 
-var styles$1k = {"vitro-control":"_radio_vitro-control_1pRRp6K","vitro-radio-content":"_radio_vitro-radio-content_2iXhEPK","vitro-disabled":"_radio_vitro-disabled_2JSpn9-","vitro-label":"_radio_vitro-label_21dXFJN","vitro-left-label":"_radio_vitro-left-label_3BbOjIR"};
+var styles$1q = {"vitro-control":"_radio_vitro-control_1pRRp6K","vitro-radio-content":"_radio_vitro-radio-content_2iXhEPK","vitro-disabled":"_radio_vitro-disabled_2JSpn9-","vitro-label":"_radio_vitro-label_21dXFJN","vitro-left-label":"_radio_vitro-left-label_3BbOjIR"};
 
 var Radio = React.forwardRef(function (props, ref) {
   var radioRef = React.useRef(null);
@@ -65974,14 +66368,14 @@ var Radio = React.forwardRef(function (props, ref) {
       props.onChange(props.value, e);
     }
   };
-  var className = styles$1k['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1k['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1k['vitro-disabled'] : CTRL.EMPTY) + CTRL.SPACE + (props.className || CTRL.EMPTY);
+  var className = styles$1q['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1q['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1q['vitro-disabled'] : CTRL.EMPTY) + 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$1k['vitro-label']
+    className: styles$1q['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$1k['vitro-radio-content']
+    className: styles$1q['vitro-radio-content']
   }, React__default.createElement("input", {
     ref: radioRef,
     type: 'radio',
@@ -65993,7 +66387,7 @@ var Radio = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$1k['vitro-label']
+    className: styles$1q['vitro-label']
   })));
 });
 
@@ -66007,7 +66401,7 @@ var TARGET$1 = function TARGET() {};
 TARGET$1.BLANK = '_blank';
 TARGET$1.SELF = '_self';
 
-var styles$1l = {"vitro-link-input":"_link-input_vitro-link-input_1FBo8kO","vitro-edit-mode":"_link-input_vitro-edit-mode_2HhUoeO","vitro-read-only":"_link-input_vitro-read-only_AG9_cYJ","vitro-control":"_link-input_vitro-control_1MGkxWi","vitro-edit-button":"_link-input_vitro-edit-button_1PMQnWv"};
+var styles$1r = {"vitro-link-input":"_link-input_vitro-link-input_1FBo8kO","vitro-edit-mode":"_link-input_vitro-edit-mode_2HhUoeO","vitro-read-only":"_link-input_vitro-read-only_AG9_cYJ","vitro-control":"_link-input_vitro-control_1MGkxWi","vitro-edit-button":"_link-input_vitro-edit-button_1PMQnWv"};
 
 var LinkInput = React.forwardRef(function (props, ref) {
   var _useState = React.useState(false),
@@ -66077,7 +66471,7 @@ var LinkInput = React.forwardRef(function (props, ref) {
       link.remove();
     }
   };
-  var className = styles$1l['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1l['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1l['vitro-edit-mode'] : CTRL.EMPTY);
+  var className = styles$1r['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1r['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1r['vitro-edit-mode'] : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className
   }, React__default.createElement(Tooltip$1, {
@@ -66096,11 +66490,11 @@ var LinkInput = React.forwardRef(function (props, ref) {
     isRequired: props.isRequired,
     isError: props.isError,
     isReadOnly: props.isReadOnly ? true : !isEditMode,
-    className: styles$1l['vitro-control']
+    className: styles$1r['vitro-control']
   }))), !props.isReadOnly && !isEditMode && React__default.createElement(ImageButton, {
     onClick: onClickEditButton,
     tooltipText: localeService.create(LOCALE$a.TOOLTIP_EDIT),
-    className: styles$1l['vitro-edit-button']
+    className: styles$1r['vitro-edit-button']
   }));
 });
 
@@ -66156,7 +66550,7 @@ var LOCALE$b;
   LOCALE["SETTING_SYSTEM_INFO"] = "systemInformation";
 })(LOCALE$b || (LOCALE$b = {}));
 
-var styles$1m = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-scrollbar-content":"_system-exception-dialog_vitro-scrollbar-content_2sob8Xl","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
+var styles$1s = {"vitro-system-exception-dialog":"_system-exception-dialog_vitro-system-exception-dialog_2UVdbuB","vitro-image":"_system-exception-dialog_vitro-image_XG5PD8h","vitro-exception":"_system-exception-dialog_vitro-exception_2bLGF01","vitro-scrollbar-content":"_system-exception-dialog_vitro-scrollbar-content_2sob8Xl","vitro-label":"_system-exception-dialog_vitro-label_1Nbb_It","vitro-input":"_system-exception-dialog_vitro-input_262484M","vitro-flex":"_system-exception-dialog_vitro-flex_EHka5VC","vitro-settings-list":"_system-exception-dialog_vitro-settings-list_6N3QiPa","vitro-checkbox":"_system-exception-dialog_vitro-checkbox_354NjHR"};
 
 var settingsList = [LOCALE$b.SETTING_SCREENSHOT, LOCALE$b.SETTING_EXCEPTION_TEXT, LOCALE$b.SETTING_USER_NAME, LOCALE$b.SETTING_SYSTEM_INFO];
 var SystemExceptionDialog = function SystemExceptionDialog(props) {
@@ -66202,46 +66596,46 @@ var SystemExceptionDialog = function SystemExceptionDialog(props) {
     text: props.labelConfirm || localeService.create(LOCALE$b.ACTION_SEND)
   }];
   var hiddenContent = React__default.createElement("div", {
-    className: styles$1m['vitro-settings-list']
+    className: styles$1s['vitro-settings-list']
   }, settingsList.map(function (name, index) {
     return React__default.createElement("div", {
       key: index,
-      className: styles$1m['vitro-flex']
+      className: styles$1s['vitro-flex']
     }, React__default.createElement(Checkbox, {
       label: CTRL.EMPTY,
       name: name,
       value: true,
       onChange: onChangeSetting,
-      className: styles$1m['vitro-checkbox']
+      className: styles$1s['vitro-checkbox']
     }), getCheckboxLabel(name));
   }));
   return React__default.createElement(Dialog, {
     title: localeService.create(LOCALE$b.TITLE),
     subtitle: isMobileView ? CTRL.EMPTY : localeService.create(LOCALE$b.SUBTITLE),
     image: React__default.createElement("div", {
-      className: styles$1m['vitro-image']
+      className: styles$1s['vitro-image']
     }),
     onClose: props.onCancel,
     buttonList: buttonList,
     labelClose: props.labelClose,
-    className: styles$1m['vitro-system-exception-dialog'],
+    className: styles$1s['vitro-system-exception-dialog'],
     hiddenContent: hiddenContent,
     isDismissible: true
   }, React__default.createElement(DialogContent, null, isMobileView && React__default.createElement(Label, {
     text: localeService.create(LOCALE$b.SUBTITLE),
-    className: styles$1m['vitro-label']
+    className: styles$1s['vitro-label']
   }), React__default.createElement(Input, {
     ref: inputRef,
-    className: styles$1m['vitro-input'],
+    className: styles$1s['vitro-input'],
     isMultiline: true
   }), React__default.createElement("div", {
-    className: styles$1m['vitro-exception']
+    className: styles$1s['vitro-exception']
   }, React__default.createElement(ScrollBar, {
-    contentClassName: styles$1m['vitro-scrollbar-content']
+    contentClassName: styles$1s['vitro-scrollbar-content']
   }, props.stackTrace))));
 };
 
-var styles$1n = {"vitro-star-button":"_star-button_vitro-star-button_1_mQ_Gq","vitro-hidden":"_star-button_vitro-hidden_oRKUkzt","vitro-active":"_star-button_vitro-active_2UV6u5C"};
+var styles$1t = {"vitro-star-button":"_star-button_vitro-star-button_1_mQ_Gq","vitro-hidden":"_star-button_vitro-hidden_oRKUkzt","vitro-active":"_star-button_vitro-active_2UV6u5C"};
 
 var StarButton = function StarButton(props) {
   var _useState = React.useState(props.isActive || false),
@@ -66258,11 +66652,11 @@ var StarButton = function StarButton(props) {
   };
   return React__default.createElement("button", {
     onClick: onClick,
-    className: styles$1n['vitro-star-button'] + (isActive ? CTRL.SPACE + styles$1n['vitro-active'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$1t['vitro-star-button'] + (isActive ? CTRL.SPACE + styles$1t['vitro-active'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   });
 };
 
-var styles$1o = {"vitro-item":"_site-item_vitro-item_1eSpRGl","vitro-active":"_site-item_vitro-active_1d0nDLb","vitro-name":"_site-item_vitro-name_141-LTn","vitro-image":"_site-item_vitro-image_3wrW9q4","vitro-default-image":"_site-item_vitro-default-image_fcWWNwv","vitro-hidden":"_site-item_vitro-hidden_d6n2ocz","vitro-mobile-view":"_site-item_vitro-mobile-view_3bXuBr6"};
+var styles$1u = {"vitro-item":"_site-item_vitro-item_1eSpRGl","vitro-active":"_site-item_vitro-active_1d0nDLb","vitro-name":"_site-item_vitro-name_141-LTn","vitro-image":"_site-item_vitro-image_3wrW9q4","vitro-default-image":"_site-item_vitro-default-image_fcWWNwv","vitro-hidden":"_site-item_vitro-hidden_d6n2ocz","vitro-mobile-view":"_site-item_vitro-mobile-view_3bXuBr6"};
 
 var SiteItem = function SiteItem(props) {
   var _useState = React.useState(props.isStarActive || false),
@@ -66283,7 +66677,7 @@ var SiteItem = function SiteItem(props) {
       setIsShowStar(false);
     }
   };
-  var className = [styles$1o['vitro-item'], props.className || CTRL.EMPTY, props.isActive ? styles$1o['vitro-active'] : CTRL.EMPTY, props.isMobileView && styles$1o['vitro-mobile-view']].join(CTRL.SPACE);
+  var className = [styles$1u['vitro-item'], props.className || CTRL.EMPTY, props.isActive ? styles$1u['vitro-active'] : CTRL.EMPTY, props.isMobileView && styles$1u['vitro-mobile-view']].join(CTRL.SPACE);
   return React__default.createElement(FlexBox, {
     onClick: props.onClick,
     onMouseOver: onMouseOver,
@@ -66291,19 +66685,19 @@ var SiteItem = function SiteItem(props) {
     className: className
   }, props.imageUrl ? React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
-    className: styles$1o['vitro-image']
+    className: styles$1u['vitro-image']
   }) : React__default.createElement("div", {
-    className: styles$1o['vitro-default-image']
+    className: styles$1u['vitro-default-image']
   }), React__default.createElement("div", {
-    className: styles$1o['vitro-name']
+    className: styles$1u['vitro-name']
   }, props.name), props.onStar && React__default.createElement(StarButton, {
     onChange: props.onStar,
     isActive: props.isStarActive,
-    className: isShowStar || props.isStarActive ? CTRL.EMPTY : styles$1o['vitro-hidden']
+    className: isShowStar || props.isStarActive ? CTRL.EMPTY : styles$1u['vitro-hidden']
   }));
 };
 
-var styles$1p = {"vitro-site-select":"_site-select_vitro-site-select_2irDOFZ","vitro-flex":"_site-select_vitro-flex_15EJnju","vitro-expand":"_site-select_vitro-expand_KKfRtc8","vitro-collapse":"_site-select_vitro-collapse_B0ZjAm-","vitro-site-list":"_site-select_vitro-site-list_1Yt4nLj","vitro-title":"_site-select_vitro-title_2vfT7F5","vitro-search-input":"_site-select_vitro-search-input_UMmv9PP","vitro-root-item":"_site-select_vitro-root-item_f1rGcQ4","vitro-slide-up-panel":"_site-select_vitro-slide-up-panel_U3Xn-UQ","vitro-search-value-list":"_site-select_vitro-search-value-list_3XlFSA6"};
+var styles$1v = {"vitro-site-select":"_site-select_vitro-site-select_2irDOFZ","vitro-flex":"_site-select_vitro-flex_15EJnju","vitro-expand":"_site-select_vitro-expand_KKfRtc8","vitro-collapse":"_site-select_vitro-collapse_B0ZjAm-","vitro-site-list":"_site-select_vitro-site-list_1Yt4nLj","vitro-title":"_site-select_vitro-title_2vfT7F5","vitro-search-input":"_site-select_vitro-search-input_UMmv9PP","vitro-root-item":"_site-select_vitro-root-item_f1rGcQ4","vitro-slide-up-panel":"_site-select_vitro-slide-up-panel_U3Xn-UQ","vitro-search-value-list":"_site-select_vitro-search-value-list_3XlFSA6"};
 
 var SiteSelect = function SiteSelect(props) {
   var _useState = React.useState(props.itemList),
@@ -66395,48 +66789,58 @@ var SiteSelect = function SiteSelect(props) {
     itemList: visibleItemList,
     valueTemplate: getItem,
     filterValueTemplate: filterValueTemplate,
-    className: styles$1p['vitro-search-value-list'],
-    inputClassName: styles$1p['vitro-search-input']
+    className: styles$1v['vitro-search-value-list'],
+    inputClassName: styles$1v['vitro-search-input']
   }, React__default.createElement(SiteItem, Object.assign({}, props.rootItem, {
     isMobileView: isMobileView,
     onClick: function onClick() {
       return onSelect(props.rootItem);
     },
-    className: styles$1p['vitro-root-item']
+    className: styles$1v['vitro-root-item']
   })), React__default.createElement(FlexBox, {
-    className: styles$1p['vitro-title']
+    className: styles$1v['vitro-title']
   }, props.title, props.onStarChange && React__default.createElement(StarButton, {
     onChange: filterStarActive
   })));
   return React__default.createElement("div", {
-    className: styles$1p['vitro-site-select']
+    className: styles$1v['vitro-site-select']
   }, React__default.createElement(FlexBox, {
     className: 'vitro-flex'
   }, React__default.createElement("h2", {
     onClick: onClick
   }, props.activeItem.name), React__default.createElement(ImageButton, {
-    className: isExpanded ? styles$1p['vitro-collapse'] : styles$1p['vitro-expand'],
+    className: isExpanded ? styles$1v['vitro-collapse'] : styles$1v['vitro-expand'],
     onClick: onClick
   })), isMobileView && React__default.createElement(SlideUpPanel, {
-    className: styles$1p['vitro-slide-up-panel'],
+    className: styles$1v['vitro-slide-up-panel'],
     isShow: isExpanded,
     onClose: function onClose() {
       return setIsExpanded(false);
     }
   }, content), !isMobileView && isExpanded && React__default.createElement("div", {
-    className: styles$1p['vitro-site-list'],
+    className: styles$1v['vitro-site-list'],
     ref: listRef
   }, content));
 };
 
-var styles$1q = {"vitro-bottom":"_bottom-align-control-group_vitro-bottom_3-a5nWD"};
+var styles$1w = {"vitro-bottom":"_bottom-align-control-group_vitro-bottom_3-a5nWD"};
 
 var BottomAlignControlGroup = function BottomAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1q['vitro-bottom']
+    className: styles$1w['vitro-bottom']
   }, props.children);
 };
 
+var styles$1x = {"vitro-linear-progress":"_linear-progress_vitro-linear-progress_1i4VVyb","vitro-bar":"_linear-progress_vitro-bar_2rwmbp3","progress":"_linear-progress_progress_11DTdlB"};
+
+var LinearProgress = function LinearProgress(props) {
+  return React__default.createElement("div", {
+    className: styles$1x['vitro-linear-progress'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, React__default.createElement("div", {
+    className: styles$1x['vitro-bar']
+  }));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
@@ -66471,6 +66875,7 @@ exports.DropdownButton = DropdownButton;
 exports.ExpandCollapseButton = ExpandCollapseButton;
 exports.ExpandControlGroup = ExpandControlGroup;
 exports.FieldIterator = FieldIterator;
+exports.File = File;
 exports.FileVersionSelect = FileVersionSelect;
 exports.FlexBox = FlexBox;
 exports.HEADER = HeaderConstants;
@@ -66482,10 +66887,12 @@ exports.Heading = Heading;
 exports.Image = Image;
 exports.ImageButton = ImageButton;
 exports.ImagePicker = ImagePicker;
+exports.ImageViewer = ImageViewer;
 exports.Input = Input;
 exports.IssueTile = IssueTile;
 exports.Label = Label;
 exports.LeftAlignControlGroup = LeftAlignControlGroup;
+exports.LinearProgress = LinearProgress;
 exports.Link = Link;
 exports.LinkInput = LinkInput;
 exports.Login = Login;
@@ -66510,6 +66917,7 @@ exports.RouteItem = RouteItem;
 exports.SPLITTER = SplitterConstants;
 exports.ScriptLoader = ScriptLoader;
 exports.ScrollBar = ScrollBar;
+exports.ScrollView = ScrollView;
 exports.Search = Search;
 exports.Sidebar = Sidebar;
 exports.SidebarButton = SidebarButton;