react-asc 23.3.2 → 23.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button/ButtonContext.d.ts +7 -0
- package/components/Button/index.d.ts +1 -0
- package/components/ButtonGroup/ButtonGroup.d.ts +5 -1
- package/components/Form/validators/MaxValidator.d.ts +1 -0
- package/components/Form/validators/index.d.ts +1 -0
- package/components/ProgressBar/ProgressBar.d.ts +9 -0
- package/components/ProgressBar/index.d.ts +1 -0
- package/components/index.d.ts +1 -0
- package/index.es.js +310 -270
- package/index.js +312 -268
- package/package.json +1 -1
- package/react-asc.scss +11 -0
package/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useRef, useEffect, useState, Fragment, Component, createRef, cloneElement
|
|
1
|
+
import React, { useRef, useEffect, useState, createContext, useContext, Fragment, Component, createRef, cloneElement } from 'react';
|
|
2
2
|
import { createPortal, render, unmountComponentAtNode } from 'react-dom';
|
|
3
3
|
import { createPopper } from '@popperjs/core';
|
|
4
4
|
|
|
@@ -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$11 = ".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$11 = {"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$11);
|
|
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$11.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$11.contained);
|
|
101
|
+
cssClasses.push(styles$11[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$11.outline);
|
|
105
|
+
cssClasses.push(styles$11[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$11['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$10 = ".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$10 = {"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$10);
|
|
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$10[color]);
|
|
123
|
+
cssClasses.push(styles$10.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$10['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$$ = ".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$$ = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$$);
|
|
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$$.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$_ = ".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$_ = {"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$_);
|
|
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$_.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$_[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$Z = ".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$Z = {"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$Z);
|
|
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$Z[color]);
|
|
171
|
+
cssClasses.push(styles$Z[variant]);
|
|
172
|
+
cssClasses.push(styles$Z[size]);
|
|
173
|
+
cssClasses.push(styles$Z.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$Z.active);
|
|
175
|
+
disabled && cssClasses.push(styles$Z.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$Z.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -291,7 +291,7 @@ function useMobileDetect() {
|
|
|
291
291
|
const windowSize = useWindowSize();
|
|
292
292
|
const checkIsMobile = (height, width) => {
|
|
293
293
|
if (height > 0 && width > 0) {
|
|
294
|
-
setIsMobile(!(width >=
|
|
294
|
+
setIsMobile(!(width >= 640));
|
|
295
295
|
}
|
|
296
296
|
};
|
|
297
297
|
useEffect(() => {
|
|
@@ -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$Y = ".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$Y = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
313
|
+
styleInject(css_248z$Y);
|
|
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$Y.backdrop);
|
|
324
|
+
isTransparent && cssClasses.push(styles$Y['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$X = ".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$X = {"list":"List-module_list__gpZ41"};
|
|
336
|
+
styleInject(css_248z$X);
|
|
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$X.flush);
|
|
343
|
+
cssClasses.push(styles$X.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$W = ".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$W = {"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$W);
|
|
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$W.listItem);
|
|
359
|
+
color && cssClasses.push(styles$W[color]);
|
|
360
|
+
active && cssClasses.push(styles$W['active']);
|
|
361
|
+
disabled && cssClasses.push(styles$W['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$V = ".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$V = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
373
|
+
styleInject(css_248z$V);
|
|
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$V.avatar }, rest), avatar));
|
|
378
378
|
};
|
|
379
379
|
|
|
380
|
-
var css_248z$
|
|
381
|
-
var styles$
|
|
382
|
-
styleInject(css_248z$
|
|
380
|
+
var css_248z$U = ".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$U = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
382
|
+
styleInject(css_248z$U);
|
|
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$U.icon }, rest), icon));
|
|
387
387
|
};
|
|
388
388
|
|
|
389
|
-
var css_248z$
|
|
390
|
-
var styles$
|
|
391
|
-
styleInject(css_248z$
|
|
389
|
+
var css_248z$T = ".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$T = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
391
|
+
styleInject(css_248z$T);
|
|
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$T.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$S = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
399
|
+
var styles$S = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
400
|
+
styleInject(css_248z$S);
|
|
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$S.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$R = ".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$R = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
419
|
+
styleInject(css_248z$R);
|
|
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$R.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$R.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$R.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$Q = ".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$Q = {"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$Q);
|
|
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$Q.badge,
|
|
510
|
+
styles$Q[color],
|
|
511
511
|
className
|
|
512
512
|
]);
|
|
513
513
|
return (React.createElement(BadgeContainer, null,
|
|
@@ -517,32 +517,39 @@ 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$Q.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$P = ".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$P = {"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$P);
|
|
529
|
+
|
|
530
|
+
const ButtonContext = createContext({
|
|
531
|
+
color: null
|
|
532
|
+
});
|
|
533
|
+
const useButtonContext = () => useContext(ButtonContext);
|
|
529
534
|
|
|
530
535
|
const Button = (props) => {
|
|
531
536
|
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow", "block"]);
|
|
537
|
+
const buttonContext = useButtonContext();
|
|
532
538
|
const getCssClasses = () => {
|
|
533
539
|
const cssClasses = [];
|
|
534
|
-
cssClasses.push(styles$
|
|
540
|
+
cssClasses.push(styles$P.button);
|
|
541
|
+
const buttonColor = buttonContext.color || color;
|
|
535
542
|
if (variant !== 'outline' && variant !== 'text') {
|
|
536
|
-
cssClasses.push(styles$
|
|
537
|
-
cssClasses.push(styles$
|
|
543
|
+
cssClasses.push(styles$P.btnContained);
|
|
544
|
+
cssClasses.push(styles$P[buttonColor]);
|
|
538
545
|
}
|
|
539
546
|
if (variant === 'outline') {
|
|
540
|
-
cssClasses.push(styles$
|
|
541
|
-
cssClasses.push(styles$
|
|
547
|
+
cssClasses.push(styles$P.btnOutline);
|
|
548
|
+
cssClasses.push(styles$P[buttonColor]);
|
|
542
549
|
}
|
|
543
550
|
if (variant === 'text') {
|
|
544
|
-
cssClasses.push(styles$
|
|
545
|
-
cssClasses.push(styles$
|
|
551
|
+
cssClasses.push(styles$P.btnText);
|
|
552
|
+
cssClasses.push(styles$P[buttonColor]);
|
|
546
553
|
}
|
|
547
554
|
if (isRounded && variant !== 'text') {
|
|
548
555
|
cssClasses.push(`rounded-pill`);
|
|
@@ -550,44 +557,45 @@ const Button = (props) => {
|
|
|
550
557
|
if (isActive) {
|
|
551
558
|
cssClasses.push('active');
|
|
552
559
|
}
|
|
553
|
-
shadow && cssClasses.push(styles$
|
|
554
|
-
block && cssClasses.push(styles$
|
|
560
|
+
shadow && cssClasses.push(styles$P.shadow);
|
|
561
|
+
block && cssClasses.push(styles$P.block);
|
|
555
562
|
className && cssClasses.push(className);
|
|
556
563
|
return cssClasses.filter(css => css).join(' ');
|
|
557
564
|
};
|
|
558
565
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
559
566
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
560
567
|
startIcon &&
|
|
561
|
-
React.createElement(Icon, { className: styles$
|
|
568
|
+
React.createElement(Icon, { className: styles$P.startIcon }, startIcon),
|
|
562
569
|
children,
|
|
563
570
|
endIcon &&
|
|
564
|
-
React.createElement(Icon, { className: styles$
|
|
571
|
+
React.createElement(Icon, { className: styles$P.endIcon }, endIcon))));
|
|
565
572
|
};
|
|
566
573
|
|
|
567
|
-
var css_248z$
|
|
568
|
-
var styles$
|
|
569
|
-
styleInject(css_248z$
|
|
574
|
+
var css_248z$O = ".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$O = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
576
|
+
styleInject(css_248z$O);
|
|
570
577
|
|
|
571
578
|
const ButtonGroup = (props) => {
|
|
572
|
-
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
579
|
+
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
573
580
|
const getCssClasses = () => {
|
|
574
581
|
const cssClasses = [];
|
|
575
|
-
cssClasses.push(styles$
|
|
582
|
+
cssClasses.push(styles$O.buttonGroup);
|
|
576
583
|
className && cssClasses.push(className);
|
|
577
584
|
return cssClasses.filter(css => css).join(' ');
|
|
578
585
|
};
|
|
579
|
-
return (React.createElement(
|
|
586
|
+
return (React.createElement(ButtonContext.Provider, { value: { color: color || COLOR.primary } },
|
|
587
|
+
React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
580
588
|
};
|
|
581
589
|
|
|
582
|
-
var css_248z$
|
|
583
|
-
var styles$
|
|
584
|
-
styleInject(css_248z$
|
|
590
|
+
var css_248z$N = ".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$N = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
592
|
+
styleInject(css_248z$N);
|
|
585
593
|
|
|
586
594
|
const Breadcrumb = (props) => {
|
|
587
595
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
588
596
|
const getCssClasses = () => {
|
|
589
597
|
const cssClasses = [];
|
|
590
|
-
cssClasses.push(styles$
|
|
598
|
+
cssClasses.push(styles$N.breadcrumb);
|
|
591
599
|
className && cssClasses.push(className);
|
|
592
600
|
return cssClasses.filter(css => css).join(' ');
|
|
593
601
|
};
|
|
@@ -597,15 +605,15 @@ const Breadcrumb = (props) => {
|
|
|
597
605
|
|
|
598
606
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
599
607
|
|
|
600
|
-
var css_248z$
|
|
601
|
-
var styles$
|
|
602
|
-
styleInject(css_248z$
|
|
608
|
+
var css_248z$M = ".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$M = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
610
|
+
styleInject(css_248z$M);
|
|
603
611
|
|
|
604
612
|
const BreadcrumbItem = (props) => {
|
|
605
613
|
const { children, className, isActive, onClick } = props;
|
|
606
614
|
const getCssClasses = () => {
|
|
607
615
|
const cssClasses = [];
|
|
608
|
-
cssClasses.push(styles$
|
|
616
|
+
cssClasses.push(styles$M.breadcrumbItem);
|
|
609
617
|
className && cssClasses.push(className);
|
|
610
618
|
isActive && cssClasses.push('active');
|
|
611
619
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -617,115 +625,115 @@ const BreadcrumbItem = (props) => {
|
|
|
617
625
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
618
626
|
};
|
|
619
627
|
|
|
620
|
-
var css_248z$
|
|
621
|
-
var styles$
|
|
622
|
-
styleInject(css_248z$
|
|
628
|
+
var css_248z$L = ".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$L = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
630
|
+
styleInject(css_248z$L);
|
|
623
631
|
|
|
624
632
|
const Card = (props) => {
|
|
625
633
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
626
634
|
const getCssClasses = () => {
|
|
627
635
|
const cssClasses = [];
|
|
628
|
-
cssClasses.push(styles$
|
|
629
|
-
shadow && cssClasses.push(styles$
|
|
636
|
+
cssClasses.push(styles$L.card);
|
|
637
|
+
shadow && cssClasses.push(styles$L.shadow);
|
|
630
638
|
className && cssClasses.push(className);
|
|
631
639
|
return cssClasses.filter(css => css).join(' ');
|
|
632
640
|
};
|
|
633
641
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
634
642
|
};
|
|
635
643
|
|
|
636
|
-
var css_248z$
|
|
637
|
-
var styles$
|
|
638
|
-
styleInject(css_248z$
|
|
644
|
+
var css_248z$K = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
645
|
+
var styles$K = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
646
|
+
styleInject(css_248z$K);
|
|
639
647
|
|
|
640
648
|
const CardBody = (props) => {
|
|
641
649
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
642
650
|
const getCssClasses = () => {
|
|
643
651
|
const cssClasses = [];
|
|
644
|
-
cssClasses.push(styles$
|
|
652
|
+
cssClasses.push(styles$K.cardBody);
|
|
645
653
|
className && cssClasses.push(className);
|
|
646
654
|
return cssClasses.filter(css => css).join(' ');
|
|
647
655
|
};
|
|
648
656
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
649
657
|
};
|
|
650
658
|
|
|
651
|
-
var css_248z$
|
|
652
|
-
var styles$
|
|
653
|
-
styleInject(css_248z$
|
|
659
|
+
var css_248z$J = ".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$J = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
661
|
+
styleInject(css_248z$J);
|
|
654
662
|
|
|
655
663
|
const CardFooter = (props) => {
|
|
656
664
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
657
665
|
const getCssClasses = () => {
|
|
658
666
|
const cssClasses = [];
|
|
659
|
-
cssClasses.push(styles$
|
|
667
|
+
cssClasses.push(styles$J.cardFooter);
|
|
660
668
|
className && cssClasses.push(className);
|
|
661
669
|
return cssClasses.filter(css => css).join(' ');
|
|
662
670
|
};
|
|
663
671
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
664
672
|
};
|
|
665
673
|
|
|
666
|
-
var css_248z$
|
|
667
|
-
var styles$
|
|
668
|
-
styleInject(css_248z$
|
|
674
|
+
var css_248z$I = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
675
|
+
var styles$I = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
676
|
+
styleInject(css_248z$I);
|
|
669
677
|
|
|
670
678
|
const CardSubtitle = (props) => {
|
|
671
679
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
672
680
|
const getCssClasses = () => {
|
|
673
681
|
const cssClasses = [];
|
|
674
|
-
cssClasses.push(styles$
|
|
682
|
+
cssClasses.push(styles$I.cardSubtitle);
|
|
675
683
|
className && cssClasses.push(className);
|
|
676
684
|
return cssClasses.filter(css => css).join(' ');
|
|
677
685
|
};
|
|
678
686
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
679
687
|
};
|
|
680
688
|
|
|
681
|
-
var css_248z$
|
|
682
|
-
var styles$
|
|
683
|
-
styleInject(css_248z$
|
|
689
|
+
var css_248z$H = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
690
|
+
var styles$H = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
691
|
+
styleInject(css_248z$H);
|
|
684
692
|
|
|
685
693
|
const CardText = (props) => {
|
|
686
694
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
687
695
|
const getCssClasses = () => {
|
|
688
696
|
const cssClasses = [];
|
|
689
|
-
cssClasses.push(styles$
|
|
697
|
+
cssClasses.push(styles$H.cardText);
|
|
690
698
|
className && cssClasses.push(className);
|
|
691
699
|
return cssClasses.filter(css => css).join(' ');
|
|
692
700
|
};
|
|
693
701
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
694
702
|
};
|
|
695
703
|
|
|
696
|
-
var css_248z$
|
|
697
|
-
var styles$
|
|
698
|
-
styleInject(css_248z$
|
|
704
|
+
var css_248z$G = ".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$G = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
706
|
+
styleInject(css_248z$G);
|
|
699
707
|
|
|
700
708
|
const CardTitle = (props) => {
|
|
701
709
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
702
710
|
const getCssClasses = () => {
|
|
703
711
|
const cssClasses = [];
|
|
704
|
-
cssClasses.push(styles$
|
|
712
|
+
cssClasses.push(styles$G.cardTitle);
|
|
705
713
|
className && cssClasses.push(className);
|
|
706
714
|
return cssClasses.filter(css => css).join(' ');
|
|
707
715
|
};
|
|
708
716
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
709
717
|
};
|
|
710
718
|
|
|
711
|
-
var css_248z$
|
|
712
|
-
var styles$
|
|
713
|
-
styleInject(css_248z$
|
|
719
|
+
var css_248z$F = ".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$F = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
721
|
+
styleInject(css_248z$F);
|
|
714
722
|
|
|
715
723
|
const CardImage = (props) => {
|
|
716
724
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
717
725
|
const getCssClasses = () => {
|
|
718
726
|
const cssClasses = [];
|
|
719
|
-
cssClasses.push(styles$
|
|
727
|
+
cssClasses.push(styles$F.cardImage);
|
|
720
728
|
className && cssClasses.push(className);
|
|
721
729
|
return cssClasses.filter(css => css).join(' ');
|
|
722
730
|
};
|
|
723
731
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
724
732
|
};
|
|
725
733
|
|
|
726
|
-
var css_248z$
|
|
727
|
-
var styles$
|
|
728
|
-
styleInject(css_248z$
|
|
734
|
+
var css_248z$E = ".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$E = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
736
|
+
styleInject(css_248z$E);
|
|
729
737
|
|
|
730
738
|
const Checkbox = (props) => {
|
|
731
739
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -754,8 +762,8 @@ const Checkbox = (props) => {
|
|
|
754
762
|
};
|
|
755
763
|
const getCssClassesLabel = () => {
|
|
756
764
|
const cssClasses = [];
|
|
757
|
-
cssClasses.push(styles$
|
|
758
|
-
disabled && cssClasses.push(styles$
|
|
765
|
+
cssClasses.push(styles$E.checkboxLabel);
|
|
766
|
+
disabled && cssClasses.push(styles$E['disabled']);
|
|
759
767
|
return cssClasses.filter(css => css).join(' ');
|
|
760
768
|
};
|
|
761
769
|
const getIcon = () => {
|
|
@@ -768,24 +776,24 @@ const Checkbox = (props) => {
|
|
|
768
776
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
769
777
|
}
|
|
770
778
|
};
|
|
771
|
-
return (React.createElement("div", { className: styles$
|
|
779
|
+
return (React.createElement("div", { className: styles$E.checkboxContainer },
|
|
772
780
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
773
781
|
React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
774
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))));
|
|
775
783
|
};
|
|
776
784
|
|
|
777
|
-
var css_248z$
|
|
778
|
-
var styles$
|
|
779
|
-
styleInject(css_248z$
|
|
785
|
+
var css_248z$D = ".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$D = {"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$D);
|
|
780
788
|
|
|
781
789
|
const Chip = (props) => {
|
|
782
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"]);
|
|
783
791
|
const getCssClass = () => {
|
|
784
792
|
const cssClasses = [];
|
|
785
|
-
cssClasses.push(styles$
|
|
786
|
-
cssClasses.push(styles$
|
|
787
|
-
shadow && cssClasses.push(styles$
|
|
788
|
-
onClick && cssClasses.push(styles$
|
|
793
|
+
cssClasses.push(styles$D.chip);
|
|
794
|
+
cssClasses.push(styles$D[color]);
|
|
795
|
+
shadow && cssClasses.push(styles$D['shadow']);
|
|
796
|
+
onClick && cssClasses.push(styles$D['clickable']);
|
|
789
797
|
className && cssClasses.push(className);
|
|
790
798
|
return cssClasses.filter(r => r).join(' ');
|
|
791
799
|
};
|
|
@@ -795,7 +803,7 @@ const Chip = (props) => {
|
|
|
795
803
|
};
|
|
796
804
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
797
805
|
React.createElement("span", null, children),
|
|
798
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
806
|
+
isDeletable && (React.createElement("div", { className: styles$D.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
799
807
|
};
|
|
800
808
|
|
|
801
809
|
const CssTransition = (props) => {
|
|
@@ -873,9 +881,9 @@ const CssTransition = (props) => {
|
|
|
873
881
|
React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
874
882
|
};
|
|
875
883
|
|
|
876
|
-
var css_248z$
|
|
877
|
-
var styles$
|
|
878
|
-
styleInject(css_248z$
|
|
884
|
+
var css_248z$C = ".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$C = {"column":"Column-module_column__fcTgl"};
|
|
886
|
+
styleInject(css_248z$C);
|
|
879
887
|
|
|
880
888
|
const Column = (props) => {
|
|
881
889
|
const { children, className } = props,
|
|
@@ -893,22 +901,22 @@ const Column = (props) => {
|
|
|
893
901
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
894
902
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
895
903
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
896
|
-
cssClasses.push(styles$
|
|
904
|
+
cssClasses.push(styles$C.column);
|
|
897
905
|
className && cssClasses.push(className);
|
|
898
906
|
return cssClasses.filter(css => css).join(' ');
|
|
899
907
|
};
|
|
900
908
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
901
909
|
};
|
|
902
910
|
|
|
903
|
-
var css_248z$
|
|
904
|
-
var styles$
|
|
905
|
-
styleInject(css_248z$
|
|
911
|
+
var css_248z$B = ".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$B = {"row":"Row-module_row__bTIWp"};
|
|
913
|
+
styleInject(css_248z$B);
|
|
906
914
|
|
|
907
915
|
const Row = (_a) => {
|
|
908
916
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
909
917
|
const getCssClasses = () => {
|
|
910
918
|
const cssClasses = [];
|
|
911
|
-
cssClasses.push(styles$
|
|
919
|
+
cssClasses.push(styles$B.row);
|
|
912
920
|
className && cssClasses.push(className);
|
|
913
921
|
direction && cssClasses.push(`flex-${direction}`);
|
|
914
922
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -916,15 +924,15 @@ const Row = (_a) => {
|
|
|
916
924
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
917
925
|
};
|
|
918
926
|
|
|
919
|
-
var css_248z$
|
|
920
|
-
var styles$
|
|
921
|
-
styleInject(css_248z$
|
|
927
|
+
var css_248z$A = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
928
|
+
var styles$A = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
929
|
+
styleInject(css_248z$A);
|
|
922
930
|
|
|
923
931
|
const FormLabel = (_a) => {
|
|
924
932
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
925
933
|
const getCssClasses = () => {
|
|
926
934
|
const cssClasses = [];
|
|
927
|
-
cssClasses.push(styles$
|
|
935
|
+
cssClasses.push(styles$A.formLabel);
|
|
928
936
|
className && cssClasses.push(className);
|
|
929
937
|
return cssClasses.filter(css => css).join(' ');
|
|
930
938
|
};
|
|
@@ -961,9 +969,9 @@ const FileInput = (props) => {
|
|
|
961
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))));
|
|
962
970
|
};
|
|
963
971
|
|
|
964
|
-
var css_248z$
|
|
965
|
-
var styles$
|
|
966
|
-
styleInject(css_248z$
|
|
972
|
+
var css_248z$z = ".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$z = {"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$z);
|
|
967
975
|
|
|
968
976
|
const Select = (props) => {
|
|
969
977
|
var _a, _b, _c;
|
|
@@ -976,9 +984,9 @@ const Select = (props) => {
|
|
|
976
984
|
const getCssClass = () => {
|
|
977
985
|
const cssClasses = [];
|
|
978
986
|
className && cssClasses.push(className);
|
|
979
|
-
disabled && cssClasses.push(styles$
|
|
980
|
-
readOnly && cssClasses.push(styles$
|
|
981
|
-
cssClasses.push(styles$
|
|
987
|
+
disabled && cssClasses.push(styles$z['disabled']);
|
|
988
|
+
readOnly && cssClasses.push(styles$z['readOnly']);
|
|
989
|
+
cssClasses.push(styles$z.select);
|
|
982
990
|
return cssClasses.filter(r => r).join(' ');
|
|
983
991
|
};
|
|
984
992
|
useEffect(() => {
|
|
@@ -1100,16 +1108,16 @@ const Select = (props) => {
|
|
|
1100
1108
|
}
|
|
1101
1109
|
}
|
|
1102
1110
|
};
|
|
1103
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
1111
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$z.selectContainer },
|
|
1104
1112
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1105
1113
|
!multiple && renderSingleViewModel(),
|
|
1106
1114
|
multiple &&
|
|
1107
|
-
React.createElement("div", { className: styles$
|
|
1115
|
+
React.createElement("div", { className: styles$z.chipContainer }, renderMultipleViewModel()),
|
|
1108
1116
|
React.createElement(Icon, { className: "ml-2" },
|
|
1109
1117
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
1110
1118
|
isShow &&
|
|
1111
1119
|
createPortal(React.createElement(React.Fragment, null,
|
|
1112
|
-
React.createElement("div", { className: styles$
|
|
1120
|
+
React.createElement("div", { className: styles$z.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 } },
|
|
1113
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) },
|
|
1114
1122
|
multiple &&
|
|
1115
1123
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1117,33 +1125,33 @@ const Select = (props) => {
|
|
|
1117
1125
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
1118
1126
|
};
|
|
1119
1127
|
|
|
1120
|
-
var css_248z$
|
|
1121
|
-
var styles$
|
|
1122
|
-
styleInject(css_248z$
|
|
1128
|
+
var css_248z$y = ".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$y = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1130
|
+
styleInject(css_248z$y);
|
|
1123
1131
|
|
|
1124
1132
|
const Textarea = (props) => {
|
|
1125
1133
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1126
1134
|
const getCssClass = () => {
|
|
1127
1135
|
const cssClasses = [];
|
|
1128
|
-
cssClasses.push(styles$
|
|
1136
|
+
cssClasses.push(styles$y.textarea);
|
|
1129
1137
|
className && cssClasses.push(className);
|
|
1130
|
-
error && cssClasses.push(styles$
|
|
1138
|
+
error && cssClasses.push(styles$y['isInvalid']);
|
|
1131
1139
|
return cssClasses.filter(r => r).join(' ');
|
|
1132
1140
|
};
|
|
1133
1141
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1134
1142
|
};
|
|
1135
1143
|
|
|
1136
|
-
var css_248z$
|
|
1137
|
-
var styles$
|
|
1138
|
-
styleInject(css_248z$
|
|
1144
|
+
var css_248z$x = ".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$x = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1146
|
+
styleInject(css_248z$x);
|
|
1139
1147
|
|
|
1140
1148
|
const FormInput = (props) => {
|
|
1141
1149
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1142
1150
|
const getCssClasses = () => {
|
|
1143
1151
|
const cssClasses = [];
|
|
1144
|
-
cssClasses.push(styles$
|
|
1152
|
+
cssClasses.push(styles$x.formInput);
|
|
1145
1153
|
className && cssClasses.push(className);
|
|
1146
|
-
!isValid && cssClasses.push(styles$
|
|
1154
|
+
!isValid && cssClasses.push(styles$x['isInvalid']);
|
|
1147
1155
|
return cssClasses.filter(css => css).join(' ');
|
|
1148
1156
|
};
|
|
1149
1157
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1191,12 +1199,12 @@ const FormHint = (props) => {
|
|
|
1191
1199
|
return (React.createElement("small", { className: getCssClasses() }, children));
|
|
1192
1200
|
};
|
|
1193
1201
|
|
|
1194
|
-
var css_248z$
|
|
1195
|
-
var styles$
|
|
1196
|
-
styleInject(css_248z$
|
|
1202
|
+
var css_248z$w = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
1203
|
+
var styles$w = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1204
|
+
styleInject(css_248z$w);
|
|
1197
1205
|
|
|
1198
1206
|
const FormError = (props) => {
|
|
1199
|
-
const { className = styles$
|
|
1207
|
+
const { className = styles$w.isInvalid, errors = [] } = props;
|
|
1200
1208
|
return (React.createElement(Fragment, null, errors &&
|
|
1201
1209
|
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
1202
1210
|
};
|
|
@@ -1211,6 +1219,8 @@ const EmailValidator = (value) => {
|
|
|
1211
1219
|
|
|
1212
1220
|
const IsEqualValidator = (valueA, valueB) => valueA === valueB;
|
|
1213
1221
|
|
|
1222
|
+
const MaxValidator = (valueA, valueB) => valueA > valueB;
|
|
1223
|
+
|
|
1214
1224
|
// values, isSubmitting, handleChange, handleBlur, handleSubmit
|
|
1215
1225
|
class Form extends Component {
|
|
1216
1226
|
constructor(props) {
|
|
@@ -1260,6 +1270,11 @@ class Form extends Component {
|
|
|
1260
1270
|
errors.push({ validator: validatorName, message: 'Email format is wrong' });
|
|
1261
1271
|
}
|
|
1262
1272
|
break;
|
|
1273
|
+
case 'max':
|
|
1274
|
+
if (MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1275
|
+
errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
|
|
1276
|
+
}
|
|
1277
|
+
break;
|
|
1263
1278
|
case 'match':
|
|
1264
1279
|
if (validatorParam) {
|
|
1265
1280
|
const matchControl = this.getControl(validatorParam);
|
|
@@ -1513,16 +1528,16 @@ const DateSelect = (props) => {
|
|
|
1513
1528
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1514
1529
|
// };
|
|
1515
1530
|
|
|
1516
|
-
var css_248z$
|
|
1517
|
-
var styles$
|
|
1518
|
-
styleInject(css_248z$
|
|
1531
|
+
var css_248z$v = ".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}";
|
|
1532
|
+
var styles$v = {"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"};
|
|
1533
|
+
styleInject(css_248z$v);
|
|
1519
1534
|
|
|
1520
1535
|
const Drawer = (props) => {
|
|
1521
1536
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1522
1537
|
useEffect(() => {
|
|
1523
|
-
document.body.classList.add(styles$
|
|
1538
|
+
document.body.classList.add(styles$v.drawerOpen);
|
|
1524
1539
|
return () => {
|
|
1525
|
-
document.body.classList.remove(styles$
|
|
1540
|
+
document.body.classList.remove(styles$v.drawerOpen);
|
|
1526
1541
|
};
|
|
1527
1542
|
}, []);
|
|
1528
1543
|
const handleClickBackdrop = () => {
|
|
@@ -1536,10 +1551,10 @@ const DrawerContent = (props) => {
|
|
|
1536
1551
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1537
1552
|
const getCssClasses = () => {
|
|
1538
1553
|
const cssClasses = [];
|
|
1539
|
-
cssClasses.push(styles$
|
|
1540
|
-
shadow && cssClasses.push(styles$
|
|
1541
|
-
!!permanent && cssClasses.push(styles$
|
|
1542
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1554
|
+
cssClasses.push(styles$v.drawer);
|
|
1555
|
+
shadow && cssClasses.push(styles$v.shadow);
|
|
1556
|
+
!!permanent && cssClasses.push(styles$v['permanent']);
|
|
1557
|
+
position === 'left' ? cssClasses.push(styles$v['left']) : cssClasses.push(styles$v['right']);
|
|
1543
1558
|
className && cssClasses.push(className);
|
|
1544
1559
|
return cssClasses.filter(css => css).join(' ');
|
|
1545
1560
|
};
|
|
@@ -1553,9 +1568,9 @@ const DrawerContent = (props) => {
|
|
|
1553
1568
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1554
1569
|
};
|
|
1555
1570
|
|
|
1556
|
-
var css_248z$
|
|
1557
|
-
var styles$
|
|
1558
|
-
styleInject(css_248z$
|
|
1571
|
+
var css_248z$u = ".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}";
|
|
1572
|
+
var styles$u = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1573
|
+
styleInject(css_248z$u);
|
|
1559
1574
|
|
|
1560
1575
|
const MenuBody = (props) => {
|
|
1561
1576
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1586,8 +1601,8 @@ const MenuBody = (props) => {
|
|
|
1586
1601
|
}, [menuBodyRef]);
|
|
1587
1602
|
const getCssClasses = () => {
|
|
1588
1603
|
const cssClasses = [];
|
|
1589
|
-
cssClasses.push(styles$
|
|
1590
|
-
shadow && cssClasses.push(styles$
|
|
1604
|
+
cssClasses.push(styles$u.menuBody);
|
|
1605
|
+
shadow && cssClasses.push(styles$u.shadow);
|
|
1591
1606
|
className && cssClasses.push(className);
|
|
1592
1607
|
return cssClasses.filter(css => css).join(' ');
|
|
1593
1608
|
};
|
|
@@ -1599,9 +1614,9 @@ const MenuBody = (props) => {
|
|
|
1599
1614
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1600
1615
|
};
|
|
1601
1616
|
|
|
1602
|
-
var css_248z$
|
|
1603
|
-
var styles$
|
|
1604
|
-
styleInject(css_248z$
|
|
1617
|
+
var css_248z$t = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1618
|
+
var styles$t = {"menu":"Menu-module_menu__p8QL-"};
|
|
1619
|
+
styleInject(css_248z$t);
|
|
1605
1620
|
|
|
1606
1621
|
const Menu = (props) => {
|
|
1607
1622
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
@@ -1609,7 +1624,7 @@ const Menu = (props) => {
|
|
|
1609
1624
|
const toggleContainerRef = useRef(null);
|
|
1610
1625
|
const getCssClasses = () => {
|
|
1611
1626
|
const cssClasses = [];
|
|
1612
|
-
cssClasses.push(styles$
|
|
1627
|
+
cssClasses.push(styles$t.menu);
|
|
1613
1628
|
className && cssClasses.push(className);
|
|
1614
1629
|
return cssClasses.filter(css => css).join(' ');
|
|
1615
1630
|
};
|
|
@@ -1622,17 +1637,17 @@ const Menu = (props) => {
|
|
|
1622
1637
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1623
1638
|
};
|
|
1624
1639
|
|
|
1625
|
-
var css_248z$
|
|
1626
|
-
var styles$
|
|
1627
|
-
styleInject(css_248z$
|
|
1640
|
+
var css_248z$s = ".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}";
|
|
1641
|
+
var styles$s = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1642
|
+
styleInject(css_248z$s);
|
|
1628
1643
|
|
|
1629
1644
|
const MenuItem = (props) => {
|
|
1630
1645
|
const { children, onClick, type = 'item' } = props;
|
|
1631
1646
|
const getCssClasses = () => {
|
|
1632
1647
|
const cssClasses = [];
|
|
1633
|
-
cssClasses.push(styles$
|
|
1648
|
+
cssClasses.push(styles$s.menuItem);
|
|
1634
1649
|
if (type === 'header') {
|
|
1635
|
-
cssClasses.push(styles$
|
|
1650
|
+
cssClasses.push(styles$s.menuItemHeader);
|
|
1636
1651
|
}
|
|
1637
1652
|
return cssClasses.filter(css => css).join(' ');
|
|
1638
1653
|
};
|
|
@@ -1648,23 +1663,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1648
1663
|
return (React.createElement(Fragment, null, children));
|
|
1649
1664
|
};
|
|
1650
1665
|
|
|
1651
|
-
var css_248z$
|
|
1652
|
-
var styles$
|
|
1653
|
-
styleInject(css_248z$
|
|
1666
|
+
var css_248z$r = ".MenuDivider-module_menuItemDivider__oRP-j {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef;\n}";
|
|
1667
|
+
var styles$r = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1668
|
+
styleInject(css_248z$r);
|
|
1654
1669
|
|
|
1655
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1670
|
+
const MenuDivider = () => React.createElement("div", { className: styles$r.menuItemDivider });
|
|
1656
1671
|
|
|
1657
|
-
var css_248z$
|
|
1658
|
-
var styles$
|
|
1659
|
-
styleInject(css_248z$
|
|
1672
|
+
var css_248z$q = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px;\n}";
|
|
1673
|
+
var styles$q = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1674
|
+
styleInject(css_248z$q);
|
|
1660
1675
|
|
|
1661
1676
|
const ExpansionPanelContent = ({ children }) => {
|
|
1662
|
-
return (React.createElement("div", { className: styles$
|
|
1677
|
+
return (React.createElement("div", { className: styles$q.expansionPanelContent }, children));
|
|
1663
1678
|
};
|
|
1664
1679
|
|
|
1665
|
-
var css_248z$
|
|
1666
|
-
var styles$
|
|
1667
|
-
styleInject(css_248z$
|
|
1680
|
+
var css_248z$p = ".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}";
|
|
1681
|
+
var styles$p = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1682
|
+
styleInject(css_248z$p);
|
|
1668
1683
|
|
|
1669
1684
|
const ExpansionPanelHeader = (props) => {
|
|
1670
1685
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1672,15 +1687,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1672
1687
|
e.stopPropagation();
|
|
1673
1688
|
onClick && onClick(e);
|
|
1674
1689
|
};
|
|
1675
|
-
return (React.createElement("div", { className: styles$
|
|
1690
|
+
return (React.createElement("div", { className: styles$p.expansionPanelHeader, onClick: handleClick },
|
|
1676
1691
|
children,
|
|
1677
1692
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1678
1693
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1679
1694
|
};
|
|
1680
1695
|
|
|
1681
|
-
var css_248z$
|
|
1682
|
-
var styles$
|
|
1683
|
-
styleInject(css_248z$
|
|
1696
|
+
var css_248z$o = ".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}";
|
|
1697
|
+
var styles$o = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1698
|
+
styleInject(css_248z$o);
|
|
1684
1699
|
|
|
1685
1700
|
const ExpansionPanel = (props) => {
|
|
1686
1701
|
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
@@ -1690,11 +1705,11 @@ const ExpansionPanel = (props) => {
|
|
|
1690
1705
|
}, [isExpanded]);
|
|
1691
1706
|
const getCssClasses = () => {
|
|
1692
1707
|
const cssClasses = [];
|
|
1693
|
-
cssClasses.push(styles$
|
|
1708
|
+
cssClasses.push(styles$o.expansionPanel);
|
|
1694
1709
|
if (_isExpanded) {
|
|
1695
|
-
cssClasses.push(styles$
|
|
1710
|
+
cssClasses.push(styles$o.isExpanded);
|
|
1696
1711
|
}
|
|
1697
|
-
shadow && cssClasses.push(styles$
|
|
1712
|
+
shadow && cssClasses.push(styles$o.shadow);
|
|
1698
1713
|
return cssClasses.filter(css => css).join(' ');
|
|
1699
1714
|
};
|
|
1700
1715
|
const handleClickHeader = (event) => {
|
|
@@ -1707,17 +1722,17 @@ const ExpansionPanel = (props) => {
|
|
|
1707
1722
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1708
1723
|
};
|
|
1709
1724
|
|
|
1710
|
-
var css_248z$
|
|
1711
|
-
var styles$
|
|
1712
|
-
styleInject(css_248z$
|
|
1725
|
+
var css_248z$n = ".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}";
|
|
1726
|
+
var styles$n = {"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"};
|
|
1727
|
+
styleInject(css_248z$n);
|
|
1713
1728
|
|
|
1714
1729
|
const FloatingActionButton = (props) => {
|
|
1715
1730
|
const { className, icon, color = COLOR.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1716
1731
|
const getCssClasses = () => {
|
|
1717
1732
|
const cssClasses = [];
|
|
1718
|
-
cssClasses.push(styles$
|
|
1719
|
-
fixed && cssClasses.push(styles$
|
|
1720
|
-
position && fixed && cssClasses.push(styles$
|
|
1733
|
+
cssClasses.push(styles$n.fab);
|
|
1734
|
+
fixed && cssClasses.push(styles$n.fixed);
|
|
1735
|
+
position && fixed && cssClasses.push(styles$n[position]);
|
|
1721
1736
|
className && cssClasses.push(className);
|
|
1722
1737
|
return cssClasses.filter(css => css).join(' ');
|
|
1723
1738
|
};
|
|
@@ -1728,14 +1743,14 @@ const FloatingActionButton = (props) => {
|
|
|
1728
1743
|
return (React.createElement(IconButton, { className: getCssClasses(), color: color, size: size, isActive: isActive, disabled: disabled, icon: icon, variant: VARIANT.contained, onClick: handleClick }));
|
|
1729
1744
|
};
|
|
1730
1745
|
|
|
1731
|
-
var css_248z$
|
|
1732
|
-
var styles$
|
|
1733
|
-
styleInject(css_248z$
|
|
1746
|
+
var css_248z$m = ".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}";
|
|
1747
|
+
var styles$m = {"link":"Link-module_link__YlJQl"};
|
|
1748
|
+
styleInject(css_248z$m);
|
|
1734
1749
|
|
|
1735
1750
|
const Link = (props) => {
|
|
1736
1751
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1737
1752
|
const [status, setStatus] = useState(STATUS.NORMAL);
|
|
1738
|
-
const [cssClassName] = useCssClasses([styles$
|
|
1753
|
+
const [cssClassName] = useCssClasses([styles$m.link, className, status]);
|
|
1739
1754
|
const onMouseEnter = () => {
|
|
1740
1755
|
setStatus(STATUS.HOVERED);
|
|
1741
1756
|
};
|
|
@@ -1745,15 +1760,15 @@ const Link = (props) => {
|
|
|
1745
1760
|
return (React.createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1746
1761
|
};
|
|
1747
1762
|
|
|
1748
|
-
var css_248z$
|
|
1749
|
-
var styles$
|
|
1750
|
-
styleInject(css_248z$
|
|
1763
|
+
var css_248z$l = ".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}";
|
|
1764
|
+
var styles$l = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1765
|
+
styleInject(css_248z$l);
|
|
1751
1766
|
|
|
1752
1767
|
const LoadingIndicator = (_a) => {
|
|
1753
1768
|
var rest = __rest(_a, []);
|
|
1754
1769
|
const getCssClasses = () => {
|
|
1755
1770
|
const cssClasses = [];
|
|
1756
|
-
cssClasses.push(styles$
|
|
1771
|
+
cssClasses.push(styles$l.loadingIndicator);
|
|
1757
1772
|
return cssClasses.filter(css => css).join(' ');
|
|
1758
1773
|
};
|
|
1759
1774
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1763,8 +1778,8 @@ const LoadingIndicator = (_a) => {
|
|
|
1763
1778
|
const LoadingIndicatorContainer = ({ children, isFixed }) => {
|
|
1764
1779
|
const getCssClasses = () => {
|
|
1765
1780
|
const cssClasses = [];
|
|
1766
|
-
cssClasses.push(styles$
|
|
1767
|
-
isFixed && cssClasses.push(styles$
|
|
1781
|
+
cssClasses.push(styles$l.loadingIndicatorContainer);
|
|
1782
|
+
isFixed && cssClasses.push(styles$l.isFixed);
|
|
1768
1783
|
return cssClasses.filter(css => css).join(' ');
|
|
1769
1784
|
};
|
|
1770
1785
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1792,45 +1807,45 @@ class LoadingIndicatorService {
|
|
|
1792
1807
|
}
|
|
1793
1808
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1794
1809
|
|
|
1795
|
-
var css_248z$
|
|
1796
|
-
var styles$
|
|
1797
|
-
styleInject(css_248z$
|
|
1810
|
+
var css_248z$k = ".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}";
|
|
1811
|
+
var styles$k = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1812
|
+
styleInject(css_248z$k);
|
|
1798
1813
|
|
|
1799
1814
|
const ModalHeader = (props) => {
|
|
1800
1815
|
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1801
1816
|
const handleClick = () => {
|
|
1802
1817
|
onClose && onClose();
|
|
1803
1818
|
};
|
|
1804
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
1805
|
-
React.createElement("h5", { className: styles$
|
|
1819
|
+
return (React.createElement("div", Object.assign({ className: styles$k.modalHeader }, rest),
|
|
1820
|
+
React.createElement("h5", { className: styles$k.modalTitle }, children),
|
|
1806
1821
|
isDismissable &&
|
|
1807
1822
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
1808
1823
|
};
|
|
1809
1824
|
|
|
1810
|
-
var css_248z$
|
|
1811
|
-
var styles$
|
|
1812
|
-
styleInject(css_248z$
|
|
1825
|
+
var css_248z$j = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem;\n}";
|
|
1826
|
+
var styles$j = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1827
|
+
styleInject(css_248z$j);
|
|
1813
1828
|
|
|
1814
|
-
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$
|
|
1829
|
+
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$j.modalBody }, children));
|
|
1815
1830
|
|
|
1816
|
-
var css_248z$
|
|
1817
|
-
var styles$
|
|
1818
|
-
styleInject(css_248z$
|
|
1831
|
+
var css_248z$i = ".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}";
|
|
1832
|
+
var styles$i = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1833
|
+
styleInject(css_248z$i);
|
|
1819
1834
|
|
|
1820
|
-
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$
|
|
1835
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$i.modalFooter }, children));
|
|
1821
1836
|
|
|
1822
|
-
var css_248z$
|
|
1823
|
-
var styles$
|
|
1824
|
-
styleInject(css_248z$
|
|
1837
|
+
var css_248z$h = ".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_sm__CsR6U {\n max-width: 300px;\n}\n.Modal-module_modal__HMxWV .Modal-module_md__lNggx {\n max-width: 500px;\n}\n.Modal-module_modal__HMxWV .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@media (min-width: 576px) {\n .Modal-module_modalDialog__fNqyK {\n max-width: 500px;\n margin: 1.75rem auto;\n }\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\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}\n@media (min-width: 320px) {\n .Modal-module_fullscreen__iepGa {\n max-width: 100% !important;\n }\n}";
|
|
1838
|
+
var styles$h = {"modal":"Modal-module_modal__HMxWV","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modal-dialog":"Modal-module_modal-dialog__U2wGf","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
|
|
1839
|
+
styleInject(css_248z$h);
|
|
1825
1840
|
|
|
1826
1841
|
const Modal = (props) => {
|
|
1827
1842
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1828
1843
|
const getCssClass = () => {
|
|
1829
1844
|
const cssClasses = [];
|
|
1830
|
-
cssClasses.push(styles$
|
|
1831
|
-
cssClasses.push(styles$
|
|
1832
|
-
fullScreen && cssClasses.push(styles$
|
|
1833
|
-
size && cssClasses.push(styles$
|
|
1845
|
+
cssClasses.push(styles$h.modalDialog);
|
|
1846
|
+
cssClasses.push(styles$h.modalDialogCentered);
|
|
1847
|
+
fullScreen && cssClasses.push(styles$h.fullscreen);
|
|
1848
|
+
size && cssClasses.push(styles$h[size]);
|
|
1834
1849
|
className && cssClasses.push(className);
|
|
1835
1850
|
return cssClasses.filter(r => r).join(' ');
|
|
1836
1851
|
};
|
|
@@ -1844,9 +1859,9 @@ const Modal = (props) => {
|
|
|
1844
1859
|
onBackdropClick && onBackdropClick();
|
|
1845
1860
|
};
|
|
1846
1861
|
return (React.createElement(React.Fragment, null,
|
|
1847
|
-
React.createElement("div", { className: styles$
|
|
1862
|
+
React.createElement("div", { className: styles$h.modal },
|
|
1848
1863
|
React.createElement("div", { className: getCssClass() },
|
|
1849
|
-
React.createElement("div", { className: styles$
|
|
1864
|
+
React.createElement("div", { className: styles$h.modalContent },
|
|
1850
1865
|
header &&
|
|
1851
1866
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1852
1867
|
React.createElement(ModalBody, null, children),
|
|
@@ -1971,6 +1986,31 @@ const NumberSelect = (props) => {
|
|
|
1971
1986
|
return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
1972
1987
|
};
|
|
1973
1988
|
|
|
1989
|
+
var css_248z$g = ".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}";
|
|
1990
|
+
var styles$g = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
1991
|
+
styleInject(css_248z$g);
|
|
1992
|
+
|
|
1993
|
+
const ProgressBar = (props) => {
|
|
1994
|
+
const { className, color = COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
1995
|
+
const getCssClasses = () => {
|
|
1996
|
+
const cssClasses = [];
|
|
1997
|
+
cssClasses.push(styles$g.progressBarContainer);
|
|
1998
|
+
className && cssClasses.push(className);
|
|
1999
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2000
|
+
};
|
|
2001
|
+
const getCssClassesBar = () => {
|
|
2002
|
+
const cssClasses = [];
|
|
2003
|
+
cssClasses.push(styles$g.progressBar);
|
|
2004
|
+
indeterminate && cssClasses.push(styles$g['indeterminate']);
|
|
2005
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2006
|
+
};
|
|
2007
|
+
useEffect(() => {
|
|
2008
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2009
|
+
}, [color]);
|
|
2010
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2011
|
+
React.createElement("div", { className: getCssClassesBar(), style: { 'width': `${(!indeterminate && value && value > 0) ? value : 100}%` }, role: "progressbar" })));
|
|
2012
|
+
};
|
|
2013
|
+
|
|
1974
2014
|
class SidebarItemModel {
|
|
1975
2015
|
constructor(id, label, path, icon, isActive, items, isCollapsible = false, isCollapsed = false) {
|
|
1976
2016
|
this.id = id;
|
|
@@ -2440,7 +2480,7 @@ var styles$5 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primar
|
|
|
2440
2480
|
styleInject(css_248z$5);
|
|
2441
2481
|
|
|
2442
2482
|
const TabIndicator = (props) => {
|
|
2443
|
-
const { color = COLOR.
|
|
2483
|
+
const { color = COLOR.primary, width, amount, index } = props;
|
|
2444
2484
|
const getCssClasses = () => {
|
|
2445
2485
|
const cssClasses = [];
|
|
2446
2486
|
cssClasses.push(styles$5.tabIndicator);
|
|
@@ -2458,7 +2498,7 @@ var styles$4 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
|
2458
2498
|
styleInject(css_248z$4);
|
|
2459
2499
|
|
|
2460
2500
|
const Tabs = (props) => {
|
|
2461
|
-
const { children, className, fixed, indicatorColor, onChange, value } = props;
|
|
2501
|
+
const { children, className, fixed, color, indicatorColor, onChange, value } = props;
|
|
2462
2502
|
const [selectedValue, setSelectedValue] = useState(value);
|
|
2463
2503
|
const [selectedIndex, setSelectedIndex] = useState();
|
|
2464
2504
|
useEffect(() => {
|
|
@@ -2487,7 +2527,7 @@ const Tabs = (props) => {
|
|
|
2487
2527
|
onClick: (e) => handleClickTab(e.event, e.value, index),
|
|
2488
2528
|
});
|
|
2489
2529
|
};
|
|
2490
|
-
return (React.createElement(
|
|
2530
|
+
return (React.createElement(ButtonContext.Provider, { value: { color: color || COLOR.light } },
|
|
2491
2531
|
React.createElement("div", { className: getCssClasses() },
|
|
2492
2532
|
children && React.Children.toArray(children).map((child, index) => renderTabs(child, index)),
|
|
2493
2533
|
children &&
|
|
@@ -2751,4 +2791,4 @@ const TreeItem = (props) => {
|
|
|
2751
2791
|
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2752
2792
|
};
|
|
2753
2793
|
|
|
2754
|
-
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, 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, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, 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, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|
|
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 };
|