kui-complex 0.0.13 → 0.0.15
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 +38 -1
- package/dist/index.es.js +185 -64
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +189 -62
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -20,6 +20,7 @@ var reactScroll = require('react-scroll');
|
|
|
20
20
|
var ru = require('date-fns/locale/ru');
|
|
21
21
|
var luxon = require('luxon');
|
|
22
22
|
var Swiper = require('react-id-swiper');
|
|
23
|
+
var ReactDOM = require('react-dom');
|
|
23
24
|
|
|
24
25
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
25
26
|
|
|
@@ -48,6 +49,7 @@ var DatePicker__default = /*#__PURE__*/_interopDefaultLegacy(DatePicker);
|
|
|
48
49
|
var InputMask__default = /*#__PURE__*/_interopDefaultLegacy(InputMask);
|
|
49
50
|
var ru__default = /*#__PURE__*/_interopDefaultLegacy(ru);
|
|
50
51
|
var Swiper__default = /*#__PURE__*/_interopDefaultLegacy(Swiper);
|
|
52
|
+
var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
|
|
51
53
|
|
|
52
54
|
/******************************************************************************
|
|
53
55
|
Copyright (c) Microsoft Corporation.
|
|
@@ -104,15 +106,15 @@ var UndefinedAvatar = function (_a) {
|
|
|
104
106
|
.join("");
|
|
105
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 })) })));
|
|
106
108
|
};
|
|
107
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
108
|
-
var templateObject_1$
|
|
109
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __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$s;
|
|
109
111
|
|
|
110
112
|
var Avatar = function (_a) {
|
|
111
113
|
var size = _a.size, fullName = _a.fullName, imageUrl = _a.imageUrl, avatarRef = _a.avatarRef, otherProps = __rest(_a, ["size", "fullName", "imageUrl", "avatarRef"]);
|
|
112
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 })) })));
|
|
113
115
|
};
|
|
114
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
115
|
-
var StyledImage = styled__default["default"].img(templateObject_2$
|
|
116
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
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"])));
|
|
116
118
|
var largeAvatarCSS = function (_a) {
|
|
117
119
|
var avatarSize = _a.avatarSize;
|
|
118
120
|
return avatarSize === "lg" && react.css(templateObject_3$6 || (templateObject_3$6 = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
@@ -124,7 +126,7 @@ var sizeStyles = {
|
|
|
124
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 "]))),
|
|
125
127
|
lg: react.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
126
128
|
};
|
|
127
|
-
var templateObject_1$
|
|
129
|
+
var templateObject_1$r, templateObject_2$e, templateObject_3$6, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
128
130
|
|
|
129
131
|
var ButtonTab = function (_a) {
|
|
130
132
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -133,9 +135,9 @@ var ButtonTab = function (_a) {
|
|
|
133
135
|
};
|
|
134
136
|
return (jsxRuntime$1.jsx(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s" }, { children: label })));
|
|
135
137
|
};
|
|
136
|
-
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$
|
|
137
|
-
var inactiveStyles = react.css(templateObject_2$
|
|
138
|
-
var templateObject_1$
|
|
138
|
+
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$q || (templateObject_1$q = __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
|
+
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$q, templateObject_2$d;
|
|
139
141
|
|
|
140
142
|
var ButtonsPanel = function (_a) {
|
|
141
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"]);
|
|
@@ -158,13 +160,13 @@ var ButtonsPanel = function (_a) {
|
|
|
158
160
|
ButtonsPanel.defaultProps = {
|
|
159
161
|
isSticky: false,
|
|
160
162
|
};
|
|
161
|
-
var Content = styled__default["default"].div(templateObject_1$
|
|
162
|
-
var StyledContainer$1 = styled__default["default"].div(templateObject_2$
|
|
163
|
-
var templateObject_1$
|
|
163
|
+
var Content = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
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$p, templateObject_2$c;
|
|
164
166
|
|
|
165
167
|
var dropdownStyles = function (_a) {
|
|
166
168
|
var isOpen = _a.isOpen;
|
|
167
|
-
return react.css(templateObject_1$
|
|
169
|
+
return react.css(templateObject_1$o || (templateObject_1$o = __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);
|
|
168
170
|
};
|
|
169
171
|
var InputDropdown = function (_a) {
|
|
170
172
|
var isOpen = _a.isOpen, handleClose = _a.handleClose, buttonRef = _a.buttonRef, children = _a.children, otherProps = __rest(_a, ["isOpen", "handleClose", "buttonRef", "children"]);
|
|
@@ -188,7 +190,7 @@ var InputDropdown = function (_a) {
|
|
|
188
190
|
}
|
|
189
191
|
return (jsxRuntime$1.jsx(kuiBasic.Grid, __assign({ "data-testid": "input_dropdown", container: true, ref: dropdownRef, css: dropdownStyles({ isOpen: isOpen }) }, otherProps, { children: children })));
|
|
190
192
|
};
|
|
191
|
-
var templateObject_1$
|
|
193
|
+
var templateObject_1$o;
|
|
192
194
|
|
|
193
195
|
var InputSelectDropdown = function (_a) {
|
|
194
196
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue;
|
|
@@ -204,10 +206,10 @@ var InputSelectDropdown = function (_a) {
|
|
|
204
206
|
padding: "4px",
|
|
205
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)); }) })));
|
|
206
208
|
};
|
|
207
|
-
var OptionWrapper = styled__default["default"].div(templateObject_1$
|
|
208
|
-
var StyledOption = styled__default["default"].div(templateObject_2$
|
|
209
|
+
var OptionWrapper = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: pointer;\n"])));
|
|
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);
|
|
209
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);
|
|
210
|
-
var templateObject_1$
|
|
212
|
+
var templateObject_1$n, templateObject_2$b, templateObject_3$5;
|
|
211
213
|
|
|
212
214
|
var getFormValue = function (name, form) {
|
|
213
215
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -282,10 +284,10 @@ var InputSelect = React.forwardRef(function (props, ref) {
|
|
|
282
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,
|
|
283
285
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: other.value || value }))] }));
|
|
284
286
|
});
|
|
285
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
286
|
-
var StyledInput = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$
|
|
287
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
|
|
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"])));
|
|
287
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"])));
|
|
288
|
-
var templateObject_1$
|
|
290
|
+
var templateObject_1$m, templateObject_2$a, templateObject_3$4;
|
|
289
291
|
|
|
290
292
|
var SelectYear = function (_a) {
|
|
291
293
|
var yearOptions = _a.yearOptions; _a.options; var props = __rest(_a, ["yearOptions", "options"]);
|
|
@@ -321,25 +323,25 @@ var CalendarHeaderWithSelect = function (_a) {
|
|
|
321
323
|
var month = date.getMonth() + 1;
|
|
322
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 }) }))] })) }));
|
|
323
325
|
};
|
|
324
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
325
|
-
var templateObject_1$
|
|
326
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __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$l;
|
|
326
328
|
|
|
327
329
|
var CalendarStandardContainer = function (_a) {
|
|
328
330
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
329
331
|
return jsxRuntime.jsx(DatePickerContainer, __assign({}, props));
|
|
330
332
|
};
|
|
331
|
-
var DatePickerContainer = styled__default["default"].div(templateObject_1$
|
|
332
|
-
var templateObject_1$
|
|
333
|
+
var DatePickerContainer = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __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$k;
|
|
333
335
|
|
|
334
336
|
var CalendarStandardHeader = function (_a) {
|
|
335
337
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
336
338
|
var title = ___default["default"].capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
337
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 }) })) }))] })) }))] })));
|
|
338
340
|
};
|
|
339
|
-
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
340
|
-
var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$
|
|
341
|
+
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$j || (templateObject_1$j = __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
|
+
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"])));
|
|
341
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"])));
|
|
342
|
-
var templateObject_1$
|
|
344
|
+
var templateObject_1$j, templateObject_2$9, templateObject_3$3;
|
|
343
345
|
|
|
344
346
|
var InputForDatepicker = React.forwardRef(function (_a, ref) {
|
|
345
347
|
var onClick = _a.onClick, onBlur = _a.onBlur, onFocus = _a.onFocus, props = __rest(_a, ["onClick", "onBlur", "onFocus"]);
|
|
@@ -354,23 +356,23 @@ var InputForDatepicker = React.forwardRef(function (_a, ref) {
|
|
|
354
356
|
};
|
|
355
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 }))); } })));
|
|
356
358
|
});
|
|
357
|
-
var IconWrapper = styled__default["default"].div(templateObject_1$
|
|
358
|
-
var templateObject_1$
|
|
359
|
+
var IconWrapper = styled__default["default"].div(templateObject_1$i || (templateObject_1$i = __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$i;
|
|
359
361
|
|
|
360
362
|
var MonthPickerContainer = function (_a) {
|
|
361
363
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
362
364
|
return jsxRuntime.jsx(StyledContainer, __assign({}, props));
|
|
363
365
|
};
|
|
364
|
-
var StyledContainer = styled__default["default"].div(templateObject_1$
|
|
365
|
-
var templateObject_1$
|
|
366
|
+
var StyledContainer = styled__default["default"].div(templateObject_1$h || (templateObject_1$h = __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$h;
|
|
366
368
|
|
|
367
369
|
var MonthPickerHeader = function (_a) {
|
|
368
370
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
369
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 }) })) }))] })));
|
|
370
372
|
};
|
|
371
|
-
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$
|
|
372
|
-
var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$
|
|
373
|
-
var templateObject_1$
|
|
373
|
+
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
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$g, templateObject_2$8;
|
|
374
376
|
|
|
375
377
|
var DesktopInputWithMonthPicker = function (_a) {
|
|
376
378
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -380,8 +382,8 @@ var DesktopInputWithMonthPicker = function (_a) {
|
|
|
380
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)));
|
|
381
383
|
} }) }));
|
|
382
384
|
};
|
|
383
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
384
|
-
var templateObject_1$
|
|
385
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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$f;
|
|
385
387
|
|
|
386
388
|
var MenuItem = function (_a) {
|
|
387
389
|
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
@@ -416,16 +418,16 @@ var MenuItem = function (_a) {
|
|
|
416
418
|
}, []);
|
|
417
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 })) }) })));
|
|
418
420
|
};
|
|
419
|
-
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$
|
|
420
|
-
var disabledStyles = react.css(templateObject_2$
|
|
421
|
-
var templateObject_1$
|
|
421
|
+
var ButtonWrapper$1 = styled__default["default"].div(templateObject_1$e || (templateObject_1$e = __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
|
+
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$e, templateObject_2$7;
|
|
422
424
|
|
|
423
425
|
var DesktopMenuPanel = function (_a) {
|
|
424
426
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
425
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)); }) })));
|
|
426
428
|
};
|
|
427
|
-
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
428
|
-
var templateObject_1$
|
|
429
|
+
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$d || (templateObject_1$d = __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$d;
|
|
429
431
|
|
|
430
432
|
var InputWithController = React.forwardRef(function (_a, ref) {
|
|
431
433
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -485,15 +487,15 @@ var PassportStrengthBar = function (_a) {
|
|
|
485
487
|
: -1;
|
|
486
488
|
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" }))] })));
|
|
487
489
|
};
|
|
488
|
-
var Wrapper$2 = styled__default["default"].div(templateObject_1$
|
|
489
|
-
var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$
|
|
490
|
+
var Wrapper$2 = styled__default["default"].div(templateObject_1$c || (templateObject_1$c = __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"])));
|
|
491
|
+
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"])));
|
|
490
492
|
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"])));
|
|
491
493
|
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) {
|
|
492
494
|
var color = _a.color;
|
|
493
495
|
return color;
|
|
494
496
|
});
|
|
495
497
|
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"])));
|
|
496
|
-
var templateObject_1$
|
|
498
|
+
var templateObject_1$c, templateObject_2$6, templateObject_3$2, templateObject_4, templateObject_5;
|
|
497
499
|
|
|
498
500
|
var isValidWithMaskExp = /^[^_]+$/;
|
|
499
501
|
var simplePasswordRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{10,}$/;
|
|
@@ -537,13 +539,13 @@ var InputPassword = function (props) {
|
|
|
537
539
|
}, []);
|
|
538
540
|
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 })] }));
|
|
539
541
|
};
|
|
540
|
-
var EyeIconWrapper = styled__default["default"].div(templateObject_1$
|
|
541
|
-
var templateObject_1$
|
|
542
|
+
var EyeIconWrapper = styled__default["default"].div(templateObject_1$b || (templateObject_1$b = __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"])));
|
|
543
|
+
var templateObject_1$b;
|
|
542
544
|
|
|
543
545
|
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)) })] })); };
|
|
544
|
-
var InputWrapper = styled__default["default"].div(templateObject_1$
|
|
545
|
-
var TextAreaWrapper = styled__default["default"].div(templateObject_2$
|
|
546
|
-
var templateObject_1$
|
|
546
|
+
var InputWrapper = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
547
|
+
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"])));
|
|
548
|
+
var templateObject_1$a, templateObject_2$5;
|
|
547
549
|
|
|
548
550
|
var useToggle = function (isModalOpen) {
|
|
549
551
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -561,10 +563,10 @@ var ModalFooter = function (_a) {
|
|
|
561
563
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
562
564
|
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 }))) })] }));
|
|
563
565
|
};
|
|
564
|
-
var StyledFooter = styled__default["default"].div(templateObject_1$
|
|
565
|
-
var ButtonWrapper = styled__default["default"].div(templateObject_2$
|
|
566
|
+
var StyledFooter = styled__default["default"].div(templateObject_1$9 || (templateObject_1$9 = __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);
|
|
567
|
+
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"])));
|
|
566
568
|
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"])));
|
|
567
|
-
var templateObject_1$
|
|
569
|
+
var templateObject_1$9, templateObject_2$4, templateObject_3$1;
|
|
568
570
|
|
|
569
571
|
DatePicker.registerLocale("ru", ru__default["default"]);
|
|
570
572
|
var generateYearRange = function (offsetFromCurrent, maxYearCount) {
|
|
@@ -618,10 +620,10 @@ InputWithDatePicker.defaultProps = {
|
|
|
618
620
|
description: "Выберите год, месяц и число вашего рождения",
|
|
619
621
|
yearParams: { min: 18, max: 120 },
|
|
620
622
|
};
|
|
621
|
-
var ContentWrapper$1 = styled__default["default"].div(templateObject_1$
|
|
622
|
-
var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$
|
|
623
|
+
var ContentWrapper$1 = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __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"])));
|
|
624
|
+
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);
|
|
623
625
|
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"])));
|
|
624
|
-
var templateObject_1$
|
|
626
|
+
var templateObject_1$8, templateObject_2$3, templateObject_3;
|
|
625
627
|
|
|
626
628
|
var shortMonths = [
|
|
627
629
|
"ЯНВ",
|
|
@@ -684,9 +686,9 @@ var MobileInputWithMonthPicker = function (_a) {
|
|
|
684
686
|
};
|
|
685
687
|
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" })] }))] }));
|
|
686
688
|
};
|
|
687
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
688
|
-
var ContentWrapper = styled__default["default"].div(templateObject_2$
|
|
689
|
-
var templateObject_1$
|
|
689
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
690
|
+
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"])));
|
|
691
|
+
var templateObject_1$7, templateObject_2$2;
|
|
690
692
|
|
|
691
693
|
var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
692
694
|
|
|
@@ -702,9 +704,9 @@ var MobileMenuPanel = function (_a) {
|
|
|
702
704
|
};
|
|
703
705
|
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)); }) })) })));
|
|
704
706
|
};
|
|
705
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
706
|
-
var SlideWrapper = styled__default["default"].div(templateObject_2 || (templateObject_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"])));
|
|
707
|
-
var templateObject_1$
|
|
707
|
+
var Wrapper = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __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);
|
|
708
|
+
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"])));
|
|
709
|
+
var templateObject_1$6, templateObject_2$1;
|
|
708
710
|
|
|
709
711
|
var useWindowWidth = function (time) {
|
|
710
712
|
if (time === void 0) { time = 10; }
|
|
@@ -753,8 +755,8 @@ var MenuPanel = function (_a) {
|
|
|
753
755
|
MenuPanel.defaultProps = {
|
|
754
756
|
variant: "grey",
|
|
755
757
|
};
|
|
756
|
-
var fullHeightStyles = react.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
757
|
-
var templateObject_1;
|
|
758
|
+
var fullHeightStyles = react.css(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
759
|
+
var templateObject_1$5;
|
|
758
760
|
|
|
759
761
|
var Switch = function (_a) {
|
|
760
762
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -770,6 +772,7 @@ var InputPhoneWithForm = React.forwardRef(function (props, ref) {
|
|
|
770
772
|
var codeRegister = reactHookForm.useController({
|
|
771
773
|
control: form.control,
|
|
772
774
|
name: "".concat(name, ".phoneCode"),
|
|
775
|
+
defaultValue: "7",
|
|
773
776
|
});
|
|
774
777
|
var phoneRegister = reactHookForm.useController({
|
|
775
778
|
control: form.control,
|
|
@@ -806,6 +809,125 @@ InputPhoneWithForm.defaultProps = {
|
|
|
806
809
|
name: "phone",
|
|
807
810
|
};
|
|
808
811
|
|
|
812
|
+
var Table = function (props) { return jsxRuntime.jsx(StyledTable, __assign({ cellSpacing: "0" }, props)); };
|
|
813
|
+
var StyledTable = styled__default["default"].table(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
814
|
+
var templateObject_1$4;
|
|
815
|
+
|
|
816
|
+
var TableHeadCell = styled__default["default"].th(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
817
|
+
var templateObject_1$3;
|
|
818
|
+
|
|
819
|
+
var TableCell = styled__default["default"].td(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
820
|
+
var templateObject_1$2;
|
|
821
|
+
|
|
822
|
+
var TableRow = function (_a) {
|
|
823
|
+
var children = _a.children, other = __rest(_a, ["children"]);
|
|
824
|
+
var childrenArr = React__namespace.Children.toArray(children);
|
|
825
|
+
// @ts-ignore
|
|
826
|
+
return jsxRuntime.jsx("tr", { children: childrenArr.map(function (child) { return React__namespace.cloneElement(child, other); }) });
|
|
827
|
+
};
|
|
828
|
+
|
|
829
|
+
var placementsPositions = {
|
|
830
|
+
bottomStart: {
|
|
831
|
+
bottom: 1,
|
|
832
|
+
offset: 0,
|
|
833
|
+
},
|
|
834
|
+
bottomMiddle: {
|
|
835
|
+
bottom: 1,
|
|
836
|
+
offset: 0.5,
|
|
837
|
+
},
|
|
838
|
+
bottomEnd: {
|
|
839
|
+
bottom: 1,
|
|
840
|
+
offset: 1,
|
|
841
|
+
},
|
|
842
|
+
topStart: {
|
|
843
|
+
top: 1,
|
|
844
|
+
offset: 0,
|
|
845
|
+
},
|
|
846
|
+
topMiddle: {
|
|
847
|
+
top: 1,
|
|
848
|
+
offset: 0.5,
|
|
849
|
+
},
|
|
850
|
+
topEnd: {
|
|
851
|
+
top: 1,
|
|
852
|
+
offset: 1,
|
|
853
|
+
},
|
|
854
|
+
};
|
|
855
|
+
|
|
856
|
+
var Popper = React.forwardRef(function (props, ref) {
|
|
857
|
+
var placement = props.placement; props.withArrow; var open = props.open, children = props.children, contentRef = props.contentRef, other = __rest(props, ["placement", "withArrow", "open", "children", "contentRef"]);
|
|
858
|
+
var popperRef = React.useRef(null);
|
|
859
|
+
var _a = React.useState(null), coords = _a[0], setCoords = _a[1];
|
|
860
|
+
var _b = React.useState(null), size = _b[0], setSize = _b[1];
|
|
861
|
+
React.useEffect(function () {
|
|
862
|
+
if (contentRef.current && popperRef.current) {
|
|
863
|
+
var popper = popperRef.current;
|
|
864
|
+
var elemCoords = contentRef.current.getBoundingClientRect();
|
|
865
|
+
var popperSize = {
|
|
866
|
+
width: popper.clientWidth,
|
|
867
|
+
height: popper.clientHeight,
|
|
868
|
+
};
|
|
869
|
+
setCoords(elemCoords);
|
|
870
|
+
setSize(popperSize);
|
|
871
|
+
}
|
|
872
|
+
}, []);
|
|
873
|
+
var position = {};
|
|
874
|
+
if (coords && size) {
|
|
875
|
+
var placementPositions =
|
|
876
|
+
// @ts-ignore
|
|
877
|
+
placementsPositions[placement !== null && placement !== void 0 ? placement : "bottomMiddle"];
|
|
878
|
+
position = {
|
|
879
|
+
top: Math.max(placementPositions.top
|
|
880
|
+
? coords.top - size.height
|
|
881
|
+
: coords.top + coords.height, 0),
|
|
882
|
+
left: Math.max(coords.left +
|
|
883
|
+
coords.width * placementPositions.offset -
|
|
884
|
+
size.width * placementPositions.offset, 0),
|
|
885
|
+
};
|
|
886
|
+
}
|
|
887
|
+
var forwardedRef = function (elem) {
|
|
888
|
+
if (ref) {
|
|
889
|
+
// @ts-ignore
|
|
890
|
+
ref.current = elem;
|
|
891
|
+
}
|
|
892
|
+
// @ts-ignore
|
|
893
|
+
popperRef.current = elem;
|
|
894
|
+
};
|
|
895
|
+
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
896
|
+
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
897
|
+
// Распожить стрелочку к контенту посередине контента
|
|
898
|
+
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$1 || (templateObject_1$1 = __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);
|
|
899
|
+
});
|
|
900
|
+
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"], ["\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"])), function (_a) {
|
|
901
|
+
var open = _a.open;
|
|
902
|
+
return (open ? 1 : 0);
|
|
903
|
+
});
|
|
904
|
+
var templateObject_1$1, templateObject_2;
|
|
905
|
+
|
|
906
|
+
var Tooltip = React.forwardRef(function (props, ref) {
|
|
907
|
+
var content = props.content, onOpen = props.onOpen, onClose = props.onClose, open = props.open, children = props.children, popper = __rest(props, ["content", "onOpen", "onClose", "open", "children"]);
|
|
908
|
+
var _a = React.useState(open), isOpen = _a[0], setOpen = _a[1];
|
|
909
|
+
var elemRef = React.useRef(null);
|
|
910
|
+
var handleOpen = function () {
|
|
911
|
+
setOpen(true);
|
|
912
|
+
if (onOpen) {
|
|
913
|
+
onOpen();
|
|
914
|
+
}
|
|
915
|
+
};
|
|
916
|
+
var handleClose = function () {
|
|
917
|
+
setOpen(false);
|
|
918
|
+
if (onClose) {
|
|
919
|
+
onClose();
|
|
920
|
+
}
|
|
921
|
+
};
|
|
922
|
+
React.useEffect(function () {
|
|
923
|
+
setOpen(open);
|
|
924
|
+
}, [open]);
|
|
925
|
+
// TODO добавить возможность наведениня на подсказку без ее исчезновение (через таймер?)
|
|
926
|
+
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 }))] }));
|
|
927
|
+
});
|
|
928
|
+
var StyledWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-block;\n cursor: pointer;\n"], ["\n display: inline-block;\n cursor: pointer;\n"])));
|
|
929
|
+
var templateObject_1;
|
|
930
|
+
|
|
809
931
|
exports.Avatar = Avatar;
|
|
810
932
|
exports.ButtonTab = ButtonTab;
|
|
811
933
|
exports.ButtonsPanel = ButtonsPanel;
|
|
@@ -834,5 +956,10 @@ exports.PassportStrengthBar = PassportStrengthBar;
|
|
|
834
956
|
exports.SelectMonth = SelectMonth;
|
|
835
957
|
exports.SelectYear = SelectYear;
|
|
836
958
|
exports.Switch = Switch;
|
|
959
|
+
exports.Table = Table;
|
|
960
|
+
exports.TableCell = TableCell;
|
|
961
|
+
exports.TableHeadCell = TableHeadCell;
|
|
962
|
+
exports.TableRow = TableRow;
|
|
963
|
+
exports.Tooltip = Tooltip;
|
|
837
964
|
exports.UndefinedAvatar = UndefinedAvatar;
|
|
838
965
|
//# sourceMappingURL=index.js.map
|