@vitrosoftware/common-ui-ts 1.1.253 → 1.1.255

package/dist/index.js

@@ -480,6 +480,7 @@ var Item = function Item(props) {
 var ATTRIBUTE = function ATTRIBUTE() {};
 ATTRIBUTE.STYLE = 'style';
 ATTRIBUTE.CLASS = 'class';
+ATTRIBUTE.DATA_VALUE = 'data-value';
 
 var DISPLAY = function DISPLAY() {};
 DISPLAY.NONE = 'none';
@@ -21325,6 +21326,7 @@ var DEF_ROW;
 var DATE_FORMAT;
 (function (DATE_FORMAT) {
   DATE_FORMAT["DEFAULT"] = "dd.MM.yyyy";
+  DATE_FORMAT["HOURS_MINUTES"] = "HH:mm";
 })(DATE_FORMAT || (DATE_FORMAT = {}));
 var DEPENDENCY_TYPE;
 (function (DEPENDENCY_TYPE) {
@@ -62378,10 +62380,28 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
       props.onClick(isExpanded);
     }
   };
-  var className = [styles$B['vitro-expand-control-group'], props.className || CTRL.EMPTY, props.isExpandTop ? styles$B['vitro-top'] : CTRL.EMPTY, isExpanded ? 'vitro-expanded' : 'vitro-collapsed'].join(CTRL.SPACE);
+  var getClassName = function getClassName() {
+    var classList = [styles$B['vitro-expand-control-group']];
+    if (props.className) {
+      classList.push(props.className);
+    }
+    if (props.isExpandTop) {
+      classList.push(styles$B['vitro-top']);
+    }
+    if (isExpanded) {
+      classList.push('vitro-expanded');
+    } else {
+      if (props.isButtonVisible === false) {
+        classList.push(styles$B['vitro-display-none']);
+      } else {
+        classList.push('vitro-collapsed');
+      }
+    }
+    return classList.join(CTRL.SPACE);
+  };
   return React__default.createElement("div", {
-    className: className
-  }, React__default.createElement(ExpandCollapseButton, {
+    className: getClassName()
+  }, props.isButtonVisible !== false ? props.button ? props.button : React__default.createElement(ExpandCollapseButton, {
     expandImage: props.expandImage,
     collapseImage: props.collapseImage,
     expandText: props.expandText !== undefined ? props.expandText : localeService.create(LOCALE$3.EXPAND_TEXT),
@@ -62389,18 +62409,80 @@ var ExpandControlGroup = function ExpandControlGroup(props) {
     onClick: onClick,
     isExpanded: isExpanded,
     className: props.buttonClassName
-  }, props.buttonContent), React__default.createElement("div", {
+  }, props.buttonContent) : null, React__default.createElement("div", {
     ref: contentRef,
     className: 'vitro-content' + (isExpanded ? CTRL.EMPTY : CTRL.SPACE + styles$B['vitro-display-none'])
   }, props.children));
 };
 
-var styles$C = {"vitro-field-iterator":"_field-iterator_vitro-field-iterator_2zUPyUF","vitro-expand-control-group":"_field-iterator_vitro-expand-control-group_3R-v8Nb","vitro-expand-collapse-button":"_field-iterator_vitro-expand-collapse-button_myRTctg","vitro-collapse":"_field-iterator_vitro-collapse_SZoovCi","vitro-expand":"_field-iterator_vitro-expand_ToLTBVI"};
+var styles$C = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-inline-label":"_label_vitro-inline-label_1TMnPWg","vitro-required":"_label_vitro-required_2-bSGif"};
+
+var Label = React.forwardRef(function (props, ref) {
+  var content = React__default.createElement(React__default.Fragment, null, props.text, props.isRequired && React__default.createElement("span", {
+    className: styles$C['vitro-required']
+  }, CTRL.ASTERISK));
+  return props.isInline === false ? React__default.createElement(FlexBox, {
+    ref: ref,
+    className: styles$C['vitro-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+  }, content) : React__default.createElement("div", {
+    ref: ref,
+    className: styles$C['vitro-inline-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    style: props.width ? {
+      width: props.width + UNIT.PX
+    } : undefined
+  }, content);
+});
+
+var styles$D = {"vitro-field-iterator":"_field-iterator_vitro-field-iterator_2zUPyUF","vitro-expand-control-group":"_field-iterator_vitro-expand-control-group_3R-v8Nb","vitro-expand-collapse-button":"_field-iterator_vitro-expand-collapse-button_myRTctg","vitro-collapse":"_field-iterator_vitro-collapse_SZoovCi","vitro-expand":"_field-iterator_vitro-expand_ToLTBVI","vitro-field-iterator-group":"_field-iterator_vitro-field-iterator-group_3J2NfZZ","vitro-label":"_field-iterator_vitro-label_390kxdf"};
+
+var FieldIteratorGroup = function FieldIteratorGroup(props) {
+  var _useState = React.useState(false),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  React.useEffect(function () {
+    if (props.getIsVisible) {
+      props.getIsVisible(props.isVisible).then(function (result) {
+        return setIsExpanded(result);
+      });
+    } else {
+      setIsExpanded(props.isVisible ? true : false);
+    }
+  }, [props.isVisible, props.controlList]);
+  return React__default.createElement(ExpandControlGroup, {
+    className: styles$D['vitro-field-iterator-group'],
+    isExpanded: isExpanded,
+    isButtonVisible: false
+  }, props.label && React__default.createElement(Label, {
+    text: props.label,
+    isInline: false,
+    className: styles$D['vitro-label']
+  }), props.fieldList.map(function (internalName, index) {
+    var control = props.controlList.find(function (c) {
+      return c.name === internalName;
+    });
+    if (control) {
+      var component = props.componentMap.find(function (x) {
+        return x.name === control.code;
+      });
+      if (component) {
+        return props.getComponent(component, control, index);
+      }
+    }
+    return null;
+  }));
+};
 
 var FieldIterator = React.forwardRef(function (props, ref) {
+  var _props$groupList;
   var _useState = React.useState([]),
     controlList = _useState[0],
     setControlList = _useState[1];
+  var _useState2 = React.useState([]),
+    groupList = _useState2[0],
+    setGroupList = _useState2[1];
+  var _useState3 = React.useState([]),
+    fieldGroupList = _useState3[0],
+    setFieldGroupList = _useState3[1];
   var changedFieldValueMap = React.useMemo(function () {
     return new Map();
   }, []);
@@ -62414,17 +62496,56 @@ var FieldIterator = React.forwardRef(function (props, ref) {
       isSaving: false
     };
   }, []);
+  var getGroup = function getGroup(group, groupFieldList) {
+    var newFieldList = group.fieldList.filter(function (f) {
+      return !groupFieldList.includes(f);
+    });
+    if (newFieldList.length === group.fieldList.length) {
+      return group;
+    }
+    return _extends({}, group, {
+      fieldList: newFieldList
+    });
+  };
+  var initGroupList = function initGroupList(fieldList, groupList) {
+    if (groupList && groupList.length) {
+      var distinctGroupFieldList = [];
+      var initialGroupList = [];
+      var initialFieldGroupList = [];
+      var _loop = function _loop() {
+        var g = _step.value;
+        var group = getGroup(g, distinctGroupFieldList);
+        distinctGroupFieldList = distinctGroupFieldList.concat(group.fieldList);
+        if (group.field && fieldList.find(function (f) {
+          return f.internalName === group.field;
+        }) && !group.fieldList.includes(group.field)) {
+          initialFieldGroupList.push(group);
+        } else {
+          initialGroupList.push(group);
+        }
+      };
+      for (var _iterator = _createForOfIteratorHelperLoose(groupList), _step; !(_step = _iterator()).done;) {
+        _loop();
+      }
+      setGroupList(initialGroupList);
+      setFieldGroupList(initialFieldGroupList);
+    } else {
+      setGroupList([]);
+      setFieldGroupList([]);
+    }
+  };
   React.useEffect(function () {
     saveStatus.isSaving = false;
     if (props.fieldList && props.fieldList.length) {
+      initGroupList(props.fieldList, props.groupList);
       if (props.isClearChangedFieldValueMap) {
         changedFieldValueMap.clear();
       }
       if (props.changedFieldValueMap) {
-        for (var _iterator = _createForOfIteratorHelperLoose(props.changedFieldValueMap), _step; !(_step = _iterator()).done;) {
-          var _step$value = _step.value,
-            key = _step$value[0],
-            value = _step$value[1];
+        for (var _iterator2 = _createForOfIteratorHelperLoose(props.changedFieldValueMap), _step2; !(_step2 = _iterator2()).done;) {
+          var _step2$value = _step2.value,
+            key = _step2$value[0],
+            value = _step2$value[1];
           changedFieldValueMap.set(key, value);
         }
       }
@@ -62432,13 +62553,13 @@ var FieldIterator = React.forwardRef(function (props, ref) {
     } else {
       setControlList([]);
     }
-  }, [props.fieldList]);
+  }, [props.fieldList, props.groupList]);
   React.useEffect(function () {
     if (props.changedFieldValueMap) {
-      for (var _iterator2 = _createForOfIteratorHelperLoose(props.changedFieldValueMap), _step2; !(_step2 = _iterator2()).done;) {
-        var _step2$value = _step2.value,
-          key = _step2$value[0],
-          value = _step2$value[1];
+      for (var _iterator3 = _createForOfIteratorHelperLoose(props.changedFieldValueMap), _step3; !(_step3 = _iterator3()).done;) {
+        var _step3$value = _step3.value,
+          key = _step3$value[0],
+          value = _step3$value[1];
         changedFieldValueMap.set(key, value);
       }
     }
@@ -62479,7 +62600,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
   });
   var updateControlList = function updateControlList() {
     if (props.fieldValueMap) {
-      var _loop = function _loop() {
+      var _loop2 = function _loop2() {
         var _Object$entries$_i = _Object$entries[_i],
           key = _Object$entries$_i[0],
           value = _Object$entries$_i[1];
@@ -62492,7 +62613,7 @@ var FieldIterator = React.forwardRef(function (props, ref) {
         });
       };
       for (var _i = 0, _Object$entries = Object.entries(props.fieldValueMap); _i < _Object$entries.length; _i++) {
-        _loop();
+        _loop2();
       }
     }
   };
@@ -62581,50 +62702,82 @@ var FieldIterator = React.forwardRef(function (props, ref) {
       });
     });
   };
-  var getComponent = function getComponent(component, control, index) {
+  var _getComponent = function getComponent(component, control, index) {
     control.index = index;
-    return React__default.createElement("div", {
+    var groupList = fieldGroupList.filter(function (g) {
+      return g.field === control.name;
+    });
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
       className: control.isRow ? 'vitro-inline' : 'vitro-block'
-    }, React__default.createElement("div", null, React__default.createElement(component.value, control)));
+    }, React__default.createElement("div", null, React__default.createElement(component.value, control))), groupList.length ? groupList.map(function (group, index) {
+      var _group$fieldList;
+      if ((_group$fieldList = group.fieldList) !== null && _group$fieldList !== void 0 && _group$fieldList.length) {
+        return React__default.createElement(FieldIteratorGroup, Object.assign({}, group, {
+          getIsVisible: props.getIsVisibleGroup,
+          controlList: controlList,
+          componentMap: props.componentMap,
+          getComponent: _getComponent,
+          key: index
+        }));
+      }
+      return null;
+    }) : null);
   };
+  var groupFieldList = ((_props$groupList = props.groupList) === null || _props$groupList === void 0 ? void 0 : _props$groupList.map(function (group) {
+    return group.fieldList;
+  }).flat()) || [];
   return React__default.createElement("div", {
-    className: styles$C['vitro-field-iterator'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
+    className: styles$D['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;
-    });
-    if (component) {
-      if (props.maxVisibleCount) {
-        if (index < props.maxVisibleCount) {
-          return getComponent(component, control, index);
+    if (!groupFieldList.includes(control.name)) {
+      var component = props.componentMap.find(function (x) {
+        return x.name === control.code;
+      });
+      if (component) {
+        if (props.maxVisibleCount) {
+          if (index < props.maxVisibleCount) {
+            return _getComponent(component, control, index);
+          }
+        } else {
+          return _getComponent(component, control, index);
         }
-      } else {
-        return getComponent(component, control, index);
       }
     }
     return null;
-  }), props.maxVisibleCount && controlList.length > props.maxVisibleCount ? React__default.createElement(ExpandControlGroup, {
+  }), groupList.length ? groupList.map(function (group, index) {
+    var _group$fieldList2;
+    if ((_group$fieldList2 = group.fieldList) !== null && _group$fieldList2 !== void 0 && _group$fieldList2.length) {
+      return React__default.createElement(FieldIteratorGroup, Object.assign({}, group, {
+        getIsVisible: props.getIsVisibleGroup,
+        controlList: controlList,
+        componentMap: props.componentMap,
+        getComponent: _getComponent,
+        key: index
+      }));
+    }
+    return null;
+  }) : null, props.maxVisibleCount && controlList.length > props.maxVisibleCount ? React__default.createElement(ExpandControlGroup, {
     expandImage: React__default.createElement("span", {
-      className: styles$C['vitro-expand']
+      className: styles$D['vitro-expand']
     }),
     collapseImage: React__default.createElement("span", {
-      className: styles$C['vitro-collapse']
+      className: styles$D['vitro-collapse']
     }),
-    className: styles$C['vitro-expand-control-group'],
-    buttonClassName: styles$C['vitro-expand-collapse-button'],
+    className: styles$D['vitro-expand-control-group'],
+    buttonClassName: styles$D['vitro-expand-collapse-button'],
     isExpandTop: true
   }, controlList.map(function (control, index) {
     var component = props.componentMap.find(function (x) {
       return x.name === control.code;
     });
     if (component && props.maxVisibleCount && index >= props.maxVisibleCount) {
-      return getComponent(component, control, index);
+      return _getComponent(component, control, index);
     }
     return null;
   })) : null);
 });
 
-var styles$D = {"vitro-issue-tile":"_issue-tile_vitro-issue-tile_2D7E9Y-","vitro-control":"_issue-tile_vitro-control_3V6_Ze7"};
+var styles$E = {"vitro-issue-tile":"_issue-tile_vitro-issue-tile_2D7E9Y-","vitro-control":"_issue-tile_vitro-control_3V6_Ze7"};
 
 var IssueTile = function IssueTile(props) {
   var onChange = function onChange(changedFieldValueMap, saveStatus) {
@@ -62635,7 +62788,7 @@ var IssueTile = function IssueTile(props) {
   return React__default.createElement("div", {
     id: 'vitro-issue-tile-' + props.id,
     "data-type": 'app',
-    className: styles$D['vitro-issue-tile'] + (props.isActive ? CTRL.SPACE + 'vitro-active' : CTRL.EMPTY),
+    className: styles$E['vitro-issue-tile'] + (props.isActive ? CTRL.SPACE + 'vitro-active' : CTRL.EMPTY),
     onClick: props.onClick
   }, React__default.createElement(IssueTileHeader, {
     id: props.id,
@@ -62647,7 +62800,7 @@ var IssueTile = function IssueTile(props) {
     fileVersionUrl: props.fileVersionUrl,
     actionList: props.actionList
   }), props.content ? React__default.createElement(MicroFrontend, Object.assign({}, props.content, {
-    className: styles$D['vitro-micro-frontend']
+    className: styles$E['vitro-micro-frontend']
   })) : React__default.createElement(FieldIterator, {
     fieldList: props.fieldList || [],
     componentMap: props.componentMap || [],
@@ -62667,7 +62820,7 @@ var LOCALE$4;
   LOCALE["PLACEHOLDER"] = "app.common.searchInput.placeholder";
 })(LOCALE$4 || (LOCALE$4 = {}));
 
-var styles$E = {"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 styles$F = {"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 = React.forwardRef(function (props, ref) {
@@ -62767,7 +62920,7 @@ var SearchInput = React.forwardRef(function (props, ref) {
     return list.join(NEW_LINE);
   };
   var getClassName = function getClassName() {
-    var classList = [props.isMobileView ? styles$E['vitro-search-input-mobile'] : styles$E['vitro-search-input'], props.className || CTRL.EMPTY, state];
+    var classList = [props.isMobileView ? styles$F['vitro-search-input-mobile'] : styles$F['vitro-search-input'], props.className || CTRL.EMPTY, state];
     if (props.isActive) {
       classList.push('vitro-active');
     }
@@ -62777,24 +62930,24 @@ var SearchInput = React.forwardRef(function (props, ref) {
     var firstValue = valueList[0];
     var list = valueList.slice(1);
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
-      className: styles$E['vitro-search-value']
+      className: styles$F['vitro-search-value']
     }, React__default.createElement("span", null, getTextValue(firstValue)), React__default.createElement(ImageButton, {
       onClick: function onClick() {
         return onRemoveValue([firstValue]);
       },
-      className: styles$E['vitro-button-cancel']
+      className: styles$F['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$E['vitro-search-value']
+      className: styles$F['vitro-search-value']
     }, localeService.create(LOCALE$4.VALUE_COUNT, {
       count: list.length
     }), React__default.createElement(ImageButton, {
       onClick: function onClick() {
         return onRemoveValue(list);
       },
-      className: styles$E['vitro-button-cancel']
+      className: styles$F['vitro-button-cancel']
     })))) : null);
   };
   return React__default.createElement(FlexBox, {
@@ -62803,7 +62956,7 @@ var SearchInput = React.forwardRef(function (props, ref) {
     className: 'vitro-button-search',
     onClick: props.onSearchClick ? props.onSearchClick : onSubmit
   }), !props.isMobileView && React__default.createElement(React__default.Fragment, null, React__default.createElement(FlexBox, {
-    className: styles$E['vitro-search-value-list']
+    className: styles$F['vitro-search-value-list']
   }, props.searchCriterionList && props.searchCriterionList.length ? getSelectedValueList(props.searchCriterionList) : React__default.createElement("input", {
     type: 'text',
     ref: inputRef,
@@ -62814,7 +62967,7 @@ var SearchInput = React.forwardRef(function (props, ref) {
     placeholder: !props.isActive ? props.placeholder || localeService.create(LOCALE$4.PLACEHOLDER) : CTRL.EMPTY
   })), props.children, value || (_props$searchCriterio2 = props.searchCriterionList) !== null && _props$searchCriterio2 !== void 0 && _props$searchCriterio2.length || props.isActive ? React__default.createElement(ImageButton, {
     onClick: onCancel,
-    className: styles$E['vitro-button-cancel']
+    className: styles$F['vitro-button-cancel']
   }) : null));
 });
 
@@ -62823,7 +62976,7 @@ var MODIFIER;
   MODIFIER["FLIP"] = "flip";
 })(MODIFIER || (MODIFIER = {}));
 
-var styles$F = {"vitro-overlay":"_overlay_vitro-overlay_3SpYfCG","vitro-dropdown-arrow":"_overlay_vitro-dropdown-arrow_33kJJVJ","vitro-visibility-hidden":"_overlay_vitro-visibility-hidden_1zcpvxJ"};
+var styles$G = {"vitro-overlay":"_overlay_vitro-overlay_3SpYfCG","vitro-dropdown-arrow":"_overlay_vitro-dropdown-arrow_33kJJVJ","vitro-visibility-hidden":"_overlay_vitro-visibility-hidden_1zcpvxJ"};
 
 var Overlay$2 = React.forwardRef(function (props, ref) {
   var _useState = React.useState(null),
@@ -62917,13 +63070,13 @@ var Overlay$2 = React.forwardRef(function (props, ref) {
   var onEntered = function onEntered(element, isEntered) {
     if (element) {
       element.style.zIndex = zIndex.toString();
-      element.classList.remove(styles$F['vitro-visibility-hidden']);
+      element.classList.remove(styles$G['vitro-visibility-hidden']);
     }
     if (onEnteredFuncRef.current) {
       onEnteredFuncRef.current(element, isEntered);
     }
   };
-  var className = [styles$F['vitro-overlay'], styles$F['vitro-visibility-hidden'], props.className || CTRL.EMPTY, props.isShowArrow ? styles$F['vitro-dropdown-arrow'] : CTRL.EMPTY].join(CTRL.SPACE);
+  var className = [styles$G['vitro-overlay'], styles$G['vitro-visibility-hidden'], props.className || CTRL.EMPTY, props.isShowArrow ? styles$G['vitro-dropdown-arrow'] : CTRL.EMPTY].join(CTRL.SPACE);
   if (!container || !target) {
     return null;
   }
@@ -62947,7 +63100,7 @@ var LOCALE$5;
   LOCALE["EMPTY_PLACEHOLDER"] = "app.common.searchValueList.emptyPlaceholder";
 })(LOCALE$5 || (LOCALE$5 = {}));
 
-var styles$G = {"vitro-search-input-container":"_search-value-list_vitro-search-input-container_167CEqB","vitro-empty-placeholder":"_search-value-list_vitro-empty-placeholder_2f08lDK"};
+var styles$H = {"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),
@@ -62974,7 +63127,7 @@ var SearchValueList = function SearchValueList(props) {
   return React__default.createElement("div", {
     className: props.className || CTRL.EMPTY
   }, React__default.createElement("div", {
-    className: styles$G['vitro-search-input-container']
+    className: styles$H['vitro-search-input-container']
   }, React__default.createElement(SearchInput, {
     onCancel: onSearchCancel,
     onChange: onInputChange,
@@ -62986,11 +63139,11 @@ var SearchValueList = function SearchValueList(props) {
       return x.id === item.id;
     })) === null || _props$isItemOverflow2 === void 0 ? void 0 : _props$isItemOverflow2.isShow);
   }) : React__default.createElement("span", {
-    className: styles$G['vitro-empty-placeholder']
+    className: styles$H['vitro-empty-placeholder']
   }, props.emptyPlaceHolder || localeService.create(LOCALE$5.EMPTY_PLACEHOLDER))));
 };
 
-var styles$H = {"vitro-list":"_list_vitro-list_1I2JJ6w","vitro-item":"_list_vitro-item_2XsFSic"};
+var styles$I = {"vitro-list":"_list_vitro-list_1I2JJ6w","vitro-item":"_list_vitro-item_2XsFSic"};
 
 var CSS_CLASS_ITEM_TOOLTIP = 'vitro-list-item-tooltip';
 var CSS_CLASS_SEARCH_ITEM_TOOLTIP = 'vitro-search-list-item-tooltip';
@@ -63069,7 +63222,7 @@ var List = React.forwardRef(function (props, ref) {
       className: CSS_CLASS_ITEM_TOOLTIP + (props.isSearch ? CTRL.SPACE + CSS_CLASS_SEARCH_ITEM_TOOLTIP : CTRL.EMPTY),
       isShow: isShow ? undefined : false
     }, React__default.createElement("div", {
-      className: styles$H[CSS_CLASS_ITEM]
+      className: styles$I[CSS_CLASS_ITEM]
     }, React__default.createElement("a", {
       ref: function ref(element) {
         return itemRef.current[item.id] = element;
@@ -63084,7 +63237,7 @@ var List = React.forwardRef(function (props, ref) {
   };
   var getItemTemplateMobile = function getItemTemplateMobile(item) {
     return React__default.createElement("div", {
-      className: styles$H[CSS_CLASS_ITEM]
+      className: styles$I[CSS_CLASS_ITEM]
     }, React__default.createElement("a", {
       ref: function ref(element) {
         return itemRef.current[item.id] = element;
@@ -63098,18 +63251,18 @@ var List = React.forwardRef(function (props, ref) {
     return item.name;
   };
   return React__default.createElement("div", {
-    className: styles$H[CSS_CLASS_LIST],
+    className: styles$I[CSS_CLASS_LIST],
     ref: ref
   }, React__default.createElement(SearchValueList, {
     itemList: props.itemList,
     valueTemplate: props.isMobileView ? getItemTemplateMobile : getItemTemplate,
     filterValueTemplate: filterValueTemplate,
-    className: styles$H[CSS_CLASS_SEARCH_VALUE_LIST],
+    className: styles$I[CSS_CLASS_SEARCH_VALUE_LIST],
     isItemOverflowList: isItemOverflowList
   }));
 });
 
-var styles$I = {"vitro-settings-dialog":"_search-dialog_vitro-settings-dialog_33Qiusl","vitro-settings-dialog-mobile":"_search-dialog_vitro-settings-dialog-mobile_1vwSHz5","vitro-filter-container":"_search-dialog_vitro-filter-container_MNoN_7M","vitro-filter":"_search-dialog_vitro-filter_3K68vOp","vitro-field-iterator":"_search-dialog_vitro-field-iterator_3R98th9","vitro-add-field":"_search-dialog_vitro-add-field_2PfsCO8","vitro-add-field-button":"_search-dialog_vitro-add-field-button_22vr5DQ","vitro-add-field-dialog":"_search-dialog_vitro-add-field-dialog_2EdLwVO","vitro-button-group":"_search-dialog_vitro-button-group_3Uxi9An","vitro-settings-dialog-header":"_search-dialog_vitro-settings-dialog-header_2CYAOiA","vitro-settings-dialog-footer":"_search-dialog_vitro-settings-dialog-footer_2H_8ImR","vitro-scrollbar":"_search-dialog_vitro-scrollbar_241tkXw"};
+var styles$J = {"vitro-settings-dialog":"_search-dialog_vitro-settings-dialog_33Qiusl","vitro-settings-dialog-mobile":"_search-dialog_vitro-settings-dialog-mobile_1vwSHz5","vitro-filter-container":"_search-dialog_vitro-filter-container_MNoN_7M","vitro-filter":"_search-dialog_vitro-filter_3K68vOp","vitro-field-iterator":"_search-dialog_vitro-field-iterator_3R98th9","vitro-add-field":"_search-dialog_vitro-add-field_2PfsCO8","vitro-add-field-button":"_search-dialog_vitro-add-field-button_22vr5DQ","vitro-add-field-dialog":"_search-dialog_vitro-add-field-dialog_2EdLwVO","vitro-button-group":"_search-dialog_vitro-button-group_3Uxi9An","vitro-settings-dialog-header":"_search-dialog_vitro-settings-dialog-header_2CYAOiA","vitro-settings-dialog-footer":"_search-dialog_vitro-settings-dialog-footer_2H_8ImR","vitro-scrollbar":"_search-dialog_vitro-scrollbar_241tkXw"};
 
 var AddFieldButton = React.forwardRef(function (props, ref) {
   var _props$filterContaine;
@@ -63140,12 +63293,12 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
     props.onFieldListChange(id);
   };
   return React__default.createElement("div", {
-    className: styles$I['vitro-add-field']
+    className: styles$J['vitro-add-field']
   }, React__default.createElement(Button$1, {
     ref: addFieldButtonRef,
     text: props.labelAddField,
     onClick: props.onAddField,
-    className: styles$I['vitro-add-field-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    className: styles$J['vitro-add-field-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
     imageUrl: props.imageUrl,
     imageHoverUrl: props.imageHoverUrl,
     imageClassName: props.imageClassName
@@ -63155,7 +63308,7 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
     target: addFieldButtonRef.current,
     container: (_props$filterContaine = props.filterContainerRef) !== null && _props$filterContaine !== void 0 && _props$filterContaine.current ? props.filterContainerRef.current : undefined,
     placement: props.isMobileView ? undefined : exports.PLACEMENT.AUTO + CTRL.DASH + exports.PLACEMENT.START,
-    className: styles$I['vitro-add-field-dialog'],
+    className: styles$J['vitro-add-field-dialog'],
     allowedAutoPlacements: props.isMobileView ? undefined : [[exports.PLACEMENT.RIGHT, exports.PLACEMENT.START].join(CTRL.DASH), [exports.PLACEMENT.RIGHT, exports.PLACEMENT.END].join(CTRL.DASH)]
   }, React__default.createElement(List, {
     ref: addFieldListRef,
@@ -63166,24 +63319,6 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
   })));
 });
 
-var styles$J = {"vitro-label":"_label_vitro-label_it8WNUE","vitro-inline-label":"_label_vitro-inline-label_1TMnPWg","vitro-required":"_label_vitro-required_2-bSGif"};
-
-var Label = React.forwardRef(function (props, ref) {
-  var content = React__default.createElement(React__default.Fragment, null, props.text, props.isRequired && React__default.createElement("span", {
-    className: styles$J['vitro-required']
-  }, CTRL.ASTERISK));
-  return props.isInline === false ? React__default.createElement(FlexBox, {
-    ref: ref,
-    className: styles$J['vitro-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
-  }, content) : React__default.createElement("div", {
-    ref: ref,
-    className: styles$J['vitro-inline-label'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
-    style: props.width ? {
-      width: props.width + UNIT.PX
-    } : undefined
-  }, content);
-});
-
 var styles$K = {"vitro-list":"_list_vitro-list_2cs4WZE"};
 
 var List$1 = React.forwardRef(function (props, ref) {
@@ -64394,6 +64529,55 @@ var LookupPicker$1 = function LookupPicker(props) {
   return React__default.createElement(BaseLookupPicker, Object.assign({}, props));
 };
 
+var HTML_ELEMENT = function HTML_ELEMENT() {};
+HTML_ELEMENT.LI = 'li';
+HTML_ELEMENT.SPAN = 'span';
+
+var HOURS_00 = '00';
+var HOURS_01 = '01';
+var HOURS_24 = '24';
+var TimePickerServiceImpl = /*#__PURE__*/function () {
+  function TimePickerServiceImpl() {}
+  var _proto = TimePickerServiceImpl.prototype;
+  _proto.initHours = function initHours(picker) {
+    var listElement = this.getListElement(picker);
+    if (listElement) {
+      var first = listElement.querySelector(HTML_ELEMENT.LI);
+      if (first) {
+        var _first$textContent;
+        var txt = ((_first$textContent = first.textContent) === null || _first$textContent === void 0 ? void 0 : _first$textContent.trim()) || CTRL.EMPTY;
+        if (txt.startsWith(HOURS_01)) {
+          var newLi = document.createElement(HTML_ELEMENT.LI);
+          newLi.className = 'k-item';
+          newLi.setAttribute(ATTRIBUTE.DATA_VALUE, HOURS_00);
+          var span = document.createElement(HTML_ELEMENT.SPAN);
+          span.textContent = HOURS_00;
+          newLi.appendChild(span);
+          if (first.parentNode) {
+            first.parentNode.insertBefore(newLi, first);
+          }
+        }
+      }
+      listElement.querySelectorAll(HTML_ELEMENT.LI).forEach(function (li) {
+        var _li$textContent;
+        var txt = ((_li$textContent = li.textContent) === null || _li$textContent === void 0 ? void 0 : _li$textContent.trim()) || CTRL.EMPTY;
+        if (txt.startsWith(HOURS_24)) li.remove();
+      });
+    }
+  };
+  _proto.getListElement = function getListElement(picker) {
+    if (picker) {
+      var _picker$timeView;
+      var popup = picker.popup || ((_picker$timeView = picker.timeView) === null || _picker$timeView === void 0 ? void 0 : _picker$timeView.popup);
+      if (popup) {
+        var _popup$element$, _popup$element$2;
+        return ((_popup$element$ = popup.element[0]) === null || _popup$element$ === void 0 ? void 0 : _popup$element$.querySelector('.k-time-list')) || ((_popup$element$2 = popup.element[0]) === null || _popup$element$2 === void 0 ? void 0 : _popup$element$2.querySelector('.k-time-container .k-list'));
+      }
+    }
+  };
+  return TimePickerServiceImpl;
+}();
+
 var POSITION;
 (function (POSITION) {
   POSITION["LEFT"] = "left";
@@ -64415,6 +64599,10 @@ var COMPONENT_TYPE;
 (function (COMPONENT_TYPE) {
   COMPONENT_TYPE["MODERN"] = "modern";
 })(COMPONENT_TYPE || (COMPONENT_TYPE = {}));
+var EVENT$3;
+(function (EVENT) {
+  EVENT["ACTIVATE"] = "activate";
+})(EVENT$3 || (EVENT$3 = {}));
 
 var styles$R = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-copy-button":"_time-picker_vitro-copy-button_aJZAh9q","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-message":"_time-picker_vitro-error-message_1w7ey-y","vitro-timepicker-container":"_time-picker_vitro-timepicker-container_3AoRPvV"};
 
@@ -64450,13 +64638,20 @@ var TimePicker = React.forwardRef(function (props, ref) {
     };
   });
   var init = function init() {
-    var _picker$timeView, _picker$timeView$popu, _picker$timeView$popu2;
+    var _picker$timeView, _picker$timeView$popu, _picker$timeView$popu2, _picker$timeView2, _picker$timeView3;
     var config = getConfig();
     $$4(inputRef.current).kendoTimePicker(config);
     var picker = $$4(inputRef.current).data(componentName);
     (_picker$timeView = picker.timeView) === null || _picker$timeView === void 0 ? void 0 : (_picker$timeView$popu = _picker$timeView.popup) === null || _picker$timeView$popu === void 0 ? void 0 : (_picker$timeView$popu2 = _picker$timeView$popu.element) === null || _picker$timeView$popu2 === void 0 ? void 0 : _picker$timeView$popu2.addClass(styles$R['vitro-timepicker-container']);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
+    if ((_picker$timeView2 = picker.timeView) !== null && _picker$timeView2 !== void 0 && _picker$timeView2.popup && (_picker$timeView3 = picker.timeView) !== null && _picker$timeView3 !== void 0 && _picker$timeView3.popup.bind) {
+      var _picker$timeView4;
+      var timePickerService = new TimePickerServiceImpl();
+      (_picker$timeView4 = picker.timeView) === null || _picker$timeView4 === void 0 ? void 0 : _picker$timeView4.popup.bind(EVENT$3.ACTIVATE, function () {
+        return timePickerService.initHours.bind(timePickerService)(picker);
+      });
+    }
     setReady(true);
   };
   var getConfig = function getConfig() {
@@ -64468,7 +64663,7 @@ var TimePicker = React.forwardRef(function (props, ref) {
       animation: false,
       dateInput: true,
       popup: {
-        appendTo: props.popupConteiner,
+        appendTo: props.popupContainer,
         position: props.position || exports.PLACEMENT.TOP + CTRL.SPACE + exports.PLACEMENT.RIGHT,
         origin: props.origin || exports.PLACEMENT.BOTTOM + CTRL.SPACE + exports.PLACEMENT.RIGHT
       },
@@ -64487,13 +64682,13 @@ var TimePicker = React.forwardRef(function (props, ref) {
   var onOpen = function onOpen(e) {
     onFocus(e);
     if (props.onOpen) {
-      props.onOpen(e, props.popupConteiner);
+      props.onOpen(e, props.popupContainer);
     }
   };
   var onClose = function onClose(e) {
     onBlur(e);
     if (props.onClose) {
-      props.onClose(e, props.popupConteiner);
+      props.onClose(e, props.popupContainer);
     }
   };
   var onChange = function onChange(e) {
@@ -64624,10 +64819,10 @@ var THEME;
 (function (THEME) {
   THEME["SNOW"] = "snow";
 })(THEME || (THEME = {}));
-var EVENT$3;
+var EVENT$4;
 (function (EVENT) {
   EVENT["SELECTION_CHANGE"] = "selection-change";
-})(EVENT$3 || (EVENT$3 = {}));
+})(EVENT$4 || (EVENT$4 = {}));
 var ICONS;
 (function (ICONS) {
   ICONS["UNDO"] = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.49984 9.99996L4.1665 7.49996M4.1665 7.49996L7.49984 4.99996M4.1665 7.49996H13.3332C14.2172 7.49996 15.0651 7.85115 15.6902 8.47627C16.3153 9.10139 16.6665 9.94924 16.6665 10.8333C16.6665 11.7173 16.3153 12.5652 15.6902 13.1903C15.0651 13.8154 14.2172 14.1666 13.3332 14.1666H9.99984\" stroke=\"#4A556C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>";
@@ -64695,7 +64890,7 @@ var QuillRichEditorServiceImpl = /*#__PURE__*/function () {
     var editorConfig = this.getEditorConfig();
     this.setCustomIcons();
     this.editor = new Quill(settings.container, editorConfig);
-    this.editor.on(EVENT$3.SELECTION_CHANGE, function (range) {
+    this.editor.on(EVENT$4.SELECTION_CHANGE, function (range) {
       if (!range && _this2.isEditorBlur()) {
         if (!(_this2.settings.isReadOnly || _this2.settings.isDisabled) && !_this2.checkIsValuesEmpty() && _this2.getText() !== $$5(_this2.textarea).val()) {
           $$5(_this2.textarea).val(_this2.getText());
@@ -65573,6 +65768,15 @@ var LABEL_POSITION$1;
 (function (LABEL_POSITION) {
   LABEL_POSITION["LEFT"] = "left";
 })(LABEL_POSITION$1 || (LABEL_POSITION$1 = {}));
+var COMPONENT_TYPE$1;
+(function (COMPONENT_TYPE) {
+  COMPONENT_TYPE["MODERN"] = "modern";
+})(COMPONENT_TYPE$1 || (COMPONENT_TYPE$1 = {}));
+var EVENT$5;
+(function (EVENT) {
+  EVENT["ACTIVATE"] = "activate";
+  EVENT["OPEN"] = "open";
+})(EVENT$5 || (EVENT$5 = {}));
 
 var styles$U = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-copy-button":"_date-picker_vitro-copy-button_SvhKTCG","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-message":"_date-picker_vitro-error-message_3VKrJgj","vitro-calendar-container":"_date-picker_vitro-calendar-container_-q52RLa"};
 
@@ -65587,7 +65791,10 @@ var DatePicker = React.forwardRef(function (props, ref) {
     setState = _useState2[1];
   var controlRef = React.useRef(null);
   var inputRef = React.useRef(null);
-  var componentName = 'kendoDatePicker';
+  var pickerRef = React.useRef(null);
+  var isOpenedRef = React.useRef(false);
+  var onChangeFuncRef = React.useRef(props.onChange);
+  var componentName = props.isTimeSelectEnabled ? 'kendoDateTimePicker' : 'kendoDatePicker';
   React.useEffect(function () {
     if (inputRef.current) {
       init();
@@ -65629,23 +65836,35 @@ var DatePicker = React.forwardRef(function (props, ref) {
     props.errorMessage ? setState(styles$U['vitro-error']) : setState(CTRL.EMPTY);
   }, [props.errorMessage]);
   React.useEffect(function () {
-    $$6(inputRef.current).data(componentName).setOptions({
-      change: function change(e) {
-        onChange(e);
-      }
-    });
+    onChangeFuncRef.current = props.onChange;
   }, [props.onChange]);
   React.useImperativeHandle(ref, function () {
-    return {
+    return _extends({}, pickerRef.current ? pickerRef.current : {}, {
       focus: function focus() {
         if (inputRef.current) {
           inputRef.current.focus();
         }
+      },
+      open: function open() {
+        var _$$data$wrapper$find;
+        (_$$data$wrapper$find = $$6(inputRef.current).data(componentName).wrapper.find('.k-link-date')) === null || _$$data$wrapper$find === void 0 ? void 0 : _$$data$wrapper$find.click();
+        isOpenedRef.current = true;
+      },
+      setOnChange: function setOnChange(func) {
+        onChangeFuncRef.current = func;
       }
-    };
+    });
   });
+  var initPopupClassName = function initPopupClassName(picker) {
+    if (props.isTimeSelectEnabled) {
+      var _picker$popup, _picker$popup$element;
+      (_picker$popup = picker.popup) === null || _picker$popup === void 0 ? void 0 : (_picker$popup$element = _picker$popup.element) === null || _picker$popup$element === void 0 ? void 0 : _picker$popup$element.addClass(styles$U['vitro-calendar-container']);
+    } else {
+      var _picker$dateView, _picker$dateView$popu, _picker$dateView$popu2;
+      (_picker$dateView = picker.dateView) === null || _picker$dateView === void 0 ? void 0 : (_picker$dateView$popu = _picker$dateView.popup) === null || _picker$dateView$popu === void 0 ? void 0 : (_picker$dateView$popu2 = _picker$dateView$popu.element) === null || _picker$dateView$popu2 === void 0 ? void 0 : _picker$dateView$popu2.addClass(styles$U['vitro-calendar-container']);
+    }
+  };
   var init = function init() {
-    var _picker$dateView, _picker$dateView$popu, _picker$dateView$popu2;
     var config = getConfig();
     if (props.minValue) {
       config.min = props.minValue;
@@ -65656,11 +65875,19 @@ var DatePicker = React.forwardRef(function (props, ref) {
     if (config.value) {
       config.value = new Date(config.value);
     }
-    $$6(inputRef.current).kendoDatePicker(config);
+    $$6(inputRef.current)[componentName](config);
     var picker = $$6(inputRef.current).data(componentName);
-    (_picker$dateView = picker.dateView) === null || _picker$dateView === void 0 ? void 0 : (_picker$dateView$popu = _picker$dateView.popup) === null || _picker$dateView$popu === void 0 ? void 0 : (_picker$dateView$popu2 = _picker$dateView$popu.element) === null || _picker$dateView$popu2 === void 0 ? void 0 : _picker$dateView$popu2.addClass(styles$U['vitro-calendar-container']);
+    initPopupClassName(picker);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
+    pickerRef.current = picker;
+    if (picker.popup && picker.popup.bind) {
+      var timePickerService = new TimePickerServiceImpl();
+      picker.popup.bind(EVENT$5.ACTIVATE, function () {
+        return timePickerService.initHours.bind(timePickerService)(picker);
+      });
+      picker.popup.bind(EVENT$5.OPEN, onOpen);
+    }
     setReady(true);
   };
   var getConfig = function getConfig() {
@@ -65672,8 +65899,9 @@ var DatePicker = React.forwardRef(function (props, ref) {
       depth: props.depth,
       format: props.format,
       animation: false,
+      componentType: props.isTimeSelectEnabled ? COMPONENT_TYPE$1.MODERN : undefined,
       popup: {
-        appendTo: props.popupConteiner,
+        appendTo: props.popupContainerRef ? props.popupContainerRef.current : props.popupContainer,
         position: props.position || exports.PLACEMENT.TOP + CTRL.SPACE + exports.PLACEMENT.RIGHT,
         origin: props.origin || exports.PLACEMENT.BOTTOM + CTRL.SPACE + exports.PLACEMENT.RIGHT
       },
@@ -65690,7 +65918,18 @@ var DatePicker = React.forwardRef(function (props, ref) {
         onChange(e);
       },
       close: function close(e) {
-        onClose(e);
+        if (isOpenedRef.current) {
+          if (props.isTimeSelectEnabled) {
+            e.preventDefault();
+            setTimeout(function () {
+              var _$$data$popup, _$$data$popup$element;
+              var button = (_$$data$popup = $$6(inputRef.current).data(componentName).popup) === null || _$$data$popup === void 0 ? void 0 : (_$$data$popup$element = _$$data$popup.element) === null || _$$data$popup$element === void 0 ? void 0 : _$$data$popup$element.find(".k-action-buttons .k-time-accept.k-primary");
+              button === null || button === void 0 ? void 0 : button.click();
+            }, 0);
+          }
+          isOpenedRef.current = false;
+          onClose(e);
+        }
       }
     };
     return config;
@@ -65705,15 +65944,18 @@ var DatePicker = React.forwardRef(function (props, ref) {
     }
   };
   var onBlur = function onBlur(e) {
-    setState(props.errorMessage ? styles$U['vitro-error'] : styles$U[CTRL.EMPTY]);
-    if (props.onBlur) {
-      props.onBlur(e);
+    if (!isOpenedRef.current) {
+      setState(props.errorMessage ? styles$U['vitro-error'] : styles$U[CTRL.EMPTY]);
+      if (props.onBlur) {
+        props.onBlur(e);
+      }
     }
   };
   var onOpen = function onOpen(e) {
+    isOpenedRef.current = true;
     onFocus(e);
     if (props.onOpen) {
-      props.onOpen(e, props.popupConteiner);
+      props.onOpen(e, props.popupContainer);
     }
   };
   var onClose = function onClose(e) {
@@ -65722,10 +65964,29 @@ var DatePicker = React.forwardRef(function (props, ref) {
       props.onClose(e.sender.value(), props.name);
     }
   };
+  var isChangedValue = function isChangedValue(oldVal, newVal) {
+    if (oldVal) {
+      if (newVal) {
+        return new Date(oldVal).toISOString() !== newVal.toISOString();
+      } else {
+        return true;
+      }
+    } else if (newVal) {
+      return true;
+    }
+    return false;
+  };
   var onChange = function onChange(e) {
-    if (props.onChange) {
-      var value = e.sender.value() ? new Date(e.sender.value().setHours(0, 0, 0)) : e.sender.value();
-      props.onChange(value, props.name);
+    if (onChangeFuncRef.current) {
+      var value = e.sender.value() && !props.isTimeSelectEnabled ? new Date(e.sender.value().setHours(0, 0, 0)) : e.sender.value();
+      if (props.isTimeSelectEnabled && value) {
+        var selectedTime = e.sender.timeView._currentlySelected;
+        value.setHours(selectedTime.getHours(), selectedTime.getMinutes(), 0, 0);
+        e.sender.value(value);
+      }
+      if (isChangedValue(props.value, value)) {
+        onChangeFuncRef.current(value, props.name);
+      }
     }
   };
   var onPaste = function onPaste(e) {
@@ -65736,8 +65997,8 @@ var DatePicker = React.forwardRef(function (props, ref) {
         $$6(inputRef.current).data(componentName).value(text);
         var parsedValue = $$6(inputRef.current).data(componentName).value();
         if (parsedValue) {
-          if (props.onChange) {
-            props.onChange(parsedValue, props.name);
+          if (onChangeFuncRef.current) {
+            onChangeFuncRef.current(parsedValue, props.name);
           }
         } else {
           $$6(inputRef.current).data(componentName).value(prevValue);
@@ -65781,7 +66042,8 @@ var DatePicker = React.forwardRef(function (props, ref) {
 
 var DatePicker$1 = function DatePicker$1(props) {
   return React__default.createElement(DatePicker, Object.assign({}, props, {
-    value: props.value ? props.value.valueList[0] : CTRL.EMPTY
+    value: props.value ? props.value.valueList[0] : CTRL.EMPTY,
+    isTimeSelectEnabled: true
   }));
 };
 
@@ -66724,7 +66986,7 @@ var SearchDialog = function SearchDialog(props) {
     setFilterCriterionList(filter.criterionFilter);
   };
   var content = React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles$I[CSS_CLASS_FILTER_CONTAINER$1]
+    className: styles$J[CSS_CLASS_FILTER_CONTAINER$1]
   }, React__default.createElement(Filter, {
     id: props.id,
     listConfig: props.listConfig,
@@ -66738,7 +67000,7 @@ var SearchDialog = function SearchDialog(props) {
     isSearch: true,
     feature: props.feature
   }), !props.isMobileView && React__default.createElement(ButtonGroup, {
-    className: styles$I[CSS_CLASS_BUTTON_GROUP]
+    className: styles$J[CSS_CLASS_BUTTON_GROUP]
   }, React__default.createElement(ButtonCancel, {
     text: getSearchLabel(ACTION$2.CANCEL),
     onClick: props.onCancel
@@ -66754,14 +67016,14 @@ var SearchDialog = function SearchDialog(props) {
       text: getSearchLabel(ACTION$2.SEARCH),
       onClick: props.onSearch
     }],
-    className: styles$I[CSS_CLASS_SETTINGS_DIALOG_MOBILE],
-    headerClassName: styles$I[CSS_CLASS_SETTINGS_DIALOG_HEADER],
-    footerClassName: styles$I[CSS_CLASS_SETTINGS_DIALOG_FOOTER],
+    className: styles$J[CSS_CLASS_SETTINGS_DIALOG_MOBILE],
+    headerClassName: styles$J[CSS_CLASS_SETTINGS_DIALOG_HEADER],
+    footerClassName: styles$J[CSS_CLASS_SETTINGS_DIALOG_FOOTER],
     isDismissible: true
   }, content) : React__default.createElement(Overlay$2, {
     isShow: true,
     target: props.searchRef.current,
-    className: styles$I[CSS_CLASS_SETTINGS_DIALOG]
+    className: styles$J[CSS_CLASS_SETTINGS_DIALOG]
   }, content)));
 };
 
@@ -67292,7 +67554,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.253";
+var version$1 = "1.1.255";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";