@vitrosoftware/common-ui-ts 1.1.35 → 1.1.37

package/dist/index.js

@@ -150,6 +150,14 @@ var app$1 = {
 		},
 		messageInput: {
 			placeholder: "Добавить комментарий..."
+		},
+		search: {
+			input: {
+				more: "ещё {{count}}"
+			},
+			checkboxList: {
+				emptyPlaceholder: "Нет данных"
+			}
 		}
 	}
 };
@@ -250,6 +258,7 @@ var ScrollBar = function ScrollBar(props) {
   EVENT["RESIZE"] = "resize";
   EVENT["DRAGOVER"] = "dragover";
   EVENT["DRAGLEAVE"] = "dragleave";
+  EVENT["CLICK"] = "click";
   EVENT["HISTORY_UPDATE"] = "vitro.history.update";
   EVENT["HISTORY_CHANGED"] = "vitro.history.changed";
   EVENT["DROP"] = "drop";
@@ -20430,6 +20439,37 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   }
   return target;
 }
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _toPrimitive(input, hint) {
   if (typeof input !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
@@ -20857,6 +20897,11 @@ var SECTION;
   SECTION["HEADER"] = "Header";
   SECTION["SPACE"] = "Space";
 })(SECTION || (SECTION = {}));
+var OPERATOR;
+(function (OPERATOR) {
+  OPERATOR[OPERATOR["AND"] = 0] = "AND";
+  OPERATOR[OPERATOR["OR"] = 1] = "OR";
+})(OPERATOR || (OPERATOR = {}));
 
 var TableViewConstants = {
     __proto__: null,
@@ -20876,7 +20921,8 @@ var TableViewConstants = {
     get ROW_ID () { return ROW_ID; },
     get NUMBER_FORMAT () { return NUMBER_FORMAT; },
     get ACTION () { return ACTION; },
-    get SECTION () { return SECTION; }
+    get SECTION () { return SECTION; },
+    get OPERATOR () { return OPERATOR; }
 };
 
 var styles$4 = {"vitro-table-view":"_table-view_vitro-table-view_1tTs32D"};
@@ -20898,25 +20944,40 @@ var TreeGrid = function TreeGrid(props) {
       }
     }
   };
+  var initData = function initData(data, value) {
+    if (data.indexOf('<B') === -1) {
+      var configStartTag = '</Grid>';
+      var insertIndex = data.indexOf(configStartTag);
+      data = data.slice(0, insertIndex) + ("<B>" + value + "</B>") + data.slice(insertIndex);
+    } else {
+      var _configStartTag = '<B ';
+      var _insertIndex = data.indexOf(_configStartTag) + _configStartTag.length;
+      data = data.slice(0, _insertIndex) + value + CTRL.SPACE + data.slice(_insertIndex);
+    }
+    return data;
+  };
   var onDataSendHandler = function onDataSendHandler(tableView, source, data) {
+    var newData = data;
     if (tableView.filterOneLevel) {
-      if (data.indexOf('<B') === -1) {
-        var configStartTag = '</Grid>';
-        var insertIndex = data.indexOf(configStartTag);
-        data = data.slice(0, insertIndex) + '<B>FilterOneLevel="1"</B>' + data.slice(insertIndex);
-      } else {
-        var _configStartTag = '<B ';
-        var _insertIndex = data.indexOf(_configStartTag) + _configStartTag.length;
-        data = data.slice(0, _insertIndex) + 'FilterOneLevel="1" ' + data.slice(_insertIndex);
-      }
+      newData = initData(newData, 'FilterOneLevel="1"');
     }
-    return data;
+    if (tableView.searchCriterionList && tableView.searchCriterionList.length && tableView.parentId) {
+      var searchCriterionList = JSON.stringify(tableView.searchCriterionList);
+      var parentId = tableView.parentId;
+      var value = "SearchCriterionList='" + searchCriterionList + "' ParentId=\"" + parentId + "\"";
+      newData = initData(data, value);
+    }
+    return newData;
   };
   var onGridLoaded = function onGridLoaded(g, next) {
     var grid = new TreeGridTableViewContextImpl(g);
     if (props.filterOneLevel) {
       grid.filterOneLevel = props.filterOneLevel;
     }
+    if (props.searchCriterionList && props.searchParentId) {
+      grid.searchCriterionList = props.searchCriterionList;
+      grid.parentId = props.searchParentId;
+    }
     if (props.eventHandlerList) {
       props.eventHandlerList.forEach(function (eventHandler) {
         grid.setEventHandler(eventHandler);
@@ -59689,33 +59750,22 @@ var ActionInfo = function ActionInfo(props) {
     return info;
   };
   var getText = function getText() {
-    var count = props.itemList.length;
     var successCount = props.successResult ? props.successResult.length : 0;
-    var failCount = props.failResult ? props.failResult.length : 0;
     if (props.action === actionMap.progress) {
       return localeService.create(LOCALE$1.PROGRESS_STD, {
-        count: count - successCount - failCount,
-        itemCount: count
+        actionCode: localeService.create(LOCALE$1.ACTION + CTRL.DOT + props.actionCode)
       });
     }
     if (props.action === actionMap.after) {
       if (props.isSuccess) {
         return localeService.create(LOCALE$1.SUCCESS_STD, {
           count: successCount,
-          itemCount: count
+          actionCode: localeService.create(LOCALE$1.ACTION + CTRL.DOT + props.actionCode)
         });
       } else {
-        if (successCount) {
-          return localeService.create(LOCALE$1.ERROR_STD, {
-            count: successCount,
-            itemCount: count
-          });
-        } else {
-          return localeService.create(LOCALE$1.ERROR_STD, {
-            count: successCount,
-            itemCount: count
-          });
-        }
+        return localeService.create(LOCALE$1.ERROR_STD, {
+          actionCode: localeService.create(LOCALE$1.ACTION + CTRL.DOT + props.actionCode)
+        });
       }
     }
     return CTRL.EMPTY;
@@ -60290,7 +60340,7 @@ var DropdownButton = function DropdownButton(props) {
     className: styles$a['vitro-title']
   }, props.title), React__default.createElement("span", {
     className: styles$a['vitro-dropdown-icon']
-  }, props.title)), React__default.createElement(BootstrapDropdown.Menu, {
+  })), React__default.createElement(BootstrapDropdown.Menu, {
     renderOnMount: true,
     flip: props.flip !== false
   }, dropItemList.map(function (x) {
@@ -61279,13 +61329,20 @@ var DatePicker = function DatePicker(props) {
     if (props.maxValue) {
       config.max = props.maxValue;
     }
+    if (config.value) {
+      config.value = new Date(config.value);
+    }
     $$3(ref.current).kendoDatePicker(config);
     var picker = $$3(ref.current).data(componentName);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
   }, [ref]);
   React.useEffect(function () {
-    $$3(ref.current).data(componentName).value(props.value);
+    if (props.value) {
+      $$3(ref.current).data(componentName).value(new Date(props.value));
+    } else {
+      $$3(ref.current).data(componentName).value(props.value);
+    }
   }, [props.value]);
   React.useEffect(function () {
     if (props.minValue) $$3(ref.current).data(componentName).min(props.minValue);
@@ -61444,16 +61501,17 @@ var TimePicker = function TimePicker(props) {
   }, props.errorMessage));
 };
 
-var styles$o = {"vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth"};
+var styles$o = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
 
 var htmlValueStyles = {"vitro-item-html-value":"_lookup-picker-html-value_vitro-item-html-value_2QBoTey"};
 
 var SelectedValueList = function SelectedValueList(props) {
+  var className = props.isMultiSelect ? styles$o['vitro-selected-item-multi'] : styles$o['vitro-selected-item'];
   return React__default.createElement(React__default.Fragment, null, props.list.map(function (x) {
     var title = props.selectedValueTemplate(x);
     return React__default.createElement("div", {
       key: x.id,
-      className: styles$o['vitro-selected-item'],
+      className: className,
       title: title
     }, props.getHtmlValue && props.getHtmlValue(x) ? React__default.createElement("div", {
       className: htmlValueStyles['vitro-item-html-value']
@@ -61592,8 +61650,8 @@ var LookupPicker = function LookupPicker(props) {
       setSelectedValueList([]);
     }
   }, [props.selectedValue]);
-  React.useEffect(function () {
-    if (inputValue && inputValue.length && inputValue.length >= props.filterMinLength) {
+  var onInputValueUpdated = function onInputValueUpdated() {
+    if ((inputValue || inputValue === CTRL.EMPTY) && inputValue.length >= props.filterMinLength) {
       if (props.valueList) {
         updateFilteredValueList(props.valueList);
       } else if (props.getValueList) {
@@ -61610,6 +61668,9 @@ var LookupPicker = function LookupPicker(props) {
         });
       }
     }
+  };
+  React.useEffect(function () {
+    onInputValueUpdated();
   }, [inputValue]);
   React.useEffect(function () {
     if (props.valueList && selectedValueList) {
@@ -61713,6 +61774,12 @@ var LookupPicker = function LookupPicker(props) {
     setState(styles$q['vitro-focus']);
     setValueListVisible(true);
   };
+  var onCollapseButtonClick = function onCollapseButtonClick(valueListVisible) {
+    setValueListVisible(!valueListVisible);
+    if (!valueListVisible) {
+      onInputValueUpdated();
+    }
+  };
   var copyValue = function copyValue() {
     navigator.clipboard.writeText(selectedValueList.join(CTRL.COMMA));
   };
@@ -61768,7 +61835,7 @@ var LookupPicker = function LookupPicker(props) {
     }
   }), !props.isDisabled && !props.isReadOnly && React__default.createElement("div", {
     onClick: function onClick() {
-      return setValueListVisible(!valueListVisible);
+      return onCollapseButtonClick(valueListVisible);
     },
     className: valueListVisible ? styles$q['vitro-button-collapse-up'] : styles$q['vitro-button-collapse-bottom']
   }), props.isReadOnly ? React__default.createElement("span", {
@@ -63042,12 +63109,12 @@ function _extends$6() { _extends$6 = Object.assign ? Object.assign.bind() : func
 function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray$1(arr); }
+function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 function _objectWithoutProperties$4(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$d(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose$d(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -63483,7 +63550,7 @@ var LinkItem$1 = function LinkItem(props) {
   var _useState = React.useState(false),
     isHover = _useState[0],
     setIsHover = _useState[1];
-  var isActive = props.link === props.currentUrl || props.activeItem === props.id;
+  var isActive = props.link === props.currentUrl || props.activeItem === props.id || props.altUrlList && props.altUrlList.includes(props.currentUrl);
   var className = isActive ? styles$v['vitro-active'] : isHover ? styles$v['vitro-hover'] : CTRL.EMPTY;
   var onClick = function onClick(e) {
     if (props.link) {
@@ -64193,6 +64260,736 @@ var ImagePicker = function ImagePicker(props) {
   }))));
 };
 
+var styles$J = {"vitro-criterion-container":"_criterion_vitro-criterion-container_2cYcSkL","vitro-block":"_criterion_vitro-block_3E9-RXM","vitro-control":"_criterion_vitro-control_2JLaybj","vitro-label":"_criterion_vitro-label_3F6a8dj","vitro-operator-select-container":"_criterion_vitro-operator-select-container_3OkjzXG","vitro-operator-select":"_criterion_vitro-operator-select_1guNlk9","vitro-operator-list":"_criterion_vitro-operator-list_3A2VZsd","vitro-button-cancel":"_criterion_vitro-button-cancel_2C2G0sL","vitro-focus":"_criterion_vitro-focus_3FNLsoN","vitro-error":"_criterion_vitro-error_3pvFrlW","vitro-condition-select":"_criterion_vitro-condition-select_1hTBBg-","vitro-icon":"_criterion_vitro-icon_1DmS0jh","vitro-condition-list":"_criterion_vitro-condition-list_10UIxJI"};
+
+var ConditionSelect = function ConditionSelect(props) {
+  var _useState = React.useState(props.itemList[0]),
+    condition = _useState[0],
+    setCondition = _useState[1];
+  var _useState2 = React.useState(false),
+    showSelectList = _useState2[0],
+    setShowSelectList = _useState2[1];
+  var selectRef = React.useRef(null);
+  var listRef = React.useRef(null);
+  React.useEffect(function () {
+    window.addEventListener(exports.EVENT.MOUSEDOWN, onBlur);
+    return function () {
+      window.removeEventListener(exports.EVENT.MOUSEDOWN, onBlur);
+    };
+  });
+  React.useEffect(function () {
+    if (selectRef && selectRef.current) {
+      selectRef.current.style.transform = "translateX(" + props.translateX + "px)";
+    }
+  }, [props.translateX]);
+  React.useEffect(function () {
+    if (listRef && listRef.current) {
+      listRef.current.style.transform = "translateX(" + props.translateX + "px)";
+    }
+  }, [showSelectList]);
+  var toggleSelect = function toggleSelect() {
+    setShowSelectList(!showSelectList);
+  };
+  var _onClick = function onClick(item) {
+    setCondition(item);
+    setShowSelectList(false);
+    props.onSelect(item);
+  };
+  var onBlur = function onBlur(e) {
+    if (listRef.current && !listRef.current.contains(e.target) && selectRef.current && !selectRef.current.contains(e.target)) {
+      setShowSelectList(false);
+    }
+  };
+  return React__default.createElement(React__default.Fragment, null, condition && React__default.createElement("div", {
+    ref: selectRef,
+    className: styles$J['vitro-condition-select']
+  }, React__default.createElement("div", {
+    onClick: toggleSelect
+  }, condition.imageUrl ? React__default.createElement(Icon, {
+    defaultUrl: condition.imageUrl,
+    className: styles$J['vitro-icon']
+  }) : condition.text)), showSelectList && React__default.createElement("ul", {
+    ref: listRef,
+    className: styles$J['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(Icon, {
+      defaultUrl: item.imageUrl,
+      className: styles$J['vitro-icon']
+    }), item.text);
+  })));
+};
+
+var Criterion = function Criterion(props) {
+  var _useState = React.useState(props.operatorList.length ? props.operatorList[0] : null),
+    operator = _useState[0],
+    setOperator = _useState[1];
+  var _useState2 = React.useState(false),
+    showOperatorSelectList = _useState2[0],
+    setShowOperatorSelectList = _useState2[1];
+  var _useState3 = React.useState(0),
+    translate = _useState3[0],
+    setTranslate = _useState3[1];
+  var _useState4 = React.useState(CTRL.EMPTY),
+    state = _useState4[0],
+    setState = _useState4[1];
+  var value = React.useMemo(function () {
+    var _props$operatorList$, _props$conditionList$;
+    return {
+      internalName: props.content.props.name,
+      operator: (_props$operatorList$ = props.operatorList[0]) === null || _props$operatorList$ === void 0 ? void 0 : _props$operatorList$.type,
+      valueList: [],
+      condition: (_props$conditionList$ = props.conditionList[0]) === null || _props$conditionList$ === void 0 ? void 0 : _props$conditionList$.type
+    };
+  }, []);
+  var selectRef = React.useRef(null);
+  var labelRef = React.useRef(null);
+  React.useEffect(function () {
+    window.addEventListener(exports.EVENT.CLICK, onBlurSelect);
+    return function () {
+      window.removeEventListener(exports.EVENT.CLICK, onBlurSelect);
+    };
+  }, []);
+  React.useEffect(function () {
+    if (labelRef && labelRef.current) {
+      setTranslate(labelRef.current.offsetWidth + 8);
+    }
+  }, [labelRef]);
+  var onOperatorClick = function onOperatorClick(operator) {
+    setOperator(operator);
+    value.operator = operator.type;
+    onChange(value);
+  };
+  var onBlurSelect = function onBlurSelect(e) {
+    var select = selectRef.current;
+    if (select && e.target !== select && e.target !== select.children.item(0)) {
+      setShowOperatorSelectList(false);
+    }
+  };
+  var toggleOperatorSelect = function toggleOperatorSelect() {
+    setShowOperatorSelectList(!showOperatorSelectList);
+  };
+  var onConditionClick = function onConditionClick(cond) {
+    value.condition = cond.type;
+    onChange(value);
+  };
+  var onFocus = function onFocus(e) {
+    setState(styles$J['vitro-focus']);
+    if (props.content.props.onFocus) {
+      props.content.props.onFocus(e);
+    }
+  };
+  var onBlur = function onBlur(e) {
+    setState(props.content.props.errorMessage ? styles$J['vitro-error'] : CTRL.EMPTY);
+    if (props.content.props.onBlur) {
+      props.content.props.onBlur(e);
+    }
+  };
+  var onChange = function onChange(val) {
+    if (props.onChange) {
+      props.onChange(val, props.content.props.name);
+    }
+  };
+  var onControlChange = function onControlChange(val, name) {
+    value.valueList = Array.isArray(val) ? val : [val];
+    onChange(value);
+  };
+  return React__default.createElement("div", {
+    className: styles$J['vitro-criterion-container']
+  }, React__default.createElement("div", {
+    className: styles$J['vitro-operator-select-container']
+  }, props.isShowOperatorSelect && React__default.createElement("div", {
+    ref: selectRef,
+    className: styles$J['vitro-operator-select'],
+    onClick: toggleOperatorSelect
+  }, React__default.createElement("div", null, operator.text), showOperatorSelectList && React__default.createElement("ul", {
+    className: styles$J['vitro-operator-list']
+  }, props.operatorList.map(function (item) {
+    return React__default.createElement("li", {
+      onClick: function onClick() {
+        return onOperatorClick(item);
+      }
+    }, item.text);
+  })))), React__default.createElement("div", {
+    className: styles$J['vitro-control'] + CTRL.SPACE + state
+  }, React__default.createElement("div", {
+    ref: labelRef,
+    className: styles$J['vitro-label']
+  }, React__default.createElement("span", null, props.label)), React__default.createElement(ConditionSelect, {
+    itemList: props.conditionList,
+    onSelect: onConditionClick,
+    translateX: translate
+  }), React__default.createElement(props.content.component, _extends({}, props.content.props, {
+    className: styles$J['vitro-control'],
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onChange: onControlChange,
+    label: CTRL.EMPTY,
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false
+  }))), React__default.createElement("button", {
+    onClick: function onClick() {
+      return props.onDelete(props.content.props.id);
+    },
+    className: styles$J['vitro-button-cancel']
+  }));
+};
+
+var LOCALE$8;
+(function (LOCALE) {
+  LOCALE["INPUT_MORE"] = "app.common.search.input.more";
+  LOCALE["EMPTY_PLACEHOLDER"] = "app.common.search.checkboxList.emptyPlaceholder";
+})(LOCALE$8 || (LOCALE$8 = {}));
+
+var styles$K = {"vitro-control":"_input_vitro-control__btu7j_","vitro-active":"_input_vitro-active_jxhGdE8","vitro-focus":"_input_vitro-focus_3tuxmPs","vitro-search-value-list":"_input_vitro-search-value-list_2I_KVY5","vitro-button-cancel":"_input_vitro-button-cancel_YqNZPj-","vitro-button-settings":"_input_vitro-button-settings_1w9FwYt","vitro-search-value":"_input_vitro-search-value_1ZbcNTJ"};
+
+var Input$1 = function Input(props) {
+  var _useState = React.useState(Boolean(props.isSettingsActive)),
+    isToggled = _useState[0],
+    setIsToggled = _useState[1];
+  var _useState2 = React.useState(false),
+    isActive = _useState2[0],
+    setIsActive = _useState2[1];
+  var _useState3 = React.useState(CTRL.EMPTY),
+    state = _useState3[0],
+    setState = _useState3[1];
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  var inputRef = React.useRef(null);
+  React.useEffect(function () {
+    var _props$valueList;
+    if (state || props.textValue || (_props$valueList = props.valueList) !== null && _props$valueList !== void 0 && _props$valueList.length) {
+      setIsActive(true);
+    }
+  }, [state, props.textValue, props.valueList]);
+  React.useEffect(function () {
+    setIsToggled(Boolean(props.isSettingsActive));
+  }, [props.isSettingsActive]);
+  var onSettingsClick = function onSettingsClick() {
+    setIsToggled(!isToggled);
+    if (props.onSettingsClick) {
+      props.onSettingsClick(!isToggled);
+    }
+  };
+  var onKeyDown = function onKeyDown(e) {
+    var value = inputRef.current && inputRef.current.value;
+    if (e.keyCode === 13 && value) {
+      e.preventDefault();
+      props.onEnter();
+      inputRef.current.value = CTRL.EMPTY;
+    }
+  };
+  var onCancel = function onCancel() {
+    setIsActive(false);
+    if (inputRef.current) {
+      inputRef.current.value = CTRL.EMPTY;
+    }
+    props.onCancel();
+  };
+  var onChange = function onChange(e) {
+    if (props.onChange) {
+      props.onChange(e.target.value);
+    }
+  };
+  var getClassName = function getClassName() {
+    var classList = [styles$K['vitro-control'], props.className || CTRL.EMPTY, state];
+    if (isActive) {
+      classList.push(styles$K['vitro-active']);
+    }
+    return classList.join(CTRL.SPACE);
+  };
+  var getValueList = function getValueList(value) {
+    return value.valueList.map(function (x) {
+      if (typeof x === 'object') {
+        if (x instanceof Date) {
+          return x.toLocaleString().split(CTRL.COMMA)[0];
+        }
+        return x.name || x.fieldValueMap.name;
+      } else {
+        return x;
+      }
+    });
+  };
+  var getSelectedValueList = function getSelectedValueList(valueList) {
+    var firstValue = valueList[0];
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: styles$K['vitro-search-value']
+    }, firstValue.name + CTRL.COLON + CTRL.SPACE, getValueList(firstValue).join(CTRL.COMMA + CTRL.SPACE)), valueList.length && valueList.length > 1 ? React__default.createElement("div", {
+      className: styles$K['vitro-search-value']
+    }, localeService.create(LOCALE$8.INPUT_MORE, {
+      count: valueList.length - 1
+    })) : null);
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: getClassName()
+  }, React__default.createElement("div", {
+    className: styles$K['vitro-search-value-list']
+  }, props.valueList && props.valueList.length ? getSelectedValueList(props.valueList) : React__default.createElement("input", {
+    type: 'text',
+    ref: inputRef,
+    onKeyDown: onKeyDown,
+    onChange: onChange,
+    onFocus: function onFocus() {
+      return setState(styles$K['vitro-focus']);
+    },
+    onBlur: function onBlur() {
+      return setState(CTRL.EMPTY);
+    },
+    placeholder: !isActive ? props.placeholder : CTRL.EMPTY
+  })), isActive && React__default.createElement(React__default.Fragment, null, props.isShowSettings && React__default.createElement("button", {
+    onClick: onSettingsClick,
+    className: styles$K['vitro-button-settings'] + (isToggled ? CTRL.SPACE + styles$K['vitro-active'] : CTRL.EMPTY)
+  }), React__default.createElement("button", {
+    onClick: onCancel,
+    className: styles$K['vitro-button-cancel']
+  }))));
+};
+
+var FieldIterator = function FieldIterator(props) {
+  var _useState = React.useState([]),
+    controlList = _useState[0],
+    setControlList = _useState[1];
+  var changedFieldValueMap = React.useMemo(function () {
+    return new Map();
+  }, []);
+  var saveStatus = React.useMemo(function () {
+    return {
+      isSaving: false
+    };
+  }, []);
+  React.useEffect(function () {
+    saveStatus.isSaving = false;
+    if (props.fieldList && props.fieldList.length) {
+      if (props.isClearChangedFieldValueMap) {
+        changedFieldValueMap.clear();
+      }
+      if (props.changedFieldValueMap) {
+        for (var _i = 0, _Object$entries = Object.entries(props.changedFieldValueMap); _i < _Object$entries.length; _i++) {
+          var _Object$entries$_i = _Object$entries[_i],
+            key = _Object$entries$_i[0],
+            value = _Object$entries$_i[1];
+          changedFieldValueMap.set(key, value);
+        }
+      }
+      createControlList();
+    } else {
+      setControlList([]);
+    }
+  }, [props.fieldList]);
+  React.useEffect(function () {
+    updateControlList();
+  }, [props.fieldValueMap, props.fieldList]);
+  React.useEffect(function () {
+    setErrorMessage();
+  }, [props.errorControlList]);
+  var updateControlList = function updateControlList() {
+    if (props.fieldValueMap) {
+      var _loop = function _loop() {
+        var _Object$entries2$_i = _Object$entries2[_i2],
+          key = _Object$entries2$_i[0],
+          value = _Object$entries2$_i[1];
+        setControlList(function (prevState) {
+          return prevState.map(function (control) {
+            return control.name === key && control.value !== value ? _extends({}, control, {
+              value: value
+            }) : control;
+          });
+        });
+      };
+      for (var _i2 = 0, _Object$entries2 = Object.entries(props.fieldValueMap); _i2 < _Object$entries2.length; _i2++) {
+        _loop();
+      }
+    }
+  };
+  var isControlRow = function isControlRow(controlName) {
+    if (props.rowFieldList) {
+      return props.rowFieldList.includes(controlName);
+    }
+    return false;
+  };
+  var createBaseControl = function createBaseControl(field) {
+    var _field$fieldValueMap;
+    var control = {
+      id: field.id,
+      label: field.name,
+      name: field.internalName,
+      key: field.internalName,
+      code: field.component ? field.component : field.fieldType.reactComponent,
+      isRequired: field.isRequired,
+      isReadOnly: field.isReadOnly,
+      isDisabled: field.isDisabled,
+      data: field.fieldValueMap,
+      errorMessage: null,
+      isAutoComplete: false,
+      multiline: (_field$fieldValueMap = field.fieldValueMap) === null || _field$fieldValueMap === void 0 ? void 0 : _field$fieldValueMap.multiline,
+      onChange: function onChange(value, name) {
+        return onChangeControl(value, name);
+      },
+      isRow: isControlRow(field.internalName)
+    };
+    return control;
+  };
+  var onChangeControl = function onChangeControl(value, fieldName) {
+    setControlList(function (prevState) {
+      return setControlValue(prevState, value, fieldName);
+    });
+    changedFieldValueMap.set(fieldName, value);
+    props.onChange(changedFieldValueMap, saveStatus);
+  };
+  var setControlValue = function setControlValue(controlList, val, fieldName) {
+    return controlList.map(function (field) {
+      if (field.name === fieldName) {
+        return _extends({}, field, {
+          value: val
+        });
+      }
+      return field;
+    });
+  };
+  var createControlList = function createControlList() {
+    var controlList = [];
+    props.fieldList.forEach(function (field) {
+      var control = createBaseControl(field);
+      if (control.name) {
+        controlList.push(control);
+      }
+    });
+    setControlList(controlList);
+  };
+  var setErrorMessage = function setErrorMessage() {
+    setControlList(function (prevState) {
+      return prevState.map(function (control) {
+        var error = props.errorControlList ? props.errorControlList.find(function (err) {
+          return err.fieldName === control.name;
+        }) : null;
+        if (error) {
+          return _extends({}, control, {
+            errorMessage: error.message
+          });
+        } else {
+          return _extends({}, control, {
+            errorMessage: CTRL.EMPTY
+          });
+        }
+      });
+    });
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollBar, null, controlList.map(function (control) {
+    var component = props.componentMap.find(function (x) {
+      return x.name === control.code;
+    });
+    if (component) {
+      return React__default.createElement("div", {
+        className: control.isRow ? 'vitro-inline' : 'vitro-block'
+      }, React__default.createElement("div", null, React__default.createElement(component.value, control)));
+    }
+    return null;
+  })));
+};
+
+var styles$L = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};
+
+var Filter = function Filter(props) {
+  var _useState = React.useState(null),
+    componentMap = _useState[0],
+    setComponentMap = _useState[1];
+  React.useEffect(function () {
+    initComponentMap();
+  }, [props.componentMap]);
+  var initComponentMap = function initComponentMap() {
+    var map = props.componentMap.map(function (component) {
+      return {
+        name: component.name,
+        value: function value(componentProps) {
+          return React__default.createElement(Criterion, {
+            label: componentProps.label,
+            onDelete: props.onDeleteField,
+            operatorList: props.operatorList,
+            conditionList: props.conditionList,
+            content: {
+              component: component.value,
+              props: _extends({}, componentProps, {
+                label: CTRL.EMPTY
+              })
+            },
+            onChange: componentProps.onChange,
+            isShowOperatorSelect: true
+          });
+        }
+      };
+    });
+    setComponentMap(map);
+  };
+  return React__default.createElement("div", {
+    className: styles$L['vitro-filter']
+  }, componentMap && React__default.createElement(FieldIterator, {
+    fieldList: props.fieldList,
+    componentMap: componentMap,
+    onChange: props.onChange,
+    isClearChangedFieldValueMap: true
+  }));
+};
+
+var styles$M = {"vitro-checkbox-list":"_checkbox-list_vitro-checkbox-list_1iZSkkv","vitro-control":"_checkbox-list_vitro-control_cxgm4cj","vitro-checkbox":"_checkbox-list_vitro-checkbox_1EqsnoQ"};
+
+var CheckboxList = function CheckboxList(props) {
+  var _useState = React.useState(props.itemList),
+    itemList = _useState[0],
+    setItemList = _useState[1];
+  var _useState2 = React.useState([]),
+    searchItemList = _useState2[0],
+    setSearchItemList = _useState2[1];
+  var _useState3 = React.useState(false),
+    isShowSearchResult = _useState3[0],
+    setIsShowSearchResult = _useState3[1];
+  var localeService = inversifyReact.useInjection(SERVICE.LOCALE);
+  var _onChange = function onChange(value, id) {
+    setItemList(function (prevState) {
+      return prevState.map(function (item) {
+        if (item.id === id) {
+          item.value = value;
+        }
+        return item;
+      });
+    });
+    if (props.onChange) {
+      props.onChange(getSelectedItemList());
+    }
+  };
+  var getSelectedItemList = function getSelectedItemList() {
+    return itemList.map(function (item) {
+      if (item.value) {
+        return item.id;
+      }
+    });
+  };
+  var onSearchCancel = function onSearchCancel() {
+    setSearchItemList([]);
+    setIsShowSearchResult(false);
+  };
+  var onInputChange = function onInputChange(text) {
+    var valueList = props.itemList.filter(function (item) {
+      return item.name.toLowerCase().includes(text.toLowerCase());
+    });
+    setSearchItemList(valueList);
+    setIsShowSearchResult(true);
+  };
+  var getCheckbox = function getCheckbox(item) {
+    return React__default.createElement(Checkbox, {
+      label: item.name,
+      name: item.name,
+      value: props.isAllSelected ? true : item.value,
+      onChange: function onChange(value, name) {
+        return _onChange(value, item.id);
+      },
+      className: styles$M['vitro-checkbox']
+    });
+  };
+  return React__default.createElement("div", {
+    className: styles$M['vitro-checkbox-list']
+  }, React__default.createElement(Input$1, {
+    onCancel: onSearchCancel,
+    onChange: onInputChange,
+    onEnter: onInputChange,
+    className: styles$M['vitro-control']
+  }), React__default.createElement(ScrollBar, null, isShowSearchResult ? searchItemList.length ? searchItemList.map(function (item) {
+    return getCheckbox(item);
+  }) : React__default.createElement("span", null, localeService.create(LOCALE$8.EMPTY_PLACEHOLDER)) : itemList.map(function (item) {
+    return getCheckbox(item);
+  })));
+};
+
+var ESC_KEY_CODE$1 = 27;
+var Search = function Search(props) {
+  var _useState = React.useState(false),
+    isShowDialog = _useState[0],
+    setIsShowDialog = _useState[1];
+  var _useState2 = React.useState(false),
+    isShowAddFieldDialog = _useState2[0],
+    setIsShowAddFieldDialog = _useState2[1];
+  var _useState3 = React.useState([]),
+    filterFieldList = _useState3[0],
+    setFilterFieldList = _useState3[1];
+  var _useState4 = React.useState([]),
+    searchCriterionList = _useState4[0],
+    setSearchCriterionList = _useState4[1];
+  var _useState5 = React.useState([]),
+    selectedSearchCriterionList = _useState5[0],
+    setSelectedSearchCriterionList = _useState5[1];
+  var _useState6 = React.useState([]),
+    checkboxFieldList = _useState6[0],
+    setCheckboxFieldList = _useState6[1];
+  var addFieldDialogRef = React.useRef(null);
+  var searchRef = React.useRef(null);
+  React.useEffect(function () {
+    window.addEventListener(exports.EVENT.MOUSEDOWN, onBlurAddFieldDialog);
+    window.addEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
+    return function () {
+      window.removeEventListener(exports.EVENT.MOUSEDOWN, onBlurAddFieldDialog);
+      window.removeEventListener(exports.EVENT.KEYDOWN, onEscClick, false);
+    };
+  });
+  React.useEffect(function () {
+    var checkboxList = props.fieldList;
+    if (props.visibleFieldList) {
+      setFilterFieldList(props.visibleFieldList);
+      checkboxList = props.fieldList.map(function (field) {
+        var _props$visibleFieldLi;
+        if ((_props$visibleFieldLi = props.visibleFieldList) !== null && _props$visibleFieldLi !== void 0 && _props$visibleFieldLi.find(function (f) {
+          return f.id === field.id;
+        })) {
+          return _extends({}, field, {
+            value: true
+          });
+        } else {
+          return field;
+        }
+      });
+    }
+    setCheckboxFieldList(checkboxList);
+  }, [props.visibleFieldList]);
+  var onSettingsClick = function onSettingsClick(active) {
+    setIsShowDialog(active);
+  };
+  var onAddField = function onAddField() {
+    setIsShowAddFieldDialog(!isShowAddFieldDialog);
+  };
+  var onFieldListChange = function onFieldListChange(selectedFieldIdList) {
+    var newFieldList = [];
+    var _loop = function _loop() {
+      var id = _step.value;
+      var field = props.fieldList.find(function (field) {
+        return field.id === id;
+      });
+      if (field) {
+        newFieldList.push(field);
+      }
+    };
+    for (var _iterator = _createForOfIteratorHelperLoose(selectedFieldIdList), _step; !(_step = _iterator()).done;) {
+      _loop();
+    }
+    setFilterFieldList(newFieldList);
+  };
+  var closeSettings = function closeSettings() {
+    setIsShowAddFieldDialog(false);
+    setIsShowDialog(false);
+  };
+  var onDeleteField = function onDeleteField(id) {
+    setFilterFieldList(function (prevState) {
+      return prevState.filter(function (field) {
+        return field.id !== id;
+      });
+    });
+    setCheckboxFieldList(function (prevState) {
+      return prevState.map(function (field) {
+        if (field.id === id) {
+          return _extends({}, field, {
+            value: false
+          });
+        } else {
+          return field;
+        }
+      });
+    });
+  };
+  var onFilterChange = function onFilterChange(changedFieldValueMap, saveStatus) {
+    var criterionList = [];
+    changedFieldValueMap.forEach(function (value, key) {
+      criterionList.push(value);
+    });
+    setSearchCriterionList(criterionList);
+    if (props.onFilterChange) {
+      props.onFilterChange(criterionList);
+    }
+  };
+  var onSubmit = function onSubmit() {
+    props.onSubmit(searchCriterionList);
+    var selectedList = searchCriterionList.map(function (x) {
+      var fieldName = props.fieldList.find(function (field) {
+        return field.internalName === x.internalName;
+      }).name;
+      return _extends({}, x, {
+        name: fieldName
+      });
+    });
+    setSelectedSearchCriterionList(selectedList);
+    closeSettings();
+  };
+  var onCancel = function onCancel() {
+    setSearchCriterionList([]);
+    setSelectedSearchCriterionList([]);
+    closeSettings();
+    props.onCancel();
+  };
+  var onInputChange = function onInputChange(value) {
+    var criterion = {
+      condition: 1,
+      operator: 0,
+      internalName: props.defaultSearchFieldName,
+      valueList: [value]
+    };
+    setSearchCriterionList([criterion]);
+  };
+  var onEscClick = function onEscClick(e) {
+    if (e.keyCode === ESC_KEY_CODE$1) {
+      closeSettings();
+    }
+  };
+  var onBlurAddFieldDialog = function onBlurAddFieldDialog(e) {
+    if (addFieldDialogRef.current && !addFieldDialogRef.current.contains(e.target)) {
+      setIsShowAddFieldDialog(false);
+    }
+  };
+  return React__default.createElement("div", {
+    ref: searchRef,
+    className: styles$L['vitro-search']
+  }, React__default.createElement(Input$1, {
+    valueList: selectedSearchCriterionList,
+    onSettingsClick: onSettingsClick,
+    onCancel: onCancel,
+    onEnter: onSubmit,
+    onChange: onInputChange,
+    placeholder: props.inputPlaceholder,
+    isSettingsActive: isShowDialog,
+    isShowSettings: true
+  }), isShowDialog && React__default.createElement("div", {
+    className: styles$L['vitro-settings-dialog']
+  }, React__default.createElement(Filter, {
+    fieldList: filterFieldList,
+    onChange: onFilterChange,
+    componentMap: props.componentMap,
+    onDeleteField: onDeleteField,
+    operatorList: props.operatorList,
+    conditionList: props.conditionList
+  }), React__default.createElement("div", {
+    className: styles$L['vitro-add-field']
+  }, React__default.createElement(Button$2, {
+    text: props.labelAddField,
+    onClick: onAddField,
+    className: styles$L['vitro-add-field-button']
+  }), isShowAddFieldDialog && React__default.createElement("div", {
+    ref: addFieldDialogRef,
+    className: styles$L['vitro-add-field-dialog']
+  }, React__default.createElement(CheckboxList, {
+    itemList: checkboxFieldList,
+    onChange: onFieldListChange,
+    isAllSelected: props.isAllFieldsVisible
+  }))), React__default.createElement("div", {
+    className: styles$L['vitro-footer']
+  }, React__default.createElement(Button$2, {
+    text: props.labelCancel,
+    onClick: closeSettings,
+    className: styles$L['vitro-button-cancel']
+  }), React__default.createElement(Button$2, {
+    text: props.labelSearch,
+    onClick: onSubmit
+  }))));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
@@ -64212,11 +65009,13 @@ exports.CommandMenuSubItem = CommandMenuSubItem;
 exports.ComponentLoader = ComponentLoader;
 exports.ComponentLoaderContextImpl = ComponentLoaderContextImpl;
 exports.ControlGroup = ControlGroup;
+exports.Criterion = Criterion;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogFooter = DialogFooter;
 exports.DropdownButton = DropdownButton;
+exports.FieldIterator = FieldIterator;
 exports.Icon = Icon;
 exports.ImagePicker = ImagePicker;
 exports.Input = Input;
@@ -64228,6 +65027,7 @@ exports.MessageInput = MessageInput;
 exports.MicroFrontend = MicroFrontend;
 exports.PdfViewer = PdfViewer;
 exports.ScrollBar = ScrollBar;
+exports.Search = Search;
 exports.Sidebar = Sidebar;
 exports.TABLE_VIEW = TableViewConstants;
 exports.TREE_VIEW = TreeViewConstants;