kui-complex 0.0.69 → 0.0.71
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/CheckboxGroupWithTitle/cjs/index.js +81 -0
- package/CheckboxGroupWithTitle/cjs/index.js.map +1 -0
- package/CheckboxGroupWithTitle/cjs/package.json +10 -0
- package/CheckboxGroupWithTitle/index.d.ts +15 -0
- package/CheckboxGroupWithTitle/index.js +75 -0
- package/CheckboxGroupWithTitle/index.js.map +1 -0
- package/CheckboxGroupWithTitle/package.json +10 -0
- package/CheckboxWithController/cjs/index.js +63 -0
- package/CheckboxWithController/cjs/index.js.map +1 -0
- package/CheckboxWithController/cjs/package.json +10 -0
- package/CheckboxWithController/index.d.ts +5 -0
- package/CheckboxWithController/index.js +61 -0
- package/CheckboxWithController/index.js.map +1 -0
- package/CheckboxWithController/package.json +10 -0
- package/FileItem/cjs/index.js +164 -0
- package/FileItem/cjs/index.js.map +1 -0
- package/FileItem/cjs/package.json +10 -0
- package/FileItem/index.d.ts +46 -0
- package/FileItem/index.js +158 -0
- package/FileItem/index.js.map +1 -0
- package/FileItem/package.json +10 -0
- package/InputFile/cjs/index.js +279 -0
- package/InputFile/cjs/index.js.map +1 -0
- package/InputFile/cjs/package.json +11 -0
- package/InputFile/index.d.ts +22 -0
- package/InputFile/index.js +273 -0
- package/InputFile/index.js.map +1 -0
- package/InputFile/package.json +11 -0
- package/InputWithAutocomplete/cjs/index.js.map +1 -1
- package/InputWithAutocomplete/index.js.map +1 -1
- package/Link/cjs/index.js +97 -0
- package/Link/cjs/index.js.map +1 -0
- package/Link/cjs/package.json +10 -0
- package/Link/index.d.ts +13 -0
- package/Link/index.js +91 -0
- package/Link/index.js.map +1 -0
- package/Link/package.json +10 -0
- package/cjs/index.js +390 -137
- package/cjs/index.js.map +1 -1
- package/index.d.ts +21 -8
- package/index.js +390 -140
- package/index.js.map +1 -1
- package/package.json +1 -1
package/cjs/index.js
CHANGED
|
@@ -117,38 +117,38 @@ var UndefinedAvatar = React.forwardRef(function (_a, ref) {
|
|
|
117
117
|
.join("");
|
|
118
118
|
return (jsxRuntime.jsx(Wrapper$8, __assign({ "data-testid": "undefined_avatar", ref: ref }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "xs", weight: 600, colorGroup: "brand", color: "main" }, otherProps, { children: formattedLabel })) })));
|
|
119
119
|
});
|
|
120
|
-
var Wrapper$8 = styled__default["default"].div(templateObject_1$
|
|
121
|
-
var templateObject_1$
|
|
120
|
+
var Wrapper$8 = styled__default["default"].div(templateObject_1$H || (templateObject_1$H = __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);
|
|
121
|
+
var templateObject_1$H;
|
|
122
122
|
|
|
123
123
|
var Avatar = React.forwardRef(function (props, ref) {
|
|
124
124
|
var size = props.size, fullName = props.fullName, imageUrl = props.imageUrl, otherProps = __rest(props, ["size", "fullName", "imageUrl"]);
|
|
125
125
|
return (jsxRuntime$1.jsx(Wrapper$7, __assign({ css: sizeStyles[size], ref: ref }, otherProps, { children: imageUrl ? (jsxRuntime$1.jsx(StyledImage, { "data-testid": "avatar_image", src: imageUrl, alt: "avatar" })) : (jsxRuntime$1.jsx(StyledUndefinedAvatar, { label: fullName, avatarSize: size })) })));
|
|
126
126
|
});
|
|
127
|
-
var Wrapper$7 = styled__default["default"].div(templateObject_1$
|
|
128
|
-
var StyledImage = styled__default["default"].img(templateObject_2$
|
|
127
|
+
var Wrapper$7 = styled__default["default"].div(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"], ["\n border-radius: 50%;\n overflow: hidden;\n cursor: pointer;\n"])));
|
|
128
|
+
var StyledImage = styled__default["default"].img(templateObject_2$p || (templateObject_2$p = __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"])));
|
|
129
129
|
var largeAvatarCSS = function (_a) {
|
|
130
130
|
var avatarSize = _a.avatarSize;
|
|
131
|
-
return avatarSize === "lg" && react.css(templateObject_3$
|
|
131
|
+
return avatarSize === "lg" && react.css(templateObject_3$b || (templateObject_3$b = __makeTemplateObject(["\n font-size: 32px;\n "], ["\n font-size: 32px;\n "])));
|
|
132
132
|
};
|
|
133
133
|
var StyledUndefinedAvatar = styled__default["default"](UndefinedAvatar, {
|
|
134
134
|
shouldForwardProp: function (prop) { return prop !== "size"; },
|
|
135
|
-
})(templateObject_4$
|
|
135
|
+
})(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), largeAvatarCSS);
|
|
136
136
|
var sizeStyles = {
|
|
137
|
-
s: react.css(templateObject_5$
|
|
138
|
-
lg: react.css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
137
|
+
s: react.css(templateObject_5$4 || (templateObject_5$4 = __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 "]))),
|
|
138
|
+
lg: react.css(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n width: 80px;\n height: 80px;\n "], ["\n width: 80px;\n height: 80px;\n "]))),
|
|
139
139
|
};
|
|
140
|
-
var templateObject_1$
|
|
140
|
+
var templateObject_1$G, templateObject_2$p, templateObject_3$b, templateObject_4$6, templateObject_5$4, templateObject_6$1;
|
|
141
141
|
|
|
142
142
|
var ButtonTab = React.forwardRef(function (_a, ref) {
|
|
143
143
|
var index = _a.index, onClick = _a.onClick, isActive = _a.isActive, label = _a.label;
|
|
144
144
|
var handleClick = function () {
|
|
145
145
|
onClick(index);
|
|
146
146
|
};
|
|
147
|
-
return (jsxRuntime$1.jsx(StyledButton, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s", ref: ref }, { children: label })));
|
|
147
|
+
return (jsxRuntime$1.jsx(StyledButton$1, __assign({ variant: isActive ? "orange" : "white", captionWeight: isActive ? 600 : 400, onClick: handleClick, css: !isActive && inactiveStyles, size: "s", ref: ref }, { children: label })));
|
|
148
148
|
});
|
|
149
|
-
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_1$
|
|
150
|
-
var inactiveStyles = react.css(templateObject_2$
|
|
151
|
-
var templateObject_1$
|
|
149
|
+
var StyledButton$1 = styled__default["default"](kuiBasic.Button)(templateObject_1$F || (templateObject_1$F = __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"])));
|
|
150
|
+
var inactiveStyles = react.css(templateObject_2$o || (templateObject_2$o = __makeTemplateObject(["\n p {\n color: ", ";\n }\n"], ["\n p {\n color: ", ";\n }\n"])), kuiBasic.theme.palette.grey.seventy);
|
|
151
|
+
var templateObject_1$F, templateObject_2$o;
|
|
152
152
|
|
|
153
153
|
var ButtonsPanel = React.forwardRef(function (_a, ref) {
|
|
154
154
|
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"]);
|
|
@@ -171,9 +171,9 @@ var ButtonsPanel = React.forwardRef(function (_a, ref) {
|
|
|
171
171
|
ButtonsPanel.defaultProps = {
|
|
172
172
|
isSticky: false,
|
|
173
173
|
};
|
|
174
|
-
var Content = styled__default["default"].div(templateObject_1$
|
|
175
|
-
var StyledContainer$2 = styled__default["default"].div(templateObject_2$
|
|
176
|
-
var templateObject_1$
|
|
174
|
+
var Content = styled__default["default"].div(templateObject_1$E || (templateObject_1$E = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
175
|
+
var StyledContainer$2 = styled__default["default"].div(templateObject_2$n || (templateObject_2$n = __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);
|
|
176
|
+
var templateObject_1$E, templateObject_2$n;
|
|
177
177
|
|
|
178
178
|
var InputDropdown = React.forwardRef(function (props, ref) {
|
|
179
179
|
var isOpen = props.isOpen, handleClose = props.handleClose, buttonRef = props.buttonRef, children = props.children, endComponent = props.endComponent, otherProps = __rest(props, ["isOpen", "handleClose", "buttonRef", "children", "endComponent"]);
|
|
@@ -219,21 +219,21 @@ var InputDropdown = React.forwardRef(function (props, ref) {
|
|
|
219
219
|
ref.current = elem;
|
|
220
220
|
dropdownRef.current = elem;
|
|
221
221
|
};
|
|
222
|
-
return (jsxRuntime.jsxs(StyledDropdown$2, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsxRuntime.jsx(StyledWrapper$
|
|
222
|
+
return (jsxRuntime.jsxs(StyledDropdown$2, __assign({ "data-testid": "input_dropdown", container: true, ref: forwardedRef, isOpen: isOpen }, otherProps, { children: [jsxRuntime.jsx(StyledWrapper$8, __assign({ isScrollable: isScrollable }, { children: jsxRuntime.jsx(ScrollingContainer, __assign({ isScrollable: isScrollable, className: "KUI-InputDropdown_scroll" }, { children: children })) })), endComponent] })));
|
|
223
223
|
});
|
|
224
|
-
var StyledDropdown$2 = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
224
|
+
var StyledDropdown$2 = styled__default["default"](kuiBasic.Grid)(templateObject_1$D || (templateObject_1$D = __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) {
|
|
225
225
|
var isOpen = _a.isOpen;
|
|
226
226
|
return (isOpen ? "flex" : "none");
|
|
227
227
|
}, kuiBasic.theme.palette.grey.zero);
|
|
228
|
-
var StyledWrapper$
|
|
228
|
+
var StyledWrapper$8 = styled__default["default"].div(templateObject_2$m || (templateObject_2$m = __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) {
|
|
229
229
|
var isScrollable = _a.isScrollable;
|
|
230
230
|
return isScrollable ? "14px 8px 8px 0" : "14px 0px 8px 0";
|
|
231
231
|
});
|
|
232
|
-
var ScrollingContainer = styled__default["default"].div(templateObject_3$
|
|
232
|
+
var ScrollingContainer = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ", ";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n"], ["\n width: 100%;\n max-height: 389px;\n box-sizing: border-box;\n z-index: 3;\n overflow: auto;\n -ms-overflow-style: none;\n overflow-y: scroll;\n overflow-x: hidden;\n user-select: none;\n ::-webkit-scrollbar {\n width: ", ";\n position: absolute;\n right: 8px;\n }\n ::-webkit-scrollbar-track,\n ::-webkit-scrollbar-thumb {\n border-radius: 4px;\n transition: all ease-out 0.3s;\n }\n\n ::-webkit-resizer,\n ::-webkit-scrollbar-button,\n ::-webkit-scrollbar-corner {\n display: none;\n }\n ::-webkit-scrollbar-track {\n background: ", ";\n }\n\n ::-webkit-scrollbar-thumb {\n background: ", ";\n }\n"])), function (_a) {
|
|
233
233
|
var isScrollable = _a.isScrollable;
|
|
234
234
|
return (isScrollable ? "4px" : "0px");
|
|
235
235
|
}, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.grey.thirty);
|
|
236
|
-
var templateObject_1$
|
|
236
|
+
var templateObject_1$D, templateObject_2$m, templateObject_3$a;
|
|
237
237
|
|
|
238
238
|
var InputSelectDropdown = React.forwardRef(function (_a, ref) {
|
|
239
239
|
var options = _a.options, inputRef = _a.inputRef, isOpenDropdown = _a.isOpenDropdown, handleCloseDropdown = _a.handleCloseDropdown, handleSelect = _a.handleSelect, selectedValue = _a.selectedValue, renderOption = _a.renderOption;
|
|
@@ -244,15 +244,15 @@ var InputSelectDropdown = React.forwardRef(function (_a, ref) {
|
|
|
244
244
|
};
|
|
245
245
|
return (jsxRuntime.jsx(StyledDropdown$1, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, ref: ref }, { children: options.map(function (option, key) { return (jsxRuntime.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)); }) })));
|
|
246
246
|
});
|
|
247
|
-
var OptionWrapper = styled__default["default"].div(templateObject_1$
|
|
247
|
+
var OptionWrapper = styled__default["default"].div(templateObject_1$C || (templateObject_1$C = __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) {
|
|
248
248
|
var disabled = _a.disabled;
|
|
249
249
|
return (disabled ? "auto" : "pointer");
|
|
250
250
|
}, function (_a) {
|
|
251
251
|
var disabled = _a.disabled;
|
|
252
252
|
return disabled ? kuiBasic.theme.palette.grey.fiftyP : kuiBasic.theme.palette.grey.seventy;
|
|
253
253
|
});
|
|
254
|
-
var StyledDropdown$1 = styled__default["default"](InputDropdown)(templateObject_2$
|
|
255
|
-
var templateObject_1$
|
|
254
|
+
var StyledDropdown$1 = styled__default["default"](InputDropdown)(templateObject_2$l || (templateObject_2$l = __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"])));
|
|
255
|
+
var templateObject_1$C, templateObject_2$l;
|
|
256
256
|
|
|
257
257
|
function InputSelectBase(_a) {
|
|
258
258
|
var _b;
|
|
@@ -274,29 +274,29 @@ function InputSelectBase(_a) {
|
|
|
274
274
|
handleChange(option);
|
|
275
275
|
handleCloseDropdown();
|
|
276
276
|
};
|
|
277
|
-
return (jsxRuntime$1.jsxs(Wrapper$6, { children: [jsxRuntime$1.jsx("input", { name: name, autoComplete: "off", hidden: true }), jsxRuntime$1.jsx(StyledInput$
|
|
277
|
+
return (jsxRuntime$1.jsxs(Wrapper$6, { children: [jsxRuntime$1.jsx("input", { name: name, autoComplete: "off", hidden: true }), jsxRuntime$1.jsx(StyledInput$3, __assign({ onClick: handleOpenDropdown, ref: inputRef, disabled: disabled, readOnly: true, value: selectedLabel, message: error, isDropdownOpen: isDropdownOpen, isLabelShrink: Boolean(selectedValue) || selectedValue === 0 }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsx(kuiIcon.HalfArrowIcon, __assign({ width: 12, height: 13, css: [
|
|
278
278
|
{ transition: "all linear .2s" },
|
|
279
279
|
isDropdownOpen && { transform: "rotate(180deg)" },
|
|
280
280
|
] }, iconProps))) })), options.length > 0 && !disabled && (jsxRuntime$1.jsx(InputSelectDropdown, { options: options, inputRef: {
|
|
281
281
|
current: (_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
282
282
|
}, isOpenDropdown: isDropdownOpen, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, selectedValue: selectedValue, renderOption: renderOption }))] }));
|
|
283
283
|
}
|
|
284
|
-
var Wrapper$6 = styled__default["default"].div(templateObject_1$
|
|
285
|
-
var StyledInput$
|
|
284
|
+
var Wrapper$6 = styled__default["default"].div(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n position: relative;\n text-align: left;\n"], ["\n position: relative;\n text-align: left;\n"])));
|
|
285
|
+
var StyledInput$3 = styled__default["default"](kuiBasic.InputWithAdornments)(templateObject_2$k || (templateObject_2$k = __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) {
|
|
286
286
|
var isDropdownOpen = _a.isDropdownOpen;
|
|
287
287
|
return (isDropdownOpen ? 0 : 1);
|
|
288
288
|
});
|
|
289
|
-
var templateObject_1$
|
|
289
|
+
var templateObject_1$B, templateObject_2$k;
|
|
290
290
|
|
|
291
291
|
function InputSelectOption(props) {
|
|
292
292
|
var option = props.option, selectedValue = props.selectedValue;
|
|
293
293
|
return (jsxRuntime.jsx(StyledOption$1, __assign({ selected: selectedValue === option.value }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "sm", weight: 500 }, { children: option.label })) })));
|
|
294
294
|
}
|
|
295
|
-
var StyledOption$1 = styled__default["default"].div(templateObject_1$
|
|
295
|
+
var StyledOption$1 = styled__default["default"].div(templateObject_1$A || (templateObject_1$A = __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) {
|
|
296
296
|
var selected = _a.selected;
|
|
297
297
|
return selected ? kuiBasic.theme.palette.background.light1 : kuiBasic.theme.palette.grey.zero;
|
|
298
298
|
}, kuiBasic.theme.palette.background.light1);
|
|
299
|
-
var templateObject_1$
|
|
299
|
+
var templateObject_1$A;
|
|
300
300
|
|
|
301
301
|
function InputSelect(_a) {
|
|
302
302
|
var _b;
|
|
@@ -355,25 +355,25 @@ var CalendarHeaderWithSelect = React.forwardRef(function (_a, ref) {
|
|
|
355
355
|
var maxMonth = (max === null || max === void 0 ? void 0 : max.year) === currentYear ? max === null || max === void 0 ? void 0 : max.month : 11;
|
|
356
356
|
return (jsxRuntime.jsx(Wrapper$5, __assign({ ref: ref }, { children: jsxRuntime.jsxs(kuiBasic.Grid, __assign({ container: true, spacing: 2 }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.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 }) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: 6 }, { children: jsxRuntime.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 }) }))] })) })));
|
|
357
357
|
});
|
|
358
|
-
var Wrapper$5 = styled__default["default"].div(templateObject_1$
|
|
359
|
-
var templateObject_1$
|
|
358
|
+
var Wrapper$5 = styled__default["default"].div(templateObject_1$z || (templateObject_1$z = __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"])));
|
|
359
|
+
var templateObject_1$z;
|
|
360
360
|
|
|
361
361
|
var CalendarStandardContainer = React.forwardRef(function (_a, ref) {
|
|
362
362
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
363
363
|
return jsxRuntime.jsx(DatePickerContainer, __assign({ ref: ref }, props));
|
|
364
364
|
});
|
|
365
|
-
var DatePickerContainer = styled__default["default"].div(templateObject_1$
|
|
366
|
-
var templateObject_1$
|
|
365
|
+
var DatePickerContainer = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __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"])), kuiBasic.theme.palette.grey.fiftyP, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.background.light3, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.light, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.brand.main, kuiBasic.theme.palette.grey.fifteenB, kuiBasic.theme.palette.red.seventy, kuiBasic.theme.palette.grey.zero);
|
|
366
|
+
var templateObject_1$y;
|
|
367
367
|
|
|
368
368
|
var CalendarStandardHeader = React.forwardRef(function (_a, ref) {
|
|
369
369
|
var decreaseMonth = _a.decreaseMonth, increaseMonth = _a.increaseMonth, nextMonthButtonDisabled = _a.nextMonthButtonDisabled, prevMonthButtonDisabled = _a.prevMonthButtonDisabled, date = _a.date;
|
|
370
370
|
var title = ___default["default"].capitalize(date.toLocaleString("ru", { month: "long", year: "numeric" })).slice(0, -3);
|
|
371
371
|
return (jsxRuntime.jsxs(HeaderWrapper, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { 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 }) })) }))] })) }))] })));
|
|
372
372
|
});
|
|
373
|
-
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
374
|
-
var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$
|
|
375
|
-
var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$
|
|
376
|
-
var templateObject_1$
|
|
373
|
+
var HeaderWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$x || (templateObject_1$x = __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"])));
|
|
374
|
+
var StyledHeading = styled__default["default"](kuiBasic.Heading)(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"], ["\n @media (max-width: 600px) {\n font-weight: 700;\n }\n"])));
|
|
375
|
+
var CircleButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$9 || (templateObject_3$9 = __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"])));
|
|
376
|
+
var templateObject_1$x, templateObject_2$j, templateObject_3$9;
|
|
377
377
|
|
|
378
378
|
var InputForDatepicker = React.forwardRef(function (props, ref) {
|
|
379
379
|
var onClick = props.onClick, disabled = props.disabled, handleClick = props.handleClick, startIcon = props.startIcon, other = __rest(props, ["onClick", "disabled", "handleClick", "startIcon"]);
|
|
@@ -388,23 +388,23 @@ var InputForDatepicker = React.forwardRef(function (props, ref) {
|
|
|
388
388
|
var Icon = function () { return (jsxRuntime.jsx(IconWrapper, __assign({ disabled: disabled, onClick: handleIconClick }, { children: startIcon || jsxRuntime.jsx(kuiIcon.CalendarIcon, { width: 19, height: 21 }) }))); };
|
|
389
389
|
return (jsxRuntime.jsx(kuiBasic.InputWithMask, __assign({ disabled: disabled, endIcon: !startIcon && jsxRuntime.jsx(Icon, {}), startIcon: startIcon && jsxRuntime.jsx(Icon, {}) }, other, { ref: ref })));
|
|
390
390
|
});
|
|
391
|
-
var IconWrapper = styled__default["default"].div(templateObject_1$
|
|
392
|
-
var templateObject_1$
|
|
391
|
+
var IconWrapper = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __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"])));
|
|
392
|
+
var templateObject_1$w;
|
|
393
393
|
|
|
394
394
|
var MonthPickerContainer = React.forwardRef(function (_a, ref) {
|
|
395
395
|
_a.arrowProps; _a.showPopperArrow; var props = __rest(_a, ["arrowProps", "showPopperArrow"]);
|
|
396
396
|
return jsxRuntime.jsx(StyledContainer$1, __assign({ ref: ref }, props));
|
|
397
397
|
});
|
|
398
|
-
var StyledContainer$1 = styled__default["default"].div(templateObject_1$
|
|
399
|
-
var templateObject_1$
|
|
398
|
+
var StyledContainer$1 = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __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"])), 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);
|
|
399
|
+
var templateObject_1$v;
|
|
400
400
|
|
|
401
401
|
var MonthPickerHeader = React.forwardRef(function (_a, ref) {
|
|
402
402
|
var decreaseYear = _a.decreaseYear, increaseYear = _a.increaseYear, nextYearButtonDisabled = _a.nextYearButtonDisabled, prevYearButtonDisabled = _a.prevYearButtonDisabled, date = _a.date;
|
|
403
403
|
return (jsxRuntime.jsxs(StyledHeader, __assign({ container: true, alignItems: "center", justify: "space-between", ref: ref }, { 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 }) })) }))] })));
|
|
404
404
|
});
|
|
405
|
-
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$
|
|
406
|
-
var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$
|
|
407
|
-
var templateObject_1$
|
|
405
|
+
var StyledIconButton = styled__default["default"](kuiBasic.IconButton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"], ["\n height: 36px;\n &:disabled {\n opacity: 0;\n }\n"])));
|
|
406
|
+
var StyledHeader = styled__default["default"](kuiBasic.Grid)(templateObject_2$i || (templateObject_2$i = __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"])));
|
|
407
|
+
var templateObject_1$u, templateObject_2$i;
|
|
408
408
|
|
|
409
409
|
var DesktopInputWithMonthPicker = React.forwardRef(function (_a, ref) {
|
|
410
410
|
var name = _a.name, form = _a.form, disabled = _a.disabled, datePickerProps = _a.datePickerProps, otherProps = __rest(_a, ["name", "form", "disabled", "datePickerProps"]);
|
|
@@ -414,8 +414,8 @@ var DesktopInputWithMonthPicker = React.forwardRef(function (_a, ref) {
|
|
|
414
414
|
return (jsxRuntime.jsx(DatePicker__default["default"], __assign({ selected: field.value, onChange: field.onChange, disabled: disabled, customInput: jsxRuntime.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 (jsxRuntime.jsx(MonthPickerHeader, __assign({}, props))); } }, datePickerProps)));
|
|
415
415
|
} }) })));
|
|
416
416
|
});
|
|
417
|
-
var Wrapper$4 = styled__default["default"].div(templateObject_1$
|
|
418
|
-
var templateObject_1$
|
|
417
|
+
var Wrapper$4 = styled__default["default"].div(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n @media (max-width: 600px) {\n display: none;\n }\n"], ["\n @media (max-width: 600px) {\n display: none;\n }\n"])));
|
|
418
|
+
var templateObject_1$t;
|
|
419
419
|
|
|
420
420
|
var MenuItem = React.forwardRef(function (_a, ref) {
|
|
421
421
|
var tab = _a.tab, active = _a.active, index = _a.index, handleClick = _a.handleClick, offset = _a.offset, isScrolling = _a.isScrolling, setIsScrolling = _a.setIsScrolling;
|
|
@@ -448,18 +448,18 @@ var MenuItem = React.forwardRef(function (_a, ref) {
|
|
|
448
448
|
reactScroll.Events.scrollEvent.remove("end");
|
|
449
449
|
};
|
|
450
450
|
}, []);
|
|
451
|
-
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$
|
|
451
|
+
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$2, __assign({ ref: ref }, { children: jsxRuntime$1.jsx(kuiBasic.Button, __assign({ variant: Number(active) === index ? "orange" : "transparentWithBorder", size: "xs", css: Number(active) !== index && disabledStyles }, { children: tab.label })) })) })));
|
|
452
452
|
});
|
|
453
|
-
var ButtonWrapper$
|
|
454
|
-
var disabledStyles = react.css(templateObject_2$
|
|
455
|
-
var templateObject_1$
|
|
453
|
+
var ButtonWrapper$2 = styled__default["default"].div(templateObject_1$s || (templateObject_1$s = __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"])));
|
|
454
|
+
var disabledStyles = react.css(templateObject_2$h || (templateObject_2$h = __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);
|
|
455
|
+
var templateObject_1$s, templateObject_2$h;
|
|
456
456
|
|
|
457
457
|
var DesktopMenuPanel = React.forwardRef(function (_a, ref) {
|
|
458
458
|
var tabs = _a.tabs, variant = _a.variant, other = __rest(_a, ["tabs", "variant"]);
|
|
459
459
|
return (jsxRuntime$1.jsx(Wrapper$3, __assign({ container: true, css: variant === "white" && { background: "white" }, ref: ref }, { 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)); }) })));
|
|
460
460
|
});
|
|
461
|
-
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
462
|
-
var templateObject_1$
|
|
461
|
+
var Wrapper$3 = styled__default["default"](kuiBasic.Grid)(templateObject_1$r || (templateObject_1$r = __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);
|
|
462
|
+
var templateObject_1$r;
|
|
463
463
|
|
|
464
464
|
var InputWithMask = React.forwardRef(function (_a, ref) {
|
|
465
465
|
var form = _a.form, name = _a.name, error = _a.error, inputProps = __rest(_a, ["form", "name", "error"]);
|
|
@@ -535,15 +535,15 @@ var PassportStrengthBar = React.forwardRef(function (_a, ref) {
|
|
|
535
535
|
: -1;
|
|
536
536
|
return (jsxRuntime$1.jsxs(Wrapper$2, __assign({ "data-testid": "strength_bar", className: String(!strength && "hidden"), ref: ref }, { 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" }))] })));
|
|
537
537
|
});
|
|
538
|
-
var Wrapper$2 = styled__default["default"].div(templateObject_1$
|
|
539
|
-
var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$
|
|
540
|
-
var ReliabilityLevel = styled__default["default"].div(templateObject_3$
|
|
541
|
-
var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$
|
|
538
|
+
var Wrapper$2 = styled__default["default"].div(templateObject_1$q || (templateObject_1$q = __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"])));
|
|
539
|
+
var ReliabilityLevelWrapper = styled__default["default"].div(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n display: flex;\n margin-bottom: 8px;\n"], ["\n display: flex;\n margin-bottom: 8px;\n"])));
|
|
540
|
+
var ReliabilityLevel = styled__default["default"].div(templateObject_3$8 || (templateObject_3$8 = __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"])));
|
|
541
|
+
var StyledLinearProgress = styled__default["default"](kuiBasic.LinearProgress)(templateObject_4$5 || (templateObject_4$5 = __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) {
|
|
542
542
|
var color = _a.color;
|
|
543
543
|
return color;
|
|
544
544
|
});
|
|
545
|
-
var Description = styled__default["default"](kuiBasic.Caption)(templateObject_5$
|
|
546
|
-
var templateObject_1$
|
|
545
|
+
var Description = styled__default["default"](kuiBasic.Caption)(templateObject_5$3 || (templateObject_5$3 = __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"])));
|
|
546
|
+
var templateObject_1$q, templateObject_2$g, templateObject_3$8, templateObject_4$5, templateObject_5$3;
|
|
547
547
|
|
|
548
548
|
var getFormValue = function (name, form) {
|
|
549
549
|
var names = name === null || name === void 0 ? void 0 : name.split(".");
|
|
@@ -598,13 +598,13 @@ var InputPassword = React.forwardRef(function (props, ref) {
|
|
|
598
598
|
}, []);
|
|
599
599
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWithController, __assign({ type: showPassword ? "text" : "password", autoComplete: "new_password", onChange: handleChange, "data-testid": "input_password", ref: ref, 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 })] }));
|
|
600
600
|
});
|
|
601
|
-
var EyeIconWrapper = styled__default["default"].div(templateObject_1$
|
|
602
|
-
var templateObject_1$
|
|
601
|
+
var EyeIconWrapper = styled__default["default"].div(templateObject_1$p || (templateObject_1$p = __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"])));
|
|
602
|
+
var templateObject_1$p;
|
|
603
603
|
|
|
604
|
-
var InputTextAreaMobile = React.forwardRef(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)) })] })); });
|
|
605
|
-
var InputWrapper = styled__default["default"].div(templateObject_1$
|
|
606
|
-
var TextAreaWrapper = styled__default["default"].div(templateObject_2$
|
|
607
|
-
var templateObject_1$
|
|
604
|
+
var InputTextAreaMobile = React.forwardRef(function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputWrapper$1, { children: jsxRuntime.jsx(InputWithController, __assign({}, props)) }), jsxRuntime.jsx(TextAreaWrapper, { children: jsxRuntime.jsx(InputWithController, __assign({ isTextArea: true }, props)) })] })); });
|
|
605
|
+
var InputWrapper$1 = styled__default["default"].div(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n @media (max-width: 900px) {\n display: none;\n }\n"], ["\n @media (max-width: 900px) {\n display: none;\n }\n"])));
|
|
606
|
+
var TextAreaWrapper = styled__default["default"].div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n @media (min-width: 901px) {\n display: none;\n }\n"], ["\n @media (min-width: 901px) {\n display: none;\n }\n"])));
|
|
607
|
+
var templateObject_1$o, templateObject_2$f;
|
|
608
608
|
|
|
609
609
|
var useToggle = function (isModalOpen) {
|
|
610
610
|
if (isModalOpen === void 0) { isModalOpen = false; }
|
|
@@ -620,12 +620,12 @@ var useToggle = function (isModalOpen) {
|
|
|
620
620
|
|
|
621
621
|
var ModalFooter = React.forwardRef(function (_a, ref) {
|
|
622
622
|
var label = _a.label, button = _a.button, otherProps = __rest(_a, ["label", "button"]);
|
|
623
|
-
return (jsxRuntime.jsxs(StyledFooter, __assign({ ref: ref }, { 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 }))) })] })));
|
|
623
|
+
return (jsxRuntime.jsxs(StyledFooter, __assign({ ref: ref }, { children: [jsxRuntime.jsx(kuiBasic.Divider, {}), jsxRuntime.jsx(ButtonWrapper$1, { children: button || (jsxRuntime.jsx(ButtonStyled, __assign({ fullWidth: true, size: "s", endIcon: jsxRuntime.jsx(kuiIcon.CheckIcon, {}) }, otherProps, { children: label }))) })] })));
|
|
624
624
|
});
|
|
625
|
-
var StyledFooter = styled__default["default"].div(templateObject_1$
|
|
626
|
-
var ButtonWrapper = styled__default["default"].div(templateObject_2$
|
|
627
|
-
var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$
|
|
628
|
-
var templateObject_1$
|
|
625
|
+
var StyledFooter = styled__default["default"].div(templateObject_1$n || (templateObject_1$n = __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);
|
|
626
|
+
var ButtonWrapper$1 = styled__default["default"].div(templateObject_2$e || (templateObject_2$e = __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"])));
|
|
627
|
+
var ButtonStyled = styled__default["default"](kuiBasic.Button)(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n @media (max-width: 600px) {\n width: 100%;\n }\n"], ["\n @media (max-width: 600px) {\n width: 100%;\n }\n"])));
|
|
628
|
+
var templateObject_1$n, templateObject_2$e, templateObject_3$7;
|
|
629
629
|
|
|
630
630
|
function setRef(ref, value) {
|
|
631
631
|
if (typeof ref === "function") {
|
|
@@ -720,7 +720,7 @@ var InputWithDatePicker = React.forwardRef(function (_a, ref) {
|
|
|
720
720
|
setDate(newDate);
|
|
721
721
|
};
|
|
722
722
|
var forwardedRef = useForkRef(ref, field.ref);
|
|
723
|
-
return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(InputForDatepicker, __assign({ mask: "00.00.0000", name: name, handleClick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxRuntime$1.jsxs(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsxRuntime$1.jsx(ContentWrapper$
|
|
723
|
+
return (jsxRuntime$1.jsxs(jsxRuntime$1.Fragment, { children: [jsxRuntime$1.jsx(InputForDatepicker, __assign({ mask: "00.00.0000", name: name, handleClick: handleModalOpen, value: formattedValue || value, onChange: handleChange, disabled: disabled, message: error, ref: forwardedRef }, props)), jsxRuntime$1.jsxs(StyledModal, __assign({ title: title, description: description, isOpen: isModalOpen, handleClose: handleModalClose, alignTitle: alignTitle }, { children: [jsxRuntime$1.jsx(ContentWrapper$2, { children: jsxRuntime$1.jsx(DatePicker__default["default"], __assign({ inline: true, selected: date || formattedDate, onChange: handleDateChange, calendarContainer: StyledCalendarStandardContainer, renderCustomHeader: function (headProps) { return (jsxRuntime$1.jsx(CalendarHeaderWithSelect, __assign({ yearOptions: yearList, max: max, min: min }, headProps))); }, renderDayContents: function (day) { return (jsxRuntime$1.jsx(DayContent, { children: day })); }, maxDate: max === null || max === void 0 ? void 0 : max.toJSDate(), minDate: min === null || min === void 0 ? void 0 : min.toJSDate() }, datePickerProps)) }), jsxRuntime$1.jsx(ModalFooter, { fullWidth: true, disabled: !formattedDate && !date, onClick: acceptWithDateSelected, label: footerLabel })] }))] }));
|
|
724
724
|
});
|
|
725
725
|
InputWithDatePicker.defaultProps = {
|
|
726
726
|
title: "Дата рождения",
|
|
@@ -729,14 +729,14 @@ InputWithDatePicker.defaultProps = {
|
|
|
729
729
|
footerLabel: "Подтвердить",
|
|
730
730
|
alignTitle: "center",
|
|
731
731
|
};
|
|
732
|
-
var ContentWrapper$
|
|
733
|
-
var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$
|
|
734
|
-
var DayContent = styled__default["default"].span(templateObject_3$
|
|
735
|
-
var StyledModal = styled__default["default"](kuiBasic.Modal)(templateObject_4$
|
|
732
|
+
var ContentWrapper$2 = styled__default["default"].div(templateObject_1$m || (templateObject_1$m = __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"])));
|
|
733
|
+
var StyledCalendarStandardContainer = styled__default["default"](CalendarStandardContainer)(templateObject_2$d || (templateObject_2$d = __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);
|
|
734
|
+
var DayContent = styled__default["default"].span(templateObject_3$6 || (templateObject_3$6 = __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"])));
|
|
735
|
+
var StyledModal = styled__default["default"](kuiBasic.Modal)(templateObject_4$4 || (templateObject_4$4 = __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) {
|
|
736
736
|
var alignTitle = _a.alignTitle;
|
|
737
737
|
return alignTitle || "center";
|
|
738
738
|
});
|
|
739
|
-
var templateObject_1$
|
|
739
|
+
var templateObject_1$m, templateObject_2$d, templateObject_3$6, templateObject_4$4;
|
|
740
740
|
|
|
741
741
|
var shortMonths = [
|
|
742
742
|
"ЯНВ",
|
|
@@ -797,11 +797,11 @@ var MobileInputWithMonthPicker = React.forwardRef(function (_a, ref) {
|
|
|
797
797
|
field === null || field === void 0 ? void 0 : field.onChange({ target: { value: date, name: name }, type: "change" });
|
|
798
798
|
handleModalClose();
|
|
799
799
|
};
|
|
800
|
-
return (jsxRuntime.jsxs(Wrapper$1, __assign({ ref: ref }, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: 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" })] }))] })));
|
|
800
|
+
return (jsxRuntime.jsxs(Wrapper$1, __assign({ ref: ref }, { children: [jsxRuntime.jsx(InputForDatepicker, __assign({ mask: "00.0000", name: name, handleCLick: handleModalOpen, value: value, onChange: handleChange, disabled: disabled, message: error, isLabelShrink: Boolean(field.value) }, props)), jsxRuntime.jsxs(kuiBasic.Modal, __assign({ title: title, isOpen: isModalOpen, handleClose: handleModalClose }, { children: [jsxRuntime.jsx(ContentWrapper$1, { 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" })] }))] })));
|
|
801
801
|
});
|
|
802
|
-
var Wrapper$1 = styled__default["default"].div(templateObject_1$
|
|
803
|
-
var ContentWrapper = styled__default["default"].div(templateObject_2$
|
|
804
|
-
var templateObject_1$
|
|
802
|
+
var Wrapper$1 = styled__default["default"].div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n @media (min-width: 601px) {\n display: none;\n }\n"], ["\n @media (min-width: 601px) {\n display: none;\n }\n"])));
|
|
803
|
+
var ContentWrapper$1 = styled__default["default"].div(templateObject_2$c || (templateObject_2$c = __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"])));
|
|
804
|
+
var templateObject_1$l, templateObject_2$c;
|
|
805
805
|
|
|
806
806
|
var InputWithMonthPicker = function (props) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesktopInputWithMonthPicker, __assign({}, props)), jsxRuntime.jsx(MobileInputWithMonthPicker, __assign({}, props))] })); };
|
|
807
807
|
|
|
@@ -817,9 +817,9 @@ var MobileMenuPanel = React.forwardRef(function (_a, ref) {
|
|
|
817
817
|
};
|
|
818
818
|
return (jsxRuntime$1.jsx(Wrapper, __assign({ css: variant === "white" && { background: "white" }, ref: ref }, { 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)); }) })) })));
|
|
819
819
|
});
|
|
820
|
-
var Wrapper = styled__default["default"].div(templateObject_1$
|
|
821
|
-
var SlideWrapper = styled__default["default"].div(templateObject_2$
|
|
822
|
-
var templateObject_1$
|
|
820
|
+
var Wrapper = styled__default["default"].div(templateObject_1$k || (templateObject_1$k = __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);
|
|
821
|
+
var SlideWrapper = styled__default["default"].div(templateObject_2$b || (templateObject_2$b = __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"])));
|
|
822
|
+
var templateObject_1$k, templateObject_2$b;
|
|
823
823
|
|
|
824
824
|
var useWindowWidth = function (time) {
|
|
825
825
|
if (time === void 0) { time = 10; }
|
|
@@ -869,8 +869,8 @@ var MenuPanel = React.forwardRef(function (_a, ref) {
|
|
|
869
869
|
MenuPanel.defaultProps = {
|
|
870
870
|
variant: "grey",
|
|
871
871
|
};
|
|
872
|
-
var fullHeightStyles = react.css(templateObject_1$
|
|
873
|
-
var templateObject_1$
|
|
872
|
+
var fullHeightStyles = react.css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n height: calc(100vh - 121px);\n"], ["\n height: calc(100vh - 121px);\n"])));
|
|
873
|
+
var templateObject_1$j;
|
|
874
874
|
|
|
875
875
|
var Switch = React.forwardRef(function (_a, ref) {
|
|
876
876
|
var form = _a.form, name = _a.name, props = __rest(_a, ["form", "name"]);
|
|
@@ -923,14 +923,14 @@ InputPhoneWithForm.defaultProps = {
|
|
|
923
923
|
};
|
|
924
924
|
|
|
925
925
|
var Table = React.forwardRef(function (props, ref) { return jsxRuntime.jsx(StyledTable, __assign({ cellSpacing: "0", ref: ref }, props)); });
|
|
926
|
-
var StyledTable = styled__default["default"].table(templateObject_1$
|
|
927
|
-
var templateObject_1$
|
|
926
|
+
var StyledTable = styled__default["default"].table(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n width: 100%;\n border-spacing: 0;\n"], ["\n width: 100%;\n border-spacing: 0;\n"])));
|
|
927
|
+
var templateObject_1$i;
|
|
928
928
|
|
|
929
|
-
var TableHeadCell = styled__default["default"].th(templateObject_1$
|
|
930
|
-
var templateObject_1$
|
|
929
|
+
var TableHeadCell = styled__default["default"].th(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n padding: 0;\n text-align: left;\n"], ["\n padding: 0;\n text-align: left;\n"])));
|
|
930
|
+
var templateObject_1$h;
|
|
931
931
|
|
|
932
|
-
var TableCell = styled__default["default"].td(templateObject_1$
|
|
933
|
-
var templateObject_1$
|
|
932
|
+
var TableCell = styled__default["default"].td(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n padding: 0;\n"], ["\n padding: 0;\n"])));
|
|
933
|
+
var templateObject_1$g;
|
|
934
934
|
|
|
935
935
|
var TableRow = React.forwardRef(function (_a, ref) {
|
|
936
936
|
var children = _a.children, other = __rest(_a, ["children"]);
|
|
@@ -969,15 +969,15 @@ var PopperBase = React.forwardRef(function (props, ref) {
|
|
|
969
969
|
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"]);
|
|
970
970
|
return (jsxRuntime.jsx(StyledPopperWrapper, __assign({ ref: ref, className: classNames__default["default"]("KUI-Popper", className), spacing: spacing, style: style }, { children: jsxRuntime.jsx(StyledPopper, __assign({ open: !!open }, other, { children: children })) })));
|
|
971
971
|
});
|
|
972
|
-
var StyledPopperWrapper = styled__default["default"].div(templateObject_1$
|
|
972
|
+
var StyledPopperWrapper = styled__default["default"].div(templateObject_1$f || (templateObject_1$f = __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) {
|
|
973
973
|
var spacing = _a.spacing;
|
|
974
974
|
return spacing || 0;
|
|
975
975
|
}, kuiBasic.theme.breakpoints.xxs);
|
|
976
|
-
var StyledPopper = styled__default["default"].div(templateObject_2$
|
|
976
|
+
var StyledPopper = styled__default["default"].div(templateObject_2$a || (templateObject_2$a = __makeTemplateObject(["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"], ["\n padding: 16px;\n border-radius: 12px;\n background: white;\n box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);\n transition: opacity 0.3s ease-out;\n opacity: ", ";\n"])), function (_a) {
|
|
977
977
|
var open = _a.open;
|
|
978
978
|
return (open ? 1 : 0);
|
|
979
979
|
});
|
|
980
|
-
var templateObject_1$
|
|
980
|
+
var templateObject_1$f, templateObject_2$a;
|
|
981
981
|
|
|
982
982
|
var PopperWithPortal = React.forwardRef(function (props, ref) {
|
|
983
983
|
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
@@ -1021,9 +1021,9 @@ var PopperWithPortal = React.forwardRef(function (props, ref) {
|
|
|
1021
1021
|
// TODO подумать как реализовать правильное расположение подсказки под contentRef в зависимости от placement
|
|
1022
1022
|
// Автоматом менять положение (верх-низ) в зависимости от того помещается или нет
|
|
1023
1023
|
// Распожить стрелочку к контенту посередине контента
|
|
1024
|
-
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$
|
|
1024
|
+
return ReactDOM__namespace.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Global, { styles: react.css(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n body {\n position: relative;\n }\n "], ["\n body {\n position: relative;\n }\n "]))) }), jsxRuntime.jsx(PopperBase, __assign({ ref: forwardedRef, style: position }, other))] }), document.body);
|
|
1025
1025
|
});
|
|
1026
|
-
var templateObject_1$
|
|
1026
|
+
var templateObject_1$e;
|
|
1027
1027
|
|
|
1028
1028
|
var StaticPopper = React.forwardRef(function (props, ref) {
|
|
1029
1029
|
var placement = props.placement, contentRef = props.contentRef, other = __rest(props, ["placement", "contentRef"]);
|
|
@@ -1105,24 +1105,24 @@ var Tooltip = React.forwardRef(function (props, ref) {
|
|
|
1105
1105
|
React.useEffect(function () {
|
|
1106
1106
|
setOpen(open);
|
|
1107
1107
|
}, [open]);
|
|
1108
|
-
return (jsxRuntime.jsxs(StyledWrapper$
|
|
1108
|
+
return (jsxRuntime.jsxs(StyledWrapper$7, __assign({ onMouseLeave: handleClose, ref: ref }, { children: [jsxRuntime.jsx(StyledContentWrapper, __assign({ onMouseEnter: handleOpen, onTouchEnd: handleOpen, ref: elemRef, cursor: cursor }, { children: jsxRuntime.jsx(StyledContent$1, { children: children }) })), jsxRuntime.jsx(Popper, __assign({ open: isOpen }, popper, { contentRef: elemRef }, { children: content }))] })));
|
|
1109
1109
|
});
|
|
1110
|
-
var containerCSS = react.css(templateObject_1$
|
|
1111
|
-
var StyledWrapper$
|
|
1112
|
-
var StyledContentWrapper = styled__default["default"].div(templateObject_3$
|
|
1110
|
+
var containerCSS = react.css(templateObject_1$d || (templateObject_1$d = __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"])));
|
|
1111
|
+
var StyledWrapper$7 = styled__default["default"].div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n ", ";\n position: relative;\n"], ["\n ", ";\n position: relative;\n"])), containerCSS);
|
|
1112
|
+
var StyledContentWrapper = styled__default["default"].div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", ";\n cursor: ", ";\n"], ["\n ", ";\n cursor: ", ";\n"])), containerCSS, function (_a) {
|
|
1113
1113
|
var cursor = _a.cursor;
|
|
1114
1114
|
return cursor;
|
|
1115
1115
|
});
|
|
1116
|
-
var StyledContent = styled__default["default"].div(templateObject_4$
|
|
1117
|
-
var templateObject_1$
|
|
1116
|
+
var StyledContent$1 = styled__default["default"].div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n ", ";\n z-index: -1;\n"], ["\n ", ";\n z-index: -1;\n"])), containerCSS);
|
|
1117
|
+
var templateObject_1$d, templateObject_2$9, templateObject_3$5, templateObject_4$3;
|
|
1118
1118
|
|
|
1119
1119
|
var ButtonSelect = React.forwardRef(function (props, ref) {
|
|
1120
1120
|
var _a;
|
|
1121
1121
|
var options = props.options, otherProps = __rest(props, ["options"]);
|
|
1122
1122
|
return (jsxRuntime.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 })));
|
|
1123
1123
|
});
|
|
1124
|
-
var StyledInputSelect = styled__default["default"](InputSelect)(templateObject_1$
|
|
1125
|
-
var templateObject_1$
|
|
1124
|
+
var StyledInputSelect = styled__default["default"](InputSelect)(templateObject_1$c || (templateObject_1$c = __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"])), kuiBasic.theme.breakpoints.xs);
|
|
1125
|
+
var templateObject_1$c;
|
|
1126
1126
|
|
|
1127
1127
|
function InputSelectWithController(_a) {
|
|
1128
1128
|
var _b, _c;
|
|
@@ -1152,17 +1152,17 @@ function InputMultiSelectOption(props) {
|
|
|
1152
1152
|
var selected = selectedValue.includes(option.value);
|
|
1153
1153
|
return (jsxRuntime.jsx(StyledOption, __assign({ container: true, selected: selected }, { children: jsxRuntime.jsx(kuiBasic.Checkbox, { checked: selected, label: jsxRuntime.jsx(StyledCaption, __assign({ selected: selected, size: "sm", weight: 500 }, { children: option.label })) }) })));
|
|
1154
1154
|
}
|
|
1155
|
-
var StyledOption = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
1155
|
+
var StyledOption = styled__default["default"](kuiBasic.Grid)(templateObject_1$b || (templateObject_1$b = __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) {
|
|
1156
1156
|
var selected = _a.selected;
|
|
1157
1157
|
return selected ? kuiBasic.theme.palette.background.light1 : kuiBasic.theme.palette.grey.zero;
|
|
1158
1158
|
}, kuiBasic.theme.palette.background.light1, kuiBasic.theme.palette.grey.seventy);
|
|
1159
|
-
var StyledCaption = styled__default["default"](kuiBasic.Caption)(templateObject_2$
|
|
1159
|
+
var StyledCaption = styled__default["default"](kuiBasic.Caption)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n color: ", " !important;\n"], ["\n color: ", " !important;\n"])), function (_a) {
|
|
1160
1160
|
var selected = _a.selected;
|
|
1161
1161
|
return selected
|
|
1162
1162
|
? kuiBasic.theme.palette.grey.seventy
|
|
1163
1163
|
: kuiBasic.theme.palette.grey.fiftyP;
|
|
1164
1164
|
});
|
|
1165
|
-
var templateObject_1$
|
|
1165
|
+
var templateObject_1$b, templateObject_2$8;
|
|
1166
1166
|
|
|
1167
1167
|
function InputMultiSelect(_a) {
|
|
1168
1168
|
var _b, _c;
|
|
@@ -1265,20 +1265,20 @@ function RadioGroupWithLabel(props) {
|
|
|
1265
1265
|
name: name,
|
|
1266
1266
|
}).fieldState;
|
|
1267
1267
|
var errorMessage = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1268
|
-
return (jsxRuntime.jsxs(StyledContainer, { children: [jsxRuntime.jsxs(StyledWrapper$
|
|
1268
|
+
return (jsxRuntime.jsxs(StyledContainer, { children: [jsxRuntime.jsxs(StyledWrapper$6, __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 && (jsxRuntime.jsx(StyledTitle, __assign({ direction: direction, size: "xs", weight: 600 }, { children: title.toUpperCase() }))), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true, xs: direction === "vertical" ? 12 : "auto" }, { children: jsxRuntime.jsx(RadioButtonsWithController, __assign({ form: form, name: name }, otherProps)) }))] })), errorMessage && jsxRuntime.jsx(kuiBasic.InputMessage, { variant: "error", msg: errorMessage })] }));
|
|
1269
1269
|
}
|
|
1270
|
-
var StyledContainer = styled__default["default"].div(templateObject_1$
|
|
1270
|
+
var StyledContainer = styled__default["default"].div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1271
1271
|
var columnDirectionCSS = function (_a) {
|
|
1272
1272
|
var hasError = _a.hasError;
|
|
1273
|
-
return react.css(templateObject_2$
|
|
1273
|
+
return react.css(templateObject_2$7 || (templateObject_2$7 = __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");
|
|
1274
1274
|
};
|
|
1275
1275
|
var rowDirectionCSS = function (_a) {
|
|
1276
1276
|
var hasError = _a.hasError, withTitle = _a.withTitle;
|
|
1277
|
-
return react.css(templateObject_3$
|
|
1277
|
+
return react.css(templateObject_3$4 || (templateObject_3$4 = __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");
|
|
1278
1278
|
};
|
|
1279
|
-
var StyledWrapper$
|
|
1279
|
+
var StyledWrapper$6 = styled__default["default"](kuiBasic.Grid, {
|
|
1280
1280
|
shouldForwardProp: function (prop) { return prop !== "hasError" && prop !== "withTitle"; },
|
|
1281
|
-
})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n ", ";\n"], ["\n border: 1px solid\n ", ";\n ", ";\n"])), function (_a) {
|
|
1281
|
+
})(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n border: 1px solid\n ", ";\n ", ";\n"], ["\n border: 1px solid\n ", ";\n ", ";\n"])), function (_a) {
|
|
1282
1282
|
var hasError = _a.hasError;
|
|
1283
1283
|
return hasError ? kuiBasic.theme.palette.red.fiftyP : kuiBasic.theme.palette.grey.fifteenB;
|
|
1284
1284
|
}, function (_a) {
|
|
@@ -1287,27 +1287,27 @@ var StyledWrapper$3 = styled__default["default"](kuiBasic.Grid, {
|
|
|
1287
1287
|
? columnDirectionCSS({ hasError: hasError })
|
|
1288
1288
|
: rowDirectionCSS({ hasError: hasError, withTitle: withTitle });
|
|
1289
1289
|
});
|
|
1290
|
-
var StyledTitle = styled__default["default"](kuiBasic.Caption)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-bottom: ", "px;\n"], ["\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
1290
|
+
var StyledTitle = styled__default["default"](kuiBasic.Caption)(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n margin-bottom: ", "px;\n"], ["\n margin-bottom: ", "px;\n"])), function (_a) {
|
|
1291
1291
|
var direction = _a.direction;
|
|
1292
1292
|
return (direction === "vertical" ? 8 : 0);
|
|
1293
1293
|
});
|
|
1294
|
-
var templateObject_1$
|
|
1294
|
+
var templateObject_1$a, templateObject_2$7, templateObject_3$4, templateObject_4$2, templateObject_5$2;
|
|
1295
1295
|
|
|
1296
1296
|
var Loading = React.forwardRef(function (_a) {
|
|
1297
1297
|
var height = _a.height, className = _a.className, otherProps = __rest(_a, ["height", "className"]);
|
|
1298
|
-
return (jsxRuntime.jsx(StyledWrapper$
|
|
1298
|
+
return (jsxRuntime.jsx(StyledWrapper$5, __assign({ container: true, alignItems: "center", justify: "center", className: className, height: height }, { children: jsxRuntime.jsx(StyledCircularProgress, __assign({}, otherProps)) })));
|
|
1299
1299
|
});
|
|
1300
1300
|
Loading.defaultProps = {
|
|
1301
1301
|
height: "adaptive",
|
|
1302
1302
|
};
|
|
1303
|
-
var StyledCircularProgress = styled__default["default"](kuiBasic.CircularProgress)(templateObject_1$
|
|
1304
|
-
var StyledWrapper$
|
|
1303
|
+
var StyledCircularProgress = styled__default["default"](kuiBasic.CircularProgress)(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), kuiBasic.theme.palette.brand.main);
|
|
1304
|
+
var StyledWrapper$5 = styled__default["default"](kuiBasic.Grid, {
|
|
1305
1305
|
shouldForwardProp: function (prop) { return prop !== "height"; },
|
|
1306
|
-
})(templateObject_2$
|
|
1306
|
+
})(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n height: ", ";\n"], ["\n height: ", ";\n"])), function (_a) {
|
|
1307
1307
|
var height = _a.height;
|
|
1308
1308
|
return height;
|
|
1309
1309
|
});
|
|
1310
|
-
var templateObject_1$
|
|
1310
|
+
var templateObject_1$9, templateObject_2$6;
|
|
1311
1311
|
|
|
1312
1312
|
function CreatingEntityFromDropdown(_a) {
|
|
1313
1313
|
var creatingLabel = _a.creatingLabel, renderCreatingModal = _a.renderCreatingModal;
|
|
@@ -1316,25 +1316,25 @@ function CreatingEntityFromDropdown(_a) {
|
|
|
1316
1316
|
return null;
|
|
1317
1317
|
}
|
|
1318
1318
|
var handleModalWrapperClick = function (e) { return e.stopPropagation(); };
|
|
1319
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledWrapper$
|
|
1319
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledWrapper$4, __assign({ container: true, onClick: handleModalOpen, alignItems: "center" }, { children: [jsxRuntime.jsx(StyledPlusIcon, { width: 12, height: 12 }), jsxRuntime.jsx(kuiBasic.Caption, __assign({ color: "fiftyP", size: "xs", weight: 500 }, { children: creatingLabel }))] })), jsxRuntime.jsx(StyledModalWrapper, __assign({ onClick: handleModalWrapperClick }, { children: renderCreatingModal({
|
|
1320
1320
|
isOpen: isModalOpen,
|
|
1321
1321
|
handleClose: handleModalClose,
|
|
1322
1322
|
}) }))] }));
|
|
1323
1323
|
}
|
|
1324
|
-
var StyledWrapper$
|
|
1325
|
-
var StyledPlusIcon = styled__default["default"](kuiIcon.PlusIcon)(templateObject_2$
|
|
1326
|
-
var StyledModalWrapper = styled__default["default"].div(templateObject_3$
|
|
1327
|
-
var templateObject_1$
|
|
1324
|
+
var StyledWrapper$4 = styled__default["default"](kuiBasic.Grid)(templateObject_1$8 || (templateObject_1$8 = __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"])), kuiBasic.theme.palette.grey.fifteenB);
|
|
1325
|
+
var StyledPlusIcon = styled__default["default"](kuiIcon.PlusIcon)(templateObject_2$5 || (templateObject_2$5 = __makeTemplateObject(["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"], ["\n margin-right: 14px;\n path {\n fill: ", ";\n }\n"])), kuiBasic.theme.palette.grey.fiftyP);
|
|
1326
|
+
var StyledModalWrapper = styled__default["default"].div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject([""], [""])));
|
|
1327
|
+
var templateObject_1$8, templateObject_2$5, templateObject_3$3;
|
|
1328
1328
|
|
|
1329
|
-
var AutocompleteOption = function (props) {
|
|
1329
|
+
var AutocompleteOption$1 = function (props) {
|
|
1330
1330
|
var option = props.option, renderOption = props.renderOption, handleSelect = props.handleSelect, index = props.index;
|
|
1331
1331
|
var handleClick = function () {
|
|
1332
1332
|
handleSelect(option);
|
|
1333
1333
|
};
|
|
1334
1334
|
return (jsxRuntime.jsx(StyledOptionWrapper, __assign({ item: true, xs: 12, onClick: handleClick, "data-testid": "autocomplete_option_".concat(index) }, { children: renderOption(option) })));
|
|
1335
1335
|
};
|
|
1336
|
-
var StyledOptionWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$
|
|
1337
|
-
var templateObject_1$
|
|
1336
|
+
var StyledOptionWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
1337
|
+
var templateObject_1$7;
|
|
1338
1338
|
|
|
1339
1339
|
function AutocompleteDropdown(props) {
|
|
1340
1340
|
var options = props.options, renderOption = props.renderOption, creatingLabel = props.creatingLabel, renderCreatingModal = props.renderCreatingModal;
|
|
@@ -1347,11 +1347,11 @@ function AutocompleteDropdown(props) {
|
|
|
1347
1347
|
handleScrollEnd();
|
|
1348
1348
|
}
|
|
1349
1349
|
};
|
|
1350
|
-
return (jsxRuntime.jsxs(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, onScroll: handleScroll, endComponent: jsxRuntime.jsx(CreatingEntityFromDropdown, { creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal }) }, { children: [options.map(function (option, key) { return (jsxRuntime.jsx(AutocompleteOption, { option: option, renderOption: renderOption, handleSelect: handleSelect, index: key }, key)); }), isLoading && jsxRuntime.jsx(StyledLoading, { height: "auto" })] })));
|
|
1350
|
+
return (jsxRuntime.jsxs(StyledDropdown, __assign({ buttonRef: inputRef, isOpen: isOpenDropdown, handleClose: handleCloseDropdown, onScroll: handleScroll, endComponent: jsxRuntime.jsx(CreatingEntityFromDropdown, { creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal }) }, { children: [options.map(function (option, key) { return (jsxRuntime.jsx(AutocompleteOption$1, { option: option, renderOption: renderOption, handleSelect: handleSelect, index: key }, key)); }), isLoading && jsxRuntime.jsx(StyledLoading, { height: "auto" })] })));
|
|
1351
1351
|
}
|
|
1352
|
-
var StyledDropdown = styled__default["default"](InputDropdown)(templateObject_1$
|
|
1353
|
-
var StyledLoading = styled__default["default"](Loading)(templateObject_2$
|
|
1354
|
-
var templateObject_1$
|
|
1352
|
+
var StyledDropdown = styled__default["default"](InputDropdown)(templateObject_1$6 || (templateObject_1$6 = __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"])));
|
|
1353
|
+
var StyledLoading = styled__default["default"](Loading)(templateObject_2$4 || (templateObject_2$4 = __makeTemplateObject(["\n position: sticky;\n bottom: 30px;\n"], ["\n position: sticky;\n bottom: 30px;\n"])));
|
|
1354
|
+
var templateObject_1$6, templateObject_2$4;
|
|
1355
1355
|
|
|
1356
1356
|
function InputWithAutocomplete(_a) {
|
|
1357
1357
|
var _b;
|
|
@@ -1388,7 +1388,7 @@ function InputWithAutocomplete(_a) {
|
|
|
1388
1388
|
handleOpenDropdown();
|
|
1389
1389
|
};
|
|
1390
1390
|
var forwardRef = useForkRef(inputRef, inputRefProps);
|
|
1391
|
-
return (jsxRuntime$1.jsxs(StyledWrapper, { children: [isLabelLoading && (jsxRuntime$1.jsx(StyledLoadingWrapper, { children: jsxRuntime$1.jsx(Loading, { height: "100%" }) })), jsxRuntime$1.jsx(StyledInput, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsxs(kuiBasic.Grid, __assign({ container: true, alignItems: "center" }, { children: [jsxRuntime$1.jsx(kuiBasic.Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
|
|
1391
|
+
return (jsxRuntime$1.jsxs(StyledWrapper$3, { children: [isLabelLoading && (jsxRuntime$1.jsx(StyledLoadingWrapper, { children: jsxRuntime$1.jsx(Loading, { height: "100%" }) })), jsxRuntime$1.jsx(StyledInput$2, __assign({ form: form, onInput: handleSearch, onFocus: handleOpenDropdown, name: name, disabled: disabled, ref: forwardRef, isDropdownOpen: isOpenDropdown }, inputProps, { endIcon: !disabled && (jsxRuntime$1.jsxs(kuiBasic.Grid, __assign({ container: true, alignItems: "center" }, { children: [jsxRuntime$1.jsx(kuiBasic.Box, __assign({ mr: 2 }, { children: endComponent })), inputProps.endIcon ||
|
|
1392
1392
|
(!disabled && (jsxRuntime$1.jsx(kuiIcon.HalfArrowIcon, { width: 12, height: 13, css: [
|
|
1393
1393
|
{ transition: "all linear .2s" },
|
|
1394
1394
|
isOpenDropdown && { transform: "rotate(180deg)" },
|
|
@@ -1396,13 +1396,263 @@ function InputWithAutocomplete(_a) {
|
|
|
1396
1396
|
current: (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.parentElement,
|
|
1397
1397
|
}, isOpenDropdown: isOpenDropdown, handleCloseDropdown: handleCloseDropdown, handleSelect: handleSelect, isLoading: isLoading, handleScrollEnd: handleScrollEnd, creatingLabel: creatingLabel, renderCreatingModal: renderCreatingModal })] }));
|
|
1398
1398
|
}
|
|
1399
|
-
var StyledLoadingWrapper = styled__default["default"].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"])));
|
|
1400
|
-
var StyledWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1401
|
-
var StyledInput = styled__default["default"](InputWithController)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"], ["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
1399
|
+
var StyledLoadingWrapper = styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __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"])));
|
|
1400
|
+
var StyledWrapper$3 = styled__default["default"].div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1401
|
+
var StyledInput$2 = styled__default["default"](InputWithController)(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"], ["\n .KUI-InputMessage {\n opacity: ", ";\n }\n"])), function (_a) {
|
|
1402
1402
|
var isDropdownOpen = _a.isDropdownOpen;
|
|
1403
1403
|
return (isDropdownOpen ? 0 : 1);
|
|
1404
1404
|
});
|
|
1405
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
1405
|
+
var templateObject_1$5, templateObject_2$3, templateObject_3$2;
|
|
1406
|
+
|
|
1407
|
+
function AutocompleteOption(_a) {
|
|
1408
|
+
var label = _a.label;
|
|
1409
|
+
return (jsxRuntime.jsx(StyledWrapper$2, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "s", weight: 500 }, { children: label })) }));
|
|
1410
|
+
}
|
|
1411
|
+
var StyledWrapper$2 = styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __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"])), kuiBasic.theme.palette.background.light2);
|
|
1412
|
+
var templateObject_1$4;
|
|
1413
|
+
|
|
1414
|
+
var updateQueryParams = function (newLink) {
|
|
1415
|
+
var searchQuery = new URLSearchParams(window.location.search);
|
|
1416
|
+
var hrefLinkParams = newLink.split(/\?|&/);
|
|
1417
|
+
var hrefParams = Object.fromEntries(new URLSearchParams(hrefLinkParams.slice(1).join("&")).entries());
|
|
1418
|
+
var searchParams = Object.fromEntries(searchQuery.entries());
|
|
1419
|
+
var route = hrefLinkParams[0];
|
|
1420
|
+
Object.keys(searchParams).forEach(function (key, index) {
|
|
1421
|
+
if (key in hrefParams) {
|
|
1422
|
+
searchParams[key] = hrefParams[key];
|
|
1423
|
+
delete hrefParams[key];
|
|
1424
|
+
}
|
|
1425
|
+
if (key !== "id") {
|
|
1426
|
+
route += "".concat(index === 0 ? "?" : "&").concat(key, "=").concat(searchParams[key]);
|
|
1427
|
+
}
|
|
1428
|
+
});
|
|
1429
|
+
Object.keys(hrefParams).forEach(function (key) {
|
|
1430
|
+
route += "&".concat(key, "=").concat(hrefParams[key]);
|
|
1431
|
+
});
|
|
1432
|
+
window.history.pushState({ route: route }, "", route);
|
|
1433
|
+
};
|
|
1434
|
+
|
|
1435
|
+
function Link(props) {
|
|
1436
|
+
var href = props.href, withoutRoute = props.withoutRoute, stopPropagation = props.stopPropagation, openInNewWindow = props.openInNewWindow, other = __rest(props, ["href", "withoutRoute", "stopPropagation", "openInNewWindow"]);
|
|
1437
|
+
var navigate = reactRouterDom.useNavigate();
|
|
1438
|
+
var handleClick = function (e) {
|
|
1439
|
+
if (stopPropagation)
|
|
1440
|
+
e.stopPropagation();
|
|
1441
|
+
e.preventDefault();
|
|
1442
|
+
if (href) {
|
|
1443
|
+
if (withoutRoute)
|
|
1444
|
+
updateQueryParams(href);
|
|
1445
|
+
else if (openInNewWindow)
|
|
1446
|
+
window.open(href, "_blank");
|
|
1447
|
+
else
|
|
1448
|
+
navigate(href);
|
|
1449
|
+
}
|
|
1450
|
+
};
|
|
1451
|
+
return (jsxRuntime.jsx(StyledLink, __assign({ href: href || undefined, onClick: handleClick }, other)));
|
|
1452
|
+
}
|
|
1453
|
+
var StyledLink = styled__default["default"].a(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n text-decoration: none;\n color: inherit;\n max-width: 100%;\n width: 100%;\n"], ["\n text-decoration: none;\n color: inherit;\n max-width: 100%;\n width: 100%;\n"])));
|
|
1454
|
+
var templateObject_1$3;
|
|
1455
|
+
|
|
1456
|
+
function FileItem(_a) {
|
|
1457
|
+
var _b, _c;
|
|
1458
|
+
var file = _a.file, onDelete = _a.onDelete, onChange = _a.onChange, index = _a.index, selectedFile = _a.selectedFile, setSelectedFile = _a.setSelectedFile, limitTitle = _a.limitTitle, icon = _a.icon, subtitle = _a.subtitle, disabled = _a.disabled, error = _a.error, className = _a.className, otherProps = __rest(_a, ["file", "onDelete", "onChange", "index", "selectedFile", "setSelectedFile", "limitTitle", "icon", "subtitle", "disabled", "error", "className"]);
|
|
1459
|
+
var formattedFileName = String((_c = (file.title || file.name || ((_b = file.file) === null || _b === void 0 ? void 0 : _b.name))) === null || _c === void 0 ? void 0 : _c.replace(/\.[^/.]+$/, ""));
|
|
1460
|
+
var _d = React.useState(formattedFileName), title = _d[0], setTitle = _d[1];
|
|
1461
|
+
var _e = React.useState(false), isEditing = _e[0], setIsEditing = _e[1];
|
|
1462
|
+
var inputRef = React.useRef(null);
|
|
1463
|
+
React.useEffect(function () {
|
|
1464
|
+
var _a;
|
|
1465
|
+
if (isEditing) {
|
|
1466
|
+
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
1467
|
+
}
|
|
1468
|
+
if (!isEditing && formattedFileName !== title && onChange) {
|
|
1469
|
+
onChange(title, index);
|
|
1470
|
+
}
|
|
1471
|
+
}, [isEditing]);
|
|
1472
|
+
var toggleEdit = function () {
|
|
1473
|
+
setIsEditing(function (prev) { return !prev; });
|
|
1474
|
+
};
|
|
1475
|
+
var handleBlur = function () {
|
|
1476
|
+
setIsEditing(false);
|
|
1477
|
+
};
|
|
1478
|
+
var handleChange = function (e) {
|
|
1479
|
+
setTitle(e.target.value);
|
|
1480
|
+
};
|
|
1481
|
+
var handleDelete = function () {
|
|
1482
|
+
var _a;
|
|
1483
|
+
if (onDelete) {
|
|
1484
|
+
onDelete((_a = file.index) !== null && _a !== void 0 ? _a : 1, Number(index));
|
|
1485
|
+
}
|
|
1486
|
+
};
|
|
1487
|
+
var handleClick = function () {
|
|
1488
|
+
if (setSelectedFile) {
|
|
1489
|
+
setSelectedFile(index !== null && index !== void 0 ? index : 1);
|
|
1490
|
+
}
|
|
1491
|
+
};
|
|
1492
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FileWrapper, __assign({ selected: (selectedFile !== null && selectedFile !== void 0 ? selectedFile : -1) === index, error: (limitTitle && title.length > limitTitle) || !!error, onClick: handleClick, disabled: !!disabled, className: "FileWrapper ".concat(className || "") }, otherProps, { children: [jsxRuntime.jsx(FileIconWrapper, __assign({ className: "FileIcon_wrapper" }, { children: icon || jsxRuntime.jsx(kuiIcon.FileIcon, {}) })), jsxRuntime.jsxs(ContentWrapper, __assign({ className: "FileContent_wrapper" }, { children: [jsxRuntime.jsxs(InputWrapper, { children: [jsxRuntime.jsx(Link, __assign({ href: file.url, openInNewWindow: true }, { children: jsxRuntime.jsx(InputPlaceholder, { children: title }) })), jsxRuntime.jsx(StyledInput$1, { "data-testid": "file_name", ref: inputRef, disabled: !isEditing, value: title, onChange: handleChange, onBlur: handleBlur, maxLength: 100 })] }), subtitle ||
|
|
1493
|
+
(String(file.size) && (jsxRuntime.jsxs(kuiBasic.Caption, __assign({ "data-testid": "file_size", size: "xs", color: "fiftyP" }, { children: [Number(file.size), " mb"] }))))] })), jsxRuntime.jsxs(ButtonWrapper, __assign({ className: "FileButtons_wrapper" }, { children: [!disabled && onChange && (jsxRuntime.jsx(kuiBasic.Button, __assign({ isCircle: true, "data-testid": "edit_file_name_btn", size: "xs", variant: "transparentLight", onClick: toggleEdit }, { children: isEditing ? jsxRuntime.jsx(kuiIcon.CheckIcon, {}) : jsxRuntime.jsx(kuiIcon.EditIcon, { width: 18, height: 18 }) }))), onDelete && !disabled && (jsxRuntime.jsx(kuiBasic.Button, __assign({ isCircle: true, "data-testid": "delete_file_btn", size: "xs", variant: "transparentLight", onClick: handleDelete }, { children: jsxRuntime.jsx(kuiIcon.TrashIcon, { width: 18, height: 18 }) })))] }))] })), ((limitTitle && title.length > limitTitle) || error) && (jsxRuntime.jsx(kuiBasic.Box, __assign({ mb: 1 }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "xs", colorGroup: "red", weight: 500 }, { children: error ||
|
|
1494
|
+
"File upload error. The number of characters in the file name should not exceed 100" })) })))] }));
|
|
1495
|
+
}
|
|
1496
|
+
FileItem.defaultProps = {
|
|
1497
|
+
limitTitle: 100,
|
|
1498
|
+
};
|
|
1499
|
+
var errorCSS = function (_a) {
|
|
1500
|
+
var error = _a.error;
|
|
1501
|
+
return error && react.css(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n border-color: ", ";\n "], ["\n border-color: ", ";\n "])), kuiBasic.theme.palette.red.seventy);
|
|
1502
|
+
};
|
|
1503
|
+
var disabledCSS = function (_a) {
|
|
1504
|
+
var disabled = _a.disabled;
|
|
1505
|
+
return disabled && react.css(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), kuiBasic.theme.palette.background.light1);
|
|
1506
|
+
};
|
|
1507
|
+
var FileWrapper = styled__default["default"].div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n width: 100%;\n border-radius: 12px;\n padding: 10px 12px;\n border: 1px solid\n ", ";\n display: flex;\n margin-bottom: 8px;\n cursor: pointer;\n ", ";\n ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n width: 100%;\n border-radius: 12px;\n padding: 10px 12px;\n border: 1px solid\n ", ";\n display: flex;\n margin-bottom: 8px;\n cursor: pointer;\n ", ";\n ", ";\n &:last-child {\n margin-bottom: 0;\n }\n"])), function (_a) {
|
|
1508
|
+
var selected = _a.selected;
|
|
1509
|
+
return selected ? kuiBasic.theme.palette.brand.main : kuiBasic.theme.palette.grey.fifteenB;
|
|
1510
|
+
}, disabledCSS, errorCSS);
|
|
1511
|
+
var FileIconWrapper = styled__default["default"].div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n margin-right: 16px;\n min-height: 32px;\n width: 32px;\n border-radius: 12px;\n background: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: flex-start;\n"], ["\n margin-right: 16px;\n min-height: 32px;\n width: 32px;\n border-radius: 12px;\n background: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n align-self: flex-start;\n"])), kuiBasic.theme.palette.brand.light);
|
|
1512
|
+
var ButtonWrapper = styled__default["default"].div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-left: auto;\n padding-left: 8px;\n display: flex;\n align-items: center;\n align-self: flex-start;\n svg {\n path {\n fill: ", ";\n }\n }\n"], ["\n margin-left: auto;\n padding-left: 8px;\n display: flex;\n align-items: center;\n align-self: flex-start;\n svg {\n path {\n fill: ", ";\n }\n }\n"])), kuiBasic.theme.palette.grey.thirty);
|
|
1513
|
+
var ContentWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: calc(100% - 120px);\n min-height: 34px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n & > p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"], ["\n width: calc(100% - 120px);\n min-height: 34px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n & > p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n"])));
|
|
1514
|
+
var StyledInput$1 = styled__default["default"].textarea(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border: none;\n font-size: 14px;\n position: absolute;\n top: 0;\n left: 0;\n font-weight: 500;\n background: transparent;\n padding: 0;\n color: ", ";\n caret-color: ", ";\n height: -webkit-fill-available;\n overflow: hidden;\n resize: none;\n width: 100%;\n &:focus-visible {\n outline: none;\n }\n &:disabled {\n pointer-events: none;\n }\n"], ["\n border: none;\n font-size: 14px;\n position: absolute;\n top: 0;\n left: 0;\n font-weight: 500;\n background: transparent;\n padding: 0;\n color: ", ";\n caret-color: ", ";\n height: -webkit-fill-available;\n overflow: hidden;\n resize: none;\n width: 100%;\n &:focus-visible {\n outline: none;\n }\n &:disabled {\n pointer-events: none;\n }\n"])), kuiBasic.theme.palette.grey.seventy, kuiBasic.theme.palette.brand.main);
|
|
1515
|
+
var InputPlaceholder = styled__default["default"].span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n word-break: break-word;\n max-width: 100%;\n color: transparent;\n min-height: 17px;\n display: inline-block;\n white-space: nowrap;\n"], ["\n font-size: 14px;\n font-weight: 500;\n word-break: break-word;\n max-width: 100%;\n color: transparent;\n min-height: 17px;\n display: inline-block;\n white-space: nowrap;\n"])));
|
|
1516
|
+
var InputWrapper = styled__default["default"].div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n max-width: 100%;\n height: auto;\n"], ["\n position: relative;\n width: fit-content;\n max-width: 100%;\n height: auto;\n"])));
|
|
1517
|
+
var templateObject_1$2, templateObject_2$2, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
1518
|
+
|
|
1519
|
+
var limitTitle = 100;
|
|
1520
|
+
var InputFile = React.forwardRef(function (props, ref) {
|
|
1521
|
+
var _a;
|
|
1522
|
+
var form = props.form, name = props.name, label = props.label, disabled = props.disabled, withEdit = props.withEdit, fileName = props.fileName, otherProps = __rest(props, ["form", "name", "label", "disabled", "withEdit", "fileName"]);
|
|
1523
|
+
var _b = React.useState(false), mounted = _b[0], setMounted = _b[1];
|
|
1524
|
+
var _c = React.useState(), file = _c[0], setFile = _c[1];
|
|
1525
|
+
var _d = React.useState(""), defaultFileURL = _d[0], setDefaultFileURL = _d[1];
|
|
1526
|
+
var inputRef = React.useRef(null);
|
|
1527
|
+
var _e = reactHookForm.useController({
|
|
1528
|
+
control: form.control,
|
|
1529
|
+
name: name,
|
|
1530
|
+
}), field = _e.field, fieldState = _e.fieldState;
|
|
1531
|
+
var formattedFile = file && "url" in file
|
|
1532
|
+
? file
|
|
1533
|
+
: {
|
|
1534
|
+
file: file,
|
|
1535
|
+
url: file ? URL.createObjectURL(file) : defaultFileURL,
|
|
1536
|
+
size: file
|
|
1537
|
+
? Math.round((file.size / (1024 * 1024)) * 100) / 100
|
|
1538
|
+
: null,
|
|
1539
|
+
name: fileName || (file === null || file === void 0 ? void 0 : file.name),
|
|
1540
|
+
};
|
|
1541
|
+
var error = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message;
|
|
1542
|
+
React.useEffect(function () {
|
|
1543
|
+
if (typeof field.value === "string") {
|
|
1544
|
+
setDefaultFileURL(field.value);
|
|
1545
|
+
}
|
|
1546
|
+
if (typeof field.value === "object") {
|
|
1547
|
+
setFile(field.value);
|
|
1548
|
+
}
|
|
1549
|
+
setMounted(true);
|
|
1550
|
+
}, []);
|
|
1551
|
+
React.useEffect(function () {
|
|
1552
|
+
var _a;
|
|
1553
|
+
var toBigTitle = Number((fileName === null || fileName === void 0 ? void 0 : fileName.length) || ((_a = file === null || file === void 0 ? void 0 : file.name) === null || _a === void 0 ? void 0 : _a.length)) > limitTitle;
|
|
1554
|
+
if (mounted && !defaultFileURL) {
|
|
1555
|
+
field.onChange({ target: { value: file, name: name }, type: "change" });
|
|
1556
|
+
}
|
|
1557
|
+
if (toBigTitle) {
|
|
1558
|
+
form.setError(name, {
|
|
1559
|
+
type: "custom",
|
|
1560
|
+
message: "The file name must be less than 100 characters",
|
|
1561
|
+
});
|
|
1562
|
+
}
|
|
1563
|
+
else {
|
|
1564
|
+
form.clearErrors(name);
|
|
1565
|
+
}
|
|
1566
|
+
}, [file]);
|
|
1567
|
+
var handleChange = function (e) {
|
|
1568
|
+
if (e.target.files && e.target.files[0]) {
|
|
1569
|
+
setFile(e.target.files[0]);
|
|
1570
|
+
}
|
|
1571
|
+
else {
|
|
1572
|
+
setFile(undefined);
|
|
1573
|
+
}
|
|
1574
|
+
};
|
|
1575
|
+
var handleClick = function () {
|
|
1576
|
+
if (inputRef.current) {
|
|
1577
|
+
inputRef.current.click();
|
|
1578
|
+
}
|
|
1579
|
+
};
|
|
1580
|
+
var handleDelete = function () {
|
|
1581
|
+
if (file && inputRef.current) {
|
|
1582
|
+
inputRef.current.value = "";
|
|
1583
|
+
}
|
|
1584
|
+
setFile(undefined);
|
|
1585
|
+
setDefaultFileURL("");
|
|
1586
|
+
field.onChange({ target: { value: null, name: name }, type: "change" });
|
|
1587
|
+
};
|
|
1588
|
+
var changeName = function (newName) {
|
|
1589
|
+
var currentFile = form.getValues(name);
|
|
1590
|
+
var extension = currentFile.name.split(".").pop();
|
|
1591
|
+
var newFileName = "".concat(newName, ".").concat(extension);
|
|
1592
|
+
var newFile;
|
|
1593
|
+
if ("filesStore" in currentFile) {
|
|
1594
|
+
currentFile.updateName(newName);
|
|
1595
|
+
newFile = currentFile;
|
|
1596
|
+
}
|
|
1597
|
+
else {
|
|
1598
|
+
newFile = new File([currentFile], newFileName, {
|
|
1599
|
+
type: currentFile.type,
|
|
1600
|
+
});
|
|
1601
|
+
}
|
|
1602
|
+
setFile(newFile);
|
|
1603
|
+
};
|
|
1604
|
+
var forwardedRef = function (elem) {
|
|
1605
|
+
if (ref) {
|
|
1606
|
+
// @ts-ignore
|
|
1607
|
+
// eslint-disable-next-line no-param-reassign
|
|
1608
|
+
ref.current = elem;
|
|
1609
|
+
}
|
|
1610
|
+
inputRef.current = elem;
|
|
1611
|
+
};
|
|
1612
|
+
return (jsxRuntime.jsxs(StyledWrapper$1, { children: [jsxRuntime.jsx(StyledInput, __assign({ type: "file", onInput: handleChange }, otherProps, { ref: forwardedRef })), file || defaultFileURL ? (jsxRuntime.jsx(FileItem, { file: formattedFile, onDelete: handleDelete, onChange: withEdit && changeName, error: error, disabled: disabled })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledLabel, __assign({ error: !!error, disabled: disabled, container: true, justify: "space-between", alignItems: "center" }, { children: [jsxRuntime.jsx(StyledContent, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "s", color: "fiftyP" }, { children: label })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(StyledButton, __assign({ disabled: disabled, size: "s", onClick: handleClick }, { children: "Upload" })) }))] })), error && jsxRuntime.jsx(kuiBasic.InputMessage, { variant: "error", msg: error })] }))] }));
|
|
1613
|
+
});
|
|
1614
|
+
InputFile.defaultProps = {
|
|
1615
|
+
withEdit: true,
|
|
1616
|
+
};
|
|
1617
|
+
var StyledWrapper$1 = styled__default["default"].div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
1618
|
+
var StyledLabel = styled__default["default"](kuiBasic.Grid)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n border-radius: ", ";\n border: 1px solid\n ", ";\n background: ", ";\n height: 56px;\n padding: 0 8px 0 15px;\n"], ["\n border-radius: ", ";\n border: 1px solid\n ", ";\n background: ", ";\n height: 56px;\n padding: 0 8px 0 15px;\n"])), function (_a) {
|
|
1619
|
+
var error = _a.error;
|
|
1620
|
+
return (error ? "8px 8px 0 0" : "8px");
|
|
1621
|
+
}, function (_a) {
|
|
1622
|
+
var error = _a.error;
|
|
1623
|
+
return error ? kuiBasic.theme.palette.red.fiftyP : kuiBasic.theme.palette.grey.fifteenB;
|
|
1624
|
+
}, function (_a) {
|
|
1625
|
+
var disabled = _a.disabled;
|
|
1626
|
+
return disabled ? kuiBasic.theme.palette.background.light1 : kuiBasic.theme.palette.grey.zero;
|
|
1627
|
+
});
|
|
1628
|
+
var StyledInput = styled__default["default"].input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
|
|
1629
|
+
var StyledContent = styled__default["default"](kuiBasic.Grid)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n max-width: calc(100% - 32px);\n"], ["\n max-width: calc(100% - 32px);\n"])));
|
|
1630
|
+
var StyledButton = styled__default["default"](kuiBasic.Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border-radius: 12px;\n"], ["\n border-radius: 12px;\n"])));
|
|
1631
|
+
var templateObject_1$1, templateObject_2$1, templateObject_3, templateObject_4, templateObject_5;
|
|
1632
|
+
|
|
1633
|
+
var CheckboxWithController = React.forwardRef(function (props, ref) {
|
|
1634
|
+
var form = props.form, name = props.name, label = props.label, labelProps = props.labelProps, inputProps = __rest(props, ["form", "name", "label", "labelProps"]);
|
|
1635
|
+
var handleChange = function (e, field) {
|
|
1636
|
+
field.onChange(e);
|
|
1637
|
+
if (inputProps.onChange) {
|
|
1638
|
+
inputProps.onChange(e);
|
|
1639
|
+
}
|
|
1640
|
+
};
|
|
1641
|
+
return (jsxRuntime.jsx(reactHookForm.Controller, { control: form.control, name: String(name), render: function (_a) {
|
|
1642
|
+
var field = _a.field;
|
|
1643
|
+
return (jsxRuntime.jsx(kuiBasic.Checkbox, __assign({}, inputProps, field, { checked: field.value || "", onChange: function (e) {
|
|
1644
|
+
return handleChange(e, field);
|
|
1645
|
+
}, label: jsxRuntime.jsx(kuiBasic.Caption, __assign({}, labelProps, { children: label })) })));
|
|
1646
|
+
} }));
|
|
1647
|
+
});
|
|
1648
|
+
|
|
1649
|
+
function CheckboxGroupWithTitle(_a) {
|
|
1650
|
+
var title = _a.title, options = _a.options, form = _a.form; _a.name; var otherProps = __rest(_a, ["title", "options", "form", "name"]);
|
|
1651
|
+
return (jsxRuntime.jsxs(StyledWrapper, __assign({ container: true, alignItems: "center", justify: "space-between" }, { children: [jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "s", weight: 500, color: "fiftyP" }, { children: title })) })), jsxRuntime.jsx(kuiBasic.Grid, __assign({ item: true }, { children: jsxRuntime.jsx(kuiBasic.Grid, __assign({ container: true }, { children: options.map(function (option) { return (jsxRuntime.jsx(StyledCheckbox, __assign({ name: option.name, label: jsxRuntime.jsx(kuiBasic.Caption, __assign({ size: "s", color: "fiftyP", weight: 500 }, { children: option.label })), form: form, testId: option.name }, otherProps), option.name)); }) })) }))] })));
|
|
1652
|
+
}
|
|
1653
|
+
var StyledCheckbox = styled__default["default"](CheckboxWithController)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &:not(:last-child) {\n margin-right: 22px;\n }\n"], ["\n &:not(:last-child) {\n margin-right: 22px;\n }\n"])));
|
|
1654
|
+
var StyledWrapper = styled__default["default"](kuiBasic.Grid)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 3px 16px;\n border: 1px solid ", ";\n border-radius: 66px;\n height: 40px;\n"], ["\n padding: 3px 16px;\n border: 1px solid ", ";\n border-radius: 66px;\n height: 40px;\n"])), kuiBasic.theme.palette.grey.fifteenB);
|
|
1655
|
+
var templateObject_1, templateObject_2;
|
|
1406
1656
|
|
|
1407
1657
|
exports.AutocompleteOption = AutocompleteOption;
|
|
1408
1658
|
exports.Avatar = Avatar;
|
|
@@ -1412,9 +1662,12 @@ exports.ButtonsPanel = ButtonsPanel;
|
|
|
1412
1662
|
exports.CalendarHeaderWithSelect = CalendarHeaderWithSelect;
|
|
1413
1663
|
exports.CalendarStandardContainer = CalendarStandardContainer;
|
|
1414
1664
|
exports.CalendarStandardHeader = CalendarStandardHeader;
|
|
1665
|
+
exports.CheckboxGroupWithTitle = CheckboxGroupWithTitle;
|
|
1666
|
+
exports.CheckboxWithController = CheckboxWithController;
|
|
1415
1667
|
exports.DesktopInputWithMonthPicker = DesktopInputWithMonthPicker;
|
|
1416
1668
|
exports.DesktopMenuPanel = DesktopMenuPanel;
|
|
1417
1669
|
exports.InputDropdown = InputDropdown;
|
|
1670
|
+
exports.InputFile = InputFile;
|
|
1418
1671
|
exports.InputForDatepicker = InputForDatepicker;
|
|
1419
1672
|
exports.InputMultiSelect = InputMultiSelect;
|
|
1420
1673
|
exports.InputPassword = InputPassword;
|