react-asc 23.6.0 → 23.6.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/components/Form/validators/MinValidator.d.ts +1 -0
- package/components/Form/validators/index.d.ts +1 -0
- package/index.es.js +170 -144
- package/index.js +170 -143
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1227,7 +1227,9 @@ const EmailValidator = (value) => {
|
|
|
1227
1227
|
|
|
1228
1228
|
const IsEqualValidator = (valueA, valueB) => valueA === valueB;
|
|
1229
1229
|
|
|
1230
|
-
const MaxValidator = (valueA, valueB) => valueA
|
|
1230
|
+
const MaxValidator = (valueA, valueB) => valueA <= valueB;
|
|
1231
|
+
|
|
1232
|
+
const MinValidator = (valueA, valueB) => valueA >= valueB;
|
|
1231
1233
|
|
|
1232
1234
|
// values, isSubmitting, handleChange, handleBlur, handleSubmit
|
|
1233
1235
|
class Form extends React.Component {
|
|
@@ -1278,8 +1280,13 @@ class Form extends React.Component {
|
|
|
1278
1280
|
errors.push({ validator: validatorName, message: 'Email format is wrong' });
|
|
1279
1281
|
}
|
|
1280
1282
|
break;
|
|
1283
|
+
case 'min':
|
|
1284
|
+
if (!MinValidator(fieldValue, parseInt(validatorParam))) {
|
|
1285
|
+
errors.push({ validator: validatorName, message: `Number is less than ${validatorParam}` });
|
|
1286
|
+
}
|
|
1287
|
+
break;
|
|
1281
1288
|
case 'max':
|
|
1282
|
-
if (MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1289
|
+
if (!MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1283
1290
|
errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
|
|
1284
1291
|
}
|
|
1285
1292
|
break;
|
|
@@ -1994,29 +2001,88 @@ const NumberSelect = (props) => {
|
|
|
1994
2001
|
return (React__default["default"].createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
1995
2002
|
};
|
|
1996
2003
|
|
|
1997
|
-
var css_248z$k = ".
|
|
1998
|
-
var styles$k = {"
|
|
2004
|
+
var css_248z$k = ".Tooltip-module_tooltipContainer__9ZWx3 {\n display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n left: -4px;\n}";
|
|
2005
|
+
var styles$k = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
1999
2006
|
styleInject(css_248z$k);
|
|
2000
2007
|
|
|
2008
|
+
const Tooltip = (props) => {
|
|
2009
|
+
const { children, text, placement = 'bottom' } = props;
|
|
2010
|
+
const [show, setShow] = React.useState(false);
|
|
2011
|
+
const refChild = React.useRef();
|
|
2012
|
+
const refTooltip = React.useRef();
|
|
2013
|
+
React.useEffect(() => {
|
|
2014
|
+
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2015
|
+
// TODO - extract to own component?
|
|
2016
|
+
core.createPopper(refChild.current, refTooltip.current, {
|
|
2017
|
+
placement: placement,
|
|
2018
|
+
modifiers: [
|
|
2019
|
+
{
|
|
2020
|
+
name: 'offset',
|
|
2021
|
+
options: { offset: [0, 8] }
|
|
2022
|
+
},
|
|
2023
|
+
]
|
|
2024
|
+
});
|
|
2025
|
+
}
|
|
2026
|
+
}, [show]);
|
|
2027
|
+
const handleMouseOver = () => {
|
|
2028
|
+
setShow(true);
|
|
2029
|
+
};
|
|
2030
|
+
const handleMouseLeave = () => {
|
|
2031
|
+
setShow(false);
|
|
2032
|
+
};
|
|
2033
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2034
|
+
React__default["default"].createElement("div", { className: styles$k.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
|
|
2035
|
+
onMouseOver: handleMouseOver,
|
|
2036
|
+
onMouseLeave: handleMouseLeave,
|
|
2037
|
+
})),
|
|
2038
|
+
show && text &&
|
|
2039
|
+
React__default["default"].createElement("div", { className: styles$k.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2040
|
+
text,
|
|
2041
|
+
React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2042
|
+
};
|
|
2043
|
+
|
|
2044
|
+
var css_248z$j = ".ProgressBar-module_progressBarContainer__vtbBw {\n display: flex;\n height: var(--progress-height);\n overflow: hidden;\n background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n color: var(--progress-bar-color);\n text-align: center;\n white-space: nowrap;\n transition: var(--progress-bar-transition);\n background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n width: 100%;\n height: 100%;\n animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n 0% {\n transform: translateX(0) scaleX(0);\n }\n 40% {\n transform: translateX(0) scaleX(0.4);\n }\n 100% {\n transform: translateX(100%) scaleX(0.5);\n }\n}";
|
|
2045
|
+
var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2046
|
+
styleInject(css_248z$j);
|
|
2047
|
+
|
|
2001
2048
|
const ProgressBar = (props) => {
|
|
2002
2049
|
const { className, color = exports.COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
2050
|
+
const [model, setModel] = React.useState();
|
|
2051
|
+
React.useEffect(() => {
|
|
2052
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2053
|
+
}, [color]);
|
|
2054
|
+
React.useEffect(() => {
|
|
2055
|
+
let newValue = value;
|
|
2056
|
+
if (value && value < 0) {
|
|
2057
|
+
newValue = 0;
|
|
2058
|
+
}
|
|
2059
|
+
if (value && value > 100) {
|
|
2060
|
+
newValue = 100;
|
|
2061
|
+
}
|
|
2062
|
+
setModel(newValue);
|
|
2063
|
+
}, [value]);
|
|
2003
2064
|
const getCssClasses = () => {
|
|
2004
2065
|
const cssClasses = [];
|
|
2005
|
-
cssClasses.push(styles$
|
|
2066
|
+
cssClasses.push(styles$j.progressBarContainer);
|
|
2006
2067
|
className && cssClasses.push(className);
|
|
2007
2068
|
return cssClasses.filter(r => r).join(' ');
|
|
2008
2069
|
};
|
|
2009
2070
|
const getCssClassesBar = () => {
|
|
2010
2071
|
const cssClasses = [];
|
|
2011
|
-
cssClasses.push(styles$
|
|
2012
|
-
indeterminate && cssClasses.push(styles$
|
|
2072
|
+
cssClasses.push(styles$j.progressBar);
|
|
2073
|
+
indeterminate && cssClasses.push(styles$j['indeterminate']);
|
|
2013
2074
|
return cssClasses.filter(r => r).join(' ');
|
|
2014
2075
|
};
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2076
|
+
const getStyle = () => {
|
|
2077
|
+
let width = model && model >= 0 ? model : 0;
|
|
2078
|
+
if (indeterminate) {
|
|
2079
|
+
width = 100;
|
|
2080
|
+
}
|
|
2081
|
+
return `${width}%`;
|
|
2082
|
+
};
|
|
2083
|
+
return (React__default["default"].createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2084
|
+
React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2085
|
+
React__default["default"].createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2020
2086
|
};
|
|
2021
2087
|
|
|
2022
2088
|
class SidebarItemModel {
|
|
@@ -2096,25 +2162,25 @@ const Sidebar = (props) => {
|
|
|
2096
2162
|
!item.isCollapsed && item.items && item.items.length > 0 && (React__default["default"].createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React__default["default"].createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
2097
2163
|
};
|
|
2098
2164
|
|
|
2099
|
-
var css_248z$
|
|
2100
|
-
var styles$
|
|
2101
|
-
styleInject(css_248z$
|
|
2165
|
+
var css_248z$i = ".Snackbar-module_snackbar__O5T2b {\n display: flex;\n align-items: center;\n min-width: 288px;\n padding: 6px 16px;\n transform-origin: center;\n min-height: 52px;\n animation: Snackbar-module_bounceIn__E47iD 0.4s ease;\n z-index: 1001;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 2%;\n border-radius: var(--borderRadius);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_primary__ZBOTN {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_accent__0MnFy {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_secondary__s8-ez {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_light__Vrd7o {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_dark__U-5io {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Snackbar-module_text__G5r5D {\n width: 100%;\n padding: 8px 0;\n}\n\n.Snackbar-module_action__vus2Y {\n margin-left: auto;\n}\n.Snackbar-module_action__vus2Y:hover {\n cursor: pointer;\n}\n\n@keyframes Snackbar-module_bounceIn__E47iD {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 0.9;\n }\n 80% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}";
|
|
2166
|
+
var styles$i = {"snackbar":"Snackbar-module_snackbar__O5T2b","bounceIn":"Snackbar-module_bounceIn__E47iD","primary":"Snackbar-module_primary__ZBOTN","accent":"Snackbar-module_accent__0MnFy","secondary":"Snackbar-module_secondary__s8-ez","light":"Snackbar-module_light__Vrd7o","dark":"Snackbar-module_dark__U-5io","text":"Snackbar-module_text__G5r5D","action":"Snackbar-module_action__vus2Y"};
|
|
2167
|
+
styleInject(css_248z$i);
|
|
2102
2168
|
|
|
2103
2169
|
const Snackbar = (props) => {
|
|
2104
2170
|
const { children, color = exports.COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
2105
2171
|
const getCssClasses = () => {
|
|
2106
2172
|
const cssClasses = [];
|
|
2107
|
-
cssClasses.push(styles$
|
|
2173
|
+
cssClasses.push(styles$i.snackbar);
|
|
2108
2174
|
cssClasses.push(`shadow-lg`);
|
|
2109
|
-
cssClasses.push(styles$
|
|
2175
|
+
cssClasses.push(styles$i[color]);
|
|
2110
2176
|
return cssClasses.filter(css => css).join(' ');
|
|
2111
2177
|
};
|
|
2112
2178
|
const handleClickAction = (e) => {
|
|
2113
2179
|
onOk && onOk(e);
|
|
2114
2180
|
};
|
|
2115
2181
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2116
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2117
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2182
|
+
React__default["default"].createElement("div", { className: styles$i.text }, children),
|
|
2183
|
+
React__default["default"].createElement("div", { className: styles$i.action + ' text-accent', onClick: handleClickAction },
|
|
2118
2184
|
React__default["default"].createElement("span", null, actionText))));
|
|
2119
2185
|
};
|
|
2120
2186
|
|
|
@@ -2152,29 +2218,29 @@ class SnackbarService {
|
|
|
2152
2218
|
}
|
|
2153
2219
|
const snackbarService = new SnackbarService();
|
|
2154
2220
|
|
|
2155
|
-
var css_248z$
|
|
2156
|
-
var styles$
|
|
2157
|
-
styleInject(css_248z$
|
|
2221
|
+
var css_248z$h = ".SpeedDialActions-module_speedDialActions__cY2i3 {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto;\n}";
|
|
2222
|
+
var styles$h = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2223
|
+
styleInject(css_248z$h);
|
|
2158
2224
|
|
|
2159
2225
|
const SpeedDialActions = (props) => {
|
|
2160
2226
|
const { children } = props;
|
|
2161
2227
|
const getCssClasses = () => {
|
|
2162
2228
|
const cssClasses = [];
|
|
2163
|
-
cssClasses.push(styles$
|
|
2229
|
+
cssClasses.push(styles$h.speedDialActions);
|
|
2164
2230
|
return cssClasses.filter(css => css).join(' ');
|
|
2165
2231
|
};
|
|
2166
2232
|
return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
|
|
2167
2233
|
};
|
|
2168
2234
|
|
|
2169
|
-
var css_248z$
|
|
2170
|
-
var styles$
|
|
2171
|
-
styleInject(css_248z$
|
|
2235
|
+
var css_248z$g = ".SpeedDial-module_speedDial__W3VN2 {\n position: absolute;\n flex-direction: column-reverse;\n display: flex;\n z-index: 1050;\n align-items: center;\n right: 16px;\n bottom: 16px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
2236
|
+
var styles$g = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2237
|
+
styleInject(css_248z$g);
|
|
2172
2238
|
|
|
2173
2239
|
const SpeedDial = (props) => {
|
|
2174
2240
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
2175
2241
|
const getCssClasses = () => {
|
|
2176
2242
|
const cssClasses = [];
|
|
2177
|
-
cssClasses.push(styles$
|
|
2243
|
+
cssClasses.push(styles$g.speedDial);
|
|
2178
2244
|
className && cssClasses.push(className);
|
|
2179
2245
|
return cssClasses.filter(css => css).join(' ');
|
|
2180
2246
|
};
|
|
@@ -2191,15 +2257,15 @@ const SpeedDial = (props) => {
|
|
|
2191
2257
|
React__default["default"].createElement(SpeedDialActions, null, children)));
|
|
2192
2258
|
};
|
|
2193
2259
|
|
|
2194
|
-
var css_248z$
|
|
2195
|
-
var styles$
|
|
2196
|
-
styleInject(css_248z$
|
|
2260
|
+
var css_248z$f = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2261
|
+
var styles$f = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2262
|
+
styleInject(css_248z$f);
|
|
2197
2263
|
|
|
2198
2264
|
const SpeedDialAction = (props) => {
|
|
2199
2265
|
const { icon, color = exports.COLOR.light, onClick, className } = props;
|
|
2200
2266
|
const getCssClasses = () => {
|
|
2201
2267
|
const cssClasses = [];
|
|
2202
|
-
cssClasses.push(styles$
|
|
2268
|
+
cssClasses.push(styles$f.speedDialAction);
|
|
2203
2269
|
className && cssClasses.push(className);
|
|
2204
2270
|
return cssClasses.filter(css => css).join(' ');
|
|
2205
2271
|
};
|
|
@@ -2216,15 +2282,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2216
2282
|
return (React__default["default"].createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2217
2283
|
};
|
|
2218
2284
|
|
|
2219
|
-
var css_248z$
|
|
2220
|
-
var styles$
|
|
2221
|
-
styleInject(css_248z$
|
|
2285
|
+
var css_248z$e = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2286
|
+
var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2287
|
+
styleInject(css_248z$e);
|
|
2222
2288
|
|
|
2223
2289
|
const StepperActions = (props) => {
|
|
2224
2290
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2225
2291
|
const getCssClasses = () => {
|
|
2226
2292
|
const cssClasses = [];
|
|
2227
|
-
cssClasses.push(styles$
|
|
2293
|
+
cssClasses.push(styles$e.stepperActions);
|
|
2228
2294
|
className && cssClasses.push(className);
|
|
2229
2295
|
return cssClasses.filter(css => css).join(' ');
|
|
2230
2296
|
};
|
|
@@ -2241,31 +2307,31 @@ const StepPanel = (props) => {
|
|
|
2241
2307
|
return (React__default["default"].createElement("div", { className: "steppanel" }, children));
|
|
2242
2308
|
};
|
|
2243
2309
|
|
|
2244
|
-
var css_248z$
|
|
2245
|
-
var styles$
|
|
2246
|
-
styleInject(css_248z$
|
|
2310
|
+
var css_248z$d = ".StepConnector-module_stepConnector__A7A-7 {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px;\n}\n\n.StepConnector-module_stepConnectorLine__8rQxv {\n display: block;\n border-color: var(--secondary);\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n border-color: var(--primary);\n}\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n border-top-style: solid;\n border-top-width: 1px;\n}";
|
|
2311
|
+
var styles$d = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2312
|
+
styleInject(css_248z$d);
|
|
2247
2313
|
|
|
2248
2314
|
const StepConnector = (props) => {
|
|
2249
2315
|
const { isActive, isHorizontal = true } = props;
|
|
2250
2316
|
const getCssClassesConnector = () => {
|
|
2251
2317
|
const cssClasses = [];
|
|
2252
|
-
cssClasses.push(styles$
|
|
2318
|
+
cssClasses.push(styles$d.stepConnector);
|
|
2253
2319
|
return cssClasses.filter(css => css).join(' ');
|
|
2254
2320
|
};
|
|
2255
2321
|
const getCssClassesLine = () => {
|
|
2256
2322
|
const cssClasses = [];
|
|
2257
|
-
cssClasses.push(styles$
|
|
2258
|
-
isActive && cssClasses.push(styles$
|
|
2259
|
-
isHorizontal && cssClasses.push(styles$
|
|
2323
|
+
cssClasses.push(styles$d.stepConnectorLine);
|
|
2324
|
+
isActive && cssClasses.push(styles$d['isActive']);
|
|
2325
|
+
isHorizontal && cssClasses.push(styles$d.stepConnectorLineHorizontal);
|
|
2260
2326
|
return cssClasses.filter(css => css).join(' ');
|
|
2261
2327
|
};
|
|
2262
2328
|
return (React__default["default"].createElement("div", { className: getCssClassesConnector() },
|
|
2263
2329
|
React__default["default"].createElement("div", { className: getCssClassesLine() })));
|
|
2264
2330
|
};
|
|
2265
2331
|
|
|
2266
|
-
var css_248z$
|
|
2267
|
-
var styles$
|
|
2268
|
-
styleInject(css_248z$
|
|
2332
|
+
var css_248z$c = ".Stepper-module_stepper__V6odG {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px;\n}\n.Stepper-module_stepper__V6odG.Stepper-module_isHorizontal__Q-3Wu {\n overflow-x: auto;\n}";
|
|
2333
|
+
var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2334
|
+
styleInject(css_248z$c);
|
|
2269
2335
|
|
|
2270
2336
|
const Stepper = (props) => {
|
|
2271
2337
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2353,8 +2419,8 @@ const Stepper = (props) => {
|
|
|
2353
2419
|
};
|
|
2354
2420
|
const getCssClasses = () => {
|
|
2355
2421
|
const cssClasses = [];
|
|
2356
|
-
cssClasses.push(styles$
|
|
2357
|
-
isHorizontal && cssClasses.push(styles$
|
|
2422
|
+
cssClasses.push(styles$c.stepper);
|
|
2423
|
+
isHorizontal && cssClasses.push(styles$c['isHorizontal']);
|
|
2358
2424
|
return cssClasses.filter(css => css).join(' ');
|
|
2359
2425
|
};
|
|
2360
2426
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, steps &&
|
|
@@ -2367,17 +2433,17 @@ const Stepper = (props) => {
|
|
|
2367
2433
|
React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2368
2434
|
};
|
|
2369
2435
|
|
|
2370
|
-
var css_248z$
|
|
2371
|
-
var styles$
|
|
2372
|
-
styleInject(css_248z$
|
|
2436
|
+
var css_248z$b = ".Typography-module_typography__sw-td {\n font-family: var(--fontFamily);\n}\n.Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\nh1 {\n font-size: calc(1.375rem + 1.5vw);\n}\n\nh2 {\n font-size: calc(1.325rem + 0.9vw);\n}\n\nh3 {\n font-size: calc(1.3rem + 0.6vw);\n}\n\nh4 {\n font-size: calc(1.275rem + 0.3vw);\n}\n\nh5 {\n font-size: 1.25rem;\n}\n\nh6 {\n font-size: 1rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 500 !important;\n margin-top: 0;\n margin-bottom: 0.5rem;\n line-height: 1.2;\n}";
|
|
2437
|
+
var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
|
|
2438
|
+
styleInject(css_248z$b);
|
|
2373
2439
|
|
|
2374
2440
|
const Wrapper = (props) => {
|
|
2375
2441
|
const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
|
|
2376
2442
|
const getCssClasses = () => {
|
|
2377
2443
|
const cssClasses = [];
|
|
2378
|
-
cssClasses.push(styles$
|
|
2379
|
-
cssClasses.push(styles$
|
|
2380
|
-
wrap && cssClasses.push(styles$
|
|
2444
|
+
cssClasses.push(styles$b.typography);
|
|
2445
|
+
cssClasses.push(styles$b.as);
|
|
2446
|
+
wrap && cssClasses.push(styles$b.wrap);
|
|
2381
2447
|
className && cssClasses.push(className);
|
|
2382
2448
|
return cssClasses.filter(css => css).join(' ');
|
|
2383
2449
|
};
|
|
@@ -2388,9 +2454,9 @@ const Typography = (_a) => {
|
|
|
2388
2454
|
return (React__default["default"].createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2389
2455
|
};
|
|
2390
2456
|
|
|
2391
|
-
var css_248z$
|
|
2392
|
-
var styles$
|
|
2393
|
-
styleInject(css_248z$
|
|
2457
|
+
var css_248z$a = ".Step-module_stepWrapper__IQwq1 {\n display: flex;\n align-items: center;\n padding-left: 8px;\n padding-right: 8px;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius);\n}\n\n.Step-module_step__k42go {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n}\n.Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n width: 18px !important;\n height: 18px !important;\n}\n\n.Step-module_stepIconCircle__hnxIV svg {\n width: 24px;\n height: 24px;\n}\n\n.Step-module_stepValue__B0-xv {\n position: absolute;\n color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n color: var(--primary-contrast-text);\n}";
|
|
2458
|
+
var styles$a = {"stepWrapper":"Step-module_stepWrapper__IQwq1","hasLabel":"Step-module_hasLabel__LZNvd","disabled":"Step-module_disabled__JnxUP","step":"Step-module_step__k42go","stepIconCircle":"Step-module_stepIconCircle__hnxIV","stepValue":"Step-module_stepValue__B0-xv","isActive":"Step-module_isActive__3GGcl"};
|
|
2459
|
+
styleInject(css_248z$a);
|
|
2394
2460
|
|
|
2395
2461
|
const Step = (props) => {
|
|
2396
2462
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2402,29 +2468,29 @@ const Step = (props) => {
|
|
|
2402
2468
|
};
|
|
2403
2469
|
const getCssClasses = () => {
|
|
2404
2470
|
const cssClasses = [];
|
|
2405
|
-
cssClasses.push(styles$
|
|
2406
|
-
label && showLabel && cssClasses.push(styles$
|
|
2407
|
-
isDisabled && cssClasses.push(styles$
|
|
2471
|
+
cssClasses.push(styles$a.stepWrapper);
|
|
2472
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2473
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2408
2474
|
className && cssClasses.push(className);
|
|
2409
2475
|
return cssClasses.filter(css => css).join(' ');
|
|
2410
2476
|
};
|
|
2411
2477
|
const getCssClassesStep = () => {
|
|
2412
2478
|
const cssClasses = [];
|
|
2413
|
-
cssClasses.push(styles$
|
|
2414
|
-
label && showLabel && cssClasses.push(styles$
|
|
2415
|
-
isDisabled && cssClasses.push(styles$
|
|
2479
|
+
cssClasses.push(styles$a.step);
|
|
2480
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2481
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2416
2482
|
return cssClasses.filter(css => css).join(' ');
|
|
2417
2483
|
};
|
|
2418
2484
|
const getCssClassesStepValue = () => {
|
|
2419
2485
|
const cssClasses = [];
|
|
2420
|
-
cssClasses.push(styles$
|
|
2486
|
+
cssClasses.push(styles$a.stepValue);
|
|
2421
2487
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2422
|
-
isActive && cssClasses.push(styles$
|
|
2488
|
+
isActive && cssClasses.push(styles$a.stepValue['isActive']);
|
|
2423
2489
|
return cssClasses.filter(css => css).join(' ');
|
|
2424
2490
|
};
|
|
2425
2491
|
return (React__default["default"].createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2426
2492
|
React__default["default"].createElement("div", { className: getCssClassesStep() },
|
|
2427
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
2493
|
+
React__default["default"].createElement(Icon, { className: styles$a.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? exports.COLOR.primary : exports.COLOR.secondary },
|
|
2428
2494
|
React__default["default"].createElement(CircleSolidIcon, null)),
|
|
2429
2495
|
React__default["default"].createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2430
2496
|
React__default["default"].createElement(Icon, null,
|
|
@@ -2435,83 +2501,83 @@ const Step = (props) => {
|
|
|
2435
2501
|
React__default["default"].createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2436
2502
|
};
|
|
2437
2503
|
|
|
2438
|
-
var css_248z$
|
|
2439
|
-
var styles$
|
|
2440
|
-
styleInject(css_248z$
|
|
2504
|
+
var css_248z$9 = "@keyframes SkeletonAvatar-module_skeleton-loading__eM-ZU {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonAvatar-module_skeletonAvatar__03QnJ {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: var(--secondary);\n animation: SkeletonAvatar-module_skeleton-loading__eM-ZU 1s linear infinite alternate;\n}";
|
|
2505
|
+
var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","skeleton-loading":"SkeletonAvatar-module_skeleton-loading__eM-ZU"};
|
|
2506
|
+
styleInject(css_248z$9);
|
|
2441
2507
|
|
|
2442
2508
|
const SkeletonAvatar = (props) => {
|
|
2443
2509
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2444
2510
|
const getCssClasses = () => {
|
|
2445
2511
|
const cssClasses = [];
|
|
2446
|
-
cssClasses.push(styles$
|
|
2512
|
+
cssClasses.push(styles$9.skeletonAvatar);
|
|
2447
2513
|
className && cssClasses.push(className);
|
|
2448
2514
|
return cssClasses.filter(r => r).join(' ');
|
|
2449
2515
|
};
|
|
2450
2516
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2451
2517
|
};
|
|
2452
2518
|
|
|
2453
|
-
var css_248z$
|
|
2454
|
-
var styles$
|
|
2455
|
-
styleInject(css_248z$
|
|
2519
|
+
var css_248z$8 = "@keyframes SkeletonText-module_skeleton-loading__EYFfJ {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonText-module_skeletonText__E5NCO {\n width: 100%;\n height: 0.7rem;\n margin-bottom: 0.5rem;\n border-radius: 0.25rem;\n animation: SkeletonText-module_skeleton-loading__EYFfJ 1s linear infinite alternate;\n}";
|
|
2520
|
+
var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skeleton-loading":"SkeletonText-module_skeleton-loading__EYFfJ"};
|
|
2521
|
+
styleInject(css_248z$8);
|
|
2456
2522
|
|
|
2457
2523
|
const SkeletonText = (props) => {
|
|
2458
2524
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2459
2525
|
const getCssClasses = () => {
|
|
2460
2526
|
const cssClasses = [];
|
|
2461
|
-
cssClasses.push(styles$
|
|
2527
|
+
cssClasses.push(styles$8.skeletonText);
|
|
2462
2528
|
className && cssClasses.push(className);
|
|
2463
2529
|
return cssClasses.filter(r => r).join(' ');
|
|
2464
2530
|
};
|
|
2465
2531
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2466
2532
|
};
|
|
2467
2533
|
|
|
2468
|
-
var css_248z$
|
|
2469
|
-
var styles$
|
|
2470
|
-
styleInject(css_248z$
|
|
2534
|
+
var css_248z$7 = "@keyframes SkeletonFooter-module_skeleton-loading__OEErv {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonFooter-module_skeletonFooter__u2Gxc {\n width: 30%;\n height: 0.7rem;\n border-radius: 0.25rem;\n animation: SkeletonFooter-module_skeleton-loading__OEErv 1s linear infinite alternate;\n}";
|
|
2535
|
+
var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","skeleton-loading":"SkeletonFooter-module_skeleton-loading__OEErv"};
|
|
2536
|
+
styleInject(css_248z$7);
|
|
2471
2537
|
|
|
2472
2538
|
const SkeletonFooter = (props) => {
|
|
2473
2539
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2474
2540
|
const getCssClasses = () => {
|
|
2475
2541
|
const cssClasses = [];
|
|
2476
|
-
cssClasses.push(styles$
|
|
2542
|
+
cssClasses.push(styles$7.skeletonFooter);
|
|
2477
2543
|
className && cssClasses.push(className);
|
|
2478
2544
|
return cssClasses.filter(r => r).join(' ');
|
|
2479
2545
|
};
|
|
2480
2546
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2481
2547
|
};
|
|
2482
2548
|
|
|
2483
|
-
var css_248z$
|
|
2484
|
-
var styles$
|
|
2485
|
-
styleInject(css_248z$
|
|
2549
|
+
var css_248z$6 = "@keyframes SkeletonImage-module_skeleton-loading__04lJ7 {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonImage-module_skeletonImage__2EwDG {\n height: 10rem;\n margin: 0.5rem 0;\n border-radius: 0.75rem;\n animation: SkeletonImage-module_skeleton-loading__04lJ7 1s linear infinite alternate;\n}\n\n.SkeletonImage-module_div__tqqrB {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: auto;\n border-radius: 0.75rem;\n border-color: none;\n}";
|
|
2550
|
+
var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","skeleton-loading":"SkeletonImage-module_skeleton-loading__04lJ7","div":"SkeletonImage-module_div__tqqrB"};
|
|
2551
|
+
styleInject(css_248z$6);
|
|
2486
2552
|
|
|
2487
2553
|
const SkeletonImage = (props) => {
|
|
2488
2554
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2489
2555
|
const getCssClasses = () => {
|
|
2490
2556
|
const cssClasses = [];
|
|
2491
|
-
cssClasses.push(styles$
|
|
2557
|
+
cssClasses.push(styles$6.skeletonImage);
|
|
2492
2558
|
className && cssClasses.push(className);
|
|
2493
2559
|
return cssClasses.filter(r => r).join(' ');
|
|
2494
2560
|
};
|
|
2495
2561
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2496
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2562
|
+
React__default["default"].createElement("div", { className: styles$6.img })));
|
|
2497
2563
|
};
|
|
2498
2564
|
|
|
2499
|
-
var css_248z$
|
|
2500
|
-
var styles$
|
|
2501
|
-
styleInject(css_248z$
|
|
2565
|
+
var css_248z$5 = ".Table-module_table__DHKNv {\n --bs-table-bg: transparent;\n --bs-table-accent-bg: transparent;\n --bs-table-striped-color: #212529;\n --bs-table-striped-bg: rgba(0, 0, 0, 0.05);\n --bs-table-active-color: #212529;\n --bs-table-active-bg: rgba(0, 0, 0, 0.1);\n --bs-table-hover-color: #212529;\n --bs-table-hover-bg: rgba(0, 0, 0, 0.075);\n width: 100%;\n margin-bottom: 1rem;\n color: #212529;\n vertical-align: top;\n border-color: #dee2e6;\n}\n.Table-module_table__DHKNv thead {\n vertical-align: bottom;\n}\n.Table-module_table__DHKNv > :not(caption) > * > * {\n padding: 0.5rem 0.5rem;\n background-color: var(--bs-table-bg);\n border-bottom-width: 1px;\n box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);\n}\n.Table-module_table__DHKNv > :not(:first-child) {\n border-top: 2px solid currentColor;\n}\n\n.Table-module_bordered__1Kp1p > :not(caption) > * > * {\n border-width: 0 1px;\n}\n.Table-module_bordered__1Kp1p > :not(caption) > * {\n border-width: 1px 0;\n}\n\n.Table-module_striped__jmxgE > tbody > tr:nth-of-type(odd) > * {\n --bs-table-accent-bg: var(--bs-table-striped-bg);\n color: var(--bs-table-striped-color);\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n --bs-table-accent-bg: var(--bs-table-hover-bg);\n color: var(--bs-table-hover-color);\n}\n\n.Table-module_tableResponsive__ykttB {\n overflow-x: auto;\n}";
|
|
2566
|
+
var styles$5 = {"table":"Table-module_table__DHKNv","bordered":"Table-module_bordered__1Kp1p","striped":"Table-module_striped__jmxgE","hover":"Table-module_hover__P6r3y","tableResponsive":"Table-module_tableResponsive__ykttB"};
|
|
2567
|
+
styleInject(css_248z$5);
|
|
2502
2568
|
|
|
2503
2569
|
const Table = (props) => {
|
|
2504
2570
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2505
2571
|
const getCssClasses = () => {
|
|
2506
2572
|
const cssClasses = [];
|
|
2507
|
-
cssClasses.push(styles$
|
|
2508
|
-
bordered && cssClasses.push(styles$
|
|
2509
|
-
striped && cssClasses.push(styles$
|
|
2510
|
-
hover && cssClasses.push(styles$
|
|
2573
|
+
cssClasses.push(styles$5.table);
|
|
2574
|
+
bordered && cssClasses.push(styles$5['bordered']);
|
|
2575
|
+
striped && cssClasses.push(styles$5['striped']);
|
|
2576
|
+
hover && cssClasses.push(styles$5['hover']);
|
|
2511
2577
|
className && cssClasses.push(className);
|
|
2512
2578
|
return cssClasses.filter(css => css).join(' ');
|
|
2513
2579
|
};
|
|
2514
|
-
return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React__default["default"].createElement("div", { className: styles$
|
|
2580
|
+
return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React__default["default"].createElement("div", { className: styles$5.tableResponsive }, children) },
|
|
2515
2581
|
React__default["default"].createElement("table", { className: getCssClasses() }, children)));
|
|
2516
2582
|
};
|
|
2517
2583
|
|
|
@@ -2544,16 +2610,16 @@ const TableCell = (props) => {
|
|
|
2544
2610
|
React__default["default"].createElement("td", Object.assign({}, rest), children)) }, children));
|
|
2545
2611
|
};
|
|
2546
2612
|
|
|
2547
|
-
var css_248z$
|
|
2548
|
-
var styles$
|
|
2549
|
-
styleInject(css_248z$
|
|
2613
|
+
var css_248z$4 = ".TabIndicator-module_tabIndicator__jSJhH {\n bottom: 0;\n height: 2px;\n position: absolute;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_primary__Q5jEo {\n background-color: var(--primary);\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_accent__qbgIG {\n background-color: var(--accent);\n}";
|
|
2614
|
+
var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
|
|
2615
|
+
styleInject(css_248z$4);
|
|
2550
2616
|
|
|
2551
2617
|
const TabIndicator = (props) => {
|
|
2552
2618
|
const { color = exports.COLOR.primary, width, amount, index } = props;
|
|
2553
2619
|
const getCssClasses = () => {
|
|
2554
2620
|
const cssClasses = [];
|
|
2555
|
-
cssClasses.push(styles$
|
|
2556
|
-
cssClasses.push(styles$
|
|
2621
|
+
cssClasses.push(styles$4.tabIndicator);
|
|
2622
|
+
cssClasses.push(styles$4[color]);
|
|
2557
2623
|
return cssClasses.filter(css => css).join(' ');
|
|
2558
2624
|
};
|
|
2559
2625
|
return (React__default["default"].createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2562,9 +2628,9 @@ const TabIndicator = (props) => {
|
|
|
2562
2628
|
} }));
|
|
2563
2629
|
};
|
|
2564
2630
|
|
|
2565
|
-
var css_248z$
|
|
2566
|
-
var styles$
|
|
2567
|
-
styleInject(css_248z$
|
|
2631
|
+
var css_248z$3 = ".Tabs-module_tabs__YyRTZ {\n display: flex;\n position: relative;\n}";
|
|
2632
|
+
var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
2633
|
+
styleInject(css_248z$3);
|
|
2568
2634
|
|
|
2569
2635
|
const Tabs = (props) => {
|
|
2570
2636
|
const { children, className, fixed, color, indicatorColor, onChange, value } = props;
|
|
@@ -2579,7 +2645,7 @@ const Tabs = (props) => {
|
|
|
2579
2645
|
}, [children, value]);
|
|
2580
2646
|
const getCssClasses = () => {
|
|
2581
2647
|
const cssClasses = [];
|
|
2582
|
-
cssClasses.push(styles$
|
|
2648
|
+
cssClasses.push(styles$3.tabs);
|
|
2583
2649
|
className && cssClasses.push(className);
|
|
2584
2650
|
return cssClasses.filter(css => css).join(' ');
|
|
2585
2651
|
};
|
|
@@ -2603,15 +2669,15 @@ const Tabs = (props) => {
|
|
|
2603
2669
|
React__default["default"].createElement(TabIndicator, { color: indicatorColor, width: (100 / React__default["default"].Children.toArray(children).length) + '%', index: selectedIndex, amount: React__default["default"].Children.toArray(children).length }))));
|
|
2604
2670
|
};
|
|
2605
2671
|
|
|
2606
|
-
var css_248z$
|
|
2607
|
-
var styles$
|
|
2608
|
-
styleInject(css_248z$
|
|
2672
|
+
var css_248z$2 = ".Tab-module_tab__Q8w1f {\n padding: 6px 12px;\n overflow: hidden;\n position: relative;\n font-size: 0.875rem;\n min-width: 72px;\n box-sizing: border-box;\n min-height: 48px;\n text-align: center;\n font-weight: 500;\n line-height: 1.75;\n white-space: normal;\n letter-spacing: 0.02857em;\n text-transform: uppercase;\n border-radius: 0;\n flex-grow: 1;\n flex-basis: 0;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
2673
|
+
var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
|
|
2674
|
+
styleInject(css_248z$2);
|
|
2609
2675
|
|
|
2610
2676
|
const Tab = (props) => {
|
|
2611
2677
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2612
2678
|
const getCssClasses = () => {
|
|
2613
2679
|
const cssClasses = [];
|
|
2614
|
-
cssClasses.push(styles$
|
|
2680
|
+
cssClasses.push(styles$2.tab);
|
|
2615
2681
|
if (isActive) {
|
|
2616
2682
|
cssClasses.push(`show active`);
|
|
2617
2683
|
}
|
|
@@ -2626,46 +2692,6 @@ const TabPanel = (props) => {
|
|
|
2626
2692
|
return (React__default["default"].createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2627
2693
|
};
|
|
2628
2694
|
|
|
2629
|
-
var css_248z$2 = ".Tooltip-module_tooltipContainer__9ZWx3 {\n display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n left: -4px;\n}";
|
|
2630
|
-
var styles$2 = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2631
|
-
styleInject(css_248z$2);
|
|
2632
|
-
|
|
2633
|
-
const Tooltip = (props) => {
|
|
2634
|
-
const { children, text, placement = 'bottom' } = props;
|
|
2635
|
-
const [show, setShow] = React.useState(false);
|
|
2636
|
-
const refChild = React.useRef();
|
|
2637
|
-
const refTooltip = React.useRef();
|
|
2638
|
-
React.useEffect(() => {
|
|
2639
|
-
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2640
|
-
// TODO - extract to own component?
|
|
2641
|
-
core.createPopper(refChild.current, refTooltip.current, {
|
|
2642
|
-
placement: placement,
|
|
2643
|
-
modifiers: [
|
|
2644
|
-
{
|
|
2645
|
-
name: 'offset',
|
|
2646
|
-
options: { offset: [0, 8] }
|
|
2647
|
-
},
|
|
2648
|
-
]
|
|
2649
|
-
});
|
|
2650
|
-
}
|
|
2651
|
-
}, [show]);
|
|
2652
|
-
const handleMouseOver = () => {
|
|
2653
|
-
setShow(true);
|
|
2654
|
-
};
|
|
2655
|
-
const handleMouseLeave = () => {
|
|
2656
|
-
setShow(false);
|
|
2657
|
-
};
|
|
2658
|
-
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2659
|
-
React__default["default"].createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
|
|
2660
|
-
onMouseOver: handleMouseOver,
|
|
2661
|
-
onMouseLeave: handleMouseLeave,
|
|
2662
|
-
})),
|
|
2663
|
-
show && text &&
|
|
2664
|
-
React__default["default"].createElement("div", { className: styles$2.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2665
|
-
text,
|
|
2666
|
-
React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2667
|
-
};
|
|
2668
|
-
|
|
2669
2695
|
const HourSelect = (props) => {
|
|
2670
2696
|
const { className, value = 0, id, name, disabled, onChange } = props;
|
|
2671
2697
|
const [newValue, setNewValue] = React.useState(value);
|
|
@@ -2930,6 +2956,7 @@ exports.MenuDivider = MenuDivider;
|
|
|
2930
2956
|
exports.MenuItem = MenuItem;
|
|
2931
2957
|
exports.MenuToggle = MenuToggle;
|
|
2932
2958
|
exports.MilliSecondSelect = MilliSecondSelect;
|
|
2959
|
+
exports.MinValidator = MinValidator;
|
|
2933
2960
|
exports.MinuteSelect = MinuteSelect;
|
|
2934
2961
|
exports.Modal = Modal;
|
|
2935
2962
|
exports.ModalBody = ModalBody;
|