labsense-ui-kit 1.4.44 → 1.4.46
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/Inputs/TextField.d.ts +3 -0
- package/dist/index.js +239 -146
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +239 -146
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8717,7 +8717,7 @@ var timeStringToSeconds = function timeStringToSeconds(timeString) {
|
|
|
8717
8717
|
return hours * 3600 + minutes * 60 + seconds;
|
|
8718
8718
|
};
|
|
8719
8719
|
|
|
8720
|
-
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;
|
|
8720
|
+
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;
|
|
8721
8721
|
var DatePickerContainer = styled__default.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n"])));
|
|
8722
8722
|
var CalendarContainer = styled__default.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) {
|
|
8723
8723
|
var theme = _ref.theme;
|
|
@@ -8747,105 +8747,113 @@ var Selectedtime = styled__default.div(_templateObject9 || (_templateObject9 = _
|
|
|
8747
8747
|
return theme.vms.text.medium;
|
|
8748
8748
|
});
|
|
8749
8749
|
var Line$1 = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n width: 100%;\n padding-top: 10px;\n padding-bottom: 10px;\n"])));
|
|
8750
|
-
var Zones = styled__default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n"])));
|
|
8751
|
-
var
|
|
8752
|
-
var CalendarMonthYear = styled__default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n color: ", ";\n justify-content: center;\n align-items: center;\n"])), function (_ref7) {
|
|
8750
|
+
var Zones = styled__default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n & + & {\n margin-top: 8px;\n }\n"])));
|
|
8751
|
+
var ZoneLabel = styled__default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n font-weight: 400;\n font-size: 12px;\n color: ", ";\n"])), function (_ref7) {
|
|
8753
8752
|
var theme = _ref7.theme;
|
|
8754
8753
|
return theme.vms.text.medium;
|
|
8755
8754
|
});
|
|
8756
|
-
var
|
|
8757
|
-
var Button = styled__default.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) {
|
|
8755
|
+
var ZoneValue = styled__default.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n font-weight: 600;\n font-size: 13px;\n color: ", ";\n"])), function (_ref8) {
|
|
8758
8756
|
var theme = _ref8.theme;
|
|
8759
|
-
return theme.vms
|
|
8760
|
-
}
|
|
8757
|
+
return theme.vms.text.dark;
|
|
8758
|
+
});
|
|
8759
|
+
var CalendarHeader = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n"])));
|
|
8760
|
+
var CalendarMonthYear = styled__default.span(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n color: ", ";\n justify-content: center;\n align-items: center;\n"])), function (_ref9) {
|
|
8761
8761
|
var theme = _ref9.theme;
|
|
8762
|
-
return theme.vms.text.
|
|
8763
|
-
}, function (_ref10) {
|
|
8764
|
-
var $size = _ref10.$size;
|
|
8765
|
-
return $size ? $size + "px" : '30px';
|
|
8766
|
-
}, function (_ref11) {
|
|
8767
|
-
var $size = _ref11.$size;
|
|
8768
|
-
return $size ? $size + "px" : '30px';
|
|
8762
|
+
return theme.vms.text.medium;
|
|
8769
8763
|
});
|
|
8770
|
-
var
|
|
8764
|
+
var CalendarContent = styled__default.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n gap: 5px;\n padding: 10px;\n"])));
|
|
8765
|
+
var Button = styled__default.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) {
|
|
8766
|
+
var theme = _ref10.theme;
|
|
8767
|
+
return theme.vms["default"].secondary;
|
|
8768
|
+
}, function (_ref11) {
|
|
8769
|
+
var theme = _ref11.theme;
|
|
8770
|
+
return theme.vms.text.white;
|
|
8771
|
+
}, function (_ref12) {
|
|
8771
8772
|
var $size = _ref12.$size;
|
|
8772
8773
|
return $size ? $size + "px" : '30px';
|
|
8773
8774
|
}, function (_ref13) {
|
|
8774
8775
|
var $size = _ref13.$size;
|
|
8776
|
+
return $size ? $size + "px" : '30px';
|
|
8777
|
+
});
|
|
8778
|
+
var CalendarDates = styled__default.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) {
|
|
8779
|
+
var $size = _ref14.$size;
|
|
8780
|
+
return $size ? $size + "px" : '30px';
|
|
8781
|
+
}, function (_ref15) {
|
|
8782
|
+
var $size = _ref15.$size;
|
|
8775
8783
|
return $size ? $size + 8 + "px" : '38px';
|
|
8776
|
-
}, function (
|
|
8777
|
-
var $isFuture =
|
|
8778
|
-
$futureDateTime =
|
|
8784
|
+
}, function (_ref16) {
|
|
8785
|
+
var $isFuture = _ref16.$isFuture,
|
|
8786
|
+
$futureDateTime = _ref16.$futureDateTime;
|
|
8779
8787
|
return !$futureDateTime && $isFuture ? 'default' : 'pointer';
|
|
8780
|
-
}, function (
|
|
8781
|
-
var $isFuture =
|
|
8782
|
-
$futureDateTime =
|
|
8788
|
+
}, function (_ref17) {
|
|
8789
|
+
var $isFuture = _ref17.$isFuture,
|
|
8790
|
+
$futureDateTime = _ref17.$futureDateTime;
|
|
8783
8791
|
return !$futureDateTime && $isFuture ? 0.5 : 1;
|
|
8784
|
-
}, function (
|
|
8785
|
-
var $showDot =
|
|
8792
|
+
}, function (_ref18) {
|
|
8793
|
+
var $showDot = _ref18.$showDot;
|
|
8786
8794
|
return $showDot ? 'block' : 'none';
|
|
8787
|
-
}, function (
|
|
8788
|
-
var $dotColor =
|
|
8789
|
-
theme =
|
|
8795
|
+
}, function (_ref19) {
|
|
8796
|
+
var $dotColor = _ref19.$dotColor,
|
|
8797
|
+
theme = _ref19.theme;
|
|
8790
8798
|
return $dotColor || theme.vms["default"].primary;
|
|
8791
8799
|
});
|
|
8792
|
-
var CalendarDateLabel = styled__default.div(
|
|
8793
|
-
var $size =
|
|
8794
|
-
return $size ? $size + "px" : '30px';
|
|
8795
|
-
}, function (_ref19) {
|
|
8796
|
-
var $size = _ref19.$size;
|
|
8800
|
+
var CalendarDateLabel = styled__default.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) {
|
|
8801
|
+
var $size = _ref20.$size;
|
|
8797
8802
|
return $size ? $size + "px" : '30px';
|
|
8798
|
-
}, function (_ref20) {
|
|
8799
|
-
var $selected = _ref20.$selected,
|
|
8800
|
-
$inRange = _ref20.$inRange,
|
|
8801
|
-
$plain = _ref20.$plain,
|
|
8802
|
-
theme = _ref20.theme;
|
|
8803
|
-
return $plain ? 'transparent' : $selected ? theme.vms["default"].primary : $inRange ? theme.vms["default"].primary : theme.vms["default"].tertiary;
|
|
8804
8803
|
}, function (_ref21) {
|
|
8805
|
-
var $
|
|
8806
|
-
|
|
8807
|
-
$plain = _ref21.$plain,
|
|
8808
|
-
theme = _ref21.theme;
|
|
8809
|
-
return $plain ? theme.vms.text.medium : $selected ? theme.vms.text.white : $inRange ? theme.vms.text.white : theme.vms.text.medium;
|
|
8804
|
+
var $size = _ref21.$size;
|
|
8805
|
+
return $size ? $size + "px" : '30px';
|
|
8810
8806
|
}, function (_ref22) {
|
|
8811
|
-
var $
|
|
8812
|
-
|
|
8813
|
-
|
|
8807
|
+
var $selected = _ref22.$selected,
|
|
8808
|
+
$inRange = _ref22.$inRange,
|
|
8809
|
+
$plain = _ref22.$plain,
|
|
8810
|
+
theme = _ref22.theme;
|
|
8811
|
+
return $plain ? 'transparent' : $selected ? theme.vms["default"].primary : $inRange ? theme.vms["default"].primary : theme.vms["default"].tertiary;
|
|
8812
|
+
}, function (_ref23) {
|
|
8814
8813
|
var $selected = _ref23.$selected,
|
|
8815
8814
|
$inRange = _ref23.$inRange,
|
|
8816
8815
|
$plain = _ref23.$plain,
|
|
8817
|
-
$isFuture = _ref23.$isFuture,
|
|
8818
|
-
$futureDateTime = _ref23.$futureDateTime,
|
|
8819
8816
|
theme = _ref23.theme;
|
|
8817
|
+
return $plain ? theme.vms.text.medium : $selected ? theme.vms.text.white : $inRange ? theme.vms.text.white : theme.vms.text.medium;
|
|
8818
|
+
}, function (_ref24) {
|
|
8819
|
+
var $highlightBorder = _ref24.$highlightBorder;
|
|
8820
|
+
return $highlightBorder ? "2px solid " + $highlightBorder : '2px solid transparent';
|
|
8821
|
+
}, CalendarDates, function (_ref25) {
|
|
8822
|
+
var $selected = _ref25.$selected,
|
|
8823
|
+
$inRange = _ref25.$inRange,
|
|
8824
|
+
$plain = _ref25.$plain,
|
|
8825
|
+
$isFuture = _ref25.$isFuture,
|
|
8826
|
+
$futureDateTime = _ref25.$futureDateTime,
|
|
8827
|
+
theme = _ref25.theme;
|
|
8820
8828
|
return $plain ? 'transparent' : !$futureDateTime && $isFuture ? 'transparent' : $selected ? theme.vms.disabled.primary : $inRange ? theme.vms.disabled.primary : theme.vms.disabled.primary;
|
|
8821
8829
|
});
|
|
8822
|
-
var Year = styled__default.div(
|
|
8823
|
-
var Month = styled__default.div(
|
|
8824
|
-
var InputWrapper = styled__default.div(
|
|
8825
|
-
var TimeInputWrapper = styled__default.div(
|
|
8826
|
-
var StyledInput = styled__default.input(
|
|
8827
|
-
var theme =
|
|
8830
|
+
var Year = styled__default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n font-weight: 500;\n font-size: 12px;\n"])));
|
|
8831
|
+
var Month = styled__default.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n font-weight: 600;\n font-size: 14px;\n"])));
|
|
8832
|
+
var InputWrapper = styled__default.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n display: flex;\n gap: 24px;\n"])));
|
|
8833
|
+
var TimeInputWrapper = styled__default.div(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n position: relative;\n display: flex;\n align-items: center;\n"])));
|
|
8834
|
+
var StyledInput = styled__default.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) {
|
|
8835
|
+
var theme = _ref26.theme;
|
|
8828
8836
|
return theme.vms.text.white;
|
|
8829
|
-
}, function (
|
|
8830
|
-
var theme =
|
|
8837
|
+
}, function (_ref27) {
|
|
8838
|
+
var theme = _ref27.theme;
|
|
8831
8839
|
return "1px solid " + theme.vms.border.extraBold;
|
|
8832
|
-
}, function (
|
|
8833
|
-
var theme =
|
|
8840
|
+
}, function (_ref28) {
|
|
8841
|
+
var theme = _ref28.theme;
|
|
8834
8842
|
return theme.vms.text.dark;
|
|
8835
8843
|
});
|
|
8836
|
-
var DatePicker = function DatePicker(
|
|
8844
|
+
var DatePicker = function DatePicker(_ref29) {
|
|
8837
8845
|
var _renderState$startDat3, _renderState$startDat4;
|
|
8838
|
-
var
|
|
8839
|
-
dateSize =
|
|
8840
|
-
dateTime =
|
|
8841
|
-
setDateTime =
|
|
8842
|
-
|
|
8843
|
-
futureDateTime =
|
|
8844
|
-
|
|
8845
|
-
clockType =
|
|
8846
|
-
|
|
8847
|
-
markedDateRanges =
|
|
8848
|
-
calendarBorder =
|
|
8846
|
+
var _ref29$dateSize = _ref29.dateSize,
|
|
8847
|
+
dateSize = _ref29$dateSize === void 0 ? 30 : _ref29$dateSize,
|
|
8848
|
+
dateTime = _ref29.dateTime,
|
|
8849
|
+
setDateTime = _ref29.setDateTime,
|
|
8850
|
+
_ref29$futureDateTime = _ref29.futureDateTime,
|
|
8851
|
+
futureDateTime = _ref29$futureDateTime === void 0 ? true : _ref29$futureDateTime,
|
|
8852
|
+
_ref29$clockType = _ref29.clockType,
|
|
8853
|
+
clockType = _ref29$clockType === void 0 ? '24hr' : _ref29$clockType,
|
|
8854
|
+
_ref29$markedDateRang = _ref29.markedDateRanges,
|
|
8855
|
+
markedDateRanges = _ref29$markedDateRang === void 0 ? [] : _ref29$markedDateRang,
|
|
8856
|
+
calendarBorder = _ref29.calendarBorder;
|
|
8849
8857
|
var themeColors = useTheme();
|
|
8850
8858
|
var _useTranslation = reactI18next.useTranslation(),
|
|
8851
8859
|
t = _useTranslation.t;
|
|
@@ -9086,6 +9094,9 @@ var DatePicker = function DatePicker(_ref27) {
|
|
|
9086
9094
|
var formatTime = function formatTime(value) {
|
|
9087
9095
|
return value.toString().padStart(2, '0');
|
|
9088
9096
|
};
|
|
9097
|
+
var formatClockType = function formatClockType(value) {
|
|
9098
|
+
return value === '12hr' ? '12-hour' : '24-hour';
|
|
9099
|
+
};
|
|
9089
9100
|
return React__default.createElement(DatePickerContainer, null, React__default.createElement(CalendarContainer, {
|
|
9090
9101
|
"$border": calendarBorder,
|
|
9091
9102
|
onClick: function onClick(e) {
|
|
@@ -9147,7 +9158,7 @@ var DatePicker = function DatePicker(_ref27) {
|
|
|
9147
9158
|
onChange: function onChange(e) {
|
|
9148
9159
|
return handleMinuteChange(e, false);
|
|
9149
9160
|
}
|
|
9150
|
-
}))))), React__default.createElement(Line$1, null, React__default.createElement("hr", null)), React__default.createElement(Zones, null, React__default.createElement(
|
|
9161
|
+
}))))), React__default.createElement(Line$1, null, React__default.createElement("hr", null)), React__default.createElement(Zones, null, React__default.createElement(ZoneLabel, null, t('TimePicker_Zone')), React__default.createElement(ZoneValue, null, getSystemTimezoneAbbreviation())), React__default.createElement(Zones, null, React__default.createElement(ZoneLabel, null, t('TimePicker_ClockType')), React__default.createElement(ZoneValue, null, formatClockType(clockType))))));
|
|
9151
9162
|
};
|
|
9152
9163
|
|
|
9153
9164
|
var _templateObject$a, _templateObject2$7, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3;
|
|
@@ -10846,7 +10857,7 @@ var SearchBox = function SearchBox(_ref9) {
|
|
|
10846
10857
|
}));
|
|
10847
10858
|
};
|
|
10848
10859
|
|
|
10849
|
-
var _templateObject$f, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
|
|
10860
|
+
var _templateObject$f, _templateObject2$c, _templateObject3$8, _templateObject4$6, _templateObject5$6, _templateObject6$6, _templateObject7$4, _templateObject8$4, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$1;
|
|
10850
10861
|
var Label = styled__default.label(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n cursor: auto;\n width: 100%;\n font-weight: ", ";\n position: relative;\n white-space: nowrap;\n width: max-content;\n\n ", "\n\n color: ", ";\n"])), function (_ref) {
|
|
10851
10862
|
var $fontWeight = _ref.$fontWeight;
|
|
10852
10863
|
return $fontWeight != null ? $fontWeight : '500';
|
|
@@ -10886,7 +10897,7 @@ var Label = styled__default.label(_templateObject$f || (_templateObject$f = _tag
|
|
|
10886
10897
|
return $titlecolor;
|
|
10887
10898
|
}
|
|
10888
10899
|
});
|
|
10889
|
-
var Input = styled__default.input(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n border: ", ";\n border-radius: 8px;\n cursor: ", ";\n background: ", ";\n transition: all 0.3s ease;\n color: ", ";\n\n ", "\n\n &:focus {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"])), function (_ref4) {
|
|
10900
|
+
var Input = styled__default.input(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n border: ", ";\n border-radius: 8px;\n cursor: ", ";\n background: ", ";\n transition: all 0.3s ease;\n color: ", ";\n\n ", "\n\n /* Hide native number spin buttons \u2014 replaced with a custom stepper */\n &[type='number'] {\n -moz-appearance: textfield;\n }\n &[type='number']::-webkit-outer-spin-button,\n &[type='number']::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &:focus {\n border: ", ";\n }\n\n &::placeholder {\n color: ", ";\n font-style: italic;\n }\n"])), function (_ref4) {
|
|
10890
10901
|
var theme = _ref4.theme;
|
|
10891
10902
|
return "1px solid " + theme.vms.border.light;
|
|
10892
10903
|
}, function (_ref5) {
|
|
@@ -10903,15 +10914,16 @@ var Input = styled__default.input(_templateObject2$c || (_templateObject2$c = _t
|
|
|
10903
10914
|
}, function (_ref8) {
|
|
10904
10915
|
var $size = _ref8.$size,
|
|
10905
10916
|
$type = _ref8.$type;
|
|
10917
|
+
var rightPadding = $type === 'password' ? '38px' : $type === 'number' ? '28px' : undefined;
|
|
10906
10918
|
switch ($size) {
|
|
10907
10919
|
case 'small':
|
|
10908
|
-
return "\n font-size: 12px;\n padding: " + (
|
|
10920
|
+
return "\n font-size: 12px;\n padding: 5px " + (rightPadding != null ? rightPadding : '10px') + " 5px 10px;\n ";
|
|
10909
10921
|
case 'medium':
|
|
10910
|
-
return "\n font-size: 14px;\n padding: " + (
|
|
10922
|
+
return "\n font-size: 14px;\n padding: 9.5px " + (rightPadding != null ? rightPadding : '12px') + " 9.5px 12px;\n ";
|
|
10911
10923
|
case 'large':
|
|
10912
|
-
return "\n font-size: 16px;\n padding: " + (
|
|
10924
|
+
return "\n font-size: 16px;\n padding: 9px " + (rightPadding != null ? rightPadding : '14px') + " 9px 14px;\n ";
|
|
10913
10925
|
default:
|
|
10914
|
-
return "\n font-size: 14px;\n padding: " + (
|
|
10926
|
+
return "\n font-size: 14px;\n padding: 7px " + (rightPadding != null ? rightPadding : '12px') + " 7px 12px;\n ";
|
|
10915
10927
|
}
|
|
10916
10928
|
}, function (_ref9) {
|
|
10917
10929
|
var $color = _ref9.$color,
|
|
@@ -10957,13 +10969,38 @@ var IconWrapper$1 = styled__default.div(_templateObject4$6 || (_templateObject4$
|
|
|
10957
10969
|
var $disabled = _ref11.$disabled;
|
|
10958
10970
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
10959
10971
|
});
|
|
10960
|
-
var
|
|
10972
|
+
var NumberStepper = styled__default.div(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 1px;\n top: 1px;\n bottom: 1px;\n display: flex;\n flex-direction: column;\n width: 20px;\n border-left: 1px solid ", ";\n border-radius: 0 7px 7px 0;\n overflow: hidden;\n opacity: ", ";\n"])), function (_ref12) {
|
|
10961
10973
|
var theme = _ref12.theme;
|
|
10974
|
+
return theme.vms.border.light;
|
|
10975
|
+
}, function (_ref13) {
|
|
10976
|
+
var $disabled = _ref13.$disabled;
|
|
10977
|
+
return $disabled ? 0.5 : 1;
|
|
10978
|
+
});
|
|
10979
|
+
var NumberStepperButton = styled__default.button(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n all: unset;\n box-sizing: border-box;\n flex: 1 1 0;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: ", ";\n background: ", ";\n transition: background 0.15s ease;\n\n &:not(:first-child) {\n border-top: 1px solid ", ";\n }\n\n &:hover {\n background: ", ";\n }\n\n &:active {\n background: ", ";\n }\n"])), function (_ref14) {
|
|
10980
|
+
var $disabled = _ref14.$disabled;
|
|
10981
|
+
return $disabled ? 'not-allowed' : 'pointer';
|
|
10982
|
+
}, function (_ref15) {
|
|
10983
|
+
var theme = _ref15.theme;
|
|
10984
|
+
return theme.vms.accent.light_2;
|
|
10985
|
+
}, function (_ref16) {
|
|
10986
|
+
var theme = _ref16.theme;
|
|
10987
|
+
return theme.vms.border.light;
|
|
10988
|
+
}, function (_ref17) {
|
|
10989
|
+
var $disabled = _ref17.$disabled,
|
|
10990
|
+
theme = _ref17.theme;
|
|
10991
|
+
return $disabled ? theme.vms.accent.light_2 : theme.vms.accent.light_3;
|
|
10992
|
+
}, function (_ref18) {
|
|
10993
|
+
var $disabled = _ref18.$disabled,
|
|
10994
|
+
theme = _ref18.theme;
|
|
10995
|
+
return $disabled ? theme.vms.accent.light_2 : theme.vms.border.light;
|
|
10996
|
+
});
|
|
10997
|
+
var Asterisk$1 = styled__default.span(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n color: ", ";\n font-size: 10px;\n height: fit-content;\n position: absolute;\n top: -2px;\n right: -8px;\n"])), function (_ref19) {
|
|
10998
|
+
var theme = _ref19.theme;
|
|
10962
10999
|
return theme.vms["default"].error;
|
|
10963
11000
|
});
|
|
10964
|
-
var SkeletonWrapper = styled__default.div(
|
|
10965
|
-
var SkeletonLabel = styled__default.div(
|
|
10966
|
-
var $size =
|
|
11001
|
+
var SkeletonWrapper = styled__default.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n"])));
|
|
11002
|
+
var SkeletonLabel = styled__default.div(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteralLoose(["\n height: ", ";\n width: 80px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: loading 1.5s ease-in-out infinite;\n border-radius: 4px;\n\n @keyframes loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n"])), function (_ref20) {
|
|
11003
|
+
var $size = _ref20.$size;
|
|
10967
11004
|
switch ($size) {
|
|
10968
11005
|
case 'small':
|
|
10969
11006
|
return '12px';
|
|
@@ -10975,8 +11012,8 @@ var SkeletonLabel = styled__default.div(_templateObject7$4 || (_templateObject7$
|
|
|
10975
11012
|
return '14px';
|
|
10976
11013
|
}
|
|
10977
11014
|
});
|
|
10978
|
-
var SkeletonInput = styled__default.div(
|
|
10979
|
-
var $size =
|
|
11015
|
+
var SkeletonInput = styled__default.div(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n border-radius: 8px;\n background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n background-size: 200% 100%;\n animation: loading 1.5s ease-in-out infinite;\n\n ", "\n\n @keyframes loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n"])), function (_ref21) {
|
|
11016
|
+
var $size = _ref21.$size;
|
|
10980
11017
|
switch ($size) {
|
|
10981
11018
|
case 'small':
|
|
10982
11019
|
return 'height: 32px;';
|
|
@@ -10988,84 +11025,88 @@ var SkeletonInput = styled__default.div(_templateObject8$4 || (_templateObject8$
|
|
|
10988
11025
|
return 'height: 38px;';
|
|
10989
11026
|
}
|
|
10990
11027
|
});
|
|
10991
|
-
var TimeInputWrapper$1 = styled__default(InputWrapper$1)(
|
|
10992
|
-
var $disabled =
|
|
11028
|
+
var TimeInputWrapper$1 = styled__default(InputWrapper$1)(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n cursor: ", ";\n\n input {\n cursor: ", ";\n }\n"])), function (_ref22) {
|
|
11029
|
+
var $disabled = _ref22.$disabled;
|
|
10993
11030
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
10994
|
-
}, function (
|
|
10995
|
-
var $disabled =
|
|
11031
|
+
}, function (_ref23) {
|
|
11032
|
+
var $disabled = _ref23.$disabled;
|
|
10996
11033
|
return $disabled ? 'not-allowed' : 'pointer';
|
|
10997
11034
|
});
|
|
10998
|
-
var TimePickerDropdown = styled__default.div(
|
|
10999
|
-
var theme =
|
|
11035
|
+
var TimePickerDropdown = styled__default.div(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n position: fixed;\n display: flex;\n gap: 8px;\n padding: 12px;\n border: 1px solid ", ";\n border-radius: 8px;\n background: ", ";\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n z-index: 999;\n"])), function (_ref24) {
|
|
11036
|
+
var theme = _ref24.theme;
|
|
11000
11037
|
return theme.vms.border.light;
|
|
11001
|
-
}, function (
|
|
11002
|
-
var theme =
|
|
11038
|
+
}, function (_ref25) {
|
|
11039
|
+
var theme = _ref25.theme;
|
|
11003
11040
|
return theme.vms.text.white;
|
|
11004
11041
|
});
|
|
11005
|
-
var SliderColumn = styled__default.div(
|
|
11006
|
-
var SliderLabel = styled__default.div(
|
|
11007
|
-
var theme =
|
|
11042
|
+
var SliderColumn = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n"])));
|
|
11043
|
+
var SliderLabel = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-weight: 500;\n color: ", ";\n margin-bottom: 4px;\n"])), function (_ref26) {
|
|
11044
|
+
var theme = _ref26.theme;
|
|
11008
11045
|
return theme.vms.text.medium;
|
|
11009
11046
|
});
|
|
11010
|
-
var SliderWrapper = styled__default.div(
|
|
11011
|
-
var theme =
|
|
11047
|
+
var SliderWrapper = styled__default.div(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n height: 150px;\n overflow-y: auto;\n overflow-x: hidden;\n border: 1px solid ", ";\n border-radius: 6px;\n background: ", ";\n width: 60px;\n scroll-behavior: smooth;\n \n /* Custom scrollbar */\n &::-webkit-scrollbar {\n width: 4px;\n }\n \n &::-webkit-scrollbar-track {\n background: ", ";\n }\n \n &::-webkit-scrollbar-thumb {\n background: ", ";\n border-radius: 2px;\n }\n \n &::-webkit-scrollbar-thumb:hover {\n background: ", ";\n }\n"])), function (_ref27) {
|
|
11048
|
+
var theme = _ref27.theme;
|
|
11012
11049
|
return theme.vms.border.light;
|
|
11013
|
-
}, function (
|
|
11014
|
-
var theme =
|
|
11050
|
+
}, function (_ref28) {
|
|
11051
|
+
var theme = _ref28.theme;
|
|
11015
11052
|
return theme.vms.accent.light_2;
|
|
11016
|
-
}, function (
|
|
11017
|
-
var theme =
|
|
11053
|
+
}, function (_ref29) {
|
|
11054
|
+
var theme = _ref29.theme;
|
|
11018
11055
|
return theme.vms.accent.light_2;
|
|
11019
|
-
}, function (
|
|
11020
|
-
var theme =
|
|
11056
|
+
}, function (_ref30) {
|
|
11057
|
+
var theme = _ref30.theme;
|
|
11021
11058
|
return theme.vms.border.medium;
|
|
11022
|
-
}, function (
|
|
11023
|
-
var theme =
|
|
11059
|
+
}, function (_ref31) {
|
|
11060
|
+
var theme = _ref31.theme;
|
|
11024
11061
|
return theme.vms.text.medium;
|
|
11025
11062
|
});
|
|
11026
|
-
var SliderItem = styled__default.div(
|
|
11027
|
-
var $selected =
|
|
11028
|
-
theme =
|
|
11063
|
+
var SliderItem = styled__default.div(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n padding: 8px 12px;\n text-align: center;\n cursor: pointer;\n font-size: 14px;\n color: ", ";\n background: ", ";\n transition: all 0.2s ease;\n \n &:hover {\n background: ", ";\n }\n"])), function (_ref32) {
|
|
11064
|
+
var $selected = _ref32.$selected,
|
|
11065
|
+
theme = _ref32.theme;
|
|
11029
11066
|
return $selected ? theme.vms.text.white : theme.vms.text.dark;
|
|
11030
|
-
}, function (
|
|
11031
|
-
var $selected =
|
|
11032
|
-
theme =
|
|
11067
|
+
}, function (_ref33) {
|
|
11068
|
+
var $selected = _ref33.$selected,
|
|
11069
|
+
theme = _ref33.theme;
|
|
11033
11070
|
return $selected ? theme.vms["default"].primary : 'transparent';
|
|
11034
|
-
}, function (
|
|
11035
|
-
var $selected =
|
|
11036
|
-
theme =
|
|
11071
|
+
}, function (_ref34) {
|
|
11072
|
+
var $selected = _ref34.$selected,
|
|
11073
|
+
theme = _ref34.theme;
|
|
11037
11074
|
return $selected ? theme.vms["default"].primary : theme.vms.accent.light_3;
|
|
11038
11075
|
});
|
|
11039
|
-
var TextField = function TextField(
|
|
11040
|
-
var
|
|
11041
|
-
type =
|
|
11042
|
-
title =
|
|
11043
|
-
name =
|
|
11044
|
-
titleWeight =
|
|
11045
|
-
placeholder =
|
|
11046
|
-
|
|
11047
|
-
disabled =
|
|
11048
|
-
inputValue =
|
|
11049
|
-
onChange =
|
|
11050
|
-
|
|
11051
|
-
size =
|
|
11052
|
-
color =
|
|
11053
|
-
|
|
11054
|
-
padding =
|
|
11055
|
-
titlecolor =
|
|
11056
|
-
icon =
|
|
11057
|
-
|
|
11058
|
-
iconsize =
|
|
11059
|
-
iconweight =
|
|
11060
|
-
iconcolor =
|
|
11061
|
-
|
|
11062
|
-
required =
|
|
11063
|
-
background =
|
|
11064
|
-
onEnter =
|
|
11065
|
-
titleRightNode =
|
|
11066
|
-
autoComplete =
|
|
11067
|
-
|
|
11068
|
-
loading =
|
|
11076
|
+
var TextField = function TextField(_ref35) {
|
|
11077
|
+
var _ref35$type = _ref35.type,
|
|
11078
|
+
type = _ref35$type === void 0 ? 'text' : _ref35$type,
|
|
11079
|
+
title = _ref35.title,
|
|
11080
|
+
name = _ref35.name,
|
|
11081
|
+
titleWeight = _ref35.titleWeight,
|
|
11082
|
+
placeholder = _ref35.placeholder,
|
|
11083
|
+
_ref35$disabled = _ref35.disabled,
|
|
11084
|
+
disabled = _ref35$disabled === void 0 ? false : _ref35$disabled,
|
|
11085
|
+
inputValue = _ref35.inputValue,
|
|
11086
|
+
onChange = _ref35.onChange,
|
|
11087
|
+
_ref35$size = _ref35.size,
|
|
11088
|
+
size = _ref35$size === void 0 ? 'medium' : _ref35$size,
|
|
11089
|
+
color = _ref35.color,
|
|
11090
|
+
_ref35$padding = _ref35.padding,
|
|
11091
|
+
padding = _ref35$padding === void 0 ? '0px' : _ref35$padding,
|
|
11092
|
+
titlecolor = _ref35.titlecolor,
|
|
11093
|
+
icon = _ref35.icon,
|
|
11094
|
+
_ref35$iconsize = _ref35.iconsize,
|
|
11095
|
+
iconsize = _ref35$iconsize === void 0 ? 18 : _ref35$iconsize,
|
|
11096
|
+
iconweight = _ref35.iconweight,
|
|
11097
|
+
iconcolor = _ref35.iconcolor,
|
|
11098
|
+
_ref35$required = _ref35.required,
|
|
11099
|
+
required = _ref35$required === void 0 ? false : _ref35$required,
|
|
11100
|
+
background = _ref35.background,
|
|
11101
|
+
onEnter = _ref35.onEnter,
|
|
11102
|
+
titleRightNode = _ref35.titleRightNode,
|
|
11103
|
+
autoComplete = _ref35.autoComplete,
|
|
11104
|
+
_ref35$loading = _ref35.loading,
|
|
11105
|
+
loading = _ref35$loading === void 0 ? false : _ref35$loading,
|
|
11106
|
+
min = _ref35.min,
|
|
11107
|
+
max = _ref35.max,
|
|
11108
|
+
_ref35$step = _ref35.step,
|
|
11109
|
+
step = _ref35$step === void 0 ? 1 : _ref35$step;
|
|
11069
11110
|
var themeColors = useTheme();
|
|
11070
11111
|
var _useState = React.useState(disabled),
|
|
11071
11112
|
isDisabled = _useState[0],
|
|
@@ -11239,6 +11280,25 @@ var TextField = function TextField(_ref28) {
|
|
|
11239
11280
|
return !prev;
|
|
11240
11281
|
});
|
|
11241
11282
|
};
|
|
11283
|
+
var handleNumberStep = function handleNumberStep(direction) {
|
|
11284
|
+
if (isDisabled || !onChange) return;
|
|
11285
|
+
var current = parseFloat(inputValue) || 0;
|
|
11286
|
+
var next = current + direction * step;
|
|
11287
|
+
if (typeof min === 'number' && next < min) next = min;
|
|
11288
|
+
if (typeof max === 'number' && next > max) next = max;
|
|
11289
|
+
var decimals = (step.toString().split('.')[1] || '').length;
|
|
11290
|
+
var nextValue = decimals > 0 ? next.toFixed(decimals) : next.toString();
|
|
11291
|
+
var syntheticEvent = {
|
|
11292
|
+
target: {
|
|
11293
|
+
value: nextValue,
|
|
11294
|
+
name: name || title
|
|
11295
|
+
}
|
|
11296
|
+
};
|
|
11297
|
+
onChange(syntheticEvent);
|
|
11298
|
+
};
|
|
11299
|
+
var currentNumberValue = parseFloat(inputValue);
|
|
11300
|
+
var isIncrementDisabled = isDisabled || !onChange || typeof max === 'number' && !isNaN(currentNumberValue) && currentNumberValue >= max;
|
|
11301
|
+
var isDecrementDisabled = isDisabled || !onChange || typeof min === 'number' && !isNaN(currentNumberValue) && currentNumberValue <= min;
|
|
11242
11302
|
if (loading) {
|
|
11243
11303
|
return React__default.createElement(Container, {
|
|
11244
11304
|
"$flexDirection": 'column',
|
|
@@ -11358,7 +11418,10 @@ var TextField = function TextField(_ref28) {
|
|
|
11358
11418
|
onKeyDown: function onKeyDown(e) {
|
|
11359
11419
|
if (e.key === 'Enter') onEnter === null || onEnter === void 0 ? void 0 : onEnter();
|
|
11360
11420
|
},
|
|
11361
|
-
autoComplete: autoComplete
|
|
11421
|
+
autoComplete: autoComplete,
|
|
11422
|
+
min: type === 'number' ? min : undefined,
|
|
11423
|
+
max: type === 'number' ? max : undefined,
|
|
11424
|
+
step: type === 'number' ? step : undefined
|
|
11362
11425
|
}), type === 'password' && inputValue && React__default.createElement(IconWrapper$1, {
|
|
11363
11426
|
"$disabled": disabled,
|
|
11364
11427
|
onClick: function onClick() {
|
|
@@ -11371,7 +11434,7 @@ var TextField = function TextField(_ref28) {
|
|
|
11371
11434
|
size: iconsize,
|
|
11372
11435
|
weight: iconweight,
|
|
11373
11436
|
color: iconcolor || themeColors.vms["default"].primary
|
|
11374
|
-
})), icon && type !== 'password' && React__default.createElement(IconWrapper$1, {
|
|
11437
|
+
})), icon && type !== 'password' && type !== 'number' && React__default.createElement(IconWrapper$1, {
|
|
11375
11438
|
onClick: function onClick() {
|
|
11376
11439
|
return setIsDisabled(function (prev) {
|
|
11377
11440
|
return !prev;
|
|
@@ -11382,7 +11445,37 @@ var TextField = function TextField(_ref28) {
|
|
|
11382
11445
|
size: iconsize,
|
|
11383
11446
|
weight: iconweight,
|
|
11384
11447
|
color: iconcolor || themeColors.vms["default"].primary
|
|
11385
|
-
}))
|
|
11448
|
+
})), type === 'number' && React__default.createElement(NumberStepper, {
|
|
11449
|
+
"$disabled": isDisabled
|
|
11450
|
+
}, React__default.createElement(NumberStepperButton, {
|
|
11451
|
+
type: 'button',
|
|
11452
|
+
tabIndex: -1,
|
|
11453
|
+
"$disabled": isIncrementDisabled,
|
|
11454
|
+
disabled: isIncrementDisabled,
|
|
11455
|
+
onClick: function onClick() {
|
|
11456
|
+
return handleNumberStep(1);
|
|
11457
|
+
},
|
|
11458
|
+
"aria-label": 'Increment'
|
|
11459
|
+
}, React__default.createElement(Icon, {
|
|
11460
|
+
icon: 'UpArrow',
|
|
11461
|
+
size: 7,
|
|
11462
|
+
weight: '2px',
|
|
11463
|
+
color: isIncrementDisabled ? themeColors.vms.text.light : themeColors.vms.text.medium
|
|
11464
|
+
})), React__default.createElement(NumberStepperButton, {
|
|
11465
|
+
type: 'button',
|
|
11466
|
+
tabIndex: -1,
|
|
11467
|
+
"$disabled": isDecrementDisabled,
|
|
11468
|
+
disabled: isDecrementDisabled,
|
|
11469
|
+
onClick: function onClick() {
|
|
11470
|
+
return handleNumberStep(-1);
|
|
11471
|
+
},
|
|
11472
|
+
"aria-label": 'Decrement'
|
|
11473
|
+
}, React__default.createElement(Icon, {
|
|
11474
|
+
icon: 'DownArrow',
|
|
11475
|
+
size: 7,
|
|
11476
|
+
weight: '2px',
|
|
11477
|
+
color: isDecrementDisabled ? themeColors.vms.text.light : themeColors.vms.text.medium
|
|
11478
|
+
})))));
|
|
11386
11479
|
};
|
|
11387
11480
|
|
|
11388
11481
|
var _templateObject$g, _templateObject2$d, _templateObject3$9;
|