react-asc 23.5.1 → 23.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Form/validators/MinValidator.d.ts +1 -0
- package/components/Form/validators/index.d.ts +1 -0
- package/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 +476 -389
- package/index.js +480 -388
- package/package.json +1 -1
package/index.es.js
CHANGED
|
@@ -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,16 +1535,16 @@ const DateSelect = (props) => {
|
|
|
1528
1535
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1529
1536
|
// };
|
|
1530
1537
|
|
|
1531
|
-
var css_248z$
|
|
1532
|
-
var styles$
|
|
1533
|
-
styleInject(css_248z$
|
|
1538
|
+
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}";
|
|
1539
|
+
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"};
|
|
1540
|
+
styleInject(css_248z$z);
|
|
1534
1541
|
|
|
1535
1542
|
const Drawer = (props) => {
|
|
1536
1543
|
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
1544
|
useEffect(() => {
|
|
1538
|
-
document.body.classList.add(styles$
|
|
1545
|
+
document.body.classList.add(styles$z.drawerOpen);
|
|
1539
1546
|
return () => {
|
|
1540
|
-
document.body.classList.remove(styles$
|
|
1547
|
+
document.body.classList.remove(styles$z.drawerOpen);
|
|
1541
1548
|
};
|
|
1542
1549
|
}, []);
|
|
1543
1550
|
const handleClickBackdrop = () => {
|
|
@@ -1551,10 +1558,10 @@ const DrawerContent = (props) => {
|
|
|
1551
1558
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1552
1559
|
const getCssClasses = () => {
|
|
1553
1560
|
const cssClasses = [];
|
|
1554
|
-
cssClasses.push(styles$
|
|
1555
|
-
shadow && cssClasses.push(styles$
|
|
1556
|
-
!!permanent && cssClasses.push(styles$
|
|
1557
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1561
|
+
cssClasses.push(styles$z.drawer);
|
|
1562
|
+
shadow && cssClasses.push(styles$z.shadow);
|
|
1563
|
+
!!permanent && cssClasses.push(styles$z['permanent']);
|
|
1564
|
+
position === 'left' ? cssClasses.push(styles$z['left']) : cssClasses.push(styles$z['right']);
|
|
1558
1565
|
className && cssClasses.push(className);
|
|
1559
1566
|
return cssClasses.filter(css => css).join(' ');
|
|
1560
1567
|
};
|
|
@@ -1568,9 +1575,9 @@ const DrawerContent = (props) => {
|
|
|
1568
1575
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1569
1576
|
};
|
|
1570
1577
|
|
|
1571
|
-
var css_248z$
|
|
1572
|
-
var styles$
|
|
1573
|
-
styleInject(css_248z$
|
|
1578
|
+
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}";
|
|
1579
|
+
var styles$y = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1580
|
+
styleInject(css_248z$y);
|
|
1574
1581
|
|
|
1575
1582
|
const MenuBody = (props) => {
|
|
1576
1583
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1601,8 +1608,8 @@ const MenuBody = (props) => {
|
|
|
1601
1608
|
}, [menuBodyRef]);
|
|
1602
1609
|
const getCssClasses = () => {
|
|
1603
1610
|
const cssClasses = [];
|
|
1604
|
-
cssClasses.push(styles$
|
|
1605
|
-
shadow && cssClasses.push(styles$
|
|
1611
|
+
cssClasses.push(styles$y.menuBody);
|
|
1612
|
+
shadow && cssClasses.push(styles$y.shadow);
|
|
1606
1613
|
className && cssClasses.push(className);
|
|
1607
1614
|
return cssClasses.filter(css => css).join(' ');
|
|
1608
1615
|
};
|
|
@@ -1614,9 +1621,9 @@ const MenuBody = (props) => {
|
|
|
1614
1621
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1615
1622
|
};
|
|
1616
1623
|
|
|
1617
|
-
var css_248z$
|
|
1618
|
-
var styles$
|
|
1619
|
-
styleInject(css_248z$
|
|
1624
|
+
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1625
|
+
var styles$x = {"menu":"Menu-module_menu__p8QL-"};
|
|
1626
|
+
styleInject(css_248z$x);
|
|
1620
1627
|
|
|
1621
1628
|
const Menu = (props) => {
|
|
1622
1629
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
@@ -1624,7 +1631,7 @@ const Menu = (props) => {
|
|
|
1624
1631
|
const toggleContainerRef = useRef(null);
|
|
1625
1632
|
const getCssClasses = () => {
|
|
1626
1633
|
const cssClasses = [];
|
|
1627
|
-
cssClasses.push(styles$
|
|
1634
|
+
cssClasses.push(styles$x.menu);
|
|
1628
1635
|
className && cssClasses.push(className);
|
|
1629
1636
|
return cssClasses.filter(css => css).join(' ');
|
|
1630
1637
|
};
|
|
@@ -1637,17 +1644,17 @@ const Menu = (props) => {
|
|
|
1637
1644
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1638
1645
|
};
|
|
1639
1646
|
|
|
1640
|
-
var css_248z$
|
|
1641
|
-
var styles$
|
|
1642
|
-
styleInject(css_248z$
|
|
1647
|
+
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}";
|
|
1648
|
+
var styles$w = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1649
|
+
styleInject(css_248z$w);
|
|
1643
1650
|
|
|
1644
1651
|
const MenuItem = (props) => {
|
|
1645
1652
|
const { children, onClick, type = 'item' } = props;
|
|
1646
1653
|
const getCssClasses = () => {
|
|
1647
1654
|
const cssClasses = [];
|
|
1648
|
-
cssClasses.push(styles$
|
|
1655
|
+
cssClasses.push(styles$w.menuItem);
|
|
1649
1656
|
if (type === 'header') {
|
|
1650
|
-
cssClasses.push(styles$
|
|
1657
|
+
cssClasses.push(styles$w.menuItemHeader);
|
|
1651
1658
|
}
|
|
1652
1659
|
return cssClasses.filter(css => css).join(' ');
|
|
1653
1660
|
};
|
|
@@ -1663,23 +1670,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1663
1670
|
return (React.createElement(Fragment, null, children));
|
|
1664
1671
|
};
|
|
1665
1672
|
|
|
1666
|
-
var css_248z$
|
|
1667
|
-
var styles$
|
|
1668
|
-
styleInject(css_248z$
|
|
1673
|
+
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}";
|
|
1674
|
+
var styles$v = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1675
|
+
styleInject(css_248z$v);
|
|
1669
1676
|
|
|
1670
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1677
|
+
const MenuDivider = () => React.createElement("div", { className: styles$v.menuItemDivider });
|
|
1671
1678
|
|
|
1672
|
-
var css_248z$
|
|
1673
|
-
var styles$
|
|
1674
|
-
styleInject(css_248z$
|
|
1679
|
+
var css_248z$u = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px;\n}";
|
|
1680
|
+
var styles$u = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1681
|
+
styleInject(css_248z$u);
|
|
1675
1682
|
|
|
1676
1683
|
const ExpansionPanelContent = ({ children }) => {
|
|
1677
|
-
return (React.createElement("div", { className: styles$
|
|
1684
|
+
return (React.createElement("div", { className: styles$u.expansionPanelContent }, children));
|
|
1678
1685
|
};
|
|
1679
1686
|
|
|
1680
|
-
var css_248z$
|
|
1681
|
-
var styles$
|
|
1682
|
-
styleInject(css_248z$
|
|
1687
|
+
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}";
|
|
1688
|
+
var styles$t = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1689
|
+
styleInject(css_248z$t);
|
|
1683
1690
|
|
|
1684
1691
|
const ExpansionPanelHeader = (props) => {
|
|
1685
1692
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1687,15 +1694,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1687
1694
|
e.stopPropagation();
|
|
1688
1695
|
onClick && onClick(e);
|
|
1689
1696
|
};
|
|
1690
|
-
return (React.createElement("div", { className: styles$
|
|
1697
|
+
return (React.createElement("div", { className: styles$t.expansionPanelHeader, onClick: handleClick },
|
|
1691
1698
|
children,
|
|
1692
1699
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1693
1700
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1694
1701
|
};
|
|
1695
1702
|
|
|
1696
|
-
var css_248z$
|
|
1697
|
-
var styles$
|
|
1698
|
-
styleInject(css_248z$
|
|
1703
|
+
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}";
|
|
1704
|
+
var styles$s = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1705
|
+
styleInject(css_248z$s);
|
|
1699
1706
|
|
|
1700
1707
|
const ExpansionPanel = (props) => {
|
|
1701
1708
|
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
@@ -1705,11 +1712,11 @@ const ExpansionPanel = (props) => {
|
|
|
1705
1712
|
}, [isExpanded]);
|
|
1706
1713
|
const getCssClasses = () => {
|
|
1707
1714
|
const cssClasses = [];
|
|
1708
|
-
cssClasses.push(styles$
|
|
1715
|
+
cssClasses.push(styles$s.expansionPanel);
|
|
1709
1716
|
if (_isExpanded) {
|
|
1710
|
-
cssClasses.push(styles$
|
|
1717
|
+
cssClasses.push(styles$s.isExpanded);
|
|
1711
1718
|
}
|
|
1712
|
-
shadow && cssClasses.push(styles$
|
|
1719
|
+
shadow && cssClasses.push(styles$s.shadow);
|
|
1713
1720
|
return cssClasses.filter(css => css).join(' ');
|
|
1714
1721
|
};
|
|
1715
1722
|
const handleClickHeader = (event) => {
|
|
@@ -1722,17 +1729,17 @@ const ExpansionPanel = (props) => {
|
|
|
1722
1729
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1723
1730
|
};
|
|
1724
1731
|
|
|
1725
|
-
var css_248z$
|
|
1726
|
-
var styles$
|
|
1727
|
-
styleInject(css_248z$
|
|
1732
|
+
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}";
|
|
1733
|
+
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"};
|
|
1734
|
+
styleInject(css_248z$r);
|
|
1728
1735
|
|
|
1729
1736
|
const FloatingActionButton = (props) => {
|
|
1730
1737
|
const { className, icon, color = COLOR.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1731
1738
|
const getCssClasses = () => {
|
|
1732
1739
|
const cssClasses = [];
|
|
1733
|
-
cssClasses.push(styles$
|
|
1734
|
-
fixed && cssClasses.push(styles$
|
|
1735
|
-
position && fixed && cssClasses.push(styles$
|
|
1740
|
+
cssClasses.push(styles$r.fab);
|
|
1741
|
+
fixed && cssClasses.push(styles$r.fixed);
|
|
1742
|
+
position && fixed && cssClasses.push(styles$r[position]);
|
|
1736
1743
|
className && cssClasses.push(className);
|
|
1737
1744
|
return cssClasses.filter(css => css).join(' ');
|
|
1738
1745
|
};
|
|
@@ -1743,14 +1750,14 @@ const FloatingActionButton = (props) => {
|
|
|
1743
1750
|
return (React.createElement(IconButton, { className: getCssClasses(), color: color, size: size, isActive: isActive, disabled: disabled, icon: icon, variant: VARIANT.contained, onClick: handleClick }));
|
|
1744
1751
|
};
|
|
1745
1752
|
|
|
1746
|
-
var css_248z$
|
|
1747
|
-
var styles$
|
|
1748
|
-
styleInject(css_248z$
|
|
1753
|
+
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}";
|
|
1754
|
+
var styles$q = {"link":"Link-module_link__YlJQl"};
|
|
1755
|
+
styleInject(css_248z$q);
|
|
1749
1756
|
|
|
1750
1757
|
const Link = (props) => {
|
|
1751
1758
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1752
1759
|
const [status, setStatus] = useState(STATUS.NORMAL);
|
|
1753
|
-
const [cssClassName] = useCssClasses([styles$
|
|
1760
|
+
const [cssClassName] = useCssClasses([styles$q.link, className, status]);
|
|
1754
1761
|
const onMouseEnter = () => {
|
|
1755
1762
|
setStatus(STATUS.HOVERED);
|
|
1756
1763
|
};
|
|
@@ -1760,15 +1767,15 @@ const Link = (props) => {
|
|
|
1760
1767
|
return (React.createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1761
1768
|
};
|
|
1762
1769
|
|
|
1763
|
-
var css_248z$
|
|
1764
|
-
var styles$
|
|
1765
|
-
styleInject(css_248z$
|
|
1770
|
+
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}";
|
|
1771
|
+
var styles$p = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1772
|
+
styleInject(css_248z$p);
|
|
1766
1773
|
|
|
1767
1774
|
const LoadingIndicator = (_a) => {
|
|
1768
1775
|
var rest = __rest(_a, []);
|
|
1769
1776
|
const getCssClasses = () => {
|
|
1770
1777
|
const cssClasses = [];
|
|
1771
|
-
cssClasses.push(styles$
|
|
1778
|
+
cssClasses.push(styles$p.loadingIndicator);
|
|
1772
1779
|
return cssClasses.filter(css => css).join(' ');
|
|
1773
1780
|
};
|
|
1774
1781
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1778,8 +1785,8 @@ const LoadingIndicator = (_a) => {
|
|
|
1778
1785
|
const LoadingIndicatorContainer = ({ children, isFixed }) => {
|
|
1779
1786
|
const getCssClasses = () => {
|
|
1780
1787
|
const cssClasses = [];
|
|
1781
|
-
cssClasses.push(styles$
|
|
1782
|
-
isFixed && cssClasses.push(styles$
|
|
1788
|
+
cssClasses.push(styles$p.loadingIndicatorContainer);
|
|
1789
|
+
isFixed && cssClasses.push(styles$p.isFixed);
|
|
1783
1790
|
return cssClasses.filter(css => css).join(' ');
|
|
1784
1791
|
};
|
|
1785
1792
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1807,45 +1814,45 @@ class LoadingIndicatorService {
|
|
|
1807
1814
|
}
|
|
1808
1815
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1809
1816
|
|
|
1810
|
-
var css_248z$
|
|
1811
|
-
var styles$
|
|
1812
|
-
styleInject(css_248z$
|
|
1817
|
+
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}";
|
|
1818
|
+
var styles$o = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1819
|
+
styleInject(css_248z$o);
|
|
1813
1820
|
|
|
1814
1821
|
const ModalHeader = (props) => {
|
|
1815
1822
|
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1816
1823
|
const handleClick = () => {
|
|
1817
1824
|
onClose && onClose();
|
|
1818
1825
|
};
|
|
1819
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
1820
|
-
React.createElement("h5", { className: styles$
|
|
1826
|
+
return (React.createElement("div", Object.assign({ className: styles$o.modalHeader }, rest),
|
|
1827
|
+
React.createElement("h5", { className: styles$o.modalTitle }, children),
|
|
1821
1828
|
isDismissable &&
|
|
1822
1829
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
1823
1830
|
};
|
|
1824
1831
|
|
|
1825
|
-
var css_248z$
|
|
1826
|
-
var styles$
|
|
1827
|
-
styleInject(css_248z$
|
|
1832
|
+
var css_248z$n = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem;\n}";
|
|
1833
|
+
var styles$n = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1834
|
+
styleInject(css_248z$n);
|
|
1828
1835
|
|
|
1829
|
-
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$
|
|
1836
|
+
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$n.modalBody }, children));
|
|
1830
1837
|
|
|
1831
|
-
var css_248z$
|
|
1832
|
-
var styles$
|
|
1833
|
-
styleInject(css_248z$
|
|
1838
|
+
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}";
|
|
1839
|
+
var styles$m = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1840
|
+
styleInject(css_248z$m);
|
|
1834
1841
|
|
|
1835
|
-
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$
|
|
1842
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$m.modalFooter }, children));
|
|
1836
1843
|
|
|
1837
|
-
var css_248z$
|
|
1838
|
-
var styles$
|
|
1839
|
-
styleInject(css_248z$
|
|
1844
|
+
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}";
|
|
1845
|
+
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"};
|
|
1846
|
+
styleInject(css_248z$l);
|
|
1840
1847
|
|
|
1841
1848
|
const Modal = (props) => {
|
|
1842
1849
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1843
1850
|
const getCssClass = () => {
|
|
1844
1851
|
const cssClasses = [];
|
|
1845
|
-
cssClasses.push(styles$
|
|
1846
|
-
cssClasses.push(styles$
|
|
1847
|
-
fullScreen && cssClasses.push(styles$
|
|
1848
|
-
size && cssClasses.push(styles$
|
|
1852
|
+
cssClasses.push(styles$l.modalDialog);
|
|
1853
|
+
cssClasses.push(styles$l.modalDialogCentered);
|
|
1854
|
+
fullScreen && cssClasses.push(styles$l.fullscreen);
|
|
1855
|
+
size && cssClasses.push(styles$l[size]);
|
|
1849
1856
|
className && cssClasses.push(className);
|
|
1850
1857
|
return cssClasses.filter(r => r).join(' ');
|
|
1851
1858
|
};
|
|
@@ -1859,9 +1866,9 @@ const Modal = (props) => {
|
|
|
1859
1866
|
onBackdropClick && onBackdropClick();
|
|
1860
1867
|
};
|
|
1861
1868
|
return (React.createElement(React.Fragment, null,
|
|
1862
|
-
React.createElement("div", { className: styles$
|
|
1869
|
+
React.createElement("div", { className: styles$l.modal },
|
|
1863
1870
|
React.createElement("div", { className: getCssClass() },
|
|
1864
|
-
React.createElement("div", { className: styles$
|
|
1871
|
+
React.createElement("div", { className: styles$l.modalContent },
|
|
1865
1872
|
header &&
|
|
1866
1873
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1867
1874
|
React.createElement(ModalBody, null, children),
|
|
@@ -1986,29 +1993,88 @@ const NumberSelect = (props) => {
|
|
|
1986
1993
|
return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
1987
1994
|
};
|
|
1988
1995
|
|
|
1989
|
-
var css_248z$
|
|
1990
|
-
var styles$
|
|
1991
|
-
styleInject(css_248z$
|
|
1996
|
+
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}";
|
|
1997
|
+
var styles$k = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
1998
|
+
styleInject(css_248z$k);
|
|
1999
|
+
|
|
2000
|
+
const Tooltip = (props) => {
|
|
2001
|
+
const { children, text, placement = 'bottom' } = props;
|
|
2002
|
+
const [show, setShow] = useState(false);
|
|
2003
|
+
const refChild = useRef();
|
|
2004
|
+
const refTooltip = useRef();
|
|
2005
|
+
useEffect(() => {
|
|
2006
|
+
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2007
|
+
// TODO - extract to own component?
|
|
2008
|
+
createPopper(refChild.current, refTooltip.current, {
|
|
2009
|
+
placement: placement,
|
|
2010
|
+
modifiers: [
|
|
2011
|
+
{
|
|
2012
|
+
name: 'offset',
|
|
2013
|
+
options: { offset: [0, 8] }
|
|
2014
|
+
},
|
|
2015
|
+
]
|
|
2016
|
+
});
|
|
2017
|
+
}
|
|
2018
|
+
}, [show]);
|
|
2019
|
+
const handleMouseOver = () => {
|
|
2020
|
+
setShow(true);
|
|
2021
|
+
};
|
|
2022
|
+
const handleMouseLeave = () => {
|
|
2023
|
+
setShow(false);
|
|
2024
|
+
};
|
|
2025
|
+
return (React.createElement(React.Fragment, null,
|
|
2026
|
+
React.createElement("div", { className: styles$k.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2027
|
+
onMouseOver: handleMouseOver,
|
|
2028
|
+
onMouseLeave: handleMouseLeave,
|
|
2029
|
+
})),
|
|
2030
|
+
show && text &&
|
|
2031
|
+
React.createElement("div", { className: styles$k.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2032
|
+
text,
|
|
2033
|
+
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2034
|
+
};
|
|
2035
|
+
|
|
2036
|
+
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}";
|
|
2037
|
+
var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2038
|
+
styleInject(css_248z$j);
|
|
1992
2039
|
|
|
1993
2040
|
const ProgressBar = (props) => {
|
|
1994
2041
|
const { className, color = COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
2042
|
+
const [model, setModel] = useState();
|
|
2043
|
+
useEffect(() => {
|
|
2044
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2045
|
+
}, [color]);
|
|
2046
|
+
useEffect(() => {
|
|
2047
|
+
let newValue = value;
|
|
2048
|
+
if (value && value < 0) {
|
|
2049
|
+
newValue = 0;
|
|
2050
|
+
}
|
|
2051
|
+
if (value && value > 100) {
|
|
2052
|
+
newValue = 100;
|
|
2053
|
+
}
|
|
2054
|
+
setModel(newValue);
|
|
2055
|
+
}, [value]);
|
|
1995
2056
|
const getCssClasses = () => {
|
|
1996
2057
|
const cssClasses = [];
|
|
1997
|
-
cssClasses.push(styles$
|
|
2058
|
+
cssClasses.push(styles$j.progressBarContainer);
|
|
1998
2059
|
className && cssClasses.push(className);
|
|
1999
2060
|
return cssClasses.filter(r => r).join(' ');
|
|
2000
2061
|
};
|
|
2001
2062
|
const getCssClassesBar = () => {
|
|
2002
2063
|
const cssClasses = [];
|
|
2003
|
-
cssClasses.push(styles$
|
|
2004
|
-
indeterminate && cssClasses.push(styles$
|
|
2064
|
+
cssClasses.push(styles$j.progressBar);
|
|
2065
|
+
indeterminate && cssClasses.push(styles$j['indeterminate']);
|
|
2005
2066
|
return cssClasses.filter(r => r).join(' ');
|
|
2006
2067
|
};
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
|
|
2068
|
+
const getStyle = () => {
|
|
2069
|
+
let width = model && model >= 0 ? model : 0;
|
|
2070
|
+
if (indeterminate) {
|
|
2071
|
+
width = 100;
|
|
2072
|
+
}
|
|
2073
|
+
return `${width}%`;
|
|
2074
|
+
};
|
|
2075
|
+
return (React.createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2076
|
+
React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2077
|
+
React.createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2012
2078
|
};
|
|
2013
2079
|
|
|
2014
2080
|
class SidebarItemModel {
|
|
@@ -2088,25 +2154,25 @@ const Sidebar = (props) => {
|
|
|
2088
2154
|
!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
2155
|
};
|
|
2090
2156
|
|
|
2091
|
-
var css_248z$
|
|
2092
|
-
var styles$
|
|
2093
|
-
styleInject(css_248z$
|
|
2157
|
+
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}";
|
|
2158
|
+
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"};
|
|
2159
|
+
styleInject(css_248z$i);
|
|
2094
2160
|
|
|
2095
2161
|
const Snackbar = (props) => {
|
|
2096
2162
|
const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
2097
2163
|
const getCssClasses = () => {
|
|
2098
2164
|
const cssClasses = [];
|
|
2099
|
-
cssClasses.push(styles$
|
|
2165
|
+
cssClasses.push(styles$i.snackbar);
|
|
2100
2166
|
cssClasses.push(`shadow-lg`);
|
|
2101
|
-
cssClasses.push(styles$
|
|
2167
|
+
cssClasses.push(styles$i[color]);
|
|
2102
2168
|
return cssClasses.filter(css => css).join(' ');
|
|
2103
2169
|
};
|
|
2104
2170
|
const handleClickAction = (e) => {
|
|
2105
2171
|
onOk && onOk(e);
|
|
2106
2172
|
};
|
|
2107
2173
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2108
|
-
React.createElement("div", { className: styles$
|
|
2109
|
-
React.createElement("div", { className: styles$
|
|
2174
|
+
React.createElement("div", { className: styles$i.text }, children),
|
|
2175
|
+
React.createElement("div", { className: styles$i.action + ' text-accent', onClick: handleClickAction },
|
|
2110
2176
|
React.createElement("span", null, actionText))));
|
|
2111
2177
|
};
|
|
2112
2178
|
|
|
@@ -2144,29 +2210,29 @@ class SnackbarService {
|
|
|
2144
2210
|
}
|
|
2145
2211
|
const snackbarService = new SnackbarService();
|
|
2146
2212
|
|
|
2147
|
-
var css_248z$
|
|
2148
|
-
var styles$
|
|
2149
|
-
styleInject(css_248z$
|
|
2213
|
+
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}";
|
|
2214
|
+
var styles$h = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2215
|
+
styleInject(css_248z$h);
|
|
2150
2216
|
|
|
2151
2217
|
const SpeedDialActions = (props) => {
|
|
2152
2218
|
const { children } = props;
|
|
2153
2219
|
const getCssClasses = () => {
|
|
2154
2220
|
const cssClasses = [];
|
|
2155
|
-
cssClasses.push(styles$
|
|
2221
|
+
cssClasses.push(styles$h.speedDialActions);
|
|
2156
2222
|
return cssClasses.filter(css => css).join(' ');
|
|
2157
2223
|
};
|
|
2158
2224
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
2159
2225
|
};
|
|
2160
2226
|
|
|
2161
|
-
var css_248z$
|
|
2162
|
-
var styles$
|
|
2163
|
-
styleInject(css_248z$
|
|
2227
|
+
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}";
|
|
2228
|
+
var styles$g = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2229
|
+
styleInject(css_248z$g);
|
|
2164
2230
|
|
|
2165
2231
|
const SpeedDial = (props) => {
|
|
2166
2232
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
2167
2233
|
const getCssClasses = () => {
|
|
2168
2234
|
const cssClasses = [];
|
|
2169
|
-
cssClasses.push(styles$
|
|
2235
|
+
cssClasses.push(styles$g.speedDial);
|
|
2170
2236
|
className && cssClasses.push(className);
|
|
2171
2237
|
return cssClasses.filter(css => css).join(' ');
|
|
2172
2238
|
};
|
|
@@ -2183,15 +2249,15 @@ const SpeedDial = (props) => {
|
|
|
2183
2249
|
React.createElement(SpeedDialActions, null, children)));
|
|
2184
2250
|
};
|
|
2185
2251
|
|
|
2186
|
-
var css_248z$
|
|
2187
|
-
var styles$
|
|
2188
|
-
styleInject(css_248z$
|
|
2252
|
+
var css_248z$f = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2253
|
+
var styles$f = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2254
|
+
styleInject(css_248z$f);
|
|
2189
2255
|
|
|
2190
2256
|
const SpeedDialAction = (props) => {
|
|
2191
2257
|
const { icon, color = COLOR.light, onClick, className } = props;
|
|
2192
2258
|
const getCssClasses = () => {
|
|
2193
2259
|
const cssClasses = [];
|
|
2194
|
-
cssClasses.push(styles$
|
|
2260
|
+
cssClasses.push(styles$f.speedDialAction);
|
|
2195
2261
|
className && cssClasses.push(className);
|
|
2196
2262
|
return cssClasses.filter(css => css).join(' ');
|
|
2197
2263
|
};
|
|
@@ -2208,15 +2274,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2208
2274
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2209
2275
|
};
|
|
2210
2276
|
|
|
2211
|
-
var css_248z$
|
|
2212
|
-
var styles$
|
|
2213
|
-
styleInject(css_248z$
|
|
2277
|
+
var css_248z$e = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2278
|
+
var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2279
|
+
styleInject(css_248z$e);
|
|
2214
2280
|
|
|
2215
2281
|
const StepperActions = (props) => {
|
|
2216
2282
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2217
2283
|
const getCssClasses = () => {
|
|
2218
2284
|
const cssClasses = [];
|
|
2219
|
-
cssClasses.push(styles$
|
|
2285
|
+
cssClasses.push(styles$e.stepperActions);
|
|
2220
2286
|
className && cssClasses.push(className);
|
|
2221
2287
|
return cssClasses.filter(css => css).join(' ');
|
|
2222
2288
|
};
|
|
@@ -2233,31 +2299,31 @@ const StepPanel = (props) => {
|
|
|
2233
2299
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
2234
2300
|
};
|
|
2235
2301
|
|
|
2236
|
-
var css_248z$
|
|
2237
|
-
var styles$
|
|
2238
|
-
styleInject(css_248z$
|
|
2302
|
+
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}";
|
|
2303
|
+
var styles$d = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2304
|
+
styleInject(css_248z$d);
|
|
2239
2305
|
|
|
2240
2306
|
const StepConnector = (props) => {
|
|
2241
2307
|
const { isActive, isHorizontal = true } = props;
|
|
2242
2308
|
const getCssClassesConnector = () => {
|
|
2243
2309
|
const cssClasses = [];
|
|
2244
|
-
cssClasses.push(styles$
|
|
2310
|
+
cssClasses.push(styles$d.stepConnector);
|
|
2245
2311
|
return cssClasses.filter(css => css).join(' ');
|
|
2246
2312
|
};
|
|
2247
2313
|
const getCssClassesLine = () => {
|
|
2248
2314
|
const cssClasses = [];
|
|
2249
|
-
cssClasses.push(styles$
|
|
2250
|
-
isActive && cssClasses.push(styles$
|
|
2251
|
-
isHorizontal && cssClasses.push(styles$
|
|
2315
|
+
cssClasses.push(styles$d.stepConnectorLine);
|
|
2316
|
+
isActive && cssClasses.push(styles$d['isActive']);
|
|
2317
|
+
isHorizontal && cssClasses.push(styles$d.stepConnectorLineHorizontal);
|
|
2252
2318
|
return cssClasses.filter(css => css).join(' ');
|
|
2253
2319
|
};
|
|
2254
2320
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
2255
2321
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
2256
2322
|
};
|
|
2257
2323
|
|
|
2258
|
-
var css_248z$
|
|
2259
|
-
var styles$
|
|
2260
|
-
styleInject(css_248z$
|
|
2324
|
+
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}";
|
|
2325
|
+
var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2326
|
+
styleInject(css_248z$c);
|
|
2261
2327
|
|
|
2262
2328
|
const Stepper = (props) => {
|
|
2263
2329
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2345,8 +2411,8 @@ const Stepper = (props) => {
|
|
|
2345
2411
|
};
|
|
2346
2412
|
const getCssClasses = () => {
|
|
2347
2413
|
const cssClasses = [];
|
|
2348
|
-
cssClasses.push(styles$
|
|
2349
|
-
isHorizontal && cssClasses.push(styles$
|
|
2414
|
+
cssClasses.push(styles$c.stepper);
|
|
2415
|
+
isHorizontal && cssClasses.push(styles$c['isHorizontal']);
|
|
2350
2416
|
return cssClasses.filter(css => css).join(' ');
|
|
2351
2417
|
};
|
|
2352
2418
|
return (React.createElement(React.Fragment, null, steps &&
|
|
@@ -2359,17 +2425,17 @@ const Stepper = (props) => {
|
|
|
2359
2425
|
React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2360
2426
|
};
|
|
2361
2427
|
|
|
2362
|
-
var css_248z$
|
|
2363
|
-
var styles$
|
|
2364
|
-
styleInject(css_248z$
|
|
2428
|
+
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}";
|
|
2429
|
+
var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
|
|
2430
|
+
styleInject(css_248z$b);
|
|
2365
2431
|
|
|
2366
2432
|
const Wrapper = (props) => {
|
|
2367
2433
|
const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
|
|
2368
2434
|
const getCssClasses = () => {
|
|
2369
2435
|
const cssClasses = [];
|
|
2370
|
-
cssClasses.push(styles$
|
|
2371
|
-
cssClasses.push(styles$
|
|
2372
|
-
wrap && cssClasses.push(styles$
|
|
2436
|
+
cssClasses.push(styles$b.typography);
|
|
2437
|
+
cssClasses.push(styles$b.as);
|
|
2438
|
+
wrap && cssClasses.push(styles$b.wrap);
|
|
2373
2439
|
className && cssClasses.push(className);
|
|
2374
2440
|
return cssClasses.filter(css => css).join(' ');
|
|
2375
2441
|
};
|
|
@@ -2380,9 +2446,9 @@ const Typography = (_a) => {
|
|
|
2380
2446
|
return (React.createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2381
2447
|
};
|
|
2382
2448
|
|
|
2383
|
-
var css_248z$
|
|
2384
|
-
var styles$
|
|
2385
|
-
styleInject(css_248z$
|
|
2449
|
+
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}";
|
|
2450
|
+
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"};
|
|
2451
|
+
styleInject(css_248z$a);
|
|
2386
2452
|
|
|
2387
2453
|
const Step = (props) => {
|
|
2388
2454
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2394,29 +2460,29 @@ const Step = (props) => {
|
|
|
2394
2460
|
};
|
|
2395
2461
|
const getCssClasses = () => {
|
|
2396
2462
|
const cssClasses = [];
|
|
2397
|
-
cssClasses.push(styles$
|
|
2398
|
-
label && showLabel && cssClasses.push(styles$
|
|
2399
|
-
isDisabled && cssClasses.push(styles$
|
|
2463
|
+
cssClasses.push(styles$a.stepWrapper);
|
|
2464
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2465
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2400
2466
|
className && cssClasses.push(className);
|
|
2401
2467
|
return cssClasses.filter(css => css).join(' ');
|
|
2402
2468
|
};
|
|
2403
2469
|
const getCssClassesStep = () => {
|
|
2404
2470
|
const cssClasses = [];
|
|
2405
|
-
cssClasses.push(styles$
|
|
2406
|
-
label && showLabel && cssClasses.push(styles$
|
|
2407
|
-
isDisabled && cssClasses.push(styles$
|
|
2471
|
+
cssClasses.push(styles$a.step);
|
|
2472
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2473
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2408
2474
|
return cssClasses.filter(css => css).join(' ');
|
|
2409
2475
|
};
|
|
2410
2476
|
const getCssClassesStepValue = () => {
|
|
2411
2477
|
const cssClasses = [];
|
|
2412
|
-
cssClasses.push(styles$
|
|
2478
|
+
cssClasses.push(styles$a.stepValue);
|
|
2413
2479
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2414
|
-
isActive && cssClasses.push(styles$
|
|
2480
|
+
isActive && cssClasses.push(styles$a.stepValue['isActive']);
|
|
2415
2481
|
return cssClasses.filter(css => css).join(' ');
|
|
2416
2482
|
};
|
|
2417
2483
|
return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2418
2484
|
React.createElement("div", { className: getCssClassesStep() },
|
|
2419
|
-
React.createElement(Icon, { className: styles$
|
|
2485
|
+
React.createElement(Icon, { className: styles$a.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
|
|
2420
2486
|
React.createElement(CircleSolidIcon, null)),
|
|
2421
2487
|
React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2422
2488
|
React.createElement(Icon, null,
|
|
@@ -2427,22 +2493,83 @@ const Step = (props) => {
|
|
|
2427
2493
|
React.createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2428
2494
|
};
|
|
2429
2495
|
|
|
2430
|
-
var css_248z$
|
|
2431
|
-
var styles$
|
|
2496
|
+
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}";
|
|
2497
|
+
var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","skeleton-loading":"SkeletonAvatar-module_skeleton-loading__eM-ZU"};
|
|
2498
|
+
styleInject(css_248z$9);
|
|
2499
|
+
|
|
2500
|
+
const SkeletonAvatar = (props) => {
|
|
2501
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2502
|
+
const getCssClasses = () => {
|
|
2503
|
+
const cssClasses = [];
|
|
2504
|
+
cssClasses.push(styles$9.skeletonAvatar);
|
|
2505
|
+
className && cssClasses.push(className);
|
|
2506
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2507
|
+
};
|
|
2508
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2509
|
+
};
|
|
2510
|
+
|
|
2511
|
+
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}";
|
|
2512
|
+
var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skeleton-loading":"SkeletonText-module_skeleton-loading__EYFfJ"};
|
|
2513
|
+
styleInject(css_248z$8);
|
|
2514
|
+
|
|
2515
|
+
const SkeletonText = (props) => {
|
|
2516
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2517
|
+
const getCssClasses = () => {
|
|
2518
|
+
const cssClasses = [];
|
|
2519
|
+
cssClasses.push(styles$8.skeletonText);
|
|
2520
|
+
className && cssClasses.push(className);
|
|
2521
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2522
|
+
};
|
|
2523
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2524
|
+
};
|
|
2525
|
+
|
|
2526
|
+
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}";
|
|
2527
|
+
var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","skeleton-loading":"SkeletonFooter-module_skeleton-loading__OEErv"};
|
|
2528
|
+
styleInject(css_248z$7);
|
|
2529
|
+
|
|
2530
|
+
const SkeletonFooter = (props) => {
|
|
2531
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2532
|
+
const getCssClasses = () => {
|
|
2533
|
+
const cssClasses = [];
|
|
2534
|
+
cssClasses.push(styles$7.skeletonFooter);
|
|
2535
|
+
className && cssClasses.push(className);
|
|
2536
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2537
|
+
};
|
|
2538
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2539
|
+
};
|
|
2540
|
+
|
|
2541
|
+
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}";
|
|
2542
|
+
var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","skeleton-loading":"SkeletonImage-module_skeleton-loading__04lJ7","div":"SkeletonImage-module_div__tqqrB"};
|
|
2432
2543
|
styleInject(css_248z$6);
|
|
2433
2544
|
|
|
2545
|
+
const SkeletonImage = (props) => {
|
|
2546
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2547
|
+
const getCssClasses = () => {
|
|
2548
|
+
const cssClasses = [];
|
|
2549
|
+
cssClasses.push(styles$6.skeletonImage);
|
|
2550
|
+
className && cssClasses.push(className);
|
|
2551
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2552
|
+
};
|
|
2553
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2554
|
+
React.createElement("div", { className: styles$6.img })));
|
|
2555
|
+
};
|
|
2556
|
+
|
|
2557
|
+
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}";
|
|
2558
|
+
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"};
|
|
2559
|
+
styleInject(css_248z$5);
|
|
2560
|
+
|
|
2434
2561
|
const Table = (props) => {
|
|
2435
2562
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2436
2563
|
const getCssClasses = () => {
|
|
2437
2564
|
const cssClasses = [];
|
|
2438
|
-
cssClasses.push(styles$
|
|
2439
|
-
bordered && cssClasses.push(styles$
|
|
2440
|
-
striped && cssClasses.push(styles$
|
|
2441
|
-
hover && cssClasses.push(styles$
|
|
2565
|
+
cssClasses.push(styles$5.table);
|
|
2566
|
+
bordered && cssClasses.push(styles$5['bordered']);
|
|
2567
|
+
striped && cssClasses.push(styles$5['striped']);
|
|
2568
|
+
hover && cssClasses.push(styles$5['hover']);
|
|
2442
2569
|
className && cssClasses.push(className);
|
|
2443
2570
|
return cssClasses.filter(css => css).join(' ');
|
|
2444
2571
|
};
|
|
2445
|
-
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$
|
|
2572
|
+
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$5.tableResponsive }, children) },
|
|
2446
2573
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2447
2574
|
};
|
|
2448
2575
|
|
|
@@ -2475,16 +2602,16 @@ const TableCell = (props) => {
|
|
|
2475
2602
|
React.createElement("td", Object.assign({}, rest), children)) }, children));
|
|
2476
2603
|
};
|
|
2477
2604
|
|
|
2478
|
-
var css_248z$
|
|
2479
|
-
var styles$
|
|
2480
|
-
styleInject(css_248z$
|
|
2605
|
+
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}";
|
|
2606
|
+
var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
|
|
2607
|
+
styleInject(css_248z$4);
|
|
2481
2608
|
|
|
2482
2609
|
const TabIndicator = (props) => {
|
|
2483
2610
|
const { color = COLOR.primary, width, amount, index } = props;
|
|
2484
2611
|
const getCssClasses = () => {
|
|
2485
2612
|
const cssClasses = [];
|
|
2486
|
-
cssClasses.push(styles$
|
|
2487
|
-
cssClasses.push(styles$
|
|
2613
|
+
cssClasses.push(styles$4.tabIndicator);
|
|
2614
|
+
cssClasses.push(styles$4[color]);
|
|
2488
2615
|
return cssClasses.filter(css => css).join(' ');
|
|
2489
2616
|
};
|
|
2490
2617
|
return (React.createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2493,9 +2620,9 @@ const TabIndicator = (props) => {
|
|
|
2493
2620
|
} }));
|
|
2494
2621
|
};
|
|
2495
2622
|
|
|
2496
|
-
var css_248z$
|
|
2497
|
-
var styles$
|
|
2498
|
-
styleInject(css_248z$
|
|
2623
|
+
var css_248z$3 = ".Tabs-module_tabs__YyRTZ {\n display: flex;\n position: relative;\n}";
|
|
2624
|
+
var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
2625
|
+
styleInject(css_248z$3);
|
|
2499
2626
|
|
|
2500
2627
|
const Tabs = (props) => {
|
|
2501
2628
|
const { children, className, fixed, color, indicatorColor, onChange, value } = props;
|
|
@@ -2510,7 +2637,7 @@ const Tabs = (props) => {
|
|
|
2510
2637
|
}, [children, value]);
|
|
2511
2638
|
const getCssClasses = () => {
|
|
2512
2639
|
const cssClasses = [];
|
|
2513
|
-
cssClasses.push(styles$
|
|
2640
|
+
cssClasses.push(styles$3.tabs);
|
|
2514
2641
|
className && cssClasses.push(className);
|
|
2515
2642
|
return cssClasses.filter(css => css).join(' ');
|
|
2516
2643
|
};
|
|
@@ -2534,15 +2661,15 @@ const Tabs = (props) => {
|
|
|
2534
2661
|
React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
|
|
2535
2662
|
};
|
|
2536
2663
|
|
|
2537
|
-
var css_248z$
|
|
2538
|
-
var styles$
|
|
2539
|
-
styleInject(css_248z$
|
|
2664
|
+
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}";
|
|
2665
|
+
var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
|
|
2666
|
+
styleInject(css_248z$2);
|
|
2540
2667
|
|
|
2541
2668
|
const Tab = (props) => {
|
|
2542
2669
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2543
2670
|
const getCssClasses = () => {
|
|
2544
2671
|
const cssClasses = [];
|
|
2545
|
-
cssClasses.push(styles$
|
|
2672
|
+
cssClasses.push(styles$2.tab);
|
|
2546
2673
|
if (isActive) {
|
|
2547
2674
|
cssClasses.push(`show active`);
|
|
2548
2675
|
}
|
|
@@ -2557,46 +2684,6 @@ const TabPanel = (props) => {
|
|
|
2557
2684
|
return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2558
2685
|
};
|
|
2559
2686
|
|
|
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
2687
|
const HourSelect = (props) => {
|
|
2601
2688
|
const { className, value = 0, id, name, disabled, onChange } = props;
|
|
2602
2689
|
const [newValue, setNewValue] = useState(value);
|
|
@@ -2791,4 +2878,4 @@ const TreeItem = (props) => {
|
|
|
2791
2878
|
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2792
2879
|
};
|
|
2793
2880
|
|
|
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 };
|
|
2881
|
+
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 };
|