react-asc 23.6.0 → 23.7.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/Backdrop/Backdrop.d.ts +2 -3
- package/components/Drawer/Drawer.d.ts +1 -1
- package/components/Form/validators/MinValidator.d.ts +1 -0
- package/components/Form/validators/index.d.ts +1 -0
- package/components/Menu/MenuBody.d.ts +1 -1
- package/components/Modal/Modal.d.ts +2 -1
- package/components/Portal/Portal.d.ts +7 -0
- package/components/Portal/index.d.ts +1 -0
- package/index.es.js +203 -163
- package/index.js +202 -161
- package/package.json +1 -1
- package/react-asc.scss +4 -13
- package/readme.md +2 -0
- package/components/Menu/MenuBackdrop.d.ts +0 -6
package/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useRef, useEffect, useState, createContext, useContext, Fragment, Component, createRef, cloneElement } from 'react';
|
|
1
|
+
import React, { useRef, useEffect, useState, useMemo, createContext, useContext, Fragment, Component, createRef, cloneElement } from 'react';
|
|
2
2
|
import { createPortal, render, unmountComponentAtNode } from 'react-dom';
|
|
3
3
|
import { createPopper } from '@popperjs/core';
|
|
4
4
|
|
|
@@ -308,6 +308,18 @@ const useOnDestroy = (callBack) => {
|
|
|
308
308
|
}, []);
|
|
309
309
|
};
|
|
310
310
|
|
|
311
|
+
const Portal = ({ children, target = document.body, className }) => {
|
|
312
|
+
const containerEl = useMemo(() => document.createElement('div'), []);
|
|
313
|
+
useEffect(() => {
|
|
314
|
+
className && className.split(' ').forEach(cssClass => containerEl.classList.add(cssClass));
|
|
315
|
+
target.appendChild(containerEl);
|
|
316
|
+
return () => {
|
|
317
|
+
target.removeChild(containerEl);
|
|
318
|
+
};
|
|
319
|
+
}, []);
|
|
320
|
+
return createPortal(children, containerEl);
|
|
321
|
+
};
|
|
322
|
+
|
|
311
323
|
var css_248z$10 = ".Backdrop-module_backdrop__IRMoL {\n height: 100%;\n width: 100%;\n position: absolute;\n opacity: 0.5;\n z-index: 1040;\n top: 0;\n left: 0;\n background-color: #000;\n}\n.Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n opacity: 0;\n}";
|
|
312
324
|
var styles$10 = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
313
325
|
styleInject(css_248z$10);
|
|
@@ -325,10 +337,10 @@ const Backdrop = (props) => {
|
|
|
325
337
|
return cssClasses.filter(css => css).join(' ');
|
|
326
338
|
};
|
|
327
339
|
const getStyles = () => {
|
|
328
|
-
|
|
329
|
-
return styles;
|
|
340
|
+
return Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
|
|
330
341
|
};
|
|
331
|
-
return (
|
|
342
|
+
return (React.createElement(Portal, { className: 'backdrop-root', target: target },
|
|
343
|
+
React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
|
|
332
344
|
};
|
|
333
345
|
|
|
334
346
|
var css_248z$$ = ".List-module_list__gpZ41 {\n width: 100%;\n display: flex;\n flex-direction: column;\n padding-left: 0;\n margin-bottom: 0;\n margin-top: 0;\n background-color: var(--white);\n}";
|
|
@@ -1116,13 +1128,13 @@ const Select = (props) => {
|
|
|
1116
1128
|
React.createElement(Icon, { className: "ml-2" },
|
|
1117
1129
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
1118
1130
|
isShow &&
|
|
1119
|
-
|
|
1131
|
+
React.createElement(Portal, { className: 'backdrop-root' },
|
|
1120
1132
|
React.createElement("div", { className: styles$D.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
|
|
1121
1133
|
React.createElement(List, null, options && options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
1122
1134
|
multiple &&
|
|
1123
1135
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
1124
1136
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
1125
|
-
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))
|
|
1137
|
+
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1126
1138
|
};
|
|
1127
1139
|
|
|
1128
1140
|
var css_248z$C = ".Textarea-module_textarea__L5zqa {\n min-height: calc(10em + 0.75rem + 2px);\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
@@ -1219,7 +1231,9 @@ const EmailValidator = (value) => {
|
|
|
1219
1231
|
|
|
1220
1232
|
const IsEqualValidator = (valueA, valueB) => valueA === valueB;
|
|
1221
1233
|
|
|
1222
|
-
const MaxValidator = (valueA, valueB) => valueA
|
|
1234
|
+
const MaxValidator = (valueA, valueB) => valueA <= valueB;
|
|
1235
|
+
|
|
1236
|
+
const MinValidator = (valueA, valueB) => valueA >= valueB;
|
|
1223
1237
|
|
|
1224
1238
|
// values, isSubmitting, handleChange, handleBlur, handleSubmit
|
|
1225
1239
|
class Form extends Component {
|
|
@@ -1270,8 +1284,13 @@ class Form extends Component {
|
|
|
1270
1284
|
errors.push({ validator: validatorName, message: 'Email format is wrong' });
|
|
1271
1285
|
}
|
|
1272
1286
|
break;
|
|
1287
|
+
case 'min':
|
|
1288
|
+
if (!MinValidator(fieldValue, parseInt(validatorParam))) {
|
|
1289
|
+
errors.push({ validator: validatorName, message: `Number is less than ${validatorParam}` });
|
|
1290
|
+
}
|
|
1291
|
+
break;
|
|
1273
1292
|
case 'max':
|
|
1274
|
-
if (MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1293
|
+
if (!MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1275
1294
|
errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
|
|
1276
1295
|
}
|
|
1277
1296
|
break;
|
|
@@ -1543,9 +1562,9 @@ const Drawer = (props) => {
|
|
|
1543
1562
|
const handleClickBackdrop = () => {
|
|
1544
1563
|
onClickBackdrop && onClickBackdrop();
|
|
1545
1564
|
};
|
|
1546
|
-
return
|
|
1565
|
+
return (React.createElement(Portal, { className: 'drawer-root', target: target },
|
|
1547
1566
|
React.createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
|
|
1548
|
-
!permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop }))
|
|
1567
|
+
!permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1549
1568
|
};
|
|
1550
1569
|
const DrawerContent = (props) => {
|
|
1551
1570
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
@@ -1609,9 +1628,9 @@ const MenuBody = (props) => {
|
|
|
1609
1628
|
const handleClickBackdrop = () => {
|
|
1610
1629
|
onClickBackdrop && onClickBackdrop();
|
|
1611
1630
|
};
|
|
1612
|
-
return (
|
|
1631
|
+
return (React.createElement(Portal, { className: 'menu-root' },
|
|
1613
1632
|
React.createElement("div", { ref: menuBodyRef, className: getCssClasses() }, children),
|
|
1614
|
-
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop }))
|
|
1633
|
+
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
|
|
1615
1634
|
};
|
|
1616
1635
|
|
|
1617
1636
|
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
@@ -1839,7 +1858,7 @@ var styles$l = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module
|
|
|
1839
1858
|
styleInject(css_248z$l);
|
|
1840
1859
|
|
|
1841
1860
|
const Modal = (props) => {
|
|
1842
|
-
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1861
|
+
const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1843
1862
|
const getCssClass = () => {
|
|
1844
1863
|
const cssClasses = [];
|
|
1845
1864
|
cssClasses.push(styles$l.modalDialog);
|
|
@@ -1856,17 +1875,19 @@ const Modal = (props) => {
|
|
|
1856
1875
|
};
|
|
1857
1876
|
}, []);
|
|
1858
1877
|
const handleClickBackdrop = () => {
|
|
1878
|
+
console.warn('backdrop clicked');
|
|
1859
1879
|
onBackdropClick && onBackdropClick();
|
|
1860
1880
|
};
|
|
1861
1881
|
return (React.createElement(React.Fragment, null,
|
|
1862
|
-
React.createElement(
|
|
1863
|
-
React.createElement("div", { className:
|
|
1864
|
-
React.createElement("div", { className:
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1882
|
+
React.createElement(Portal, { className: 'modal-root', target: target },
|
|
1883
|
+
React.createElement("div", { className: styles$l.modal },
|
|
1884
|
+
React.createElement("div", { className: getCssClass() },
|
|
1885
|
+
React.createElement("div", { className: styles$l.modalContent },
|
|
1886
|
+
header &&
|
|
1887
|
+
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1888
|
+
React.createElement(ModalBody, null, children),
|
|
1889
|
+
footer &&
|
|
1890
|
+
React.createElement(ModalFooter, null, footer))))),
|
|
1870
1891
|
React.createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1871
1892
|
};
|
|
1872
1893
|
|
|
@@ -1986,29 +2007,88 @@ const NumberSelect = (props) => {
|
|
|
1986
2007
|
return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
1987
2008
|
};
|
|
1988
2009
|
|
|
1989
|
-
var css_248z$k = ".
|
|
1990
|
-
var styles$k = {"
|
|
2010
|
+
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}";
|
|
2011
|
+
var styles$k = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
1991
2012
|
styleInject(css_248z$k);
|
|
1992
2013
|
|
|
2014
|
+
const Tooltip = (props) => {
|
|
2015
|
+
const { children, text, placement = 'bottom' } = props;
|
|
2016
|
+
const [show, setShow] = useState(false);
|
|
2017
|
+
const refChild = useRef();
|
|
2018
|
+
const refTooltip = useRef();
|
|
2019
|
+
useEffect(() => {
|
|
2020
|
+
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2021
|
+
// TODO - extract to own component?
|
|
2022
|
+
createPopper(refChild.current, refTooltip.current, {
|
|
2023
|
+
placement: placement,
|
|
2024
|
+
modifiers: [
|
|
2025
|
+
{
|
|
2026
|
+
name: 'offset',
|
|
2027
|
+
options: { offset: [0, 8] }
|
|
2028
|
+
},
|
|
2029
|
+
]
|
|
2030
|
+
});
|
|
2031
|
+
}
|
|
2032
|
+
}, [show]);
|
|
2033
|
+
const handleMouseOver = () => {
|
|
2034
|
+
setShow(true);
|
|
2035
|
+
};
|
|
2036
|
+
const handleMouseLeave = () => {
|
|
2037
|
+
setShow(false);
|
|
2038
|
+
};
|
|
2039
|
+
return (React.createElement(React.Fragment, null,
|
|
2040
|
+
React.createElement("div", { className: styles$k.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2041
|
+
onMouseOver: handleMouseOver,
|
|
2042
|
+
onMouseLeave: handleMouseLeave,
|
|
2043
|
+
})),
|
|
2044
|
+
show && text &&
|
|
2045
|
+
React.createElement("div", { className: styles$k.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2046
|
+
text,
|
|
2047
|
+
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2048
|
+
};
|
|
2049
|
+
|
|
2050
|
+
var css_248z$j = ":root {\n --progress-height: 0.5rem;\n --progress-bg: #e9ecef;\n --progress-box-shadow: var(--shadow);\n --progress-bar-color: #fff;\n --progress-bar-bg: var(--primary);\n --progress-bar-transition: width 0.6s ease;\n}\n\n.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}";
|
|
2051
|
+
var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2052
|
+
styleInject(css_248z$j);
|
|
2053
|
+
|
|
1993
2054
|
const ProgressBar = (props) => {
|
|
1994
2055
|
const { className, color = COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
2056
|
+
const [model, setModel] = useState();
|
|
2057
|
+
useEffect(() => {
|
|
2058
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2059
|
+
}, [color]);
|
|
2060
|
+
useEffect(() => {
|
|
2061
|
+
let newValue = value;
|
|
2062
|
+
if (value && value < 0) {
|
|
2063
|
+
newValue = 0;
|
|
2064
|
+
}
|
|
2065
|
+
if (value && value > 100) {
|
|
2066
|
+
newValue = 100;
|
|
2067
|
+
}
|
|
2068
|
+
setModel(newValue);
|
|
2069
|
+
}, [value]);
|
|
1995
2070
|
const getCssClasses = () => {
|
|
1996
2071
|
const cssClasses = [];
|
|
1997
|
-
cssClasses.push(styles$
|
|
2072
|
+
cssClasses.push(styles$j.progressBarContainer);
|
|
1998
2073
|
className && cssClasses.push(className);
|
|
1999
2074
|
return cssClasses.filter(r => r).join(' ');
|
|
2000
2075
|
};
|
|
2001
2076
|
const getCssClassesBar = () => {
|
|
2002
2077
|
const cssClasses = [];
|
|
2003
|
-
cssClasses.push(styles$
|
|
2004
|
-
indeterminate && cssClasses.push(styles$
|
|
2078
|
+
cssClasses.push(styles$j.progressBar);
|
|
2079
|
+
indeterminate && cssClasses.push(styles$j['indeterminate']);
|
|
2005
2080
|
return cssClasses.filter(r => r).join(' ');
|
|
2006
2081
|
};
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2082
|
+
const getStyle = () => {
|
|
2083
|
+
let width = model && model >= 0 ? model : 0;
|
|
2084
|
+
if (indeterminate) {
|
|
2085
|
+
width = 100;
|
|
2086
|
+
}
|
|
2087
|
+
return `${width}%`;
|
|
2088
|
+
};
|
|
2089
|
+
return (React.createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2090
|
+
React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2091
|
+
React.createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2012
2092
|
};
|
|
2013
2093
|
|
|
2014
2094
|
class SidebarItemModel {
|
|
@@ -2088,25 +2168,25 @@ const Sidebar = (props) => {
|
|
|
2088
2168
|
!item.isCollapsed && item.items && item.items.length > 0 && (React.createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React.createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
2089
2169
|
};
|
|
2090
2170
|
|
|
2091
|
-
var css_248z$
|
|
2092
|
-
var styles$
|
|
2093
|
-
styleInject(css_248z$
|
|
2171
|
+
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}";
|
|
2172
|
+
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"};
|
|
2173
|
+
styleInject(css_248z$i);
|
|
2094
2174
|
|
|
2095
2175
|
const Snackbar = (props) => {
|
|
2096
2176
|
const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
2097
2177
|
const getCssClasses = () => {
|
|
2098
2178
|
const cssClasses = [];
|
|
2099
|
-
cssClasses.push(styles$
|
|
2179
|
+
cssClasses.push(styles$i.snackbar);
|
|
2100
2180
|
cssClasses.push(`shadow-lg`);
|
|
2101
|
-
cssClasses.push(styles$
|
|
2181
|
+
cssClasses.push(styles$i[color]);
|
|
2102
2182
|
return cssClasses.filter(css => css).join(' ');
|
|
2103
2183
|
};
|
|
2104
2184
|
const handleClickAction = (e) => {
|
|
2105
2185
|
onOk && onOk(e);
|
|
2106
2186
|
};
|
|
2107
2187
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2108
|
-
React.createElement("div", { className: styles$
|
|
2109
|
-
React.createElement("div", { className: styles$
|
|
2188
|
+
React.createElement("div", { className: styles$i.text }, children),
|
|
2189
|
+
React.createElement("div", { className: styles$i.action + ' text-accent', onClick: handleClickAction },
|
|
2110
2190
|
React.createElement("span", null, actionText))));
|
|
2111
2191
|
};
|
|
2112
2192
|
|
|
@@ -2144,29 +2224,29 @@ class SnackbarService {
|
|
|
2144
2224
|
}
|
|
2145
2225
|
const snackbarService = new SnackbarService();
|
|
2146
2226
|
|
|
2147
|
-
var css_248z$
|
|
2148
|
-
var styles$
|
|
2149
|
-
styleInject(css_248z$
|
|
2227
|
+
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}";
|
|
2228
|
+
var styles$h = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2229
|
+
styleInject(css_248z$h);
|
|
2150
2230
|
|
|
2151
2231
|
const SpeedDialActions = (props) => {
|
|
2152
2232
|
const { children } = props;
|
|
2153
2233
|
const getCssClasses = () => {
|
|
2154
2234
|
const cssClasses = [];
|
|
2155
|
-
cssClasses.push(styles$
|
|
2235
|
+
cssClasses.push(styles$h.speedDialActions);
|
|
2156
2236
|
return cssClasses.filter(css => css).join(' ');
|
|
2157
2237
|
};
|
|
2158
2238
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
2159
2239
|
};
|
|
2160
2240
|
|
|
2161
|
-
var css_248z$
|
|
2162
|
-
var styles$
|
|
2163
|
-
styleInject(css_248z$
|
|
2241
|
+
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}";
|
|
2242
|
+
var styles$g = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2243
|
+
styleInject(css_248z$g);
|
|
2164
2244
|
|
|
2165
2245
|
const SpeedDial = (props) => {
|
|
2166
2246
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
2167
2247
|
const getCssClasses = () => {
|
|
2168
2248
|
const cssClasses = [];
|
|
2169
|
-
cssClasses.push(styles$
|
|
2249
|
+
cssClasses.push(styles$g.speedDial);
|
|
2170
2250
|
className && cssClasses.push(className);
|
|
2171
2251
|
return cssClasses.filter(css => css).join(' ');
|
|
2172
2252
|
};
|
|
@@ -2183,15 +2263,15 @@ const SpeedDial = (props) => {
|
|
|
2183
2263
|
React.createElement(SpeedDialActions, null, children)));
|
|
2184
2264
|
};
|
|
2185
2265
|
|
|
2186
|
-
var css_248z$
|
|
2187
|
-
var styles$
|
|
2188
|
-
styleInject(css_248z$
|
|
2266
|
+
var css_248z$f = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2267
|
+
var styles$f = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2268
|
+
styleInject(css_248z$f);
|
|
2189
2269
|
|
|
2190
2270
|
const SpeedDialAction = (props) => {
|
|
2191
2271
|
const { icon, color = COLOR.light, onClick, className } = props;
|
|
2192
2272
|
const getCssClasses = () => {
|
|
2193
2273
|
const cssClasses = [];
|
|
2194
|
-
cssClasses.push(styles$
|
|
2274
|
+
cssClasses.push(styles$f.speedDialAction);
|
|
2195
2275
|
className && cssClasses.push(className);
|
|
2196
2276
|
return cssClasses.filter(css => css).join(' ');
|
|
2197
2277
|
};
|
|
@@ -2208,15 +2288,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2208
2288
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2209
2289
|
};
|
|
2210
2290
|
|
|
2211
|
-
var css_248z$
|
|
2212
|
-
var styles$
|
|
2213
|
-
styleInject(css_248z$
|
|
2291
|
+
var css_248z$e = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2292
|
+
var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2293
|
+
styleInject(css_248z$e);
|
|
2214
2294
|
|
|
2215
2295
|
const StepperActions = (props) => {
|
|
2216
2296
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2217
2297
|
const getCssClasses = () => {
|
|
2218
2298
|
const cssClasses = [];
|
|
2219
|
-
cssClasses.push(styles$
|
|
2299
|
+
cssClasses.push(styles$e.stepperActions);
|
|
2220
2300
|
className && cssClasses.push(className);
|
|
2221
2301
|
return cssClasses.filter(css => css).join(' ');
|
|
2222
2302
|
};
|
|
@@ -2233,31 +2313,31 @@ const StepPanel = (props) => {
|
|
|
2233
2313
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
2234
2314
|
};
|
|
2235
2315
|
|
|
2236
|
-
var css_248z$
|
|
2237
|
-
var styles$
|
|
2238
|
-
styleInject(css_248z$
|
|
2316
|
+
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}";
|
|
2317
|
+
var styles$d = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2318
|
+
styleInject(css_248z$d);
|
|
2239
2319
|
|
|
2240
2320
|
const StepConnector = (props) => {
|
|
2241
2321
|
const { isActive, isHorizontal = true } = props;
|
|
2242
2322
|
const getCssClassesConnector = () => {
|
|
2243
2323
|
const cssClasses = [];
|
|
2244
|
-
cssClasses.push(styles$
|
|
2324
|
+
cssClasses.push(styles$d.stepConnector);
|
|
2245
2325
|
return cssClasses.filter(css => css).join(' ');
|
|
2246
2326
|
};
|
|
2247
2327
|
const getCssClassesLine = () => {
|
|
2248
2328
|
const cssClasses = [];
|
|
2249
|
-
cssClasses.push(styles$
|
|
2250
|
-
isActive && cssClasses.push(styles$
|
|
2251
|
-
isHorizontal && cssClasses.push(styles$
|
|
2329
|
+
cssClasses.push(styles$d.stepConnectorLine);
|
|
2330
|
+
isActive && cssClasses.push(styles$d['isActive']);
|
|
2331
|
+
isHorizontal && cssClasses.push(styles$d.stepConnectorLineHorizontal);
|
|
2252
2332
|
return cssClasses.filter(css => css).join(' ');
|
|
2253
2333
|
};
|
|
2254
2334
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
2255
2335
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
2256
2336
|
};
|
|
2257
2337
|
|
|
2258
|
-
var css_248z$
|
|
2259
|
-
var styles$
|
|
2260
|
-
styleInject(css_248z$
|
|
2338
|
+
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}";
|
|
2339
|
+
var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2340
|
+
styleInject(css_248z$c);
|
|
2261
2341
|
|
|
2262
2342
|
const Stepper = (props) => {
|
|
2263
2343
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2345,8 +2425,8 @@ const Stepper = (props) => {
|
|
|
2345
2425
|
};
|
|
2346
2426
|
const getCssClasses = () => {
|
|
2347
2427
|
const cssClasses = [];
|
|
2348
|
-
cssClasses.push(styles$
|
|
2349
|
-
isHorizontal && cssClasses.push(styles$
|
|
2428
|
+
cssClasses.push(styles$c.stepper);
|
|
2429
|
+
isHorizontal && cssClasses.push(styles$c['isHorizontal']);
|
|
2350
2430
|
return cssClasses.filter(css => css).join(' ');
|
|
2351
2431
|
};
|
|
2352
2432
|
return (React.createElement(React.Fragment, null, steps &&
|
|
@@ -2359,17 +2439,17 @@ const Stepper = (props) => {
|
|
|
2359
2439
|
React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2360
2440
|
};
|
|
2361
2441
|
|
|
2362
|
-
var css_248z$
|
|
2363
|
-
var styles$
|
|
2364
|
-
styleInject(css_248z$
|
|
2442
|
+
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}";
|
|
2443
|
+
var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
|
|
2444
|
+
styleInject(css_248z$b);
|
|
2365
2445
|
|
|
2366
2446
|
const Wrapper = (props) => {
|
|
2367
2447
|
const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
|
|
2368
2448
|
const getCssClasses = () => {
|
|
2369
2449
|
const cssClasses = [];
|
|
2370
|
-
cssClasses.push(styles$
|
|
2371
|
-
cssClasses.push(styles$
|
|
2372
|
-
wrap && cssClasses.push(styles$
|
|
2450
|
+
cssClasses.push(styles$b.typography);
|
|
2451
|
+
cssClasses.push(styles$b.as);
|
|
2452
|
+
wrap && cssClasses.push(styles$b.wrap);
|
|
2373
2453
|
className && cssClasses.push(className);
|
|
2374
2454
|
return cssClasses.filter(css => css).join(' ');
|
|
2375
2455
|
};
|
|
@@ -2380,9 +2460,9 @@ const Typography = (_a) => {
|
|
|
2380
2460
|
return (React.createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2381
2461
|
};
|
|
2382
2462
|
|
|
2383
|
-
var css_248z$
|
|
2384
|
-
var styles$
|
|
2385
|
-
styleInject(css_248z$
|
|
2463
|
+
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}";
|
|
2464
|
+
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"};
|
|
2465
|
+
styleInject(css_248z$a);
|
|
2386
2466
|
|
|
2387
2467
|
const Step = (props) => {
|
|
2388
2468
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2394,29 +2474,29 @@ const Step = (props) => {
|
|
|
2394
2474
|
};
|
|
2395
2475
|
const getCssClasses = () => {
|
|
2396
2476
|
const cssClasses = [];
|
|
2397
|
-
cssClasses.push(styles$
|
|
2398
|
-
label && showLabel && cssClasses.push(styles$
|
|
2399
|
-
isDisabled && cssClasses.push(styles$
|
|
2477
|
+
cssClasses.push(styles$a.stepWrapper);
|
|
2478
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2479
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2400
2480
|
className && cssClasses.push(className);
|
|
2401
2481
|
return cssClasses.filter(css => css).join(' ');
|
|
2402
2482
|
};
|
|
2403
2483
|
const getCssClassesStep = () => {
|
|
2404
2484
|
const cssClasses = [];
|
|
2405
|
-
cssClasses.push(styles$
|
|
2406
|
-
label && showLabel && cssClasses.push(styles$
|
|
2407
|
-
isDisabled && cssClasses.push(styles$
|
|
2485
|
+
cssClasses.push(styles$a.step);
|
|
2486
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2487
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2408
2488
|
return cssClasses.filter(css => css).join(' ');
|
|
2409
2489
|
};
|
|
2410
2490
|
const getCssClassesStepValue = () => {
|
|
2411
2491
|
const cssClasses = [];
|
|
2412
|
-
cssClasses.push(styles$
|
|
2492
|
+
cssClasses.push(styles$a.stepValue);
|
|
2413
2493
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2414
|
-
isActive && cssClasses.push(styles$
|
|
2494
|
+
isActive && cssClasses.push(styles$a.stepValue['isActive']);
|
|
2415
2495
|
return cssClasses.filter(css => css).join(' ');
|
|
2416
2496
|
};
|
|
2417
2497
|
return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2418
2498
|
React.createElement("div", { className: getCssClassesStep() },
|
|
2419
|
-
React.createElement(Icon, { className: styles$
|
|
2499
|
+
React.createElement(Icon, { className: styles$a.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
|
|
2420
2500
|
React.createElement(CircleSolidIcon, null)),
|
|
2421
2501
|
React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2422
2502
|
React.createElement(Icon, null,
|
|
@@ -2427,83 +2507,83 @@ const Step = (props) => {
|
|
|
2427
2507
|
React.createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2428
2508
|
};
|
|
2429
2509
|
|
|
2430
|
-
var css_248z$
|
|
2431
|
-
var styles$
|
|
2432
|
-
styleInject(css_248z$
|
|
2510
|
+
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}";
|
|
2511
|
+
var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","skeleton-loading":"SkeletonAvatar-module_skeleton-loading__eM-ZU"};
|
|
2512
|
+
styleInject(css_248z$9);
|
|
2433
2513
|
|
|
2434
2514
|
const SkeletonAvatar = (props) => {
|
|
2435
2515
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2436
2516
|
const getCssClasses = () => {
|
|
2437
2517
|
const cssClasses = [];
|
|
2438
|
-
cssClasses.push(styles$
|
|
2518
|
+
cssClasses.push(styles$9.skeletonAvatar);
|
|
2439
2519
|
className && cssClasses.push(className);
|
|
2440
2520
|
return cssClasses.filter(r => r).join(' ');
|
|
2441
2521
|
};
|
|
2442
2522
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2443
2523
|
};
|
|
2444
2524
|
|
|
2445
|
-
var css_248z$
|
|
2446
|
-
var styles$
|
|
2447
|
-
styleInject(css_248z$
|
|
2525
|
+
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}";
|
|
2526
|
+
var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skeleton-loading":"SkeletonText-module_skeleton-loading__EYFfJ"};
|
|
2527
|
+
styleInject(css_248z$8);
|
|
2448
2528
|
|
|
2449
2529
|
const SkeletonText = (props) => {
|
|
2450
2530
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2451
2531
|
const getCssClasses = () => {
|
|
2452
2532
|
const cssClasses = [];
|
|
2453
|
-
cssClasses.push(styles$
|
|
2533
|
+
cssClasses.push(styles$8.skeletonText);
|
|
2454
2534
|
className && cssClasses.push(className);
|
|
2455
2535
|
return cssClasses.filter(r => r).join(' ');
|
|
2456
2536
|
};
|
|
2457
2537
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2458
2538
|
};
|
|
2459
2539
|
|
|
2460
|
-
var css_248z$
|
|
2461
|
-
var styles$
|
|
2462
|
-
styleInject(css_248z$
|
|
2540
|
+
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}";
|
|
2541
|
+
var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","skeleton-loading":"SkeletonFooter-module_skeleton-loading__OEErv"};
|
|
2542
|
+
styleInject(css_248z$7);
|
|
2463
2543
|
|
|
2464
2544
|
const SkeletonFooter = (props) => {
|
|
2465
2545
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2466
2546
|
const getCssClasses = () => {
|
|
2467
2547
|
const cssClasses = [];
|
|
2468
|
-
cssClasses.push(styles$
|
|
2548
|
+
cssClasses.push(styles$7.skeletonFooter);
|
|
2469
2549
|
className && cssClasses.push(className);
|
|
2470
2550
|
return cssClasses.filter(r => r).join(' ');
|
|
2471
2551
|
};
|
|
2472
2552
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2473
2553
|
};
|
|
2474
2554
|
|
|
2475
|
-
var css_248z$
|
|
2476
|
-
var styles$
|
|
2477
|
-
styleInject(css_248z$
|
|
2555
|
+
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}";
|
|
2556
|
+
var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","skeleton-loading":"SkeletonImage-module_skeleton-loading__04lJ7","div":"SkeletonImage-module_div__tqqrB"};
|
|
2557
|
+
styleInject(css_248z$6);
|
|
2478
2558
|
|
|
2479
2559
|
const SkeletonImage = (props) => {
|
|
2480
2560
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2481
2561
|
const getCssClasses = () => {
|
|
2482
2562
|
const cssClasses = [];
|
|
2483
|
-
cssClasses.push(styles$
|
|
2563
|
+
cssClasses.push(styles$6.skeletonImage);
|
|
2484
2564
|
className && cssClasses.push(className);
|
|
2485
2565
|
return cssClasses.filter(r => r).join(' ');
|
|
2486
2566
|
};
|
|
2487
2567
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2488
|
-
React.createElement("div", { className: styles$
|
|
2568
|
+
React.createElement("div", { className: styles$6.img })));
|
|
2489
2569
|
};
|
|
2490
2570
|
|
|
2491
|
-
var css_248z$
|
|
2492
|
-
var styles$
|
|
2493
|
-
styleInject(css_248z$
|
|
2571
|
+
var css_248z$5 = ":root {\n --table-bg: transparent;\n --table-accent-bg: transparent;\n --table-striped-color: #212529;\n --table-striped-bg: rgba(0, 0, 0, 0.05);\n --table-active-color: #212529;\n --table-active-bg: rgba(0, 0, 0, 0.1);\n --table-hover-color: #212529;\n --table-hover-bg: rgba(0, 0, 0, 0.075);\n}\n\n.Table-module_tableResponsive__ykttB {\n overflow-x: auto;\n}\n\n.Table-module_table__DHKNv {\n display: table;\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0px;\n min-width: 650px;\n}\n.Table-module_table__DHKNv thead {\n display: table-header-group;\n}\n.Table-module_table__DHKNv tbody {\n display: table-row-group;\n}\n.Table-module_table__DHKNv tr {\n color: inherit;\n display: table-row;\n vertical-align: middle;\n outline: 0px;\n}\n.Table-module_table__DHKNv th {\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgb(224, 224, 224);\n text-align: left;\n padding: 16px;\n color: rgba(0, 0, 0, 0.87);\n border-collapse: collapse;\n border-spacing: 0px;\n}\n.Table-module_table__DHKNv td {\n font-size: 0.875rem;\n line-height: 1.43;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgb(224, 224, 224);\n padding: 16px;\n color: rgba(0, 0, 0, 0.87);\n flex-direction: row-reverse;\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n background-color: var(--table-hover-bg);\n color: var(--table-hover-color);\n}";
|
|
2572
|
+
var styles$5 = {"tableResponsive":"Table-module_tableResponsive__ykttB","table":"Table-module_table__DHKNv","hover":"Table-module_hover__P6r3y"};
|
|
2573
|
+
styleInject(css_248z$5);
|
|
2494
2574
|
|
|
2495
2575
|
const Table = (props) => {
|
|
2496
2576
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2497
2577
|
const getCssClasses = () => {
|
|
2498
2578
|
const cssClasses = [];
|
|
2499
|
-
cssClasses.push(styles$
|
|
2500
|
-
bordered && cssClasses.push(styles$
|
|
2501
|
-
striped && cssClasses.push(styles$
|
|
2502
|
-
hover && cssClasses.push(styles$
|
|
2579
|
+
cssClasses.push(styles$5.table);
|
|
2580
|
+
bordered && cssClasses.push(styles$5['bordered']);
|
|
2581
|
+
striped && cssClasses.push(styles$5['striped']);
|
|
2582
|
+
hover && cssClasses.push(styles$5['hover']);
|
|
2503
2583
|
className && cssClasses.push(className);
|
|
2504
2584
|
return cssClasses.filter(css => css).join(' ');
|
|
2505
2585
|
};
|
|
2506
|
-
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$
|
|
2586
|
+
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$5.tableResponsive }, children) },
|
|
2507
2587
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2508
2588
|
};
|
|
2509
2589
|
|
|
@@ -2536,16 +2616,16 @@ const TableCell = (props) => {
|
|
|
2536
2616
|
React.createElement("td", Object.assign({}, rest), children)) }, children));
|
|
2537
2617
|
};
|
|
2538
2618
|
|
|
2539
|
-
var css_248z$
|
|
2540
|
-
var styles$
|
|
2541
|
-
styleInject(css_248z$
|
|
2619
|
+
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}";
|
|
2620
|
+
var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
|
|
2621
|
+
styleInject(css_248z$4);
|
|
2542
2622
|
|
|
2543
2623
|
const TabIndicator = (props) => {
|
|
2544
2624
|
const { color = COLOR.primary, width, amount, index } = props;
|
|
2545
2625
|
const getCssClasses = () => {
|
|
2546
2626
|
const cssClasses = [];
|
|
2547
|
-
cssClasses.push(styles$
|
|
2548
|
-
cssClasses.push(styles$
|
|
2627
|
+
cssClasses.push(styles$4.tabIndicator);
|
|
2628
|
+
cssClasses.push(styles$4[color]);
|
|
2549
2629
|
return cssClasses.filter(css => css).join(' ');
|
|
2550
2630
|
};
|
|
2551
2631
|
return (React.createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2554,9 +2634,9 @@ const TabIndicator = (props) => {
|
|
|
2554
2634
|
} }));
|
|
2555
2635
|
};
|
|
2556
2636
|
|
|
2557
|
-
var css_248z$
|
|
2558
|
-
var styles$
|
|
2559
|
-
styleInject(css_248z$
|
|
2637
|
+
var css_248z$3 = ".Tabs-module_tabs__YyRTZ {\n display: flex;\n position: relative;\n}";
|
|
2638
|
+
var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
2639
|
+
styleInject(css_248z$3);
|
|
2560
2640
|
|
|
2561
2641
|
const Tabs = (props) => {
|
|
2562
2642
|
const { children, className, fixed, color, indicatorColor, onChange, value } = props;
|
|
@@ -2571,7 +2651,7 @@ const Tabs = (props) => {
|
|
|
2571
2651
|
}, [children, value]);
|
|
2572
2652
|
const getCssClasses = () => {
|
|
2573
2653
|
const cssClasses = [];
|
|
2574
|
-
cssClasses.push(styles$
|
|
2654
|
+
cssClasses.push(styles$3.tabs);
|
|
2575
2655
|
className && cssClasses.push(className);
|
|
2576
2656
|
return cssClasses.filter(css => css).join(' ');
|
|
2577
2657
|
};
|
|
@@ -2595,15 +2675,15 @@ const Tabs = (props) => {
|
|
|
2595
2675
|
React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
|
|
2596
2676
|
};
|
|
2597
2677
|
|
|
2598
|
-
var css_248z$
|
|
2599
|
-
var styles$
|
|
2600
|
-
styleInject(css_248z$
|
|
2678
|
+
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}";
|
|
2679
|
+
var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
|
|
2680
|
+
styleInject(css_248z$2);
|
|
2601
2681
|
|
|
2602
2682
|
const Tab = (props) => {
|
|
2603
2683
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2604
2684
|
const getCssClasses = () => {
|
|
2605
2685
|
const cssClasses = [];
|
|
2606
|
-
cssClasses.push(styles$
|
|
2686
|
+
cssClasses.push(styles$2.tab);
|
|
2607
2687
|
if (isActive) {
|
|
2608
2688
|
cssClasses.push(`show active`);
|
|
2609
2689
|
}
|
|
@@ -2618,46 +2698,6 @@ const TabPanel = (props) => {
|
|
|
2618
2698
|
return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2619
2699
|
};
|
|
2620
2700
|
|
|
2621
|
-
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}";
|
|
2622
|
-
var styles$2 = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2623
|
-
styleInject(css_248z$2);
|
|
2624
|
-
|
|
2625
|
-
const Tooltip = (props) => {
|
|
2626
|
-
const { children, text, placement = 'bottom' } = props;
|
|
2627
|
-
const [show, setShow] = useState(false);
|
|
2628
|
-
const refChild = useRef();
|
|
2629
|
-
const refTooltip = useRef();
|
|
2630
|
-
useEffect(() => {
|
|
2631
|
-
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2632
|
-
// TODO - extract to own component?
|
|
2633
|
-
createPopper(refChild.current, refTooltip.current, {
|
|
2634
|
-
placement: placement,
|
|
2635
|
-
modifiers: [
|
|
2636
|
-
{
|
|
2637
|
-
name: 'offset',
|
|
2638
|
-
options: { offset: [0, 8] }
|
|
2639
|
-
},
|
|
2640
|
-
]
|
|
2641
|
-
});
|
|
2642
|
-
}
|
|
2643
|
-
}, [show]);
|
|
2644
|
-
const handleMouseOver = () => {
|
|
2645
|
-
setShow(true);
|
|
2646
|
-
};
|
|
2647
|
-
const handleMouseLeave = () => {
|
|
2648
|
-
setShow(false);
|
|
2649
|
-
};
|
|
2650
|
-
return (React.createElement(React.Fragment, null,
|
|
2651
|
-
React.createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2652
|
-
onMouseOver: handleMouseOver,
|
|
2653
|
-
onMouseLeave: handleMouseLeave,
|
|
2654
|
-
})),
|
|
2655
|
-
show && text &&
|
|
2656
|
-
React.createElement("div", { className: styles$2.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2657
|
-
text,
|
|
2658
|
-
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2659
|
-
};
|
|
2660
|
-
|
|
2661
2701
|
const HourSelect = (props) => {
|
|
2662
2702
|
const { className, value = 0, id, name, disabled, onChange } = props;
|
|
2663
2703
|
const [newValue, setNewValue] = useState(value);
|
|
@@ -2852,4 +2892,4 @@ const TreeItem = (props) => {
|
|
|
2852
2892
|
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2853
2893
|
};
|
|
2854
2894
|
|
|
2855
|
-
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|
|
2895
|
+
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|