@desynova-digital/components 9.1.14 → 9.1.16
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.
|
@@ -26,8 +26,12 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (
|
|
|
26
26
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
27
27
|
//'@desynova-digital/tokens'
|
|
28
28
|
|
|
29
|
-
var DatePickerInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & div.form-input > input {\n display: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family: 'SFUIText-Medium';\n color: ", ";\n cursor: ", ";\n pointer-events: ", ";\n font-size: 14px;\n padding: 10px 20px 4px 0px;\n display: block;\n\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n }\n\n .form-input {\n border-bottom: 1px solid\n ", ";\n\n &:hover {\n border-color: ", ";\n }\n position: relative;\n margin-top: 20px;\n display: flex;\n align-items: center;\n .calender-icon {\n cursor: pointer;\n path {\n fill-rule: evenodd;\n clip-rule: evenodd;\n }\n }\n\n .clear-icon {\n position: absolute;\n right: 0px;\n bottom: 6px;\n cursor: pointer;\n path {\n fill: #ef5350;\n }\n }\n }\n .form-input label {\n color: ", ";\n font-size: 14px;\n font-family: 'SFUIText-Regular';\n position: ", ";\n pointer-events: none;\n text-transform: none;\n left: 0px;\n top: ", ";\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n\n .form-input label.floaton {\n top: ", ";\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n /* ======Date picker====== */\n\n &.ardp-date-picker {\n font-size: 16px;\n font-family: 'SFUIText-Regular';\n box-sizing: border-box;\n position: relative;\n }\n &.ardp-date-picker * {\n box-sizing: border-box;\n }\n &.ardp-date-picker div.calendar {\n position: ", ";\n z-index: ", ";\n background: ", ";\n width: 300px;\n border-radius: 0px;\n height: auto;\n overflow: hidden;\n border: 1px solid\n ", ";\n }\n\n &.ardp-date-picker div.calendar:after,\n &.ardp-date-picker div.calendar:before {\n display: table;\n content: ' ';\n box-sizing: border-box;\n }\n\n &.ardp-date-picker div.calendar.calendar-show {\n visibility: visible;\n opacity: 1;\n transition: opacity 100ms linear;\n }\n &.ardp-date-picker div.calendar.calendar-hide {\n visibility: ", ";\n opacity: ", ";\n transition: visibility 0s 100ms, opacity 100ms linear;\n }\n\n &.ardp-date-picker div.calendar div.month-header {\n float: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n padding: 10px;\n border-bottom: 1px solid\n ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i {\n cursor: pointer;\n padding: 6px;\n border-radius: 50%;\n width: 25px;\n text-align: center;\n height: 25px;\n border-radius: 18px;\n background-color: ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n path {\n stroke: ", ";\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n path {\n fill: transparent;\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n color: ", ";\n width: 150px;\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text > .month-text {\n font-family: 'SFUIText-Medium';\n color: ", ";\n text-transform: uppercase;\n }\n\n &.ardp-date-picker div.calendar div.week-header {\n float: left;\n width: 100%;\n display: block;\n padding: 10px 3px;\n }\n &.ardp-date-picker div.calendar div.week-header > span {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-transform: uppercase;\n color: ", ";\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.weeks {\n float: left;\n width: 100%;\n overflow: hidden;\n position: relative;\n padding: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks > div {\n width: 300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.current {\n left: 0;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other {\n left: 300px;\n position: absolute;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other.right {\n left: -300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding {\n transition: transform 250ms ease;\n -webkit-transition: -webkit-transform 250ms ease;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n transform: translate3d(-300px, 0, 0);\n -webkit-transform: translate3d(-300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n transform: translate3d(300px, 0, 0);\n -webkit-transform: translate3d(300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks div.week {\n float: left;\n width: 100%;\n margin: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-align: center;\n /* padding: 2px 0px; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n //padding: 11px 0px 5px;\n display: inline-block;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n border: 1px solid transparent;\n background: ", ";\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span:hover {\n background: ", ";\n cursor: pointer;\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month > span {\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span:hover {\n color: ", ";\n cursor: not-allowed;\n background: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month.disabled > span {\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n border: 1px none\n ", ";\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today.disabled > span {\n background: ", ";\n border: 1px solid transparent;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.today > span:hover {\n background: ", ";\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span:hover {\n background: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-start {\n background: ", ";\n\n border-top-left-radius: 30px;\n border-bottom-left-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-end {\n background: ", ";\n\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n background: ", ";\n & > span {\n background: transparent;\n color: #fff;\n }\n }\n"])), function (props) {
|
|
29
|
+
var DatePickerInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n & div.form-input > input {\n display: ", ";\n }\n .label-text{\n cursor: ", ";\n pointer-events: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family: 'SFUIText-Medium';\n color: ", ";\n cursor: ", ";\n pointer-events: ", ";\n font-size: 14px;\n padding: 10px 20px 4px 0px;\n display: block;\n\n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n }\n\n .form-input {\n border-bottom: 1px solid\n ", ";\n\n &:hover {\n border-color: ", ";\n }\n position: relative;\n margin-top: 20px;\n display: flex;\n align-items: center;\n .calender-icon {\n cursor: pointer;\n path {\n fill-rule: evenodd;\n clip-rule: evenodd;\n }\n }\n\n .clear-icon {\n position: absolute;\n right: 0px;\n bottom: 6px;\n cursor: pointer;\n path {\n fill: #ef5350;\n }\n }\n }\n .form-input label {\n color: ", ";\n font-size: 14px;\n font-family: 'SFUIText-Regular';\n position: ", ";\n pointer-events: none;\n text-transform: none;\n left: 0px;\n top: ", ";\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n\n .form-input label.floaton {\n top: ", ";\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n /* ======Date picker====== */\n\n &.ardp-date-picker {\n font-size: 16px;\n font-family: 'SFUIText-Regular';\n box-sizing: border-box;\n position: relative;\n }\n .calendar{\n position: ", ";\n left: ", ";\n top: ", ";\n right: ", ";\n bottom: ", ";\n }\n &.ardp-date-picker * {\n box-sizing: border-box;\n }\n &.ardp-date-picker div.calendar {\n position: ", ";\n z-index: ", ";\n background: ", ";\n width: 300px;\n border-radius: 0px;\n height: auto;\n overflow: hidden;\n border: 1px solid\n ", ";\n }\n\n &.ardp-date-picker div.calendar:after,\n &.ardp-date-picker div.calendar:before {\n display: table;\n content: ' ';\n box-sizing: border-box;\n }\n\n &.ardp-date-picker div.calendar.calendar-show {\n visibility: visible;\n opacity: 1;\n transition: opacity 100ms linear;\n }\n &.ardp-date-picker div.calendar.calendar-hide {\n visibility: ", ";\n opacity: ", ";\n transition: visibility 0s 100ms, opacity 100ms linear;\n }\n\n &.ardp-date-picker div.calendar div.month-header {\n float: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n padding: 10px;\n border-bottom: 1px solid\n ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i {\n cursor: pointer;\n padding: 6px;\n border-radius: 50%;\n width: 25px;\n text-align: center;\n height: 25px;\n border-radius: 18px;\n background-color: ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n path {\n stroke: ", ";\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n path {\n fill: transparent;\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n color: ", ";\n width: 150px;\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text > .month-text {\n font-family: 'SFUIText-Medium';\n color: ", ";\n text-transform: uppercase;\n }\n\n &.ardp-date-picker div.calendar div.week-header {\n float: left;\n width: 100%;\n display: block;\n padding: 10px 3px;\n }\n &.ardp-date-picker div.calendar div.week-header > span {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-transform: uppercase;\n color: ", ";\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.weeks {\n float: left;\n width: 100%;\n overflow: hidden;\n position: relative;\n padding: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks > div {\n width: 300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.current {\n left: 0;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other {\n left: 300px;\n position: absolute;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other.right {\n left: -300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding {\n transition: transform 250ms ease;\n -webkit-transition: -webkit-transform 250ms ease;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n transform: translate3d(-300px, 0, 0);\n -webkit-transform: translate3d(-300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n transform: translate3d(300px, 0, 0);\n -webkit-transform: translate3d(300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks div.week {\n float: left;\n width: 100%;\n margin: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-align: center;\n /* padding: 2px 0px; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n //padding: 11px 0px 5px;\n display: inline-block;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n border: 1px solid transparent;\n background: ", ";\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span:hover {\n background: ", ";\n cursor: pointer;\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month > span {\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span:hover {\n color: ", ";\n cursor: not-allowed;\n background: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.other-month.disabled > span {\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n border: 1px none\n ", ";\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today.disabled > span {\n background: ", ";\n border: 1px solid transparent;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.today > span:hover {\n background: ", ";\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span,\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.disabled > span:hover {\n background: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-start {\n background: ", ";\n\n border-top-left-radius: 30px;\n border-bottom-left-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected.range-end {\n background: ", ";\n\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n background: ", ";\n & > span {\n background: transparent;\n color: #fff;\n }\n }\n"])), function (props) {
|
|
30
30
|
return props.inline ? 'none' : 'block';
|
|
31
|
+
}, function (props) {
|
|
32
|
+
return props.readOnly ? 'not-allowed' : 'pointer';
|
|
33
|
+
}, function (props) {
|
|
34
|
+
return props.readOnly ? 'none' : 'all';
|
|
31
35
|
}, function (props) {
|
|
32
36
|
return _tokens.colors[props.theme].inputCommon.background;
|
|
33
37
|
}, function (props) {
|
|
@@ -76,6 +80,16 @@ var DatePickerInput = _styledComponents["default"].div(_templateObject || (_temp
|
|
|
76
80
|
return props.inline ? '0px' : '-10px;';
|
|
77
81
|
}, function (props) {
|
|
78
82
|
return _tokens.colors[props.theme].inputLabel.colorOnFocus;
|
|
83
|
+
}, function (props) {
|
|
84
|
+
return props.baseStyles && props.baseStyles.position ? props.baseStyles.position : '';
|
|
85
|
+
}, function (props) {
|
|
86
|
+
return props.baseStyles && props.baseStyles.left ? props.baseStyles.left : '';
|
|
87
|
+
}, function (props) {
|
|
88
|
+
return props.baseStyles && props.baseStyles.top ? props.baseStyles.top : '';
|
|
89
|
+
}, function (props) {
|
|
90
|
+
return props.baseStyles && props.baseStyles.right ? props.baseStyles.right : '';
|
|
91
|
+
}, function (props) {
|
|
92
|
+
return props.baseStyles && props.baseStyles.bottom ? props.baseStyles.bottom : '';
|
|
79
93
|
}, function (props) {
|
|
80
94
|
return props.inline ? 'relative' : 'absolute';
|
|
81
95
|
}, function (props) {
|
package/atoms/popup/popup.js
CHANGED
|
@@ -50,7 +50,9 @@ var PopupBlock = _styledComponents["default"].div(_templateObject3 || (_template
|
|
|
50
50
|
var PopupOverlay = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n width: 100%;\n height: 100%;\n"])), function (props) {
|
|
51
51
|
return _tokens.colors[props.theme].popup.overlayColor;
|
|
52
52
|
});
|
|
53
|
-
var PopupBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n z-index: 3;\n max-width: 650px;\n min-width: 440px;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n\n width:
|
|
53
|
+
var PopupBox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n position: absolute;\n z-index: 3;\n max-width: 650px;\n min-width: 440px;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n\n width: ", ";\n border-radius: 10px;\n background: ", ";\n\n .popup-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n box-sizing: border-box;\n padding: 40px;\n\n .header-title {\n font-family: SFUIText-Light;\n font-size: 18px;\n line-height: 1;\n color: ", ";\n }\n .display-flex {\n display: flex;\n .pr-20 {\n padding-right: 20px;\n }\n }\n .cursor-p {\n cursor: pointer;\n }\n\n .count-wrapper {\n font-size: 14px;\n line-height: 24px;\n color: #afb2ba;\n font-family: 'SFUIText-Light';\n }\n ", " {\n margin: 0;\n background: transparent;\n border-color: transparent;\n padding: 0;\n path {\n fill: ", ";\n }\n &:hover {\n background: transparent;\n border-color: transparent;\n }\n }\n }\n .popup-body {\n padding: 0 40px 40px 40px;\n .popup-action-block {\n margin: 0 auto;\n display: flex;\n justify-content: center;\n\n button {\n padding: 10px 0;\n margin: 0 10px;\n min-width: 150px;\n }\n }\n .popup-message {\n font-family: SFUIText-Light;\n font-size: 14px;\n line-height: 1.5;\n text-align: center;\n color: ", ";\n margin-bottom: 40px;\n }\n }\n\n .loading-box {\n position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0px;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: wait;\n background-color: rgb(21 21 21 / 60%);\n border-radius: 10px;\n }\n"])), function (props) {
|
|
54
|
+
return props.width ? props.width : "440px";
|
|
55
|
+
}, function (props) {
|
|
54
56
|
return _tokens.colors[props.theme].popup.popupBoxBackground;
|
|
55
57
|
}, function (props) {
|
|
56
58
|
return _tokens.colors[props.theme].popup.messageText;
|
|
@@ -91,13 +93,15 @@ var Popup = /*#__PURE__*/function (_Component) {
|
|
|
91
93
|
loaderName = _this$props.loaderName,
|
|
92
94
|
showSharedUsers = _this$props.showSharedUsers,
|
|
93
95
|
sharedUserCount = _this$props.sharedUserCount,
|
|
94
|
-
openPopup = _this$props.openPopup
|
|
96
|
+
openPopup = _this$props.openPopup,
|
|
97
|
+
customWidth = _this$props.customWidth;
|
|
95
98
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, showPopup ? /*#__PURE__*/_react["default"].createElement(PopupBlock, {
|
|
96
|
-
theme:
|
|
99
|
+
theme: theme
|
|
97
100
|
}, /*#__PURE__*/_react["default"].createElement(PopupOverlay, {
|
|
98
|
-
theme:
|
|
101
|
+
theme: theme
|
|
99
102
|
}), /*#__PURE__*/_react["default"].createElement(PopupBox, {
|
|
100
|
-
theme:
|
|
103
|
+
theme: theme,
|
|
104
|
+
width: customWidth
|
|
101
105
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
102
106
|
className: "popup-header"
|
|
103
107
|
}, /*#__PURE__*/_react["default"].createElement("p", {
|
|
@@ -17,7 +17,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
17
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
18
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
19
19
|
var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n font-family: SFUIText-Regular;\n font-size: 12px;\n color: ", ";\n text-align: left;\n padding: 0;\n border: none;\n outline: none;\n background: transparent;\n &:hover {\n color: ", ";\n }\n width: ", ";\n border-bottom:", ";\n padding-bottom: 1px; \n"])), function (props) {
|
|
20
|
-
return props.isError ? '#FFFFFF' : props.errorStatement.length > 0 ? '#FF6C56' : '#FFFFFF';
|
|
20
|
+
return props.isError ? '#FFFFFF' : props.errorStatement.length > 0 || props.checkBaiscErrorProp ? '#FF6C56' : '#FFFFFF';
|
|
21
21
|
}, function (props) {
|
|
22
22
|
return props.theme ? "".concat(_tokens.colors[props.theme].timeCodeInput.rgbthemeColor) : 'rgb(0 206 198)';
|
|
23
23
|
}, function (props) {
|
|
@@ -53,7 +53,9 @@ var TimeCodeInput = function TimeCodeInput(_ref) {
|
|
|
53
53
|
_ref$errorStatement = _ref.errorStatement,
|
|
54
54
|
errorStatement = _ref$errorStatement === void 0 ? '' : _ref$errorStatement,
|
|
55
55
|
updateFormDataExternally = _ref.updateFormDataExternally,
|
|
56
|
-
inputTitle = _ref.inputTitle
|
|
56
|
+
inputTitle = _ref.inputTitle,
|
|
57
|
+
_ref$checkBaiscError = _ref.checkBaiscError,
|
|
58
|
+
checkBaiscError = _ref$checkBaiscError === void 0 ? false : _ref$checkBaiscError;
|
|
57
59
|
var _useState = (0, _react.useState)(inputValue || '00:00:00:00'),
|
|
58
60
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
|
59
61
|
customInputValue = _useState2[0],
|
|
@@ -172,6 +174,7 @@ var TimeCodeInput = function TimeCodeInput(_ref) {
|
|
|
172
174
|
,
|
|
173
175
|
isError: isValid,
|
|
174
176
|
maxLength: "11",
|
|
177
|
+
checkBaiscErrorProp: checkBaiscError || false,
|
|
175
178
|
errorStatement: errorStatement || ''
|
|
176
179
|
}), showError && errorStatement.length > 0 && /*#__PURE__*/_react["default"].createElement(ErrorContainer, {
|
|
177
180
|
inputFieldType: inputFieldType
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.16",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "9.1.
|
|
10
|
+
"@desynova-digital/tokens": "9.1.16",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|