kui-complex 0.0.31 → 0.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +147 -78
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +148 -78
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -18,6 +18,7 @@ import ru from 'date-fns/locale/ru';
|
|
|
18
18
|
import { DateTime } from 'luxon';
|
|
19
19
|
import Swiper from 'react-id-swiper';
|
|
20
20
|
import * as ReactDOM from 'react-dom';
|
|
21
|
+
import classNames from 'classnames';
|
|
21
22
|
|
|
22
23
|
/******************************************************************************
|
|
23
24
|
Copyright (c) Microsoft Corporation.
|
|
@@ -74,27 +75,27 @@ var UndefinedAvatar = function (_a) {
|
|
|
74
75
|
.join("");
|
|
75
76
|
return (jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar" }, { children: jsx(Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
|
|
76
77
|
};
|
|
77
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
78
|
-
var templateObject_1$
|
|
78
|
+
var Wrapper$8 = styled.div(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"])), theme.palette.brand.light, theme.palette.brand.main);
|
|
79
|
+
var templateObject_1$u;
|
|
79
80
|
|
|
80
81
|
var Avatar = function (_a) {
|
|
81
82
|
var size = _a.size, fullName = _a.fullName, imageUrl = _a.imageUrl, avatarRef = _a.avatarRef, otherProps = __rest(_a, ["size", "fullName", "imageUrl", "avatarRef"]);
|
|
82
83
|
return (jsx$1(Wrapper$7, __assign({ css: sizeStyles[size], ref: avatarRef }, otherProps, { children: imageUrl ? (jsx$1(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsx$1(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
83
84
|
};
|
|
84
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
85
|
+
var Wrapper$7 = styled.div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
85
86
|
var StyledImage = styled.img(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n"])));
|
|
86
87
|
var largeAvatarCSS = function (_a) {
|
|
87
88
|
var avatarSize = _a.avatarSize;
|
|
88
|
-
return avatarSize === "lg" && css(templateObject_3$
|
|
89
|
+
return avatarSize === "lg" && css(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
89
90
|
};
|
|
90
91
|
var StyledUndefinedAvatar = styled(UndefinedAvatar, {
|
|
91
92
|
shouldForwardProp: function (prop) { return prop !== "size"; },
|
|
92
|
-
})(templateObject_4$
|
|
93
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), largeAvatarCSS);
|
|
93
94
|
var sizeStyles = {
|
|
94
95
|
s: css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n width: 40px;\n height: 40px;\n @media (max-width: 600px) {\n width: 32px;\n height: 32px;\n }\n "], ["\n width: 40px;\n height: 40px;\n @media (max-width: 600px) {\n width: 32px;\n height: 32px;\n }\n "]))),
|
|
95
96
|
lg: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
96
97
|
};
|
|
97
|
-
var templateObject_1$
|
|
98
|
+
var templateObject_1$t, templateObject_2$f, templateObject_3$7, templateObject_4$2, templateObject_5$1, templateObject_6;
|
|
98
99
|
|
|
99
100
|
var ButtonTab = function (_a) {
|
|
100
101
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -103,9 +104,9 @@ var ButtonTab = function (_a) {
|
|
|
103
104
|
};
|
|
104
105
|
return (jsx$1(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s" }, { children: label })));
|
|
105
106
|
};
|
|
106
|
-
var StyledButton = styled(Button)(templateObject_1$
|
|
107
|
+
var StyledButton = styled(Button)(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n margin-right: 24px;\n &:last-of-type {\n margin-right: 0;\n }\n"], ["\n margin-right: 24px;\n &:last-of-type {\n margin-right: 0;\n }\n"])));
|
|
107
108
|
var inactiveStyles = css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.palette.grey.seventy);
|
|
108
|
-
var templateObject_1$
|
|
109
|
+
var templateObject_1$s, templateObject_2$e;
|
|
109
110
|
|
|
110
111
|
var ButtonsPanel = function (_a) {
|
|
111
112
|
var tabs = _a.tabs, tabPanels = _a.tabPanels, paths = _a.paths, activeTab = _a.activeTab, isSticky = _a.isSticky, onChange = _a.onChange, otherProps = __rest(_a, ["tabs", "tabPanels", "paths", "activeTab", "isSticky", "onChange"]);
|
|
@@ -128,13 +129,13 @@ var ButtonsPanel = function (_a) {
|
|
|
128
129
|
ButtonsPanel.defaultProps = {
|
|
129
130
|
isSticky: false,
|
|
130
131
|
};
|
|
131
|
-
var Content = styled.div(templateObject_1$
|
|
132
|
+
var Content = styled.div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
132
133
|
var StyledContainer$1 = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"], ["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"])), theme.palette.grey.zero);
|
|
133
|
-
var templateObject_1$
|
|
134
|
+
var templateObject_1$r, templateObject_2$d;
|
|
134
135
|
|
|
135
136
|
var dropdownStyles = function (_a) {
|
|
136
137
|
var isOpen = _a.isOpen;
|
|
137
|
-
return css(templateObject_1$
|
|
138
|
+
return css(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n width: 100%;\n max-height: 389px;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n border: 1px solid ", ";\n top: 64px;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n overflow: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n overflow-y: scroll;\n user-select: none;\n &::-webkit-scrollbar {\n width: 0px;\n },\n"], ["\n width: 100%;\n max-height: 389px;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n border: 1px solid ", ";\n top: 64px;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n overflow: auto;\n -ms-overflow-style: none;\n scrollbar-width: none;\n overflow-y: scroll;\n user-select: none;\n &::-webkit-scrollbar {\n width: 0px;\n },\n"])), isOpen ? "flex" : "none", theme.palette.grey.zero, theme.palette.grey.fifteenB);
|
|
138
139
|
};
|
|
139
140
|
var InputDropdown = forwardRef(function (_a, ref) {
|
|
140
141
|
var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
|
|
@@ -165,7 +166,7 @@ var InputDropdown = forwardRef(function (_a, ref) {
|
|
|
165
166
|
};
|
|
166
167
|
return (jsx$1(Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
|
|
167
168
|
});
|
|
168
|
-
var templateObject_1$
|
|
169
|
+
var templateObject_1$q;
|
|
169
170
|
|
|
170
171
|
var InputSelectDropdown = function (_a) {
|
|
171
172
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
|
|
@@ -189,10 +190,10 @@ var InputSelectDropdown = function (_a) {
|
|
|
189
190
|
padding: "4px",
|
|
190
191
|
} }, { children: options.map(function (option, key) { return (jsx$1(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsx$1(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsx$1(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
|
|
191
192
|
};
|
|
192
|
-
var OptionWrapper = styled.div(templateObject_1$
|
|
193
|
+
var OptionWrapper = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"])));
|
|
193
194
|
var StyledOption = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n &:hover {\n background-color: ", ";\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n &:hover {\n background-color: ", ";\n }\n"])), theme.palette.background.light1);
|
|
194
|
-
var selectedStyles = css(templateObject_3$
|
|
195
|
-
var templateObject_1$
|
|
195
|
+
var selectedStyles = css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), theme.palette.background.light1);
|
|
196
|
+
var templateObject_1$p, templateObject_2$c, templateObject_3$6;
|
|
196
197
|
|
|
197
198
|
var getFormValue = function (name, form) {
|
|
198
199
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -265,10 +266,10 @@ var InputSelect = forwardRef(function (props, ref) {
|
|
|
265
266
|
current: (_c = (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement) === null || _c === void 0 ? void 0 : _c.parentElement,
|
|
266
267
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: value }))] }));
|
|
267
268
|
});
|
|
268
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
269
|
+
var Wrapper$6 = styled.div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n position: relative;\n text-align: left;\n width: fit-content;\n"], ["\n position: relative;\n text-align: left;\n width: fit-content;\n"])));
|
|
269
270
|
var StyledInput = styled(InputWithAdornments)(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n"], ["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n"])));
|
|
270
|
-
var StyledIconWrapper = styled.div(templateObject_3$
|
|
271
|
-
var templateObject_1$
|
|
271
|
+
var StyledIconWrapper = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n padding-right: 8px;\n padding-bottom: 4px;\n"], ["\n padding-right: 8px;\n padding-bottom: 4px;\n"])));
|
|
272
|
+
var templateObject_1$o, templateObject_2$b, templateObject_3$5;
|
|
272
273
|
|
|
273
274
|
var SelectYear = function (_a) {
|
|
274
275
|
var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
|
|
@@ -304,25 +305,25 @@ var CalendarHeaderWithSelect = function (_a) {
|
|
|
304
305
|
var month = date.getMonth() + 1;
|
|
305
306
|
return (jsx(Wrapper$5, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectYear, { yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectMonth, { value: month, handleChange: changeMonth }) }))] })) }));
|
|
306
307
|
};
|
|
307
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
308
|
-
var templateObject_1$
|
|
308
|
+
var Wrapper$5 = styled.div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"], ["\n margin-bottom: 24px;\n @media (max-width: 900px) {\n padding: 0 18px;\n margin-bottom: 20px;\n }\n"])));
|
|
309
|
+
var templateObject_1$n;
|
|
309
310
|
|
|
310
311
|
var CalendarStandardContainer = function (_a) {
|
|
311
312
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
312
313
|
return jsx(DatePickerContainer, __assign({}, props));
|
|
313
314
|
};
|
|
314
|
-
var DatePickerContainer = styled.div(templateObject_1$
|
|
315
|
-
var templateObject_1$
|
|
315
|
+
var DatePickerContainer = styled.div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n padding: 0;\n border: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden;\n width: 100%;\n height: 100%;\n .react-datepicker__header {\n background-color: transparent !important;\n }\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__day-names {\n display: flex;\n justify-content: space-between;\n .react-datepicker__day-name {\n font-family: \"Inter\", sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: ", ";\n text-transform: uppercase;\n margin: 0;\n width: 33px;\n line-height: normal;\n }\n }\n .react-datepicker__month {\n padding: 0;\n margin: 20px 0 0 !important;\n border: none;\n width: 100%;\n height: calc(100% - 85px);\n .react-datepicker__week {\n display: flex;\n justify-content: space-between;\n }\n }\n .react-datepicker__week {\n margin-bottom: 10px;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n .react-datepicker__day {\n width: 33px;\n height: 33px;\n user-select: none;\n border-radius: 50% !important;\n transition: background ease-out 0.3s;\n border: 1px solid transparent;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n &:hover {\n background: ", ";\n }\n &:active {\n background: ", ";\n }\n }\n .react-datepicker__day--outside-month,\n .react-datepicker__day--disabled {\n color: #a6aebc;\n p {\n color: #a6aebc;\n }\n }\n .react-datepicker__day--keyboard-selected {\n background: transparent;\n color: inherit;\n }\n .react-datepicker__day--selected {\n background: white;\n border: 1px solid #e1e4e8;\n color: ", ";\n p {\n color: ", ";\n }\n }\n .react-datepicker__day--selected.warning_day {\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n }\n @media (max-width: 600px) {\n .react-datepicker__day {\n max-width: 48px;\n max-height: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n height: calc((100vw - (18px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n max-width: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n }\n }\n }\n @media (max-width: 350px) {\n .react-datepicker__day {\n width: calc((100vw - (6px * 7)) / 7);\n height: calc((100vw - (6px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n width: calc((100vw - (6px * 7)) / 7);\n }\n }\n }\n"], ["\n padding: 0;\n border: none !important;\n border-radius: 0 !important;\n background: transparent !important;\n overflow: hidden;\n width: 100%;\n height: 100%;\n .react-datepicker__header {\n background-color: transparent !important;\n }\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__day-names {\n display: flex;\n justify-content: space-between;\n .react-datepicker__day-name {\n font-family: \"Inter\", sans-serif;\n font-weight: 600;\n font-size: 14px;\n color: ", ";\n text-transform: uppercase;\n margin: 0;\n width: 33px;\n line-height: normal;\n }\n }\n .react-datepicker__month {\n padding: 0;\n margin: 20px 0 0 !important;\n border: none;\n width: 100%;\n height: calc(100% - 85px);\n .react-datepicker__week {\n display: flex;\n justify-content: space-between;\n }\n }\n .react-datepicker__week {\n margin-bottom: 10px;\n &:last-of-type {\n margin-bottom: 0;\n }\n }\n .react-datepicker__day {\n width: 33px;\n height: 33px;\n user-select: none;\n border-radius: 50% !important;\n transition: background ease-out 0.3s;\n border: 1px solid transparent;\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n &:hover {\n background: ", ";\n }\n &:active {\n background: ", ";\n }\n }\n .react-datepicker__day--outside-month,\n .react-datepicker__day--disabled {\n color: #a6aebc;\n p {\n color: #a6aebc;\n }\n }\n .react-datepicker__day--keyboard-selected {\n background: transparent;\n color: inherit;\n }\n .react-datepicker__day--selected {\n background: white;\n border: 1px solid #e1e4e8;\n color: ", ";\n p {\n color: ", ";\n }\n }\n .react-datepicker__day--selected.warning_day {\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n }\n @media (max-width: 600px) {\n .react-datepicker__day {\n max-width: 48px;\n max-height: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n height: calc((100vw - (18px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n max-width: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n }\n }\n }\n @media (max-width: 350px) {\n .react-datepicker__day {\n width: calc((100vw - (6px * 7)) / 7);\n height: calc((100vw - (6px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n width: calc((100vw - (6px * 7)) / 7);\n }\n }\n }\n"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.fiftyP, theme.palette.grey.zero);
|
|
316
|
+
var templateObject_1$m;
|
|
316
317
|
|
|
317
318
|
var CalendarStandardHeader = function (_a) {
|
|
318
319
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
319
320
|
var title = _.capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
320
321
|
return (jsxs$1(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsx(Grid, __assign({ item: true }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsx(PrevArrowIcon, { width: 10, height: 10 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsx(NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
|
|
321
322
|
};
|
|
322
|
-
var HeaderWrapper = styled(Grid)(templateObject_1$
|
|
323
|
+
var HeaderWrapper = styled(Grid)(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"], ["\n padding: 0 6px 34px;\n @media (max-width: 600px) {\n h2 {\n font-size: 16px;\n }\n }\n"])));
|
|
323
324
|
var StyledHeading = styled(Heading)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
|
|
324
|
-
var CircleButtonStyled = styled(Button)(templateObject_3$
|
|
325
|
-
var templateObject_1$
|
|
325
|
+
var CircleButtonStyled = styled(Button)(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"], ["\n border-color: transparent !important;\n &:disabled {\n background-color: white !important;\n }\n"])));
|
|
326
|
+
var templateObject_1$l, templateObject_2$a, templateObject_3$4;
|
|
326
327
|
|
|
327
328
|
var InputForDatepicker = forwardRef(function (_a, ref) {
|
|
328
329
|
var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
|
|
@@ -337,23 +338,23 @@ var InputForDatepicker = forwardRef(function (_a, ref) {
|
|
|
337
338
|
};
|
|
338
339
|
return (jsx(InputMask, __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly, onFocus: onFocus, onBlur: onBlur }, { children: function () { return (jsx(InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: jsx(IconWrapper, __assign({ onClick: handleIconClick }, { children: jsx(CalendarIcon, { width: 19, height: 21 }) })) }, other, { ref: ref }))); } })));
|
|
339
340
|
});
|
|
340
|
-
var IconWrapper = styled.div(templateObject_1$
|
|
341
|
-
var templateObject_1$
|
|
341
|
+
var IconWrapper = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 1;\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 1;\n"])));
|
|
342
|
+
var templateObject_1$k;
|
|
342
343
|
|
|
343
344
|
var MonthPickerContainer = function (_a) {
|
|
344
345
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
345
346
|
return jsx(StyledContainer, __assign({}, props));
|
|
346
347
|
};
|
|
347
|
-
var StyledContainer = styled.div(templateObject_1$
|
|
348
|
-
var templateObject_1$
|
|
348
|
+
var StyledContainer = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid ", " !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ", ";\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: \"\";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ", ";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: ", " !important;\n border-radius: 8px !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ", ";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"], ["\n box-shadow: 0px 26px 34px rgba(0, 0, 0, 0.1);\n border-radius: 12px !important;\n border: 1px solid ", " !important;\n background: #fff;\n overflow: hidden;\n z-index: 5;\n .react-datepicker-wrapper,\n .react-datepicker__input-container {\n display: block;\n width: 100%;\n }\n .react-datepicker__header,\n .react-datepicker__header:not(.react-datepicker__header--has-time-select) {\n padding: 0;\n border: none;\n background-color: #fff;\n }\n .react-datepicker__month {\n margin: 0px 8px 8px !important;\n border-radius: 12px;\n border: 1px solid ", ";\n width: 238px;\n height: 169px;\n display: flex;\n flex-direction: column;\n }\n .react-datepicker__month-text {\n margin: 4px !important;\n /*width: auto !important;*/\n width: calc(100% / 3) !important;\n position: relative;\n display: flex !important;\n justify-content: center;\n align-items: center;\n }\n\n .react-datepicker__month-wrapper {\n height: calc(100% / 4);\n display: flex;\n }\n\n .react-datepicker__month-text:after {\n content: \"\";\n display: block;\n height: calc(100% + 8px);\n width: 1px;\n position: absolute;\n top: -4px;\n right: -4px;\n background: ", ";\n }\n\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n\n .react-datepicker__month--selected,\n .react-datepicker__month-text--keyboard-selected {\n background-color: ", " !important;\n border-radius: 8px !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ", ";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"])), theme.palette.background.light1, theme.palette.grey.fifteenB, theme.palette.grey.fifteenB, theme.palette.brand.main, theme.palette.grey.fifteenB);
|
|
349
|
+
var templateObject_1$j;
|
|
349
350
|
|
|
350
351
|
var MonthPickerHeader = function (_a) {
|
|
351
352
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
352
353
|
return (jsxs$1(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsx(ArrowBackIcon, { width: 14, height: 12 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsx(ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
|
|
353
354
|
};
|
|
354
|
-
var StyledIconButton = styled(IconButton)(templateObject_1$
|
|
355
|
+
var StyledIconButton = styled(IconButton)(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
355
356
|
var StyledHeader = styled(Grid)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n background: #fff;\n padding: 4px 16px;\n border-radius: 12px 12px 0 0;\n"], ["\n background: #fff;\n padding: 4px 16px;\n border-radius: 12px 12px 0 0;\n"])));
|
|
356
|
-
var templateObject_1$
|
|
357
|
+
var templateObject_1$i, templateObject_2$9;
|
|
357
358
|
|
|
358
359
|
var DesktopInputWithMonthPicker = function (_a) {
|
|
359
360
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -363,8 +364,8 @@ var DesktopInputWithMonthPicker = function (_a) {
|
|
|
363
364
|
return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, disabled: disabled, errorMessage: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps)), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
|
|
364
365
|
} }) }));
|
|
365
366
|
};
|
|
366
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
367
|
-
var templateObject_1$
|
|
367
|
+
var Wrapper$4 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
|
|
368
|
+
var templateObject_1$h;
|
|
368
369
|
|
|
369
370
|
var MenuItem = function (_a) {
|
|
370
371
|
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
@@ -399,16 +400,16 @@ var MenuItem = function (_a) {
|
|
|
399
400
|
}, []);
|
|
400
401
|
return (jsx$1(Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$1, { children: jsx$1(Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) }) })));
|
|
401
402
|
};
|
|
402
|
-
var ButtonWrapper$1 = styled.div(templateObject_1$
|
|
403
|
+
var ButtonWrapper$1 = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"], ["\n margin-right: 8px;\n width: max-content;\n max-width: 150px;\n @media (max-width: 900px) {\n max-width: unset;\n }\n"])));
|
|
403
404
|
var disabledStyles = css(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n p {\n color: ", ";\n font-weight: 400;\n },\n"], ["\n p {\n color: ", ";\n font-weight: 400;\n },\n"])), theme.palette.grey.seventy);
|
|
404
|
-
var templateObject_1$
|
|
405
|
+
var templateObject_1$g, templateObject_2$8;
|
|
405
406
|
|
|
406
407
|
var DesktopMenuPanel = function (_a) {
|
|
407
408
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
408
409
|
return (jsx$1(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" } }, { children: tabs.map(function (tab, index) { return (jsx$1(Grid, __assign({ item: true }, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
|
|
409
410
|
};
|
|
410
|
-
var Wrapper$3 = styled(Grid)(templateObject_1$
|
|
411
|
-
var templateObject_1$
|
|
411
|
+
var Wrapper$3 = styled(Grid)(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"])), theme.palette.background.light1);
|
|
412
|
+
var templateObject_1$f;
|
|
412
413
|
|
|
413
414
|
var InputWithMask = forwardRef(function (_a, ref) {
|
|
414
415
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -498,15 +499,15 @@ var PassportStrengthBar = function (_a) {
|
|
|
498
499
|
: -1;
|
|
499
500
|
return (jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden") }, { children: [jsx$1(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsx$1(ReliabilityLevel, { children: jsx$1(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsx$1(Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsx$1(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
|
|
500
501
|
};
|
|
501
|
-
var Wrapper$2 = styled.div(templateObject_1$
|
|
502
|
+
var Wrapper$2 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n margin-top: 16px;\n min-height: 86px;\n @media (max-width: 900px) {\n min-height: unset;\n }\n &.hidden {\n opacity: 0;\n @media (max-width: 900px) {\n display: none;\n }\n }\n"], ["\n margin-top: 16px;\n min-height: 86px;\n @media (max-width: 900px) {\n min-height: unset;\n }\n &.hidden {\n opacity: 0;\n @media (max-width: 900px) {\n display: none;\n }\n }\n"])));
|
|
502
503
|
var ReliabilityLevelWrapper = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
503
|
-
var ReliabilityLevel = styled.div(templateObject_3$
|
|
504
|
-
var StyledLinearProgress = styled(LinearProgress)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"], ["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"])), theme.palette.grey.fifteenB, function (_a) {
|
|
504
|
+
var ReliabilityLevel = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n width: calc(100% / 4);\n margin-right: 16px;\n &:last-of-type {\n margin-right: 0;\n }\n"], ["\n width: calc(100% / 4);\n margin-right: 16px;\n &:last-of-type {\n margin-right: 0;\n }\n"])));
|
|
505
|
+
var StyledLinearProgress = styled(LinearProgress)(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"], ["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"])), theme.palette.grey.fifteenB, function (_a) {
|
|
505
506
|
var color = _a.color;
|
|
506
507
|
return color;
|
|
507
508
|
});
|
|
508
509
|
var Description = styled(Caption)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-top: 16px;\n @media (max-width: 900px) {\n margin-top: 8px;\n font-size: 12px;\n }\n"], ["\n margin-top: 16px;\n @media (max-width: 900px) {\n margin-top: 8px;\n font-size: 12px;\n }\n"])));
|
|
509
|
-
var templateObject_1$
|
|
510
|
+
var templateObject_1$e, templateObject_2$7, templateObject_3$3, templateObject_4$1, templateObject_5;
|
|
510
511
|
|
|
511
512
|
var isValidWithMaskExp = /^[^_]+$/;
|
|
512
513
|
var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
|
|
@@ -550,13 +551,13 @@ var InputPassword = function (props) {
|
|
|
550
551
|
}, []);
|
|
551
552
|
return (jsxs$1(Fragment$1, { children: [jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", endIcon: jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsx(ClosedEyeIcon, {}) : jsx(OpenEyeIcon, {}) })) }, props)), jsx(PassportStrengthBar, { strength: strength })] }));
|
|
552
553
|
};
|
|
553
|
-
var EyeIconWrapper = styled.div(templateObject_1$
|
|
554
|
-
var templateObject_1$
|
|
554
|
+
var EyeIconWrapper = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n height: 18px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
555
|
+
var templateObject_1$d;
|
|
555
556
|
|
|
556
557
|
var InputTextAreaMobile = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(InputWrapper, { children: jsx(InputWithController, __assign({}, props)) }), jsx(TextAreaWrapper, { children: jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); };
|
|
557
|
-
var InputWrapper = styled.div(templateObject_1$
|
|
558
|
+
var InputWrapper = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
558
559
|
var TextAreaWrapper = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
559
|
-
var templateObject_1$
|
|
560
|
+
var templateObject_1$c, templateObject_2$6;
|
|
560
561
|
|
|
561
562
|
var useToggle = function (isModalOpen) {
|
|
562
563
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -574,10 +575,10 @@ var ModalFooter = function (_a) {
|
|
|
574
575
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
575
576
|
return (jsxs$1(StyledFooter, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] }));
|
|
576
577
|
};
|
|
577
|
-
var StyledFooter = styled.div(templateObject_1$
|
|
578
|
+
var StyledFooter = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"], ["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"])), theme.palette.grey.zero);
|
|
578
579
|
var ButtonWrapper = styled.div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"], ["\n display: flex;\n justify-content: flex-end;\n padding: 24px 40px;\n @media (max-width: 600px) {\n padding: 24px 16px;\n }\n"])));
|
|
579
|
-
var ButtonStyled = styled(Button)(templateObject_3$
|
|
580
|
-
var templateObject_1$
|
|
580
|
+
var ButtonStyled = styled(Button)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
581
|
+
var templateObject_1$b, templateObject_2$5, templateObject_3$2;
|
|
581
582
|
|
|
582
583
|
registerLocale("ru", ru);
|
|
583
584
|
var generateYearRange = function (offsetFromCurrent, maxYearCount) {
|
|
@@ -631,10 +632,10 @@ InputWithDatePicker.defaultProps = {
|
|
|
631
632
|
description: "Выберите год, месяц и число вашего рождения",
|
|
632
633
|
yearParams: { min: 18, max: 120 },
|
|
633
634
|
};
|
|
634
|
-
var ContentWrapper$1 = styled.div(templateObject_1$
|
|
635
|
+
var ContentWrapper$1 = styled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n padding: 36px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"], ["\n padding: 36px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"])));
|
|
635
636
|
var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"], ["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"])), theme.palette.background.light1, theme.palette.background.light1);
|
|
636
|
-
var DayContent = styled.span(templateObject_3$
|
|
637
|
-
var templateObject_1$
|
|
637
|
+
var DayContent = styled.span(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n padding-top: 1px;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"], ["\n padding-top: 1px;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"])));
|
|
638
|
+
var templateObject_1$a, templateObject_2$4, templateObject_3$1;
|
|
638
639
|
|
|
639
640
|
var shortMonths = [
|
|
640
641
|
"ЯНВ",
|
|
@@ -697,9 +698,9 @@ var MobileInputWithMonthPicker = function (_a) {
|
|
|
697
698
|
};
|
|
698
699
|
return (jsxs$1(Wrapper$1, { children: [jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, errorMessage: error, isLabelShrink: Boolean(field.value) }, props)), jsxs$1(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
|
|
699
700
|
};
|
|
700
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
701
|
+
var Wrapper$1 = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
701
702
|
var ContentWrapper = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"], ["\n @media (max-width: 600px) {\n padding: 16px 16px 8px;\n }\n"])));
|
|
702
|
-
var templateObject_1$
|
|
703
|
+
var templateObject_1$9, templateObject_2$3;
|
|
703
704
|
|
|
704
705
|
var InputWithMonthPicker = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
705
706
|
|
|
@@ -715,9 +716,9 @@ var MobileMenuPanel = function (_a) {
|
|
|
715
716
|
};
|
|
716
717
|
return (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" } }, { children: jsx$1(Swiper, __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx$1(SlideWrapper, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
|
|
717
718
|
};
|
|
718
|
-
var Wrapper = styled.div(templateObject_1$
|
|
719
|
+
var Wrapper = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"])), theme.palette.background.light1);
|
|
719
720
|
var SlideWrapper = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n"], ["\n width: max-content !important;\n &:first-of-type {\n padding-left: 16px;\n }\n"])));
|
|
720
|
-
var templateObject_1$
|
|
721
|
+
var templateObject_1$8, templateObject_2$2;
|
|
721
722
|
|
|
722
723
|
var useWindowWidth = function (time) {
|
|
723
724
|
if (time === void 0) { time = 10; }
|
|
@@ -766,8 +767,8 @@ var MenuPanel = function (_a) {
|
|
|
766
767
|
MenuPanel.defaultProps = {
|
|
767
768
|
variant: "grey",
|
|
768
769
|
};
|
|
769
|
-
var fullHeightStyles = css(templateObject_1$
|
|
770
|
-
var templateObject_1$
|
|
770
|
+
var fullHeightStyles = css(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
771
|
+
var templateObject_1$7;
|
|
771
772
|
|
|
772
773
|
var Switch = function (_a) {
|
|
773
774
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -821,15 +822,15 @@ InputPhoneWithForm.defaultProps = {
|
|
|
821
822
|
};
|
|
822
823
|
|
|
823
824
|
var Table = function (props) { return jsx(StyledTable, __assign({ cellSpacing: "0" }, props)); };
|
|
824
|
-
var StyledTable = styled.table(templateObject_1$
|
|
825
|
+
var StyledTable = styled.table(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
826
|
+
var templateObject_1$6;
|
|
827
|
+
|
|
828
|
+
var TableHeadCell = styled.th(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
825
829
|
var templateObject_1$5;
|
|
826
830
|
|
|
827
|
-
var
|
|
831
|
+
var TableCell = styled.td(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
828
832
|
var templateObject_1$4;
|
|
829
833
|
|
|
830
|
-
var TableCell = styled.td(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
831
|
-
var templateObject_1$3;
|
|
832
|
-
|
|
833
834
|
var TableRow = function (_a) {
|
|
834
835
|
var children = _a.children, other = __rest(_a, ["children"]);
|
|
835
836
|
var childrenArr = React.Children.toArray(children);
|
|
@@ -864,8 +865,22 @@ var placementsPositions = {
|
|
|
864
865
|
},
|
|
865
866
|
};
|
|
866
867
|
|
|
867
|
-
var
|
|
868
|
-
|
|
868
|
+
var PopperBase = forwardRef(function (props, ref) {
|
|
869
|
+
props.placement; var open = props.open, children = props.children, spacing = props.spacing, className = props.className, style = props.style, other = __rest(props, ["placement", "open", "children", "spacing", "className", "style"]);
|
|
870
|
+
return (jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames("KUI-Popper", className), spacing: spacing, style: style }, { children: jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
|
|
871
|
+
});
|
|
872
|
+
var StyledPopperWrapper = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n position: absolute;\n max-width: 215px;\n padding: ", ";\n z-index: 10;\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"], ["\n position: absolute;\n max-width: 215px;\n padding: ", ";\n z-index: 10;\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"])), function (_a) {
|
|
873
|
+
var spacing = _a.spacing;
|
|
874
|
+
return spacing || 0;
|
|
875
|
+
}, theme.breakpoints.xxs);
|
|
876
|
+
var StyledPopper = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"], ["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"])), function (_a) {
|
|
877
|
+
var open = _a.open;
|
|
878
|
+
return (open ? 1 : 0);
|
|
879
|
+
});
|
|
880
|
+
var templateObject_1$3, templateObject_2$1;
|
|
881
|
+
|
|
882
|
+
var PopperWithPortal = forwardRef(function (props, ref) {
|
|
883
|
+
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
869
884
|
var popperRef = useRef(null);
|
|
870
885
|
var _a = useState(null), coords = _a[0], setCoords = _a[1];
|
|
871
886
|
var _b = useState(null), size = _b[0], setSize = _b[1];
|
|
@@ -906,17 +921,70 @@ var Popper = forwardRef(function (props, ref) {
|
|
|
906
921
|
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
907
922
|
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
908
923
|
// Распожить стрелочку к контенту посередине контента
|
|
909
|
-
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsx(
|
|
924
|
+
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
|
|
910
925
|
});
|
|
911
|
-
var
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
var
|
|
916
|
-
var
|
|
917
|
-
|
|
918
|
-
}
|
|
919
|
-
|
|
926
|
+
var templateObject_1$2;
|
|
927
|
+
|
|
928
|
+
var StaticPopper = forwardRef(function (props, ref) {
|
|
929
|
+
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
930
|
+
var popperRef = useRef(null);
|
|
931
|
+
var _a = useState(null), contentSize = _a[0], setContentSize = _a[1];
|
|
932
|
+
var _b = useState(null), popperSize = _b[0], setPopperSize = _b[1];
|
|
933
|
+
var position = {};
|
|
934
|
+
useEffect(function () {
|
|
935
|
+
if (contentRef.current && popperRef.current) {
|
|
936
|
+
setContentSize({
|
|
937
|
+
width: contentRef.current.clientWidth,
|
|
938
|
+
height: contentRef.current.clientHeight,
|
|
939
|
+
});
|
|
940
|
+
setPopperSize({
|
|
941
|
+
width: popperRef.current.clientWidth,
|
|
942
|
+
height: popperRef.current.clientHeight,
|
|
943
|
+
});
|
|
944
|
+
}
|
|
945
|
+
}, []);
|
|
946
|
+
if (contentSize && popperSize) {
|
|
947
|
+
var placementPositions =
|
|
948
|
+
// @ts-ignore
|
|
949
|
+
placementsPositions[placement !== null && placement !== void 0 ? placement : "bottomMiddle"];
|
|
950
|
+
position = {
|
|
951
|
+
top: placementPositions.top
|
|
952
|
+
? 0 - popperSize.height
|
|
953
|
+
: 0 + contentSize.height,
|
|
954
|
+
left: Math.max(contentSize.width * placementPositions.offset -
|
|
955
|
+
popperSize.width * placementPositions.offset, 0),
|
|
956
|
+
};
|
|
957
|
+
}
|
|
958
|
+
var forwardedRef = function (elem) {
|
|
959
|
+
if (ref) {
|
|
960
|
+
// @ts-ignore
|
|
961
|
+
ref.current = elem;
|
|
962
|
+
}
|
|
963
|
+
// @ts-ignore
|
|
964
|
+
popperRef.current = elem;
|
|
965
|
+
};
|
|
966
|
+
return jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other));
|
|
967
|
+
});
|
|
968
|
+
|
|
969
|
+
var Popper = forwardRef(function (props, ref) {
|
|
970
|
+
var contentRef = props.contentRef, other = __rest(props, ["contentRef"]);
|
|
971
|
+
var _a = useState(true), isParentSticky = _a[0], setIsParentSticky = _a[1];
|
|
972
|
+
useEffect(function () {
|
|
973
|
+
function checkParentIsSticky() {
|
|
974
|
+
var el = contentRef.current;
|
|
975
|
+
while (el) {
|
|
976
|
+
var position = window.getComputedStyle(el).position;
|
|
977
|
+
if (position === "sticky" || position === "fixed")
|
|
978
|
+
return true;
|
|
979
|
+
el = el.parentElement;
|
|
980
|
+
}
|
|
981
|
+
return false;
|
|
982
|
+
}
|
|
983
|
+
var isSticky = checkParentIsSticky();
|
|
984
|
+
setIsParentSticky(!!isSticky);
|
|
985
|
+
}, [contentRef]);
|
|
986
|
+
return isParentSticky ? (jsx(StaticPopper, __assign({ ref: ref, contentRef: contentRef }, other))) : (jsx(PopperWithPortal, __assign({ ref: ref, contentRef: contentRef }, other)));
|
|
987
|
+
});
|
|
920
988
|
|
|
921
989
|
var Tooltip = forwardRef(function (props, ref) {
|
|
922
990
|
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, cursor = props.cursor, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children", "cursor"]);
|
|
@@ -939,13 +1007,14 @@ var Tooltip = forwardRef(function (props, ref) {
|
|
|
939
1007
|
}, [open]);
|
|
940
1008
|
return (jsxs$1(StyledWrapper, __assign({ onMouseLeave: handleClose, ref: ref }, { children: [jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsx(StyledContent, { children: children }) })), jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
|
|
941
1009
|
});
|
|
942
|
-
var
|
|
943
|
-
var
|
|
1010
|
+
var containerCSS = css(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n"], ["\n display: inline-flex;\n width: fit-content;\n height: fit-content;\n"])));
|
|
1011
|
+
var StyledWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n position: relative;\n"], ["\n ", ";\n position: relative;\n"])), containerCSS);
|
|
1012
|
+
var StyledContentWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", ";\n cursor: ", ";\n"], ["\n ", ";\n cursor: ", ";\n"])), containerCSS, function (_a) {
|
|
944
1013
|
var cursor = _a.cursor;
|
|
945
1014
|
return cursor;
|
|
946
1015
|
});
|
|
947
|
-
var StyledContent = styled(
|
|
948
|
-
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
1016
|
+
var StyledContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n z-index: -1;\n"], ["\n ", ";\n z-index: -1;\n"])), containerCSS);
|
|
1017
|
+
var templateObject_1$1, templateObject_2, templateObject_3, templateObject_4;
|
|
949
1018
|
|
|
950
1019
|
var ButtonSelect = forwardRef(function (props, ref) {
|
|
951
1020
|
var _a;
|