kui-complex 0.0.69 → 0.0.70
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/AutocompleteOption/cjs/index.js +5 -8
- package/AutocompleteOption/cjs/index.js.map +1 -1
- package/AutocompleteOption/index.d.ts +3 -13
- package/AutocompleteOption/index.js +6 -9
- package/AutocompleteOption/index.js.map +1 -1
- package/InputWithAutocomplete/cjs/index.js.map +1 -1
- package/InputWithAutocomplete/index.js.map +1 -1
- package/cjs/index.js +97 -90
- package/cjs/index.js.map +1 -1
- package/index.d.ts +3 -6
- package/index.js +97 -90
- package/index.js.map +1 -1
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -85,14 +85,14 @@ var UndefinedAvatar = forwardRef(function (_a, ref) {
|
|
|
85
85
|
.join("");
|
|
86
86
|
return (jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar", ref: ref }, { children: jsx(Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
|
|
87
87
|
});
|
|
88
|
-
var Wrapper$8 = styled.div(templateObject_1$
|
|
89
|
-
var templateObject_1$
|
|
88
|
+
var Wrapper$8 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"], ["\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n &,\n p {\n transition: all ease-out 0.3s;\n }\n @media (min-width: 900px) {\n &:hover {\n background-color: ", ";\n p {\n color: white;\n }\n }\n }\n"])), theme.palette.brand.light, theme.palette.brand.main);
|
|
89
|
+
var templateObject_1$D;
|
|
90
90
|
|
|
91
91
|
var Avatar = forwardRef(function (props, ref) {
|
|
92
92
|
var size = props.size, fullName = props.fullName, imageUrl = props.imageUrl, otherProps = __rest(props, ["size", "fullName", "imageUrl"]);
|
|
93
93
|
return (jsx$1(Wrapper$7, __assign({ css: sizeStyles[size], ref: ref }, otherProps, { children: imageUrl ? (jsx$1(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsx$1(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
94
94
|
});
|
|
95
|
-
var Wrapper$7 = styled.div(templateObject_1$
|
|
95
|
+
var Wrapper$7 = styled.div(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
96
96
|
var StyledImage = styled.img(templateObject_2$m || (templateObject_2$m = __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"])));
|
|
97
97
|
var largeAvatarCSS = function (_a) {
|
|
98
98
|
var avatarSize = _a.avatarSize;
|
|
@@ -105,7 +105,7 @@ var sizeStyles = {
|
|
|
105
105
|
s: css(templateObject_5$2 || (templateObject_5$2 = __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 "]))),
|
|
106
106
|
lg: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
107
107
|
};
|
|
108
|
-
var templateObject_1$
|
|
108
|
+
var templateObject_1$C, templateObject_2$m, templateObject_3$9, templateObject_4$4, templateObject_5$2, templateObject_6;
|
|
109
109
|
|
|
110
110
|
var ButtonTab = forwardRef(function (_a, ref) {
|
|
111
111
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
@@ -114,9 +114,9 @@ var ButtonTab = forwardRef(function (_a, ref) {
|
|
|
114
114
|
};
|
|
115
115
|
return (jsx$1(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s", ref: ref }, { children: label })));
|
|
116
116
|
});
|
|
117
|
-
var StyledButton = styled(Button)(templateObject_1$
|
|
117
|
+
var StyledButton = styled(Button)(templateObject_1$B || (templateObject_1$B = __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"])));
|
|
118
118
|
var inactiveStyles = css(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), theme.palette.grey.seventy);
|
|
119
|
-
var templateObject_1$
|
|
119
|
+
var templateObject_1$B, templateObject_2$l;
|
|
120
120
|
|
|
121
121
|
var ButtonsPanel = forwardRef(function (_a, ref) {
|
|
122
122
|
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"]);
|
|
@@ -139,9 +139,9 @@ var ButtonsPanel = forwardRef(function (_a, ref) {
|
|
|
139
139
|
ButtonsPanel.defaultProps = {
|
|
140
140
|
isSticky: false,
|
|
141
141
|
};
|
|
142
|
-
var Content = styled.div(templateObject_1$
|
|
142
|
+
var Content = styled.div(templateObject_1$A || (templateObject_1$A = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
143
143
|
var StyledContainer$2 = styled.div(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"], ["\n background: ", ";\n top: 80px;\n z-index: 4;\n padding-top: 16px;\n padding-bottom: 24px;\n @media (max-width: 1200px) {\n padding-bottom: 18px;\n }\n @media (max-width: 600px) {\n top: 48px;\n }\n"])), theme.palette.grey.zero);
|
|
144
|
-
var templateObject_1$
|
|
144
|
+
var templateObject_1$A, templateObject_2$k;
|
|
145
145
|
|
|
146
146
|
var InputDropdown = forwardRef(function (props, ref) {
|
|
147
147
|
var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent"]);
|
|
@@ -187,13 +187,13 @@ var InputDropdown = forwardRef(function (props, ref) {
|
|
|
187
187
|
ref.current = elem;
|
|
188
188
|
dropdownRef.current = elem;
|
|
189
189
|
};
|
|
190
|
-
return (jsxs$1(StyledDropdown$2, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsx(StyledWrapper$
|
|
190
|
+
return (jsxs$1(StyledDropdown$2, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsx(StyledWrapper$6, __assign({ isScrollable: isScrollable }, { children: jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })));
|
|
191
191
|
});
|
|
192
|
-
var StyledDropdown$2 = styled(Grid)(templateObject_1$
|
|
192
|
+
var StyledDropdown$2 = styled(Grid)(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n width: 100%;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n top: 50px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n border-radius: 0 0 8px 8px;\n user-select: none;\n"], ["\n width: 100%;\n display: ", ";\n position: absolute;\n background: ", ";\n z-index: 3;\n top: 50px;\n box-shadow: 0px 26px 34px 0px #0000001a;\n border-radius: 0 0 8px 8px;\n user-select: none;\n"])), function (_a) {
|
|
193
193
|
var isOpen = _a.isOpen;
|
|
194
194
|
return (isOpen ? "flex" : "none");
|
|
195
195
|
}, theme.palette.grey.zero);
|
|
196
|
-
var StyledWrapper$
|
|
196
|
+
var StyledWrapper$6 = styled.div(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n width: 100%;\n box-sizing: border-box;\n padding: ", ";\n"], ["\n width: 100%;\n box-sizing: border-box;\n padding: ", ";\n"])), function (_a) {
|
|
197
197
|
var isScrollable = _a.isScrollable;
|
|
198
198
|
return isScrollable ? "14px 8px 8px 0" : "14px 0px 8px 0";
|
|
199
199
|
});
|
|
@@ -201,7 +201,7 @@ var ScrollingContainer = styled.div(templateObject_3$8 || (templateObject_3$8 =
|
|
|
201
201
|
var isScrollable = _a.isScrollable;
|
|
202
202
|
return (isScrollable ? "4px" : "0px");
|
|
203
203
|
}, theme.palette.grey.fifteenB, theme.palette.grey.thirty);
|
|
204
|
-
var templateObject_1$
|
|
204
|
+
var templateObject_1$z, templateObject_2$j, templateObject_3$8;
|
|
205
205
|
|
|
206
206
|
var InputSelectDropdown = forwardRef(function (_a, ref) {
|
|
207
207
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue, renderOption = _a.renderOption;
|
|
@@ -212,7 +212,7 @@ var InputSelectDropdown = forwardRef(function (_a, ref) {
|
|
|
212
212
|
};
|
|
213
213
|
return (jsx(StyledDropdown$1, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsx(OptionWrapper, __assign({ disabled: option.disabled, onClick: function () { return handleClick(option); }, "data-value": "autocomplete_option_".concat(option.value), "data-testid": "autocomplete_option_".concat(key) }, { children: renderOption(option, selectedValue) }), option.label)); }) })));
|
|
214
214
|
});
|
|
215
|
-
var OptionWrapper = styled.div(templateObject_1$
|
|
215
|
+
var OptionWrapper = styled.div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n width: 100%;\n padding: 2px 0;\n cursor: ", ";\n p {\n color: ", ";\n }\n"], ["\n width: 100%;\n padding: 2px 0;\n cursor: ", ";\n p {\n color: ", ";\n }\n"])), function (_a) {
|
|
216
216
|
var disabled = _a.disabled;
|
|
217
217
|
return (disabled ? "auto" : "pointer");
|
|
218
218
|
}, function (_a) {
|
|
@@ -220,7 +220,7 @@ var OptionWrapper = styled.div(templateObject_1$x || (templateObject_1$x = __mak
|
|
|
220
220
|
return disabled ? theme.palette.grey.fiftyP : theme.palette.grey.seventy;
|
|
221
221
|
});
|
|
222
222
|
var StyledDropdown$1 = styled(InputDropdown)(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"], ["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"])));
|
|
223
|
-
var templateObject_1$
|
|
223
|
+
var templateObject_1$y, templateObject_2$i;
|
|
224
224
|
|
|
225
225
|
function InputSelectBase(_a) {
|
|
226
226
|
var _b;
|
|
@@ -249,22 +249,22 @@ function InputSelectBase(_a) {
|
|
|
249
249
|
current: (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
250
250
|
}, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption }))] }));
|
|
251
251
|
}
|
|
252
|
-
var Wrapper$6 = styled.div(templateObject_1$
|
|
252
|
+
var Wrapper$6 = styled.div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
|
|
253
253
|
var StyledInput$1 = styled(InputWithAdornments)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputMessage {\n opacity: ", ";\n }\n"], ["\n cursor: pointer;\n input,\n label {\n cursor: pointer !important;\n }\n .KUI-InputMessage {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
254
254
|
var isDropdownOpen = _a.isDropdownOpen;
|
|
255
255
|
return (isDropdownOpen ? 0 : 1);
|
|
256
256
|
});
|
|
257
|
-
var templateObject_1$
|
|
257
|
+
var templateObject_1$x, templateObject_2$h;
|
|
258
258
|
|
|
259
259
|
function InputSelectOption(props) {
|
|
260
260
|
var option = props.option, selectedValue = props.selectedValue;
|
|
261
261
|
return (jsx(StyledOption$1, __assign({ selected: selectedValue === option.value }, { children: jsx(Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })));
|
|
262
262
|
}
|
|
263
|
-
var StyledOption$1 = styled.div(templateObject_1$
|
|
263
|
+
var StyledOption$1 = styled.div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
264
264
|
var selected = _a.selected;
|
|
265
265
|
return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
|
|
266
266
|
}, theme.palette.background.light1);
|
|
267
|
-
var templateObject_1$
|
|
267
|
+
var templateObject_1$w;
|
|
268
268
|
|
|
269
269
|
function InputSelect(_a) {
|
|
270
270
|
var _b;
|
|
@@ -323,25 +323,25 @@ var CalendarHeaderWithSelect = forwardRef(function (_a, ref) {
|
|
|
323
323
|
var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === currentYear ? max === null || max === void 0 ? void 0 : max.month : 11;
|
|
324
324
|
return (jsx(Wrapper$5, __assign({ ref: ref }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectYear, { min: min === null || min === void 0 ? void 0 : min.year, max: max === null || max === void 0 ? void 0 : max.year, yearOptions: yearOptions, value: year, handleChange: changeYear }) })), jsx(Grid, __assign({ item: true, xs: 6 }, { children: jsx(SelectMonth, { min: (Number(min === null || min === void 0 ? void 0 : min.year) >= currentYear && minMonth), max: (Number(max === null || max === void 0 ? void 0 : max.year) <= currentYear && maxMonth), value: month, handleChange: changeMonth }) }))] })) })));
|
|
325
325
|
});
|
|
326
|
-
var Wrapper$5 = styled.div(templateObject_1$
|
|
327
|
-
var templateObject_1$
|
|
326
|
+
var Wrapper$5 = styled.div(templateObject_1$v || (templateObject_1$v = __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$v;
|
|
328
328
|
|
|
329
329
|
var CalendarStandardContainer = forwardRef(function (_a, ref) {
|
|
330
330
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
331
331
|
return jsx(DatePickerContainer, __assign({ ref: ref }, props));
|
|
332
332
|
});
|
|
333
|
-
var DatePickerContainer = styled.div(templateObject_1$
|
|
334
|
-
var templateObject_1$
|
|
333
|
+
var DatePickerContainer = styled.div(templateObject_1$u || (templateObject_1$u = __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--today {\n color: ", ";\n background-color: ", ";\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--today {\n color: ", ";\n background-color: ", ";\n }\n .react-datepicker__day--selected {\n background: white;\n border: 1px solid #e1e4e8;\n color: ", ";\n p {\n color: ", ";\n }\n }\n .react-datepicker__day--selected.warning_day {\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n }\n @media (max-width: 600px) {\n .react-datepicker__day {\n max-width: 48px;\n max-height: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n height: calc((100vw - (18px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n max-width: 48px;\n width: calc((100vw - (18px * 7)) / 7);\n }\n }\n }\n @media (max-width: 350px) {\n .react-datepicker__day {\n width: calc((100vw - (6px * 7)) / 7);\n height: calc((100vw - (6px * 7)) / 7);\n }\n .react-datepicker__day-names {\n .react-datepicker__day-name {\n width: calc((100vw - (6px * 7)) / 7);\n }\n }\n }\n"])), theme.palette.grey.fiftyP, theme.palette.background.light3, theme.palette.background.light3, theme.palette.brand.main, theme.palette.brand.light, theme.palette.brand.main, theme.palette.brand.main, theme.palette.grey.fifteenB, theme.palette.red.seventy, theme.palette.grey.zero);
|
|
334
|
+
var templateObject_1$u;
|
|
335
335
|
|
|
336
336
|
var CalendarStandardHeader = forwardRef(function (_a, ref) {
|
|
337
337
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
338
338
|
var title = _.capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
339
339
|
return (jsxs$1(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledHeading, __assign({ size: "h4" }, { children: title })) })), jsx(Grid, __assign({ item: true }, { children: jsxs$1(Grid, __assign({ container: true, spacing: 2 }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", "data-testid": "prev_month_button", variant: "white", disabled: prevMonthButtonDisabled, onClick: decreaseMonth }, { children: jsx(PrevArrowIcon, { width: 10, height: 10 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(CircleButtonStyled, __assign({ isCircle: true, size: "xs", variant: "white", disabled: nextMonthButtonDisabled, onClick: increaseMonth }, { children: jsx(NextArrowIcon, { width: 10, height: 10 }) })) }))] })) }))] })));
|
|
340
340
|
});
|
|
341
|
-
var HeaderWrapper = styled(Grid)(templateObject_1$
|
|
341
|
+
var HeaderWrapper = styled(Grid)(templateObject_1$t || (templateObject_1$t = __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(Heading)(templateObject_2$g || (templateObject_2$g = __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(Button)(templateObject_3$7 || (templateObject_3$7 = __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$t, templateObject_2$g, templateObject_3$7;
|
|
345
345
|
|
|
346
346
|
var InputForDatepicker = forwardRef(function (props, ref) {
|
|
347
347
|
var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
|
|
@@ -356,23 +356,23 @@ var InputForDatepicker = forwardRef(function (props, ref) {
|
|
|
356
356
|
var Icon = function () { return (jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsx(CalendarIcon, { width: 19, height: 21 }) }))); };
|
|
357
357
|
return (jsx(InputWithMask$1, __assign({ disabled: disabled, endIcon: !startIcon && jsx(Icon, {}), startIcon: startIcon && jsx(Icon, {}) }, other, { ref: ref })));
|
|
358
358
|
});
|
|
359
|
-
var IconWrapper = styled.div(templateObject_1$
|
|
360
|
-
var templateObject_1$
|
|
359
|
+
var IconWrapper = styled.div(templateObject_1$s || (templateObject_1$s = __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$s;
|
|
361
361
|
|
|
362
362
|
var MonthPickerContainer = forwardRef(function (_a, ref) {
|
|
363
363
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
364
364
|
return jsx(StyledContainer$1, __assign({ ref: ref }, props));
|
|
365
365
|
});
|
|
366
|
-
var StyledContainer$1 = styled.div(templateObject_1$
|
|
367
|
-
var templateObject_1$
|
|
366
|
+
var StyledContainer$1 = styled.div(templateObject_1$r || (templateObject_1$r = __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 color: white !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 color: white !important;\n }\n .react-datepicker__month-wrapper {\n border-bottom: 1px solid ", ";\n }\n\n .react-datepicker__month-wrapper:last-child {\n border-bottom: none;\n }\n\n @media (max-width: 600px) {\n .react-datepicker__month-container {\n width: 100%;\n height: 100%;\n }\n .react-datepicker__month {\n margin: 0px 16px 16px !important;\n height: calc(100% - 58px);\n text-align: center;\n width: auto;\n }\n .react-datepicker__month-text {\n margin: 8px !important;\n }\n .react-datepicker__month-text:after {\n height: calc(100% + 16px);\n top: -8px;\n right: -8px;\n }\n .react-datepicker__month-text:nth-child(3n):after {\n content: none;\n }\n }\n @media (max-width: 600px) {\n width: 100%;\n height: 262px;\n box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.1);\n }\n"])), theme.palette.background.light1, theme.palette.grey.fifteenB, theme.palette.grey.fifteenB, theme.palette.brand.main, theme.palette.grey.fifteenB);
|
|
367
|
+
var templateObject_1$r;
|
|
368
368
|
|
|
369
369
|
var MonthPickerHeader = forwardRef(function (_a, ref) {
|
|
370
370
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
371
371
|
return (jsxs$1(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { children: [jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: prevYearButtonDisabled, onClick: decreaseYear }, { children: jsx(ArrowBackIcon, { width: 14, height: 12 }) })) })), jsx(Grid, __assign({ item: true }, { children: jsx(Caption, __assign({ size: "sm", weight: 600 }, { children: date.getFullYear() })) })), jsx(Grid, __assign({ item: true }, { children: jsx(StyledIconButton, __assign({ disabled: nextYearButtonDisabled, onClick: increaseYear }, { children: jsx(ArrowNextIcon, { width: 14, height: 12 }) })) }))] })));
|
|
372
372
|
});
|
|
373
|
-
var StyledIconButton = styled(IconButton)(templateObject_1$
|
|
373
|
+
var StyledIconButton = styled(IconButton)(templateObject_1$q || (templateObject_1$q = __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(Grid)(templateObject_2$f || (templateObject_2$f = __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$q, templateObject_2$f;
|
|
376
376
|
|
|
377
377
|
var DesktopInputWithMonthPicker = forwardRef(function (_a, ref) {
|
|
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 = forwardRef(function (_a, ref) {
|
|
|
382
382
|
return (jsx(DatePicker, __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, disabled: disabled, message: (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message }, otherProps)), showMonthYearPicker: true, dateFormat: "MM.yyyy", popperPlacement: "bottom-end", calendarContainer: MonthPickerContainer, renderCustomHeader: function (props) { return (jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
|
|
383
383
|
} }) })));
|
|
384
384
|
});
|
|
385
|
-
var Wrapper$4 = styled.div(templateObject_1$
|
|
386
|
-
var templateObject_1$
|
|
385
|
+
var Wrapper$4 = styled.div(templateObject_1$p || (templateObject_1$p = __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$p;
|
|
387
387
|
|
|
388
388
|
var MenuItem = forwardRef(function (_a, ref) {
|
|
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 = forwardRef(function (_a, ref) {
|
|
|
418
418
|
}, []);
|
|
419
419
|
return (jsx$1(Link, __assign({ to: tab.label, spy: true, smooth: true, duration: 500, offset: offset, onSetActive: handleSelect }, { children: jsx$1(ButtonWrapper$1, __assign({ ref: ref }, { children: jsx$1(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.div(templateObject_1$
|
|
421
|
+
var ButtonWrapper$1 = styled.div(templateObject_1$o || (templateObject_1$o = __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 = css(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n p {\n color: ", ";\n font-weight: 400;\n },\n"], ["\n p {\n color: ", ";\n font-weight: 400;\n },\n"])), theme.palette.grey.seventy);
|
|
423
|
-
var templateObject_1$
|
|
423
|
+
var templateObject_1$o, templateObject_2$e;
|
|
424
424
|
|
|
425
425
|
var DesktopMenuPanel = forwardRef(function (_a, ref) {
|
|
426
426
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
427
427
|
return (jsx$1(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { children: tabs.map(function (tab, index) { return (jsx$1(Grid, __assign({ item: true }, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, offset: -121 }, other), tab.label) }), index)); }) })));
|
|
428
428
|
});
|
|
429
|
-
var Wrapper$3 = styled(Grid)(templateObject_1$
|
|
430
|
-
var templateObject_1$
|
|
429
|
+
var Wrapper$3 = styled(Grid)(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background-color: ", ";\n padding: 16px 16px 24px;\n @media (max-width: 900px) {\n justify-content: space-between;\n }\n @media (max-width: 765px) {\n display: none;\n }\n"])), theme.palette.background.light1);
|
|
430
|
+
var templateObject_1$n;
|
|
431
431
|
|
|
432
432
|
var InputWithMask = forwardRef(function (_a, ref) {
|
|
433
433
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -503,7 +503,7 @@ var PassportStrengthBar = forwardRef(function (_a, ref) {
|
|
|
503
503
|
: -1;
|
|
504
504
|
return (jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden"), ref: ref }, { children: [jsx$1(ReliabilityLevelWrapper, { children: Object.keys(strengthCoefficients).map(function (item, key) { return (jsx$1(ReliabilityLevel, { children: jsx$1(StyledLinearProgress, { "data-testid": "progress_item_".concat(item), value: strengthKey >= key ? 100 : 0, color: color }) }, item)); }) }), jsx$1(Caption, __assign({ "data-testid": "strength_bar_explanation", size: "s", css: { color: color } }, { children: strength && strengthTexts[strength] })), jsx$1(Description, __assign({ size: "s", color: "fiftyP" }, { children: "\u041F\u0430\u0440\u043E\u043B\u044C \u0434\u043E\u043B\u0436\u0435\u043D \u0441\u043E\u0441\u0442\u043E\u044F\u0442\u044C \u0438\u0437 10 \u0441\u0438\u043C\u0432\u043E\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442\u044C \u0446\u0438\u0444\u0440\u044B, \u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0438 \u0441\u0442\u0440\u043E\u0447\u043D\u044B\u0435 \u043B\u0430\u0442\u0438\u043D\u0441\u043A\u0438\u0435 \u0431\u0443\u0432\u044B" }))] })));
|
|
505
505
|
});
|
|
506
|
-
var Wrapper$2 = styled.div(templateObject_1$
|
|
506
|
+
var Wrapper$2 = styled.div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
507
507
|
var ReliabilityLevelWrapper = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
508
508
|
var ReliabilityLevel = styled.div(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
509
509
|
var StyledLinearProgress = styled(LinearProgress)(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"], ["\n height: 8px;\n border-radius: 8px;\n background-color: ", ";\n & .KUI-LinearProgress_bar {\n background-color: ", ";\n width: 102%;\n }\n"])), theme.palette.grey.fifteenB, function (_a) {
|
|
@@ -511,7 +511,7 @@ var StyledLinearProgress = styled(LinearProgress)(templateObject_4$3 || (templat
|
|
|
511
511
|
return color;
|
|
512
512
|
});
|
|
513
513
|
var Description = styled(Caption)(templateObject_5$1 || (templateObject_5$1 = __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"])));
|
|
514
|
-
var templateObject_1$
|
|
514
|
+
var templateObject_1$m, templateObject_2$d, templateObject_3$6, templateObject_4$3, templateObject_5$1;
|
|
515
515
|
|
|
516
516
|
var getFormValue = function (name, form) {
|
|
517
517
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -566,13 +566,13 @@ var InputPassword = forwardRef(function (props, ref) {
|
|
|
566
566
|
}, []);
|
|
567
567
|
return (jsxs$1(Fragment$1, { children: [jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, endIcon: jsx(EyeIconWrapper, __assign({ "data-testid": "show_value_btn", onClick: handleShowChange }, { children: showPassword ? jsx(ClosedEyeIcon, {}) : jsx(OpenEyeIcon, {}) })) }, props)), jsx(PassportStrengthBar, { strength: strength })] }));
|
|
568
568
|
});
|
|
569
|
-
var EyeIconWrapper = styled.div(templateObject_1$
|
|
570
|
-
var templateObject_1$
|
|
569
|
+
var EyeIconWrapper = styled.div(templateObject_1$l || (templateObject_1$l = __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"])));
|
|
570
|
+
var templateObject_1$l;
|
|
571
571
|
|
|
572
572
|
var InputTextAreaMobile = forwardRef(function (props) { return (jsxs$1(Fragment$1, { children: [jsx(InputWrapper, { children: jsx(InputWithController, __assign({}, props)) }), jsx(TextAreaWrapper, { children: jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); });
|
|
573
|
-
var InputWrapper = styled.div(templateObject_1$
|
|
573
|
+
var InputWrapper = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
574
574
|
var TextAreaWrapper = styled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
575
|
-
var templateObject_1$
|
|
575
|
+
var templateObject_1$k, templateObject_2$c;
|
|
576
576
|
|
|
577
577
|
var useToggle = function (isModalOpen) {
|
|
578
578
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -590,10 +590,10 @@ var ModalFooter = forwardRef(function (_a, ref) {
|
|
|
590
590
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
591
591
|
return (jsxs$1(StyledFooter, __assign({ ref: ref }, { children: [jsx(Divider, {}), jsx(ButtonWrapper, { children: button || (jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsx(CheckIcon, {}) }, otherProps, { children: label }))) })] })));
|
|
592
592
|
});
|
|
593
|
-
var StyledFooter = styled.div(templateObject_1$
|
|
593
|
+
var StyledFooter = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"], ["\n background: ", ";\n border-radius: 0 0 12px 12px;\n z-index: 10;\n position: sticky;\n bottom: 0;\n left: 0;\n"])), theme.palette.grey.zero);
|
|
594
594
|
var ButtonWrapper = styled.div(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
595
595
|
var ButtonStyled = styled(Button)(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
596
|
-
var templateObject_1$
|
|
596
|
+
var templateObject_1$j, templateObject_2$b, templateObject_3$5;
|
|
597
597
|
|
|
598
598
|
function setRef(ref, value) {
|
|
599
599
|
if (typeof ref === "function") {
|
|
@@ -697,14 +697,14 @@ InputWithDatePicker.defaultProps = {
|
|
|
697
697
|
footerLabel: "Подтвердить",
|
|
698
698
|
alignTitle: "center",
|
|
699
699
|
};
|
|
700
|
-
var ContentWrapper$1 = styled.div(templateObject_1$
|
|
700
|
+
var ContentWrapper$1 = styled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n padding: 0px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"], ["\n padding: 0px 40px 24px;\n @media (max-width: 600px) {\n padding: 20px 0 0;\n }\n"])));
|
|
701
701
|
var StyledCalendarStandardContainer = styled(CalendarStandardContainer)(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"], ["\n height: 410px;\n .react-datepicker__header {\n padding: 0 !important;\n }\n .react-datepicker__day-names {\n padding: 35px 22px 0;\n background-color: ", ";\n border-radius: 16px 16px 0 0;\n @media (max-width: 900px) {\n padding: 24px 16px 0;\n }\n }\n .react-datepicker__month {\n justify-content: space-between;\n height: calc(100% - 124px);\n background-color: ", ";\n border-radius: 0 0 16px 16px;\n padding: 20px 22px 24px;\n margin: 0 !important;\n box-sizing: border-box;\n @media (max-width: 900px) {\n padding: 20px 16px 24px;\n }\n }\n @media (max-width: 600px) {\n height: auto;\n margin-bottom: -4px;\n }\n"])), theme.palette.background.light1, theme.palette.background.light1);
|
|
702
702
|
var DayContent = styled.span(templateObject_3$4 || (templateObject_3$4 = __makeTemplateObject(["\n padding-top: 1px;\n font-family: Inter, sans-serif;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"], ["\n padding-top: 1px;\n font-family: Inter, sans-serif;\n @media (max-width: 600px) {\n font-weight: 400;\n }\n"])));
|
|
703
703
|
var StyledModal = styled(Modal)(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n .KUI-Modal_title {\n font-size: 24px;\n line-height: 32px;\n text-align: ", ";\n }\n .KUI-Modal_description {\n margin-bottom: 36px;\n }\n"], ["\n .KUI-Modal_title {\n font-size: 24px;\n line-height: 32px;\n text-align: ", ";\n }\n .KUI-Modal_description {\n margin-bottom: 36px;\n }\n"])), function (_a) {
|
|
704
704
|
var alignTitle = _a.alignTitle;
|
|
705
705
|
return alignTitle || "center";
|
|
706
706
|
});
|
|
707
|
-
var templateObject_1$
|
|
707
|
+
var templateObject_1$i, templateObject_2$a, templateObject_3$4, templateObject_4$2;
|
|
708
708
|
|
|
709
709
|
var shortMonths = [
|
|
710
710
|
"ЯНВ",
|
|
@@ -767,9 +767,9 @@ var MobileInputWithMonthPicker = forwardRef(function (_a, ref) {
|
|
|
767
767
|
};
|
|
768
768
|
return (jsxs$1(Wrapper$1, __assign({ ref: ref }, { children: [jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxs$1(Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsx(ContentWrapper, { children: jsx(DatePicker, __assign({ inline: true, showMonthYearPicker: true, dateFormat: "MM.yyyy", selected: date, onChange: function (newDate) { return setDate(newDate); }, locale: ruCustom, calendarContainer: MonthPickerContainer, renderCustomHeader: function (headProps) { return (jsx(MonthPickerHeader, __assign({}, headProps))); } }, datePickerProps)) }), jsx(ModalFooter, { fullWidth: true, disabled: !date, onClick: acceptWithDateSelected, label: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C" })] }))] })));
|
|
769
769
|
});
|
|
770
|
-
var Wrapper$1 = styled.div(templateObject_1$
|
|
770
|
+
var Wrapper$1 = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
771
771
|
var ContentWrapper = styled.div(templateObject_2$9 || (templateObject_2$9 = __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"])));
|
|
772
|
-
var templateObject_1$
|
|
772
|
+
var templateObject_1$h, templateObject_2$9;
|
|
773
773
|
|
|
774
774
|
var InputWithMonthPicker = function (props) { return (jsxs$1(Fragment$1, { children: [jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
775
775
|
|
|
@@ -785,9 +785,9 @@ var MobileMenuPanel = forwardRef(function (_a, ref) {
|
|
|
785
785
|
};
|
|
786
786
|
return (jsx$1(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { children: jsx$1(Swiper, __assign({ spaceBetween: 8, slidesPerView: "auto", slideToClickedSlide: true, ref: swiperRef }, { children: tabs.map(function (tab, index) { return (jsx$1(SlideWrapper, { children: jsx$1(MenuItem, __assign({ tab: tab, index: index, handleClick: slideTo, offset: -121 }, other), tab.label) }, index)); }) })) })));
|
|
787
787
|
});
|
|
788
|
-
var Wrapper = styled.div(templateObject_1$
|
|
788
|
+
var Wrapper = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"], ["\n position: sticky;\n top: 49px;\n left: 0;\n z-index: 11;\n background: ", ";\n padding: 16px 0 24px;\n @media (min-width: 766px) {\n display: none;\n }\n"])), theme.palette.background.light1);
|
|
789
789
|
var SlideWrapper = styled.div(templateObject_2$8 || (templateObject_2$8 = __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"])));
|
|
790
|
-
var templateObject_1$
|
|
790
|
+
var templateObject_1$g, templateObject_2$8;
|
|
791
791
|
|
|
792
792
|
var useWindowWidth = function (time) {
|
|
793
793
|
if (time === void 0) { time = 10; }
|
|
@@ -837,8 +837,8 @@ var MenuPanel = forwardRef(function (_a, ref) {
|
|
|
837
837
|
MenuPanel.defaultProps = {
|
|
838
838
|
variant: "grey",
|
|
839
839
|
};
|
|
840
|
-
var fullHeightStyles = css(templateObject_1$
|
|
841
|
-
var templateObject_1$
|
|
840
|
+
var fullHeightStyles = css(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
841
|
+
var templateObject_1$f;
|
|
842
842
|
|
|
843
843
|
var Switch = forwardRef(function (_a, ref) {
|
|
844
844
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -891,15 +891,15 @@ InputPhoneWithForm.defaultProps = {
|
|
|
891
891
|
};
|
|
892
892
|
|
|
893
893
|
var Table = forwardRef(function (props, ref) { return jsx(StyledTable, __assign({ cellSpacing: "0", ref: ref }, props)); });
|
|
894
|
-
var StyledTable = styled.table(templateObject_1$
|
|
894
|
+
var StyledTable = styled.table(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
895
|
+
var templateObject_1$e;
|
|
896
|
+
|
|
897
|
+
var TableHeadCell = styled.th(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
895
898
|
var templateObject_1$d;
|
|
896
899
|
|
|
897
|
-
var
|
|
900
|
+
var TableCell = styled.td(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
898
901
|
var templateObject_1$c;
|
|
899
902
|
|
|
900
|
-
var TableCell = styled.td(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
901
|
-
var templateObject_1$b;
|
|
902
|
-
|
|
903
903
|
var TableRow = forwardRef(function (_a, ref) {
|
|
904
904
|
var children = _a.children, other = __rest(_a, ["children"]);
|
|
905
905
|
var childrenArr = React.Children.toArray(children);
|
|
@@ -937,7 +937,7 @@ var PopperBase = forwardRef(function (props, ref) {
|
|
|
937
937
|
props.placement; var open = props.open, children = props.children, spacing = props.spacing, className = props.className, style = props.style, other = __rest(props, ["placement", "open", "children", "spacing", "className", "style"]);
|
|
938
938
|
return (jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames("KUI-Popper", className), spacing: spacing, style: style }, { children: jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
|
|
939
939
|
});
|
|
940
|
-
var StyledPopperWrapper = styled.div(templateObject_1$
|
|
940
|
+
var StyledPopperWrapper = styled.div(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n position: absolute;\n max-width: 215px;\n width: max-content;\n padding: ", ";\n z-index: 10;\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"], ["\n position: absolute;\n max-width: 215px;\n width: max-content;\n padding: ", ";\n z-index: 10;\n @media (max-width: ", "px) {\n position: fixed;\n bottom: 24px;\n top: auto !important;\n left: 16px !important;\n width: calc(100vw - 32px);\n max-width: unset;\n }\n"])), function (_a) {
|
|
941
941
|
var spacing = _a.spacing;
|
|
942
942
|
return spacing || 0;
|
|
943
943
|
}, theme.breakpoints.xxs);
|
|
@@ -945,7 +945,7 @@ var StyledPopper = styled.div(templateObject_2$7 || (templateObject_2$7 = __make
|
|
|
945
945
|
var open = _a.open;
|
|
946
946
|
return (open ? 1 : 0);
|
|
947
947
|
});
|
|
948
|
-
var templateObject_1$
|
|
948
|
+
var templateObject_1$b, templateObject_2$7;
|
|
949
949
|
|
|
950
950
|
var PopperWithPortal = forwardRef(function (props, ref) {
|
|
951
951
|
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
@@ -989,9 +989,9 @@ var PopperWithPortal = forwardRef(function (props, ref) {
|
|
|
989
989
|
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
990
990
|
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
991
991
|
// Распожить стрелочку к контенту посередине контента
|
|
992
|
-
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$
|
|
992
|
+
return ReactDOM.createPortal(jsxs$1(Fragment$1, { children: [jsx(Global, { styles: css(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
|
|
993
993
|
});
|
|
994
|
-
var templateObject_1$
|
|
994
|
+
var templateObject_1$a;
|
|
995
995
|
|
|
996
996
|
var StaticPopper = forwardRef(function (props, ref) {
|
|
997
997
|
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
@@ -1073,24 +1073,24 @@ var Tooltip = forwardRef(function (props, ref) {
|
|
|
1073
1073
|
useEffect(function () {
|
|
1074
1074
|
setOpen(open);
|
|
1075
1075
|
}, [open]);
|
|
1076
|
-
return (jsxs$1(StyledWrapper$
|
|
1076
|
+
return (jsxs$1(StyledWrapper$5, __assign({ onMouseLeave: handleClose, ref: ref }, { children: [jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsx(StyledContent, { children: children }) })), jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
|
|
1077
1077
|
});
|
|
1078
|
-
var containerCSS = css(templateObject_1$
|
|
1079
|
-
var StyledWrapper$
|
|
1078
|
+
var containerCSS = css(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"], ["\n display: inline-flex;\n width: 100%;\n height: fit-content;\n"])));
|
|
1079
|
+
var StyledWrapper$5 = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n ", ";\n position: relative;\n"], ["\n ", ";\n position: relative;\n"])), containerCSS);
|
|
1080
1080
|
var StyledContentWrapper = styled.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n ", ";\n cursor: ", ";\n"], ["\n ", ";\n cursor: ", ";\n"])), containerCSS, function (_a) {
|
|
1081
1081
|
var cursor = _a.cursor;
|
|
1082
1082
|
return cursor;
|
|
1083
1083
|
});
|
|
1084
1084
|
var StyledContent = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n ", ";\n z-index: -1;\n"], ["\n ", ";\n z-index: -1;\n"])), containerCSS);
|
|
1085
|
-
var templateObject_1$
|
|
1085
|
+
var templateObject_1$9, templateObject_2$6, templateObject_3$3, templateObject_4$1;
|
|
1086
1086
|
|
|
1087
1087
|
var ButtonSelect = forwardRef(function (props, ref) {
|
|
1088
1088
|
var _a;
|
|
1089
1089
|
var options = props.options, otherProps = __rest(props, ["options"]);
|
|
1090
1090
|
return (jsx(StyledInputSelect, __assign({ value: (_a = options === null || options === void 0 ? void 0 : options[0]) === null || _a === void 0 ? void 0 : _a.value, options: options, iconProps: { width: 9, height: 5 } }, otherProps, { ref: ref })));
|
|
1091
1091
|
});
|
|
1092
|
-
var StyledInputSelect = styled(InputSelect)(templateObject_1$
|
|
1093
|
-
var templateObject_1$
|
|
1092
|
+
var StyledInputSelect = styled(InputSelect)(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ", "px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"], ["\n &.KUI-Input_container {\n height: 40px;\n width: fit-content;\n input {\n height: 40px;\n border-radius: 66px;\n padding: 0 12px;\n transform: none;\n font-size: 12px;\n line-height: 14px;\n margin: 0 !important;\n width: auto !important;\n }\n\n @media (max-width: ", "px) {\n height: 32px;\n input {\n height: 32px;\n }\n }\n }\n & + div {\n top: 22px;\n padding-top: 22px;\n }\n"])), theme.breakpoints.xs);
|
|
1093
|
+
var templateObject_1$8;
|
|
1094
1094
|
|
|
1095
1095
|
function InputSelectWithController(_a) {
|
|
1096
1096
|
var _b, _c;
|
|
@@ -1120,7 +1120,7 @@ function InputMultiSelectOption(props) {
|
|
|
1120
1120
|
var selected = selectedValue.includes(option.value);
|
|
1121
1121
|
return (jsx(StyledOption, __assign({ container: true, selected: selected }, { children: jsx(Checkbox, { checked: selected, label: jsx(StyledCaption, __assign({ selected: selected, size: "sm", weight: 500 }, { children: option.label })) }) })));
|
|
1122
1122
|
}
|
|
1123
|
-
var StyledOption = styled(Grid)(templateObject_1$
|
|
1123
|
+
var StyledOption = styled(Grid)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n p {\n color: ", " !important;\n }\n }\n"], ["\n padding: 8px;\n transition: all ease-out 0.3s;\n border-radius: 4px;\n background-color: ", ";\n &:hover {\n background-color: ", ";\n p {\n color: ", " !important;\n }\n }\n"])), function (_a) {
|
|
1124
1124
|
var selected = _a.selected;
|
|
1125
1125
|
return selected ? theme.palette.background.light1 : theme.palette.grey.zero;
|
|
1126
1126
|
}, theme.palette.background.light1, theme.palette.grey.seventy);
|
|
@@ -1130,7 +1130,7 @@ var StyledCaption = styled(Caption)(templateObject_2$5 || (templateObject_2$5 =
|
|
|
1130
1130
|
? theme.palette.grey.seventy
|
|
1131
1131
|
: theme.palette.grey.fiftyP;
|
|
1132
1132
|
});
|
|
1133
|
-
var templateObject_1$
|
|
1133
|
+
var templateObject_1$7, templateObject_2$5;
|
|
1134
1134
|
|
|
1135
1135
|
function InputMultiSelect(_a) {
|
|
1136
1136
|
var _b, _c;
|
|
@@ -1233,9 +1233,9 @@ function RadioGroupWithLabel(props) {
|
|
|
1233
1233
|
name: name,
|
|
1234
1234
|
}).fieldState;
|
|
1235
1235
|
var errorMessage = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1236
|
-
return (jsxs$1(StyledContainer, { children: [jsxs$1(StyledWrapper$
|
|
1236
|
+
return (jsxs$1(StyledContainer, { children: [jsxs$1(StyledWrapper$4, __assign({ container: true, alignItems: direction === "vertical" ? "flex-start" : "center", justify: "space-between", direction: direction === "vertical" ? "column" : "row", hasError: !!errorMessage, className: className, withTitle: !!title }, { children: [title && (jsx(StyledTitle, __assign({ direction: direction, size: "xs", weight: 600 }, { children: title.toUpperCase() }))), jsx(Grid, __assign({ item: true, xs: direction === "vertical" ? 12 : "auto" }, { children: jsx(RadioButtonsWithController, __assign({ form: form, name: name }, otherProps)) }))] })), errorMessage && jsx(InputMessage, { variant: "error", msg: errorMessage })] }));
|
|
1237
1237
|
}
|
|
1238
|
-
var StyledContainer = styled.div(templateObject_1$
|
|
1238
|
+
var StyledContainer = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1239
1239
|
var columnDirectionCSS = function (_a) {
|
|
1240
1240
|
var hasError = _a.hasError;
|
|
1241
1241
|
return css(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"], ["\n padding: 12px 15px 15px;\n border-radius: ", ";\n"])), hasError ? "8px 8px 0 0" : "8px");
|
|
@@ -1244,7 +1244,7 @@ var rowDirectionCSS = function (_a) {
|
|
|
1244
1244
|
var hasError = _a.hasError, withTitle = _a.withTitle;
|
|
1245
1245
|
return css(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n padding: ", ";\n border-radius: ", ";\n"], ["\n padding: ", ";\n border-radius: ", ";\n"])), withTitle ? "3px 4px 3px 16px" : "3px", hasError ? "66px 66px 0 0" : "66px");
|
|
1246
1246
|
};
|
|
1247
|
-
var StyledWrapper$
|
|
1247
|
+
var StyledWrapper$4 = styled(Grid, {
|
|
1248
1248
|
shouldForwardProp: function (prop) { return prop !== "hasError" && prop !== "withTitle"; },
|
|
1249
1249
|
})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n ", ";\n"], ["\n border: 1px solid\n ", ";\n ", ";\n"])), function (_a) {
|
|
1250
1250
|
var hasError = _a.hasError;
|
|
@@ -1259,23 +1259,23 @@ var StyledTitle = styled(Caption)(templateObject_5 || (templateObject_5 = __make
|
|
|
1259
1259
|
var direction = _a.direction;
|
|
1260
1260
|
return (direction === "vertical" ? 8 : 0);
|
|
1261
1261
|
});
|
|
1262
|
-
var templateObject_1$
|
|
1262
|
+
var templateObject_1$6, templateObject_2$4, templateObject_3$2, templateObject_4, templateObject_5;
|
|
1263
1263
|
|
|
1264
1264
|
var Loading = forwardRef(function (_a) {
|
|
1265
1265
|
var height = _a.height, className = _a.className, otherProps = __rest(_a, ["height", "className"]);
|
|
1266
|
-
return (jsx(StyledWrapper$
|
|
1266
|
+
return (jsx(StyledWrapper$3, __assign({ container: true, alignItems: "center", justify: "center", className: className, height: height }, { children: jsx(StyledCircularProgress, __assign({}, otherProps)) })));
|
|
1267
1267
|
});
|
|
1268
1268
|
Loading.defaultProps = {
|
|
1269
1269
|
height: "adaptive",
|
|
1270
1270
|
};
|
|
1271
|
-
var StyledCircularProgress = styled(CircularProgress)(templateObject_1$
|
|
1272
|
-
var StyledWrapper$
|
|
1271
|
+
var StyledCircularProgress = styled(CircularProgress)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), theme.palette.brand.main);
|
|
1272
|
+
var StyledWrapper$3 = styled(Grid, {
|
|
1273
1273
|
shouldForwardProp: function (prop) { return prop !== "height"; },
|
|
1274
1274
|
})(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), function (_a) {
|
|
1275
1275
|
var height = _a.height;
|
|
1276
1276
|
return height;
|
|
1277
1277
|
});
|
|
1278
|
-
var templateObject_1$
|
|
1278
|
+
var templateObject_1$5, templateObject_2$3;
|
|
1279
1279
|
|
|
1280
1280
|
function CreatingEntityFromDropdown(_a) {
|
|
1281
1281
|
var creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal;
|
|
@@ -1284,25 +1284,25 @@ function CreatingEntityFromDropdown(_a) {
|
|
|
1284
1284
|
return null;
|
|
1285
1285
|
}
|
|
1286
1286
|
var handleModalWrapperClick = function (e) { return e.stopPropagation(); };
|
|
1287
|
-
return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledWrapper$
|
|
1287
|
+
return (jsxs$1(Fragment$1, { children: [jsxs$1(StyledWrapper$2, __assign({ container: true, onClick: handleModalOpen, alignItems: "center" }, { children: [jsx(StyledPlusIcon, { width: 12, height: 12 }), jsx(Caption, __assign({ color: "fiftyP", size: "xs", weight: 500 }, { children: creatingLabel }))] })), jsx(StyledModalWrapper, __assign({ onClick: handleModalWrapperClick }, { children: renderCreatingModal({
|
|
1288
1288
|
isOpen: isModalOpen,
|
|
1289
1289
|
handleClose: handleModalClose,
|
|
1290
1290
|
}) }))] }));
|
|
1291
1291
|
}
|
|
1292
|
-
var StyledWrapper$
|
|
1292
|
+
var StyledWrapper$2 = styled(Grid)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ", ";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"], ["\n width: 100%;\n position: sticky;\n bottom: 0;\n left: 0;\n border-radius: 0 0 12px 12px;\n border-top: 1px solid ", ";\n padding: 8px 19px;\n cursor: pointer;\n background: white;\n"])), theme.palette.grey.fifteenB);
|
|
1293
1293
|
var StyledPlusIcon = styled(PlusIcon)(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"], ["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"])), theme.palette.grey.fiftyP);
|
|
1294
1294
|
var StyledModalWrapper = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject([""], [""])));
|
|
1295
|
-
var templateObject_1$
|
|
1295
|
+
var templateObject_1$4, templateObject_2$2, templateObject_3$1;
|
|
1296
1296
|
|
|
1297
|
-
var AutocompleteOption = function (props) {
|
|
1297
|
+
var AutocompleteOption$1 = function (props) {
|
|
1298
1298
|
var option = props.option, renderOption = props.renderOption, handleSelect = props.handleSelect, index = props.index;
|
|
1299
1299
|
var handleClick = function () {
|
|
1300
1300
|
handleSelect(option);
|
|
1301
1301
|
};
|
|
1302
1302
|
return (jsx(StyledOptionWrapper, __assign({ item: true, xs: 12, onClick: handleClick, "data-testid": "autocomplete_option_".concat(index) }, { children: renderOption(option) })));
|
|
1303
1303
|
};
|
|
1304
|
-
var StyledOptionWrapper = styled(Grid)(templateObject_1$
|
|
1305
|
-
var templateObject_1$
|
|
1304
|
+
var StyledOptionWrapper = styled(Grid)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
1305
|
+
var templateObject_1$3;
|
|
1306
1306
|
|
|
1307
1307
|
function AutocompleteDropdown(props) {
|
|
1308
1308
|
var options = props.options, renderOption = props.renderOption, creatingLabel = props.creatingLabel, renderCreatingModal = props.renderCreatingModal;
|
|
@@ -1315,11 +1315,11 @@ function AutocompleteDropdown(props) {
|
|
|
1315
1315
|
handleScrollEnd();
|
|
1316
1316
|
}
|
|
1317
1317
|
};
|
|
1318
|
-
return (jsxs$1(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, onScroll: handleScroll, endComponent: jsx(CreatingEntityFromDropdown, { creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal }) }, { children: [options.map(function (option, key) { return (jsx(AutocompleteOption, { option: option, renderOption: renderOption, handleSelect: handleSelect, index: key }, key)); }), isLoading && jsx(StyledLoading, { height: "auto" })] })));
|
|
1318
|
+
return (jsxs$1(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, onScroll: handleScroll, endComponent: jsx(CreatingEntityFromDropdown, { creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal }) }, { children: [options.map(function (option, key) { return (jsx(AutocompleteOption$1, { option: option, renderOption: renderOption, handleSelect: handleSelect, index: key }, key)); }), isLoading && jsx(StyledLoading, { height: "auto" })] })));
|
|
1319
1319
|
}
|
|
1320
|
-
var StyledDropdown = styled(InputDropdown)(templateObject_1$
|
|
1320
|
+
var StyledDropdown = styled(InputDropdown)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"], ["\n .KUI-InputDropdown_scroll {\n max-height: 142px;\n padding: 0 4px;\n }\n"])));
|
|
1321
1321
|
var StyledLoading = styled(Loading)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n position: sticky;\n bottom: 30px;\n"], ["\n position: sticky;\n bottom: 30px;\n"])));
|
|
1322
|
-
var templateObject_1$
|
|
1322
|
+
var templateObject_1$2, templateObject_2$1;
|
|
1323
1323
|
|
|
1324
1324
|
function InputWithAutocomplete(_a) {
|
|
1325
1325
|
var _b;
|
|
@@ -1356,7 +1356,7 @@ function InputWithAutocomplete(_a) {
|
|
|
1356
1356
|
handleOpenDropdown();
|
|
1357
1357
|
};
|
|
1358
1358
|
var forwardRef = useForkRef(inputRef, inputRefProps);
|
|
1359
|
-
return (jsxs(StyledWrapper, { children: [isLabelLoading && (jsx$1(StyledLoadingWrapper, { children: jsx$1(Loading, { height: "100%" }) })), jsx$1(StyledInput, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxs(Grid, __assign({ container: true, alignItems: "center" }, { children: [jsx$1(Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
|
|
1359
|
+
return (jsxs(StyledWrapper$1, { children: [isLabelLoading && (jsx$1(StyledLoadingWrapper, { children: jsx$1(Loading, { height: "100%" }) })), jsx$1(StyledInput, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxs(Grid, __assign({ container: true, alignItems: "center" }, { children: [jsx$1(Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
|
|
1360
1360
|
(!disabled && (jsx$1(HalfArrowIcon, { width: 12, height: 13, css: [
|
|
1361
1361
|
{ transition: "all linear .2s" },
|
|
1362
1362
|
isOpenDropdown && { transform: "rotate(180deg)" },
|
|
@@ -1364,13 +1364,20 @@ function InputWithAutocomplete(_a) {
|
|
|
1364
1364
|
current: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
1365
1365
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, isLoading: isLoading, handleScrollEnd: handleScrollEnd, creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal })] }));
|
|
1366
1366
|
}
|
|
1367
|
-
var StyledLoadingWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"])));
|
|
1368
|
-
var StyledWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1367
|
+
var StyledLoadingWrapper = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: 1;\n"])));
|
|
1368
|
+
var StyledWrapper$1 = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1369
1369
|
var StyledInput = styled(InputWithController)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"], ["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
1370
1370
|
var isDropdownOpen = _a.isDropdownOpen;
|
|
1371
1371
|
return (isDropdownOpen ? 0 : 1);
|
|
1372
1372
|
});
|
|
1373
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
1373
|
+
var templateObject_1$1, templateObject_2, templateObject_3;
|
|
1374
|
+
|
|
1375
|
+
function AutocompleteOption(_a) {
|
|
1376
|
+
var label = _a.label;
|
|
1377
|
+
return (jsx(StyledWrapper, { children: jsx(Caption, __assign({ size: "s", weight: 500 }, { children: label })) }));
|
|
1378
|
+
}
|
|
1379
|
+
var StyledWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n &:hover {\n background: ", ";\n },\n"], ["\n padding: 8px;\n border-radius: 8px;\n cursor: pointer;\n &:hover {\n background: ", ";\n },\n"])), theme.palette.background.light2);
|
|
1380
|
+
var templateObject_1;
|
|
1374
1381
|
|
|
1375
1382
|
export { AutocompleteOption, Avatar, ButtonSelect, ButtonTab, ButtonsPanel, CalendarHeaderWithSelect, CalendarStandardContainer, CalendarStandardHeader, DesktopInputWithMonthPicker, DesktopMenuPanel, InputDropdown, InputForDatepicker, InputMultiSelect, InputPassword, InputPhoneWithForm, InputSelect, InputSelectDropdown, InputSelectWithController, InputTextAreaMobile, InputWithAutocomplete, InputWithController, InputWithDatePicker, InputWithMask, InputWithMonthPicker, MenuItem, MenuPanel, MobileInputWithMonthPicker, MobileMenuPanel, MonthPickerContainer, MonthPickerHeader, PassportStrengthBar, RadioButtons, RadioButtonsWithController, RadioGroupWithLabel, SelectMonth, SelectYear, Switch, Table, TableCell, TableHeadCell, TableRow, Tooltip, UndefinedAvatar };
|
|
1376
1383
|
//# sourceMappingURL=index.js.map
|