@vitrosoftware/common-ui-ts 1.1.38 → 1.1.40

package/css/std/controls/lookup-picker/lookup-picker-html-value.css

@@ -4,5 +4,4 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 8px;
 }

package/css/std/controls/lookup-picker/lookup-picker-selected-item.css

@@ -16,13 +16,15 @@
 
 .vitro-selected-item {
     margin-right: 6px;
+    grid-gap: 8px;
 }
 
 .vitro-selected-item-multi {
     background: #F7F9FC;
     border-radius: 4px;
-    padding: 2px 4px;
-    margin-right: 12px;
+    padding: 0 4px;
+    height: 24px;
+    grid-gap: 4px;
 }
 
 .vitro-selected-item-multi:last-child {
@@ -30,10 +32,10 @@
 }
 
 .vitro-button-close {
+    cursor: pointer;
     width: 24px;
     height: 24px;
     min-width: 24px;
-    margin-left: 8px;
     background-size: 100%;
     background-position: center;
     background-repeat: no-repeat;

package/css/std/controls/lookup-picker/lookup-picker-value-list.css

@@ -25,6 +25,7 @@
     border-radius: 0px;
     display: flex;
     align-items: center;
+    grid-gap: 8px;
 }
 
 .vitro-value-list .vitro-item:last-child {

package/css/std/controls/lookup-picker/lookup-picker.css

@@ -9,10 +9,11 @@
     border-radius: 4px;
     display: flex;
     width: 100%;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     align-items: center;
-    height: 40px;
-    padding: 8px 32px 8px 16px;
+    min-height: 40px;
+    grid-gap: 4px 12px;
+    padding: 8px 40px 8px 16px;
     position: relative;
 }
 
@@ -100,7 +101,7 @@
     border: none;
     background: transparent;
     flex: 1 1;
-    min-width: 30px;
+    min-width: 2px;
     color: #222D44;
     font-size: 14px;
     line-height: 16px;
@@ -109,7 +110,7 @@
 .vitro-right {
     position: absolute;
     right: 16px;
-    top: calc(50% - 12px);
+    top: 8px;
     display: flex;
 }
 

package/css/std/controls/search/search.css

@@ -20,7 +20,7 @@
 }
 
 .vitro-filter {
-    min-width: 502px;
+    width: 449px;
 }
 
 .vitro-filter :global(.ps) {

package/css/std/controls/user-lookup-picker/user-lookup-picker.css

@@ -0,0 +1,7 @@
+.vitro-avatar {
+    height: 20px;
+    width: 20px;
+    min-width: 20px;
+    font-size: 10px;
+    line-height: 20px;
+}

package/dist/index.css

@@ -3031,13 +3031,15 @@
 
 ._lookup-picker-selected-item_vitro-selected-item_hw-euth {
     margin-right: 6px;
+    grid-gap: 8px;
 }
 
 ._lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ {
     background: #F7F9FC;
     border-radius: 4px;
-    padding: 2px 4px;
-    margin-right: 12px;
+    padding: 0 4px;
+    height: 24px;
+    grid-gap: 4px;
 }
 
 ._lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ:last-child {
@@ -3045,10 +3047,10 @@
 }
 
 ._lookup-picker-selected-item_vitro-button-close_1SRnr_0 {
+    cursor: pointer;
     width: 24px;
     height: 24px;
     min-width: 24px;
-    margin-left: 8px;
     background-size: 100%;
     background-position: center;
     background-repeat: no-repeat;
@@ -3067,7 +3069,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: 8px;
 }
 ._lookup-picker-value-list_vitro-value-list_LSdCMjq {
     position: absolute;
@@ -3096,6 +3097,7 @@
     border-radius: 0px;
     display: flex;
     align-items: center;
+    grid-gap: 8px;
 }
 
 ._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:last-child {
@@ -3154,10 +3156,11 @@
     border-radius: 4px;
     display: flex;
     width: 100%;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     align-items: center;
-    height: 40px;
-    padding: 8px 32px 8px 16px;
+    min-height: 40px;
+    grid-gap: 4px 12px;
+    padding: 8px 40px 8px 16px;
     position: relative;
 }
 
@@ -3252,7 +3255,7 @@
     border: none;
     background: transparent;
     flex: 1 1;
-    min-width: 30px;
+    min-width: 2px;
     color: #222D44;
     font-size: 14px;
     line-height: 16px;
@@ -3261,7 +3264,7 @@
 ._lookup-picker_vitro-right_1XFsL1w {
     position: absolute;
     right: 16px;
-    top: calc(50% - 12px);
+    top: 8px;
     display: flex;
 }
 
@@ -4301,6 +4304,14 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 ._user-profile_vitro-dropdown-item_dSErsta:active {
     background: #DCEEFF;
 }
+._user-lookup-picker_vitro-avatar_2vI-SeH {
+    height: 20px;
+    width: 20px;
+    min-width: 20px;
+    font-size: 10px;
+    line-height: 20px;
+}
+
 ._activity_vitro-title_1rdvvaa {
     color: #bdbdbd;
     margin-bottom: 12px;
@@ -5005,7 +5016,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 }
 
 ._search_vitro-filter_2n-Y-mS {
-    min-width: 502px;
+    width: 449px;
 }
 
 ._search_vitro-filter_2n-Y-mS .ps {

package/dist/index.js

@@ -64043,52 +64043,63 @@ var UserProfile = function UserProfile(props) {
   })));
 };
 
+var styles$E = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
+
 var UserLookupPicker = function UserLookupPicker(props) {
+  var getHtmlValueTemplateProps = function getHtmlValueTemplateProps(item) {
+    var prop = props.getHtmlValueTemplateProps(item);
+    if (props.isMultiSelect) {
+      return _extends({}, prop, {
+        className: styles$E['vitro-avatar']
+      });
+    }
+    return prop;
+  };
   return React__default.createElement(LookupPicker, Object.assign({}, props, {
     htmlValueTemplate: Avatar,
-    getHtmlValueTemplateProps: props.getHtmlValueTemplateProps
+    getHtmlValueTemplateProps: getHtmlValueTemplateProps
   }));
 };
 
-var styles$E = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
+var styles$F = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
 
 var Activity = function Activity(props) {
   return React__default.createElement("div", {
     className: 'vitro-activity'
   }, (props.filterDropdownList || props.title) && React__default.createElement("div", {
-    className: styles$E['vitro-title']
+    className: styles$F['vitro-title']
   }, props.filterDropdownList && React__default.createElement(DropdownButton, {
     itemList: props.filterDropdownList,
-    className: styles$E['vitro-dropdown-button']
+    className: styles$F['vitro-dropdown-button']
   }), props.title && React__default.createElement("h3", null, props.title)), React__default.createElement("div", {
     className: 'vitro-content'
   }, props.children));
 };
 
-var styles$F = {"vitro-item":"_activity-item_vitro-item_3Tprske","vitro-active":"_activity-item_vitro-active_2kENgvf","vitro-title":"_activity-item_vitro-title__QItISm","vitro-due-date":"_activity-item_vitro-due-date_1mBIraY","vitro-content":"_activity-item_vitro-content_3Lt7XRy","vitro-message":"_activity-item_vitro-message_1ndqhgR","vitro-flex":"_activity-item_vitro-flex_37IxBWe","vitro-dropdown-button":"_activity-item_vitro-dropdown-button_1J50ja7","vitro-avatar":"_activity-item_vitro-avatar_218ZqAk"};
+var styles$G = {"vitro-item":"_activity-item_vitro-item_3Tprske","vitro-active":"_activity-item_vitro-active_2kENgvf","vitro-title":"_activity-item_vitro-title__QItISm","vitro-due-date":"_activity-item_vitro-due-date_1mBIraY","vitro-content":"_activity-item_vitro-content_3Lt7XRy","vitro-message":"_activity-item_vitro-message_1ndqhgR","vitro-flex":"_activity-item_vitro-flex_37IxBWe","vitro-dropdown-button":"_activity-item_vitro-dropdown-button_1J50ja7","vitro-avatar":"_activity-item_vitro-avatar_218ZqAk"};
 
 var ActivityItem = function ActivityItem(props) {
   return React__default.createElement("div", {
-    className: styles$F['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$F['vitro-active'] : CTRL.EMPTY)
+    className: styles$G['vitro-item'] + (props.isActive ? CTRL.SPACE + styles$G['vitro-active'] : CTRL.EMPTY)
   }, React__default.createElement("div", {
-    className: styles$F['vitro-flex']
+    className: styles$G['vitro-flex']
   }, React__default.createElement(Avatar, {
     userName: props.userName,
     image: props.userImageUrl,
-    className: styles$F['vitro-avatar'],
+    className: styles$G['vitro-avatar'],
     isBigSize: true
   }), React__default.createElement("div", {
-    className: styles$F['vitro-content']
+    className: styles$G['vitro-content']
   }, React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles$F['vitro-title']
+    className: styles$G['vitro-title']
   }, React__default.createElement("span", null, props.title || props.userName), props.isShowDetail && React__default.createElement("span", {
-    className: styles$F['vitro-due-date']
+    className: styles$G['vitro-due-date']
   }, props.date), props.isShowDetail && props.dropdownItemList && React__default.createElement(DropdownButton, {
     itemList: props.dropdownItemList,
     onToggle: props.onDropdownToggle,
-    className: styles$F['vitro-dropdown-button']
+    className: styles$G['vitro-dropdown-button']
   })), React__default.createElement("div", {
-    className: styles$F['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
+    className: styles$G['vitro-message'] + (props.variant ? CTRL.SPACE + props.variant : CTRL.EMPTY)
   }, React__default.createElement("p", {
     dangerouslySetInnerHTML: {
       __html: props.message
@@ -64096,20 +64107,20 @@ var ActivityItem = function ActivityItem(props) {
   }), props.children)))));
 };
 
-var styles$G = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
+var styles$H = {"vitro-activity-message":"_activity-message_vitro-activity-message_3GdyQuC","vitro-item":"_activity-message_vitro-item_3Q-7zX3","vitro-message":"_activity-message_vitro-message_25otUOy","vitro-field-name":"_activity-message_vitro-field-name_hdjdQbg","vitro-separator":"_activity-message_vitro-separator_vxgHLaH"};
 
 var ActivityMessage = function ActivityMessage(props) {
   return React__default.createElement("div", {
-    className: styles$G['vitro-activity-message']
+    className: styles$H['vitro-activity-message']
   }, props.changedValueList.map(function (item) {
     return React__default.createElement("div", {
-      className: styles$G['vitro-item']
+      className: styles$H['vitro-item']
     }, item.fieldName && React__default.createElement("span", {
-      className: styles$G['vitro-field-name']
+      className: styles$H['vitro-field-name']
     }, "" + item.fieldName + CTRL.COLON), item.oldValue && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", null, item.oldValue), React__default.createElement("span", {
-      className: styles$G['vitro-separator']
+      className: styles$H['vitro-separator']
     })), React__default.createElement("div", {
-      className: item.isMessage ? styles$G['vitro-message'] : CTRL.EMPTY
+      className: item.isMessage ? styles$H['vitro-message'] : CTRL.EMPTY
     }, item.newValue));
   }));
 };
@@ -64119,7 +64130,7 @@ var LOCALE$6;
   LOCALE["PLACEHOLDER"] = "app.common.messageInput.placeholder";
 })(LOCALE$6 || (LOCALE$6 = {}));
 
-var styles$H = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ"};
+var styles$I = {"vitro-message-input":"_message-input_vitro-message-input_3MkcjWD","vitro-control":"_message-input_vitro-control_1PUSjq9","vitro-message":"_message-input_vitro-message_2EJSy-9","vitro-placeholder":"_message-input_vitro-placeholder_1FBfIqN","vitro-button-add-file":"_message-input_vitro-button-add-file_1qdtHHq","vitro-button-send":"_message-input_vitro-button-send_1vktQrZ"};
 
 var NEW_LINE = '\n';
 var MessageInput = function MessageInput(props) {
@@ -64167,14 +64178,14 @@ var MessageInput = function MessageInput(props) {
     }
   };
   return React__default.createElement("div", {
-    className: styles$H['vitro-message-input'],
+    className: styles$I['vitro-message-input'],
     onDrop: props.onDrop
   }, React__default.createElement("div", {
-    className: styles$H['vitro-control']
+    className: styles$I['vitro-control']
   }, !props.isDisabled && React__default.createElement(ScrollBar, {
     isHideScrollX: true
   }, React__default.createElement("div", {
-    className: styles$H['vitro-message'],
+    className: styles$I['vitro-message'],
     ref: inputRef,
     onChange: onChange,
     onKeyDown: onKeyDown,
@@ -64182,17 +64193,17 @@ var MessageInput = function MessageInput(props) {
     onBlur: onBlur,
     contentEditable: true
   }, isShowPlaceholder && React__default.createElement("span", {
-    className: styles$H['vitro-placeholder']
+    className: styles$I['vitro-placeholder']
   }, props.placeholder || localeService.create(LOCALE$6.PLACEHOLDER)))), props.children, props.onAddFile && React__default.createElement("button", {
     onClick: props.onAddFile,
-    className: styles$H['vitro-button-add-file']
+    className: styles$I['vitro-button-add-file']
   })), React__default.createElement("button", {
     onClick: onEnter,
-    className: styles$H['vitro-button-send']
+    className: styles$I['vitro-button-send']
   }));
 };
 
-var styles$I = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultIcon-wrapper":"_image-picker_vitro-image-picker-defaultIcon-wrapper_1XLKgLW","vitro-image-picker-icon":"_image-picker_vitro-image-picker-icon_1q7KZiW","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-icon-default":"_image-picker_vitro-icon-default_2Hdhta2","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL"};
+var styles$J = {"vitro-image-picker-root":"_image-picker_vitro-image-picker-root_AqOYRhP","vitro-image-picker-dropdown-wrapper":"_image-picker_vitro-image-picker-dropdown-wrapper_8Tr_BBS","vitro-image-picker-defaultIcon-wrapper":"_image-picker_vitro-image-picker-defaultIcon-wrapper_1XLKgLW","vitro-image-picker-icon":"_image-picker_vitro-image-picker-icon_1q7KZiW","vitro-image-picker-input":"_image-picker_vitro-image-picker-input_12jFFNU","vitro-icon-default":"_image-picker_vitro-icon-default_2Hdhta2","vitro-image-picker-label-wrapper":"_image-picker_vitro-image-picker-label-wrapper_WRLzUYM","vitro-image-picker-wrapper":"_image-picker_vitro-image-picker-wrapper_dlZyYFL"};
 
 var ACTION$1;
 (function (ACTION) {
@@ -64237,30 +64248,30 @@ var ImagePicker = function ImagePicker(props) {
     return (_props$itemList = props.itemList) !== null && _props$itemList !== void 0 && _props$itemList.length ? result.concat(props.itemList) : result;
   }, [props.itemList, props.defaultUrl]);
   return React__default.createElement("div", {
-    className: styles$I['vitro-image-picker-wrapper']
+    className: styles$J['vitro-image-picker-wrapper']
   }, React__default.createElement("div", {
-    className: styles$I['vitro-image-picker-label-wrapper']
+    className: styles$J['vitro-image-picker-label-wrapper']
   }, props.label ? props.label : ''), React__default.createElement("div", {
-    className: props.classNameRoot ? props.classNameRoot : styles$I['vitro-image-picker-root']
+    className: props.classNameRoot ? props.classNameRoot : styles$J['vitro-image-picker-root']
   }, React__default.createElement(DropdownButton, {
     itemList: defaultItemList,
-    className: styles$I['vitro-image-picker-dropdown-wrapper']
+    className: styles$J['vitro-image-picker-dropdown-wrapper']
   }), React__default.createElement("input", {
     type: 'file',
-    className: styles$I['vitro-image-picker-input'],
+    className: styles$J['vitro-image-picker-input'],
     ref: props.inputFileRef,
     accept: "image/*"
   }), props.defaultUrl ? React__default.createElement(Icon, {
     defaultUrl: props.defaultUrl,
-    className: props.classNameIcon ? props.classNameIcon : styles$I['vitro-image-picker-icon']
+    className: props.classNameIcon ? props.classNameIcon : styles$J['vitro-image-picker-icon']
   }) : React__default.createElement("div", {
-    className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$I['vitro-image-picker-defaultIcon-wrapper']
+    className: props.classNameDefaultIcon ? props.classNameDefaultIcon : styles$J['vitro-image-picker-defaultIcon-wrapper']
   }, React__default.createElement("div", {
-    className: styles$I['vitro-icon-default']
+    className: styles$J['vitro-icon-default']
   }))));
 };
 
-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 styles$K = {"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]),
@@ -64302,15 +64313,15 @@ var ConditionSelect = function ConditionSelect(props) {
   };
   return React__default.createElement(React__default.Fragment, null, condition && React__default.createElement("div", {
     ref: selectRef,
-    className: styles$J['vitro-condition-select']
+    className: styles$K['vitro-condition-select']
   }, React__default.createElement("div", {
     onClick: toggleSelect
   }, condition.imageUrl ? React__default.createElement(Icon, {
     defaultUrl: condition.imageUrl,
-    className: styles$J['vitro-icon']
+    className: styles$K['vitro-icon']
   }) : condition.text)), showSelectList && React__default.createElement("ul", {
     ref: listRef,
-    className: styles$J['vitro-condition-list'],
+    className: styles$K['vitro-condition-list'],
     onBlur: onBlur
   }, props.itemList.map(function (item) {
     return React__default.createElement("li", {
@@ -64319,7 +64330,7 @@ var ConditionSelect = function ConditionSelect(props) {
       }
     }, item.imageUrl && React__default.createElement(Icon, {
       defaultUrl: item.imageUrl,
-      className: styles$J['vitro-icon']
+      className: styles$K['vitro-icon']
     }), item.text);
   })));
 };
@@ -64378,13 +64389,13 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   var onFocus = function onFocus(e) {
-    setState(styles$J['vitro-focus']);
+    setState(styles$K['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);
+    setState(props.content.props.errorMessage ? styles$K['vitro-error'] : CTRL.EMPTY);
     if (props.content.props.onBlur) {
       props.content.props.onBlur(e);
     }
@@ -64399,15 +64410,15 @@ var Criterion = function Criterion(props) {
     onChange(value);
   };
   return React__default.createElement("div", {
-    className: styles$J['vitro-criterion-container']
+    className: styles$K['vitro-criterion-container']
   }, React__default.createElement("div", {
-    className: styles$J['vitro-operator-select-container']
+    className: styles$K['vitro-operator-select-container']
   }, props.isShowOperatorSelect && React__default.createElement("div", {
     ref: selectRef,
-    className: styles$J['vitro-operator-select'],
+    className: styles$K['vitro-operator-select'],
     onClick: toggleOperatorSelect
   }, React__default.createElement("div", null, operator.text), showOperatorSelectList && React__default.createElement("ul", {
-    className: styles$J['vitro-operator-list']
+    className: styles$K['vitro-operator-list']
   }, props.operatorList.map(function (item) {
     return React__default.createElement("li", {
       onClick: function onClick() {
@@ -64415,16 +64426,16 @@ var Criterion = function Criterion(props) {
       }
     }, item.text);
   })))), React__default.createElement("div", {
-    className: styles$J['vitro-control'] + CTRL.SPACE + state
+    className: styles$K['vitro-control'] + CTRL.SPACE + state
   }, React__default.createElement("div", {
     ref: labelRef,
-    className: styles$J['vitro-label']
+    className: styles$K['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'],
+    className: styles$K['vitro-control'],
     onBlur: onBlur,
     onFocus: onFocus,
     onChange: onControlChange,
@@ -64436,7 +64447,7 @@ var Criterion = function Criterion(props) {
     onClick: function onClick() {
       return props.onDelete(props.content.props.id);
     },
-    className: styles$J['vitro-button-cancel']
+    className: styles$K['vitro-button-cancel']
   }));
 };
 
@@ -64446,7 +64457,7 @@ var LOCALE$8;
   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 styles$L = {"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)),
@@ -64496,9 +64507,9 @@ var Input$1 = function Input(props) {
     }
   };
   var getClassName = function getClassName() {
-    var classList = [styles$K['vitro-control'], props.className || CTRL.EMPTY, state];
+    var classList = [styles$L['vitro-control'], props.className || CTRL.EMPTY, state];
     if (isActive) {
-      classList.push(styles$K['vitro-active']);
+      classList.push(styles$L['vitro-active']);
     }
     return classList.join(CTRL.SPACE);
   };
@@ -64517,9 +64528,9 @@ var Input$1 = function Input(props) {
   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']
+      className: styles$L['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']
+      className: styles$L['vitro-search-value']
     }, localeService.create(LOCALE$8.INPUT_MORE, {
       count: valueList.length - 1
     })) : null);
@@ -64527,14 +64538,14 @@ var Input$1 = function Input(props) {
   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']
+    className: styles$L['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']);
+      return setState(styles$L['vitro-focus']);
     },
     onBlur: function onBlur() {
       return setState(CTRL.EMPTY);
@@ -64542,10 +64553,10 @@ var Input$1 = function Input(props) {
     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)
+    className: styles$L['vitro-button-settings'] + (isToggled ? CTRL.SPACE + styles$L['vitro-active'] : CTRL.EMPTY)
   }), React__default.createElement("button", {
     onClick: onCancel,
-    className: styles$K['vitro-button-cancel']
+    className: styles$L['vitro-button-cancel']
   }))));
 };
 
@@ -64629,7 +64640,8 @@ var FieldIterator = function FieldIterator(props) {
       onChange: function onChange(value, name) {
         return onChangeControl(value, name);
       },
-      isRow: isControlRow(field.internalName)
+      isRow: isControlRow(field.internalName),
+      field: field
     };
     return control;
   };
@@ -64691,7 +64703,7 @@ var FieldIterator = function FieldIterator(props) {
   })));
 };
 
-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 styles$M = {"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),
@@ -64725,7 +64737,7 @@ var Filter = function Filter(props) {
     setComponentMap(map);
   };
   return React__default.createElement("div", {
-    className: styles$L['vitro-filter']
+    className: styles$M['vitro-filter']
   }, componentMap && React__default.createElement(FieldIterator, {
     fieldList: props.fieldList,
     componentMap: componentMap,
@@ -64734,7 +64746,7 @@ var Filter = function Filter(props) {
   }));
 };
 
-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 styles$N = {"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),
@@ -64786,16 +64798,16 @@ var CheckboxList = function CheckboxList(props) {
       onChange: function onChange(value, name) {
         return _onChange(value, item.id);
       },
-      className: styles$M['vitro-checkbox']
+      className: styles$N['vitro-checkbox']
     });
   };
   return React__default.createElement("div", {
-    className: styles$M['vitro-checkbox-list']
+    className: styles$N['vitro-checkbox-list']
   }, React__default.createElement(Input$1, {
     onCancel: onSearchCancel,
     onChange: onInputChange,
     onEnter: onInputChange,
-    className: styles$M['vitro-control']
+    className: styles$N['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) {
@@ -64946,7 +64958,7 @@ var Search = function Search(props) {
   };
   return React__default.createElement("div", {
     ref: searchRef,
-    className: styles$L['vitro-search']
+    className: styles$M['vitro-search']
   }, React__default.createElement(Input$1, {
     valueList: selectedSearchCriterionList,
     onSettingsClick: onSettingsClick,
@@ -64957,7 +64969,7 @@ var Search = function Search(props) {
     isSettingsActive: isShowDialog,
     isShowSettings: true
   }), isShowDialog && React__default.createElement("div", {
-    className: styles$L['vitro-settings-dialog']
+    className: styles$M['vitro-settings-dialog']
   }, React__default.createElement(Filter, {
     fieldList: filterFieldList,
     onChange: onFilterChange,
@@ -64966,24 +64978,24 @@ var Search = function Search(props) {
     operatorList: props.operatorList,
     conditionList: props.conditionList
   }), React__default.createElement("div", {
-    className: styles$L['vitro-add-field']
+    className: styles$M['vitro-add-field']
   }, React__default.createElement(Button$2, {
     text: props.labelAddField,
     onClick: onAddField,
-    className: styles$L['vitro-add-field-button']
+    className: styles$M['vitro-add-field-button']
   }), isShowAddFieldDialog && React__default.createElement("div", {
     ref: addFieldDialogRef,
-    className: styles$L['vitro-add-field-dialog']
+    className: styles$M['vitro-add-field-dialog']
   }, React__default.createElement(CheckboxList, {
     itemList: checkboxFieldList,
     onChange: onFieldListChange,
     isAllSelected: props.isAllFieldsVisible
   }))), React__default.createElement("div", {
-    className: styles$L['vitro-footer']
+    className: styles$M['vitro-footer']
   }, React__default.createElement(Button$2, {
     text: props.labelCancel,
     onClick: closeSettings,
-    className: styles$L['vitro-button-cancel']
+    className: styles$M['vitro-button-cancel']
   }), React__default.createElement(Button$2, {
     text: props.labelSearch,
     onClick: onSubmit