react-asc 23.5.2 → 23.7.0
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/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/Portal/Portal.d.ts +7 -0
- package/components/Portal/index.d.ts +1 -0
- package/components/Skeleton/SkeletonAvatar.d.ts +5 -0
- package/components/Skeleton/SkeletonFooter.d.ts +5 -0
- package/components/Skeleton/SkeletonImage.d.ts +5 -0
- package/components/Skeleton/SkeletonText.d.ts +5 -0
- package/components/Skeleton/index.d.ts +4 -0
- package/components/index.d.ts +1 -0
- package/index.es.js +491 -392
- package/index.js +494 -390
- package/package.json +1 -1
- package/react-asc.scss +4 -2
- package/readme.md +2 -0
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, createContext, useContext, Fragment, Component, createRef, useMemo, cloneElement } from 'react';
|
|
2
2
|
import { createPortal, render, unmountComponentAtNode } from 'react-dom';
|
|
3
3
|
import { createPopper } from '@popperjs/core';
|
|
4
4
|
|
|
@@ -87,93 +87,93 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
var styles$
|
|
92
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$15 = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\n.Alert-module_alert__b4tbk.Alert-module_shadow__5bz-7 {\n box-shadow: var(--shadow);\n}\n\n.Alert-module_contained__EM0x6.Alert-module_primary__q4pNj {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Alert-module_contained__EM0x6.Alert-module_accent__a2WIl {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Alert-module_contained__EM0x6.Alert-module_secondary__syXKX {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Alert-module_contained__EM0x6.Alert-module_light__VKCXF {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Alert-module_contained__EM0x6.Alert-module_dark__3c-Hm {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Alert-module_outline__T2262.Alert-module_primary__q4pNj {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important;\n}\n.Alert-module_outline__T2262.Alert-module_secondary__syXKX {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important;\n}\n.Alert-module_outline__T2262.Alert-module_accent__a2WIl {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important;\n}\n.Alert-module_outline__T2262.Alert-module_light__VKCXF {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important;\n}\n.Alert-module_outline__T2262.Alert-module_dark__3c-Hm {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important;\n}";
|
|
91
|
+
var styles$15 = {"alert":"Alert-module_alert__b4tbk","shadow":"Alert-module_shadow__5bz-7","contained":"Alert-module_contained__EM0x6","primary":"Alert-module_primary__q4pNj","accent":"Alert-module_accent__a2WIl","secondary":"Alert-module_secondary__syXKX","light":"Alert-module_light__VKCXF","dark":"Alert-module_dark__3c-Hm","outline":"Alert-module_outline__T2262"};
|
|
92
|
+
styleInject(css_248z$15);
|
|
93
93
|
|
|
94
94
|
const Alert = (props) => {
|
|
95
95
|
const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
96
96
|
const getCssClasses = () => {
|
|
97
97
|
const cssClasses = [];
|
|
98
|
-
cssClasses.push(styles$
|
|
98
|
+
cssClasses.push(styles$15.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$15.contained);
|
|
101
|
+
cssClasses.push(styles$15[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$15.outline);
|
|
105
|
+
cssClasses.push(styles$15[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$15['shadow']);
|
|
108
108
|
className && cssClasses.push(className);
|
|
109
109
|
return cssClasses.filter(r => r).join(' ');
|
|
110
110
|
};
|
|
111
111
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
112
112
|
};
|
|
113
113
|
|
|
114
|
-
var css_248z$
|
|
115
|
-
var styles$
|
|
116
|
-
styleInject(css_248z$
|
|
114
|
+
var css_248z$14 = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem var(--1);\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: var(--shadow);\n}";
|
|
115
|
+
var styles$14 = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module_primary__xMqXD","secondary":"AppBar-module_secondary__8MkLA","accent":"AppBar-module_accent__vHbkp","light":"AppBar-module_light__HGy3y","dark":"AppBar-module_dark__ILq96","shadow":"AppBar-module_shadow__gQN8s"};
|
|
116
|
+
styleInject(css_248z$14);
|
|
117
117
|
|
|
118
118
|
const AppBar = (props) => {
|
|
119
119
|
const { children, className, color = COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
120
120
|
const getCssClasses = () => {
|
|
121
121
|
const cssClasses = [];
|
|
122
|
-
cssClasses.push(styles$
|
|
123
|
-
cssClasses.push(styles$
|
|
124
|
-
shadow && cssClasses.push(styles$
|
|
122
|
+
cssClasses.push(styles$14[color]);
|
|
123
|
+
cssClasses.push(styles$14.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$14['shadow']);
|
|
125
125
|
className && cssClasses.push(className);
|
|
126
126
|
return cssClasses.filter(r => r).join(' ');
|
|
127
127
|
};
|
|
128
128
|
return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
129
129
|
};
|
|
130
130
|
|
|
131
|
-
var css_248z
|
|
132
|
-
var styles
|
|
133
|
-
styleInject(css_248z
|
|
131
|
+
var css_248z$13 = ".AppBarTitle-module_appbarTitle__RsFg5 {\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n font-size: 1.25rem;\n line-height: 1.8;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden !important;\n display: inline-block;\n}\n.AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer;\n}";
|
|
132
|
+
var styles$13 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$13);
|
|
134
134
|
|
|
135
135
|
const AppBarTitle = (props) => {
|
|
136
136
|
const { children, className, onClick } = props;
|
|
137
137
|
const getCssClass = () => {
|
|
138
138
|
const cssClasses = [];
|
|
139
|
-
cssClasses.push(styles
|
|
139
|
+
cssClasses.push(styles$13.appbarTitle);
|
|
140
140
|
className && cssClasses.push(className);
|
|
141
141
|
return cssClasses.filter(r => r).join(' ');
|
|
142
142
|
};
|
|
143
143
|
return (React.createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
144
144
|
};
|
|
145
145
|
|
|
146
|
-
var css_248z$
|
|
147
|
-
var styles$
|
|
148
|
-
styleInject(css_248z$
|
|
146
|
+
var css_248z$12 = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary);\n}\n.Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent);\n}\n.Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary);\n}\n.Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light);\n}\n.Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark);\n}";
|
|
147
|
+
var styles$12 = {"icon":"Icon-module_icon__lFKCA","primary":"Icon-module_primary__3fID-","accent":"Icon-module_accent__aZXGb","secondary":"Icon-module_secondary__HKKop","light":"Icon-module_light__-ApMm","dark":"Icon-module_dark__DpCIK"};
|
|
148
|
+
styleInject(css_248z$12);
|
|
149
149
|
|
|
150
150
|
const Icon = (props) => {
|
|
151
151
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
152
152
|
const getCssClasses = () => {
|
|
153
153
|
const cssClasses = [];
|
|
154
|
-
cssClasses.push(styles$
|
|
155
|
-
iconColor && cssClasses.push(styles$
|
|
154
|
+
cssClasses.push(styles$12.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$12[iconColor]);
|
|
156
156
|
className && cssClasses.push(className);
|
|
157
157
|
return cssClasses.filter(css => css).join(' ');
|
|
158
158
|
};
|
|
159
159
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
160
160
|
};
|
|
161
161
|
|
|
162
|
-
var css_248z$
|
|
163
|
-
var styles$
|
|
164
|
-
styleInject(css_248z$
|
|
162
|
+
var css_248z$11 = ".IconButton-module_iconButton__rpCPQ {\n border-radius: 100%;\n padding: 0px;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n min-width: auto;\n box-shadow: none;\n font-weight: 400;\n text-align: center;\n vertical-align: middle;\n -webkit-user-select: none;\n user-select: none;\n background-color: transparent;\n font-size: 1rem;\n line-height: 1.5;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: none;\n}\n.IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n color: var(--dark-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n background-color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n background-color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n background-color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n background-color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n background-color: var(--dark-light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ:focus:not(.IconButton-module_iconButton__rpCPQ.IconButton-module_disabled__QB0ZV) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}";
|
|
163
|
+
var styles$11 = {"iconButton":"IconButton-module_iconButton__rpCPQ","shadow":"IconButton-module_shadow__Uw0RK","md":"IconButton-module_md__XnuSk","lg":"IconButton-module_lg__arEvo","text":"IconButton-module_text__Ualag","active":"IconButton-module_active__VIqU9","primary":"IconButton-module_primary__vbo-G","secondary":"IconButton-module_secondary__AiNAY","accent":"IconButton-module_accent__QRzM2","light":"IconButton-module_light__YNEiO","dark":"IconButton-module_dark__gnbUH","disabled":"IconButton-module_disabled__QB0ZV","contained":"IconButton-module_contained__k7vGA"};
|
|
164
|
+
styleInject(css_248z$11);
|
|
165
165
|
|
|
166
166
|
const IconButton = (props) => {
|
|
167
167
|
const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
168
168
|
const getCssClasses = () => {
|
|
169
169
|
const cssClasses = [];
|
|
170
|
-
cssClasses.push(styles$
|
|
171
|
-
cssClasses.push(styles$
|
|
172
|
-
cssClasses.push(styles$
|
|
173
|
-
cssClasses.push(styles$
|
|
174
|
-
isActive && cssClasses.push(styles$
|
|
175
|
-
disabled && cssClasses.push(styles$
|
|
176
|
-
shadow && cssClasses.push(styles$
|
|
170
|
+
cssClasses.push(styles$11[color]);
|
|
171
|
+
cssClasses.push(styles$11[variant]);
|
|
172
|
+
cssClasses.push(styles$11[size]);
|
|
173
|
+
cssClasses.push(styles$11.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$11.active);
|
|
175
|
+
disabled && cssClasses.push(styles$11.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$11.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -308,9 +308,9 @@ const useOnDestroy = (callBack) => {
|
|
|
308
308
|
}, []);
|
|
309
309
|
};
|
|
310
310
|
|
|
311
|
-
var css_248z$
|
|
312
|
-
var styles$
|
|
313
|
-
styleInject(css_248z$
|
|
311
|
+
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
|
+
var styles$10 = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
313
|
+
styleInject(css_248z$10);
|
|
314
314
|
|
|
315
315
|
const Backdrop = (props) => {
|
|
316
316
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -320,8 +320,8 @@ const Backdrop = (props) => {
|
|
|
320
320
|
};
|
|
321
321
|
const getCssClasses = () => {
|
|
322
322
|
const cssClasses = [];
|
|
323
|
-
cssClasses.push(styles$
|
|
324
|
-
isTransparent && cssClasses.push(styles$
|
|
323
|
+
cssClasses.push(styles$10.backdrop);
|
|
324
|
+
isTransparent && cssClasses.push(styles$10['isTransparent']);
|
|
325
325
|
return cssClasses.filter(css => css).join(' ');
|
|
326
326
|
};
|
|
327
327
|
const getStyles = () => {
|
|
@@ -331,34 +331,34 @@ const Backdrop = (props) => {
|
|
|
331
331
|
return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
|
|
332
332
|
};
|
|
333
333
|
|
|
334
|
-
var css_248z
|
|
335
|
-
var styles
|
|
336
|
-
styleInject(css_248z
|
|
334
|
+
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}";
|
|
335
|
+
var styles$$ = {"list":"List-module_list__gpZ41"};
|
|
336
|
+
styleInject(css_248z$$);
|
|
337
337
|
|
|
338
338
|
const List = (props) => {
|
|
339
339
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
340
340
|
const getCssClasses = () => {
|
|
341
341
|
const cssClasses = [];
|
|
342
|
-
isFlush && cssClasses.push(styles
|
|
343
|
-
cssClasses.push(styles
|
|
342
|
+
isFlush && cssClasses.push(styles$$.flush);
|
|
343
|
+
cssClasses.push(styles$$.list);
|
|
344
344
|
className && cssClasses.push(className);
|
|
345
345
|
return cssClasses.filter(css => css).join(' ');
|
|
346
346
|
};
|
|
347
347
|
return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
348
348
|
};
|
|
349
349
|
|
|
350
|
-
var css_248z$
|
|
351
|
-
var styles$
|
|
352
|
-
styleInject(css_248z$
|
|
350
|
+
var css_248z$_ = ".ListItem-module_listItem__Pk1AP {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease;\n}\n.ListItem-module_listItem__Pk1AP:hover, .ListItem-module_listItem__Pk1AP.ListItem-module_active__zm2q8 {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0;\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit;\n}";
|
|
351
|
+
var styles$_ = {"listItem":"ListItem-module_listItem__Pk1AP","active":"ListItem-module_active__zm2q8","primary":"ListItem-module_primary__F6Qja","accent":"ListItem-module_accent__pg3Ha","secondary":"ListItem-module_secondary__d0drD","light":"ListItem-module_light__37kby","dark":"ListItem-module_dark__ZxQTF","disabled":"ListItem-module_disabled__DQLKl"};
|
|
352
|
+
styleInject(css_248z$_);
|
|
353
353
|
|
|
354
354
|
const ListItem = (props) => {
|
|
355
355
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
356
356
|
const getCssClasses = () => {
|
|
357
357
|
const cssClasses = [];
|
|
358
|
-
cssClasses.push(styles$
|
|
359
|
-
color && cssClasses.push(styles$
|
|
360
|
-
active && cssClasses.push(styles$
|
|
361
|
-
disabled && cssClasses.push(styles$
|
|
358
|
+
cssClasses.push(styles$_.listItem);
|
|
359
|
+
color && cssClasses.push(styles$_[color]);
|
|
360
|
+
active && cssClasses.push(styles$_['active']);
|
|
361
|
+
disabled && cssClasses.push(styles$_['disabled']);
|
|
362
362
|
className && cssClasses.push(className);
|
|
363
363
|
return cssClasses.filter(css => css).join(' ');
|
|
364
364
|
};
|
|
@@ -368,42 +368,42 @@ const ListItem = (props) => {
|
|
|
368
368
|
return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
369
369
|
};
|
|
370
370
|
|
|
371
|
-
var css_248z$
|
|
372
|
-
var styles$
|
|
373
|
-
styleInject(css_248z$
|
|
371
|
+
var css_248z$Z = ".ListItemAvatar-module_avatar__sVWfR {\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%;\n}";
|
|
372
|
+
var styles$Z = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
373
|
+
styleInject(css_248z$Z);
|
|
374
374
|
|
|
375
375
|
const ListItemAvatar = (_a) => {
|
|
376
376
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
377
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
377
|
+
return (React.createElement("div", Object.assign({ className: styles$Z.avatar }, rest), avatar));
|
|
378
378
|
};
|
|
379
379
|
|
|
380
|
-
var css_248z$
|
|
381
|
-
var styles$
|
|
382
|
-
styleInject(css_248z$
|
|
380
|
+
var css_248z$Y = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px;\n}";
|
|
381
|
+
var styles$Y = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
382
|
+
styleInject(css_248z$Y);
|
|
383
383
|
|
|
384
384
|
const ListItemIcon = (_a) => {
|
|
385
385
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
386
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
386
|
+
return (React.createElement("div", Object.assign({ className: styles$Y.icon }, rest), icon));
|
|
387
387
|
};
|
|
388
388
|
|
|
389
|
-
var css_248z$
|
|
390
|
-
var styles$
|
|
391
|
-
styleInject(css_248z$
|
|
389
|
+
var css_248z$X = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px;\n}";
|
|
390
|
+
var styles$X = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
391
|
+
styleInject(css_248z$X);
|
|
392
392
|
|
|
393
393
|
const ListItemAction = (_a) => {
|
|
394
394
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
395
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
395
|
+
return (React.createElement("div", Object.assign({ className: styles$X.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
396
396
|
};
|
|
397
397
|
|
|
398
|
-
var css_248z$
|
|
399
|
-
var styles$
|
|
400
|
-
styleInject(css_248z$
|
|
398
|
+
var css_248z$W = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
399
|
+
var styles$W = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
400
|
+
styleInject(css_248z$W);
|
|
401
401
|
|
|
402
402
|
const ListItemText = (_a) => {
|
|
403
403
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
404
404
|
const getCssClasses = () => {
|
|
405
405
|
const cssClasses = [];
|
|
406
|
-
cssClasses.push(styles$
|
|
406
|
+
cssClasses.push(styles$W.listItemText);
|
|
407
407
|
return cssClasses.filter(css => css).join(' ');
|
|
408
408
|
};
|
|
409
409
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -414,9 +414,9 @@ const ListItemText = (_a) => {
|
|
|
414
414
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
415
415
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
416
416
|
|
|
417
|
-
var css_248z$
|
|
418
|
-
var styles$
|
|
419
|
-
styleInject(css_248z$
|
|
417
|
+
var css_248z$V = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative;\n}\n\n.AutoComplete-module_select__NNYOi {\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\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 min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__NNYOi:hover {\n cursor: pointer;\n}\n.AutoComplete-module_select__NNYOi:focus:not(.AutoComplete-module_select__NNYOi.AutoComplete-module_disabled__CbGP4) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.AutoComplete-module_select__NNYOi:disabled, .AutoComplete-module_select__NNYOi:read-only {\n background-color: #e9ecef;\n}\n.AutoComplete-module_select__NNYOi:disabled:hover {\n cursor: not-allowed;\n}\n.AutoComplete-module_select__NNYOi:read-only:hover {\n cursor: inherit;\n}\n\n.AutoComplete-module_selectMenu__Gu81L {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 38px;\n z-index: 1050;\n max-height: 280px;\n overflow: auto;\n}";
|
|
418
|
+
var styles$V = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
419
|
+
styleInject(css_248z$V);
|
|
420
420
|
|
|
421
421
|
// preset value
|
|
422
422
|
// enter -> delay? -> show results
|
|
@@ -462,7 +462,7 @@ const AutoComplete = (props) => {
|
|
|
462
462
|
const getCssClass = () => {
|
|
463
463
|
const cssClasses = [];
|
|
464
464
|
className && cssClasses.push(className);
|
|
465
|
-
cssClasses.push(styles$
|
|
465
|
+
cssClasses.push(styles$V.select);
|
|
466
466
|
return cssClasses.filter(r => r).join(' ');
|
|
467
467
|
};
|
|
468
468
|
const show = () => setIsShow(true);
|
|
@@ -486,28 +486,28 @@ const AutoComplete = (props) => {
|
|
|
486
486
|
setModel('');
|
|
487
487
|
setSearchText('');
|
|
488
488
|
};
|
|
489
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
489
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$V.selectContainer },
|
|
490
490
|
React.createElement("div", { className: "d-flex" },
|
|
491
491
|
React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
492
492
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
493
493
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
494
494
|
isShow &&
|
|
495
495
|
React.createElement(React.Fragment, null,
|
|
496
|
-
React.createElement("div", { className: styles$
|
|
496
|
+
React.createElement("div", { className: styles$V.selectMenu },
|
|
497
497
|
React.createElement(List, null, _options && _options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
498
498
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
499
499
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
500
500
|
};
|
|
501
501
|
|
|
502
|
-
var css_248z$
|
|
503
|
-
var styles$
|
|
504
|
-
styleInject(css_248z$
|
|
502
|
+
var css_248z$U = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.Badge-module_badge__9ImR0 {\n top: 0;\n right: 0;\n transform: scale(1) translate(50%, -50%);\n transform-origin: 100% 0%;\n height: 20px;\n display: flex;\n padding: 0 6px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n align-items: center;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n border-radius: 10px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
503
|
+
var styles$U = {"badgeContainer":"Badge-module_badgeContainer__3nZBs","badge":"Badge-module_badge__9ImR0","primary":"Badge-module_primary__41U-t","accent":"Badge-module_accent__OQy2-","secondary":"Badge-module_secondary__a9Jfh","light":"Badge-module_light__4QvQ5","dark":"Badge-module_dark__g1yUJ"};
|
|
504
|
+
styleInject(css_248z$U);
|
|
505
505
|
|
|
506
506
|
const Badge = (props) => {
|
|
507
507
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
508
508
|
const [cssClassName] = useCssClasses([
|
|
509
|
-
styles$
|
|
510
|
-
styles$
|
|
509
|
+
styles$U.badge,
|
|
510
|
+
styles$U[color],
|
|
511
511
|
className
|
|
512
512
|
]);
|
|
513
513
|
return (React.createElement(BadgeContainer, null,
|
|
@@ -517,15 +517,15 @@ const Badge = (props) => {
|
|
|
517
517
|
const BadgeContainer = (props) => {
|
|
518
518
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
519
519
|
const [cssClassName] = useCssClasses([
|
|
520
|
-
styles$
|
|
520
|
+
styles$U.badgeContainer,
|
|
521
521
|
className,
|
|
522
522
|
]);
|
|
523
523
|
return (React.createElement("div", Object.assign({ className: cssClassName }, rest), children));
|
|
524
524
|
};
|
|
525
525
|
|
|
526
|
-
var css_248z$
|
|
527
|
-
var styles$
|
|
528
|
-
styleInject(css_248z$
|
|
526
|
+
var css_248z$T = ".Button-module_button__qeIer {\n text-transform: uppercase;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius);\n}\n.Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow);\n}\n.Button-module_button__qeIer.Button-module_block__JIazf {\n width: 100%;\n}\n.Button-module_button__qeIer:hover:not(:disabled) {\n cursor: pointer;\n}\n.Button-module_button__qeIer:focus:not(:disabled) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n background-color: var(--primary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n background-color: var(--accent-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background-color: var(--secondary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n background-color: var(--light-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n background-color: var(--dark-dark);\n}\n.Button-module_btnContained__16y5l:disabled {\n color: rgba(0, 0, 0, 0.26);\n box-shadow: none;\n background-color: rgba(0, 0, 0, 0.12);\n}\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed;\n}\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary);\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n text-decoration: none;\n background: var(--primary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n text-decoration: none;\n background: var(--secondary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n text-decoration: none;\n background: var(--accent-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n text-decoration: none;\n background: var(--light-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n text-decoration: none;\n background: var(--dark-highlight);\n}\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary);\n border-color: var(--primary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n background: var(--primary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary);\n border-color: var(--secondary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background: var(--secondary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent);\n border-color: var(--accent);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n background: var(--accent-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n border-color: var(--light);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n background: var(--light-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark);\n border-color: var(--dark);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n background: var(--dark-highlight);\n}\n.Button-module_btnOutline__CCFPI:disabled {\n color: rgba(0, 0, 0, 0.26);\n border: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px;\n}";
|
|
527
|
+
var styles$T = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
|
|
528
|
+
styleInject(css_248z$T);
|
|
529
529
|
|
|
530
530
|
const ButtonContext = createContext({
|
|
531
531
|
color: null
|
|
@@ -537,19 +537,19 @@ const Button = (props) => {
|
|
|
537
537
|
const buttonContext = useButtonContext();
|
|
538
538
|
const getCssClasses = () => {
|
|
539
539
|
const cssClasses = [];
|
|
540
|
-
cssClasses.push(styles$
|
|
540
|
+
cssClasses.push(styles$T.button);
|
|
541
541
|
const buttonColor = buttonContext.color || color;
|
|
542
542
|
if (variant !== 'outline' && variant !== 'text') {
|
|
543
|
-
cssClasses.push(styles$
|
|
544
|
-
cssClasses.push(styles$
|
|
543
|
+
cssClasses.push(styles$T.btnContained);
|
|
544
|
+
cssClasses.push(styles$T[buttonColor]);
|
|
545
545
|
}
|
|
546
546
|
if (variant === 'outline') {
|
|
547
|
-
cssClasses.push(styles$
|
|
548
|
-
cssClasses.push(styles$
|
|
547
|
+
cssClasses.push(styles$T.btnOutline);
|
|
548
|
+
cssClasses.push(styles$T[buttonColor]);
|
|
549
549
|
}
|
|
550
550
|
if (variant === 'text') {
|
|
551
|
-
cssClasses.push(styles$
|
|
552
|
-
cssClasses.push(styles$
|
|
551
|
+
cssClasses.push(styles$T.btnText);
|
|
552
|
+
cssClasses.push(styles$T[buttonColor]);
|
|
553
553
|
}
|
|
554
554
|
if (isRounded && variant !== 'text') {
|
|
555
555
|
cssClasses.push(`rounded-pill`);
|
|
@@ -557,29 +557,29 @@ const Button = (props) => {
|
|
|
557
557
|
if (isActive) {
|
|
558
558
|
cssClasses.push('active');
|
|
559
559
|
}
|
|
560
|
-
shadow && cssClasses.push(styles$
|
|
561
|
-
block && cssClasses.push(styles$
|
|
560
|
+
shadow && cssClasses.push(styles$T.shadow);
|
|
561
|
+
block && cssClasses.push(styles$T.block);
|
|
562
562
|
className && cssClasses.push(className);
|
|
563
563
|
return cssClasses.filter(css => css).join(' ');
|
|
564
564
|
};
|
|
565
565
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
566
566
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
567
567
|
startIcon &&
|
|
568
|
-
React.createElement(Icon, { className: styles$
|
|
568
|
+
React.createElement(Icon, { className: styles$T.startIcon }, startIcon),
|
|
569
569
|
children,
|
|
570
570
|
endIcon &&
|
|
571
|
-
React.createElement(Icon, { className: styles$
|
|
571
|
+
React.createElement(Icon, { className: styles$T.endIcon }, endIcon))));
|
|
572
572
|
};
|
|
573
573
|
|
|
574
|
-
var css_248z$
|
|
575
|
-
var styles$
|
|
576
|
-
styleInject(css_248z$
|
|
574
|
+
var css_248z$S = ".ButtonGroup-module_buttonGroup__w6iB- {\n display: inline-flex;\n border-radius: 4px;\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-of-type) {\n border-right: 1px solid #bdbdbd;\n}";
|
|
575
|
+
var styles$S = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
576
|
+
styleInject(css_248z$S);
|
|
577
577
|
|
|
578
578
|
const ButtonGroup = (props) => {
|
|
579
579
|
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
580
580
|
const getCssClasses = () => {
|
|
581
581
|
const cssClasses = [];
|
|
582
|
-
cssClasses.push(styles$
|
|
582
|
+
cssClasses.push(styles$S.buttonGroup);
|
|
583
583
|
className && cssClasses.push(className);
|
|
584
584
|
return cssClasses.filter(css => css).join(' ');
|
|
585
585
|
};
|
|
@@ -587,15 +587,15 @@ const ButtonGroup = (props) => {
|
|
|
587
587
|
React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
588
588
|
};
|
|
589
589
|
|
|
590
|
-
var css_248z$
|
|
591
|
-
var styles$
|
|
592
|
-
styleInject(css_248z$
|
|
590
|
+
var css_248z$R = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0;\n}";
|
|
591
|
+
var styles$R = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
592
|
+
styleInject(css_248z$R);
|
|
593
593
|
|
|
594
594
|
const Breadcrumb = (props) => {
|
|
595
595
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
596
596
|
const getCssClasses = () => {
|
|
597
597
|
const cssClasses = [];
|
|
598
|
-
cssClasses.push(styles$
|
|
598
|
+
cssClasses.push(styles$R.breadcrumb);
|
|
599
599
|
className && cssClasses.push(className);
|
|
600
600
|
return cssClasses.filter(css => css).join(' ');
|
|
601
601
|
};
|
|
@@ -605,15 +605,15 @@ const Breadcrumb = (props) => {
|
|
|
605
605
|
|
|
606
606
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
607
607
|
|
|
608
|
-
var css_248z$
|
|
609
|
-
var styles$
|
|
610
|
-
styleInject(css_248z$
|
|
608
|
+
var css_248z$Q = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\";\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary);\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset;\n}";
|
|
609
|
+
var styles$Q = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
610
|
+
styleInject(css_248z$Q);
|
|
611
611
|
|
|
612
612
|
const BreadcrumbItem = (props) => {
|
|
613
613
|
const { children, className, isActive, onClick } = props;
|
|
614
614
|
const getCssClasses = () => {
|
|
615
615
|
const cssClasses = [];
|
|
616
|
-
cssClasses.push(styles$
|
|
616
|
+
cssClasses.push(styles$Q.breadcrumbItem);
|
|
617
617
|
className && cssClasses.push(className);
|
|
618
618
|
isActive && cssClasses.push('active');
|
|
619
619
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -625,115 +625,115 @@ const BreadcrumbItem = (props) => {
|
|
|
625
625
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
626
626
|
};
|
|
627
627
|
|
|
628
|
-
var css_248z$
|
|
629
|
-
var styles$
|
|
630
|
-
styleInject(css_248z$
|
|
628
|
+
var css_248z$P = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius);\n}\n.Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow);\n}";
|
|
629
|
+
var styles$P = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
630
|
+
styleInject(css_248z$P);
|
|
631
631
|
|
|
632
632
|
const Card = (props) => {
|
|
633
633
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
634
634
|
const getCssClasses = () => {
|
|
635
635
|
const cssClasses = [];
|
|
636
|
-
cssClasses.push(styles$
|
|
637
|
-
shadow && cssClasses.push(styles$
|
|
636
|
+
cssClasses.push(styles$P.card);
|
|
637
|
+
shadow && cssClasses.push(styles$P.shadow);
|
|
638
638
|
className && cssClasses.push(className);
|
|
639
639
|
return cssClasses.filter(css => css).join(' ');
|
|
640
640
|
};
|
|
641
641
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
642
642
|
};
|
|
643
643
|
|
|
644
|
-
var css_248z$
|
|
645
|
-
var styles$
|
|
646
|
-
styleInject(css_248z$
|
|
644
|
+
var css_248z$O = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
645
|
+
var styles$O = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
646
|
+
styleInject(css_248z$O);
|
|
647
647
|
|
|
648
648
|
const CardBody = (props) => {
|
|
649
649
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
650
650
|
const getCssClasses = () => {
|
|
651
651
|
const cssClasses = [];
|
|
652
|
-
cssClasses.push(styles$
|
|
652
|
+
cssClasses.push(styles$O.cardBody);
|
|
653
653
|
className && cssClasses.push(className);
|
|
654
654
|
return cssClasses.filter(css => css).join(' ');
|
|
655
655
|
};
|
|
656
656
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
657
657
|
};
|
|
658
658
|
|
|
659
|
-
var css_248z$
|
|
660
|
-
var styles$
|
|
661
|
-
styleInject(css_248z$
|
|
659
|
+
var css_248z$N = ".CardFooter-module_cardFooter__BpOTG {\n padding: 0.75rem 1.25rem;\n background-color: rgba(0, 0, 0, 0.03);\n border-top: 1px solid rgba(0, 0, 0, 0.125);\n}\n.CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);\n}";
|
|
660
|
+
var styles$N = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
661
|
+
styleInject(css_248z$N);
|
|
662
662
|
|
|
663
663
|
const CardFooter = (props) => {
|
|
664
664
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
665
665
|
const getCssClasses = () => {
|
|
666
666
|
const cssClasses = [];
|
|
667
|
-
cssClasses.push(styles$
|
|
667
|
+
cssClasses.push(styles$N.cardFooter);
|
|
668
668
|
className && cssClasses.push(className);
|
|
669
669
|
return cssClasses.filter(css => css).join(' ');
|
|
670
670
|
};
|
|
671
671
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
672
672
|
};
|
|
673
673
|
|
|
674
|
-
var css_248z$
|
|
675
|
-
var styles$
|
|
676
|
-
styleInject(css_248z$
|
|
674
|
+
var css_248z$M = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
675
|
+
var styles$M = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
676
|
+
styleInject(css_248z$M);
|
|
677
677
|
|
|
678
678
|
const CardSubtitle = (props) => {
|
|
679
679
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
680
680
|
const getCssClasses = () => {
|
|
681
681
|
const cssClasses = [];
|
|
682
|
-
cssClasses.push(styles$
|
|
682
|
+
cssClasses.push(styles$M.cardSubtitle);
|
|
683
683
|
className && cssClasses.push(className);
|
|
684
684
|
return cssClasses.filter(css => css).join(' ');
|
|
685
685
|
};
|
|
686
686
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
687
687
|
};
|
|
688
688
|
|
|
689
|
-
var css_248z$
|
|
690
|
-
var styles$
|
|
691
|
-
styleInject(css_248z$
|
|
689
|
+
var css_248z$L = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
690
|
+
var styles$L = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
691
|
+
styleInject(css_248z$L);
|
|
692
692
|
|
|
693
693
|
const CardText = (props) => {
|
|
694
694
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
695
695
|
const getCssClasses = () => {
|
|
696
696
|
const cssClasses = [];
|
|
697
|
-
cssClasses.push(styles$
|
|
697
|
+
cssClasses.push(styles$L.cardText);
|
|
698
698
|
className && cssClasses.push(className);
|
|
699
699
|
return cssClasses.filter(css => css).join(' ');
|
|
700
700
|
};
|
|
701
701
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
702
702
|
};
|
|
703
703
|
|
|
704
|
-
var css_248z$
|
|
705
|
-
var styles$
|
|
706
|
-
styleInject(css_248z$
|
|
704
|
+
var css_248z$K = ".CardTitle-module_cardTitle__aiPSE {\n margin-bottom: 0;\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 1.334;\n letter-spacing: 0em;\n}";
|
|
705
|
+
var styles$K = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
706
|
+
styleInject(css_248z$K);
|
|
707
707
|
|
|
708
708
|
const CardTitle = (props) => {
|
|
709
709
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
710
710
|
const getCssClasses = () => {
|
|
711
711
|
const cssClasses = [];
|
|
712
|
-
cssClasses.push(styles$
|
|
712
|
+
cssClasses.push(styles$K.cardTitle);
|
|
713
713
|
className && cssClasses.push(className);
|
|
714
714
|
return cssClasses.filter(css => css).join(' ');
|
|
715
715
|
};
|
|
716
716
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
717
717
|
};
|
|
718
718
|
|
|
719
|
-
var css_248z$
|
|
720
|
-
var styles$
|
|
721
|
-
styleInject(css_248z$
|
|
719
|
+
var css_248z$J = ".CardImage-module_cardImage__Z6JWW {\n flex-shrink: 0;\n width: 100%;\n border-top-left-radius: calc(0.25rem - 1px);\n border-top-right-radius: calc(0.25rem - 1px);\n}";
|
|
720
|
+
var styles$J = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
721
|
+
styleInject(css_248z$J);
|
|
722
722
|
|
|
723
723
|
const CardImage = (props) => {
|
|
724
724
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
725
725
|
const getCssClasses = () => {
|
|
726
726
|
const cssClasses = [];
|
|
727
|
-
cssClasses.push(styles$
|
|
727
|
+
cssClasses.push(styles$J.cardImage);
|
|
728
728
|
className && cssClasses.push(className);
|
|
729
729
|
return cssClasses.filter(css => css).join(' ');
|
|
730
730
|
};
|
|
731
731
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
732
732
|
};
|
|
733
733
|
|
|
734
|
-
var css_248z$
|
|
735
|
-
var styles$
|
|
736
|
-
styleInject(css_248z$
|
|
734
|
+
var css_248z$I = ".Checkbox-module_checkboxContainer__x2GCi {\n display: flex;\n align-items: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.Checkbox-module_checkboxLabel__nPY4k:hover {\n cursor: pointer;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG {\n color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG:hover {\n cursor: not-allowed;\n}";
|
|
735
|
+
var styles$I = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
736
|
+
styleInject(css_248z$I);
|
|
737
737
|
|
|
738
738
|
const Checkbox = (props) => {
|
|
739
739
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -762,8 +762,8 @@ const Checkbox = (props) => {
|
|
|
762
762
|
};
|
|
763
763
|
const getCssClassesLabel = () => {
|
|
764
764
|
const cssClasses = [];
|
|
765
|
-
cssClasses.push(styles$
|
|
766
|
-
disabled && cssClasses.push(styles$
|
|
765
|
+
cssClasses.push(styles$I.checkboxLabel);
|
|
766
|
+
disabled && cssClasses.push(styles$I['disabled']);
|
|
767
767
|
return cssClasses.filter(css => css).join(' ');
|
|
768
768
|
};
|
|
769
769
|
const getIcon = () => {
|
|
@@ -776,24 +776,24 @@ const Checkbox = (props) => {
|
|
|
776
776
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
777
777
|
}
|
|
778
778
|
};
|
|
779
|
-
return (React.createElement("div", { className: styles$
|
|
779
|
+
return (React.createElement("div", { className: styles$I.checkboxContainer },
|
|
780
780
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
781
781
|
React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
782
782
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
783
783
|
};
|
|
784
784
|
|
|
785
|
-
var css_248z$
|
|
786
|
-
var styles$
|
|
787
|
-
styleInject(css_248z$
|
|
785
|
+
var css_248z$H = ".Chip-module_chip__dZ5qz {\n display: inline-flex;\n align-items: center;\n padding: 0.5rem;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n font-size: 75%;\n font-weight: 700;\n border-radius: 10rem;\n line-height: 1;\n}\n.Chip-module_chip__dZ5qz span {\n margin-bottom: 2px;\n}\n.Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow);\n}";
|
|
786
|
+
var styles$H = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_deleteIcon__--rUx","primary":"Chip-module_primary__YVDi9","secondary":"Chip-module_secondary__-e4xP","accent":"Chip-module_accent__ZCTwu","light":"Chip-module_light__vKs7O","dark":"Chip-module_dark__G-FLQ","clickable":"Chip-module_clickable__qAqVH","shadow":"Chip-module_shadow__v11NF"};
|
|
787
|
+
styleInject(css_248z$H);
|
|
788
788
|
|
|
789
789
|
const Chip = (props) => {
|
|
790
790
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
791
791
|
const getCssClass = () => {
|
|
792
792
|
const cssClasses = [];
|
|
793
|
-
cssClasses.push(styles$
|
|
794
|
-
cssClasses.push(styles$
|
|
795
|
-
shadow && cssClasses.push(styles$
|
|
796
|
-
onClick && cssClasses.push(styles$
|
|
793
|
+
cssClasses.push(styles$H.chip);
|
|
794
|
+
cssClasses.push(styles$H[color]);
|
|
795
|
+
shadow && cssClasses.push(styles$H['shadow']);
|
|
796
|
+
onClick && cssClasses.push(styles$H['clickable']);
|
|
797
797
|
className && cssClasses.push(className);
|
|
798
798
|
return cssClasses.filter(r => r).join(' ');
|
|
799
799
|
};
|
|
@@ -803,7 +803,7 @@ const Chip = (props) => {
|
|
|
803
803
|
};
|
|
804
804
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
805
805
|
React.createElement("span", null, children),
|
|
806
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
806
|
+
isDeletable && (React.createElement("div", { className: styles$H.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
807
807
|
};
|
|
808
808
|
|
|
809
809
|
const CssTransition = (props) => {
|
|
@@ -881,9 +881,9 @@ const CssTransition = (props) => {
|
|
|
881
881
|
React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
882
882
|
};
|
|
883
883
|
|
|
884
|
-
var css_248z$
|
|
885
|
-
var styles$
|
|
886
|
-
styleInject(css_248z$
|
|
884
|
+
var css_248z$G = ".Column-module_column__fcTgl {\n flex: 1 0 0%;\n}\n\n@media (max-width: 575.98px) {\n .Column-module_column__fcTgl {\n flex: 1;\n }\n}";
|
|
885
|
+
var styles$G = {"column":"Column-module_column__fcTgl"};
|
|
886
|
+
styleInject(css_248z$G);
|
|
887
887
|
|
|
888
888
|
const Column = (props) => {
|
|
889
889
|
const { children, className } = props,
|
|
@@ -901,22 +901,22 @@ const Column = (props) => {
|
|
|
901
901
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
902
902
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
903
903
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
904
|
-
cssClasses.push(styles$
|
|
904
|
+
cssClasses.push(styles$G.column);
|
|
905
905
|
className && cssClasses.push(className);
|
|
906
906
|
return cssClasses.filter(css => css).join(' ');
|
|
907
907
|
};
|
|
908
908
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
909
909
|
};
|
|
910
910
|
|
|
911
|
-
var css_248z$
|
|
912
|
-
var styles$
|
|
913
|
-
styleInject(css_248z$
|
|
911
|
+
var css_248z$F = ".Row-module_row__bTIWp {\n display: flex;\n gap: 15px;\n flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n flex-shrink: 0;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n}";
|
|
912
|
+
var styles$F = {"row":"Row-module_row__bTIWp"};
|
|
913
|
+
styleInject(css_248z$F);
|
|
914
914
|
|
|
915
915
|
const Row = (_a) => {
|
|
916
916
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
917
917
|
const getCssClasses = () => {
|
|
918
918
|
const cssClasses = [];
|
|
919
|
-
cssClasses.push(styles$
|
|
919
|
+
cssClasses.push(styles$F.row);
|
|
920
920
|
className && cssClasses.push(className);
|
|
921
921
|
direction && cssClasses.push(`flex-${direction}`);
|
|
922
922
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -924,15 +924,15 @@ const Row = (_a) => {
|
|
|
924
924
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
925
925
|
};
|
|
926
926
|
|
|
927
|
-
var css_248z$
|
|
928
|
-
var styles$
|
|
929
|
-
styleInject(css_248z$
|
|
927
|
+
var css_248z$E = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
928
|
+
var styles$E = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
929
|
+
styleInject(css_248z$E);
|
|
930
930
|
|
|
931
931
|
const FormLabel = (_a) => {
|
|
932
932
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
933
933
|
const getCssClasses = () => {
|
|
934
934
|
const cssClasses = [];
|
|
935
|
-
cssClasses.push(styles$
|
|
935
|
+
cssClasses.push(styles$E.formLabel);
|
|
936
936
|
className && cssClasses.push(className);
|
|
937
937
|
return cssClasses.filter(css => css).join(' ');
|
|
938
938
|
};
|
|
@@ -969,9 +969,9 @@ const FileInput = (props) => {
|
|
|
969
969
|
React.createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
|
|
970
970
|
};
|
|
971
971
|
|
|
972
|
-
var css_248z$
|
|
973
|
-
var styles$
|
|
974
|
-
styleInject(css_248z$
|
|
972
|
+
var css_248z$D = ".Select-module_selectContainer__DHFDZ {\n position: relative;\n}\n\n.Select-module_select__Fbn38 {\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\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 align-items: center;\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n flex-wrap: wrap;\n}\n.Select-module_select__Fbn38 > span {\n flex: 1;\n}\n.Select-module_select__Fbn38:hover {\n cursor: pointer;\n}\n.Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n background-color: #e9ecef;\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n cursor: not-allowed;\n}\n.Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n cursor: inherit;\n}\n\n.Select-module_chipContainer__1poFF {\n gap: 10px;\n flex: 1;\n display: inline-flex;\n flex-wrap: wrap;\n}\n\n.Select-module_selectMenu__8y4kQ {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 2px;\n z-index: 1112;\n max-height: 280px;\n overflow: auto;\n}";
|
|
973
|
+
var styles$D = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","chipContainer":"Select-module_chipContainer__1poFF","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
974
|
+
styleInject(css_248z$D);
|
|
975
975
|
|
|
976
976
|
const Select = (props) => {
|
|
977
977
|
var _a, _b, _c;
|
|
@@ -984,9 +984,9 @@ const Select = (props) => {
|
|
|
984
984
|
const getCssClass = () => {
|
|
985
985
|
const cssClasses = [];
|
|
986
986
|
className && cssClasses.push(className);
|
|
987
|
-
disabled && cssClasses.push(styles$
|
|
988
|
-
readOnly && cssClasses.push(styles$
|
|
989
|
-
cssClasses.push(styles$
|
|
987
|
+
disabled && cssClasses.push(styles$D['disabled']);
|
|
988
|
+
readOnly && cssClasses.push(styles$D['readOnly']);
|
|
989
|
+
cssClasses.push(styles$D.select);
|
|
990
990
|
return cssClasses.filter(r => r).join(' ');
|
|
991
991
|
};
|
|
992
992
|
useEffect(() => {
|
|
@@ -1108,16 +1108,16 @@ const Select = (props) => {
|
|
|
1108
1108
|
}
|
|
1109
1109
|
}
|
|
1110
1110
|
};
|
|
1111
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
1111
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$D.selectContainer },
|
|
1112
1112
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1113
1113
|
!multiple && renderSingleViewModel(),
|
|
1114
1114
|
multiple &&
|
|
1115
|
-
React.createElement("div", { className: styles$
|
|
1115
|
+
React.createElement("div", { className: styles$D.chipContainer }, renderMultipleViewModel()),
|
|
1116
1116
|
React.createElement(Icon, { className: "ml-2" },
|
|
1117
1117
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
1118
1118
|
isShow &&
|
|
1119
1119
|
createPortal(React.createElement(React.Fragment, null,
|
|
1120
|
-
React.createElement("div", { className: styles$
|
|
1120
|
+
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
1121
|
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
1122
|
multiple &&
|
|
1123
1123
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1125,33 +1125,33 @@ const Select = (props) => {
|
|
|
1125
1125
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
1126
1126
|
};
|
|
1127
1127
|
|
|
1128
|
-
var css_248z$
|
|
1129
|
-
var styles$
|
|
1130
|
-
styleInject(css_248z$
|
|
1128
|
+
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}";
|
|
1129
|
+
var styles$C = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1130
|
+
styleInject(css_248z$C);
|
|
1131
1131
|
|
|
1132
1132
|
const Textarea = (props) => {
|
|
1133
1133
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1134
1134
|
const getCssClass = () => {
|
|
1135
1135
|
const cssClasses = [];
|
|
1136
|
-
cssClasses.push(styles$
|
|
1136
|
+
cssClasses.push(styles$C.textarea);
|
|
1137
1137
|
className && cssClasses.push(className);
|
|
1138
|
-
error && cssClasses.push(styles$
|
|
1138
|
+
error && cssClasses.push(styles$C['isInvalid']);
|
|
1139
1139
|
return cssClasses.filter(r => r).join(' ');
|
|
1140
1140
|
};
|
|
1141
1141
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1142
1142
|
};
|
|
1143
1143
|
|
|
1144
|
-
var css_248z$
|
|
1145
|
-
var styles$
|
|
1146
|
-
styleInject(css_248z$
|
|
1144
|
+
var css_248z$B = ".FormInput-module_formInput__VXZip {\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 color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n -webkit-appearance: none;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.FormInput-module_formInput__VXZip:focus:not(.FormInput-module_formInput__VXZip.FormInput-module_disabled__EjdD9) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\n}\n.FormInput-module_formInput__VXZip.FormInput-module_isInvalid__vQDuz {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
1145
|
+
var styles$B = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1146
|
+
styleInject(css_248z$B);
|
|
1147
1147
|
|
|
1148
1148
|
const FormInput = (props) => {
|
|
1149
1149
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1150
1150
|
const getCssClasses = () => {
|
|
1151
1151
|
const cssClasses = [];
|
|
1152
|
-
cssClasses.push(styles$
|
|
1152
|
+
cssClasses.push(styles$B.formInput);
|
|
1153
1153
|
className && cssClasses.push(className);
|
|
1154
|
-
!isValid && cssClasses.push(styles$
|
|
1154
|
+
!isValid && cssClasses.push(styles$B['isInvalid']);
|
|
1155
1155
|
return cssClasses.filter(css => css).join(' ');
|
|
1156
1156
|
};
|
|
1157
1157
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1199,12 +1199,12 @@ const FormHint = (props) => {
|
|
|
1199
1199
|
return (React.createElement("small", { className: getCssClasses() }, children));
|
|
1200
1200
|
};
|
|
1201
1201
|
|
|
1202
|
-
var css_248z$
|
|
1203
|
-
var styles$
|
|
1204
|
-
styleInject(css_248z$
|
|
1202
|
+
var css_248z$A = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
1203
|
+
var styles$A = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1204
|
+
styleInject(css_248z$A);
|
|
1205
1205
|
|
|
1206
1206
|
const FormError = (props) => {
|
|
1207
|
-
const { className = styles$
|
|
1207
|
+
const { className = styles$A.isInvalid, errors = [] } = props;
|
|
1208
1208
|
return (React.createElement(Fragment, null, errors &&
|
|
1209
1209
|
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
1210
1210
|
};
|
|
@@ -1219,7 +1219,9 @@ const EmailValidator = (value) => {
|
|
|
1219
1219
|
|
|
1220
1220
|
const IsEqualValidator = (valueA, valueB) => valueA === valueB;
|
|
1221
1221
|
|
|
1222
|
-
const MaxValidator = (valueA, valueB) => valueA
|
|
1222
|
+
const MaxValidator = (valueA, valueB) => valueA <= valueB;
|
|
1223
|
+
|
|
1224
|
+
const MinValidator = (valueA, valueB) => valueA >= valueB;
|
|
1223
1225
|
|
|
1224
1226
|
// values, isSubmitting, handleChange, handleBlur, handleSubmit
|
|
1225
1227
|
class Form extends Component {
|
|
@@ -1270,8 +1272,13 @@ class Form extends Component {
|
|
|
1270
1272
|
errors.push({ validator: validatorName, message: 'Email format is wrong' });
|
|
1271
1273
|
}
|
|
1272
1274
|
break;
|
|
1275
|
+
case 'min':
|
|
1276
|
+
if (!MinValidator(fieldValue, parseInt(validatorParam))) {
|
|
1277
|
+
errors.push({ validator: validatorName, message: `Number is less than ${validatorParam}` });
|
|
1278
|
+
}
|
|
1279
|
+
break;
|
|
1273
1280
|
case 'max':
|
|
1274
|
-
if (MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1281
|
+
if (!MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1275
1282
|
errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
|
|
1276
1283
|
}
|
|
1277
1284
|
break;
|
|
@@ -1528,33 +1535,45 @@ const DateSelect = (props) => {
|
|
|
1528
1535
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1529
1536
|
// };
|
|
1530
1537
|
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1538
|
+
const Portal = ({ children, target = document.body, className }) => {
|
|
1539
|
+
const containerEl = useMemo(() => document.createElement('div'), []);
|
|
1540
|
+
useEffect(() => {
|
|
1541
|
+
className && className.split(' ').forEach(cssClass => containerEl.classList.add(cssClass));
|
|
1542
|
+
target.appendChild(containerEl);
|
|
1543
|
+
return () => {
|
|
1544
|
+
target.removeChild(containerEl);
|
|
1545
|
+
};
|
|
1546
|
+
}, []);
|
|
1547
|
+
return createPortal(children, containerEl);
|
|
1548
|
+
};
|
|
1549
|
+
|
|
1550
|
+
var css_248z$z = ".Drawer-module_drawer__kdQCk {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 320px;\n overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n position: inherit;\n z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n order: 0;\n left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n order: 2;\n right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n overflow: hidden;\n}";
|
|
1551
|
+
var styles$z = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
|
|
1552
|
+
styleInject(css_248z$z);
|
|
1534
1553
|
|
|
1535
1554
|
const Drawer = (props) => {
|
|
1536
1555
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1537
1556
|
useEffect(() => {
|
|
1538
|
-
document.body.classList.add(styles$
|
|
1557
|
+
document.body.classList.add(styles$z.drawerOpen);
|
|
1539
1558
|
return () => {
|
|
1540
|
-
document.body.classList.remove(styles$
|
|
1559
|
+
document.body.classList.remove(styles$z.drawerOpen);
|
|
1541
1560
|
};
|
|
1542
1561
|
}, []);
|
|
1543
1562
|
const handleClickBackdrop = () => {
|
|
1544
1563
|
onClickBackdrop && onClickBackdrop();
|
|
1545
1564
|
};
|
|
1546
|
-
return
|
|
1565
|
+
return (React.createElement(Portal, { className: 'drawer-container', 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"]);
|
|
1552
1571
|
const getCssClasses = () => {
|
|
1553
1572
|
const cssClasses = [];
|
|
1554
|
-
cssClasses.push(styles$
|
|
1555
|
-
shadow && cssClasses.push(styles$
|
|
1556
|
-
!!permanent && cssClasses.push(styles$
|
|
1557
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1573
|
+
cssClasses.push(styles$z.drawer);
|
|
1574
|
+
shadow && cssClasses.push(styles$z.shadow);
|
|
1575
|
+
!!permanent && cssClasses.push(styles$z['permanent']);
|
|
1576
|
+
position === 'left' ? cssClasses.push(styles$z['left']) : cssClasses.push(styles$z['right']);
|
|
1558
1577
|
className && cssClasses.push(className);
|
|
1559
1578
|
return cssClasses.filter(css => css).join(' ');
|
|
1560
1579
|
};
|
|
@@ -1568,9 +1587,9 @@ const DrawerContent = (props) => {
|
|
|
1568
1587
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1569
1588
|
};
|
|
1570
1589
|
|
|
1571
|
-
var css_248z$
|
|
1572
|
-
var styles$
|
|
1573
|
-
styleInject(css_248z$
|
|
1590
|
+
var css_248z$y = ".MenuBody-module_menuBody__u4FIQ {\n z-index: 1111;\n margin: 0;\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 10rem;\n padding: 8px 0px;\n font-size: 1rem;\n color: #212529;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border-radius: var(--borderRadius);\n}\n.MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n box-shadow: var(--shadow);\n}";
|
|
1591
|
+
var styles$y = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1592
|
+
styleInject(css_248z$y);
|
|
1574
1593
|
|
|
1575
1594
|
const MenuBody = (props) => {
|
|
1576
1595
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1601,8 +1620,8 @@ const MenuBody = (props) => {
|
|
|
1601
1620
|
}, [menuBodyRef]);
|
|
1602
1621
|
const getCssClasses = () => {
|
|
1603
1622
|
const cssClasses = [];
|
|
1604
|
-
cssClasses.push(styles$
|
|
1605
|
-
shadow && cssClasses.push(styles$
|
|
1623
|
+
cssClasses.push(styles$y.menuBody);
|
|
1624
|
+
shadow && cssClasses.push(styles$y.shadow);
|
|
1606
1625
|
className && cssClasses.push(className);
|
|
1607
1626
|
return cssClasses.filter(css => css).join(' ');
|
|
1608
1627
|
};
|
|
@@ -1614,9 +1633,9 @@ const MenuBody = (props) => {
|
|
|
1614
1633
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1615
1634
|
};
|
|
1616
1635
|
|
|
1617
|
-
var css_248z$
|
|
1618
|
-
var styles$
|
|
1619
|
-
styleInject(css_248z$
|
|
1636
|
+
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1637
|
+
var styles$x = {"menu":"Menu-module_menu__p8QL-"};
|
|
1638
|
+
styleInject(css_248z$x);
|
|
1620
1639
|
|
|
1621
1640
|
const Menu = (props) => {
|
|
1622
1641
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
@@ -1624,7 +1643,7 @@ const Menu = (props) => {
|
|
|
1624
1643
|
const toggleContainerRef = useRef(null);
|
|
1625
1644
|
const getCssClasses = () => {
|
|
1626
1645
|
const cssClasses = [];
|
|
1627
|
-
cssClasses.push(styles$
|
|
1646
|
+
cssClasses.push(styles$x.menu);
|
|
1628
1647
|
className && cssClasses.push(className);
|
|
1629
1648
|
return cssClasses.filter(css => css).join(' ');
|
|
1630
1649
|
};
|
|
@@ -1637,17 +1656,17 @@ const Menu = (props) => {
|
|
|
1637
1656
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1638
1657
|
};
|
|
1639
1658
|
|
|
1640
|
-
var css_248z$
|
|
1641
|
-
var styles$
|
|
1642
|
-
styleInject(css_248z$
|
|
1659
|
+
var css_248z$w = ".MenuItem-module_menuItem__MeBxN {\n display: flex;\n width: 100%;\n padding: 0.25rem 1.5rem;\n clear: both;\n font-weight: 400;\n color: #212529;\n text-align: inherit;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n}\n.MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n margin-bottom: 0;\n font-size: 0.875rem;\n}\n.MenuItem-module_menuItem__MeBxN:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04);\n}";
|
|
1660
|
+
var styles$w = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1661
|
+
styleInject(css_248z$w);
|
|
1643
1662
|
|
|
1644
1663
|
const MenuItem = (props) => {
|
|
1645
1664
|
const { children, onClick, type = 'item' } = props;
|
|
1646
1665
|
const getCssClasses = () => {
|
|
1647
1666
|
const cssClasses = [];
|
|
1648
|
-
cssClasses.push(styles$
|
|
1667
|
+
cssClasses.push(styles$w.menuItem);
|
|
1649
1668
|
if (type === 'header') {
|
|
1650
|
-
cssClasses.push(styles$
|
|
1669
|
+
cssClasses.push(styles$w.menuItemHeader);
|
|
1651
1670
|
}
|
|
1652
1671
|
return cssClasses.filter(css => css).join(' ');
|
|
1653
1672
|
};
|
|
@@ -1663,23 +1682,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1663
1682
|
return (React.createElement(Fragment, null, children));
|
|
1664
1683
|
};
|
|
1665
1684
|
|
|
1666
|
-
var css_248z$
|
|
1667
|
-
var styles$
|
|
1668
|
-
styleInject(css_248z$
|
|
1685
|
+
var css_248z$v = ".MenuDivider-module_menuItemDivider__oRP-j {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef;\n}";
|
|
1686
|
+
var styles$v = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1687
|
+
styleInject(css_248z$v);
|
|
1669
1688
|
|
|
1670
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1689
|
+
const MenuDivider = () => React.createElement("div", { className: styles$v.menuItemDivider });
|
|
1671
1690
|
|
|
1672
|
-
var css_248z$
|
|
1673
|
-
var styles$
|
|
1674
|
-
styleInject(css_248z$
|
|
1691
|
+
var css_248z$u = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px;\n}";
|
|
1692
|
+
var styles$u = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1693
|
+
styleInject(css_248z$u);
|
|
1675
1694
|
|
|
1676
1695
|
const ExpansionPanelContent = ({ children }) => {
|
|
1677
|
-
return (React.createElement("div", { className: styles$
|
|
1696
|
+
return (React.createElement("div", { className: styles$u.expansionPanelContent }, children));
|
|
1678
1697
|
};
|
|
1679
1698
|
|
|
1680
|
-
var css_248z$
|
|
1681
|
-
var styles$
|
|
1682
|
-
styleInject(css_248z$
|
|
1699
|
+
var css_248z$t = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n cursor: pointer;\n background-color: var(--highlight);\n}";
|
|
1700
|
+
var styles$t = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1701
|
+
styleInject(css_248z$t);
|
|
1683
1702
|
|
|
1684
1703
|
const ExpansionPanelHeader = (props) => {
|
|
1685
1704
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1687,15 +1706,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1687
1706
|
e.stopPropagation();
|
|
1688
1707
|
onClick && onClick(e);
|
|
1689
1708
|
};
|
|
1690
|
-
return (React.createElement("div", { className: styles$
|
|
1709
|
+
return (React.createElement("div", { className: styles$t.expansionPanelHeader, onClick: handleClick },
|
|
1691
1710
|
children,
|
|
1692
1711
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1693
1712
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1694
1713
|
};
|
|
1695
1714
|
|
|
1696
|
-
var css_248z$
|
|
1697
|
-
var styles$
|
|
1698
|
-
styleInject(css_248z$
|
|
1715
|
+
var css_248z$s = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n box-shadow: var(--shadow);\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0;\n}";
|
|
1716
|
+
var styles$s = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1717
|
+
styleInject(css_248z$s);
|
|
1699
1718
|
|
|
1700
1719
|
const ExpansionPanel = (props) => {
|
|
1701
1720
|
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
@@ -1705,11 +1724,11 @@ const ExpansionPanel = (props) => {
|
|
|
1705
1724
|
}, [isExpanded]);
|
|
1706
1725
|
const getCssClasses = () => {
|
|
1707
1726
|
const cssClasses = [];
|
|
1708
|
-
cssClasses.push(styles$
|
|
1727
|
+
cssClasses.push(styles$s.expansionPanel);
|
|
1709
1728
|
if (_isExpanded) {
|
|
1710
|
-
cssClasses.push(styles$
|
|
1729
|
+
cssClasses.push(styles$s.isExpanded);
|
|
1711
1730
|
}
|
|
1712
|
-
shadow && cssClasses.push(styles$
|
|
1731
|
+
shadow && cssClasses.push(styles$s.shadow);
|
|
1713
1732
|
return cssClasses.filter(css => css).join(' ');
|
|
1714
1733
|
};
|
|
1715
1734
|
const handleClickHeader = (event) => {
|
|
@@ -1722,17 +1741,17 @@ const ExpansionPanel = (props) => {
|
|
|
1722
1741
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1723
1742
|
};
|
|
1724
1743
|
|
|
1725
|
-
var css_248z$
|
|
1726
|
-
var styles$
|
|
1727
|
-
styleInject(css_248z$
|
|
1744
|
+
var css_248z$r = ".FloatingActionButton-module_fab__Rw3kd {\n box-shadow: var(--shadow);\n}\n\n.FloatingActionButton-module_fixed__XQOkG {\n position: fixed;\n z-index: 1000;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n top: 16px;\n left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n bottom: 16px;\n left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n top: 64px;\n right: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n bottom: 16px;\n right: 16px;\n}";
|
|
1745
|
+
var styles$r = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
|
|
1746
|
+
styleInject(css_248z$r);
|
|
1728
1747
|
|
|
1729
1748
|
const FloatingActionButton = (props) => {
|
|
1730
1749
|
const { className, icon, color = COLOR.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1731
1750
|
const getCssClasses = () => {
|
|
1732
1751
|
const cssClasses = [];
|
|
1733
|
-
cssClasses.push(styles$
|
|
1734
|
-
fixed && cssClasses.push(styles$
|
|
1735
|
-
position && fixed && cssClasses.push(styles$
|
|
1752
|
+
cssClasses.push(styles$r.fab);
|
|
1753
|
+
fixed && cssClasses.push(styles$r.fixed);
|
|
1754
|
+
position && fixed && cssClasses.push(styles$r[position]);
|
|
1736
1755
|
className && cssClasses.push(className);
|
|
1737
1756
|
return cssClasses.filter(css => css).join(' ');
|
|
1738
1757
|
};
|
|
@@ -1743,14 +1762,14 @@ const FloatingActionButton = (props) => {
|
|
|
1743
1762
|
return (React.createElement(IconButton, { className: getCssClasses(), color: color, size: size, isActive: isActive, disabled: disabled, icon: icon, variant: VARIANT.contained, onClick: handleClick }));
|
|
1744
1763
|
};
|
|
1745
1764
|
|
|
1746
|
-
var css_248z$
|
|
1747
|
-
var styles$
|
|
1748
|
-
styleInject(css_248z$
|
|
1765
|
+
var css_248z$q = ".Link-module_link__YlJQl {\n color: var(--primary);\n text-decoration: underline;\n}\n.Link-module_link__YlJQl:hover {\n color: var(--primary-dark);\n}";
|
|
1766
|
+
var styles$q = {"link":"Link-module_link__YlJQl"};
|
|
1767
|
+
styleInject(css_248z$q);
|
|
1749
1768
|
|
|
1750
1769
|
const Link = (props) => {
|
|
1751
1770
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1752
1771
|
const [status, setStatus] = useState(STATUS.NORMAL);
|
|
1753
|
-
const [cssClassName] = useCssClasses([styles$
|
|
1772
|
+
const [cssClassName] = useCssClasses([styles$q.link, className, status]);
|
|
1754
1773
|
const onMouseEnter = () => {
|
|
1755
1774
|
setStatus(STATUS.HOVERED);
|
|
1756
1775
|
};
|
|
@@ -1760,15 +1779,15 @@ const Link = (props) => {
|
|
|
1760
1779
|
return (React.createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1761
1780
|
};
|
|
1762
1781
|
|
|
1763
|
-
var css_248z$
|
|
1764
|
-
var styles$
|
|
1765
|
-
styleInject(css_248z$
|
|
1782
|
+
var css_248z$p = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n.LoadingIndicator-module_loadingIndicatorContainer__GS9OG.LoadingIndicator-module_isFixed__WCFNG {\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px;\n}\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
|
|
1783
|
+
var styles$p = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1784
|
+
styleInject(css_248z$p);
|
|
1766
1785
|
|
|
1767
1786
|
const LoadingIndicator = (_a) => {
|
|
1768
1787
|
var rest = __rest(_a, []);
|
|
1769
1788
|
const getCssClasses = () => {
|
|
1770
1789
|
const cssClasses = [];
|
|
1771
|
-
cssClasses.push(styles$
|
|
1790
|
+
cssClasses.push(styles$p.loadingIndicator);
|
|
1772
1791
|
return cssClasses.filter(css => css).join(' ');
|
|
1773
1792
|
};
|
|
1774
1793
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1778,8 +1797,8 @@ const LoadingIndicator = (_a) => {
|
|
|
1778
1797
|
const LoadingIndicatorContainer = ({ children, isFixed }) => {
|
|
1779
1798
|
const getCssClasses = () => {
|
|
1780
1799
|
const cssClasses = [];
|
|
1781
|
-
cssClasses.push(styles$
|
|
1782
|
-
isFixed && cssClasses.push(styles$
|
|
1800
|
+
cssClasses.push(styles$p.loadingIndicatorContainer);
|
|
1801
|
+
isFixed && cssClasses.push(styles$p.isFixed);
|
|
1783
1802
|
return cssClasses.filter(css => css).join(' ');
|
|
1784
1803
|
};
|
|
1785
1804
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1807,45 +1826,45 @@ class LoadingIndicatorService {
|
|
|
1807
1826
|
}
|
|
1808
1827
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1809
1828
|
|
|
1810
|
-
var css_248z$
|
|
1811
|
-
var styles$
|
|
1812
|
-
styleInject(css_248z$
|
|
1829
|
+
var css_248z$o = ".ModalHeader-module_modalHeader__tw-u- {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1rem;\n border-top-left-radius: calc(0.3rem - 1px);\n border-top-right-radius: calc(0.3rem - 1px);\n border-bottom: none;\n align-items: center;\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n margin-bottom: 0;\n line-height: 1.5;\n}";
|
|
1830
|
+
var styles$o = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1831
|
+
styleInject(css_248z$o);
|
|
1813
1832
|
|
|
1814
1833
|
const ModalHeader = (props) => {
|
|
1815
1834
|
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1816
1835
|
const handleClick = () => {
|
|
1817
1836
|
onClose && onClose();
|
|
1818
1837
|
};
|
|
1819
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
1820
|
-
React.createElement("h5", { className: styles$
|
|
1838
|
+
return (React.createElement("div", Object.assign({ className: styles$o.modalHeader }, rest),
|
|
1839
|
+
React.createElement("h5", { className: styles$o.modalTitle }, children),
|
|
1821
1840
|
isDismissable &&
|
|
1822
1841
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
1823
1842
|
};
|
|
1824
1843
|
|
|
1825
|
-
var css_248z$
|
|
1826
|
-
var styles$
|
|
1827
|
-
styleInject(css_248z$
|
|
1844
|
+
var css_248z$n = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem;\n}";
|
|
1845
|
+
var styles$n = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1846
|
+
styleInject(css_248z$n);
|
|
1828
1847
|
|
|
1829
|
-
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$
|
|
1848
|
+
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$n.modalBody }, children));
|
|
1830
1849
|
|
|
1831
|
-
var css_248z$
|
|
1832
|
-
var styles$
|
|
1833
|
-
styleInject(css_248z$
|
|
1850
|
+
var css_248z$m = ".ModalFooter-module_modalFooter__SNm-f {\n display: flex;\n flex-wrap: wrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n padding: 0.75rem;\n border-bottom-right-radius: calc(0.3rem - 1px);\n border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n margin: 0.25rem;\n}";
|
|
1851
|
+
var styles$m = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1852
|
+
styleInject(css_248z$m);
|
|
1834
1853
|
|
|
1835
|
-
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$
|
|
1854
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$m.modalFooter }, children));
|
|
1836
1855
|
|
|
1837
|
-
var css_248z$
|
|
1838
|
-
var styles$
|
|
1839
|
-
styleInject(css_248z$
|
|
1856
|
+
var css_248z$l = ".Modal-module_modal__HMxWV {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n z-index: 1111 !important;\n border-radius: var(--borderRadius);\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_sm__CsR6U {\n max-width: 300px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_md__lNggx {\n max-width: 500px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_lg__6dtT2 {\n max-width: 1140px;\n}\n@media (min-width: 576px) {\n .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n max-width: 600px;\n }\n}\n\n.Modal-module_modalDialog__fNqyK {\n position: relative;\n width: auto;\n pointer-events: none;\n}\n\n.Modal-module_modalDialogCentered__sa2wv {\n min-height: calc(100% - 3.5rem);\n display: flex;\n align-items: center;\n}\n\n.Modal-module_modalContent__9wAwB {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n pointer-events: auto;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 0.3rem;\n box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);\n outline: 0;\n}\n@media (min-width: 576px) {\n .Modal-module_modalContent__9wAwB {\n max-width: 500px;\n margin: 1.75rem auto;\n }\n}\n\n.Modal-module_fullscreen__iepGa {\n width: 100% !important;\n height: 100% !important;\n max-height: 100% !important;\n margin: 0;\n padding: 0;\n}\n.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n height: auto;\n min-height: 100%;\n max-height: 100%;\n border-radius: 0;\n overflow: auto;\n max-width: 100%;\n}\n@media (min-width: 320px) {\n .Modal-module_fullscreen__iepGa {\n max-width: 100% !important;\n }\n}";
|
|
1857
|
+
var styles$l = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module_modal-dialog__U2wGf","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
|
|
1858
|
+
styleInject(css_248z$l);
|
|
1840
1859
|
|
|
1841
1860
|
const Modal = (props) => {
|
|
1842
1861
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1843
1862
|
const getCssClass = () => {
|
|
1844
1863
|
const cssClasses = [];
|
|
1845
|
-
cssClasses.push(styles$
|
|
1846
|
-
cssClasses.push(styles$
|
|
1847
|
-
fullScreen && cssClasses.push(styles$
|
|
1848
|
-
size && cssClasses.push(styles$
|
|
1864
|
+
cssClasses.push(styles$l.modalDialog);
|
|
1865
|
+
cssClasses.push(styles$l.modalDialogCentered);
|
|
1866
|
+
fullScreen && cssClasses.push(styles$l.fullscreen);
|
|
1867
|
+
size && cssClasses.push(styles$l[size]);
|
|
1849
1868
|
className && cssClasses.push(className);
|
|
1850
1869
|
return cssClasses.filter(r => r).join(' ');
|
|
1851
1870
|
};
|
|
@@ -1859,9 +1878,9 @@ const Modal = (props) => {
|
|
|
1859
1878
|
onBackdropClick && onBackdropClick();
|
|
1860
1879
|
};
|
|
1861
1880
|
return (React.createElement(React.Fragment, null,
|
|
1862
|
-
React.createElement("div", { className: styles$
|
|
1881
|
+
React.createElement("div", { className: styles$l.modal },
|
|
1863
1882
|
React.createElement("div", { className: getCssClass() },
|
|
1864
|
-
React.createElement("div", { className: styles$
|
|
1883
|
+
React.createElement("div", { className: styles$l.modalContent },
|
|
1865
1884
|
header &&
|
|
1866
1885
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1867
1886
|
React.createElement(ModalBody, null, children),
|
|
@@ -1986,29 +2005,88 @@ const NumberSelect = (props) => {
|
|
|
1986
2005
|
return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
1987
2006
|
};
|
|
1988
2007
|
|
|
1989
|
-
var css_248z$
|
|
1990
|
-
var styles$
|
|
1991
|
-
styleInject(css_248z$
|
|
2008
|
+
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}";
|
|
2009
|
+
var styles$k = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2010
|
+
styleInject(css_248z$k);
|
|
2011
|
+
|
|
2012
|
+
const Tooltip = (props) => {
|
|
2013
|
+
const { children, text, placement = 'bottom' } = props;
|
|
2014
|
+
const [show, setShow] = useState(false);
|
|
2015
|
+
const refChild = useRef();
|
|
2016
|
+
const refTooltip = useRef();
|
|
2017
|
+
useEffect(() => {
|
|
2018
|
+
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2019
|
+
// TODO - extract to own component?
|
|
2020
|
+
createPopper(refChild.current, refTooltip.current, {
|
|
2021
|
+
placement: placement,
|
|
2022
|
+
modifiers: [
|
|
2023
|
+
{
|
|
2024
|
+
name: 'offset',
|
|
2025
|
+
options: { offset: [0, 8] }
|
|
2026
|
+
},
|
|
2027
|
+
]
|
|
2028
|
+
});
|
|
2029
|
+
}
|
|
2030
|
+
}, [show]);
|
|
2031
|
+
const handleMouseOver = () => {
|
|
2032
|
+
setShow(true);
|
|
2033
|
+
};
|
|
2034
|
+
const handleMouseLeave = () => {
|
|
2035
|
+
setShow(false);
|
|
2036
|
+
};
|
|
2037
|
+
return (React.createElement(React.Fragment, null,
|
|
2038
|
+
React.createElement("div", { className: styles$k.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2039
|
+
onMouseOver: handleMouseOver,
|
|
2040
|
+
onMouseLeave: handleMouseLeave,
|
|
2041
|
+
})),
|
|
2042
|
+
show && text &&
|
|
2043
|
+
React.createElement("div", { className: styles$k.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2044
|
+
text,
|
|
2045
|
+
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2046
|
+
};
|
|
2047
|
+
|
|
2048
|
+
var css_248z$j = ".ProgressBar-module_progressBarContainer__vtbBw {\n display: flex;\n height: var(--progress-height);\n overflow: hidden;\n background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n color: var(--progress-bar-color);\n text-align: center;\n white-space: nowrap;\n transition: var(--progress-bar-transition);\n background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n width: 100%;\n height: 100%;\n animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n 0% {\n transform: translateX(0) scaleX(0);\n }\n 40% {\n transform: translateX(0) scaleX(0.4);\n }\n 100% {\n transform: translateX(100%) scaleX(0.5);\n }\n}";
|
|
2049
|
+
var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2050
|
+
styleInject(css_248z$j);
|
|
1992
2051
|
|
|
1993
2052
|
const ProgressBar = (props) => {
|
|
1994
2053
|
const { className, color = COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
2054
|
+
const [model, setModel] = useState();
|
|
2055
|
+
useEffect(() => {
|
|
2056
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2057
|
+
}, [color]);
|
|
2058
|
+
useEffect(() => {
|
|
2059
|
+
let newValue = value;
|
|
2060
|
+
if (value && value < 0) {
|
|
2061
|
+
newValue = 0;
|
|
2062
|
+
}
|
|
2063
|
+
if (value && value > 100) {
|
|
2064
|
+
newValue = 100;
|
|
2065
|
+
}
|
|
2066
|
+
setModel(newValue);
|
|
2067
|
+
}, [value]);
|
|
1995
2068
|
const getCssClasses = () => {
|
|
1996
2069
|
const cssClasses = [];
|
|
1997
|
-
cssClasses.push(styles$
|
|
2070
|
+
cssClasses.push(styles$j.progressBarContainer);
|
|
1998
2071
|
className && cssClasses.push(className);
|
|
1999
2072
|
return cssClasses.filter(r => r).join(' ');
|
|
2000
2073
|
};
|
|
2001
2074
|
const getCssClassesBar = () => {
|
|
2002
2075
|
const cssClasses = [];
|
|
2003
|
-
cssClasses.push(styles$
|
|
2004
|
-
indeterminate && cssClasses.push(styles$
|
|
2076
|
+
cssClasses.push(styles$j.progressBar);
|
|
2077
|
+
indeterminate && cssClasses.push(styles$j['indeterminate']);
|
|
2005
2078
|
return cssClasses.filter(r => r).join(' ');
|
|
2006
2079
|
};
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2080
|
+
const getStyle = () => {
|
|
2081
|
+
let width = model && model >= 0 ? model : 0;
|
|
2082
|
+
if (indeterminate) {
|
|
2083
|
+
width = 100;
|
|
2084
|
+
}
|
|
2085
|
+
return `${width}%`;
|
|
2086
|
+
};
|
|
2087
|
+
return (React.createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2088
|
+
React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2089
|
+
React.createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2012
2090
|
};
|
|
2013
2091
|
|
|
2014
2092
|
class SidebarItemModel {
|
|
@@ -2088,25 +2166,25 @@ const Sidebar = (props) => {
|
|
|
2088
2166
|
!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
2167
|
};
|
|
2090
2168
|
|
|
2091
|
-
var css_248z$
|
|
2092
|
-
var styles$
|
|
2093
|
-
styleInject(css_248z$
|
|
2169
|
+
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}";
|
|
2170
|
+
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"};
|
|
2171
|
+
styleInject(css_248z$i);
|
|
2094
2172
|
|
|
2095
2173
|
const Snackbar = (props) => {
|
|
2096
2174
|
const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
2097
2175
|
const getCssClasses = () => {
|
|
2098
2176
|
const cssClasses = [];
|
|
2099
|
-
cssClasses.push(styles$
|
|
2177
|
+
cssClasses.push(styles$i.snackbar);
|
|
2100
2178
|
cssClasses.push(`shadow-lg`);
|
|
2101
|
-
cssClasses.push(styles$
|
|
2179
|
+
cssClasses.push(styles$i[color]);
|
|
2102
2180
|
return cssClasses.filter(css => css).join(' ');
|
|
2103
2181
|
};
|
|
2104
2182
|
const handleClickAction = (e) => {
|
|
2105
2183
|
onOk && onOk(e);
|
|
2106
2184
|
};
|
|
2107
2185
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2108
|
-
React.createElement("div", { className: styles$
|
|
2109
|
-
React.createElement("div", { className: styles$
|
|
2186
|
+
React.createElement("div", { className: styles$i.text }, children),
|
|
2187
|
+
React.createElement("div", { className: styles$i.action + ' text-accent', onClick: handleClickAction },
|
|
2110
2188
|
React.createElement("span", null, actionText))));
|
|
2111
2189
|
};
|
|
2112
2190
|
|
|
@@ -2144,29 +2222,29 @@ class SnackbarService {
|
|
|
2144
2222
|
}
|
|
2145
2223
|
const snackbarService = new SnackbarService();
|
|
2146
2224
|
|
|
2147
|
-
var css_248z$
|
|
2148
|
-
var styles$
|
|
2149
|
-
styleInject(css_248z$
|
|
2225
|
+
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}";
|
|
2226
|
+
var styles$h = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2227
|
+
styleInject(css_248z$h);
|
|
2150
2228
|
|
|
2151
2229
|
const SpeedDialActions = (props) => {
|
|
2152
2230
|
const { children } = props;
|
|
2153
2231
|
const getCssClasses = () => {
|
|
2154
2232
|
const cssClasses = [];
|
|
2155
|
-
cssClasses.push(styles$
|
|
2233
|
+
cssClasses.push(styles$h.speedDialActions);
|
|
2156
2234
|
return cssClasses.filter(css => css).join(' ');
|
|
2157
2235
|
};
|
|
2158
2236
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
2159
2237
|
};
|
|
2160
2238
|
|
|
2161
|
-
var css_248z$
|
|
2162
|
-
var styles$
|
|
2163
|
-
styleInject(css_248z$
|
|
2239
|
+
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}";
|
|
2240
|
+
var styles$g = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2241
|
+
styleInject(css_248z$g);
|
|
2164
2242
|
|
|
2165
2243
|
const SpeedDial = (props) => {
|
|
2166
2244
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
2167
2245
|
const getCssClasses = () => {
|
|
2168
2246
|
const cssClasses = [];
|
|
2169
|
-
cssClasses.push(styles$
|
|
2247
|
+
cssClasses.push(styles$g.speedDial);
|
|
2170
2248
|
className && cssClasses.push(className);
|
|
2171
2249
|
return cssClasses.filter(css => css).join(' ');
|
|
2172
2250
|
};
|
|
@@ -2183,15 +2261,15 @@ const SpeedDial = (props) => {
|
|
|
2183
2261
|
React.createElement(SpeedDialActions, null, children)));
|
|
2184
2262
|
};
|
|
2185
2263
|
|
|
2186
|
-
var css_248z$
|
|
2187
|
-
var styles$
|
|
2188
|
-
styleInject(css_248z$
|
|
2264
|
+
var css_248z$f = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2265
|
+
var styles$f = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2266
|
+
styleInject(css_248z$f);
|
|
2189
2267
|
|
|
2190
2268
|
const SpeedDialAction = (props) => {
|
|
2191
2269
|
const { icon, color = COLOR.light, onClick, className } = props;
|
|
2192
2270
|
const getCssClasses = () => {
|
|
2193
2271
|
const cssClasses = [];
|
|
2194
|
-
cssClasses.push(styles$
|
|
2272
|
+
cssClasses.push(styles$f.speedDialAction);
|
|
2195
2273
|
className && cssClasses.push(className);
|
|
2196
2274
|
return cssClasses.filter(css => css).join(' ');
|
|
2197
2275
|
};
|
|
@@ -2208,15 +2286,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2208
2286
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2209
2287
|
};
|
|
2210
2288
|
|
|
2211
|
-
var css_248z$
|
|
2212
|
-
var styles$
|
|
2213
|
-
styleInject(css_248z$
|
|
2289
|
+
var css_248z$e = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2290
|
+
var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2291
|
+
styleInject(css_248z$e);
|
|
2214
2292
|
|
|
2215
2293
|
const StepperActions = (props) => {
|
|
2216
2294
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2217
2295
|
const getCssClasses = () => {
|
|
2218
2296
|
const cssClasses = [];
|
|
2219
|
-
cssClasses.push(styles$
|
|
2297
|
+
cssClasses.push(styles$e.stepperActions);
|
|
2220
2298
|
className && cssClasses.push(className);
|
|
2221
2299
|
return cssClasses.filter(css => css).join(' ');
|
|
2222
2300
|
};
|
|
@@ -2233,31 +2311,31 @@ const StepPanel = (props) => {
|
|
|
2233
2311
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
2234
2312
|
};
|
|
2235
2313
|
|
|
2236
|
-
var css_248z$
|
|
2237
|
-
var styles$
|
|
2238
|
-
styleInject(css_248z$
|
|
2314
|
+
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}";
|
|
2315
|
+
var styles$d = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2316
|
+
styleInject(css_248z$d);
|
|
2239
2317
|
|
|
2240
2318
|
const StepConnector = (props) => {
|
|
2241
2319
|
const { isActive, isHorizontal = true } = props;
|
|
2242
2320
|
const getCssClassesConnector = () => {
|
|
2243
2321
|
const cssClasses = [];
|
|
2244
|
-
cssClasses.push(styles$
|
|
2322
|
+
cssClasses.push(styles$d.stepConnector);
|
|
2245
2323
|
return cssClasses.filter(css => css).join(' ');
|
|
2246
2324
|
};
|
|
2247
2325
|
const getCssClassesLine = () => {
|
|
2248
2326
|
const cssClasses = [];
|
|
2249
|
-
cssClasses.push(styles$
|
|
2250
|
-
isActive && cssClasses.push(styles$
|
|
2251
|
-
isHorizontal && cssClasses.push(styles$
|
|
2327
|
+
cssClasses.push(styles$d.stepConnectorLine);
|
|
2328
|
+
isActive && cssClasses.push(styles$d['isActive']);
|
|
2329
|
+
isHorizontal && cssClasses.push(styles$d.stepConnectorLineHorizontal);
|
|
2252
2330
|
return cssClasses.filter(css => css).join(' ');
|
|
2253
2331
|
};
|
|
2254
2332
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
2255
2333
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
2256
2334
|
};
|
|
2257
2335
|
|
|
2258
|
-
var css_248z$
|
|
2259
|
-
var styles$
|
|
2260
|
-
styleInject(css_248z$
|
|
2336
|
+
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}";
|
|
2337
|
+
var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2338
|
+
styleInject(css_248z$c);
|
|
2261
2339
|
|
|
2262
2340
|
const Stepper = (props) => {
|
|
2263
2341
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2345,8 +2423,8 @@ const Stepper = (props) => {
|
|
|
2345
2423
|
};
|
|
2346
2424
|
const getCssClasses = () => {
|
|
2347
2425
|
const cssClasses = [];
|
|
2348
|
-
cssClasses.push(styles$
|
|
2349
|
-
isHorizontal && cssClasses.push(styles$
|
|
2426
|
+
cssClasses.push(styles$c.stepper);
|
|
2427
|
+
isHorizontal && cssClasses.push(styles$c['isHorizontal']);
|
|
2350
2428
|
return cssClasses.filter(css => css).join(' ');
|
|
2351
2429
|
};
|
|
2352
2430
|
return (React.createElement(React.Fragment, null, steps &&
|
|
@@ -2359,17 +2437,17 @@ const Stepper = (props) => {
|
|
|
2359
2437
|
React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2360
2438
|
};
|
|
2361
2439
|
|
|
2362
|
-
var css_248z$
|
|
2363
|
-
var styles$
|
|
2364
|
-
styleInject(css_248z$
|
|
2440
|
+
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}";
|
|
2441
|
+
var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
|
|
2442
|
+
styleInject(css_248z$b);
|
|
2365
2443
|
|
|
2366
2444
|
const Wrapper = (props) => {
|
|
2367
2445
|
const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
|
|
2368
2446
|
const getCssClasses = () => {
|
|
2369
2447
|
const cssClasses = [];
|
|
2370
|
-
cssClasses.push(styles$
|
|
2371
|
-
cssClasses.push(styles$
|
|
2372
|
-
wrap && cssClasses.push(styles$
|
|
2448
|
+
cssClasses.push(styles$b.typography);
|
|
2449
|
+
cssClasses.push(styles$b.as);
|
|
2450
|
+
wrap && cssClasses.push(styles$b.wrap);
|
|
2373
2451
|
className && cssClasses.push(className);
|
|
2374
2452
|
return cssClasses.filter(css => css).join(' ');
|
|
2375
2453
|
};
|
|
@@ -2380,9 +2458,9 @@ const Typography = (_a) => {
|
|
|
2380
2458
|
return (React.createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2381
2459
|
};
|
|
2382
2460
|
|
|
2383
|
-
var css_248z$
|
|
2384
|
-
var styles$
|
|
2385
|
-
styleInject(css_248z$
|
|
2461
|
+
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}";
|
|
2462
|
+
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"};
|
|
2463
|
+
styleInject(css_248z$a);
|
|
2386
2464
|
|
|
2387
2465
|
const Step = (props) => {
|
|
2388
2466
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2394,29 +2472,29 @@ const Step = (props) => {
|
|
|
2394
2472
|
};
|
|
2395
2473
|
const getCssClasses = () => {
|
|
2396
2474
|
const cssClasses = [];
|
|
2397
|
-
cssClasses.push(styles$
|
|
2398
|
-
label && showLabel && cssClasses.push(styles$
|
|
2399
|
-
isDisabled && cssClasses.push(styles$
|
|
2475
|
+
cssClasses.push(styles$a.stepWrapper);
|
|
2476
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2477
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2400
2478
|
className && cssClasses.push(className);
|
|
2401
2479
|
return cssClasses.filter(css => css).join(' ');
|
|
2402
2480
|
};
|
|
2403
2481
|
const getCssClassesStep = () => {
|
|
2404
2482
|
const cssClasses = [];
|
|
2405
|
-
cssClasses.push(styles$
|
|
2406
|
-
label && showLabel && cssClasses.push(styles$
|
|
2407
|
-
isDisabled && cssClasses.push(styles$
|
|
2483
|
+
cssClasses.push(styles$a.step);
|
|
2484
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2485
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2408
2486
|
return cssClasses.filter(css => css).join(' ');
|
|
2409
2487
|
};
|
|
2410
2488
|
const getCssClassesStepValue = () => {
|
|
2411
2489
|
const cssClasses = [];
|
|
2412
|
-
cssClasses.push(styles$
|
|
2490
|
+
cssClasses.push(styles$a.stepValue);
|
|
2413
2491
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2414
|
-
isActive && cssClasses.push(styles$
|
|
2492
|
+
isActive && cssClasses.push(styles$a.stepValue['isActive']);
|
|
2415
2493
|
return cssClasses.filter(css => css).join(' ');
|
|
2416
2494
|
};
|
|
2417
2495
|
return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2418
2496
|
React.createElement("div", { className: getCssClassesStep() },
|
|
2419
|
-
React.createElement(Icon, { className: styles$
|
|
2497
|
+
React.createElement(Icon, { className: styles$a.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
|
|
2420
2498
|
React.createElement(CircleSolidIcon, null)),
|
|
2421
2499
|
React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2422
2500
|
React.createElement(Icon, null,
|
|
@@ -2427,22 +2505,83 @@ const Step = (props) => {
|
|
|
2427
2505
|
React.createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2428
2506
|
};
|
|
2429
2507
|
|
|
2430
|
-
var css_248z$
|
|
2431
|
-
var styles$
|
|
2508
|
+
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}";
|
|
2509
|
+
var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","skeleton-loading":"SkeletonAvatar-module_skeleton-loading__eM-ZU"};
|
|
2510
|
+
styleInject(css_248z$9);
|
|
2511
|
+
|
|
2512
|
+
const SkeletonAvatar = (props) => {
|
|
2513
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2514
|
+
const getCssClasses = () => {
|
|
2515
|
+
const cssClasses = [];
|
|
2516
|
+
cssClasses.push(styles$9.skeletonAvatar);
|
|
2517
|
+
className && cssClasses.push(className);
|
|
2518
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2519
|
+
};
|
|
2520
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2521
|
+
};
|
|
2522
|
+
|
|
2523
|
+
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}";
|
|
2524
|
+
var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skeleton-loading":"SkeletonText-module_skeleton-loading__EYFfJ"};
|
|
2525
|
+
styleInject(css_248z$8);
|
|
2526
|
+
|
|
2527
|
+
const SkeletonText = (props) => {
|
|
2528
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2529
|
+
const getCssClasses = () => {
|
|
2530
|
+
const cssClasses = [];
|
|
2531
|
+
cssClasses.push(styles$8.skeletonText);
|
|
2532
|
+
className && cssClasses.push(className);
|
|
2533
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2534
|
+
};
|
|
2535
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2536
|
+
};
|
|
2537
|
+
|
|
2538
|
+
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}";
|
|
2539
|
+
var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","skeleton-loading":"SkeletonFooter-module_skeleton-loading__OEErv"};
|
|
2540
|
+
styleInject(css_248z$7);
|
|
2541
|
+
|
|
2542
|
+
const SkeletonFooter = (props) => {
|
|
2543
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2544
|
+
const getCssClasses = () => {
|
|
2545
|
+
const cssClasses = [];
|
|
2546
|
+
cssClasses.push(styles$7.skeletonFooter);
|
|
2547
|
+
className && cssClasses.push(className);
|
|
2548
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2549
|
+
};
|
|
2550
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2551
|
+
};
|
|
2552
|
+
|
|
2553
|
+
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}";
|
|
2554
|
+
var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","skeleton-loading":"SkeletonImage-module_skeleton-loading__04lJ7","div":"SkeletonImage-module_div__tqqrB"};
|
|
2432
2555
|
styleInject(css_248z$6);
|
|
2433
2556
|
|
|
2557
|
+
const SkeletonImage = (props) => {
|
|
2558
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2559
|
+
const getCssClasses = () => {
|
|
2560
|
+
const cssClasses = [];
|
|
2561
|
+
cssClasses.push(styles$6.skeletonImage);
|
|
2562
|
+
className && cssClasses.push(className);
|
|
2563
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2564
|
+
};
|
|
2565
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2566
|
+
React.createElement("div", { className: styles$6.img })));
|
|
2567
|
+
};
|
|
2568
|
+
|
|
2569
|
+
var css_248z$5 = ".Table-module_table__DHKNv {\n --bs-table-bg: transparent;\n --bs-table-accent-bg: transparent;\n --bs-table-striped-color: #212529;\n --bs-table-striped-bg: rgba(0, 0, 0, 0.05);\n --bs-table-active-color: #212529;\n --bs-table-active-bg: rgba(0, 0, 0, 0.1);\n --bs-table-hover-color: #212529;\n --bs-table-hover-bg: rgba(0, 0, 0, 0.075);\n width: 100%;\n margin-bottom: 1rem;\n color: #212529;\n vertical-align: top;\n border-color: #dee2e6;\n}\n.Table-module_table__DHKNv thead {\n vertical-align: bottom;\n}\n.Table-module_table__DHKNv > :not(caption) > * > * {\n padding: 0.5rem 0.5rem;\n background-color: var(--bs-table-bg);\n border-bottom-width: 1px;\n box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);\n}\n.Table-module_table__DHKNv > :not(:first-child) {\n border-top: 2px solid currentColor;\n}\n\n.Table-module_bordered__1Kp1p > :not(caption) > * > * {\n border-width: 0 1px;\n}\n.Table-module_bordered__1Kp1p > :not(caption) > * {\n border-width: 1px 0;\n}\n\n.Table-module_striped__jmxgE > tbody > tr:nth-of-type(odd) > * {\n --bs-table-accent-bg: var(--bs-table-striped-bg);\n color: var(--bs-table-striped-color);\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n --bs-table-accent-bg: var(--bs-table-hover-bg);\n color: var(--bs-table-hover-color);\n}\n\n.Table-module_tableResponsive__ykttB {\n overflow-x: auto;\n}";
|
|
2570
|
+
var styles$5 = {"table":"Table-module_table__DHKNv","bordered":"Table-module_bordered__1Kp1p","striped":"Table-module_striped__jmxgE","hover":"Table-module_hover__P6r3y","tableResponsive":"Table-module_tableResponsive__ykttB"};
|
|
2571
|
+
styleInject(css_248z$5);
|
|
2572
|
+
|
|
2434
2573
|
const Table = (props) => {
|
|
2435
2574
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2436
2575
|
const getCssClasses = () => {
|
|
2437
2576
|
const cssClasses = [];
|
|
2438
|
-
cssClasses.push(styles$
|
|
2439
|
-
bordered && cssClasses.push(styles$
|
|
2440
|
-
striped && cssClasses.push(styles$
|
|
2441
|
-
hover && cssClasses.push(styles$
|
|
2577
|
+
cssClasses.push(styles$5.table);
|
|
2578
|
+
bordered && cssClasses.push(styles$5['bordered']);
|
|
2579
|
+
striped && cssClasses.push(styles$5['striped']);
|
|
2580
|
+
hover && cssClasses.push(styles$5['hover']);
|
|
2442
2581
|
className && cssClasses.push(className);
|
|
2443
2582
|
return cssClasses.filter(css => css).join(' ');
|
|
2444
2583
|
};
|
|
2445
|
-
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$
|
|
2584
|
+
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$5.tableResponsive }, children) },
|
|
2446
2585
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2447
2586
|
};
|
|
2448
2587
|
|
|
@@ -2475,16 +2614,16 @@ const TableCell = (props) => {
|
|
|
2475
2614
|
React.createElement("td", Object.assign({}, rest), children)) }, children));
|
|
2476
2615
|
};
|
|
2477
2616
|
|
|
2478
|
-
var css_248z$
|
|
2479
|
-
var styles$
|
|
2480
|
-
styleInject(css_248z$
|
|
2617
|
+
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}";
|
|
2618
|
+
var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
|
|
2619
|
+
styleInject(css_248z$4);
|
|
2481
2620
|
|
|
2482
2621
|
const TabIndicator = (props) => {
|
|
2483
2622
|
const { color = COLOR.primary, width, amount, index } = props;
|
|
2484
2623
|
const getCssClasses = () => {
|
|
2485
2624
|
const cssClasses = [];
|
|
2486
|
-
cssClasses.push(styles$
|
|
2487
|
-
cssClasses.push(styles$
|
|
2625
|
+
cssClasses.push(styles$4.tabIndicator);
|
|
2626
|
+
cssClasses.push(styles$4[color]);
|
|
2488
2627
|
return cssClasses.filter(css => css).join(' ');
|
|
2489
2628
|
};
|
|
2490
2629
|
return (React.createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2493,9 +2632,9 @@ const TabIndicator = (props) => {
|
|
|
2493
2632
|
} }));
|
|
2494
2633
|
};
|
|
2495
2634
|
|
|
2496
|
-
var css_248z$
|
|
2497
|
-
var styles$
|
|
2498
|
-
styleInject(css_248z$
|
|
2635
|
+
var css_248z$3 = ".Tabs-module_tabs__YyRTZ {\n display: flex;\n position: relative;\n}";
|
|
2636
|
+
var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
2637
|
+
styleInject(css_248z$3);
|
|
2499
2638
|
|
|
2500
2639
|
const Tabs = (props) => {
|
|
2501
2640
|
const { children, className, fixed, color, indicatorColor, onChange, value } = props;
|
|
@@ -2510,7 +2649,7 @@ const Tabs = (props) => {
|
|
|
2510
2649
|
}, [children, value]);
|
|
2511
2650
|
const getCssClasses = () => {
|
|
2512
2651
|
const cssClasses = [];
|
|
2513
|
-
cssClasses.push(styles$
|
|
2652
|
+
cssClasses.push(styles$3.tabs);
|
|
2514
2653
|
className && cssClasses.push(className);
|
|
2515
2654
|
return cssClasses.filter(css => css).join(' ');
|
|
2516
2655
|
};
|
|
@@ -2534,15 +2673,15 @@ const Tabs = (props) => {
|
|
|
2534
2673
|
React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
|
|
2535
2674
|
};
|
|
2536
2675
|
|
|
2537
|
-
var css_248z$
|
|
2538
|
-
var styles$
|
|
2539
|
-
styleInject(css_248z$
|
|
2676
|
+
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}";
|
|
2677
|
+
var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
|
|
2678
|
+
styleInject(css_248z$2);
|
|
2540
2679
|
|
|
2541
2680
|
const Tab = (props) => {
|
|
2542
2681
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2543
2682
|
const getCssClasses = () => {
|
|
2544
2683
|
const cssClasses = [];
|
|
2545
|
-
cssClasses.push(styles$
|
|
2684
|
+
cssClasses.push(styles$2.tab);
|
|
2546
2685
|
if (isActive) {
|
|
2547
2686
|
cssClasses.push(`show active`);
|
|
2548
2687
|
}
|
|
@@ -2557,46 +2696,6 @@ const TabPanel = (props) => {
|
|
|
2557
2696
|
return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2558
2697
|
};
|
|
2559
2698
|
|
|
2560
|
-
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}";
|
|
2561
|
-
var styles$2 = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2562
|
-
styleInject(css_248z$2);
|
|
2563
|
-
|
|
2564
|
-
const Tooltip = (props) => {
|
|
2565
|
-
const { children, text, placement = 'bottom' } = props;
|
|
2566
|
-
const [show, setShow] = useState(false);
|
|
2567
|
-
const refChild = useRef();
|
|
2568
|
-
const refTooltip = useRef();
|
|
2569
|
-
useEffect(() => {
|
|
2570
|
-
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2571
|
-
// TODO - extract to own component?
|
|
2572
|
-
createPopper(refChild.current, refTooltip.current, {
|
|
2573
|
-
placement: placement,
|
|
2574
|
-
modifiers: [
|
|
2575
|
-
{
|
|
2576
|
-
name: 'offset',
|
|
2577
|
-
options: { offset: [0, 8] }
|
|
2578
|
-
},
|
|
2579
|
-
]
|
|
2580
|
-
});
|
|
2581
|
-
}
|
|
2582
|
-
}, [show]);
|
|
2583
|
-
const handleMouseOver = () => {
|
|
2584
|
-
setShow(true);
|
|
2585
|
-
};
|
|
2586
|
-
const handleMouseLeave = () => {
|
|
2587
|
-
setShow(false);
|
|
2588
|
-
};
|
|
2589
|
-
return (React.createElement(React.Fragment, null,
|
|
2590
|
-
React.createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2591
|
-
onMouseOver: handleMouseOver,
|
|
2592
|
-
onMouseLeave: handleMouseLeave,
|
|
2593
|
-
})),
|
|
2594
|
-
show && text &&
|
|
2595
|
-
React.createElement("div", { className: styles$2.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2596
|
-
text,
|
|
2597
|
-
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2598
|
-
};
|
|
2599
|
-
|
|
2600
2699
|
const HourSelect = (props) => {
|
|
2601
2700
|
const { className, value = 0, id, name, disabled, onChange } = props;
|
|
2602
2701
|
const [newValue, setNewValue] = useState(value);
|
|
@@ -2791,4 +2890,4 @@ const TreeItem = (props) => {
|
|
|
2791
2890
|
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2792
2891
|
};
|
|
2793
2892
|
|
|
2794
|
-
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, 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 };
|
|
2893
|
+
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 };
|