@typeolymp/ui-components 1.17.0 → 1.17.1
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/build/index.js
CHANGED
|
@@ -3465,7 +3465,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3465
3465
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
3466
3466
|
_this.style = function (i) {
|
|
3467
3467
|
var _a = _this.props, color = _a.color, size = _a.size, margin = _a.margin, speedMultiplier = _a.speedMultiplier;
|
|
3468
|
-
return react_1.css(templateObject_2$
|
|
3468
|
+
return react_1.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "], ["\n display: inline-block;\n background-color: ", ";\n width: ", ";\n height: ", ";\n margin: ", ";\n border-radius: 100%;\n animation: ", " ", "s ", "\n infinite linear;\n animation-fill-mode: both;\n "])), color, helpers_1.cssValue(size), helpers_1.cssValue(size), helpers_1.cssValue(margin), beat, 0.7 / speedMultiplier, i % 2 ? "0s" : 0.35 / speedMultiplier + "s");
|
|
3469
3469
|
};
|
|
3470
3470
|
return _this;
|
|
3471
3471
|
}
|
|
@@ -3480,7 +3480,7 @@ var Loader = /** @class */ (function (_super) {
|
|
|
3480
3480
|
return Loader;
|
|
3481
3481
|
}(React$2.PureComponent));
|
|
3482
3482
|
var _default$1 = BeatLoader.default = Loader;
|
|
3483
|
-
var templateObject_1$U, templateObject_2$
|
|
3483
|
+
var templateObject_1$U, templateObject_2$A;
|
|
3484
3484
|
|
|
3485
3485
|
var StyledButton = styled__default["default"].button(templateObject_1$T || (templateObject_1$T = __makeTemplateObject$1(["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"], ["\n width: ", ";\n height: ", ";\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 13px 20px 16px;\n background-color: ", ";\n box-shadow: ", ";\n\n border: ", ";\n border-radius: 6px;\n box-sizing: border-box;\n text-decoration: none;\n cursor: pointer;\n\n span {\n color: ", ";\n font-family: ", ";\n font-style: normal;\n font-weight: bold;\n font-size: ", ";\n }\n\n :hover {\n opacity: 0.85;\n }\n\n :active {\n box-shadow: none;\n margin-top: ", ";\n height: ", ";\n }\n"])), function (_a) {
|
|
3486
3486
|
var fluid = _a.fluid;
|
|
@@ -3536,11 +3536,11 @@ var StyledButton = styled__default["default"].button(templateObject_1$T || (temp
|
|
|
3536
3536
|
? theme.button.medium.heightActive
|
|
3537
3537
|
: theme.button[size].heightActive;
|
|
3538
3538
|
});
|
|
3539
|
-
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$
|
|
3539
|
+
var DisabledButton = styled__default["default"](StyledButton)(templateObject_2$z || (templateObject_2$z = __makeTemplateObject$1(["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n box-shadow: none;\n padding: 16px 20px;\n cursor: not-allowed;\n\n span {\n color: ", ";\n }\n\n :active {\n margin-top: 0;\n height: ", ";\n }\n"])), theme.colors.lightGray.dark, theme.colors.lightGray.darker, theme.colors.lightGray.darker, function (_a) {
|
|
3540
3540
|
var size = _a.size;
|
|
3541
3541
|
return !size ? theme.button.medium.height : theme.button[size].height;
|
|
3542
3542
|
});
|
|
3543
|
-
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$
|
|
3543
|
+
var GhostButton = styled__default["default"](StyledButton)(templateObject_3$d || (templateObject_3$d = __makeTemplateObject$1(["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"], ["\n height: ", ";\n padding: 16px 18px;\n\n :active {\n box-shadow: none;\n height: ", ";\n margin-top: ", ";\n margin-bottom: -2.5px;\n }\n"])), function (_a) {
|
|
3544
3544
|
var size = _a.size;
|
|
3545
3545
|
return !size
|
|
3546
3546
|
? "calc(".concat(theme.button.medium.height, " - 2.5px)")
|
|
@@ -3563,7 +3563,7 @@ var LoaderWrapper = styled__default["default"].div(templateObject_4$8 || (templa
|
|
|
3563
3563
|
var size = _a.size;
|
|
3564
3564
|
return (size === "small" ? "3px" : "");
|
|
3565
3565
|
});
|
|
3566
|
-
var templateObject_1$T, templateObject_2$
|
|
3566
|
+
var templateObject_1$T, templateObject_2$z, templateObject_3$d, templateObject_4$8;
|
|
3567
3567
|
|
|
3568
3568
|
var Button = React$3.forwardRef(function (_a, ref) {
|
|
3569
3569
|
var label = _a.label, color = _a.color, size = _a.size, fluid = _a.fluid, disabled = _a.disabled, type = _a.type, tabIndex = _a.tabIndex, href = _a.href, asAnchor = _a.asAnchor, props = __rest(_a, ["label", "color", "size", "fluid", "disabled", "type", "tabIndex", "href", "asAnchor"]);
|
|
@@ -4273,14 +4273,14 @@ var StyledParagraph = styled__default["default"].p(templateObject_1$N || (templa
|
|
|
4273
4273
|
var templateObject_1$N;
|
|
4274
4274
|
|
|
4275
4275
|
var Container$n = styled__default["default"].div(templateObject_1$M || (templateObject_1$M = __makeTemplateObject$1(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4276
|
-
var InputIconWrapper = styled__default["default"].div(templateObject_2$
|
|
4276
|
+
var InputIconWrapper = styled__default["default"].div(templateObject_2$y || (templateObject_2$y = __makeTemplateObject$1(["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"], ["\n position: relative;\n width: 100%;\n\n input {\n padding-right: 43px;\n }\n\n input[type=\"date\"] {\n color: ", ";\n }\n\n div {\n position: absolute;\n height: 24px;\n right: 12px;\n top: 14px;\n }\n\n svg {\n cursor: ", ";\n }\n"])), function (_a) {
|
|
4277
4277
|
var isChanged = _a.isChanged;
|
|
4278
4278
|
return !isChanged ? theme.colors.lightGray.darker : "";
|
|
4279
4279
|
}, function (_a) {
|
|
4280
4280
|
var disabled = _a.disabled;
|
|
4281
4281
|
return (disabled ? "not-allowed" : "pointer");
|
|
4282
4282
|
});
|
|
4283
|
-
var StyledInput = styled__default["default"].input(templateObject_3$
|
|
4283
|
+
var StyledInput = styled__default["default"].input(templateObject_3$c || (templateObject_3$c = __makeTemplateObject$1(["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n min-width: 228px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 15px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n\n ::placeholder {\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n }\n\n ::-webkit-calendar-picker-indicator {\n display: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4284
4284
|
var disabled = _a.disabled;
|
|
4285
4285
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4286
4286
|
}, function (_a) {
|
|
@@ -4299,7 +4299,7 @@ var Helper = styled__default["default"](StyledParagraph)(templateObject_6$3 || (
|
|
|
4299
4299
|
var isOk = _a.isOk;
|
|
4300
4300
|
return isOk ? theme.colors.green.base : theme.colors.darkGray.light;
|
|
4301
4301
|
}, fadeIn);
|
|
4302
|
-
var templateObject_1$M, templateObject_2$
|
|
4302
|
+
var templateObject_1$M, templateObject_2$y, templateObject_3$c, templateObject_4$7, templateObject_5$3, templateObject_6$3;
|
|
4303
4303
|
|
|
4304
4304
|
var expressions = {};
|
|
4305
4305
|
|
|
@@ -4800,7 +4800,7 @@ var Wrapper$6 = styled__default["default"].div(templateObject_1$K || (templateOb
|
|
|
4800
4800
|
var disabled = _a.disabled;
|
|
4801
4801
|
return (disabled ? "49.5px" : "");
|
|
4802
4802
|
});
|
|
4803
|
-
var StyledInputNumber = styled__default["default"].input(templateObject_2$
|
|
4803
|
+
var StyledInputNumber = styled__default["default"].input(templateObject_2$x || (templateObject_2$x = __makeTemplateObject$1(["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 50px;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n text-align: center;\n -moz-appearance: textfield;\n\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4804
4804
|
var disabled = _a.disabled;
|
|
4805
4805
|
return disabled ? theme.colors.lightGray.base : theme.colors.lightGray.light;
|
|
4806
4806
|
}, function (_a) {
|
|
@@ -4813,7 +4813,7 @@ var StyledInputNumber = styled__default["default"].input(templateObject_2$w || (
|
|
|
4813
4813
|
var disabled = _a.disabled;
|
|
4814
4814
|
return disabled ? theme.colors.darkGray.light : theme.colors.darkGray.base;
|
|
4815
4815
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4816
|
-
var templateObject_1$K, templateObject_2$
|
|
4816
|
+
var templateObject_1$K, templateObject_2$x;
|
|
4817
4817
|
|
|
4818
4818
|
var Number$1 = function (props) {
|
|
4819
4819
|
var inputRef = React$3.useRef(null);
|
|
@@ -4955,7 +4955,7 @@ var Wrapper$5 = styled__default["default"].div(templateObject_1$H || (templateOb
|
|
|
4955
4955
|
var disabled = _a.disabled;
|
|
4956
4956
|
return (disabled ? "not-allowed" : "pointer");
|
|
4957
4957
|
});
|
|
4958
|
-
var StyledSelect = styled__default["default"].select(templateObject_2$
|
|
4958
|
+
var StyledSelect = styled__default["default"].select(templateObject_2$w || (templateObject_2$w = __makeTemplateObject$1(["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"], ["\n width: 100%;\n height: 50px;\n background-color: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n padding: 13px 43px 15px 13px;\n cursor: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 500;\n font-style: normal;\n line-height: ", ";\n color: ", ";\n appearance: none;\n\n :focus {\n outline: 0;\n border-color: ", ";\n box-shadow: ", ";\n }\n"])), function (_a) {
|
|
4959
4959
|
var disabled = _a.disabled;
|
|
4960
4960
|
return disabled ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
4961
4961
|
}, function (_a) {
|
|
@@ -4968,7 +4968,7 @@ var StyledSelect = styled__default["default"].select(templateObject_2$v || (temp
|
|
|
4968
4968
|
var isChanged = _a.isChanged;
|
|
4969
4969
|
return isChanged ? theme.colors.darkGray.base : theme.colors.lightGray.darker;
|
|
4970
4970
|
}, theme.colors.blue.dark, "0 0 0 1px ".concat(theme.colors.blue.dark));
|
|
4971
|
-
var templateObject_1$H, templateObject_2$
|
|
4971
|
+
var templateObject_1$H, templateObject_2$w;
|
|
4972
4972
|
|
|
4973
4973
|
var Select = function (props) {
|
|
4974
4974
|
var _a;
|
|
@@ -5169,12 +5169,12 @@ var StyledCard = styled__default["default"].div(templateObject_1$A || (templateO
|
|
|
5169
5169
|
}, ";\n\n > div:first-child {\n width: 175%;\n padding-bottom: 175%;\n top: -25%;\n right: -25%;\n }\n }")
|
|
5170
5170
|
: "";
|
|
5171
5171
|
});
|
|
5172
|
-
var Ellipse = styled__default["default"].div(templateObject_2$
|
|
5172
|
+
var Ellipse = styled__default["default"].div(templateObject_2$v || (templateObject_2$v = __makeTemplateObject$1(["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"], ["\n width: 85%;\n height: 0;\n padding-bottom: 85%;\n border-radius: 50%;\n background-color: ", ";\n opacity: 0.3;\n position: absolute;\n top: -20%;\n right: -20%;\n transition: width 0.75s, padding-bottom 0.75s, top 0.75s, right 0.75s;\n"])), function (_a) {
|
|
5173
5173
|
var color = _a.color;
|
|
5174
5174
|
return color ? theme.colors[color].light : "";
|
|
5175
5175
|
});
|
|
5176
|
-
var Content = styled__default["default"].div(templateObject_3$
|
|
5177
|
-
var templateObject_1$A, templateObject_2$
|
|
5176
|
+
var Content = styled__default["default"].div(templateObject_3$b || (templateObject_3$b = __makeTemplateObject$1(["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"], ["\n height: 100%;\n padding: 15px;\n position: inherit;\n top: 0;\n left: 0;\n"])));
|
|
5177
|
+
var templateObject_1$A, templateObject_2$v, templateObject_3$b;
|
|
5178
5178
|
|
|
5179
5179
|
var Card = function (props) { return (jsxRuntime.jsxs(StyledCard, __assign$2({}, props, { children: [props.ellipse && jsxRuntime.jsx(Ellipse, { color: props.ellipse }), jsxRuntime.jsx(Content, { children: props.children })] }))); };
|
|
5180
5180
|
|
|
@@ -11424,13 +11424,13 @@ htmlReactParser.ProcessingInstruction;
|
|
|
11424
11424
|
htmlReactParser.Text;
|
|
11425
11425
|
|
|
11426
11426
|
var Fieldset$1 = styled__default["default"].fieldset(templateObject_1$z || (templateObject_1$z = __makeTemplateObject$1(["\n border: 0;\n margin: 0;\n padding: 0;\n"], ["\n border: 0;\n margin: 0;\n padding: 0;\n"])));
|
|
11427
|
-
var CheckboxContainer = styled__default["default"].div(templateObject_2$
|
|
11428
|
-
var CheckboxWrapper = styled__default["default"].div(templateObject_3$
|
|
11427
|
+
var CheckboxContainer = styled__default["default"].div(templateObject_2$u || (templateObject_2$u = __makeTemplateObject$1(["\n margin-top: 5px;\n"], ["\n margin-top: 5px;\n"])));
|
|
11428
|
+
var CheckboxWrapper = styled__default["default"].div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject$1(["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"], ["\n display: flex;\n align-items: center;\n\n > div:first-child {\n margin-right: 10px;\n }\n\n :not(:last-child) {\n margin-bottom: 20px;\n }\n"])));
|
|
11429
11429
|
var Label$9 = styled__default["default"](StyledParagraph)(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject$1(["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"], ["\n font-weight: ", ";\n color: ", ";\n display: flex;\n flex-wrap: wrap;\n gap: 0 6px;\n align-items: center;\n cursor: pointer;\n\n a {\n color: ", ";\n }\n"])), function (_a) {
|
|
11430
11430
|
var weight = _a.weight;
|
|
11431
11431
|
return weight || 500;
|
|
11432
11432
|
}, theme.colors.darkGray.base, theme.colors.blue.base);
|
|
11433
|
-
var templateObject_1$z, templateObject_2$
|
|
11433
|
+
var templateObject_1$z, templateObject_2$u, templateObject_3$a, templateObject_4$6;
|
|
11434
11434
|
|
|
11435
11435
|
var Checkboxes = function (props) {
|
|
11436
11436
|
var _a = React$3.useState(props.defaultValue || []), values = _a[0], setValues = _a[1];
|
|
@@ -11454,11 +11454,11 @@ var Checkboxes = function (props) {
|
|
|
11454
11454
|
};
|
|
11455
11455
|
|
|
11456
11456
|
var Container$j = styled__default["default"].div(templateObject_1$y || (templateObject_1$y = __makeTemplateObject$1(["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"], ["\n width: 100%;\n background-color: ", ";\n box-shadow: 0px 4px 0px rgba(0, 0, 0, 20%);\n border-radius: 6px;\n padding: 10px 20px;\n"])), theme.colors.lightGray.light);
|
|
11457
|
-
var Item = styled__default["default"].div(templateObject_2$
|
|
11457
|
+
var Item = styled__default["default"].div(templateObject_2$t || (templateObject_2$t = __makeTemplateObject$1(["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"], ["\n padding: 10px 0;\n cursor: pointer;\n\n > div:first-child {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n }\n\n p, > div:last-child {\n display: ", ";\n margin: 0;\n }\n\n :not(:last-child) {\n border-bottom: 1px solid ", ";\n }\n"])), function (_a) {
|
|
11458
11458
|
var isOpen = _a.isOpen;
|
|
11459
11459
|
return (isOpen ? "" : "none");
|
|
11460
11460
|
}, theme.colors.lightGray.dark);
|
|
11461
|
-
var templateObject_1$y, templateObject_2$
|
|
11461
|
+
var templateObject_1$y, templateObject_2$t;
|
|
11462
11462
|
|
|
11463
11463
|
var Collapse = function (props) {
|
|
11464
11464
|
var _a = React$3.useState([]), openItems = _a[0], setOpenItems = _a[1];
|
|
@@ -11477,11 +11477,11 @@ var Collapse = function (props) {
|
|
|
11477
11477
|
};
|
|
11478
11478
|
|
|
11479
11479
|
var Wrapper$3 = styled__default["default"].div(templateObject_1$x || (templateObject_1$x = __makeTemplateObject$1(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
11480
|
-
var Value = styled__default["default"].div(templateObject_2$
|
|
11480
|
+
var Value = styled__default["default"].div(templateObject_2$s || (templateObject_2$s = __makeTemplateObject$1(["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"], ["\n width: 40px;\n height: 32px;\n background-color: ", ";\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 6px;\n\n h5 {\n color: ", ";\n }\n\n :first-child {\n margin-left: 0;\n }\n"])), function (_a) {
|
|
11481
11481
|
var contrast = _a.contrast;
|
|
11482
11482
|
return contrast ? theme.colors.lightGray.dark : theme.colors.lightGray.light;
|
|
11483
11483
|
}, theme.colors.darkGray.base);
|
|
11484
|
-
var templateObject_1$x, templateObject_2$
|
|
11484
|
+
var templateObject_1$x, templateObject_2$s;
|
|
11485
11485
|
|
|
11486
11486
|
var Countdown = function (_a) {
|
|
11487
11487
|
var till = _a.till, contrast = _a.contrast;
|
|
@@ -11509,8 +11509,8 @@ var Countdown = function (_a) {
|
|
|
11509
11509
|
};
|
|
11510
11510
|
|
|
11511
11511
|
var Container$i = styled__default["default"].div(templateObject_1$w || (templateObject_1$w = __makeTemplateObject$1(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n flex-wrap: wrap;\n"])));
|
|
11512
|
-
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$
|
|
11513
|
-
var templateObject_1$w, templateObject_2$
|
|
11512
|
+
var Label$8 = styled__default["default"](StyledParagraph)(templateObject_2$r || (templateObject_2$r = __makeTemplateObject$1(["\n font-weight: 500;\n color: ", ";\n"], ["\n font-weight: 500;\n color: ", ";\n"])), theme.colors.darkGray.base);
|
|
11513
|
+
var templateObject_1$w, templateObject_2$r;
|
|
11514
11514
|
|
|
11515
11515
|
var DateInputField = function (props) {
|
|
11516
11516
|
var onChange = function (value) {
|
|
@@ -14041,7 +14041,8 @@ function reducer(state, action) {
|
|
|
14041
14041
|
|
|
14042
14042
|
function noop() {}
|
|
14043
14043
|
|
|
14044
|
-
var Container$h = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n width: 100%;\n
|
|
14044
|
+
var Container$h = styled__default["default"].div(templateObject_1$v || (templateObject_1$v = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 15px;\n"])));
|
|
14045
|
+
var DropZone = styled__default["default"].div(templateObject_2$q || (templateObject_2$q = __makeTemplateObject$1(["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"], ["\n min-height: 250px;\n border-width: 2px;\n border-style: dashed;\n border-color: ", ";\n box-sizing: border-box;\n border-radius: 4px;\n background-color: ", ";\n padding: 25px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n"])), function (_a) {
|
|
14045
14046
|
_a.isDragActive; var isDragAccept = _a.isDragAccept, isDragReject = _a.isDragReject;
|
|
14046
14047
|
// if (isDragActive) return theme.colors.blue.base;
|
|
14047
14048
|
if (isDragAccept)
|
|
@@ -14060,10 +14061,11 @@ var Container$h = styled__default["default"].div(templateObject_1$v || (template
|
|
|
14060
14061
|
else
|
|
14061
14062
|
return theme.colors.lightGray.base;
|
|
14062
14063
|
});
|
|
14063
|
-
var
|
|
14064
|
+
var FileList = styled__default["default"].div(templateObject_3$9 || (templateObject_3$9 = __makeTemplateObject$1(["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"], ["\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 10px;\n"])));
|
|
14065
|
+
var templateObject_1$v, templateObject_2$q, templateObject_3$9;
|
|
14064
14066
|
|
|
14065
14067
|
var FileUpload = function (_a) {
|
|
14066
|
-
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop;
|
|
14068
|
+
var locale = _a.locale, accept = _a.accept, onDrop = _a.onDrop, files = _a.files;
|
|
14067
14069
|
var _b = useDropzone({
|
|
14068
14070
|
onDrop: onDrop,
|
|
14069
14071
|
accept: accept,
|
|
@@ -14073,11 +14075,11 @@ var FileUpload = function (_a) {
|
|
|
14073
14075
|
// Max number of files: 1
|
|
14074
14076
|
maxFiles: 1,
|
|
14075
14077
|
}), getRootProps = _b.getRootProps, getInputProps = _b.getInputProps, isDragActive = _b.isDragActive, isDragAccept = _b.isDragAccept, isDragReject = _b.isDragReject;
|
|
14076
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$h, __assign$2({}, getRootProps({
|
|
14077
|
-
|
|
14078
|
-
|
|
14079
|
-
|
|
14080
|
-
|
|
14078
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Container$h, { children: [jsxRuntime.jsxs(DropZone, __assign$2({}, getRootProps({
|
|
14079
|
+
isDragActive: isDragActive,
|
|
14080
|
+
isDragAccept: isDragAccept,
|
|
14081
|
+
isDragReject: isDragReject,
|
|
14082
|
+
}), { children: [jsxRuntime.jsx("input", __assign$2({}, getInputProps())), jsxRuntime.jsx(Icon, { type: "file", size: "large" }), jsxRuntime.jsx(Spacer, { vertical: 15 }), !isDragActive && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Drag file(s) here..."] })), jsxRuntime.jsx(Spacer, { vertical: 5 }), jsxRuntime.jsx(Paragraph, { children: translations[locale]["or"] }), jsxRuntime.jsx(Spacer, { vertical: 10 }), jsxRuntime.jsx(Button, { label: translations[locale]["Select file(s)"], size: "small" })] })), isDragActive && !isDragReject && (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["Upload file(s)..."] }))), isDragReject && (jsxRuntime.jsx(Heading, __assign$2({ type: "h6" }, { children: translations[locale]["File type not allowed"] })))] })), files && files.length > 0 && (jsxRuntime.jsx(FileList, { children: files.map(function (file, index) { return (jsxRuntime.jsx(Alert, { type: "success", message: file.name }, "".concat(file.name, "-").concat(index))); }) }))] }) }));
|
|
14081
14083
|
};
|
|
14082
14084
|
|
|
14083
14085
|
var StyledIconButton = styled__default["default"](StyledButton)(templateObject_1$u || (templateObject_1$u = __makeTemplateObject$1(["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"], ["\n min-width: ", ";\n max-width: ", ";\n min-height: ", ";\n max-height: ", ";\n padding: 2px 0 0 0;\n\n > div:first-child {\n margin-top: -2px;\n }\n\n :active {\n min-height: ", ";\n max-height: ", ";\n margin-top: 2px;\n }\n"])), function (_a) {
|