@typeolymp/ui-components 1.19.17 → 1.19.19

package/build/index.js

@@ -4317,14 +4317,68 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$P || (templa
 var templateObject_1$P;
 
 var Container$q = styled__default["default"].div(templateObject_1$O || (templateObject_1$O = __makeTemplateObject$1(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
-var InputIconWrapper = styled__default["default"].div(templateObject_2$B || (templateObject_2$B = __makeTemplateObject$1(["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n\n  input {\n    padding-right: 43px;\n  }\n\n  input[type=\"date\"] {\n    color: ", ";\n  }\n\n  div {\n    position: absolute;\n    height: 24px;\n    right: 12px;\n    top: 14px;\n  }\n\n  svg {\n    cursor: ", ";\n  }\n"])), function (_a) {
+var InputIconWrapper = styled__default["default"].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) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "38px";
+        default:
+        case "medium":
+            return "43px";
+    }
+}, function (_a) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "28px";
+        default:
+        case "medium":
+            return "33px";
+    }
+}, function (_a) {
     var isChanged = _a.isChanged;
     return !isChanged ? theme.colors.lightGray.darker : "";
+}, function (_a) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "7px";
+        default:
+        case "medium":
+            return "12px";
+    }
+}, function (_a) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "10px";
+        default:
+        case "medium":
+            return "14px";
+    }
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? "not-allowed" : "pointer");
+}, function (_a) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "20px";
+        default:
+        case "medium":
+            return "24px";
+    }
 });
-var StyledInput = styled__default["default"].input(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n  width: 100%;\n  min-width: 228px;\n  height: 50px;\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: 50px;\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) {
+var StyledInput = styled__default["default"].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) {
+    var size = _a.size;
+    switch (size) {
+        case "small":
+            return "40px";
+        default:
+        case "medium":
+            return "50px";
+    }
+}, function (_a) {
     var disabled = _a.disabled;
     return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
 }, function (_a) {
@@ -4506,7 +4560,7 @@ var PasswordInput = function (props) {
         if (props.onKeyPress)
             props.onKeyPress(e);
     };
-    return (jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsxRuntime.jsx(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
+    return (jsxRuntime.jsxs(Container$q, { children: [jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsxRuntime.jsx(Icon, { type: isVisible ? "eyeInvisible" : "eye", color: "gray", size: "small", onClick: toggle }), jsxRuntime.jsx(StyledInput, __assign$2({ type: isVisible ? "text" : "password" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })), props.helperLocale && value.length ? (jsxRuntime.jsxs(HelperContainer, { children: [jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasCapitalLetter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 capital letter"]] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasNumber(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 number"]] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: expressions.hasSpecialCharacter(value) }, { children: ["\u2022 ", translations[props.helperLocale]["At least 1 special character"]] })), jsxRuntime.jsxs(Helper, __assign$2({ isOk: value.length >= 8 }, { children: ["\u2022 ", translations[props.helperLocale]["At least 8 characters"]] }))] })) : null] }));
 };
 
 function toInteger$2(dirtyNumber) {
@@ -7983,7 +8037,7 @@ var DateInput = function (props) {
         if (isBefore(new Date(inputRef.current.value), new Date(props.min)))
             inputRef.current.value = props.min;
     };
-    return (jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, isChanged: isChanged }, { children: [jsxRuntime.jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }), jsxRuntime.jsx(StyledInput, __assign$2({ type: "date" }, props, { onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }))] })));
+    return (jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size, isChanged: isChanged }, { children: [jsxRuntime.jsx(Icon, { type: "calendar", color: "gray", size: "small", onClick: showPicker }), jsxRuntime.jsx(StyledInput, __assign$2({ type: "date" }, props, { onChange: onChange, onBlur: onBlur, onKeyPress: onKeyPress, ref: inputRef }))] })));
 };
 
 var SearchInput = function (props) {
@@ -7993,11 +8047,15 @@ var SearchInput = function (props) {
         if (!props.disabled && !!props.onChange)
             props.onChange(e.target.value);
     };
+    var onKeyPress = function (e) {
+        if (e.key === "Enter")
+            onSearch();
+    };
     var onSearch = function () {
         if (props.onSearch)
             props.onSearch(value);
     };
-    return (jsxRuntime.jsx(Container$q, { children: jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled }, { children: [jsxRuntime.jsx(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsxRuntime.jsx(StyledInput, __assign$2({ type: "text" }, props, { onChange: onChange }))] })) }));
+    return (jsxRuntime.jsx(Container$q, { children: jsxRuntime.jsxs(InputIconWrapper, __assign$2({ disabled: props.disabled, size: props.size }, { children: [jsxRuntime.jsx(Icon, { type: "search", color: "gray", size: "small", onClick: onSearch }), jsxRuntime.jsx(StyledInput, __assign$2({ type: "search" }, props, { onChange: onChange, onKeyPress: onKeyPress }))] })) }));
 };
 
 var Input = function (props) {