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.js
CHANGED
|
@@ -316,6 +316,18 @@ const useOnDestroy = (callBack) => {
|
|
|
316
316
|
}, []);
|
|
317
317
|
};
|
|
318
318
|
|
|
319
|
+
const Portal = ({ children, target = document.body, className }) => {
|
|
320
|
+
const containerEl = React.useMemo(() => document.createElement('div'), []);
|
|
321
|
+
React.useEffect(() => {
|
|
322
|
+
className && className.split(' ').forEach(cssClass => containerEl.classList.add(cssClass));
|
|
323
|
+
target.appendChild(containerEl);
|
|
324
|
+
return () => {
|
|
325
|
+
target.removeChild(containerEl);
|
|
326
|
+
};
|
|
327
|
+
}, []);
|
|
328
|
+
return reactDom.createPortal(children, containerEl);
|
|
329
|
+
};
|
|
330
|
+
|
|
319
331
|
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}";
|
|
320
332
|
var styles$10 = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
321
333
|
styleInject(css_248z$10);
|
|
@@ -333,10 +345,10 @@ const Backdrop = (props) => {
|
|
|
333
345
|
return cssClasses.filter(css => css).join(' ');
|
|
334
346
|
};
|
|
335
347
|
const getStyles = () => {
|
|
336
|
-
|
|
337
|
-
return styles;
|
|
348
|
+
return Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
|
|
338
349
|
};
|
|
339
|
-
return (
|
|
350
|
+
return (React__default["default"].createElement(Portal, { className: 'backdrop-root', target: target },
|
|
351
|
+
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
|
|
340
352
|
};
|
|
341
353
|
|
|
342
354
|
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}";
|
|
@@ -1124,13 +1136,13 @@ const Select = (props) => {
|
|
|
1124
1136
|
React__default["default"].createElement(Icon, { className: "ml-2" },
|
|
1125
1137
|
React__default["default"].createElement(ChevronDownSolidIcon, null))),
|
|
1126
1138
|
isShow &&
|
|
1127
|
-
|
|
1139
|
+
React__default["default"].createElement(Portal, { className: 'backdrop-root' },
|
|
1128
1140
|
React__default["default"].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 } },
|
|
1129
1141
|
React__default["default"].createElement(List, null, options && options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
1130
1142
|
multiple &&
|
|
1131
1143
|
React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
1132
1144
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
1133
|
-
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))
|
|
1145
|
+
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1134
1146
|
};
|
|
1135
1147
|
|
|
1136
1148
|
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}";
|
|
@@ -1227,7 +1239,9 @@ const EmailValidator = (value) => {
|
|
|
1227
1239
|
|
|
1228
1240
|
const IsEqualValidator = (valueA, valueB) => valueA === valueB;
|
|
1229
1241
|
|
|
1230
|
-
const MaxValidator = (valueA, valueB) => valueA
|
|
1242
|
+
const MaxValidator = (valueA, valueB) => valueA <= valueB;
|
|
1243
|
+
|
|
1244
|
+
const MinValidator = (valueA, valueB) => valueA >= valueB;
|
|
1231
1245
|
|
|
1232
1246
|
// values, isSubmitting, handleChange, handleBlur, handleSubmit
|
|
1233
1247
|
class Form extends React.Component {
|
|
@@ -1278,8 +1292,13 @@ class Form extends React.Component {
|
|
|
1278
1292
|
errors.push({ validator: validatorName, message: 'Email format is wrong' });
|
|
1279
1293
|
}
|
|
1280
1294
|
break;
|
|
1295
|
+
case 'min':
|
|
1296
|
+
if (!MinValidator(fieldValue, parseInt(validatorParam))) {
|
|
1297
|
+
errors.push({ validator: validatorName, message: `Number is less than ${validatorParam}` });
|
|
1298
|
+
}
|
|
1299
|
+
break;
|
|
1281
1300
|
case 'max':
|
|
1282
|
-
if (MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1301
|
+
if (!MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1283
1302
|
errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
|
|
1284
1303
|
}
|
|
1285
1304
|
break;
|
|
@@ -1551,9 +1570,9 @@ const Drawer = (props) => {
|
|
|
1551
1570
|
const handleClickBackdrop = () => {
|
|
1552
1571
|
onClickBackdrop && onClickBackdrop();
|
|
1553
1572
|
};
|
|
1554
|
-
return
|
|
1573
|
+
return (React__default["default"].createElement(Portal, { className: 'drawer-root', target: target },
|
|
1555
1574
|
React__default["default"].createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
|
|
1556
|
-
!permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop }))
|
|
1575
|
+
!permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1557
1576
|
};
|
|
1558
1577
|
const DrawerContent = (props) => {
|
|
1559
1578
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
@@ -1617,9 +1636,9 @@ const MenuBody = (props) => {
|
|
|
1617
1636
|
const handleClickBackdrop = () => {
|
|
1618
1637
|
onClickBackdrop && onClickBackdrop();
|
|
1619
1638
|
};
|
|
1620
|
-
return (
|
|
1639
|
+
return (React__default["default"].createElement(Portal, { className: 'menu-root' },
|
|
1621
1640
|
React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() }, children),
|
|
1622
|
-
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop }))
|
|
1641
|
+
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
|
|
1623
1642
|
};
|
|
1624
1643
|
|
|
1625
1644
|
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
@@ -1847,7 +1866,7 @@ var styles$l = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module
|
|
|
1847
1866
|
styleInject(css_248z$l);
|
|
1848
1867
|
|
|
1849
1868
|
const Modal = (props) => {
|
|
1850
|
-
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1869
|
+
const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1851
1870
|
const getCssClass = () => {
|
|
1852
1871
|
const cssClasses = [];
|
|
1853
1872
|
cssClasses.push(styles$l.modalDialog);
|
|
@@ -1864,17 +1883,19 @@ const Modal = (props) => {
|
|
|
1864
1883
|
};
|
|
1865
1884
|
}, []);
|
|
1866
1885
|
const handleClickBackdrop = () => {
|
|
1886
|
+
console.warn('backdrop clicked');
|
|
1867
1887
|
onBackdropClick && onBackdropClick();
|
|
1868
1888
|
};
|
|
1869
1889
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1870
|
-
React__default["default"].createElement(
|
|
1871
|
-
React__default["default"].createElement("div", { className:
|
|
1872
|
-
React__default["default"].createElement("div", { className:
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1890
|
+
React__default["default"].createElement(Portal, { className: 'modal-root', target: target },
|
|
1891
|
+
React__default["default"].createElement("div", { className: styles$l.modal },
|
|
1892
|
+
React__default["default"].createElement("div", { className: getCssClass() },
|
|
1893
|
+
React__default["default"].createElement("div", { className: styles$l.modalContent },
|
|
1894
|
+
header &&
|
|
1895
|
+
React__default["default"].createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1896
|
+
React__default["default"].createElement(ModalBody, null, children),
|
|
1897
|
+
footer &&
|
|
1898
|
+
React__default["default"].createElement(ModalFooter, null, footer))))),
|
|
1878
1899
|
React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1879
1900
|
};
|
|
1880
1901
|
|
|
@@ -1994,29 +2015,88 @@ const NumberSelect = (props) => {
|
|
|
1994
2015
|
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
2016
|
};
|
|
1996
2017
|
|
|
1997
|
-
var css_248z$k = ".
|
|
1998
|
-
var styles$k = {"
|
|
2018
|
+
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}";
|
|
2019
|
+
var styles$k = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
1999
2020
|
styleInject(css_248z$k);
|
|
2000
2021
|
|
|
2022
|
+
const Tooltip = (props) => {
|
|
2023
|
+
const { children, text, placement = 'bottom' } = props;
|
|
2024
|
+
const [show, setShow] = React.useState(false);
|
|
2025
|
+
const refChild = React.useRef();
|
|
2026
|
+
const refTooltip = React.useRef();
|
|
2027
|
+
React.useEffect(() => {
|
|
2028
|
+
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2029
|
+
// TODO - extract to own component?
|
|
2030
|
+
core.createPopper(refChild.current, refTooltip.current, {
|
|
2031
|
+
placement: placement,
|
|
2032
|
+
modifiers: [
|
|
2033
|
+
{
|
|
2034
|
+
name: 'offset',
|
|
2035
|
+
options: { offset: [0, 8] }
|
|
2036
|
+
},
|
|
2037
|
+
]
|
|
2038
|
+
});
|
|
2039
|
+
}
|
|
2040
|
+
}, [show]);
|
|
2041
|
+
const handleMouseOver = () => {
|
|
2042
|
+
setShow(true);
|
|
2043
|
+
};
|
|
2044
|
+
const handleMouseLeave = () => {
|
|
2045
|
+
setShow(false);
|
|
2046
|
+
};
|
|
2047
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2048
|
+
React__default["default"].createElement("div", { className: styles$k.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
|
|
2049
|
+
onMouseOver: handleMouseOver,
|
|
2050
|
+
onMouseLeave: handleMouseLeave,
|
|
2051
|
+
})),
|
|
2052
|
+
show && text &&
|
|
2053
|
+
React__default["default"].createElement("div", { className: styles$k.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2054
|
+
text,
|
|
2055
|
+
React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2056
|
+
};
|
|
2057
|
+
|
|
2058
|
+
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}";
|
|
2059
|
+
var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2060
|
+
styleInject(css_248z$j);
|
|
2061
|
+
|
|
2001
2062
|
const ProgressBar = (props) => {
|
|
2002
2063
|
const { className, color = exports.COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
2064
|
+
const [model, setModel] = React.useState();
|
|
2065
|
+
React.useEffect(() => {
|
|
2066
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2067
|
+
}, [color]);
|
|
2068
|
+
React.useEffect(() => {
|
|
2069
|
+
let newValue = value;
|
|
2070
|
+
if (value && value < 0) {
|
|
2071
|
+
newValue = 0;
|
|
2072
|
+
}
|
|
2073
|
+
if (value && value > 100) {
|
|
2074
|
+
newValue = 100;
|
|
2075
|
+
}
|
|
2076
|
+
setModel(newValue);
|
|
2077
|
+
}, [value]);
|
|
2003
2078
|
const getCssClasses = () => {
|
|
2004
2079
|
const cssClasses = [];
|
|
2005
|
-
cssClasses.push(styles$
|
|
2080
|
+
cssClasses.push(styles$j.progressBarContainer);
|
|
2006
2081
|
className && cssClasses.push(className);
|
|
2007
2082
|
return cssClasses.filter(r => r).join(' ');
|
|
2008
2083
|
};
|
|
2009
2084
|
const getCssClassesBar = () => {
|
|
2010
2085
|
const cssClasses = [];
|
|
2011
|
-
cssClasses.push(styles$
|
|
2012
|
-
indeterminate && cssClasses.push(styles$
|
|
2086
|
+
cssClasses.push(styles$j.progressBar);
|
|
2087
|
+
indeterminate && cssClasses.push(styles$j['indeterminate']);
|
|
2013
2088
|
return cssClasses.filter(r => r).join(' ');
|
|
2014
2089
|
};
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2090
|
+
const getStyle = () => {
|
|
2091
|
+
let width = model && model >= 0 ? model : 0;
|
|
2092
|
+
if (indeterminate) {
|
|
2093
|
+
width = 100;
|
|
2094
|
+
}
|
|
2095
|
+
return `${width}%`;
|
|
2096
|
+
};
|
|
2097
|
+
return (React__default["default"].createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2098
|
+
React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2099
|
+
React__default["default"].createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2020
2100
|
};
|
|
2021
2101
|
|
|
2022
2102
|
class SidebarItemModel {
|
|
@@ -2096,25 +2176,25 @@ const Sidebar = (props) => {
|
|
|
2096
2176
|
!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
2177
|
};
|
|
2098
2178
|
|
|
2099
|
-
var css_248z$
|
|
2100
|
-
var styles$
|
|
2101
|
-
styleInject(css_248z$
|
|
2179
|
+
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}";
|
|
2180
|
+
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"};
|
|
2181
|
+
styleInject(css_248z$i);
|
|
2102
2182
|
|
|
2103
2183
|
const Snackbar = (props) => {
|
|
2104
2184
|
const { children, color = exports.COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
2105
2185
|
const getCssClasses = () => {
|
|
2106
2186
|
const cssClasses = [];
|
|
2107
|
-
cssClasses.push(styles$
|
|
2187
|
+
cssClasses.push(styles$i.snackbar);
|
|
2108
2188
|
cssClasses.push(`shadow-lg`);
|
|
2109
|
-
cssClasses.push(styles$
|
|
2189
|
+
cssClasses.push(styles$i[color]);
|
|
2110
2190
|
return cssClasses.filter(css => css).join(' ');
|
|
2111
2191
|
};
|
|
2112
2192
|
const handleClickAction = (e) => {
|
|
2113
2193
|
onOk && onOk(e);
|
|
2114
2194
|
};
|
|
2115
2195
|
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$
|
|
2196
|
+
React__default["default"].createElement("div", { className: styles$i.text }, children),
|
|
2197
|
+
React__default["default"].createElement("div", { className: styles$i.action + ' text-accent', onClick: handleClickAction },
|
|
2118
2198
|
React__default["default"].createElement("span", null, actionText))));
|
|
2119
2199
|
};
|
|
2120
2200
|
|
|
@@ -2152,29 +2232,29 @@ class SnackbarService {
|
|
|
2152
2232
|
}
|
|
2153
2233
|
const snackbarService = new SnackbarService();
|
|
2154
2234
|
|
|
2155
|
-
var css_248z$
|
|
2156
|
-
var styles$
|
|
2157
|
-
styleInject(css_248z$
|
|
2235
|
+
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}";
|
|
2236
|
+
var styles$h = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2237
|
+
styleInject(css_248z$h);
|
|
2158
2238
|
|
|
2159
2239
|
const SpeedDialActions = (props) => {
|
|
2160
2240
|
const { children } = props;
|
|
2161
2241
|
const getCssClasses = () => {
|
|
2162
2242
|
const cssClasses = [];
|
|
2163
|
-
cssClasses.push(styles$
|
|
2243
|
+
cssClasses.push(styles$h.speedDialActions);
|
|
2164
2244
|
return cssClasses.filter(css => css).join(' ');
|
|
2165
2245
|
};
|
|
2166
2246
|
return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
|
|
2167
2247
|
};
|
|
2168
2248
|
|
|
2169
|
-
var css_248z$
|
|
2170
|
-
var styles$
|
|
2171
|
-
styleInject(css_248z$
|
|
2249
|
+
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}";
|
|
2250
|
+
var styles$g = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2251
|
+
styleInject(css_248z$g);
|
|
2172
2252
|
|
|
2173
2253
|
const SpeedDial = (props) => {
|
|
2174
2254
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
2175
2255
|
const getCssClasses = () => {
|
|
2176
2256
|
const cssClasses = [];
|
|
2177
|
-
cssClasses.push(styles$
|
|
2257
|
+
cssClasses.push(styles$g.speedDial);
|
|
2178
2258
|
className && cssClasses.push(className);
|
|
2179
2259
|
return cssClasses.filter(css => css).join(' ');
|
|
2180
2260
|
};
|
|
@@ -2191,15 +2271,15 @@ const SpeedDial = (props) => {
|
|
|
2191
2271
|
React__default["default"].createElement(SpeedDialActions, null, children)));
|
|
2192
2272
|
};
|
|
2193
2273
|
|
|
2194
|
-
var css_248z$
|
|
2195
|
-
var styles$
|
|
2196
|
-
styleInject(css_248z$
|
|
2274
|
+
var css_248z$f = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2275
|
+
var styles$f = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2276
|
+
styleInject(css_248z$f);
|
|
2197
2277
|
|
|
2198
2278
|
const SpeedDialAction = (props) => {
|
|
2199
2279
|
const { icon, color = exports.COLOR.light, onClick, className } = props;
|
|
2200
2280
|
const getCssClasses = () => {
|
|
2201
2281
|
const cssClasses = [];
|
|
2202
|
-
cssClasses.push(styles$
|
|
2282
|
+
cssClasses.push(styles$f.speedDialAction);
|
|
2203
2283
|
className && cssClasses.push(className);
|
|
2204
2284
|
return cssClasses.filter(css => css).join(' ');
|
|
2205
2285
|
};
|
|
@@ -2216,15 +2296,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2216
2296
|
return (React__default["default"].createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2217
2297
|
};
|
|
2218
2298
|
|
|
2219
|
-
var css_248z$
|
|
2220
|
-
var styles$
|
|
2221
|
-
styleInject(css_248z$
|
|
2299
|
+
var css_248z$e = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2300
|
+
var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2301
|
+
styleInject(css_248z$e);
|
|
2222
2302
|
|
|
2223
2303
|
const StepperActions = (props) => {
|
|
2224
2304
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2225
2305
|
const getCssClasses = () => {
|
|
2226
2306
|
const cssClasses = [];
|
|
2227
|
-
cssClasses.push(styles$
|
|
2307
|
+
cssClasses.push(styles$e.stepperActions);
|
|
2228
2308
|
className && cssClasses.push(className);
|
|
2229
2309
|
return cssClasses.filter(css => css).join(' ');
|
|
2230
2310
|
};
|
|
@@ -2241,31 +2321,31 @@ const StepPanel = (props) => {
|
|
|
2241
2321
|
return (React__default["default"].createElement("div", { className: "steppanel" }, children));
|
|
2242
2322
|
};
|
|
2243
2323
|
|
|
2244
|
-
var css_248z$
|
|
2245
|
-
var styles$
|
|
2246
|
-
styleInject(css_248z$
|
|
2324
|
+
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}";
|
|
2325
|
+
var styles$d = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2326
|
+
styleInject(css_248z$d);
|
|
2247
2327
|
|
|
2248
2328
|
const StepConnector = (props) => {
|
|
2249
2329
|
const { isActive, isHorizontal = true } = props;
|
|
2250
2330
|
const getCssClassesConnector = () => {
|
|
2251
2331
|
const cssClasses = [];
|
|
2252
|
-
cssClasses.push(styles$
|
|
2332
|
+
cssClasses.push(styles$d.stepConnector);
|
|
2253
2333
|
return cssClasses.filter(css => css).join(' ');
|
|
2254
2334
|
};
|
|
2255
2335
|
const getCssClassesLine = () => {
|
|
2256
2336
|
const cssClasses = [];
|
|
2257
|
-
cssClasses.push(styles$
|
|
2258
|
-
isActive && cssClasses.push(styles$
|
|
2259
|
-
isHorizontal && cssClasses.push(styles$
|
|
2337
|
+
cssClasses.push(styles$d.stepConnectorLine);
|
|
2338
|
+
isActive && cssClasses.push(styles$d['isActive']);
|
|
2339
|
+
isHorizontal && cssClasses.push(styles$d.stepConnectorLineHorizontal);
|
|
2260
2340
|
return cssClasses.filter(css => css).join(' ');
|
|
2261
2341
|
};
|
|
2262
2342
|
return (React__default["default"].createElement("div", { className: getCssClassesConnector() },
|
|
2263
2343
|
React__default["default"].createElement("div", { className: getCssClassesLine() })));
|
|
2264
2344
|
};
|
|
2265
2345
|
|
|
2266
|
-
var css_248z$
|
|
2267
|
-
var styles$
|
|
2268
|
-
styleInject(css_248z$
|
|
2346
|
+
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}";
|
|
2347
|
+
var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2348
|
+
styleInject(css_248z$c);
|
|
2269
2349
|
|
|
2270
2350
|
const Stepper = (props) => {
|
|
2271
2351
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2353,8 +2433,8 @@ const Stepper = (props) => {
|
|
|
2353
2433
|
};
|
|
2354
2434
|
const getCssClasses = () => {
|
|
2355
2435
|
const cssClasses = [];
|
|
2356
|
-
cssClasses.push(styles$
|
|
2357
|
-
isHorizontal && cssClasses.push(styles$
|
|
2436
|
+
cssClasses.push(styles$c.stepper);
|
|
2437
|
+
isHorizontal && cssClasses.push(styles$c['isHorizontal']);
|
|
2358
2438
|
return cssClasses.filter(css => css).join(' ');
|
|
2359
2439
|
};
|
|
2360
2440
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, steps &&
|
|
@@ -2367,17 +2447,17 @@ const Stepper = (props) => {
|
|
|
2367
2447
|
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
2448
|
};
|
|
2369
2449
|
|
|
2370
|
-
var css_248z$
|
|
2371
|
-
var styles$
|
|
2372
|
-
styleInject(css_248z$
|
|
2450
|
+
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}";
|
|
2451
|
+
var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
|
|
2452
|
+
styleInject(css_248z$b);
|
|
2373
2453
|
|
|
2374
2454
|
const Wrapper = (props) => {
|
|
2375
2455
|
const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
|
|
2376
2456
|
const getCssClasses = () => {
|
|
2377
2457
|
const cssClasses = [];
|
|
2378
|
-
cssClasses.push(styles$
|
|
2379
|
-
cssClasses.push(styles$
|
|
2380
|
-
wrap && cssClasses.push(styles$
|
|
2458
|
+
cssClasses.push(styles$b.typography);
|
|
2459
|
+
cssClasses.push(styles$b.as);
|
|
2460
|
+
wrap && cssClasses.push(styles$b.wrap);
|
|
2381
2461
|
className && cssClasses.push(className);
|
|
2382
2462
|
return cssClasses.filter(css => css).join(' ');
|
|
2383
2463
|
};
|
|
@@ -2388,9 +2468,9 @@ const Typography = (_a) => {
|
|
|
2388
2468
|
return (React__default["default"].createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2389
2469
|
};
|
|
2390
2470
|
|
|
2391
|
-
var css_248z$
|
|
2392
|
-
var styles$
|
|
2393
|
-
styleInject(css_248z$
|
|
2471
|
+
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}";
|
|
2472
|
+
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"};
|
|
2473
|
+
styleInject(css_248z$a);
|
|
2394
2474
|
|
|
2395
2475
|
const Step = (props) => {
|
|
2396
2476
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2402,29 +2482,29 @@ const Step = (props) => {
|
|
|
2402
2482
|
};
|
|
2403
2483
|
const getCssClasses = () => {
|
|
2404
2484
|
const cssClasses = [];
|
|
2405
|
-
cssClasses.push(styles$
|
|
2406
|
-
label && showLabel && cssClasses.push(styles$
|
|
2407
|
-
isDisabled && cssClasses.push(styles$
|
|
2485
|
+
cssClasses.push(styles$a.stepWrapper);
|
|
2486
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2487
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2408
2488
|
className && cssClasses.push(className);
|
|
2409
2489
|
return cssClasses.filter(css => css).join(' ');
|
|
2410
2490
|
};
|
|
2411
2491
|
const getCssClassesStep = () => {
|
|
2412
2492
|
const cssClasses = [];
|
|
2413
|
-
cssClasses.push(styles$
|
|
2414
|
-
label && showLabel && cssClasses.push(styles$
|
|
2415
|
-
isDisabled && cssClasses.push(styles$
|
|
2493
|
+
cssClasses.push(styles$a.step);
|
|
2494
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2495
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2416
2496
|
return cssClasses.filter(css => css).join(' ');
|
|
2417
2497
|
};
|
|
2418
2498
|
const getCssClassesStepValue = () => {
|
|
2419
2499
|
const cssClasses = [];
|
|
2420
|
-
cssClasses.push(styles$
|
|
2500
|
+
cssClasses.push(styles$a.stepValue);
|
|
2421
2501
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2422
|
-
isActive && cssClasses.push(styles$
|
|
2502
|
+
isActive && cssClasses.push(styles$a.stepValue['isActive']);
|
|
2423
2503
|
return cssClasses.filter(css => css).join(' ');
|
|
2424
2504
|
};
|
|
2425
2505
|
return (React__default["default"].createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2426
2506
|
React__default["default"].createElement("div", { className: getCssClassesStep() },
|
|
2427
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
2507
|
+
React__default["default"].createElement(Icon, { className: styles$a.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? exports.COLOR.primary : exports.COLOR.secondary },
|
|
2428
2508
|
React__default["default"].createElement(CircleSolidIcon, null)),
|
|
2429
2509
|
React__default["default"].createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2430
2510
|
React__default["default"].createElement(Icon, null,
|
|
@@ -2435,83 +2515,83 @@ const Step = (props) => {
|
|
|
2435
2515
|
React__default["default"].createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2436
2516
|
};
|
|
2437
2517
|
|
|
2438
|
-
var css_248z$
|
|
2439
|
-
var styles$
|
|
2440
|
-
styleInject(css_248z$
|
|
2518
|
+
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}";
|
|
2519
|
+
var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","skeleton-loading":"SkeletonAvatar-module_skeleton-loading__eM-ZU"};
|
|
2520
|
+
styleInject(css_248z$9);
|
|
2441
2521
|
|
|
2442
2522
|
const SkeletonAvatar = (props) => {
|
|
2443
2523
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2444
2524
|
const getCssClasses = () => {
|
|
2445
2525
|
const cssClasses = [];
|
|
2446
|
-
cssClasses.push(styles$
|
|
2526
|
+
cssClasses.push(styles$9.skeletonAvatar);
|
|
2447
2527
|
className && cssClasses.push(className);
|
|
2448
2528
|
return cssClasses.filter(r => r).join(' ');
|
|
2449
2529
|
};
|
|
2450
2530
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2451
2531
|
};
|
|
2452
2532
|
|
|
2453
|
-
var css_248z$
|
|
2454
|
-
var styles$
|
|
2455
|
-
styleInject(css_248z$
|
|
2533
|
+
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}";
|
|
2534
|
+
var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skeleton-loading":"SkeletonText-module_skeleton-loading__EYFfJ"};
|
|
2535
|
+
styleInject(css_248z$8);
|
|
2456
2536
|
|
|
2457
2537
|
const SkeletonText = (props) => {
|
|
2458
2538
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2459
2539
|
const getCssClasses = () => {
|
|
2460
2540
|
const cssClasses = [];
|
|
2461
|
-
cssClasses.push(styles$
|
|
2541
|
+
cssClasses.push(styles$8.skeletonText);
|
|
2462
2542
|
className && cssClasses.push(className);
|
|
2463
2543
|
return cssClasses.filter(r => r).join(' ');
|
|
2464
2544
|
};
|
|
2465
2545
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2466
2546
|
};
|
|
2467
2547
|
|
|
2468
|
-
var css_248z$
|
|
2469
|
-
var styles$
|
|
2470
|
-
styleInject(css_248z$
|
|
2548
|
+
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}";
|
|
2549
|
+
var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","skeleton-loading":"SkeletonFooter-module_skeleton-loading__OEErv"};
|
|
2550
|
+
styleInject(css_248z$7);
|
|
2471
2551
|
|
|
2472
2552
|
const SkeletonFooter = (props) => {
|
|
2473
2553
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2474
2554
|
const getCssClasses = () => {
|
|
2475
2555
|
const cssClasses = [];
|
|
2476
|
-
cssClasses.push(styles$
|
|
2556
|
+
cssClasses.push(styles$7.skeletonFooter);
|
|
2477
2557
|
className && cssClasses.push(className);
|
|
2478
2558
|
return cssClasses.filter(r => r).join(' ');
|
|
2479
2559
|
};
|
|
2480
2560
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2481
2561
|
};
|
|
2482
2562
|
|
|
2483
|
-
var css_248z$
|
|
2484
|
-
var styles$
|
|
2485
|
-
styleInject(css_248z$
|
|
2563
|
+
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}";
|
|
2564
|
+
var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","skeleton-loading":"SkeletonImage-module_skeleton-loading__04lJ7","div":"SkeletonImage-module_div__tqqrB"};
|
|
2565
|
+
styleInject(css_248z$6);
|
|
2486
2566
|
|
|
2487
2567
|
const SkeletonImage = (props) => {
|
|
2488
2568
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
2489
2569
|
const getCssClasses = () => {
|
|
2490
2570
|
const cssClasses = [];
|
|
2491
|
-
cssClasses.push(styles$
|
|
2571
|
+
cssClasses.push(styles$6.skeletonImage);
|
|
2492
2572
|
className && cssClasses.push(className);
|
|
2493
2573
|
return cssClasses.filter(r => r).join(' ');
|
|
2494
2574
|
};
|
|
2495
2575
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2496
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2576
|
+
React__default["default"].createElement("div", { className: styles$6.img })));
|
|
2497
2577
|
};
|
|
2498
2578
|
|
|
2499
|
-
var css_248z$
|
|
2500
|
-
var styles$
|
|
2501
|
-
styleInject(css_248z$
|
|
2579
|
+
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}";
|
|
2580
|
+
var styles$5 = {"tableResponsive":"Table-module_tableResponsive__ykttB","table":"Table-module_table__DHKNv","hover":"Table-module_hover__P6r3y"};
|
|
2581
|
+
styleInject(css_248z$5);
|
|
2502
2582
|
|
|
2503
2583
|
const Table = (props) => {
|
|
2504
2584
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2505
2585
|
const getCssClasses = () => {
|
|
2506
2586
|
const cssClasses = [];
|
|
2507
|
-
cssClasses.push(styles$
|
|
2508
|
-
bordered && cssClasses.push(styles$
|
|
2509
|
-
striped && cssClasses.push(styles$
|
|
2510
|
-
hover && cssClasses.push(styles$
|
|
2587
|
+
cssClasses.push(styles$5.table);
|
|
2588
|
+
bordered && cssClasses.push(styles$5['bordered']);
|
|
2589
|
+
striped && cssClasses.push(styles$5['striped']);
|
|
2590
|
+
hover && cssClasses.push(styles$5['hover']);
|
|
2511
2591
|
className && cssClasses.push(className);
|
|
2512
2592
|
return cssClasses.filter(css => css).join(' ');
|
|
2513
2593
|
};
|
|
2514
|
-
return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React__default["default"].createElement("div", { className: styles$
|
|
2594
|
+
return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React__default["default"].createElement("div", { className: styles$5.tableResponsive }, children) },
|
|
2515
2595
|
React__default["default"].createElement("table", { className: getCssClasses() }, children)));
|
|
2516
2596
|
};
|
|
2517
2597
|
|
|
@@ -2544,16 +2624,16 @@ const TableCell = (props) => {
|
|
|
2544
2624
|
React__default["default"].createElement("td", Object.assign({}, rest), children)) }, children));
|
|
2545
2625
|
};
|
|
2546
2626
|
|
|
2547
|
-
var css_248z$
|
|
2548
|
-
var styles$
|
|
2549
|
-
styleInject(css_248z$
|
|
2627
|
+
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}";
|
|
2628
|
+
var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
|
|
2629
|
+
styleInject(css_248z$4);
|
|
2550
2630
|
|
|
2551
2631
|
const TabIndicator = (props) => {
|
|
2552
2632
|
const { color = exports.COLOR.primary, width, amount, index } = props;
|
|
2553
2633
|
const getCssClasses = () => {
|
|
2554
2634
|
const cssClasses = [];
|
|
2555
|
-
cssClasses.push(styles$
|
|
2556
|
-
cssClasses.push(styles$
|
|
2635
|
+
cssClasses.push(styles$4.tabIndicator);
|
|
2636
|
+
cssClasses.push(styles$4[color]);
|
|
2557
2637
|
return cssClasses.filter(css => css).join(' ');
|
|
2558
2638
|
};
|
|
2559
2639
|
return (React__default["default"].createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2562,9 +2642,9 @@ const TabIndicator = (props) => {
|
|
|
2562
2642
|
} }));
|
|
2563
2643
|
};
|
|
2564
2644
|
|
|
2565
|
-
var css_248z$
|
|
2566
|
-
var styles$
|
|
2567
|
-
styleInject(css_248z$
|
|
2645
|
+
var css_248z$3 = ".Tabs-module_tabs__YyRTZ {\n display: flex;\n position: relative;\n}";
|
|
2646
|
+
var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
2647
|
+
styleInject(css_248z$3);
|
|
2568
2648
|
|
|
2569
2649
|
const Tabs = (props) => {
|
|
2570
2650
|
const { children, className, fixed, color, indicatorColor, onChange, value } = props;
|
|
@@ -2579,7 +2659,7 @@ const Tabs = (props) => {
|
|
|
2579
2659
|
}, [children, value]);
|
|
2580
2660
|
const getCssClasses = () => {
|
|
2581
2661
|
const cssClasses = [];
|
|
2582
|
-
cssClasses.push(styles$
|
|
2662
|
+
cssClasses.push(styles$3.tabs);
|
|
2583
2663
|
className && cssClasses.push(className);
|
|
2584
2664
|
return cssClasses.filter(css => css).join(' ');
|
|
2585
2665
|
};
|
|
@@ -2603,15 +2683,15 @@ const Tabs = (props) => {
|
|
|
2603
2683
|
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
2684
|
};
|
|
2605
2685
|
|
|
2606
|
-
var css_248z$
|
|
2607
|
-
var styles$
|
|
2608
|
-
styleInject(css_248z$
|
|
2686
|
+
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}";
|
|
2687
|
+
var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
|
|
2688
|
+
styleInject(css_248z$2);
|
|
2609
2689
|
|
|
2610
2690
|
const Tab = (props) => {
|
|
2611
2691
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2612
2692
|
const getCssClasses = () => {
|
|
2613
2693
|
const cssClasses = [];
|
|
2614
|
-
cssClasses.push(styles$
|
|
2694
|
+
cssClasses.push(styles$2.tab);
|
|
2615
2695
|
if (isActive) {
|
|
2616
2696
|
cssClasses.push(`show active`);
|
|
2617
2697
|
}
|
|
@@ -2626,46 +2706,6 @@ const TabPanel = (props) => {
|
|
|
2626
2706
|
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
2707
|
};
|
|
2628
2708
|
|
|
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
2709
|
const HourSelect = (props) => {
|
|
2670
2710
|
const { className, value = 0, id, name, disabled, onChange } = props;
|
|
2671
2711
|
const [newValue, setNewValue] = React.useState(value);
|
|
@@ -2930,6 +2970,7 @@ exports.MenuDivider = MenuDivider;
|
|
|
2930
2970
|
exports.MenuItem = MenuItem;
|
|
2931
2971
|
exports.MenuToggle = MenuToggle;
|
|
2932
2972
|
exports.MilliSecondSelect = MilliSecondSelect;
|
|
2973
|
+
exports.MinValidator = MinValidator;
|
|
2933
2974
|
exports.MinuteSelect = MinuteSelect;
|
|
2934
2975
|
exports.Modal = Modal;
|
|
2935
2976
|
exports.ModalBody = ModalBody;
|