@typeolymp/ui-components 1.19.17 → 1.19.19
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/components/atoms/Input/index.d.ts +1 -0
- package/build/index.es.js +63 -5
- package/build/index.es.js.map +1 -1
- package/build/index.js +63 -5
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.es.js
CHANGED
|
@@ -4290,14 +4290,68 @@ var StyledParagraph = styled.p(templateObject_1$P || (templateObject_1$P = __mak
|
|
|
4290
4290
|
var templateObject_1$P;
|
|
4291
4291
|
|
|
4292
4292
|
var Container$q = styled.div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4293
|
-
var InputIconWrapper = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right:
|
|
4293
|
+
var InputIconWrapper = styled.div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"search\"] {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: ", ";\n }\n\n input[type=\"search\"] {\n padding-right: ", ";\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: ", ";\n top: ", ";\n }\n\n svg {\n cursor: ", ";\n width: ", ";\n }\n"])), function (_a) {
|
|
4294
|
+
var size = _a.size;
|
|
4295
|
+
switch (size) {
|
|
4296
|
+
case "small":
|
|
4297
|
+
return "38px";
|
|
4298
|
+
default:
|
|
4299
|
+
case "medium":
|
|
4300
|
+
return "43px";
|
|
4301
|
+
}
|
|
4302
|
+
}, function (_a) {
|
|
4303
|
+
var size = _a.size;
|
|
4304
|
+
switch (size) {
|
|
4305
|
+
case "small":
|
|
4306
|
+
return "28px";
|
|
4307
|
+
default:
|
|
4308
|
+
case "medium":
|
|
4309
|
+
return "33px";
|
|
4310
|
+
}
|
|
4311
|
+
}, function (_a) {
|
|
4294
4312
|
var isChanged = _a.isChanged;
|
|
4295
4313
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
4314
|
+
}, function (_a) {
|
|
4315
|
+
var size = _a.size;
|
|
4316
|
+
switch (size) {
|
|
4317
|
+
case "small":
|
|
4318
|
+
return "7px";
|
|
4319
|
+
default:
|
|
4320
|
+
case "medium":
|
|
4321
|
+
return "12px";
|
|
4322
|
+
}
|
|
4323
|
+
}, function (_a) {
|
|
4324
|
+
var size = _a.size;
|
|
4325
|
+
switch (size) {
|
|
4326
|
+
case "small":
|
|
4327
|
+
return "10px";
|
|
4328
|
+
default:
|
|
4329
|
+
case "medium":
|
|
4330
|
+
return "14px";
|
|
4331
|
+
}
|
|
4296
4332
|
}, function (_a) {
|
|
4297
4333
|
var disabled = _a.disabled;
|
|
4298
4334
|
return (disabled ? "not-allowed" : "pointer");
|
|
4335
|
+
}, function (_a) {
|
|
4336
|
+
var size = _a.size;
|
|
4337
|
+
switch (size) {
|
|
4338
|
+
case "small":
|
|
4339
|
+
return "20px";
|
|
4340
|
+
default:
|
|
4341
|
+
case "medium":
|
|
4342
|
+
return "24px";
|
|
4343
|
+
}
|
|
4299
4344
|
});
|
|
4300
|
-
var StyledInput = styled.input(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height:
|
|
4345
|
+
var StyledInput = styled.input(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: ", ";\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: ", ";\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4346
|
+
var size = _a.size;
|
|
4347
|
+
switch (size) {
|
|
4348
|
+
case "small":
|
|
4349
|
+
return "40px";
|
|
4350
|
+
default:
|
|
4351
|
+
case "medium":
|
|
4352
|
+
return "50px";
|
|
4353
|
+
}
|
|
4354
|
+
}, function (_a) {
|
|
4301
4355
|
var disabled = _a.disabled;
|
|
4302
4356
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4303
4357
|
}, function (_a) {
|
|
@@ -4479,7 +4533,7 @@ var PasswordInput = function (props) {
|
|
|
4479
4533
|
if (props.onKeyPress)
|
|
4480
4534
|
props.onKeyPress(e);
|
|
4481
4535
|
};
|
|
4482
|
-
return (jsxs(Container$q, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
|
|
4536
|
+
return (jsxs(Container$q, { children: [jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsx$1(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxs(HelperContainer, { children: [jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
|
|
4483
4537
|
};
|
|
4484
4538
|
|
|
4485
4539
|
function toInteger$2(dirtyNumber) {
|
|
@@ -7956,7 +8010,7 @@ var DateInput = function (props) {
|
|
|
7956
8010
|
if (isBefore(new Date(inputRef.current.value), new Date(props.min)))
|
|
7957
8011
|
inputRef.current.value = props.min;
|
|
7958
8012
|
};
|
|
7959
|
-
return (jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, isChanged: isChanged }, { children: [jsx$1(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }), jsx$1(StyledInput, __assign$2({ type: "date" }, props, { onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }))] })));
|
|
8013
|
+
return (jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size, isChanged: isChanged }, { children: [jsx$1(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }), jsx$1(StyledInput, __assign$2({ type: "date" }, props, { onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }))] })));
|
|
7960
8014
|
};
|
|
7961
8015
|
|
|
7962
8016
|
var SearchInput = function (props) {
|
|
@@ -7966,11 +8020,15 @@ var SearchInput = function (props) {
|
|
|
7966
8020
|
if (!props.disabled && !!props.onChange)
|
|
7967
8021
|
props.onChange(e.target.value);
|
|
7968
8022
|
};
|
|
8023
|
+
var onKeyPress = function (e) {
|
|
8024
|
+
if (e.key === "Enter")
|
|
8025
|
+
onSearch();
|
|
8026
|
+
};
|
|
7969
8027
|
var onSearch = function () {
|
|
7970
8028
|
if (props.onSearch)
|
|
7971
8029
|
props.onSearch(value);
|
|
7972
8030
|
};
|
|
7973
|
-
return (jsx$1(Container$q, { children: jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsx$1(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsx$1(StyledInput, __assign$2({ type: "
|
|
8031
|
+
return (jsx$1(Container$q, { children: jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsx$1(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsx$1(StyledInput, __assign$2({ type: "search" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })) }));
|
|
7974
8032
|
};
|
|
7975
8033
|
|
|
7976
8034
|
var Input = function (props) {
|