labsense-ui-kit 1.4.43 → 1.4.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Date-Time/DatePicker.d.ts +2 -0
- package/dist/index.js +82 -69
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +82 -69
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -8712,7 +8712,7 @@ var timeStringToSeconds = function timeStringToSeconds(timeString) {
|
|
|
8712
8712
|
return hours * 3600 + minutes * 60 + seconds;
|
|
8713
8713
|
};
|
|
8714
8714
|
|
|
8715
|
-
var _templateObject$9, _templateObject2$6, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
8715
|
+
var _templateObject$9, _templateObject2$6, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
|
|
8716
8716
|
var DatePickerContainer = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
8717
8717
|
var CalendarContainer = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n overflow: auto;\n display: flex;\n flex-direction: row;\n background: ", ";\n position: absolute;\n border: ", ";\n height: auto;\n width: auto;\n border-radius: 10px;\n z-index: 10;\n padding: 10px;\n top: 0px;\n right: 0px;\n gap: 16px;\n transition: border 0.3s ease;\n"])), function (_ref) {
|
|
8718
8718
|
var theme = _ref.theme;
|
|
@@ -8742,103 +8742,113 @@ var Selectedtime = styled.div(_templateObject9 || (_templateObject9 = _taggedTem
|
|
|
8742
8742
|
return theme.vms.text.medium;
|
|
8743
8743
|
});
|
|
8744
8744
|
var Line$1 = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n width: 100%;\n padding-top: 10px;\n padding-bottom: 10px;\n"])));
|
|
8745
|
-
var Zones = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
|
|
8746
|
-
var
|
|
8747
|
-
var CalendarMonthYear = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n color: ", ";\n justify-content: center;\n align-items: center;\n"])), function (_ref7) {
|
|
8745
|
+
var Zones = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n & + & {\n margin-top: 8px;\n }\n"])));
|
|
8746
|
+
var ZoneLabel = styled.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n font-weight: 400;\n font-size: 12px;\n color: ", ";\n"])), function (_ref7) {
|
|
8748
8747
|
var theme = _ref7.theme;
|
|
8749
8748
|
return theme.vms.text.medium;
|
|
8750
8749
|
});
|
|
8751
|
-
var
|
|
8752
|
-
var Button = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n border: none;\n border-radius: 5px;\n padding: 5px 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n\n svg {\n cursor: pointer;\n }\n"])), function (_ref8) {
|
|
8750
|
+
var ZoneValue = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n font-weight: 600;\n font-size: 13px;\n color: ", ";\n"])), function (_ref8) {
|
|
8753
8751
|
var theme = _ref8.theme;
|
|
8754
|
-
return theme.vms
|
|
8755
|
-
}
|
|
8752
|
+
return theme.vms.text.dark;
|
|
8753
|
+
});
|
|
8754
|
+
var CalendarHeader = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n"])));
|
|
8755
|
+
var CalendarMonthYear = styled.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n color: ", ";\n justify-content: center;\n align-items: center;\n"])), function (_ref9) {
|
|
8756
8756
|
var theme = _ref9.theme;
|
|
8757
|
-
return theme.vms.text.
|
|
8758
|
-
}, function (_ref10) {
|
|
8759
|
-
var $size = _ref10.$size;
|
|
8760
|
-
return $size ? $size + "px" : '30px';
|
|
8761
|
-
}, function (_ref11) {
|
|
8762
|
-
var $size = _ref11.$size;
|
|
8763
|
-
return $size ? $size + "px" : '30px';
|
|
8757
|
+
return theme.vms.text.medium;
|
|
8764
8758
|
});
|
|
8765
|
-
var
|
|
8759
|
+
var CalendarContent = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 5px;\n padding: 10px;\n"])));
|
|
8760
|
+
var Button = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n background: ", ";\n color: ", ";\n border: none;\n border-radius: 5px;\n padding: 5px 10px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: ", ";\n height: ", ";\n\n svg {\n cursor: pointer;\n }\n"])), function (_ref10) {
|
|
8761
|
+
var theme = _ref10.theme;
|
|
8762
|
+
return theme.vms["default"].secondary;
|
|
8763
|
+
}, function (_ref11) {
|
|
8764
|
+
var theme = _ref11.theme;
|
|
8765
|
+
return theme.vms.text.white;
|
|
8766
|
+
}, function (_ref12) {
|
|
8766
8767
|
var $size = _ref12.$size;
|
|
8767
8768
|
return $size ? $size + "px" : '30px';
|
|
8768
8769
|
}, function (_ref13) {
|
|
8769
8770
|
var $size = _ref13.$size;
|
|
8771
|
+
return $size ? $size + "px" : '30px';
|
|
8772
|
+
});
|
|
8773
|
+
var CalendarDates = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n display: flex;\n align-items: center;\n justify-content: flex-start;\n flex-direction: column;\n position: relative;\n cursor: ", ";\n font-size: 12px;\n opacity: ", ";\n\n &::after {\n content: '';\n display: ", ";\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n transform: translateX(-50%);\n background: ", ";\n }\n"])), function (_ref14) {
|
|
8774
|
+
var $size = _ref14.$size;
|
|
8775
|
+
return $size ? $size + "px" : '30px';
|
|
8776
|
+
}, function (_ref15) {
|
|
8777
|
+
var $size = _ref15.$size;
|
|
8770
8778
|
return $size ? $size + 8 + "px" : '38px';
|
|
8771
|
-
}, function (
|
|
8772
|
-
var $isFuture =
|
|
8773
|
-
$futureDateTime =
|
|
8779
|
+
}, function (_ref16) {
|
|
8780
|
+
var $isFuture = _ref16.$isFuture,
|
|
8781
|
+
$futureDateTime = _ref16.$futureDateTime;
|
|
8774
8782
|
return !$futureDateTime && $isFuture ? 'default' : 'pointer';
|
|
8775
|
-
}, function (
|
|
8776
|
-
var $isFuture =
|
|
8777
|
-
$futureDateTime =
|
|
8783
|
+
}, function (_ref17) {
|
|
8784
|
+
var $isFuture = _ref17.$isFuture,
|
|
8785
|
+
$futureDateTime = _ref17.$futureDateTime;
|
|
8778
8786
|
return !$futureDateTime && $isFuture ? 0.5 : 1;
|
|
8779
|
-
}, function (
|
|
8780
|
-
var $showDot =
|
|
8787
|
+
}, function (_ref18) {
|
|
8788
|
+
var $showDot = _ref18.$showDot;
|
|
8781
8789
|
return $showDot ? 'block' : 'none';
|
|
8782
|
-
}, function (
|
|
8783
|
-
var $dotColor =
|
|
8784
|
-
theme =
|
|
8790
|
+
}, function (_ref19) {
|
|
8791
|
+
var $dotColor = _ref19.$dotColor,
|
|
8792
|
+
theme = _ref19.theme;
|
|
8785
8793
|
return $dotColor || theme.vms["default"].primary;
|
|
8786
8794
|
});
|
|
8787
|
-
var CalendarDateLabel = styled.div(
|
|
8788
|
-
var $size =
|
|
8789
|
-
return $size ? $size + "px" : '30px';
|
|
8790
|
-
}, function (_ref19) {
|
|
8791
|
-
var $size = _ref19.$size;
|
|
8795
|
+
var CalendarDateLabel = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n width: ", ";\n height: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background-color: ", ";\n color: ", ";\n border: ", ";\n\n ", ":hover & {\n background-color: ", ";\n }\n"])), function (_ref20) {
|
|
8796
|
+
var $size = _ref20.$size;
|
|
8792
8797
|
return $size ? $size + "px" : '30px';
|
|
8793
|
-
}, function (_ref20) {
|
|
8794
|
-
var $selected = _ref20.$selected,
|
|
8795
|
-
$inRange = _ref20.$inRange,
|
|
8796
|
-
$plain = _ref20.$plain,
|
|
8797
|
-
theme = _ref20.theme;
|
|
8798
|
-
return $plain ? 'transparent' : $selected ? theme.vms["default"].primary : $inRange ? theme.vms["default"].primary : theme.vms["default"].tertiary;
|
|
8799
8798
|
}, function (_ref21) {
|
|
8800
|
-
var $
|
|
8801
|
-
|
|
8802
|
-
$plain = _ref21.$plain,
|
|
8803
|
-
theme = _ref21.theme;
|
|
8804
|
-
return $plain ? theme.vms.text.medium : $selected ? theme.vms.text.white : $inRange ? theme.vms.text.white : theme.vms.text.medium;
|
|
8799
|
+
var $size = _ref21.$size;
|
|
8800
|
+
return $size ? $size + "px" : '30px';
|
|
8805
8801
|
}, function (_ref22) {
|
|
8806
|
-
var $
|
|
8807
|
-
|
|
8808
|
-
|
|
8802
|
+
var $selected = _ref22.$selected,
|
|
8803
|
+
$inRange = _ref22.$inRange,
|
|
8804
|
+
$plain = _ref22.$plain,
|
|
8805
|
+
theme = _ref22.theme;
|
|
8806
|
+
return $plain ? 'transparent' : $selected ? theme.vms["default"].primary : $inRange ? theme.vms["default"].primary : theme.vms["default"].tertiary;
|
|
8807
|
+
}, function (_ref23) {
|
|
8809
8808
|
var $selected = _ref23.$selected,
|
|
8810
8809
|
$inRange = _ref23.$inRange,
|
|
8811
8810
|
$plain = _ref23.$plain,
|
|
8812
|
-
$isFuture = _ref23.$isFuture,
|
|
8813
|
-
$futureDateTime = _ref23.$futureDateTime,
|
|
8814
8811
|
theme = _ref23.theme;
|
|
8812
|
+
return $plain ? theme.vms.text.medium : $selected ? theme.vms.text.white : $inRange ? theme.vms.text.white : theme.vms.text.medium;
|
|
8813
|
+
}, function (_ref24) {
|
|
8814
|
+
var $highlightBorder = _ref24.$highlightBorder;
|
|
8815
|
+
return $highlightBorder ? "2px solid " + $highlightBorder : '2px solid transparent';
|
|
8816
|
+
}, CalendarDates, function (_ref25) {
|
|
8817
|
+
var $selected = _ref25.$selected,
|
|
8818
|
+
$inRange = _ref25.$inRange,
|
|
8819
|
+
$plain = _ref25.$plain,
|
|
8820
|
+
$isFuture = _ref25.$isFuture,
|
|
8821
|
+
$futureDateTime = _ref25.$futureDateTime,
|
|
8822
|
+
theme = _ref25.theme;
|
|
8815
8823
|
return $plain ? 'transparent' : !$futureDateTime && $isFuture ? 'transparent' : $selected ? theme.vms.disabled.primary : $inRange ? theme.vms.disabled.primary : theme.vms.disabled.primary;
|
|
8816
8824
|
});
|
|
8817
|
-
var Year = styled.div(
|
|
8818
|
-
var Month = styled.div(
|
|
8819
|
-
var InputWrapper = styled.div(
|
|
8820
|
-
var TimeInputWrapper = styled.div(
|
|
8821
|
-
var StyledInput = styled.input(
|
|
8822
|
-
var theme =
|
|
8825
|
+
var Year = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n font-weight: 500;\n font-size: 12px;\n"])));
|
|
8826
|
+
var Month = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n font-weight: 600;\n font-size: 14px;\n"])));
|
|
8827
|
+
var InputWrapper = styled.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 24px;\n"])));
|
|
8828
|
+
var TimeInputWrapper = styled.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
8829
|
+
var StyledInput = styled.input(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n outline: none;\n width: 60px;\n height: 30px;\n text-align: center;\n font-size: 16px;\n border-radius: 5px;\n background: ", ";\n border: ", ";\n color: ", ";\n"])), function (_ref26) {
|
|
8830
|
+
var theme = _ref26.theme;
|
|
8823
8831
|
return theme.vms.text.white;
|
|
8824
|
-
}, function (
|
|
8825
|
-
var theme =
|
|
8832
|
+
}, function (_ref27) {
|
|
8833
|
+
var theme = _ref27.theme;
|
|
8826
8834
|
return "1px solid " + theme.vms.border.extraBold;
|
|
8827
|
-
}, function (
|
|
8828
|
-
var theme =
|
|
8835
|
+
}, function (_ref28) {
|
|
8836
|
+
var theme = _ref28.theme;
|
|
8829
8837
|
return theme.vms.text.dark;
|
|
8830
8838
|
});
|
|
8831
|
-
var DatePicker = function DatePicker(
|
|
8839
|
+
var DatePicker = function DatePicker(_ref29) {
|
|
8832
8840
|
var _renderState$startDat3, _renderState$startDat4;
|
|
8833
|
-
var
|
|
8834
|
-
dateSize =
|
|
8835
|
-
dateTime =
|
|
8836
|
-
setDateTime =
|
|
8837
|
-
|
|
8838
|
-
futureDateTime =
|
|
8839
|
-
|
|
8840
|
-
|
|
8841
|
-
|
|
8841
|
+
var _ref29$dateSize = _ref29.dateSize,
|
|
8842
|
+
dateSize = _ref29$dateSize === void 0 ? 30 : _ref29$dateSize,
|
|
8843
|
+
dateTime = _ref29.dateTime,
|
|
8844
|
+
setDateTime = _ref29.setDateTime,
|
|
8845
|
+
_ref29$futureDateTime = _ref29.futureDateTime,
|
|
8846
|
+
futureDateTime = _ref29$futureDateTime === void 0 ? true : _ref29$futureDateTime,
|
|
8847
|
+
_ref29$clockType = _ref29.clockType,
|
|
8848
|
+
clockType = _ref29$clockType === void 0 ? '24hr' : _ref29$clockType,
|
|
8849
|
+
_ref29$markedDateRang = _ref29.markedDateRanges,
|
|
8850
|
+
markedDateRanges = _ref29$markedDateRang === void 0 ? [] : _ref29$markedDateRang,
|
|
8851
|
+
calendarBorder = _ref29.calendarBorder;
|
|
8842
8852
|
var themeColors = useTheme();
|
|
8843
8853
|
var _useTranslation = useTranslation(),
|
|
8844
8854
|
t = _useTranslation.t;
|
|
@@ -9079,6 +9089,9 @@ var DatePicker = function DatePicker(_ref27) {
|
|
|
9079
9089
|
var formatTime = function formatTime(value) {
|
|
9080
9090
|
return value.toString().padStart(2, '0');
|
|
9081
9091
|
};
|
|
9092
|
+
var formatClockType = function formatClockType(value) {
|
|
9093
|
+
return value === '12hr' ? '12-hour' : '24-hour';
|
|
9094
|
+
};
|
|
9082
9095
|
return React.createElement(DatePickerContainer, null, React.createElement(CalendarContainer, {
|
|
9083
9096
|
"$border": calendarBorder,
|
|
9084
9097
|
onClick: function onClick(e) {
|
|
@@ -9140,7 +9153,7 @@ var DatePicker = function DatePicker(_ref27) {
|
|
|
9140
9153
|
onChange: function onChange(e) {
|
|
9141
9154
|
return handleMinuteChange(e, false);
|
|
9142
9155
|
}
|
|
9143
|
-
}))))), React.createElement(Line$1, null, React.createElement("hr", null)), React.createElement(Zones, null, React.createElement(
|
|
9156
|
+
}))))), React.createElement(Line$1, null, React.createElement("hr", null)), React.createElement(Zones, null, React.createElement(ZoneLabel, null, t('TimePicker_Zone')), React.createElement(ZoneValue, null, getSystemTimezoneAbbreviation())), React.createElement(Zones, null, React.createElement(ZoneLabel, null, t('TimePicker_ClockType')), React.createElement(ZoneValue, null, formatClockType(clockType))))));
|
|
9144
9157
|
};
|
|
9145
9158
|
|
|
9146
9159
|
var _templateObject$a, _templateObject2$7, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3;
|