kui-complex 0.0.19 → 0.0.21
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.d.ts +13 -6
- package/dist/index.es.js +64 -57
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +64 -56
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -106,14 +106,14 @@ var UndefinedAvatar = function (_a) {
|
|
|
106
106
|
.join("");
|
|
107
107
|
return (jsxRuntime.jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar" }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
|
|
108
108
|
};
|
|
109
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
110
|
-
var templateObject_1$
|
|
109
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __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"])), kuiBasic.theme.palette.brand.light, kuiBasic.theme.palette.brand.main);
|
|
110
|
+
var templateObject_1$t;
|
|
111
111
|
|
|
112
112
|
var Avatar = function (_a) {
|
|
113
113
|
var size = _a.size, fullName = _a.fullName, imageUrl = _a.imageUrl, avatarRef = _a.avatarRef, otherProps = __rest(_a, ["size", "fullName", "imageUrl", "avatarRef"]);
|
|
114
114
|
return (jsxRuntime$1.jsx(Wrapper$7, __assign({ css: sizeStyles[size], ref: avatarRef }, otherProps, { children: imageUrl ? (jsxRuntime$1.jsx(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsxRuntime$1.jsx(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
115
115
|
};
|
|
116
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
116
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
117
117
|
var StyledImage = styled__default["default"].img(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
118
118
|
var largeAvatarCSS = function (_a) {
|
|
119
119
|
var avatarSize = _a.avatarSize;
|
|
@@ -126,7 +126,7 @@ var sizeStyles = {
|
|
|
126
126
|
s: react.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 "]))),
|
|
127
127
|
lg: react.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
128
128
|
};
|
|
129
|
-
var templateObject_1$
|
|
129
|
+
var templateObject_1$s, templateObject_2$e, templateObject_3$6, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
130
130
|
|
|
131
131
|
var ButtonTab = function (_a) {
|
|
132
132
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -135,9 +135,9 @@ var ButtonTab = function (_a) {
|
|
|
135
135
|
};
|
|
136
136
|
return (jsxRuntime$1.jsx(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s" }, { children: label })));
|
|
137
137
|
};
|
|
138
|
-
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$
|
|
138
|
+
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$r || (templateObject_1$r = __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"])));
|
|
139
139
|
var inactiveStyles = react.css(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), kuiBasic.theme.palette.grey.seventy);
|
|
140
|
-
var templateObject_1$
|
|
140
|
+
var templateObject_1$r, templateObject_2$d;
|
|
141
141
|
|
|
142
142
|
var ButtonsPanel = function (_a) {
|
|
143
143
|
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"]);
|
|
@@ -160,13 +160,13 @@ var ButtonsPanel = function (_a) {
|
|
|
160
160
|
ButtonsPanel.defaultProps = {
|
|
161
161
|
isSticky: false,
|
|
162
162
|
};
|
|
163
|
-
var Content = styled__default["default"].div(templateObject_1$
|
|
163
|
+
var Content = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
164
164
|
var StyledContainer$1 = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __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"])), kuiBasic.theme.palette.grey.zero);
|
|
165
|
-
var templateObject_1$
|
|
165
|
+
var templateObject_1$q, templateObject_2$c;
|
|
166
166
|
|
|
167
167
|
var dropdownStyles = function (_a) {
|
|
168
168
|
var isOpen = _a.isOpen;
|
|
169
|
-
return react.css(templateObject_1$
|
|
169
|
+
return react.css(templateObject_1$p || (templateObject_1$p = __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", kuiBasic.theme.palette.grey.zero, kuiBasic.theme.palette.grey.fifteenB);
|
|
170
170
|
};
|
|
171
171
|
var InputDropdown = function (_a) {
|
|
172
172
|
var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
|
|
@@ -190,7 +190,7 @@ var InputDropdown = function (_a) {
|
|
|
190
190
|
}
|
|
191
191
|
return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: dropdownRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
|
|
192
192
|
};
|
|
193
|
-
var templateObject_1$
|
|
193
|
+
var templateObject_1$p;
|
|
194
194
|
|
|
195
195
|
var InputSelectDropdown = function (_a) {
|
|
196
196
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
|
|
@@ -206,10 +206,10 @@ var InputSelectDropdown = function (_a) {
|
|
|
206
206
|
padding: "4px",
|
|
207
207
|
} }, { children: options.map(function (option, key) { return (jsxRuntime$1.jsx(OptionWrapper, __assign({ onClick: function () { return handleSelect(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: jsxRuntime$1.jsx(StyledOption, __assign({ css: selectedValue === option.value && selectedStyles }, { children: jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })) }), option.label)); }) })));
|
|
208
208
|
};
|
|
209
|
-
var OptionWrapper = styled__default["default"].div(templateObject_1$
|
|
209
|
+
var OptionWrapper = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"])));
|
|
210
210
|
var StyledOption = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __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"])), kuiBasic.theme.palette.background.light1);
|
|
211
211
|
var selectedStyles = react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n background-color: ", ";\n"], ["\n background-color: ", ";\n"])), kuiBasic.theme.palette.background.light1);
|
|
212
|
-
var templateObject_1$
|
|
212
|
+
var templateObject_1$o, templateObject_2$b, templateObject_3$5;
|
|
213
213
|
|
|
214
214
|
var getFormValue = function (name, form) {
|
|
215
215
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -284,10 +284,10 @@ var InputSelect = React.forwardRef(function (props, ref) {
|
|
|
284
284
|
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,
|
|
285
285
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: other.value || value }))] }));
|
|
286
286
|
});
|
|
287
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
287
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
|
|
288
288
|
var StyledInput = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$a || (templateObject_2$a = __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"])));
|
|
289
289
|
var StyledIconWrapper = styled__default["default"].div(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding-right: 8px;\n height: 13px;\n"], ["\n padding-right: 8px;\n height: 13px;\n"])));
|
|
290
|
-
var templateObject_1$
|
|
290
|
+
var templateObject_1$n, templateObject_2$a, templateObject_3$4;
|
|
291
291
|
|
|
292
292
|
var SelectYear = function (_a) {
|
|
293
293
|
var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
|
|
@@ -323,25 +323,25 @@ var CalendarHeaderWithSelect = function (_a) {
|
|
|
323
323
|
var month = date.getMonth() + 1;
|
|
324
324
|
return (jsxRuntime.jsx(Wrapper$5, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectYear, { yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.jsx(SelectMonth, { value: month, handleChange: changeMonth }) }))] })) }));
|
|
325
325
|
};
|
|
326
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
327
|
-
var templateObject_1$
|
|
326
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
327
|
+
var templateObject_1$m;
|
|
328
328
|
|
|
329
329
|
var CalendarStandardContainer = function (_a) {
|
|
330
330
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
331
331
|
return jsxRuntime.jsx(DatePickerContainer, __assign({}, props));
|
|
332
332
|
};
|
|
333
|
-
var DatePickerContainer = styled__default["default"].div(templateObject_1$
|
|
334
|
-
var templateObject_1$
|
|
333
|
+
var DatePickerContainer = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __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"])), kuiBasic.theme.palette.grey.fiftyP, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.red.fiftyP, kuiBasic.theme.palette.grey.zero);
|
|
334
|
+
var templateObject_1$l;
|
|
335
335
|
|
|
336
336
|
var CalendarStandardHeader = function (_a) {
|
|
337
337
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
338
338
|
var title = ___default["default"].capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
339
339
|
return (jsxRuntime.jsxs(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsxRuntime.jsx(kuiIcon.PrevArrowIcon, { width: 10, height: 10 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsxRuntime.jsx(kuiIcon.NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
|
|
340
340
|
};
|
|
341
|
-
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
341
|
+
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$k || (templateObject_1$k = __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"])));
|
|
342
342
|
var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
|
|
343
343
|
var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$3 || (templateObject_3$3 = __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"])));
|
|
344
|
-
var templateObject_1$
|
|
344
|
+
var templateObject_1$k, templateObject_2$9, templateObject_3$3;
|
|
345
345
|
|
|
346
346
|
var InputForDatepicker = React.forwardRef(function (_a, ref) {
|
|
347
347
|
var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
|
|
@@ -356,23 +356,23 @@ var InputForDatepicker = React.forwardRef(function (_a, ref) {
|
|
|
356
356
|
};
|
|
357
357
|
return (jsxRuntime.jsx(InputMask__default["default"], __assign({ mask: mask, onChange: onChange, value: props.value, maskPlaceholder: null, alwaysShowMask: false, disabled: disabled, readOnly: readOnly, onFocus: onFocus, onBlur: onBlur }, { children: function () { return (jsxRuntime.jsx(kuiBasic.InputWithAdornments, __assign({ onChange: onChange, disabled: disabled, value: props.value, endIcon: jsxRuntime.jsx(IconWrapper, __assign({ onClick: handleIconClick }, { children: jsxRuntime.jsx(kuiIcon.CalendarIcon, { width: 19, height: 21 }) })) }, other, { ref: ref }))); } })));
|
|
358
358
|
});
|
|
359
|
-
var IconWrapper = styled__default["default"].div(templateObject_1$
|
|
360
|
-
var templateObject_1$
|
|
359
|
+
var IconWrapper = styled__default["default"].div(templateObject_1$j || (templateObject_1$j = __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"])));
|
|
360
|
+
var templateObject_1$j;
|
|
361
361
|
|
|
362
362
|
var MonthPickerContainer = function (_a) {
|
|
363
363
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
364
364
|
return jsxRuntime.jsx(StyledContainer, __assign({}, props));
|
|
365
365
|
};
|
|
366
|
-
var StyledContainer = styled__default["default"].div(templateObject_1$
|
|
367
|
-
var templateObject_1$
|
|
366
|
+
var StyledContainer = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __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"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB);
|
|
367
|
+
var templateObject_1$i;
|
|
368
368
|
|
|
369
369
|
var MonthPickerHeader = function (_a) {
|
|
370
370
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
371
371
|
return (jsxRuntime.jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowBackIcon, { width: 14, height: 12 }) })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsxRuntime.jsx(kuiIcon.ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
|
|
372
372
|
};
|
|
373
|
-
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$
|
|
373
|
+
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
374
374
|
var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
375
|
-
var templateObject_1$
|
|
375
|
+
var templateObject_1$h, templateObject_2$8;
|
|
376
376
|
|
|
377
377
|
var DesktopInputWithMonthPicker = function (_a) {
|
|
378
378
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -382,8 +382,8 @@ var DesktopInputWithMonthPicker = function (_a) {
|
|
|
382
382
|
return (jsxRuntime.jsx(DatePicker__default["default"], __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsxRuntime.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 (jsxRuntime.jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
|
|
383
383
|
} }) }));
|
|
384
384
|
};
|
|
385
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
386
|
-
var templateObject_1$
|
|
385
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
|
|
386
|
+
var templateObject_1$g;
|
|
387
387
|
|
|
388
388
|
var MenuItem = function (_a) {
|
|
389
389
|
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
@@ -418,16 +418,16 @@ var MenuItem = function (_a) {
|
|
|
418
418
|
}, []);
|
|
419
419
|
return (jsxRuntime$1.jsx(reactScroll.Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsxRuntime$1.jsx(ButtonWrapper$1, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) }) })));
|
|
420
420
|
};
|
|
421
|
-
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$
|
|
421
|
+
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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"])));
|
|
422
422
|
var disabledStyles = react.css(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n p {\n color: ", ";\n font-weight: 400;\n },\n"], ["\n p {\n color: ", ";\n font-weight: 400;\n },\n"])), kuiBasic.theme.palette.grey.seventy);
|
|
423
|
-
var templateObject_1$
|
|
423
|
+
var templateObject_1$f, templateObject_2$7;
|
|
424
424
|
|
|
425
425
|
var DesktopMenuPanel = function (_a) {
|
|
426
426
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
427
427
|
return (jsxRuntime$1.jsx(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" } }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
|
|
428
428
|
};
|
|
429
|
-
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
430
|
-
var templateObject_1$
|
|
429
|
+
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$e || (templateObject_1$e = __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"])), kuiBasic.theme.palette.background.light1);
|
|
430
|
+
var templateObject_1$e;
|
|
431
431
|
|
|
432
432
|
var InputWithMask = React.forwardRef(function (_a, ref) {
|
|
433
433
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -517,7 +517,7 @@ var PassportStrengthBar = function (_a) {
|
|
|
517
517
|
: -1;
|
|
518
518
|
return (jsxRuntime$1.jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden") }, { children: [jsxRuntime$1.jsx(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsxRuntime$1.jsx(ReliabilityLevel, { children: jsxRuntime$1.jsx(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsxRuntime$1.jsx(kuiBasic.Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsxRuntime$1.jsx(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" }))] })));
|
|
519
519
|
};
|
|
520
|
-
var Wrapper$2 = styled__default["default"].div(templateObject_1$
|
|
520
|
+
var Wrapper$2 = styled__default["default"].div(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
521
521
|
var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
522
522
|
var ReliabilityLevel = styled__default["default"].div(templateObject_3$2 || (templateObject_3$2 = __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"])));
|
|
523
523
|
var StyledLinearProgress = styled__default["default"](kuiBasic.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"])), kuiBasic.theme.palette.grey.fifteenB, function (_a) {
|
|
@@ -525,7 +525,7 @@ var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(t
|
|
|
525
525
|
return color;
|
|
526
526
|
});
|
|
527
527
|
var Description = styled__default["default"](kuiBasic.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"])));
|
|
528
|
-
var templateObject_1$
|
|
528
|
+
var templateObject_1$d, templateObject_2$6, templateObject_3$2, templateObject_4, templateObject_5;
|
|
529
529
|
|
|
530
530
|
var isValidWithMaskExp = /^[^_]+$/;
|
|
531
531
|
var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
|
|
@@ -569,13 +569,13 @@ var InputPassword = function (props) {
|
|
|
569
569
|
}, []);
|
|
570
570
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", endIcon: jsxRuntime.jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsxRuntime.jsx(kuiIcon.ClosedEyeIcon, {}) : jsxRuntime.jsx(kuiIcon.OpenEyeIcon, {}) })) }, props)), jsxRuntime.jsx(PassportStrengthBar, { strength: strength })] }));
|
|
571
571
|
};
|
|
572
|
-
var EyeIconWrapper = styled__default["default"].div(templateObject_1$
|
|
573
|
-
var templateObject_1$
|
|
572
|
+
var EyeIconWrapper = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
573
|
+
var templateObject_1$c;
|
|
574
574
|
|
|
575
575
|
var InputTextAreaMobile = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({}, props)) }), jsxRuntime.jsx(TextAreaWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); };
|
|
576
|
-
var InputWrapper = styled__default["default"].div(templateObject_1$
|
|
576
|
+
var InputWrapper = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
577
577
|
var TextAreaWrapper = styled__default["default"].div(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
578
|
-
var templateObject_1$
|
|
578
|
+
var templateObject_1$b, templateObject_2$5;
|
|
579
579
|
|
|
580
580
|
var useToggle = function (isModalOpen) {
|
|
581
581
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -593,10 +593,10 @@ var ModalFooter = function (_a) {
|
|
|
593
593
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
594
594
|
return (jsxRuntime.jsxs(StyledFooter, { children: [jsxRuntime.jsx(kuiBasic.Divider, {}), jsxRuntime.jsx(ButtonWrapper, { children: button || (jsxRuntime.jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsxRuntime.jsx(kuiIcon.CheckIcon, {}) }, otherProps, { children: label }))) })] }));
|
|
595
595
|
};
|
|
596
|
-
var StyledFooter = styled__default["default"].div(templateObject_1$
|
|
596
|
+
var StyledFooter = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __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"])), kuiBasic.theme.palette.grey.zero);
|
|
597
597
|
var ButtonWrapper = styled__default["default"].div(templateObject_2$4 || (templateObject_2$4 = __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"])));
|
|
598
598
|
var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
599
|
-
var templateObject_1$
|
|
599
|
+
var templateObject_1$a, templateObject_2$4, templateObject_3$1;
|
|
600
600
|
|
|
601
601
|
DatePicker.registerLocale("ru", ru__default["default"]);
|
|
602
602
|
var generateYearRange = function (offsetFromCurrent, maxYearCount) {
|
|
@@ -650,10 +650,10 @@ InputWithDatePicker.defaultProps = {
|
|
|
650
650
|
description: "Выберите год, месяц и число вашего рождения",
|
|
651
651
|
yearParams: { min: 18, max: 120 },
|
|
652
652
|
};
|
|
653
|
-
var ContentWrapper$1 = styled__default["default"].div(templateObject_1$
|
|
653
|
+
var ContentWrapper$1 = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __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"])));
|
|
654
654
|
var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$3 || (templateObject_2$3 = __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"])), kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.background.light1);
|
|
655
655
|
var DayContent = styled__default["default"].span(templateObject_3 || (templateObject_3 = __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"])));
|
|
656
|
-
var templateObject_1$
|
|
656
|
+
var templateObject_1$9, templateObject_2$3, templateObject_3;
|
|
657
657
|
|
|
658
658
|
var shortMonths = [
|
|
659
659
|
"ЯНВ",
|
|
@@ -716,9 +716,9 @@ var MobileInputWithMonthPicker = function (_a) {
|
|
|
716
716
|
};
|
|
717
717
|
return (jsxRuntime.jsxs(Wrapper$1, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "99.9999", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, errorMessage: error, isLabelShrink: Boolean(field.value) }, props)), jsxRuntime.jsxs(kuiBasic.Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsxRuntime.jsx(ContentWrapper, { children: jsxRuntime.jsx(DatePicker__default["default"], __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsxRuntime.jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsxRuntime.jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] }));
|
|
718
718
|
};
|
|
719
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
719
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
720
720
|
var ContentWrapper = styled__default["default"].div(templateObject_2$2 || (templateObject_2$2 = __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"])));
|
|
721
|
-
var templateObject_1$
|
|
721
|
+
var templateObject_1$8, templateObject_2$2;
|
|
722
722
|
|
|
723
723
|
var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
724
724
|
|
|
@@ -734,9 +734,9 @@ var MobileMenuPanel = function (_a) {
|
|
|
734
734
|
};
|
|
735
735
|
return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" } }, { children: jsxRuntime$1.jsx(Swiper__default["default"], __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsxRuntime$1.jsx(SlideWrapper, { children: jsxRuntime$1.jsx(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
|
|
736
736
|
};
|
|
737
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
737
|
+
var Wrapper = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __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"])), kuiBasic.theme.palette.background.light1);
|
|
738
738
|
var SlideWrapper = styled__default["default"].div(templateObject_2$1 || (templateObject_2$1 = __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"])));
|
|
739
|
-
var templateObject_1$
|
|
739
|
+
var templateObject_1$7, templateObject_2$1;
|
|
740
740
|
|
|
741
741
|
var useWindowWidth = function (time) {
|
|
742
742
|
if (time === void 0) { time = 10; }
|
|
@@ -785,8 +785,8 @@ var MenuPanel = function (_a) {
|
|
|
785
785
|
MenuPanel.defaultProps = {
|
|
786
786
|
variant: "grey",
|
|
787
787
|
};
|
|
788
|
-
var fullHeightStyles = react.css(templateObject_1$
|
|
789
|
-
var templateObject_1$
|
|
788
|
+
var fullHeightStyles = react.css(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
789
|
+
var templateObject_1$6;
|
|
790
790
|
|
|
791
791
|
var Switch = function (_a) {
|
|
792
792
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -840,15 +840,15 @@ InputPhoneWithForm.defaultProps = {
|
|
|
840
840
|
};
|
|
841
841
|
|
|
842
842
|
var Table = function (props) { return jsxRuntime.jsx(StyledTable, __assign({ cellSpacing: "0" }, props)); };
|
|
843
|
-
var StyledTable = styled__default["default"].table(templateObject_1$
|
|
843
|
+
var StyledTable = styled__default["default"].table(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
844
|
+
var templateObject_1$5;
|
|
845
|
+
|
|
846
|
+
var TableHeadCell = styled__default["default"].th(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
844
847
|
var templateObject_1$4;
|
|
845
848
|
|
|
846
|
-
var
|
|
849
|
+
var TableCell = styled__default["default"].td(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
847
850
|
var templateObject_1$3;
|
|
848
851
|
|
|
849
|
-
var TableCell = styled__default["default"].td(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
850
|
-
var templateObject_1$2;
|
|
851
|
-
|
|
852
852
|
var TableRow = function (_a) {
|
|
853
853
|
var children = _a.children, other = __rest(_a, ["children"]);
|
|
854
854
|
var childrenArr = React__namespace.Children.toArray(children);
|
|
@@ -925,13 +925,13 @@ var Popper = React.forwardRef(function (props, ref) {
|
|
|
925
925
|
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
926
926
|
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
927
927
|
// Распожить стрелочку к контенту посередине контента
|
|
928
|
-
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$
|
|
928
|
+
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsxRuntime.jsx(StyledPopper, __assign({ ref: forwardedRef, style: position, open: !!open }, other, { children: children }))] }), document.body);
|
|
929
929
|
});
|
|
930
930
|
var StyledPopper = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n max-width: 215px;\n position: absolute;\n transition: opacity 0.3s ease-out;\n opacity: ", ";\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 padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n max-width: 215px;\n position: absolute;\n transition: opacity 0.3s ease-out;\n opacity: ", ";\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) {
|
|
931
931
|
var open = _a.open;
|
|
932
932
|
return (open ? 1 : 0);
|
|
933
933
|
}, kuiBasic.theme.breakpoints.xxs);
|
|
934
|
-
var templateObject_1$
|
|
934
|
+
var templateObject_1$2, templateObject_2;
|
|
935
935
|
|
|
936
936
|
var Tooltip = React.forwardRef(function (props, ref) {
|
|
937
937
|
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children"]);
|
|
@@ -955,10 +955,18 @@ var Tooltip = React.forwardRef(function (props, ref) {
|
|
|
955
955
|
// TODO добавить возможность наведениня на подсказку без ее исчезновение (через таймер?)
|
|
956
956
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledWrapper, __assign({ onMouseEnter: handleOpen, onMouseLeave: handleClose, onTouchEnd: handleOpen, ref: elemRef }, { children: children })), jsxRuntime.jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] }));
|
|
957
957
|
});
|
|
958
|
-
var StyledWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n"], ["\n display: inline-flex;\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n"])));
|
|
958
|
+
var StyledWrapper = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n display: inline-flex;\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n"], ["\n display: inline-flex;\n cursor: pointer;\n width: fit-content;\n height: fit-content;\n"])));
|
|
959
|
+
var templateObject_1$1;
|
|
960
|
+
|
|
961
|
+
var ButtonSelect = React.forwardRef(function (props, ref) {
|
|
962
|
+
var options = props.options, otherProps = __rest(props, ["options"]);
|
|
963
|
+
return (jsxRuntime.jsx(StyledInputSelect, __assign({ value: options === null || options === void 0 ? void 0 : options[0].value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
|
|
964
|
+
});
|
|
965
|
+
var StyledInputSelect = styled__default["default"](InputSelect)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n & .MuiFilledInput-root {\n height: 32px;\n border-radius: 66px;\n padding: 0 12px;\n input {\n color: ", ";\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 -16px 0 0 !important;\n width: auto !important;\n }\n }\n & + div {\n top: 40px;\n }\n"], ["\n & .MuiFilledInput-root {\n height: 32px;\n border-radius: 66px;\n padding: 0 12px;\n input {\n color: ", ";\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 -16px 0 0 !important;\n width: auto !important;\n }\n }\n & + div {\n top: 40px;\n }\n"])), kuiBasic.theme.palette.grey.fiftyP);
|
|
959
966
|
var templateObject_1;
|
|
960
967
|
|
|
961
968
|
exports.Avatar = Avatar;
|
|
969
|
+
exports.ButtonSelect = ButtonSelect;
|
|
962
970
|
exports.ButtonTab = ButtonTab;
|
|
963
971
|
exports.ButtonsPanel = ButtonsPanel;
|
|
964
972
|
exports.CalendarHeaderWithSelect = CalendarHeaderWithSelect;
|