@vitrosoftware/common-ui-ts 1.1.113 → 1.1.115

package/dist/index.js

@@ -21209,8 +21209,8 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
   _proto.setRowCanExpand = function setRowCanExpand(row, canExpand) {
     row.CanExpand = canExpand;
   };
-  _proto.getCols = function getCols() {
-    return this.grid.GetCols();
+  _proto.getCols = function getCols(attr1, attr2) {
+    return this.grid.GetCols(attr1, attr2);
   };
   _proto.hasChangeList = function hasChangeList() {
     return this.grid.HasChanges();
@@ -21388,6 +21388,7 @@ var TreeGridTableViewContextImpl = /*#__PURE__*/function () {
 var EVENT$1;
 (function (EVENT) {
   EVENT["ON_SELECT"] = "OnSelect";
+  EVENT["ON_SHOW_MENU"] = "OnShowMenu";
   EVENT["ON_DATA_SEND"] = "OnDataSend";
   EVENT["ON_LOADED"] = "OnLoaded";
   EVENT["ON_CLICK"] = "OnClick";
@@ -21488,6 +21489,7 @@ var ATTRIBUTE;
   ATTRIBUTE["TIP_POSITION"] = "TipPosition";
   ATTRIBUTE["HTML"] = "Html";
   ATTRIBUTE["CLASS"] = "Class";
+  ATTRIBUTE["VISIBLE"] = "Visible";
 })(ATTRIBUTE || (ATTRIBUTE = {}));
 var DRAG_ITEM_TYPE;
 (function (DRAG_ITEM_TYPE) {
@@ -21560,6 +21562,26 @@ var OPERATOR;
   OPERATOR[OPERATOR["AND"] = 0] = "AND";
   OPERATOR[OPERATOR["OR"] = 1] = "OR";
 })(OPERATOR || (OPERATOR = {}));
+var PARAM;
+(function (PARAM) {
+  PARAM["EXPORT"] = "Export";
+  PARAM["EXPORT_NAME"] = "ExportName";
+  PARAM["EXPORT_FORMAT"] = "ExportFormat";
+})(PARAM || (PARAM = {}));
+var COL_ID;
+(function (COL_ID) {
+  COL_ID["PANEL"] = "Panel";
+  COL_ID["PAGER"] = "Pager";
+})(COL_ID || (COL_ID = {}));
+var BUTTON;
+(function (BUTTON) {
+  BUTTON["CLEAR"] = "Clear";
+})(BUTTON || (BUTTON = {}));
+var MENU_NAME;
+(function (MENU_NAME) {
+  MENU_NAME["EXPORT"] = "MenuExport";
+  MENU_NAME["COLUMNS"] = "MenuColumns";
+})(MENU_NAME || (MENU_NAME = {}));
 
 var TableViewConstants = {
     __proto__: null,
@@ -21580,7 +21602,11 @@ var TableViewConstants = {
     get NUMBER_FORMAT () { return NUMBER_FORMAT; },
     get ACTION () { return ACTION; },
     get SECTION () { return SECTION; },
-    get OPERATOR () { return OPERATOR; }
+    get OPERATOR () { return OPERATOR; },
+    get PARAM () { return PARAM; },
+    get COL_ID () { return COL_ID; },
+    get BUTTON () { return BUTTON; },
+    get MENU_NAME () { return MENU_NAME; }
 };
 
 var styles$5 = {"vitro-table-view":"_table-view_vitro-table-view_1tTs32D"};
@@ -22180,9 +22206,9 @@ var TelerikUploader = function TelerikUploader(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var componentName = 'telerikUploader';
   React.useEffect(function () {
-    if (uploaderRef && dropZoneRef && progressBarRef) {
+    if (uploaderRef && progressBarRef) {
       var input = $$2(uploaderRef.current);
-      var dropZone = $$2(dropZoneRef.current);
+      var dropZone = dropZoneRef.current ? $$2(dropZoneRef.current) : null;
       var container = $$2(containerRef.current);
       var progressBar = progressBarRef.current;
       var _kendoUploader = new TelerikUploaderContextImpl(input, container, dropZone, progressBar, props.settings, localeService, toggleButtons);
@@ -22263,7 +22289,7 @@ var TelerikUploader = function TelerikUploader(props) {
   }), React__default.createElement("button", {
     className: hide ? styles$7['vitro-button-show'] : styles$7['vitro-button-hide'],
     onClick: hideUploadResult
-  })), React__default.createElement("div", {
+  })), props.isShowDropzone !== false && React__default.createElement("div", {
     className: styles$7['vitro-drop-zone'],
     id: 'vitro-uploader-drop-zone',
     ref: dropZoneRef,
@@ -60279,7 +60305,7 @@ var styles$d = {"vitro-button":"_button_vitro-button_hVfBuSO","vitro-animation-r
 
 var HTML_ELEMENT_SPAN = 'span';
 var TYPE_BUTTON = 'button';
-var Button$2 = function Button(props) {
+var Button$2 = React.forwardRef(function (props, ref) {
   var _useState = React.useState(false),
     pending = _useState[0],
     setPending = _useState[1];
@@ -60323,7 +60349,8 @@ var Button$2 = function Button(props) {
       window.dispatchEvent(event);
     }
   };
-  var button = React__default.createElement("button", {
+  return React__default.createElement("button", {
+    ref: ref,
     onMouseEnter: function onMouseEnter() {
       return setIsHover(true);
     },
@@ -60342,8 +60369,7 @@ var Button$2 = function Button(props) {
     hoverUrl: props.imageHoverUrl,
     className: "" + (props.imageClassName || CTRL.EMPTY)
   }), React__default.createElement("div", null, props.text)));
-  return button;
-};
+});
 
 var styles$e = {"vitro-button-cancel":"_button-cancel_vitro-button-cancel_2UT1K9Z"};
 
@@ -60415,10 +60441,10 @@ var DialogFooter = function DialogFooter(props) {
   var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
   var labelClose = props.labelClose || localeService.create((_props$buttonList = props.buttonList) !== null && _props$buttonList !== void 0 && _props$buttonList.length ? LOCALE$1.ACTION_CANCEL : LOCALE$1.ACTION_CLOSE);
   return React__default.createElement("div", {
-    className: styles$h['vitro-dialog-footer']
+    className: styles$h['vitro-dialog-footer'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement(ButtonGroup, {
     className: styles$h['vitro-button-group']
-  }, props.isShowDetailButton && React__default.createElement(DialogDetailExpandButton, {
+  }, props.isShowDetailButton && props.onClickDetailButton && React__default.createElement(DialogDetailExpandButton, {
     onClick: props.onClickDetailButton
   }), props.isDismissible && React__default.createElement(ButtonCancel, {
     text: labelClose,
@@ -60521,7 +60547,8 @@ var Dialog = function Dialog(props) {
     onClose: onClose,
     isShowDetailButton: props.hiddenContent && !isMobileView ? true : false,
     onClickDetailButton: onClickDetailButton,
-    isDismissible: props.isDismissible
+    isDismissible: props.isDismissible,
+    className: props.footerClassName
   }) : null));
 };
 
@@ -61399,8 +61426,9 @@ var View = function View(props) {
 
 var styles$r = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-required":"_label_vitro-required_2-bSGif"};
 
-var Label = function Label(props) {
+var Label = React.forwardRef(function (props, ref) {
   return React__default.createElement("div", {
+    ref: ref,
     className: styles$r['vitro-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     style: props.width ? {
       width: props.width + UNIT.PX
@@ -61408,7 +61436,7 @@ var Label = function Label(props) {
   }, props.text, props.isRequired && React__default.createElement("span", {
     className: styles$r['vitro-required']
   }, CTRL.ASTERISK));
-};
+});
 
 var POSITION;
 (function (POSITION) {
@@ -61924,7 +61952,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.113";
+var version$1 = "1.1.115";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -64904,9 +64932,69 @@ var ImagePicker = function ImagePicker(props) {
   }, props.errorMessage));
 };
 
-var styles$16 = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","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-list":"_list_vitro-list_2cs4WZE"};
+
+var List = React.forwardRef(function (props, ref) {
+  var _onClick = function onClick(item) {
+    if (props.onClick) {
+      props.onClick(item);
+    }
+  };
+  return React__default.createElement("ul", {
+    ref: ref,
+    className: styles$16['vitro-list'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    onBlur: props.onBlur
+  }, props.itemList && props.itemList.map(function (item, index) {
+    return React__default.createElement("li", {
+      onClick: function onClick() {
+        return _onClick(item);
+      },
+      key: index
+    }, React__default.createElement(props.itemTemplate, item));
+  }));
+});
+
+var Overlay$2 = React.forwardRef(function (props, ref) {
+  var _useState = React.useState(null),
+    target = _useState[0],
+    _setTarget = _useState[1];
+  var _useState2 = React.useState(),
+    style = _useState2[0],
+    _setStyle = _useState2[1];
+  React.useImperativeHandle(ref, function () {
+    return {
+      setTarget: function setTarget(target) {
+        _setTarget(target);
+      },
+      setStyle: function setStyle(style) {
+        _setStyle(style);
+      }
+    };
+  });
+  React.useEffect(function () {
+    if (props.target) {
+      _setTarget(props.target);
+    }
+  }, [props.target]);
+  React.useEffect(function () {
+    if (props.style) {
+      _setStyle(props.style);
+    }
+  }, [props.style]);
+  return React__default.createElement(Overlay$1, {
+    show: props.isShow,
+    target: target,
+    container: props.container,
+    placement: props.placement || exports.PLACEMENT.AUTO,
+    flip: props.isFlip ? true : false
+  }, React__default.createElement("div", {
+    className: props.className,
+    style: style
+  }, props.children));
+});
+
+var styles$17 = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","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","vitro-condition":"_criterion_vitro-condition_2RFixrp","vitro-criterion-container-mobile":"_criterion_vitro-criterion-container-mobile_1yxaJHi"};
 
-var ROOT_ID = 'root';
 var ConditionSelect = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.defaultValue || props.itemList[0]),
     condition = _useState[0],
@@ -64914,9 +65002,6 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
   var _useState2 = React.useState(false),
     showSelectList = _useState2[0],
     setShowSelectList = _useState2[1];
-  var _useState3 = React.useState(null),
-    conditionListContainer = _useState3[0],
-    setConditionListContainer = _useState3[1];
   var listRef = React.useRef(null);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.MOUSEDOWN, onBlur);
@@ -64924,19 +65009,10 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
       window.removeEventListener(exports.EVENT.MOUSEDOWN, onBlur);
     };
   });
-  React.useEffect(function () {
-    if (showSelectList) {
-      showList();
-    } else {
-      if (conditionListContainer) {
-        conditionListContainer.remove();
-      }
-    }
-  }, [showSelectList]);
   var toggleSelect = function toggleSelect() {
     setShowSelectList(!showSelectList);
   };
-  var _onClick = function onClick(item) {
+  var onClick = function onClick(item) {
     setCondition(item);
     setShowSelectList(false);
     props.onSelect(item);
@@ -64946,56 +65022,37 @@ var ConditionSelect = React.forwardRef(function (props, ref) {
       setShowSelectList(false);
     }
   };
-  var getListPosition = function getListPosition() {
-    if (ref.current) {
-      var selectPosition = ref.current.getBoundingClientRect();
-      var top = selectPosition.top + selectPosition.height + 10;
-      return {
-        left: selectPosition.left,
-        top: top
-      };
-    }
-    return null;
-  };
-  var showList = function showList() {
-    var position = getListPosition();
-    var root = document.getElementById(ROOT_ID);
-    if (position && root) {
-      var container = document.createElement('div');
-      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$16['vitro-condition-list'],
-        onBlur: onBlur
-      }, props.itemList.map(function (item) {
-        return React__default.createElement("li", {
-          onClick: function onClick() {
-            return _onClick(item);
-          }
-        }, item.imageUrl && React__default.createElement(Image, {
-          defaultUrl: item.imageUrl,
-          className: styles$16['vitro-image']
-        }), item.text);
-      }));
-      reactDom.render(content, container);
-      root.appendChild(container);
-    }
+  var getCondition = function getCondition(props) {
+    return React__default.createElement(FlexBox, {
+      className: styles$17['vitro-condition']
+    }, props.imageUrl && React__default.createElement(Image, {
+      defaultUrl: props.imageUrl
+    }), props.text);
   };
   return React__default.createElement(React__default.Fragment, null, condition && React__default.createElement("div", {
     ref: ref,
-    className: styles$16['vitro-condition-select']
+    className: styles$17['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Image, {
     defaultUrl: condition.imageUrl,
-    className: styles$16['vitro-image']
-  }) : condition.text)));
+    className: styles$17['vitro-image']
+  }) : condition.text), React__default.createElement(Overlay$2, {
+    isShow: showSelectList,
+    isFlip: true,
+    target: ref.current,
+    placement: exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START,
+    className: styles$17['vitro-condition-list-container']
+  }, React__default.createElement(List, {
+    ref: listRef,
+    itemList: props.itemList,
+    itemTemplate: getCondition,
+    onClick: onClick,
+    onBlur: onBlur,
+    className: styles$17['vitro-condition-list']
+  }))));
 });
 
-var ROOT_ID$1 = 'root';
 var Criterion = function Criterion(props) {
   var _useState = React.useState(props.operatorList[0]),
     operator = _useState[0],
@@ -65003,12 +65060,9 @@ var Criterion = function Criterion(props) {
   var _useState2 = React.useState(false),
     showOperatorSelectList = _useState2[0],
     setShowOperatorSelectList = _useState2[1];
-  var _useState3 = React.useState(null),
-    operatorListContainer = _useState3[0],
-    setOperatorListContainer = _useState3[1];
-  var _useState4 = React.useState(CTRL.EMPTY),
-    state = _useState4[0],
-    setState = _useState4[1];
+  var _useState3 = React.useState(CTRL.EMPTY),
+    state = _useState3[0],
+    setState = _useState3[1];
   var componentProps = props.content.props;
   var defaultOperator = (componentProps.value ? props.operatorList.find(function (x) {
     return x.type === componentProps.value.operator;
@@ -65043,15 +65097,6 @@ var Criterion = function Criterion(props) {
       conditionSelectRef.current.style.left = labelRef.current.offsetWidth + 8 + UNIT.PX;
     }
   }, [labelRef]);
-  React.useEffect(function () {
-    if (showOperatorSelectList) {
-      showOperatorList();
-    } else {
-      if (operatorListContainer) {
-        operatorListContainer.remove();
-      }
-    }
-  }, [showOperatorSelectList]);
   var onOperatorClick = function onOperatorClick(operator) {
     setOperator(operator);
     value.operator = operator.type;
@@ -65071,13 +65116,13 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$16['vitro-focus']);
+    setState(styles$17['vitro-focus']);
     if (componentProps.onFocus) {
       componentProps.onFocus(e);
     }
   };
   var onBlur = function onBlur(e) {
-    setState(componentProps.errorMessage ? styles$16['vitro-error'] : CTRL.EMPTY);
+    setState(componentProps.errorMessage ? styles$17['vitro-error'] : CTRL.EMPTY);
     if (componentProps.onBlur) {
       componentProps.onBlur(e);
     }
@@ -65091,59 +65136,40 @@ var Criterion = function Criterion(props) {
     value.valueList = Array.isArray(val) ? val : [val];
     onChange(value);
   };
-  var getOperatorListPosition = function getOperatorListPosition() {
-    if (operatorSelectRef.current) {
-      var selectPosition = operatorSelectRef.current.getBoundingClientRect();
-      var top = selectPosition.top + selectPosition.height + 2;
-      return {
-        right: selectPosition.right,
-        top: top
-      };
-    }
-    return null;
-  };
-  var showOperatorList = function showOperatorList() {
-    var position = getOperatorListPosition();
-    var root = document.getElementById(ROOT_ID$1);
-    if (position && root) {
-      var container = document.createElement('div');
-      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$16['vitro-operator-list']
-      }, props.operatorList.map(function (item) {
-        return React__default.createElement("li", {
-          onClick: function onClick() {
-            return onOperatorClick(item);
-          }
-        }, item.text);
-      }));
-      reactDom.render(content, container);
-      root.appendChild(container);
-    }
-  };
-  return React__default.createElement("div", {
-    className: styles$16['vitro-criterion-container']
+  return React__default.createElement(FlexBox, {
+    className: props.isMobileView ? styles$17['vitro-criterion-container-mobile'] : styles$17['vitro-criterion-container']
   }, React__default.createElement("div", {
-    className: styles$16['vitro-operator-select-container']
-  }, props.isShowOperatorSelect && React__default.createElement("div", {
+    className: styles$17['vitro-operator-select-container']
+  }, props.isShowOperatorSelect && React__default.createElement(FlexBox, {
     ref: operatorSelectRef,
-    className: styles$16['vitro-operator-select'],
+    className: styles$17['vitro-operator-select'],
     onClick: toggleOperatorSelect
-  }, React__default.createElement("div", null, operator.text))), React__default.createElement("div", {
-    className: styles$16['vitro-control'] + CTRL.SPACE + state
-  }, React__default.createElement("div", {
+  }, React__default.createElement("div", null, operator.text)), React__default.createElement(Overlay$2, {
+    isShow: showOperatorSelectList,
+    isFlip: true,
+    target: operatorSelectRef.current,
+    placement: exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.END,
+    className: styles$17['vitro-operator-list-container']
+  }, React__default.createElement(List, {
+    itemList: props.operatorList,
+    itemTemplate: function itemTemplate(props) {
+      return React__default.createElement(React__default.Fragment, null, props.text);
+    },
+    onClick: onOperatorClick,
+    className: styles$17['vitro-operator-list']
+  }))), React__default.createElement("div", {
+    className: styles$17['vitro-control'] + CTRL.SPACE + state
+  }, React__default.createElement(Label, {
     ref: labelRef,
-    className: styles$16['vitro-label']
-  }, React__default.createElement("span", null, props.label)), React__default.createElement(ConditionSelect, {
+    text: props.label,
+    className: styles$17['vitro-label']
+  }), React__default.createElement(ConditionSelect, {
     ref: conditionSelectRef,
     itemList: props.conditionList,
     onSelect: onConditionClick,
     defaultValue: defaultCondition
   }), React__default.createElement(props.content.component, _extends({}, componentProps, {
-    className: styles$16['vitro-control'],
+    className: styles$17['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
     onChange: onControlChange,
@@ -65151,11 +65177,11 @@ var Criterion = function Criterion(props) {
     isDisabled: false,
     isReadOnly: false,
     isRequired: false
-  }))), React__default.createElement("button", {
+  }))), React__default.createElement(ImageButton, {
     onClick: function onClick() {
       return props.onDelete(componentProps.id);
     },
-    className: styles$16['vitro-button-cancel']
+    className: styles$17['vitro-button-cancel']
   }));
 };
 
@@ -65165,7 +65191,7 @@ var LOCALE$8;
   LOCALE["PLACEHOLDER"] = "app.common.searchInput.placeholder";
 })(LOCALE$8 || (LOCALE$8 = {}));
 
-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 styles$18 = {"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","vitro-search-input-mobile":"_search-input_vitro-search-input-mobile_1H1USnO"};
 
 var NEW_LINE = '\n';
 var SearchInput = function SearchInput(props) {
@@ -65185,17 +65211,13 @@ var SearchInput = function SearchInput(props) {
     }
   };
   var onSubmit = function onSubmit() {
-    var value = inputRef.current && inputRef.current.value;
-    if (value && inputRef.current && props.onSubmit) {
-      props.onSubmit();
-      inputRef.current.value = CTRL.EMPTY;
+    if (value && props.onSubmit) {
+      props.onSubmit(value);
+      resetValue();
     }
   };
   var onCancel = function onCancel() {
-    if (inputRef.current) {
-      inputRef.current.value = CTRL.EMPTY;
-    }
-    setValue(CTRL.EMPTY);
+    resetValue();
     props.onCancel();
   };
   var onChange = function onChange(e) {
@@ -65216,6 +65238,12 @@ var SearchInput = function SearchInput(props) {
     }
     setState('vitro-focus');
   };
+  var resetValue = function resetValue() {
+    if (inputRef.current) {
+      inputRef.current.value = CTRL.EMPTY;
+    }
+    setValue(CTRL.EMPTY);
+  };
   var getTextValue = function getTextValue(value) {
     var valueArray = value.valueList.map(function (x) {
       if (x && typeof x === 'object') {
@@ -65252,7 +65280,7 @@ var SearchInput = function SearchInput(props) {
     return list.join(NEW_LINE);
   };
   var getClassName = function getClassName() {
-    var classList = [styles$17['vitro-search-input'], props.className || CTRL.EMPTY, state];
+    var classList = [props.isMobileView ? styles$18['vitro-search-input-mobile'] : styles$18['vitro-search-input'], props.className || CTRL.EMPTY, state];
     if (props.isActive) {
       classList.push('vitro-active');
     }
@@ -65262,33 +65290,33 @@ 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$17['vitro-search-value']
-    }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement("button", {
+      className: styles$18['vitro-search-value']
+    }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement(ImageButton, {
       onClick: function onClick() {
         return onRemoveValue([firstValue]);
       },
-      className: styles$17['vitro-button-cancel']
+      className: styles$18['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$17['vitro-search-value']
+      className: styles$18['vitro-search-value']
     }, localeService.create(LOCALE$8.VALUE_COUNT, {
       count: list.length
-    }), React__default.createElement("button", {
+    }), React__default.createElement(ImageButton, {
       onClick: function onClick() {
         return onRemoveValue(list);
       },
-      className: styles$17['vitro-button-cancel']
+      className: styles$18['vitro-button-cancel']
     })))) : null);
   };
-  return React__default.createElement("div", {
+  return React__default.createElement(FlexBox, {
     className: getClassName()
   }, React__default.createElement(ImageButton, {
     className: 'vitro-button-search',
-    onClick: onSubmit
+    onClick: props.onSearchClick ? props.onSearchClick : onSubmit
   }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
-    className: styles$17['vitro-search-value-list']
+    className: styles$18['vitro-search-value-list']
   }, props.searchCriterionList && props.searchCriterionList.length ? getSelectedValueList(props.searchCriterionList) : React__default.createElement("input", {
     type: 'text',
     ref: inputRef,
@@ -65297,9 +65325,9 @@ var SearchInput = function SearchInput(props) {
     onFocus: onFocus,
     onBlur: onBlur,
     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", {
+  })), props.children, value || (_props$searchCriterio = props.searchCriterionList) !== null && _props$searchCriterio !== void 0 && _props$searchCriterio.length || props.isActive ? React__default.createElement(ImageButton, {
     onClick: onCancel,
-    className: styles$17['vitro-button-cancel']
+    className: styles$18['vitro-button-cancel']
   }) : null));
 };
 
@@ -65309,7 +65337,7 @@ var LOCALE$9;
   LOCALE["COLLAPSE_TEXT"] = "app.common.expandControlGroup.collapse";
 })(LOCALE$9 || (LOCALE$9 = {}));
 
-var styles$18 = {"vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-top":"_expand-control-group_vitro-top_pV-8fhr","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL"};
+var styles$19 = {"vitro-expand-control-group":"_expand-control-group_vitro-expand-control-group_1qSUMoN","vitro-top":"_expand-control-group_vitro-top_pV-8fhr","vitro-display-none":"_expand-control-group_vitro-display-none_Zs_5rQL"};
 
 var ExpandControlGroup = function ExpandControlGroup(props) {
   var _useState = React.useState(props.isExpanded || false),
@@ -65325,7 +65353,7 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
       props.onClick(isExpanded);
     }
   };
-  var className = [styles$18['vitro-expand-control-group'], props.className || CTRL.EMPTY, props.isExpandTop ? styles$18['vitro-top'] : CTRL.EMPTY, isExpanded ? 'vitro-expanded' : 'vitro-collapsed'].join(CTRL.SPACE);
+  var className = [styles$19['vitro-expand-control-group'], props.className || CTRL.EMPTY, props.isExpandTop ? styles$19['vitro-top'] : CTRL.EMPTY, isExpanded ? 'vitro-expanded' : 'vitro-collapsed'].join(CTRL.SPACE);
   return React__default.createElement("div", {
     className: className
   }, React__default.createElement(ExpandCollapseButton, {
@@ -65337,11 +65365,11 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
     isExpanded: isExpanded,
     className: props.buttonClassName
   }), React__default.createElement("div", {
-    className: 'vitro-content' + (isExpanded ? CTRL.EMPTY : CTRL.SPACE + styles$18['vitro-display-none'])
+    className: 'vitro-content' + (isExpanded ? CTRL.EMPTY : CTRL.SPACE + styles$19['vitro-display-none'])
   }, props.children));
 };
 
-var styles$19 = {"vitro-field-iterator":"_field-iterator_vitro-field-iterator_2zUPyUF","vitro-expand-control-group":"_field-iterator_vitro-expand-control-group_3R-v8Nb","vitro-collapse":"_field-iterator_vitro-collapse_SZoovCi","vitro-expand":"_field-iterator_vitro-expand_ToLTBVI"};
+var styles$1a = {"vitro-field-iterator":"_field-iterator_vitro-field-iterator_2zUPyUF","vitro-expand-control-group":"_field-iterator_vitro-expand-control-group_3R-v8Nb","vitro-collapse":"_field-iterator_vitro-collapse_SZoovCi","vitro-expand":"_field-iterator_vitro-expand_ToLTBVI"};
 
 var FieldIterator = React.forwardRef(function (props, ref) {
   var _useState = React.useState([]),
@@ -65520,7 +65548,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
     }, React__default.createElement("div", null, React__default.createElement(component.value, control)));
   };
   return React__default.createElement("div", {
-    className: styles$19['vitro-field-iterator'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$1a['vitro-field-iterator'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, controlList.map(function (control, index) {
     var component = props.componentMap.find(function (x) {
       return x.name === control.code;
@@ -65537,12 +65565,12 @@ var FieldIterator = React.forwardRef(function (props, ref) {
     return null;
   }), props.maxVisibleCount && controlList.length > props.maxVisibleCount ? React__default.createElement(ExpandControlGroup, {
     expandImage: React__default.createElement("span", {
-      className: styles$19['vitro-expand']
+      className: styles$1a['vitro-expand']
     }),
     collapseImage: React__default.createElement("span", {
-      className: styles$19['vitro-collapse']
+      className: styles$1a['vitro-collapse']
     }),
-    className: styles$19['vitro-expand-control-group'],
+    className: styles$1a['vitro-expand-control-group'],
     isExpandTop: true
   }, controlList.map(function (control, index) {
     var component = props.componentMap.find(function (x) {
@@ -65555,7 +65583,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   })) : null);
 });
 
-var styles$1a = {"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-scrollbar":"_search_vitro-scrollbar_3Xg3VXI","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$1b = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-active":"_search_vitro-active_1HhQOCR","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter-container":"_search_vitro-filter-container_3p6D0hI","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-button-group":"_search_vitro-button-group_1VuZJdq","vitro-button":"_search_vitro-button_1kaitIg","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM","vitro-button-settings":"_search_vitro-button-settings_oJCn__t","vitro-search-mobile":"_search_vitro-search-mobile_XsKRflV","vitro-settings-dialog-mobile":"_search_vitro-settings-dialog-mobile_1no71m6","vitro-settings-dialog-header":"_search_vitro-settings-dialog-header_vID4BE6","vitro-settings-dialog-footer":"_search_vitro-settings-dialog-footer_11fP4FC","vitro-scrollbar":"_search_vitro-scrollbar_3Xg3VXI"};
 
 var Filter = function Filter(props) {
   var _useState = React.useState(null),
@@ -65576,12 +65604,17 @@ var Filter = function Filter(props) {
     }
   }, [props.fieldList, changedFieldValueMap]);
   React.useEffect(function () {
-    var valueMap = new Map();
-    props.valueList.map(function (x) {
-      valueMap.set(x.internalName, x);
-    });
-    setFieldValueMap(Object.fromEntries(valueMap));
-    setChangedFieldValueMap(valueMap);
+    if (props.valueList) {
+      var valueMap = new Map();
+      props.valueList.map(function (x) {
+        valueMap.set(x.internalName, x);
+      });
+      setFieldValueMap(Object.fromEntries(valueMap));
+      setChangedFieldValueMap(valueMap);
+    } else {
+      setFieldValueMap(null);
+      setChangedFieldValueMap(null);
+    }
   }, [props.valueList]);
   var initComponentMap = function initComponentMap() {
     var map = props.componentMap.map(function (component) {
@@ -65601,7 +65634,8 @@ var Filter = function Filter(props) {
               })
             },
             onChange: componentProps.onChange,
-            isShowOperatorSelect: componentProps.index ? true : false
+            isShowOperatorSelect: componentProps.index ? true : false,
+            isMobileView: props.isMobileView
           });
         }
       };
@@ -65613,9 +65647,9 @@ var Filter = function Filter(props) {
     props.onChange(changedFieldValueMap);
   };
   return React__default.createElement("div", {
-    className: styles$1a['vitro-filter']
+    className: styles$1b['vitro-filter']
   }, React__default.createElement(ScrollBar, {
-    className: styles$1a['vitro-scrollbar']
+    className: styles$1b['vitro-scrollbar']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
     fieldValueMap: fieldValueMap,
@@ -65631,7 +65665,7 @@ var LOCALE$a;
   LOCALE["EMPTY_PLACEHOLDER"] = "app.common.searchValueList.emptyPlaceholder";
 })(LOCALE$a || (LOCALE$a = {}));
 
-var styles$1b = {"vitro-search-input-container":"_search-value-list_vitro-search-input-container_167CEqB","vitro-empty-placeholder":"_search-value-list_vitro-empty-placeholder_2f08lDK"};
+var styles$1c = {"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),
@@ -65658,7 +65692,7 @@ var SearchValueList = function SearchValueList(props) {
   return React__default.createElement("div", {
     className: props.className || CTRL.EMPTY
   }, React__default.createElement("div", {
-    className: styles$1b['vitro-search-input-container']
+    className: styles$1c['vitro-search-input-container']
   }, React__default.createElement(SearchInput, {
     onCancel: onSearchCancel,
     onChange: onInputChange,
@@ -65667,13 +65701,13 @@ 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$1b['vitro-empty-placeholder']
+    className: styles$1c['vitro-empty-placeholder']
   }, props.emptyPlaceHolder || localeService.create(LOCALE$a.EMPTY_PLACEHOLDER))));
 };
 
-var styles$1c = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
+var styles$1d = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-search-value-list":"_checkbox-list_vitro-search-value-list_2i58fRK","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
 
-var CheckboxList = function CheckboxList(props) {
+var CheckboxList = React.forwardRef(function (props, ref) {
   var _useState = React.useState(props.itemList),
     itemList = _useState[0],
     setItemList = _useState[1];
@@ -65706,63 +65740,61 @@ var CheckboxList = function CheckboxList(props) {
       onChange: function onChange(value, name) {
         return _onChange(value, item.id);
       },
-      className: styles$1c['vitro-checkbox']
+      className: styles$1d['vitro-checkbox']
     });
   };
   var filterValueTemplate = function filterValueTemplate(item) {
     return item.name;
   };
   return React__default.createElement("div", {
-    className: styles$1c['vitro-checkbox-list']
+    className: styles$1d['vitro-checkbox-list'],
+    ref: ref
   }, React__default.createElement(SearchValueList, {
     itemList: props.itemList,
     valueTemplate: getCheckbox,
-    filterValueTemplate: filterValueTemplate
+    filterValueTemplate: filterValueTemplate,
+    className: styles$1d['vitro-search-value-list']
   }));
-};
+});
 
 var CONDITION_CONTAINS = 11;
 var Search = function Search(props) {
   var _useState = React.useState(false),
-    isMobileView = _useState[0],
-    setIsMobileView = _useState[1];
+    isShowDialog = _useState[0],
+    setIsShowDialog = _useState[1];
   var _useState2 = React.useState(false),
-    isShowDialog = _useState2[0],
-    setIsShowDialog = _useState2[1];
-  var _useState3 = React.useState(false),
-    isShowAddFieldDialog = _useState3[0],
-    setIsShowAddFieldDialog = _useState3[1];
-  var _useState4 = React.useState(true),
-    isShowAddFieldButton = _useState4[0],
-    setIsShowAddFieldButton = _useState4[1];
+    isShowAddFieldDialog = _useState2[0],
+    setIsShowAddFieldDialog = _useState2[1];
+  var _useState3 = React.useState(true),
+    isShowAddFieldButton = _useState3[0],
+    setIsShowAddFieldButton = _useState3[1];
+  var _useState4 = React.useState([]),
+    filterFieldList = _useState4[0],
+    setFilterFieldList = _useState4[1];
   var _useState5 = React.useState([]),
-    filterFieldList = _useState5[0],
-    setFilterFieldList = _useState5[1];
+    searchCriterionList = _useState5[0],
+    setSearchCriterionList = _useState5[1];
   var _useState6 = React.useState([]),
-    searchCriterionList = _useState6[0],
-    setSearchCriterionList = _useState6[1];
+    selectedSearchCriterionList = _useState6[0],
+    setSelectedSearchCriterionList = _useState6[1];
   var _useState7 = React.useState([]),
-    selectedSearchCriterionList = _useState7[0],
-    setSelectedSearchCriterionList = _useState7[1];
-  var _useState8 = React.useState([]),
-    checkboxFieldList = _useState8[0],
-    setCheckboxFieldList = _useState8[1];
-  var _useState9 = React.useState(CTRL.EMPTY),
-    state = _useState9[0],
-    setState = _useState9[1];
-  var addFieldDialogRef = React.useRef(null);
+    checkboxFieldList = _useState7[0],
+    setCheckboxFieldList = _useState7[1];
+  var _useState8 = React.useState(CTRL.EMPTY),
+    state = _useState8[0],
+    setState = _useState8[1];
+  var addFieldListRef = React.useRef(null);
+  var addFieldButtonRef = React.useRef(null);
   var searchRef = React.useRef(null);
+  var filterContainerRef = React.useRef(null);
   React.useEffect(function () {
     window.addEventListener(exports.EVENT.MOUSEDOWN, onBlurAddFieldDialog);
     window.addEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
-    window.addEventListener(exports.EVENT.RESIZE, handleResize);
-    handleResize();
     return function () {
       window.removeEventListener(exports.EVENT.MOUSEDOWN, onBlurAddFieldDialog);
       window.removeEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
-      window.removeEventListener(exports.EVENT.RESIZE, handleResize);
     };
-  });
+  }, []);
   React.useEffect(function () {
     var checkboxList = props.fieldList;
     if (props.visibleFieldList) {
@@ -65781,12 +65813,9 @@ var Search = function Search(props) {
       }
     }
   }, [filterFieldList]);
-  React.useEffect(function () {
-    handleResize();
-  }, [window.innerWidth]);
   React.useEffect(function () {
     if (selectedSearchCriterionList.length) {
-      setState(styles$1a['vitro-active']);
+      setState(styles$1b['vitro-active']);
     }
   }, [selectedSearchCriterionList]);
   React.useEffect(function () {
@@ -65798,9 +65827,6 @@ var Search = function Search(props) {
       setCheckboxFieldList(getCheckboxFieldList(selectedFieldList));
     }
   }, [props.searchCriterionList]);
-  var handleResize = function handleResize() {
-    window.innerWidth < exports.MOBILE_VIEW.WIDTH ? setIsMobileView(true) : setIsMobileView(false);
-  };
   var onSettingsClick = function onSettingsClick() {
     setIsShowDialog(!isShowDialog);
   };
@@ -65868,9 +65894,9 @@ var Search = function Search(props) {
       props.onFilterChange(criterionList);
     }
   };
-  var onSubmit = function onSubmit(value, criterionList) {
+  var onSearch = function onSearch(value, criterionList) {
     var list = criterionList ? criterionList : searchCriterionList;
-    props.onSubmit(list);
+    props.onSearch(list);
     setSelectedSearchCriterionList(getSelectedCriterionList(list));
     closeSettings();
   };
@@ -65909,7 +65935,7 @@ var Search = function Search(props) {
     });
     return checkboxList;
   };
-  var onCancel = function onCancel() {
+  var onCancelSearch = function onCancelSearch() {
     setSearchCriterionList([]);
     setSelectedSearchCriterionList([]);
     closeSettings();
@@ -65931,36 +65957,25 @@ var Search = function Search(props) {
     }
   };
   var onBlurAddFieldDialog = function onBlurAddFieldDialog(e) {
-    if (addFieldDialogRef.current && !addFieldDialogRef.current.contains(e.target)) {
+    var list = addFieldListRef.current;
+    var button = addFieldButtonRef.current;
+    if (list && !list.contains(e.target) && button && !button.contains(e.target)) {
       setIsShowAddFieldDialog(false);
     }
   };
   var onFocusInput = function onFocusInput() {
-    setState(styles$1a['vitro-active']);
+    setState(styles$1b['vitro-active']);
   };
   var onRemoveValue = function onRemoveValue(valueList) {
     setSearchCriterionList(valueList);
-    onSubmit(CTRL.EMPTY, valueList);
+    onSearch(CTRL.EMPTY, valueList);
   };
-  return React__default.createElement("div", {
-    ref: searchRef,
-    className: styles$1a['vitro-search'] + CTRL.SPACE + state
-  }, React__default.createElement(SearchInput, {
-    searchCriterionList: selectedSearchCriterionList,
-    onCancel: onCancel,
-    onSubmit: onSubmit,
-    onRemoveValue: onRemoveValue,
-    onChange: onInputChange,
-    placeholder: props.inputPlaceholder,
-    onFocus: onFocusInput,
-    isActive: state || isShowDialog ? true : false,
-    isMobileView: isMobileView,
-    className: styles$1a['vitro-control']
-  }, (state || isShowDialog) && React__default.createElement("button", {
-    onClick: onSettingsClick,
-    className: styles$1a['vitro-button-settings'] + (isShowDialog ? CTRL.SPACE + styles$1a['vitro-active'] : CTRL.EMPTY)
-  })), isShowDialog && React__default.createElement("div", {
-    className: styles$1a['vitro-settings-dialog']
+  var onCancel = function onCancel() {
+    closeSettings();
+  };
+  var content = React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles$1b['vitro-filter-container'],
+    ref: filterContainerRef
   }, React__default.createElement(Filter, {
     fieldList: filterFieldList,
     valueList: selectedSearchCriterionList,
@@ -65969,30 +65984,70 @@ var Search = function Search(props) {
     onDeleteField: onDeleteField,
     operatorList: props.operatorList,
     getConditionList: props.getConditionList,
-    getDefaultCondition: props.getDefaultCondition
+    getDefaultCondition: props.getDefaultCondition,
+    isMobileView: props.isMobileView
   }), isShowAddFieldButton && React__default.createElement("div", {
-    className: styles$1a['vitro-add-field']
+    className: styles$1b['vitro-add-field']
   }, React__default.createElement(Button$2, {
+    ref: addFieldButtonRef,
     text: props.labelAddField,
     onClick: onAddField,
-    className: styles$1a['vitro-add-field-button']
-  }), isShowAddFieldDialog && React__default.createElement("div", {
-    ref: addFieldDialogRef,
-    className: styles$1a['vitro-add-field-dialog']
+    className: styles$1b['vitro-add-field-button']
+  }), React__default.createElement(Overlay$2, {
+    isShow: isShowAddFieldDialog,
+    isFlip: props.isMobileView,
+    target: addFieldButtonRef.current,
+    container: filterContainerRef.current,
+    placement: props.isMobileView ? exports.PLACEMENT.BOTTOM + CTRL.DASH + exports.PLACEMENT.START : exports.PLACEMENT.RIGHT + CTRL.DASH + exports.PLACEMENT.START,
+    className: styles$1b['vitro-add-field-dialog']
   }, React__default.createElement(CheckboxList, {
+    ref: addFieldListRef,
     itemList: checkboxFieldList,
     onChange: onFieldListChange,
     isAllSelected: props.isAllFieldsVisible
-  }))), React__default.createElement("div", {
-    className: styles$1a['vitro-footer']
+  }))), !props.isMobileView && React__default.createElement(ButtonGroup, {
+    className: styles$1b['vitro-button-group']
   }, React__default.createElement(Button$2, {
     text: props.labelCancel,
-    onClick: closeSettings,
-    className: styles$1a['vitro-button-cancel']
+    onClick: onCancel,
+    className: styles$1b['vitro-button-cancel']
   }), React__default.createElement(Button$2, {
     text: props.labelSearch,
-    onClick: onSubmit
+    onClick: onSearch,
+    className: styles$1b['vitro-button']
   }))));
+  return React__default.createElement("div", {
+    ref: searchRef,
+    className: (props.isMobileView ? styles$1b['vitro-search-mobile'] : styles$1b['vitro-search']) + CTRL.SPACE + state
+  }, React__default.createElement(SearchInput, {
+    searchCriterionList: selectedSearchCriterionList,
+    onCancel: onCancelSearch,
+    onSubmit: onSearch,
+    onSearchClick: props.isMobileView ? onSettingsClick : undefined,
+    onRemoveValue: onRemoveValue,
+    onChange: onInputChange,
+    placeholder: props.inputPlaceholder,
+    onFocus: onFocusInput,
+    isActive: state || isShowDialog ? true : false,
+    isMobileView: props.isMobileView,
+    className: styles$1b['vitro-control']
+  }, (state || isShowDialog) && React__default.createElement(ImageButton, {
+    onClick: onSettingsClick,
+    className: styles$1b['vitro-button-settings'] + (isShowDialog ? CTRL.SPACE + styles$1b['vitro-active'] : CTRL.EMPTY)
+  })), isShowDialog && (props.isMobileView ? React__default.createElement(Dialog, {
+    title: props.inputPlaceholder || CTRL.EMPTY,
+    onClose: closeSettings,
+    buttonList: [{
+      text: props.labelSearch,
+      onClick: onSearch
+    }],
+    className: styles$1b['vitro-settings-dialog-mobile'],
+    headerClassName: styles$1b['vitro-settings-dialog-header'],
+    footerClassName: styles$1b['vitro-settings-dialog-footer'],
+    isDismissible: true
+  }, content) : React__default.createElement(FlexBox, {
+    className: styles$1b['vitro-settings-dialog']
+  }, content)));
 };
 
 var POSITION$1;
@@ -66028,7 +66083,7 @@ var Splitter = function Splitter(props) {
   }, props.children);
 };
 
-var styles$1d = {"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$1e = {"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),
@@ -66038,42 +66093,42 @@ var RouteItem = function RouteItem(props) {
     isShowComment = _useState2[0],
     setIsShowComment = _useState2[1];
   return React__default.createElement("div", {
-    className: styles$1d['vitro-route-item']
+    className: styles$1e['vitro-route-item']
   }, props.children ? React__default.createElement("button", {
-    className: isExpanded ? styles$1d['vitro-button-collapse'] : styles$1d['vitro-button-expand'],
+    className: isExpanded ? styles$1e['vitro-button-collapse'] : styles$1e['vitro-button-expand'],
     onClick: function onClick() {
       return setIsExpanded(!isExpanded);
     }
   }) : null, React__default.createElement("div", {
-    className: styles$1d['vitro-route-item-content']
+    className: styles$1e['vitro-route-item-content']
   }, props.userName && props.status && React__default.createElement("div", {
-    className: styles$1d['vitro-route-item-header']
+    className: styles$1e['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$1d['vitro-avatar']
+    className: styles$1e['vitro-avatar']
   }), props.userName), React__default.createElement("div", {
-    className: styles$1d['vitro-date']
+    className: styles$1e['vitro-date']
   }, props.date)), React__default.createElement("div", null, React__default.createElement("div", null, props.statusColor && React__default.createElement("div", {
-    className: styles$1d['vitro-status-color'],
+    className: styles$1e['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$1d['vitro-route-item-body']
+    className: styles$1e['vitro-route-item-body']
   }, React__default.createElement("div", {
-    className: styles$1d['vitro-flex']
+    className: styles$1e['vitro-flex']
   }, React__default.createElement("span", null, props.name), props.comment && React__default.createElement("button", {
-    className: isShowComment ? styles$1d['vitro-button-hide-comment'] : styles$1d['vitro-button-show-comment'],
+    className: isShowComment ? styles$1e['vitro-button-hide-comment'] : styles$1e['vitro-button-show-comment'],
     onClick: function onClick() {
       return setIsShowComment(!isShowComment);
     }
   })), isShowComment && props.comment && React__default.createElement("div", {
-    className: styles$1d['vitro-comment']
+    className: styles$1e['vitro-comment']
   }, props.comment)), isExpanded && React__default.createElement("div", {
-    className: styles$1d['vitro-route-item-child']
+    className: styles$1e['vitro-route-item-child']
   }, props.children)));
 };
 
@@ -66181,7 +66236,7 @@ var BimViewer = function BimViewer(props) {
   });
 };
 
-var styles$1e = {"vitro-scroll-view":"_scroll-view_vitro-scroll-view_TXQ8QQh"};
+var styles$1f = {"vitro-scroll-view":"_scroll-view_vitro-scroll-view_TXQ8QQh"};
 
 var COMPONENT_NAME = 'kendoScrollView';
 var CONTENT_HEIGHT = 100;
@@ -66226,27 +66281,27 @@ var ScrollView = function ScrollView(props) {
   };
   return React__default.createElement("div", {
     ref: scrollViewRef,
-    className: styles$1e['vitro-scroll-view'] + CTRL.SPACE + (props.className || CTRL.EMPTY),
+    className: styles$1f['vitro-scroll-view'] + CTRL.SPACE + (props.className || CTRL.EMPTY),
     tabIndex: 0
   }, props.itemList.map(function (item) {
     return React__default.createElement(item.component, item.props);
   }));
 };
 
-var styles$1f = {"vitro-image-container":"_page_vitro-image-container_QEXhGHE"};
+var styles$1g = {"vitro-image-container":"_page_vitro-image-container_QEXhGHE"};
 
 var Page = function Page(props) {
   return React__default.createElement("div", {
-    className: styles$1f['vitro-page'],
+    className: styles$1g['vitro-page'],
     "data-role": "page"
   }, React__default.createElement("div", {
-    className: styles$1f['vitro-image-container']
+    className: styles$1g['vitro-image-container']
   }, React__default.createElement("img", {
     src: props.url
   })));
 };
 
-var styles$1g = {"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 styles$1h = {"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$;
@@ -66304,25 +66359,25 @@ var ImageViewer = React.forwardRef(function (props, ref) {
     }
   };
   return React__default.createElement(React__default.Fragment, null, itemList.length ? React__default.createElement("div", {
-    className: styles$1g['vitro-image-viewer']
+    className: styles$1h['vitro-image-viewer']
   }, React__default.createElement("div", {
-    className: styles$1g['vitro-header']
+    className: styles$1h['vitro-header']
   }, actionList.length ? React__default.createElement(DropdownButton, {
     itemList: actionList,
-    className: styles$1g['vitro-dropdown-button']
+    className: styles$1h['vitro-dropdown-button']
   }) : null, React__default.createElement("button", {
-    className: styles$1g['vitro-button-close'],
+    className: styles$1h['vitro-button-close'],
     onClick: props.onCloseClick
   })), React__default.createElement(ScrollView, {
     itemList: itemList,
     onChange: onChange,
-    className: styles$1g['vitro-scroll-view'],
+    className: styles$1h['vitro-scroll-view'],
     isEnablePager: true,
     activePage: props.activePage
   })) : null);
 });
 
-var styles$1h = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
+var styles$1i = {"vitro-page":"_page-layout_vitro-page_GzZ3agH"};
 
 var PageLayout = function PageLayout(props) {
   var getClassName = function getClassName(sidebar) {
@@ -66336,7 +66391,7 @@ var PageLayout = function PageLayout(props) {
     return CTRL.SPACE + classNameArr.join(CTRL.SPACE);
   };
   return React__default.createElement("div", {
-    className: styles$1h['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$1i['vitro-page'] + getClassName(props.sidebar) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     id: 'vitro-page'
   }, props.children);
 };
@@ -66351,7 +66406,7 @@ var HeaderConstants = {
     get LOCAL_STORAGE_KEY () { return LOCAL_STORAGE_KEY; }
 };
 
-var styles$1i = {"vitro-header":"_header_vitro-header_ta9aLJn"};
+var styles$1j = {"vitro-header":"_header_vitro-header_ta9aLJn"};
 
 var onChangeSidebarMode = function onChangeSidebarMode() {};
 var Header = function Header(props) {
@@ -66394,44 +66449,44 @@ var Header = function Header(props) {
     }
   }, [props.sidebar]);
   return React__default.createElement("div", {
-    className: styles$1i['vitro-header'],
+    className: styles$1j['vitro-header'],
     id: 'vitro-header',
     ref: ref
   }, props.children);
 };
 
-var styles$1j = {"vitro-nav-bar-sidebar-button":"_header-nav-bar-sidebar-button_vitro-nav-bar-sidebar-button_3IZcIOc"};
+var styles$1k = {"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$1j['vitro-nav-bar-sidebar-button'],
+    className: styles$1k['vitro-nav-bar-sidebar-button'],
     onClick: props.onClick
   });
 };
 
-var styles$1k = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
+var styles$1l = {"vitro-nav-bar":"_header-nav-bar_vitro-nav-bar_EuyFIk8"};
 
 var HeaderNavBar = function HeaderNavBar(props) {
   return React__default.createElement("nav", {
-    className: styles$1k['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
+    className: styles$1l['vitro-nav-bar'] + CTRL.SPACE + ['navbar', 'navbar-expand-lg', 'navbar-light'].join(CTRL.SPACE)
   }, React__default.createElement(SidebarButton, {
     onClick: onChangeSidebarMode
   }), props.children);
 };
 
-var styles$1l = {"vitro-nav-service":"_header-nav-service_vitro-nav-service_1-i4GOh"};
+var styles$1m = {"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$1l['vitro-nav-service']
+    className: styles$1m['vitro-nav-service']
   }, React__default.createElement("div", {
     className: logoStyles['vitro-customer-logo']
   }), props.children);
 };
 
-var styles$1m = {"vitro-product-title":"_product-title_vitro-product-title_2gZcA5j"};
+var styles$1n = {"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, {
@@ -66453,22 +66508,22 @@ var ProductTitle = function ProductTitle(props) {
   if (props.href) {
     return React__default.createElement("a", {
       href: props.href,
-      className: styles$1m['vitro-product-title'],
+      className: styles$1n['vitro-product-title'],
       title: props.imageCaption
     }, content);
   }
   return React__default.createElement("a", {
     onClick: onClick,
-    className: styles$1m['vitro-product-title'],
+    className: styles$1n['vitro-product-title'],
     title: props.imageCaption
   }, content);
 };
 
-var styles$1n = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
+var styles$1o = {"vitro-right":"_right-align-control-group_vitro-right_2vnd6R7"};
 
 var RightAlignControlGroup = function RightAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1n['vitro-right']
+    className: styles$1o['vitro-right']
   }, props.children);
 };
 
@@ -66478,32 +66533,32 @@ var LeftAlignControlGroup = function LeftAlignControlGroup(props) {
   }, props.children);
 };
 
-var styles$1o = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
+var styles$1p = {"vitro-center":"_center-align-control-group_vitro-center_3SHmVN-"};
 
 var CenterAlignControlGroup = function CenterAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1o['vitro-center']
+    className: styles$1p['vitro-center']
   }, props.children);
 };
 
-var styles$1p = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
+var styles$1q = {"vitro-main":"_main_vitro-main_Kk2JMBF"};
 
 var Main = function Main(props) {
   return React__default.createElement("div", {
-    className: styles$1p['vitro-main'],
+    className: styles$1q['vitro-main'],
     id: 'vitro-main'
   }, props.children);
 };
 
-var styles$1q = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
+var styles$1r = {"vitro-table-view-detail":"_table-view-detail_vitro-table-view-detail_zxwp4XX"};
 
 var TableViewDetail = function TableViewDetail(props) {
   return React__default.createElement("div", {
-    className: styles$1q['vitro-table-view-detail']
+    className: styles$1r['vitro-table-view-detail']
   }, props.children);
 };
 
-var styles$1r = {"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$1s = {"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);
@@ -66527,14 +66582,14 @@ var Radio = React.forwardRef(function (props, ref) {
       props.onChange(props.value, e);
     }
   };
-  var className = styles$1r['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1r['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1r['vitro-disabled'] : CTRL.EMPTY) + CTRL.SPACE + (props.className || CTRL.EMPTY);
+  var className = styles$1s['vitro-control'] + (props.labelPosition === POSITION.LEFT ? CTRL.SPACE + styles$1s['vitro-left-label'] : CTRL.EMPTY) + CTRL.SPACE + (props.isDisabled ? styles$1s['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$1r['vitro-label']
+    className: styles$1s['vitro-label']
   }), React__default.createElement("div", {
-    className: styles$1r['vitro-radio-content']
+    className: styles$1s['vitro-radio-content']
   }, React__default.createElement("input", {
     ref: radioRef,
     type: 'radio',
@@ -66546,7 +66601,7 @@ var Radio = React.forwardRef(function (props, ref) {
     onChange: onChange
   }), props.labelPosition !== POSITION.LEFT && React__default.createElement(Label, {
     text: props.label,
-    className: styles$1r['vitro-label']
+    className: styles$1s['vitro-label']
   })));
 });
 
@@ -66560,7 +66615,7 @@ var TARGET$1 = function TARGET() {};
 TARGET$1.BLANK = '_blank';
 TARGET$1.SELF = '_self';
 
-var styles$1s = {"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$1t = {"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),
@@ -66630,7 +66685,7 @@ var LinkInput = React.forwardRef(function (props, ref) {
       link.remove();
     }
   };
-  var className = styles$1s['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1s['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1s['vitro-edit-mode'] : CTRL.EMPTY);
+  var className = styles$1t['vitro-link-input'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY) + (props.isReadOnly ? CTRL.SPACE + styles$1t['vitro-read-only'] : CTRL.EMPTY) + (isEditMode ? CTRL.SPACE + styles$1t['vitro-edit-mode'] : CTRL.EMPTY);
   return React__default.createElement("div", {
     className: className
   }, React__default.createElement(Tooltip$1, {
@@ -66649,53 +66704,14 @@ var LinkInput = React.forwardRef(function (props, ref) {
     isRequired: props.isRequired,
     isError: props.isError,
     isReadOnly: props.isReadOnly ? true : !isEditMode,
-    className: styles$1s['vitro-control']
+    className: styles$1t['vitro-control']
   }))), !props.isReadOnly && !isEditMode && React__default.createElement(ImageButton, {
     onClick: onClickEditButton,
     tooltipText: localeService.create(LOCALE$b.TOOLTIP_EDIT),
-    className: styles$1s['vitro-edit-button']
+    className: styles$1t['vitro-edit-button']
   }));
 });
 
-var Overlay$2 = React.forwardRef(function (props, ref) {
-  var _useState = React.useState(null),
-    target = _useState[0],
-    _setTarget = _useState[1];
-  var _useState2 = React.useState(),
-    style = _useState2[0],
-    _setStyle = _useState2[1];
-  React.useImperativeHandle(ref, function () {
-    return {
-      setTarget: function setTarget(target) {
-        _setTarget(target);
-      },
-      setStyle: function setStyle(style) {
-        _setStyle(style);
-      }
-    };
-  });
-  React.useEffect(function () {
-    if (props.target) {
-      _setTarget(props.target);
-    }
-  }, [props.target]);
-  React.useEffect(function () {
-    if (props.style) {
-      _setStyle(props.style);
-    }
-  }, [props.style]);
-  return React__default.createElement(Overlay$1, {
-    show: props.isShow,
-    target: target,
-    container: props.container,
-    placement: props.placement || exports.PLACEMENT.AUTO,
-    flip: props.isFlip ? true : false
-  }, React__default.createElement("div", {
-    className: props.className,
-    style: style
-  }, props.children));
-});
-
 var LOCALE$c;
 (function (LOCALE) {
   LOCALE["TITLE"] = "app.common.systemExceptionDialog.title";
@@ -66709,7 +66725,7 @@ var LOCALE$c;
   LOCALE["SETTING_SYSTEM_INFO"] = "systemInformation";
 })(LOCALE$c || (LOCALE$c = {}));
 
-var styles$1t = {"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$1u = {"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$c.SETTING_SCREENSHOT, LOCALE$c.SETTING_EXCEPTION_TEXT, LOCALE$c.SETTING_USER_NAME, LOCALE$c.SETTING_SYSTEM_INFO];
 var SystemExceptionDialog = function SystemExceptionDialog(props) {
@@ -66755,46 +66771,46 @@ var SystemExceptionDialog = function SystemExceptionDialog(props) {
     text: props.labelConfirm || localeService.create(LOCALE$c.ACTION_SEND)
   }];
   var hiddenContent = React__default.createElement("div", {
-    className: styles$1t['vitro-settings-list']
+    className: styles$1u['vitro-settings-list']
   }, settingsList.map(function (name, index) {
     return React__default.createElement("div", {
       key: index,
-      className: styles$1t['vitro-flex']
+      className: styles$1u['vitro-flex']
     }, React__default.createElement(Checkbox, {
       label: CTRL.EMPTY,
       name: name,
       value: true,
       onChange: onChangeSetting,
-      className: styles$1t['vitro-checkbox']
+      className: styles$1u['vitro-checkbox']
     }), getCheckboxLabel(name));
   }));
   return React__default.createElement(Dialog, {
     title: localeService.create(LOCALE$c.TITLE),
     subtitle: isMobileView ? CTRL.EMPTY : localeService.create(LOCALE$c.SUBTITLE),
     image: React__default.createElement("div", {
-      className: styles$1t['vitro-image']
+      className: styles$1u['vitro-image']
     }),
     onClose: props.onCancel,
     buttonList: buttonList,
     labelClose: props.labelClose,
-    className: styles$1t['vitro-system-exception-dialog'],
+    className: styles$1u['vitro-system-exception-dialog'],
     hiddenContent: hiddenContent,
     isDismissible: true
   }, React__default.createElement(DialogContent, null, isMobileView && React__default.createElement(Label, {
     text: localeService.create(LOCALE$c.SUBTITLE),
-    className: styles$1t['vitro-label']
+    className: styles$1u['vitro-label']
   }), React__default.createElement(Input, {
     ref: inputRef,
-    className: styles$1t['vitro-input'],
+    className: styles$1u['vitro-input'],
     isMultiline: true
   }), React__default.createElement("div", {
-    className: styles$1t['vitro-exception']
+    className: styles$1u['vitro-exception']
   }, React__default.createElement(ScrollBar, {
-    contentClassName: styles$1t['vitro-scrollbar-content']
+    contentClassName: styles$1u['vitro-scrollbar-content']
   }, props.stackTrace))));
 };
 
-var styles$1u = {"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$1v = {"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),
@@ -66811,11 +66827,11 @@ var StarButton = function StarButton(props) {
   };
   return React__default.createElement("button", {
     onClick: onClick,
-    className: styles$1u['vitro-star-button'] + (isActive ? CTRL.SPACE + styles$1u['vitro-active'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$1v['vitro-star-button'] + (isActive ? CTRL.SPACE + styles$1v['vitro-active'] : CTRL.EMPTY) + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   });
 };
 
-var styles$1v = {"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$1w = {"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),
@@ -66836,7 +66852,7 @@ var SiteItem = function SiteItem(props) {
       setIsShowStar(false);
     }
   };
-  var className = [styles$1v['vitro-item'], props.className || CTRL.EMPTY, props.isActive ? styles$1v['vitro-active'] : CTRL.EMPTY, props.isMobileView && styles$1v['vitro-mobile-view']].join(CTRL.SPACE);
+  var className = [styles$1w['vitro-item'], props.className || CTRL.EMPTY, props.isActive ? styles$1w['vitro-active'] : CTRL.EMPTY, props.isMobileView && styles$1w['vitro-mobile-view']].join(CTRL.SPACE);
   return React__default.createElement(FlexBox, {
     onClick: props.onClick,
     onMouseOver: onMouseOver,
@@ -66844,19 +66860,19 @@ var SiteItem = function SiteItem(props) {
     className: className
   }, props.imageUrl ? React__default.createElement(Image, {
     defaultUrl: props.imageUrl,
-    className: styles$1v['vitro-image']
+    className: styles$1w['vitro-image']
   }) : React__default.createElement("div", {
-    className: styles$1v['vitro-default-image']
+    className: styles$1w['vitro-default-image']
   }), React__default.createElement("div", {
-    className: styles$1v['vitro-name']
+    className: styles$1w['vitro-name']
   }, props.name), props.onStar && React__default.createElement(StarButton, {
     onChange: props.onStar,
     isActive: props.isStarActive,
-    className: isShowStar || props.isStarActive ? CTRL.EMPTY : styles$1v['vitro-hidden']
+    className: isShowStar || props.isStarActive ? CTRL.EMPTY : styles$1w['vitro-hidden']
   }));
 };
 
-var styles$1w = {"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$1x = {"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),
@@ -66951,56 +66967,56 @@ var SiteSelect = function SiteSelect(props) {
     itemList: visibleItemList,
     valueTemplate: getItem,
     filterValueTemplate: filterValueTemplate,
-    className: styles$1w['vitro-search-value-list'],
-    inputClassName: styles$1w['vitro-search-input']
+    className: styles$1x['vitro-search-value-list'],
+    inputClassName: styles$1x['vitro-search-input']
   }, React__default.createElement(SiteItem, Object.assign({}, props.rootItem, {
     isMobileView: isMobileView,
     onClick: function onClick() {
       return onSelect(props.rootItem);
     },
-    className: styles$1w['vitro-root-item']
+    className: styles$1x['vitro-root-item']
   })), React__default.createElement(FlexBox, {
-    className: styles$1w['vitro-title']
+    className: styles$1x['vitro-title']
   }, props.title, props.onStarChange && React__default.createElement(StarButton, {
     onChange: filterStarActive
   })));
   return React__default.createElement("div", {
-    className: styles$1w['vitro-site-select']
+    className: styles$1x['vitro-site-select']
   }, React__default.createElement(FlexBox, {
-    className: styles$1w['vitro-flex'],
+    className: styles$1x['vitro-flex'],
     ref: flexBoxRef
   }, React__default.createElement("h2", {
     onClick: onClick
   }, props.activeItem.name), React__default.createElement(ImageButton, {
-    className: isExpanded ? styles$1w['vitro-collapse'] : styles$1w['vitro-expand'],
+    className: isExpanded ? styles$1x['vitro-collapse'] : styles$1x['vitro-expand'],
     onClick: onClick
   })), isMobileView && React__default.createElement(SlideUpPanel, {
-    className: styles$1w['vitro-slide-up-panel'],
+    className: styles$1x['vitro-slide-up-panel'],
     isShow: isExpanded,
     onClose: function onClose() {
       return setIsExpanded(false);
     }
   }, content), !isMobileView && isExpanded && React__default.createElement("div", {
-    className: styles$1w['vitro-site-list'],
+    className: styles$1x['vitro-site-list'],
     ref: listRef
   }, content));
 };
 
-var styles$1x = {"vitro-bottom":"_bottom-align-control-group_vitro-bottom_3-a5nWD"};
+var styles$1y = {"vitro-bottom":"_bottom-align-control-group_vitro-bottom_3-a5nWD"};
 
 var BottomAlignControlGroup = function BottomAlignControlGroup(props) {
   return React__default.createElement("div", {
-    className: styles$1x['vitro-bottom']
+    className: styles$1y['vitro-bottom']
   }, props.children);
 };
 
-var styles$1y = {"vitro-linear-progress":"_linear-progress_vitro-linear-progress_1i4VVyb","vitro-bar":"_linear-progress_vitro-bar_2rwmbp3","progress":"_linear-progress_progress_11DTdlB"};
+var styles$1z = {"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$1y['vitro-linear-progress'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$1z['vitro-linear-progress'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$1y['vitro-bar']
+    className: styles$1z['vitro-bar']
   }));
 };
 
@@ -67058,6 +67074,7 @@ exports.LeftAlignControlGroup = LeftAlignControlGroup;
 exports.LinearProgress = LinearProgress;
 exports.Link = Link;
 exports.LinkInput = LinkInput;
+exports.List = List;
 exports.Login = Login;
 exports.LoginForm = LoginForm;
 exports.LookupPicker = LookupPicker;