@vitrosoftware/common-ui-ts 1.1.256 → 1.1.257

package/css/std/controls/bim-viewer/bim-viewer-index.css

@@ -15434,7 +15434,7 @@ div:focus-visible {
 [class*="_criterion_vitro-operator-list-container"],
 [class*="_criterion_vitro-condition-list-container"],
 [class*="_lookup-picker-value-list"] {
-    z-index: 89000005 !important;
+    z-index: 99000011 !important;
 }
 
 .vitro-compare-mode .annotation-marker {

package/css/std/controls/bim-viewer/bim-viewer.css

@@ -1162,7 +1162,7 @@ div:focus-visible {
 [class*="_criterion_vitro-operator-list-container"],
 [class*="_criterion_vitro-condition-list-container"],
 [class*="_lookup-picker-value-list"] {
-    z-index: 89000005 !important;
+    z-index: 99000011 !important;
 }
 
 .vitro-compare-mode .annotation-marker {

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

@@ -88,7 +88,6 @@
 
 .vitro-calendar-container {
     width: 280px;
-    height: 326px;
     box-shadow: none !important;
     background-color: transparent;
     padding: 4px 0;
@@ -319,11 +318,7 @@
 }
 
 .vitro-calendar-container :global(.k-calendar-header) {
-    height: 40px;
-}
-
-.vitro-calendar-container :global(.k-datetime-footer) {
-    display: none;
+    padding: 14px 16px 0 16px;
 }
 
 .vitro-calendar-container :global(.k-datetime-wrap) {
@@ -506,4 +501,8 @@
     color: #222D44;
     font-size: 14px;
     line-height: 21px;
+}
+
+:global(.k-datetime-calendar-wrap.k-calendar-view) {
+    padding: 4px 12px 8px;
 }

package/css/std/controls/dxf-viewer/dxf-viewer-index.css

@@ -13901,6 +13901,10 @@ select {
     height: 100%;
 }
 
+.vitro-thumbnail-list-container {
+    max-height: calc(100% - 56px);
+}
+
 .vitro-thumbnail-list-title {
     padding: 16px 12px;
 }

package/css/std/controls/dxf-viewer/thumbnail-list.css

@@ -26,6 +26,10 @@
     height: 100%;
 }
 
+.vitro-thumbnail-list-container {
+    max-height: calc(100% - 56px);
+}
+
 .vitro-thumbnail-list-title {
     padding: 16px 12px;
 }

package/css/std/controls/table-view/table-view-custom-date-edit.css

@@ -19,6 +19,11 @@
 .table-view-custom-date-edit .k-calendar {
     border: none;
     color: #222D44 !important;
+    box-shadow: none;
+}
+
+.table-view-custom-date-edit .k-calendar-container {
+    padding: 0;
 }
 
 .table-view-custom-date-edit .k-link {
@@ -66,4 +71,8 @@
 
 .table-view-custom-date-edit .k-datetime-container > .k-datetime-wrap {
     box-shadow: none;
+}
+
+.k-datetime-container.vitro-left .k-datetime-footer .k-button {
+    display: none;
 }

package/dist/index.css

@@ -5013,7 +5013,6 @@ div._component-loader_vitro-component-loader_3J3a2or {
 
 ._date-picker_vitro-calendar-container_-q52RLa {
     width: 280px;
-    height: 326px;
     box-shadow: none !important;
     background-color: transparent;
     padding: 4px 0;
@@ -5244,11 +5243,7 @@ div._component-loader_vitro-component-loader_3J3a2or {
 }
 
 ._date-picker_vitro-calendar-container_-q52RLa .k-calendar-header {
-    height: 40px;
-}
-
-._date-picker_vitro-calendar-container_-q52RLa .k-datetime-footer {
-    display: none;
+    padding: 14px 16px 0 16px;
 }
 
 ._date-picker_vitro-calendar-container_-q52RLa .k-datetime-wrap {
@@ -5431,6 +5426,10 @@ div._component-loader_vitro-component-loader_3J3a2or {
     color: #222D44;
     font-size: 14px;
     line-height: 21px;
+}
+
+.k-datetime-calendar-wrap.k-calendar-view {
+    padding: 4px 12px 8px;
 }
 ._checkbox_vitro-control_DfB5DDM {
     width: 100%;

package/dist/index.js

@@ -481,6 +481,7 @@ var ATTRIBUTE = function ATTRIBUTE() {};
 ATTRIBUTE.STYLE = 'style';
 ATTRIBUTE.CLASS = 'class';
 ATTRIBUTE.DATA_VALUE = 'data-value';
+ATTRIBUTE.TITLE = 'title';
 
 var DISPLAY = function DISPLAY() {};
 DISPLAY.NONE = 'none';
@@ -65802,22 +65803,28 @@ var DatePicker = React.forwardRef(function (props, ref) {
   var isOpenedRef = React.useRef(false);
   var onChangeFuncRef = React.useRef(props.onChange);
   var onCloseFuncRef = React.useRef(props.onClose);
+  var onInitFuncRef = React.useRef(props.onInit);
   var initialValueRef = React.useRef(props.value);
-  var propsValueRef = React.useRef(props.value);
-  var componentName = props.isTimeSelectEnabled ? 'kendoDateTimePicker' : 'kendoDatePicker';
+  var isTimeSelectEnabledRef = React.useRef(props.isTimeSelectEnabled ? true : false);
+  var popupClassNameRef = React.useRef(CTRL.EMPTY);
+  var getComponentName = function getComponentName() {
+    return isTimeSelectEnabledRef.current ? 'kendoDateTimePicker' : 'kendoDatePicker';
+  };
+  var componentName = getComponentName();
   var setInitialValue = function setInitialValue() {
-    var _$$data, _$$data$dateView;
-    initialValueRef.current = props.isTimeSelectEnabled ? props.value || ((_$$data = $$6(inputRef.current).data(componentName)) === null || _$$data === void 0 ? void 0 : (_$$data$dateView = _$$data.dateView) === null || _$$data$dateView === void 0 ? void 0 : _$$data$dateView._current) : props.value;
+    initialValueRef.current = props.value;
   };
+  React.useEffect(function () {
+    isTimeSelectEnabledRef.current = props.isTimeSelectEnabled ? true : false;
+  }, [props.isTimeSelectEnabled]);
   React.useEffect(function () {
     if (inputRef.current) {
       init();
     }
   }, [inputRef]);
   React.useEffect(function () {
-    propsValueRef.current = props.value;
+    setInitialValue();
     if (ready) {
-      setInitialValue();
       if (props.value) {
         $$6(inputRef.current).data(componentName).value(new Date(props.value));
       } else {
@@ -65857,6 +65864,9 @@ var DatePicker = React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     onCloseFuncRef.current = props.onClose;
   }, [props.onClose]);
+  React.useEffect(function () {
+    onInitFuncRef.current = props.onInit;
+  }, [props.onInit]);
   React.useImperativeHandle(ref, function () {
     return _extends({}, pickerRef.current ? pickerRef.current : {}, {
       focus: function focus() {
@@ -65865,8 +65875,13 @@ var DatePicker = React.forwardRef(function (props, ref) {
         }
       },
       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();
+        if (isTimeSelectEnabledRef.current) {
+          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();
+        } else {
+          var _$$data$dateView;
+          (_$$data$dateView = $$6(inputRef.current).data(componentName).dateView) === null || _$$data$dateView === void 0 ? void 0 : _$$data$dateView.open();
+        }
         isOpenedRef.current = true;
       },
       setOnChange: function setOnChange(func) {
@@ -65874,23 +65889,84 @@ var DatePicker = React.forwardRef(function (props, ref) {
       },
       setOnClose: function setOnClose(func) {
         onCloseFuncRef.current = func;
+      },
+      setOnInit: function setOnInit(func) {
+        onInitFuncRef.current = func;
+      },
+      setIsTimeSelectEnabled: function setIsTimeSelectEnabled(val) {
+        isTimeSelectEnabledRef.current = val;
+        componentName = getComponentName();
+        _destroy();
+        init();
+      },
+      setPopupClassName: function setPopupClassName(className) {
+        popupClassNameRef.current = className;
+      },
+      getIsTimeSelectEnabled: function getIsTimeSelectEnabled() {
+        return isTimeSelectEnabledRef.current;
+      },
+      set: function set() {
+        if (isTimeSelectEnabledRef.current) {
+          var _$$data$popup, _$$data$popup$element, _$$data$popup$element2;
+          (_$$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$element2 = _$$data$popup$element.find('.k-action-buttons .k-time-accept')) === null || _$$data$popup$element2 === void 0 ? void 0 : _$$data$popup$element2.click();
+        } else {
+          var _$$data$dateView2;
+          (_$$data$dateView2 = $$6(inputRef.current).data(componentName).dateView) === null || _$$data$dateView2 === void 0 ? void 0 : _$$data$dateView2.close();
+        }
+      },
+      cancel: function cancel() {
+        if (isTimeSelectEnabledRef.current) {
+          var _$$data$popup2, _$$data$popup2$elemen, _$$data$popup2$elemen2;
+          (_$$data$popup2 = $$6(inputRef.current).data(componentName).popup) === null || _$$data$popup2 === void 0 ? void 0 : (_$$data$popup2$elemen = _$$data$popup2.element) === null || _$$data$popup2$elemen === void 0 ? void 0 : (_$$data$popup2$elemen2 = _$$data$popup2$elemen.find('.k-action-buttons .k-time-cancel')) === null || _$$data$popup2$elemen2 === void 0 ? void 0 : _$$data$popup2$elemen2.click();
+        } else {
+          var _$$data$dateView3;
+          (_$$data$dateView3 = $$6(inputRef.current).data(componentName).dateView) === null || _$$data$dateView3 === void 0 ? void 0 : _$$data$dateView3.close();
+        }
+      },
+      destroy: function destroy() {
+        _destroy();
       }
     });
   });
+  var initButtonTitle = function initButtonTitle() {
+    var _$$data$popup3;
+    var element = (_$$data$popup3 = $$6(inputRef.current).data(componentName).popup) === null || _$$data$popup3 === void 0 ? void 0 : _$$data$popup3.element;
+    if (element) {
+      var _element$find, _element$find2;
+      (_element$find = element.find('.k-action-buttons .k-time-accept')) === null || _element$find === void 0 ? void 0 : _element$find.removeAttr(ATTRIBUTE.TITLE);
+      (_element$find2 = element.find('.k-action-buttons .k-time-cancel')) === null || _element$find2 === void 0 ? void 0 : _element$find2.removeAttr(ATTRIBUTE.TITLE);
+    }
+  };
   var initPopupClassName = function initPopupClassName(picker) {
-    if (props.isTimeSelectEnabled) {
+    if (isTimeSelectEnabledRef.current) {
       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']);
+      if (props.popupClassName) {
+        var _picker$popup2, _picker$popup2$elemen;
+        (_picker$popup2 = picker.popup) === null || _picker$popup2 === void 0 ? void 0 : (_picker$popup2$elemen = _picker$popup2.element) === null || _picker$popup2$elemen === void 0 ? void 0 : _picker$popup2$elemen.addClass(props.popupClassName);
+      }
+      if (popupClassNameRef.current) {
+        var _picker$popup3, _picker$popup3$elemen;
+        (_picker$popup3 = picker.popup) === null || _picker$popup3 === void 0 ? void 0 : (_picker$popup3$elemen = _picker$popup3.element) === null || _picker$popup3$elemen === void 0 ? void 0 : _picker$popup3$elemen.addClass(popupClassNameRef.current);
+      }
     } 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']);
+      if (props.popupClassName) {
+        var _picker$dateView2, _picker$dateView2$pop, _picker$dateView2$pop2;
+        (_picker$dateView2 = picker.dateView) === null || _picker$dateView2 === void 0 ? void 0 : (_picker$dateView2$pop = _picker$dateView2.popup) === null || _picker$dateView2$pop === void 0 ? void 0 : (_picker$dateView2$pop2 = _picker$dateView2$pop.element) === null || _picker$dateView2$pop2 === void 0 ? void 0 : _picker$dateView2$pop2.addClass(props.popupClassName);
+      }
+      if (popupClassNameRef.current) {
+        var _picker$dateView3, _picker$dateView3$pop, _picker$dateView3$pop2;
+        (_picker$dateView3 = picker.dateView) === null || _picker$dateView3 === void 0 ? void 0 : (_picker$dateView3$pop = _picker$dateView3.popup) === null || _picker$dateView3$pop === void 0 ? void 0 : (_picker$dateView3$pop2 = _picker$dateView3$pop.element) === null || _picker$dateView3$pop2 === void 0 ? void 0 : _picker$dateView3$pop2.addClass(popupClassNameRef.current);
+      }
     }
   };
   var initDateViewClose = function initDateViewClose(picker) {
     var originalClose = picker.dateView.close;
     if (originalClose) {
-      picker.dateView.close = function () {
-        if (picker.dateView.popup) {
+      picker.dateView.close = function (e) {
+        if (picker.dateView.popup && props.isAutoClose !== false && !isTimeSelectEnabledRef.current) {
           originalClose.apply(picker.dateView, arguments);
         }
       };
@@ -65898,33 +65974,24 @@ var DatePicker = React.forwardRef(function (props, ref) {
   };
   var initOnClickDateView = function initOnClickDateView(picker) {
     if (picker.dateView.div) {
-      $$6(picker.dateView.div).on(exports.EVENT.CLICK, '.k-calendar td a', function (e) {
-        var _e$target, _e$target$parentEleme;
-        e.preventDefault();
-        if ((_e$target = e.target) !== null && _e$target !== void 0 && (_e$target$parentEleme = _e$target.parentElement) !== null && _e$target$parentEleme !== void 0 && _e$target$parentEleme.classList.contains('k-today') && !propsValueRef.current) {
-          initialValueRef.current = undefined;
-        }
+      $$6(picker.dateView.div).on(exports.EVENT.CLICK, '.k-calendar', function () {
+        switchToDateView();
       });
     }
   };
-  var init = function init() {
-    var config = getConfig();
-    if (props.minValue) {
-      config.min = props.minValue;
+  var _destroy = function _destroy() {
+    if ($$6(inputRef.current).data(componentName)) {
+      var _$$data$popup4, _$$data$popup4$elemen;
+      (_$$data$popup4 = $$6(inputRef.current).data(componentName).popup) === null || _$$data$popup4 === void 0 ? void 0 : (_$$data$popup4$elemen = _$$data$popup4.element) === null || _$$data$popup4$elemen === void 0 ? void 0 : _$$data$popup4$elemen.remove();
+      $$6(inputRef.current).data(componentName).destroy();
     }
-    if (props.maxValue) {
-      config.max = props.maxValue;
-    }
-    if (config.value) {
-      config.value = new Date(config.value);
-    }
-    $$6(inputRef.current)[componentName](config);
-    var picker = $$6(inputRef.current).data(componentName);
+  };
+  var initPicker = function initPicker(picker) {
     initPopupClassName(picker);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
     pickerRef.current = picker;
-    if (picker.popup && picker.popup.bind && props.isTimeSelectEnabled) {
+    if (picker.popup && picker.popup.bind && isTimeSelectEnabledRef.current) {
       var timePickerService = new TimePickerServiceImpl();
       picker.popup.bind(EVENT$5.ACTIVATE, function () {
         return timePickerService.initHours.bind(timePickerService)(picker);
@@ -65933,7 +66000,26 @@ var DatePicker = React.forwardRef(function (props, ref) {
     }
     initOnClickDateView(picker);
     initDateViewClose(picker);
+    initButtonTitle();
     setInitialValue();
+    if (onInitFuncRef.current) {
+      onInitFuncRef.current(picker);
+    }
+  };
+  var init = function init() {
+    var config = getConfig();
+    if (props.minValue) {
+      config.min = props.minValue;
+    }
+    if (props.maxValue) {
+      config.max = props.maxValue;
+    }
+    if (config.value) {
+      config.value = new Date(config.value);
+    }
+    $$6(inputRef.current)[componentName](config);
+    var picker = $$6(inputRef.current).data(componentName);
+    initPicker(picker);
     setReady(true);
   };
   var getConfig = function getConfig() {
@@ -65945,7 +66031,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
       depth: props.depth,
       format: props.format,
       animation: false,
-      componentType: props.isTimeSelectEnabled ? COMPONENT_TYPE$1.MODERN : undefined,
+      componentType: isTimeSelectEnabledRef.current ? COMPONENT_TYPE$1.MODERN : undefined,
       popup: {
         appendTo: props.popupContainerRef ? props.popupContainerRef.current : props.popupContainer,
         position: props.position || exports.PLACEMENT.TOP + CTRL.SPACE + exports.PLACEMENT.RIGHT,
@@ -65965,17 +66051,8 @@ var DatePicker = React.forwardRef(function (props, ref) {
       },
       close: function close(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);
-          } else {
-            onClose(e);
-          }
           isOpenedRef.current = false;
+          onClose(e);
         }
       }
     };
@@ -66007,6 +66084,9 @@ var DatePicker = React.forwardRef(function (props, ref) {
   };
   var onClose = function onClose(e) {
     onBlur(e);
+    if (isTimeSelectEnabledRef.current) {
+      switchToDateView();
+    }
     if (onCloseFuncRef.current) {
       var value = e.sender.value ? e.sender.value() : null;
       onCloseFuncRef.current(value, props.name);
@@ -66026,24 +66106,23 @@ var DatePicker = React.forwardRef(function (props, ref) {
   };
   var onChange = function onChange(e) {
     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 value = e.sender.value() && !isTimeSelectEnabledRef.current ? new Date(e.sender.value().setHours(0, 0, 0)) : e.sender.value();
+      if (isTimeSelectEnabledRef.current && value) {
         var selectedTime = e.sender.timeView._currentlySelected;
-        value.setHours(selectedTime.getHours(), selectedTime.getMinutes(), 0, 0);
-        e.sender.value(value);
+        if (selectedTime) {
+          value.setHours(selectedTime.getHours(), selectedTime.getMinutes(), 0, 0);
+          e.sender.value(value);
+        }
       }
       if (isChangedValue(initialValueRef.current, value)) {
         onChangeFuncRef.current(value, props.name);
-      } else if (!propsValueRef.current) {
+      } else if (!initialValueRef.current) {
         e.sender.value(null);
         setOptions({
           dateInput: true
         });
       }
     }
-    if (props.isTimeSelectEnabled) {
-      onClose(e);
-    }
   };
   var onPaste = function onPaste(e) {
     if (!props.isReadOnly && !props.isDisabled) {
@@ -66062,6 +66141,15 @@ var DatePicker = React.forwardRef(function (props, ref) {
       }
     }
   };
+  var switchToDateView = function switchToDateView() {
+    var picker = $$6(inputRef.current).data(componentName);
+    if (picker && picker._switchToDateView) {
+      var _picker$wrapper, _picker$wrapper2;
+      picker._switchToDateView();
+      (_picker$wrapper = picker.wrapper) === null || _picker$wrapper === void 0 ? void 0 : _picker$wrapper.find('.k-link-time').hide();
+      (_picker$wrapper2 = picker.wrapper) === null || _picker$wrapper2 === void 0 ? void 0 : _picker$wrapper2.find('.k-link-date').show();
+    }
+  };
   var getClassName = function getClassName() {
     var classList = [styles$U['vitro-control'], props.className];
     if (props.isDisabled || props.isReadOnly) {
@@ -66097,9 +66185,10 @@ var DatePicker = React.forwardRef(function (props, ref) {
 });
 
 var DatePicker$1 = function DatePicker$1(props) {
+  var _props$data;
   return React__default.createElement(DatePicker, Object.assign({}, props, {
     value: props.value ? props.value.valueList[0] : CTRL.EMPTY,
-    isTimeSelectEnabled: true
+    isTimeSelectEnabled: (_props$data = props.data) !== null && _props$data !== void 0 && _props$data.show_time ? true : false
   }));
 };
 
@@ -67610,7 +67699,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.256";
+var version$1 = "1.1.257";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";