@sellout/ui 0.0.300 → 0.0.301
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/build/Colors.d.ts +15 -1
- package/build/Colors.js +14 -0
- package/build/Colors.js.map +1 -1
- package/build/components/AddressSearchDropdown.d.ts +8 -2
- package/build/components/AddressSearchDropdown.js +2 -4
- package/build/components/AddressSearchDropdown.js.map +1 -1
- package/build/components/Button.d.ts +19 -2
- package/build/components/Button.js +76 -11
- package/build/components/Button.js.map +1 -1
- package/build/components/CodeInput.d.ts +14 -1
- package/build/components/CodeInput.js +30 -21
- package/build/components/CodeInput.js.map +1 -1
- package/build/components/Counter.js +6 -8
- package/build/components/Counter.js.map +1 -1
- package/build/components/Dropdown.d.ts +12 -1
- package/build/components/Dropdown.js +15 -11
- package/build/components/Dropdown.js.map +1 -1
- package/build/components/Flex.d.ts +2 -0
- package/build/components/Flex.js +3 -3
- package/build/components/Flex.js.map +1 -1
- package/build/components/Icon.d.ts +11 -1
- package/build/components/Icon.js +6 -6
- package/build/components/Icon.js.map +1 -1
- package/build/components/Input.d.ts +29 -3
- package/build/components/Input.js +38 -25
- package/build/components/Input.js.map +1 -1
- package/build/components/Label.d.ts +7 -0
- package/build/components/Label.js +6 -6
- package/build/components/Label.js.map +1 -1
- package/build/components/Loader.js.map +1 -1
- package/build/components/MaxLength.d.ts +1 -0
- package/build/components/MaxLength.js +4 -1
- package/build/components/MaxLength.js.map +1 -1
- package/build/components/PhoneNumberInput.d.ts +15 -1
- package/build/components/PhoneNumberInput.js +14 -6
- package/build/components/PhoneNumberInput.js.map +1 -1
- package/build/components/Product.d.ts +7 -2
- package/build/components/Product.js +47 -34
- package/build/components/Product.js.map +1 -1
- package/build/components/SearchDropdown.d.ts +8 -1
- package/build/components/SearchDropdown.js +12 -15
- package/build/components/SearchDropdown.js.map +1 -1
- package/build/components/SvgIcons.d.ts +15 -0
- package/build/components/SvgIcons.js +41 -0
- package/build/components/SvgIcons.js.map +1 -0
- package/build/components/SvgRendrer.d.ts +5 -0
- package/build/components/SvgRendrer.js +21 -0
- package/build/components/SvgRendrer.js.map +1 -0
- package/build/components/TextButton.d.ts +2 -0
- package/build/components/TextButton.js +6 -6
- package/build/components/TextButton.js.map +1 -1
- package/build/components/UserInfo.d.ts +10 -2
- package/build/components/UserInfo.js +9 -7
- package/build/components/UserInfo.js.map +1 -1
- package/build/components/ValidationError.d.ts +1 -0
- package/build/components/ValidationError.js +4 -1
- package/build/components/ValidationError.js.map +1 -1
- package/build/index.d.ts +2 -1
- package/build/index.js +1 -0
- package/build/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { __makeTemplateObject } from '../_virtual/_tslib.js';
|
|
1
|
+
import { __makeTemplateObject, __assign } from '../_virtual/_tslib.js';
|
|
2
2
|
import React, { useState, Fragment } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import * as Polished from 'polished';
|
|
@@ -10,27 +10,31 @@ import Flex from './Flex.js';
|
|
|
10
10
|
import MaxLength from './MaxLength.js';
|
|
11
11
|
import ValidationError from './ValidationError.js';
|
|
12
12
|
import { media } from '../utils/MediaQuery.js';
|
|
13
|
+
import SvgRenderer from './SvgRendrer.js';
|
|
13
14
|
|
|
14
15
|
var InputSizes;
|
|
15
16
|
(function (InputSizes) {
|
|
16
17
|
InputSizes["Large"] = "Large";
|
|
17
18
|
InputSizes["Regular"] = "Regular";
|
|
19
|
+
InputSizes["CustomInputHeight"] = "CustomInputHeight";
|
|
18
20
|
})(InputSizes || (InputSizes = {}));
|
|
19
21
|
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: ", ";\n margin: ", ";\n"], ["\n width: ", ";\n margin: ", ";\n"])), function (props) { return props.width; }, function (props) { return props.margin; });
|
|
20
22
|
var IncrementButton = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 22px;\n padding: 5px 14px;\n cursor: pointer;\n border: none;\n background-color: #f0f0f0;\n"], ["\n font-size: 22px;\n padding: 5px 14px;\n cursor: pointer;\n border: none;\n background-color: #f0f0f0;\n"])));
|
|
21
|
-
var Form = styled.form(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n overflow: hidden;\n background-color: ", ";\n\n > * {\n background-color: ", ";\n }\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
|
|
22
|
-
";\n overflow: hidden;\n background-color: ",
|
|
23
|
+
var Form = styled.form(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ", ";\n\n border-color: ", ";\n overflow: hidden;\n background-color: ", ";\n\n > * {\n background-color: ", ";\n }\n"], ["\n width: ", ";\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ",
|
|
24
|
+
";\n\n border-color: ", ";\n overflow: hidden;\n background-color: ",
|
|
23
25
|
";\n\n > * {\n background-color: ",
|
|
24
26
|
";\n }\n"])), function (props) { return props.width; }, function (props) {
|
|
27
|
+
if (props.onFocusedColor && props.focused)
|
|
28
|
+
return Colors.HeadingSecondary;
|
|
25
29
|
if (props.focused)
|
|
26
30
|
return Colors.Grey4;
|
|
27
31
|
if (props.hovered)
|
|
28
32
|
return Polished.darken(0.05, Colors.Grey5);
|
|
29
|
-
return Colors.Grey5;
|
|
30
|
-
}, function (props) {
|
|
33
|
+
return !props.focused && props.onFocusedColor ? Colors.SecondaryStroke : Colors.Grey5;
|
|
34
|
+
}, function (props) { return (props.validationError && props.validationDarkThemeBorderColor ? Colors.ErrorRed : ""); }, function (props) {
|
|
31
35
|
return props.disabled ? Colors.Grey6 + " !important" : null;
|
|
32
36
|
}, function (props) {
|
|
33
|
-
return props.disabled ? Colors.Grey6 + " !important" : null;
|
|
37
|
+
return props.disabled && props.disableDarkThemeBg ? Colors.InteractiveBGSecondary + " !important" : (props.disabled ? Colors.Grey6 + " !important" : null);
|
|
34
38
|
});
|
|
35
39
|
var Button = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n height: ", ";\n width: ", ";\n border-radius: 0 10px 10px 0;\n top: -1px;\n right: ", ";\n transition: all 0.2s;\n\n &:hover {\n cursor: ", ";\n }\n\n &:active {\n cursor: ", ";\n }\n"], ["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ", ";\n height: ",
|
|
36
40
|
";\n width: ",
|
|
@@ -46,13 +50,14 @@ var Button = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateOb
|
|
|
46
50
|
if (props.size === InputSizes.Regular)
|
|
47
51
|
return "40px";
|
|
48
52
|
return null;
|
|
49
|
-
}, function (props) { return (props.codeApply ? "
|
|
53
|
+
}, function (props) { return (props.codeApply ? "0px" : "-1px"); }, function (props) { return (props.onClick ? "pointer" : null); }, function (props) { return (props.onClick ? "pointer" : null); });
|
|
50
54
|
var IconContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n"])));
|
|
51
55
|
var TextContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n font-size: 1.7rem;\n text-decoration: underline;\n font-weight: 500;\n"], ["\n color: ", ";\n font-size: 1.7rem;\n text-decoration: underline;\n font-weight: 500;\n"])), function (props) { return (props.canSubmit ? Colors.Orange : Colors.Orange); });
|
|
52
|
-
var
|
|
53
|
-
var
|
|
56
|
+
var SvgLeftContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"])), Colors.SurfaceTertiary);
|
|
57
|
+
var LeftContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ", ";\n"])), Colors.White);
|
|
58
|
+
var RightContainer = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n width: ", ";\n top: -1px;\n right: -1px;\n\n &:hover {\n cursor: ", ";\n }\n"], ["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: ",
|
|
54
59
|
";\n width: ",
|
|
55
|
-
";\n top: -1px;\n right: -1px;\n
|
|
60
|
+
";\n top: -1px;\n right: -1px;\n\n &:hover {\n cursor: ", ";\n }\n"])), function (props) {
|
|
56
61
|
if (props.size === InputSizes.Large)
|
|
57
62
|
return "50px";
|
|
58
63
|
if (props.size === InputSizes.Regular)
|
|
@@ -64,20 +69,25 @@ var RightContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTe
|
|
|
64
69
|
if (props.size === InputSizes.Regular)
|
|
65
70
|
return "40px";
|
|
66
71
|
return null;
|
|
67
|
-
},
|
|
68
|
-
var Spacer = styled.div(
|
|
69
|
-
var InputStyled = styled.input(
|
|
72
|
+
}, function (props) { return (props.onClick ? "pointer" : null); });
|
|
73
|
+
var Spacer = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n width: ", ";\n background-color: ", ";\n"], ["\n width: ", ";\n background-color: ", ";\n"])), function (props) { return (props.incrementButton ? "0px" : "50px"); }, Colors.White);
|
|
74
|
+
var InputStyled = styled.input(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ", ";\n width: 100%;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ", ";\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ", ";\n\n ", ";\n"], ["\n background-color: ", ";\n color: ",
|
|
75
|
+
";\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ",
|
|
70
76
|
";\n width: 100%;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ", ";\n transition: all 0.2s;\n padding: ", ";\n\n ::placeholder {\n color: ", ";\n }\n\n ",
|
|
71
77
|
";\n\n ",
|
|
72
|
-
";\n"])),
|
|
78
|
+
";\n"])), function (props) { return props.backgroundColor || Colors.White; }, function (props) {
|
|
79
|
+
return props.textColor || (props.disabled ? Colors.Grey4 : Colors.Grey1);
|
|
80
|
+
}, function (props) {
|
|
73
81
|
if (props.inputSize === InputSizes.Large)
|
|
74
82
|
return "48px";
|
|
75
83
|
if (props.inputSize === InputSizes.Regular)
|
|
76
84
|
return "38px";
|
|
85
|
+
if (props.inputSize === InputSizes.CustomInputHeight)
|
|
86
|
+
return "56px";
|
|
77
87
|
return null;
|
|
78
|
-
}, function (props) { return (props.hasIcon ? "8px" : "16px"); }, function (props) { return props.padding; }, Colors.Grey4, media.mobile(
|
|
88
|
+
}, function (props) { return (props.hasIcon ? "8px" : "16px"); }, function (props) { return props.padding; }, function (props) { return props.placeholderColor || Colors.Grey4; }, media.mobile(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n font-size: 1.6rem;\n "], ["\n font-size: 1.6rem;\n "]))), media.desktop(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n font-size: ", "\n"], ["\n font-size: ", "\n"])), function (props) { return props.mediaDesktopFontSize || "1.4rem"; }));
|
|
79
89
|
function Input(_a, inputRef) {
|
|
80
|
-
var autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, icon = _a.icon, iconColor = _a.iconColor, _b = _a.size, size = _b === void 0 ? InputSizes.Regular : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, onClear = _a.onClear, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, padding = _a.padding, width = _a.width, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, iconConditionalColor = _a.iconConditionalColor, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.incrementButton, incrementButton = _f === void 0 ? false : _f, handleIncrement = _a.handleIncrement, handleDecrement = _a.handleDecrement, codeApply = _a.codeApply, discountCode = _a.discountCode;
|
|
90
|
+
var autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, icon = _a.icon, iconColor = _a.iconColor, _b = _a.size, size = _b === void 0 ? InputSizes.Regular : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, onClear = _a.onClear, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, padding = _a.padding, width = _a.width, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, iconConditionalColor = _a.iconConditionalColor, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.incrementButton, incrementButton = _f === void 0 ? false : _f, handleIncrement = _a.handleIncrement, handleDecrement = _a.handleDecrement, codeApply = _a.codeApply, discountCode = _a.discountCode, bgColor = _a.bgColor, labelColor = _a.labelColor, fontSize = _a.fontSize, fontFamily = _a.fontFamily, fontWeight = _a.fontWeight, marginBottam = _a.marginBottam, placeholderTextColor = _a.placeholderTextColor, iconProps = _a.iconProps, letterSpacing = _a.letterSpacing, onFocusedColor = _a.onFocusedColor, svgIconName = _a.svgIconName, svgWidth = _a.svgWidth, svgHeight = _a.svgHeight, disableDarkThemeBg = _a.disableDarkThemeBg, validationDarkThemeBorderColor = _a.validationDarkThemeBorderColor, mediaDesktopFontSize = _a.mediaDesktopFontSize, maxLengthDisabled = _a.maxLengthDisabled, disableValidationErrorBox = _a.disableValidationErrorBox;
|
|
81
91
|
var _g = useState(false), hovered = _g[0], setHovered = _g[1];
|
|
82
92
|
var _h = useState(false), focused = _h[0], setFocused = _h[1];
|
|
83
93
|
var submit = function (event) {
|
|
@@ -105,10 +115,10 @@ function Input(_a, inputRef) {
|
|
|
105
115
|
})();
|
|
106
116
|
return (React.createElement(Container, { width: width, margin: margin },
|
|
107
117
|
React.createElement(Flex, { justify: "space-between" },
|
|
108
|
-
label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
|
|
109
|
-
maxLength && (React.createElement(MaxLength, { value: value, maxLength: maxLength }))),
|
|
118
|
+
label && (React.createElement(Label, { text: label, subText: subLabel, labelColor: labelColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: fontFamily, marginBottam: marginBottam, letterSpacing: letterSpacing, tip: tip })),
|
|
119
|
+
maxLength && (React.createElement(MaxLength, { value: value, maxLength: maxLength, maxLengthDisabled: maxLengthDisabled }))),
|
|
110
120
|
React.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); }, width: width, disabled: disabled, noValidate // disables default html5 validation
|
|
111
|
-
: true },
|
|
121
|
+
: true, validationError: validationError, onFocusedColor: onFocusedColor, disableDarkThemeBg: disableDarkThemeBg, validationDarkThemeBorderColor: validationDarkThemeBorderColor },
|
|
112
122
|
icon && (React.createElement(LeftContainer, { size: size },
|
|
113
123
|
React.createElement(IconContainer, null,
|
|
114
124
|
React.createElement(Icon, { icon: icon, size: iconSize, color: (function () {
|
|
@@ -120,6 +130,8 @@ function Input(_a, inputRef) {
|
|
|
120
130
|
? Colors.Grey3
|
|
121
131
|
: Colors.Grey4;
|
|
122
132
|
})() })))),
|
|
133
|
+
svgIconName && (React.createElement(SvgLeftContainer, null,
|
|
134
|
+
React.createElement(SvgRenderer, { iconName: svgIconName, width: svgWidth, height: svgHeight, style: { margin: '2px 0px' } }))),
|
|
123
135
|
incrementButton && (React.createElement(IncrementButton, { onClick: handleDecrement }, "-")),
|
|
124
136
|
React.createElement(InputStyled, { ref: inputRef, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, onChange: function (e) {
|
|
125
137
|
if (maxLength && e.currentTarget.value.length > maxLength) ;
|
|
@@ -142,7 +154,7 @@ function Input(_a, inputRef) {
|
|
|
142
154
|
setHovered(false);
|
|
143
155
|
if (onMouseLeave)
|
|
144
156
|
onMouseLeave(event);
|
|
145
|
-
}, padding: padding, inputSize: size, hasIcon: Boolean(icon) }),
|
|
157
|
+
}, padding: padding, inputSize: size, hasIcon: Boolean(icon), backgroundColor: bgColor, textColor: labelColor, placeholderColor: placeholderTextColor, mediaDesktopFontSize: mediaDesktopFontSize }),
|
|
146
158
|
incrementButton && (React.createElement(IncrementButton, { onClick: handleIncrement }, "+")),
|
|
147
159
|
(function () {
|
|
148
160
|
if (onSubmit) {
|
|
@@ -152,9 +164,10 @@ function Input(_a, inputRef) {
|
|
|
152
164
|
if (loading) {
|
|
153
165
|
return (React.createElement(Loader, { size: LoaderSizes.VerySmall, color: Colors.Orange }));
|
|
154
166
|
}
|
|
167
|
+
var iconstyles = iconProps ? iconProps : {};
|
|
155
168
|
return (React.createElement(React.Fragment, null,
|
|
156
|
-
!codeApply && (React.createElement(Icon, { icon: Icons.
|
|
157
|
-
codeApply && (React.createElement(TextContainer, { canSubmit: canSubmit }, discountCode ? "
|
|
169
|
+
!codeApply && (React.createElement(Icon, __assign({ icon: Icons.RightArrowRegular, color: canSubmit ? Colors.Orange : Colors.Grey5, hoverColor: "gray", size: submitIconSize }, iconstyles))),
|
|
170
|
+
codeApply && (React.createElement(TextContainer, { canSubmit: canSubmit }, discountCode ? (React.createElement(Icon, { icon: Icons.Cancel, color: Colors.HeadingSecondary, size: "18", marginRight: "8px", padding: "0px 10px", backgroundColor: Colors.SurfaceTertiary, borderRadius: "8px", width: "29px", height: "40px", top: "4px", display: "flex", alignItems: "center", justifyContent: "center" })) : (React.createElement(Icon, { icon: Icons.RightArrowRegular, color: Colors.HeadingSecondary, size: "18", marginRight: "8px", padding: "0px 10px", backgroundColor: validationError ? Colors.ErrorRed : Colors.InteractiveBGPrimary, borderRadius: "8px", width: "29px", height: "40px", top: "4px", display: "flex", alignItems: "center", justifyContent: "center" }))))));
|
|
158
171
|
})())));
|
|
159
172
|
}
|
|
160
173
|
if (loading) {
|
|
@@ -167,14 +180,14 @@ function Input(_a, inputRef) {
|
|
|
167
180
|
return (React.createElement(Fragment, null,
|
|
168
181
|
React.createElement(Spacer, { incrementButton: true }),
|
|
169
182
|
React.createElement(RightContainer, { onClick: function () { return onClear(); }, size: size },
|
|
170
|
-
React.createElement(Icon, { icon: Icons.CancelCircle, color: Colors.Grey4, hoverColor: Colors.Grey3, size: iconSize }))));
|
|
183
|
+
React.createElement(Icon, __assign({ icon: (iconProps === null || iconProps === void 0 ? void 0 : iconProps.icon) ? iconProps.icon : Icons.CancelCircle, color: Colors.Grey4, hoverColor: Colors.Grey3, size: iconSize }, iconProps)))));
|
|
171
184
|
}
|
|
172
185
|
return React.createElement(Spacer, { incrementButton: true });
|
|
173
186
|
})()),
|
|
174
|
-
validationError && React.createElement(ValidationError, { validationError: validationError })));
|
|
187
|
+
validationError && React.createElement(ValidationError, { validationError: validationError, disableValidationErrorBox: disableValidationErrorBox })));
|
|
175
188
|
}
|
|
176
189
|
var Input$1 = React.forwardRef(Input);
|
|
177
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
190
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
178
191
|
|
|
179
192
|
export { InputSizes, InputStyled, Input$1 as default };
|
|
180
193
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../src/components/Input.tsx"],"sourcesContent":["import React, { Fragment, useState } from \"react\";\nimport styled from \"styled-components\";\nimport * as Polished from \"polished\";\nimport { Colors } from \"../Colors\";\nimport Icon, { Icons } from \"./Icon\";\nimport Loader, { LoaderSizes } from \"./Loader\";\nimport Label from \"./Label\";\nimport Flex from \"./Flex\";\nimport MaxLength from \"./MaxLength\";\nimport ValidationError from \"./ValidationError\";\nimport { media } from \"../utils/MediaQuery\";\n\nexport enum InputSizes {\n Large = \"Large\",\n Regular = \"Regular\",\n}\n\ntype ContainerProps = {\n width?: string;\n margin?: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n width: ${(props) => props.width};\n margin: ${(props) => props.margin};\n`;\n\nconst IncrementButton = styled.button`\n font-size: 22px;\n padding: 5px 14px;\n cursor: pointer;\n border: none;\n background-color: #f0f0f0;\n`;\n\ntype FormProps = {\n hovered: boolean;\n focused: boolean;\n width?: string;\n disabled: boolean;\n};\n\nconst Form = styled.form<FormProps>`\n width: ${(props) => props.width};\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ${(props) => {\n if (props.focused) return Colors.Grey4;\n if (props.hovered) return Polished.darken(0.05, Colors.Grey5);\n return Colors.Grey5;\n }};\n overflow: hidden;\n background-color: ${(props) =>\n props.disabled ? `${Colors.Grey6} !important` : null};\n\n > * {\n background-color: ${(props) =>\n props.disabled ? `${Colors.Grey6} !important` : null};\n }\n`;\n\ntype ButtonProps = {\n canSubmit: boolean;\n size: InputSizes;\n codeApply?: string;\n};\n\nconst Button = styled.div<ButtonProps>`\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${Colors.White};\n height: ${(props) => {\n if (props.size === InputSizes.Large) return \"50px\";\n if (props.size === InputSizes.Regular) return \"40px\";\n return null;\n }};\n width: ${(props) => {\n if (props.size === InputSizes.Large) return \"50px\";\n if (props.size === InputSizes.Regular) return \"40px\";\n return null;\n }};\n border-radius: 0 10px 10px 0;\n top: -1px;\n right: ${(props) => (props.codeApply ? \"17px\" : \"-1px\")};\n transition: all 0.2s;\n\n &:hover {\n cursor: ${(props) => (props.onClick ? \"pointer\" : null)};\n }\n\n &:active {\n cursor: ${(props) => (props.onClick ? \"pointer\" : null)};\n }\n`;\n\nconst IconContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n`;\n\nconst TextContainer = styled.div<any>`\n color: ${(props) => (props.canSubmit ? Colors.Orange : Colors.Orange)};\n font-size: 1.7rem;\n text-decoration: underline;\n font-weight: 500;\n`;\n\ntype SmallContainerProps = {\n size: InputSizes;\n};\n\nconst LeftContainer = styled.div<SmallContainerProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ${Colors.White};\n`;\n\nconst RightContainer = styled.div<SmallContainerProps>`\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: ${(props) => {\n if (props.size === InputSizes.Large) return \"50px\";\n if (props.size === InputSizes.Regular) return \"40px\";\n return null;\n }};\n width: ${(props) => {\n if (props.size === InputSizes.Large) return \"50px\";\n if (props.size === InputSizes.Regular) return \"40px\";\n return null;\n }};\n top: -1px;\n right: -1px;\n background-color: ${Colors.White};\n\n &:hover {\n cursor: ${(props) => (props.onClick ? \"pointer\" : null)};\n }\n`;\n\ntype SpacerProps = {\n incrementButton?: boolean;\n};\n\nconst Spacer = styled.div<SpacerProps>`\n width: ${(props) => (props.incrementButton ? \"0px\" : \"50px\")};\n background-color: ${Colors.White};\n`;\n\ntype StyledInputProps = {\n padding?: string;\n inputSize?: InputSizes;\n disabled: boolean;\n hasIcon: boolean;\n};\n\nexport const InputStyled = styled.input<StyledInputProps>`\n background-color: ${Colors.White};\n color: ${(props) => (props.disabled ? Colors.Grey4 : Colors.Grey1)};\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ${(props) => {\n if (props.inputSize === InputSizes.Large) return \"48px\";\n if (props.inputSize === InputSizes.Regular) return \"38px\";\n return null;\n }};\n width: 100%;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ${(props) => (props.hasIcon ? \"8px\" : \"16px\")};\n transition: all 0.2s;\n padding: ${(props) => props.padding};\n\n ::placeholder {\n color: ${Colors.Grey4};\n }\n\n ${media.mobile`\n font-size: 1.6rem;\n`};\n\n ${media.desktop`\n font-size: 1.4rem;\n`};\n`;\n\nexport type InputProps = {\n inputRef?: React.Ref<HTMLInputElement>;\n autoFocus?: boolean | undefined;\n placeholder?: string;\n value: string;\n defaultValue?: string;\n icon?: any;\n iconColor?: Colors;\n type?: string;\n size?: InputSizes;\n onMouseEnter?: any;\n onMouseLeave?: any;\n onChange?: any;\n onFocus?: any;\n onBlur?: any;\n onSubmit?: Function;\n onClear?: Function;\n canSubmit?: boolean;\n loading?: boolean;\n margin?: string;\n padding?: string;\n width?: string;\n onEnter?: Function;\n label?: string;\n subLabel?: string;\n tip?: string;\n maxLength?: number;\n iconConditionalColor?: any;\n validationError?: string;\n disabled?: boolean;\n incrementButton?: boolean;\n handleIncrement?: any;\n handleDecrement?: any;\n codeApply?: string;\n discountCode?: string;\n};\n\nfunction Input(\n {\n autoFocus,\n placeholder,\n value,\n defaultValue,\n icon,\n iconColor,\n size = InputSizes.Regular,\n type = \"text\",\n onMouseEnter,\n onMouseLeave,\n onChange,\n onFocus,\n onBlur,\n onSubmit,\n onClear,\n canSubmit = true,\n loading,\n margin,\n padding,\n width,\n onEnter,\n label,\n subLabel,\n tip,\n maxLength,\n iconConditionalColor,\n validationError,\n disabled = false,\n incrementButton = false,\n handleIncrement,\n handleDecrement,\n codeApply,\n discountCode,\n }: InputProps,\n inputRef: any\n) {\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n\n const submit = (event: any) => {\n event.preventDefault();\n if (onSubmit && !loading) {\n onSubmit();\n } else if (onEnter && !loading) {\n onEnter();\n }\n };\n\n const iconSize = (() => {\n if (size === InputSizes.Large) return 16;\n if (size === InputSizes.Regular) return 14;\n return 14;\n })();\n\n const submitIconSize = (() => {\n if (size === InputSizes.Large) return 18;\n if (size === InputSizes.Regular) return 16;\n return 16;\n })();\n\n return (\n <Container width={width} margin={margin}>\n <Flex justify=\"space-between\">\n {label && <Label text={label} subText={subLabel} tip={tip} />}\n {maxLength && (\n <MaxLength value={value as string} maxLength={maxLength} />\n )}\n </Flex>\n\n <Form\n hovered={hovered}\n focused={focused}\n onSubmit={(event) => submit(event)}\n width={width}\n disabled={disabled}\n noValidate // disables default html5 validation\n >\n {icon && (\n <LeftContainer size={size}>\n <IconContainer>\n <Icon\n icon={icon}\n size={iconSize}\n color={(() => {\n if (iconColor) return iconColor;\n return value\n ? iconConditionalColor || Colors.Grey1\n : focused\n ? Colors.Grey3\n : Colors.Grey4;\n })()}\n />\n </IconContainer>\n </LeftContainer>\n )}\n {incrementButton && (\n <IncrementButton onClick={handleDecrement}>-</IncrementButton>\n )}\n <InputStyled\n ref={inputRef}\n disabled={disabled}\n autoFocus={autoFocus}\n placeholder={placeholder}\n value={value}\n defaultValue={defaultValue}\n type={type}\n onChange={(e: React.FormEvent<HTMLInputElement>) => {\n if (maxLength && e.currentTarget.value.length > maxLength) {\n // do nothing, the max length has been reached\n } else {\n onChange(e);\n }\n }}\n onFocus={(event) => {\n setFocused(true);\n if (onFocus) onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n if (onFocus) onBlur(event);\n }}\n onMouseEnter={(event: any) => {\n setHovered(true);\n if (onMouseEnter) onMouseEnter(event);\n }}\n onMouseLeave={(event: any) => {\n setHovered(false);\n if (onMouseLeave) onMouseLeave(event);\n }}\n padding={padding}\n inputSize={size}\n hasIcon={Boolean(icon)}\n />\n {incrementButton && (\n <IncrementButton onClick={handleIncrement}>+</IncrementButton>\n )}\n\n {(() => {\n if (onSubmit) {\n return (\n <Fragment>\n <Spacer incrementButton />\n <Button\n canSubmit={canSubmit}\n onClick={(event) => submit(event)}\n size={size}\n codeApply={codeApply}\n >\n {(() => {\n if (loading) {\n return (\n <Loader\n size={LoaderSizes.VerySmall}\n color={Colors.Orange}\n />\n );\n }\n\n return (\n <>\n {!codeApply && (\n <Icon\n icon={Icons.RightChevronCircle}\n color={canSubmit ? Colors.Orange : Colors.Grey5}\n size={submitIconSize}\n />\n )}\n {codeApply && (\n <TextContainer\n canSubmit={canSubmit}\n >\n {discountCode ? \"Clear\" : \"Apply\"}\n </TextContainer>\n )}\n </>\n );\n })()}\n </Button>\n </Fragment>\n );\n }\n\n if (loading) {\n return (\n <Fragment>\n <Spacer incrementButton />\n <RightContainer size={size}>\n <Loader size={LoaderSizes.SuperSmall} color={Colors.Orange} />\n </RightContainer>\n </Fragment>\n );\n }\n\n if (Boolean(value) && onClear) {\n return (\n <Fragment>\n <Spacer incrementButton />\n <RightContainer onClick={() => onClear()} size={size}>\n <Icon\n icon={Icons.CancelCircle}\n color={Colors.Grey4}\n hoverColor={Colors.Grey3}\n size={iconSize}\n />\n </RightContainer>\n </Fragment>\n );\n }\n\n return <Spacer incrementButton />;\n })()}\n </Form>\n {validationError && <ValidationError validationError={validationError} />}\n </Container>\n );\n}\n\nexport default React.forwardRef(Input);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../src/components/Input.tsx"],"sourcesContent":["import React, { Fragment, useState } from \"react\";\nimport styled from \"styled-components\";\nimport * as Polished from \"polished\";\nimport { Colors } from \"../Colors\";\nimport Icon, { IconProps, Icons } from \"./Icon\";\nimport Loader, { LoaderSizes } from \"./Loader\";\nimport Label from \"./Label\";\nimport Flex from \"./Flex\";\nimport MaxLength from \"./MaxLength\";\nimport ValidationError from \"./ValidationError\";\nimport { media } from \"../utils/MediaQuery\";\nimport SvgRenderer from \"./SvgRendrer\";\n\nexport enum InputSizes {\n Large = \"Large\",\n Regular = \"Regular\",\n CustomInputHeight=\"CustomInputHeight\"\n}\n\ntype ContainerProps = {\n width?: string;\n margin?: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n width: ${(props) => props.width};\n margin: ${(props) => props.margin};\n`;\n\nconst IncrementButton = styled.button`\n font-size: 22px;\n padding: 5px 14px;\n cursor: pointer;\n border: none;\n background-color: #f0f0f0;\n`;\n\ntype FormProps = {\n hovered: boolean;\n focused: boolean;\n width?: string;\n disabled: boolean;\n validationError?: string;\n onFocusedColor?:boolean;\n disableDarkThemeBg?:boolean;\n validationDarkThemeBorderColor?:boolean;\n};\n\nconst Form = styled.form<FormProps>`\n width: ${(props) => props.width};\n display: flex;\n flex-direction: row;\n position: relative;\n border-radius: 10px;\n transition: all 0.2s;\n border: 1px solid\n ${(props) => {\n if (props.onFocusedColor && props.focused) return Colors.HeadingSecondary;\n if (props.focused) return Colors.Grey4;\n if (props.hovered) return Polished.darken(0.05, Colors.Grey5);\n return !props.focused && props.onFocusedColor ?Colors.SecondaryStroke :Colors.Grey5;\n }};\n\n border-color: ${(props) => (props.validationError && props.validationDarkThemeBorderColor ? Colors.ErrorRed : \"\")};\n overflow: hidden;\n background-color: ${(props) =>\n props.disabled ? `${Colors.Grey6} !important` : null};\n\n > * {\n background-color: ${(props) =>\n props.disabled && props.disableDarkThemeBg ? `${Colors.InteractiveBGSecondary} !important` : (props.disabled ?`${Colors.Grey6} !important` :null)};\n }\n`;\n\ntype ButtonProps = {\n canSubmit: boolean;\n size: InputSizes;\n codeApply?: string;\n};\n\nconst Button = styled.div<ButtonProps>`\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${Colors.White};\n height: ${(props) => {\n if (props.size === InputSizes.Large) return \"50px\";\n if (props.size === InputSizes.Regular) return \"40px\";\n return null;\n }};\n width: ${(props) => {\n if (props.size === InputSizes.Large) return \"50px\";\n if (props.size === InputSizes.Regular) return \"40px\";\n return null;\n }};\n border-radius: 0 10px 10px 0;\n top: -1px;\n right: ${(props) => (props.codeApply ? \"0px\" : \"-1px\")};\n transition: all 0.2s;\n\n &:hover {\n cursor: ${(props) => (props.onClick ? \"pointer\" : null)};\n }\n\n &:active {\n cursor: ${(props) => (props.onClick ? \"pointer\" : null)};\n }\n`;\n\nconst IconContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n`;\n\nconst TextContainer = styled.div<any>`\n color: ${(props) => (props.canSubmit ? Colors.Orange : Colors.Orange)};\n font-size: 1.7rem;\n text-decoration: underline;\n font-weight: 500;\n`;\n\ntype SmallContainerProps = {\n size: InputSizes;\n};\n\nconst SvgLeftContainer = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ${Colors.SurfaceTertiary};\n`;\n\nconst LeftContainer = styled.div<SmallContainerProps>`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-left: 16px;\n top: 0px;\n left: 0px;\n background-color: ${Colors.White};\n`;\n\nconst RightContainer = styled.div<SmallContainerProps>`\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: ${(props) => {\n if (props.size === InputSizes.Large) return \"50px\";\n if (props.size === InputSizes.Regular) return \"40px\";\n return null;\n }};\n width: ${(props) => {\n if (props.size === InputSizes.Large) return \"50px\";\n if (props.size === InputSizes.Regular) return \"40px\";\n return null;\n }};\n top: -1px;\n right: -1px;\n\n &:hover {\n cursor: ${(props) => (props.onClick ? \"pointer\" : null)};\n }\n`;\n\ntype SpacerProps = {\n incrementButton?: boolean;\n};\n\nconst Spacer = styled.div<SpacerProps>`\n width: ${(props) => (props.incrementButton ? \"0px\" : \"50px\")};\n background-color: ${Colors.White};\n`;\n\ntype StyledInputProps = {\n padding?: string;\n inputSize?: InputSizes;\n disabled: boolean;\n hasIcon: boolean;\n backgroundColor?: string;\n textColor?: string;\n fontSize?: string;\n fontWeight?: string;\n placeholderColor?: string;\n mediaDesktopFontSize?:string;\n};\n\nexport const InputStyled = styled.input<StyledInputProps>`\n background-color: ${(props) => props.backgroundColor || Colors.White};\n color: ${(props) =>\n props.textColor || (props.disabled ? Colors.Grey4 : Colors.Grey1)};\n outline: none;\n border: 0px;\n /* border-radius: 10px; */\n height: ${(props) => {\n if (props.inputSize === InputSizes.Large) return \"48px\";\n if (props.inputSize === InputSizes.Regular) return \"38px\";\n if (props.inputSize === InputSizes.CustomInputHeight) return \"56px\";\n return null;\n }};\n width: 100%;\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-weight: 500;\n padding: 0px;\n padding-left: ${(props) => (props.hasIcon ? \"8px\" : \"16px\")};\n transition: all 0.2s;\n padding: ${(props) => props.padding};\n\n ::placeholder {\n color: ${(props) => props.placeholderColor || Colors.Grey4};\n }\n\n ${media.mobile`\n font-size: 1.6rem;\n `};\n\n ${media.desktop`\n font-size: ${(props) => props.mediaDesktopFontSize || \"1.4rem\"}\n`};\n`;\n\nexport type InputProps = {\n inputRef?: React.Ref<HTMLInputElement>;\n autoFocus?: boolean | undefined;\n placeholder?: string;\n value: string;\n defaultValue?: string;\n icon?: any;\n iconColor?: Colors;\n type?: string;\n size?: InputSizes;\n onMouseEnter?: any;\n onMouseLeave?: any;\n onChange?: any;\n onFocus?: any;\n onBlur?: any;\n onSubmit?: Function;\n onClear?: Function;\n canSubmit?: boolean;\n loading?: boolean;\n margin?: string;\n padding?: string;\n width?: string;\n onEnter?: Function;\n label?: string | any;\n subLabel?: string;\n tip?: string;\n maxLength?: number;\n iconConditionalColor?: any;\n validationError?: string | any;\n disabled?: boolean;\n incrementButton?: boolean;\n handleIncrement?: any;\n handleDecrement?: any;\n codeApply?: string;\n discountCode?: string;\n bgColor?: string;\n labelColor?: string;\n fontSize?: string;\n fontFamily?: string;\n fontWeight?: string;\n placeholderTextColor?: string;\n marginBottam?: string;\n iconProps?: Partial<IconProps>;\n letterSpacing?: string;\n onFocusedColor?:boolean;\n svgIconName?:string;\n svgWidth?:string;\n svgHeight?:string;\n disableDarkThemeBg?:boolean;\n validationDarkThemeBorderColor?:boolean;\n mediaDesktopFontSize?:string;\n maxLengthDisabled?:boolean;\n disableValidationErrorBox?:boolean;\n};\n\nfunction Input(\n {\n autoFocus,\n placeholder,\n value,\n defaultValue,\n icon,\n iconColor,\n size = InputSizes.Regular,\n type = \"text\",\n onMouseEnter,\n onMouseLeave,\n onChange,\n onFocus,\n onBlur,\n onSubmit,\n onClear,\n canSubmit = true,\n loading,\n margin,\n padding,\n width,\n onEnter,\n label,\n subLabel,\n tip,\n maxLength,\n iconConditionalColor,\n validationError,\n disabled = false,\n incrementButton = false,\n handleIncrement,\n handleDecrement,\n codeApply,\n discountCode,\n bgColor,\n labelColor,\n fontSize,\n fontFamily,\n fontWeight,\n marginBottam,\n placeholderTextColor,\n iconProps,\n letterSpacing,\n onFocusedColor,\n svgIconName,\n svgWidth,\n svgHeight,\n disableDarkThemeBg,\n validationDarkThemeBorderColor,\n mediaDesktopFontSize,\n maxLengthDisabled,\n disableValidationErrorBox\n }: InputProps,\n inputRef: any\n) {\n const [hovered, setHovered] = useState(false);\n const [focused, setFocused] = useState(false);\n\n const submit = (event: any) => {\n event.preventDefault();\n if (onSubmit && !loading) {\n onSubmit();\n } else if (onEnter && !loading) {\n onEnter();\n }\n };\n\n const iconSize = (() => {\n if (size === InputSizes.Large) return 16;\n if (size === InputSizes.Regular) return 14;\n return 14;\n })();\n\n const submitIconSize = (() => {\n if (size === InputSizes.Large) return 18;\n if (size === InputSizes.Regular) return 16;\n return 16;\n })();\n\n return (\n <Container width={width} margin={margin}>\n <Flex justify=\"space-between\">\n {label && (\n <Label\n text={label}\n subText={subLabel}\n labelColor={labelColor}\n fontSize={fontSize}\n fontWeight={fontWeight}\n fontFamily={fontFamily}\n marginBottam={marginBottam}\n letterSpacing={letterSpacing}\n tip={tip}\n />\n )}\n {maxLength && (\n <MaxLength value={value as string} maxLength={maxLength} maxLengthDisabled={maxLengthDisabled}/>\n )}\n </Flex>\n\n <Form\n hovered={hovered}\n focused={focused}\n onSubmit={(event) => submit(event)}\n width={width}\n disabled={disabled}\n noValidate // disables default html5 validation\n validationError={validationError}\n onFocusedColor={onFocusedColor}\n disableDarkThemeBg={disableDarkThemeBg}\n validationDarkThemeBorderColor={validationDarkThemeBorderColor}\n >\n {icon && (\n <LeftContainer size={size}>\n <IconContainer>\n <Icon\n icon={icon}\n size={iconSize}\n color={(() => {\n if (iconColor) return iconColor;\n return value\n ? iconConditionalColor || Colors.Grey1\n : focused\n ? Colors.Grey3\n : Colors.Grey4;\n })()}\n />\n </IconContainer>\n </LeftContainer>\n )}\n {svgIconName && (\n <SvgLeftContainer>\n <SvgRenderer\n iconName={svgIconName}\n width={svgWidth}\n height={svgHeight} \n style={{ margin: '2px 0px'}}\n />\n </SvgLeftContainer>\n )}\n {incrementButton && (\n <IncrementButton onClick={handleDecrement}>-</IncrementButton>\n )}\n <InputStyled\n ref={inputRef}\n disabled={disabled}\n autoFocus={autoFocus}\n placeholder={placeholder}\n value={value}\n defaultValue={defaultValue}\n type={type}\n onChange={(e: React.FormEvent<HTMLInputElement>) => {\n if (maxLength && e.currentTarget.value.length > maxLength) {\n // do nothing, the max length has been reached\n } else {\n onChange(e);\n }\n }}\n onFocus={(event) => {\n setFocused(true);\n if (onFocus) onFocus(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n if (onFocus) onBlur(event);\n }}\n onMouseEnter={(event: any) => {\n setHovered(true);\n if (onMouseEnter) onMouseEnter(event);\n }}\n onMouseLeave={(event: any) => {\n setHovered(false);\n if (onMouseLeave) onMouseLeave(event);\n }}\n padding={padding}\n inputSize={size}\n hasIcon={Boolean(icon)}\n backgroundColor={bgColor}\n textColor={labelColor}\n placeholderColor={placeholderTextColor}\n mediaDesktopFontSize={mediaDesktopFontSize}\n />\n {incrementButton && (\n <IncrementButton onClick={handleIncrement}>+</IncrementButton>\n )}\n\n {(() => {\n if (onSubmit) {\n return (\n <Fragment>\n <Spacer incrementButton />\n <Button\n canSubmit={canSubmit}\n onClick={(event) => submit(event)}\n size={size}\n codeApply={codeApply}\n >\n {(() => {\n if (loading) {\n return (\n <Loader\n size={LoaderSizes.VerySmall}\n color={Colors.Orange}\n />\n );\n }\n const iconstyles = iconProps ? iconProps : {};\n return (\n <>\n {!codeApply && (\n <Icon\n icon={Icons.RightArrowRegular}\n color={canSubmit ? Colors.Orange : Colors.Grey5}\n hoverColor=\"gray\"\n size={submitIconSize}\n {...iconstyles}\n />\n )}\n {codeApply && (\n <TextContainer canSubmit={canSubmit}>\n {discountCode ? (\n <Icon icon={Icons.Cancel} color={Colors.HeadingSecondary} size={\"18\"} marginRight=\"8px\" padding=\"0px 10px\" backgroundColor={Colors.SurfaceTertiary} borderRadius=\"8px\" width=\"29px\" height=\"40px\" top=\"4px\" display=\"flex\" alignItems=\"center\" justifyContent=\"center\"/>\n ) : (\n <Icon icon={Icons.RightArrowRegular} color={Colors.HeadingSecondary} size={\"18\"} marginRight=\"8px\" padding=\"0px 10px\" backgroundColor={validationError ? Colors.ErrorRed:Colors.InteractiveBGPrimary} borderRadius=\"8px\" width=\"29px\" height=\"40px\" top=\"4px\" display=\"flex\" alignItems=\"center\" justifyContent=\"center\"/>\n )}\n </TextContainer>\n )}\n </>\n );\n })()}\n </Button>\n </Fragment>\n );\n }\n\n if (loading) {\n return (\n <Fragment>\n <Spacer incrementButton />\n <RightContainer size={size}>\n <Loader size={LoaderSizes.SuperSmall} color={Colors.Orange} />\n </RightContainer>\n </Fragment>\n );\n }\n\n if (Boolean(value) && onClear) {\n return (\n <Fragment>\n <Spacer incrementButton />\n <RightContainer onClick={() => onClear()} size={size}>\n <Icon\n icon={iconProps?.icon ? iconProps.icon : Icons.CancelCircle}\n color={Colors.Grey4}\n hoverColor={Colors.Grey3}\n size={iconSize}\n {...iconProps}\n />\n </RightContainer>\n </Fragment>\n );\n }\n\n return <Spacer incrementButton />;\n })()}\n </Form>\n {validationError && <ValidationError validationError={validationError} disableValidationErrorBox={disableValidationErrorBox} />}\n </Container>\n );\n}\n\nexport default React.forwardRef(Input);\n"],"names":[],"mappings":"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"}
|
|
@@ -4,6 +4,13 @@ declare type LabelProps = {
|
|
|
4
4
|
subText?: string;
|
|
5
5
|
tip?: string;
|
|
6
6
|
margin?: string;
|
|
7
|
+
labelColor?: string;
|
|
8
|
+
fontSize?: string;
|
|
9
|
+
fontWeight?: string;
|
|
10
|
+
fontFamily?: string;
|
|
11
|
+
marginBottam?: string;
|
|
12
|
+
letterSpacing?: string;
|
|
13
|
+
height?: string;
|
|
7
14
|
};
|
|
8
15
|
declare const Label: React.FC<LabelProps>;
|
|
9
16
|
export default Label;
|
|
@@ -4,18 +4,18 @@ import styled from 'styled-components';
|
|
|
4
4
|
import { Colors } from '../Colors.js';
|
|
5
5
|
import Tip from './Tip.js';
|
|
6
6
|
|
|
7
|
-
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: ", ";\n height:
|
|
8
|
-
var Text = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size:
|
|
7
|
+
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: ", ";\n height: ", ";\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: ", ";\n height: ", ";\n"])), function (props) { return props.margin; }, function (props) { return props.height || "15px"; });
|
|
8
|
+
var Text = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n //margin-right: 7px;\n font-family: ", ";\n margin-bottom: ", ";\n letter-spacing: ", ";\n"], ["\n font-size: ", ";\n font-weight: ", ";\n color: ", ";\n //margin-right: 7px;\n font-family: ", ";\n margin-bottom: ", ";\n letter-spacing: ", ";\n"])), function (props) { return props.fontSize || "1.2rem"; }, function (props) { return props.fontWeight || "600"; }, function (props) { return props.color || Colors.Grey1; }, function (props) { return props.fontFamily; }, function (props) { return props.marginBottam; }, function (props) { return props.letterSpacing; });
|
|
9
9
|
var SubText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), Colors.Grey3);
|
|
10
10
|
var Label = function (_a) {
|
|
11
|
-
var text = _a.text, subText = _a.subText, tip = _a.tip, _b = _a.margin, margin = _b === void 0 ?
|
|
12
|
-
return (React.createElement(Container, { margin: margin },
|
|
13
|
-
React.createElement(Text,
|
|
11
|
+
var text = _a.text, subText = _a.subText, tip = _a.tip, labelColor = _a.labelColor, fontSize = _a.fontSize, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, marginBottam = _a.marginBottam, _b = _a.margin, margin = _b === void 0 ? "0 0 8px" : _b, letterSpacing = _a.letterSpacing, height = _a.height;
|
|
12
|
+
return (React.createElement(Container, { margin: margin, height: height },
|
|
13
|
+
React.createElement(Text, { color: labelColor, fontSize: fontSize, fontWeight: fontWeight, fontFamily: fontFamily, marginBottam: marginBottam, letterSpacing: letterSpacing },
|
|
14
14
|
text,
|
|
15
15
|
subText && React.createElement(SubText, null,
|
|
16
16
|
"\u00A0",
|
|
17
17
|
subText)),
|
|
18
|
-
tip &&
|
|
18
|
+
tip && React.createElement(Tip, { tip: tip })));
|
|
19
19
|
};
|
|
20
20
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
21
21
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sources":["../../src/components/Label.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../Colors\";\nimport Tip from
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["../../src/components/Label.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../Colors\";\nimport Tip from \"./Tip\";\n\ntype ContainerProps = {\n margin: string;\n height?:string\n};\n\ntype TextProps = {\n fontSize?: string;\n fontWeight?: string;\n fontFamily?: string;\n marginBottam?: string;\n letterSpacing?: string;\n};\nconst Container = styled.div<ContainerProps>`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: ${(props) => props.margin};\n height: ${(props) => props.height || \"15px\"};\n`;\n\nconst Text = styled.div<TextProps>`\n font-size: ${(props) => props.fontSize || \"1.2rem\"};\n font-weight: ${(props) => props.fontWeight || \"600\"};\n color: ${(props) => props.color || Colors.Grey1};\n //margin-right: 7px;\n font-family: ${(props) => props.fontFamily};\n margin-bottom: ${(props) => props.marginBottam};\n letter-spacing: ${(props) => props.letterSpacing};\n`;\n\nconst SubText = styled.span`\n color: ${Colors.Grey3};\n`;\n\ntype LabelProps = {\n text: string;\n subText?: string;\n tip?: string;\n margin?: string;\n labelColor?: string;\n fontSize?: string;\n fontWeight?: string;\n fontFamily?: string;\n marginBottam?: string;\n letterSpacing?: string;\n height?:string;\n};\n\nconst Label: React.FC<LabelProps> = ({\n text,\n subText,\n tip,\n labelColor,\n fontSize,\n fontWeight,\n fontFamily,\n marginBottam,\n margin = \"0 0 8px\",\n letterSpacing,\n height,\n}) => {\n return (\n <Container margin={margin} height={height}>\n <Text\n color={labelColor}\n fontSize={fontSize}\n fontWeight={fontWeight}\n fontFamily={fontFamily}\n marginBottam={marginBottam}\n letterSpacing={letterSpacing}\n >\n {text}\n {subText && <SubText> {subText}</SubText>}\n </Text>\n {tip && <Tip tip={tip} />}\n </Container>\n );\n};\n\nexport default Label;\n"],"names":[],"mappings":";;;;;;AAiBA,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgB,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,gFAAA,EAAA,eAAA,EAAA,KAAA,CAAA,EAAA,CAAA,gFAIhC,EAAuB,eACvB,EAAiC,KAC5C,CAAA,CAAA,CAAA,EAFW,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,MAAM,CAAZ,EAAY,EACvB,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,MAAM,IAAI,MAAM,CAAtB,EAAsB,CAC5C,CAAC;AAEF,IAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,iBAAA,EAAA,oBAAA,EAAA,cAAA,EAAA,4CAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,KAAA,CAAA,EAAA,CAAW,iBACnB,EAAqC,oBACnC,EAAoC,cAC1C,EAAsC,4CAEhC,EAA2B,sBACzB,EAA6B,uBAC5B,EAA8B,KACjD,CAPc,CAAA,CAAA,EAAA,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,QAAQ,IAAI,QAAQ,GAAA,EACnC,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,UAAU,IAAI,KAAK,GAAA,EAC1C,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,GAAA,EAEhC,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,UAAU,CAAhB,EAAgB,EACzB,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,YAAY,GAAA,EAC5B,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,aAAa,CAAnB,EAAmB,CACjD,CAAC;AAEF,IAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,aAAA,EAAA,KAAA,CAAA,EAAA,CAAA,aAChB,EAAY,KACtB,CADU,CAAA,CAAA,EAAA,MAAM,CAAC,KAAK,CACtB,CAAC;AAgBI,IAAA,KAAK,GAAyB,UAAC,EAYpC,EAAA;AAXC,IAAA,IAAA,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,GAAG,GAAA,EAAA,CAAA,GAAA,EACH,UAAU,gBAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,YAAY,GAAA,EAAA,CAAA,YAAA,EACZ,cAAkB,EAAlB,MAAM,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,SAAS,KAAA,EAClB,aAAa,GAAA,EAAA,CAAA,aAAA,EACb,MAAM,GAAA,EAAA,CAAA,MAAA,CAAA;IAEN,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,EAAC,EAAA,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAA;QACvC,KAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,aAAa,EAAA;YAE3B,IAAI;YACJ,OAAO,IAAI,oBAAC,OAAO,EAAA,IAAA;;AAAQ,gBAAA,OAAO,CAAW,CACzC;QACN,GAAG,IAAI,KAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,GAAG,EAAE,GAAG,EAAA,CAAI,CACf,EACZ;AACJ,EAAE;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","sources":["../../src/components/Loader.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"./../Colors\";\n\nexport enum LoaderSizes {\n FuckingTiny = \"FuckingTiny\",\n SuperSmall = \"SuperSmall\",\n VerySmall = \"VerySmall\",\n Small = \"Small\",\n Medium = \"Medium\",\n Large = \"Large\",\n};\n\nconst LoaderSizesMap = {\n [LoaderSizes.FuckingTiny]: 14,\n [LoaderSizes.SuperSmall]: 20,\n [LoaderSizes.VerySmall]: 24,\n [LoaderSizes.Small]: 30,\n [LoaderSizes.Medium]: 40,\n [LoaderSizes.Large]: 60\n};\n\ntype StyledLoaderProps = {\n size: number;\n color: string;\n}\n\nconst scale = (size: number, scale: number) => `${size * scale}px`;\n\nconst StyledLoader = styled.div<StyledLoaderProps>`\n position: relative;\n top: 1.5px;\n\n .lds-ring {\n display: inline-block;\n position: relative;\n width: ${props => scale(props.size, 1)};\n height: ${props => scale(props.size, 1)};\n }\n .lds-ring div {\n box-sizing: border-box;\n display: block;\n position: absolute;\n width: ${props => scale(props.size, .8)};\n height: ${props => scale(props.size, .8)};\n margin: ${props => scale(props.size, .1)};\n border: ${props => scale(props.size, 0.066)} solid ${props => props.color};\n border-radius: 50%;\n animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: ${props => props.color} transparent transparent transparent;\n }\n .lds-ring div:nth-child(1) {\n animation-delay: -0.3s;\n }\n .lds-ring div:nth-child(2) {\n animation-delay: -0.2s;\n }\n .lds-ring div:nth-child(3) {\n animation-delay: -0.1s;\n }\n @keyframes lds-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n`;\n\nexport default function Loader({\n size = LoaderSizes.Medium,\n color = Colors.White,\n}) {\n return (\n <StyledLoader \n size={LoaderSizesMap[size]} \n color={color}\n >\n <div className=\"lds-ring\">\n <div></div>\n <div></div>\n
|
|
1
|
+
{"version":3,"file":"Loader.js","sources":["../../src/components/Loader.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"./../Colors\";\n\nexport enum LoaderSizes {\n FuckingTiny = \"FuckingTiny\",\n SuperSmall = \"SuperSmall\",\n VerySmall = \"VerySmall\",\n Small = \"Small\",\n Medium = \"Medium\",\n Large = \"Large\",\n};\n\nconst LoaderSizesMap = {\n [LoaderSizes.FuckingTiny]: 14,\n [LoaderSizes.SuperSmall]: 20,\n [LoaderSizes.VerySmall]: 24,\n [LoaderSizes.Small]: 30,\n [LoaderSizes.Medium]: 40,\n [LoaderSizes.Large]: 60\n};\n\ntype StyledLoaderProps = {\n size: number;\n color: string;\n}\n\nconst scale = (size: number, scale: number) => `${size * scale}px`;\n\nconst StyledLoader = styled.div<StyledLoaderProps>`\n position: relative;\n top: 1.5px;\n\n .lds-ring {\n display: inline-block;\n position: relative;\n width: ${props => scale(props.size, 1)};\n height: ${props => scale(props.size, 1)};\n }\n .lds-ring div {\n box-sizing: border-box;\n display: block;\n position: absolute;\n width: ${props => scale(props.size, .8)};\n height: ${props => scale(props.size, .8)};\n margin: ${props => scale(props.size, .1)};\n border: ${props => scale(props.size, 0.066)} solid ${props => props.color};\n border-radius: 50%;\n animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n border-color: ${props => props.color} transparent transparent transparent;\n }\n .lds-ring div:nth-child(1) {\n animation-delay: -0.3s;\n }\n .lds-ring div:nth-child(2) {\n animation-delay: -0.2s;\n }\n .lds-ring div:nth-child(3) {\n animation-delay: -0.1s;\n }\n @keyframes lds-ring {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n`;\n\nexport default function Loader({\n size = LoaderSizes.Medium,\n color = Colors.White,\n}) {\n return (\n <StyledLoader \n size={LoaderSizesMap[size]} \n color={color}\n >\n <div className=\"lds-ring\">\n <div></div>\n <div></div>\n <div></div>\n </div>\n </StyledLoader>\n );\n}"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,10 @@ import { Colors } from '../Colors.js';
|
|
|
5
5
|
|
|
6
6
|
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n font-size: 1.2rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 10px;\n"], ["\n display: flex;\n align-items: center;\n font-size: 1.2rem;\n font-weight: 500;\n color: ", ";\n margin-bottom: 10px;\n"])), function (props) { return (props.isMax ? Colors.Red : Colors.Grey3); });
|
|
7
7
|
var MaxLength = function (_a) {
|
|
8
|
-
var value = _a.value, maxLength = _a.maxLength;
|
|
8
|
+
var value = _a.value, maxLength = _a.maxLength, maxLengthDisabled = _a.maxLengthDisabled;
|
|
9
|
+
if (maxLengthDisabled) {
|
|
10
|
+
return null;
|
|
11
|
+
}
|
|
9
12
|
return (React.createElement(Container, { isMax: (value === null || value === void 0 ? void 0 : value.length) === maxLength }, value === null || value === void 0 ? void 0 :
|
|
10
13
|
value.length,
|
|
11
14
|
"/",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MaxLength.js","sources":["../../src/components/MaxLength.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from '../Colors';\n\ntype ContainerProps = {\n isMax: boolean;\n};\n\nconst Container = styled.div<ContainerProps>`\n display: flex;\n align-items: center;\n font-size: 1.2rem;\n font-weight: 500;\n color: ${(props) => (props.isMax ? Colors.Red : Colors.Grey3)};\n margin-bottom: 10px;\n`;\n\ntype MaxLengthProps = {\n value: string;\n maxLength: number;\n};\n\nconst MaxLength: React.FC<MaxLengthProps> = ({ value, maxLength }) => {\n return (\n <Container isMax={value?.length === maxLength}>\n {value?.length}/{maxLength}\n </Container>\n );\n};\n\nexport default MaxLength;\n"],"names":[],"mappings":";;;;;AAQA,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgB,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,kGAAA,EAAA,6BAAA,CAAA,EAAA,CAAA,kGAKjC,EAAoD,6BAE9D,KAFU,UAAC,KAAK,EAAK,EAAA,QAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,KAAK,EAAxC,EAAyC,CAE9D,CAAC;
|
|
1
|
+
{"version":3,"file":"MaxLength.js","sources":["../../src/components/MaxLength.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from '../Colors';\n\ntype ContainerProps = {\n isMax: boolean;\n};\n\nconst Container = styled.div<ContainerProps>`\n display: flex;\n align-items: center;\n font-size: 1.2rem;\n font-weight: 500;\n color: ${(props) => (props.isMax ? Colors.Red : Colors.Grey3)};\n margin-bottom: 10px;\n`;\n\ntype MaxLengthProps = {\n value: string;\n maxLength: number;\n maxLengthDisabled?:boolean\n};\n\nconst MaxLength: React.FC<MaxLengthProps> = ({ value, maxLength, maxLengthDisabled }) => {\n if (maxLengthDisabled) {\n return null;\n }\n return (\n <Container isMax={value?.length === maxLength}>\n {value?.length}/{maxLength}\n </Container>\n );\n};\n\n\nexport default MaxLength;\n"],"names":[],"mappings":";;;;;AAQA,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAgB,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,kGAAA,EAAA,6BAAA,CAAA,EAAA,CAAA,kGAKjC,EAAoD,6BAE9D,KAFU,UAAC,KAAK,EAAK,EAAA,QAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,KAAK,EAAxC,EAAyC,CAE9D,CAAC;AAQI,IAAA,SAAS,GAA6B,UAAC,EAAuC,EAAA;AAArC,IAAA,IAAA,KAAK,WAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,iBAAiB,GAAA,EAAA,CAAA,iBAAA,CAAA;AAChF,IAAA,IAAI,iBAAiB,EAAE;AACrB,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;AACD,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,IAAC,KAAK,EAAE,CAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,MAAM,MAAK,SAAS,EAC1C,EAAA,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA;AAAL,QAAA,KAAK,CAAE,MAAM;;QAAG,SAAS,CAChB,EACZ;AACJ,EAAE;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from "react";
|
|
2
2
|
import "react-phone-input-2/lib/semantic-ui.css";
|
|
3
3
|
export declare enum PhoneNumberInputSizes {
|
|
4
4
|
Large = "Large",
|
|
@@ -17,6 +17,20 @@ declare type PhoneNumberInputProps = {
|
|
|
17
17
|
margin?: string;
|
|
18
18
|
autoFocus?: boolean;
|
|
19
19
|
disabled?: boolean;
|
|
20
|
+
bgColor?: string;
|
|
21
|
+
labeltextColor?: string;
|
|
22
|
+
typedTextColor?: string;
|
|
23
|
+
selectedflagbg?: string;
|
|
24
|
+
selectedflaghover?: string;
|
|
25
|
+
countryList?: string;
|
|
26
|
+
countryName?: string;
|
|
27
|
+
highlightColor?: string;
|
|
28
|
+
searchColor?: string;
|
|
29
|
+
fontWeight?: string;
|
|
30
|
+
fontFamily?: string;
|
|
31
|
+
fontSize?: string;
|
|
32
|
+
letterSpacing?: string;
|
|
33
|
+
validationDarkThemeBorderColor?: boolean;
|
|
20
34
|
};
|
|
21
35
|
declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;
|
|
22
36
|
export default PhoneNumberInput;
|
|
@@ -15,15 +15,23 @@ var PhoneNumberInputSizes;
|
|
|
15
15
|
})(PhoneNumberInputSizes || (PhoneNumberInputSizes = {}));
|
|
16
16
|
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: ", ";\n"], ["\n margin: ", ";\n"])), function (props) { return props.margin; });
|
|
17
17
|
// overwrite the preset style imports
|
|
18
|
-
var InnerContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .react-tel-input {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-size: ", ";\n position: relative;\n width: 100%;\n :disabled {\n cursor: not-allowed;\n background-color: ", ";\n }\n\n .form-control {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n text-indent: 15px;\n transition: all 0.2s;\n color: ", ";\n font-weight: 500;\n position: relative;\n font-size: ", ";\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 0px 10px 10px 0px;\n height: ", ";\n width: calc(100% - 50px);\n z-index: 1;\n outline: none;\n &:hover {\n border: 1px solid ", ";\n }\n &.invalid-number {\n border: 1px solid ", ";\n background-color: ", ";\n border-left-color: ", ";\n &:focus {\n border: 1px solid ", ";\n border-left-color: ", ";\n background-color: ", ";\n }\n }\n &.open {\n border-color: ", ";\n border-radius: 0px 10px 0 0;\n /* border-bottom: none; */\n box-shadow: none;\n }\n ::placeholder {\n color: ", ";\n }\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n .flag-dropdown {\n outline: none;\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n padding: 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 10px;\n &.open {\n background: ", ";\n border-radius: 10px 10px 0 0;\n .selected-flag {\n background: ", ";\n border-radius: 10px 0 0 0;\n }\n }\n &:hover, &:focus {\n cursor: pointer;\n .selected-flag {\n background-color:
|
|
19
|
-
";\n }\n\n .form-control {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n text-indent: 15px;\n transition: all 0.2s;\n color: ", ";\n font-weight: 500;\n position: relative;\n font-size: ", ";\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 0px 10px 10px 0px;\n height: ",
|
|
18
|
+
var InnerContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .react-tel-input {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-size: ", ";\n position: relative;\n width: 100%;\n :disabled {\n cursor: not-allowed;\n background-color: ", ";\n }\n\n .form-control {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n border-color:", ";\n text-indent: 15px;\n transition: all 0.2s;\n color: ", ";\n font-weight: 500;\n position: relative;\n font-size: ", ";\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 0px 10px 10px 0px;\n height: ", ";\n width: calc(100% - 50px);\n z-index: 1;\n outline: none;\n &:hover {\n border: 1px solid ", ";\n }\n &.invalid-number {\n border: 1px solid ", ";\n background-color: ", ";\n border-left-color: ", ";\n &:focus {\n border: 1px solid ", ";\n border-left-color: ", ";\n background-color: ", ";\n }\n }\n &.open {\n border-color: ", ";\n border-radius: 0px 10px 0 0;\n /* border-bottom: none; */\n box-shadow: none;\n }\n ::placeholder {\n color: ", ";\n }\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n .flag-dropdown {\n outline: none;\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n padding: 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 10px;\n border-color:", ";\n\n &.open {\n background: ", ";\n border-radius: 10px 10px 0 0;\n .selected-flag {\n background: ", ";\n border-radius: 10px 0 0 0;\n }\n }\n &:hover, &:focus {\n cursor: pointer;\n .selected-flag {\n background-color:", ";;\n }\n }\n }\n\n input[disabled] {\n &+.flag-dropdown {\n &:hover {\n cursor: default;\n .selected-flag {\n background-color: transparent;\n }\n }\n }\n }\n\n .selected-flag {\n transition: all 0.2s;\n background: ", ";\n position: relative;\n width: 50px;\n height: 100%;\n padding: 0 0 0 10px;\n border-radius: 10px 0 0 10px;\n .flag {\n position: absolute;\n top: 50%;\n margin-top: -5px;\n }\n .arrow {\n position: relative;\n top: 50%;\n margin-top: -2px;\n left: 25px;\n width: 0;\n height: 0;\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n border-top: 4px solid #555;\n &.up {\n border-top: none;\n border-bottom: 4px solid #555;\n }\n }\n &.open {\n z-index: 2;\n }\n }\n\n .country-list {\n z-index: 2;\n border-radius: 0 0 10px 10px;\n border: 1px solid ", ";\n border-top: none;\n list-style: none;\n position: absolute;\n padding: 0;\n margin: 0px 0 10px -1px;\n box-shadow: unset;\n background-color: ", ";\n width: calc(100% + 2px);\n max-height: ", ";\n overflow-y: scroll;\n .flag {\n display: inline-block;\n }\n .divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid #ccc;\n }\n .country {\n padding: 7px 9px;\n .dial-code {\n color: #6b6b6b;\n }\n &:hover {\n background-color: ", ";\n }\n &.highlight {\n background-color: ", ";\n }\n }\n .flag {\n margin-right: 7px;\n margin-top: 2px;\n }\n .country-name {\n margin-right: 6px;\n color:", ";\n }\n .search {\n position: sticky;\n top: 0;\n background-color: ", ";\n padding: 5px 0 6px 10px;\n }\n .search-emoji {\n display: none;\n font-size: ", ";\n }\n .search-box {\n border: 1px solid #cacaca;\n border-radius: 3px;\n font-size: ", ";\n line-height: 15px;\n padding: 3px 8px 5px;\n outline: none;\n }\n .no-entries-message {\n padding: 7px 10px 11px;\n opacity: .7;\n }\n &::-webkit-scrollbar { width: 12px; }\n &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n }\n\n .invalid-number-message {\n position: absolute;\n z-index: 1;\n font-size: ", ";\n left: 46px;\n top: -8px;\n background: #fff;\n padding: 0 2px;\n color: #de0000;\n }\n }\n"], ["\n .react-tel-input {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n font-size: ", ";\n position: relative;\n width: 100%;\n :disabled {\n cursor: not-allowed;\n background-color: ",
|
|
19
|
+
";\n }\n\n .form-control {\n font-family: \"neue-haas-grotesk-display\", sans-serif;\n border-color:", ";\n text-indent: 15px;\n transition: all 0.2s;\n color: ", ";\n font-weight: 500;\n position: relative;\n font-size: ", ";\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n margin-left: 50px;\n padding-left: 0;\n background: ", ";\n border: 1px solid ", ";\n border-radius: 0px 10px 10px 0px;\n height: ",
|
|
20
|
+
";\n width: calc(100% - 50px);\n z-index: 1;\n outline: none;\n &:hover {\n border: 1px solid ", ";\n }\n &.invalid-number {\n border: 1px solid ", ";\n background-color: ", ";\n border-left-color: ", ";\n &:focus {\n border: 1px solid ", ";\n border-left-color: ", ";\n background-color: ", ";\n }\n }\n &.open {\n border-color: ", ";\n border-radius: 0px 10px 0 0;\n /* border-bottom: none; */\n box-shadow: none;\n }\n ::placeholder {\n color: ", ";\n }\n &:focus {\n border: 1px solid ", ";\n }\n }\n\n .flag-dropdown {\n outline: none;\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 0;\n padding: 0;\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: 10px;\n border-color:", ";\n\n &.open {\n background: ", ";\n border-radius: 10px 10px 0 0;\n .selected-flag {\n background: ", ";\n border-radius: 10px 0 0 0;\n }\n }\n &:hover, &:focus {\n cursor: pointer;\n .selected-flag {\n background-color:",
|
|
21
|
+
";;\n }\n }\n }\n\n input[disabled] {\n &+.flag-dropdown {\n &:hover {\n cursor: default;\n .selected-flag {\n background-color: transparent;\n }\n }\n }\n }\n\n .selected-flag {\n transition: all 0.2s;\n background: ", ";\n position: relative;\n width: 50px;\n height: 100%;\n padding: 0 0 0 10px;\n border-radius: 10px 0 0 10px;\n .flag {\n position: absolute;\n top: 50%;\n margin-top: -5px;\n }\n .arrow {\n position: relative;\n top: 50%;\n margin-top: -2px;\n left: 25px;\n width: 0;\n height: 0;\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n border-top: 4px solid #555;\n &.up {\n border-top: none;\n border-bottom: 4px solid #555;\n }\n }\n &.open {\n z-index: 2;\n }\n }\n\n .country-list {\n z-index: 2;\n border-radius: 0 0 10px 10px;\n border: 1px solid ", ";\n border-top: none;\n list-style: none;\n position: absolute;\n padding: 0;\n margin: 0px 0 10px -1px;\n box-shadow: unset;\n background-color: ", ";\n width: calc(100% + 2px);\n max-height: ", ";\n overflow-y: scroll;\n .flag {\n display: inline-block;\n }\n .divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid #ccc;\n }\n .country {\n padding: 7px 9px;\n .dial-code {\n color: #6b6b6b;\n }\n &:hover {\n background-color: ", ";\n }\n &.highlight {\n background-color: ", ";\n }\n }\n .flag {\n margin-right: 7px;\n margin-top: 2px;\n }\n .country-name {\n margin-right: 6px;\n color:", ";\n }\n .search {\n position: sticky;\n top: 0;\n background-color: ", ";\n padding: 5px 0 6px 10px;\n }\n .search-emoji {\n display: none;\n font-size: ", ";\n }\n .search-box {\n border: 1px solid #cacaca;\n border-radius: 3px;\n font-size: ", ";\n line-height: 15px;\n padding: 3px 8px 5px;\n outline: none;\n }\n .no-entries-message {\n padding: 7px 10px 11px;\n opacity: .7;\n }\n &::-webkit-scrollbar { width: 12px; }\n &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n }\n\n .invalid-number-message {\n position: absolute;\n z-index: 1;\n font-size: ", ";\n left: 46px;\n top: -8px;\n background: #fff;\n padding: 0 2px;\n color: #de0000;\n }\n }\n"])), function (props) { return (props.isMobile ? "1.6rem" : "1.4rem"); }, function (props) {
|
|
20
22
|
return props.disabled ? Colors.Grey6 + " !important" : null;
|
|
21
|
-
},
|
|
23
|
+
}, function (props) { return props.validationError && props.validationDarkThemeBorderColor ? Colors.ErrorRed + " !important" : ""; }, function (props) { return props.typeTextColor || Colors.Grey1; }, function (props) { return (props.isMobile ? "1.6rem" : "1.4rem"); }, function (props) { return props.bgColor || Colors.White; }, Colors.Grey5, function (props) {
|
|
24
|
+
return props.phoneNumberInputSize === PhoneNumberInputSizes.Regular
|
|
25
|
+
? "38px"
|
|
26
|
+
: "48px";
|
|
27
|
+
}, Colors.Grey5, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey4, Colors.Grey6, Colors.Grey5, function (props) { return props.validationError && props.validationDarkThemeBorderColor ? Colors.ErrorRed : ""; }, Colors.Grey6, Colors.Grey6, function (props) {
|
|
28
|
+
return props.selectedflaghover || Colors.White;
|
|
29
|
+
}, function (props) { return props.selectedflagbg || Colors.White; }, Colors.Grey5, function (props) { return props.countryList || Colors.White; }, function (props) { return (props.isMobile ? "180px" : "200px"); }, function (props) { return props.searchColor || "#f1f1f1"; }, function (props) { return props.highlightColor || "#fff"; }, function (props) { return props.countryName || "#6b6b6b"; }, function (props) { return props.searchColor || Colors.Green; }, function (props) { return (props.isMobile ? "1.6rem" : "1.4rem"); }, function (props) { return (props.isMobile ? "1.6rem" : "1.4rem"); }, function (props) { return (props.isMobile ? "1.6rem" : "1.4rem"); });
|
|
22
30
|
var PhoneNumberInput = function (_a) {
|
|
23
|
-
var value = _a.value, onChange = _a.onChange, onEnter = _a.onEnter, validationError = _a.validationError, phoneNumberInputSize = _a.phoneNumberInputSize, subLabel = _a.subLabel, tip = _a.tip, label = _a.label, margin = _a.margin, autoFocus = _a.autoFocus, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
|
|
31
|
+
var value = _a.value, onChange = _a.onChange, onEnter = _a.onEnter, validationError = _a.validationError, phoneNumberInputSize = _a.phoneNumberInputSize, subLabel = _a.subLabel, tip = _a.tip, label = _a.label, margin = _a.margin, autoFocus = _a.autoFocus, _b = _a.disabled, disabled = _b === void 0 ? false : _b, bgColor = _a.bgColor, labeltextColor = _a.labeltextColor, typedTextColor = _a.typedTextColor, selectedflagbg = _a.selectedflagbg, countryList = _a.countryList, countryName = _a.countryName, highlightColor = _a.highlightColor, selectedflaghover = _a.selectedflaghover, searchColor = _a.searchColor, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, fontSize = _a.fontSize, letterSpacing = _a.letterSpacing, validationDarkThemeBorderColor = _a.validationDarkThemeBorderColor;
|
|
24
32
|
return (React.createElement(Container, { margin: margin },
|
|
25
|
-
label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
|
|
26
|
-
React.createElement(InnerContainer, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize, disabled: disabled },
|
|
33
|
+
label && (React.createElement(Label, { text: label, subText: subLabel, tip: tip, labelColor: labeltextColor, fontFamily: fontFamily, fontWeight: fontWeight, fontSize: fontSize, letterSpacing: letterSpacing })),
|
|
34
|
+
React.createElement(InnerContainer, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize, disabled: disabled, bgColor: bgColor, selectedflagbg: selectedflagbg, selectedflaghover: selectedflaghover, labelTextColor: labeltextColor, typeTextColor: typedTextColor, countryList: countryList, countryName: countryName, highlightColor: highlightColor, searchColor: searchColor, validationError: validationError, validationDarkThemeBorderColor: validationDarkThemeBorderColor },
|
|
27
35
|
React.createElement(PhoneInput, { country: "us", disabled: disabled, placeholder: "Enter your mobile phone number", preferredCountries: ["us", "ca"], value: value, onKeyDown: function (e) {
|
|
28
36
|
// quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222
|
|
29
37
|
if ((e.which === 8 || e.which === 46) && value.length <= 1) {
|