react-asc 19.0.6 → 19.0.7
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/Modal/ModalFooter.d.ts +2 -6
- package/components/Modal/modal.interfaces.d.ts +1 -0
- package/index.es.js +245 -239
- package/index.js +245 -239
- package/package.json +1 -1
- package/react-asc.scss +2 -2
package/index.es.js
CHANGED
|
@@ -87,93 +87,93 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
var styles$
|
|
92
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$Z = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px; }\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.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$Z = {"alert":"Alert-module_alert__b4tbk","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$Z);
|
|
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$Z.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$Z.contained);
|
|
101
|
+
cssClasses.push(styles$Z[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$Z.outline);
|
|
105
|
+
cssClasses.push(styles$Z[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$Z['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$Y = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0; }\n .AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: var(--shadow); }\n";
|
|
115
|
+
var styles$Y = {"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$Y);
|
|
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$Y[color]);
|
|
123
|
+
cssClasses.push(styles$Y.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$Y['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$X = ".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 .AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer; }\n";
|
|
132
|
+
var styles$X = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$X);
|
|
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$X.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$W = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px; }\n .Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit; }\n .Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary); }\n .Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent); }\n .Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary); }\n .Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light); }\n .Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark); }\n";
|
|
147
|
+
var styles$W = {"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$W);
|
|
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$W.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$W[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$V = ".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 .IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit; }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark); }\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 .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 .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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white); }\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 .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";
|
|
163
|
+
var styles$V = {"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$V);
|
|
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$V[color]);
|
|
171
|
+
cssClasses.push(styles$V[variant]);
|
|
172
|
+
cssClasses.push(styles$V[size]);
|
|
173
|
+
cssClasses.push(styles$V.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$V.active);
|
|
175
|
+
disabled && cssClasses.push(styles$V.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$V.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -282,6 +282,10 @@ function useDebounce(callback, timeout, deps) {
|
|
|
282
282
|
}, deps);
|
|
283
283
|
}
|
|
284
284
|
|
|
285
|
+
var css_248z$U = ".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";
|
|
286
|
+
var styles$U = {"backdrop":"Backdrop-module_backdrop__IRMoL"};
|
|
287
|
+
styleInject(css_248z$U);
|
|
288
|
+
|
|
285
289
|
const Backdrop = (props) => {
|
|
286
290
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
287
291
|
const handleClick = (e) => {
|
|
@@ -290,10 +294,8 @@ const Backdrop = (props) => {
|
|
|
290
294
|
};
|
|
291
295
|
const getCssClasses = () => {
|
|
292
296
|
const cssClasses = [];
|
|
293
|
-
cssClasses.push(
|
|
294
|
-
|
|
295
|
-
cssClasses.push(`bg-transparent`);
|
|
296
|
-
}
|
|
297
|
+
cssClasses.push(styles$U.backdrop);
|
|
298
|
+
isTransparent && cssClasses.push(`bg-transparent`);
|
|
297
299
|
return cssClasses.filter(css => css).join(' ');
|
|
298
300
|
};
|
|
299
301
|
const getStyles = () => {
|
|
@@ -303,34 +305,34 @@ const Backdrop = (props) => {
|
|
|
303
305
|
return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
|
|
304
306
|
};
|
|
305
307
|
|
|
306
|
-
var css_248z$
|
|
307
|
-
var styles$
|
|
308
|
-
styleInject(css_248z$
|
|
308
|
+
var css_248z$T = ".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";
|
|
309
|
+
var styles$T = {"list":"List-module_list__gpZ41"};
|
|
310
|
+
styleInject(css_248z$T);
|
|
309
311
|
|
|
310
312
|
const List = (props) => {
|
|
311
313
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
312
314
|
const getCssClasses = () => {
|
|
313
315
|
const cssClasses = [];
|
|
314
|
-
isFlush && cssClasses.push(styles$
|
|
315
|
-
cssClasses.push(styles$
|
|
316
|
+
isFlush && cssClasses.push(styles$T.flush);
|
|
317
|
+
cssClasses.push(styles$T.list);
|
|
316
318
|
className && cssClasses.push(className);
|
|
317
319
|
return cssClasses.filter(css => css).join(' ');
|
|
318
320
|
};
|
|
319
321
|
return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
320
322
|
};
|
|
321
323
|
|
|
322
|
-
var css_248z$
|
|
323
|
-
var styles$
|
|
324
|
-
styleInject(css_248z$
|
|
324
|
+
var css_248z$S = ".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 .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 .ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0; }\n .ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit; }\n";
|
|
325
|
+
var styles$S = {"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"};
|
|
326
|
+
styleInject(css_248z$S);
|
|
325
327
|
|
|
326
328
|
const ListItem = (props) => {
|
|
327
329
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
328
330
|
const getCssClasses = () => {
|
|
329
331
|
const cssClasses = [];
|
|
330
|
-
cssClasses.push(styles$
|
|
331
|
-
color && cssClasses.push(styles$
|
|
332
|
-
active && cssClasses.push(styles$
|
|
333
|
-
disabled && cssClasses.push(styles$
|
|
332
|
+
cssClasses.push(styles$S.listItem);
|
|
333
|
+
color && cssClasses.push(styles$S[color]);
|
|
334
|
+
active && cssClasses.push(styles$S['active']);
|
|
335
|
+
disabled && cssClasses.push(styles$S['disabled']);
|
|
334
336
|
className && cssClasses.push(className);
|
|
335
337
|
return cssClasses.filter(css => css).join(' ');
|
|
336
338
|
};
|
|
@@ -340,42 +342,42 @@ const ListItem = (props) => {
|
|
|
340
342
|
return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
341
343
|
};
|
|
342
344
|
|
|
343
|
-
var css_248z$
|
|
344
|
-
var styles$
|
|
345
|
-
styleInject(css_248z$
|
|
345
|
+
var css_248z$R = ".ListItemAvatar-module_avatar__sVWfR {\n margin-right: 16px; }\n .ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px; }\n .ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%; }\n";
|
|
346
|
+
var styles$R = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
347
|
+
styleInject(css_248z$R);
|
|
346
348
|
|
|
347
349
|
const ListItemAvatar = (_a) => {
|
|
348
350
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
349
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
351
|
+
return (React.createElement("div", Object.assign({ className: styles$R.avatar }, rest), avatar));
|
|
350
352
|
};
|
|
351
353
|
|
|
352
|
-
var css_248z$
|
|
353
|
-
var styles$
|
|
354
|
-
styleInject(css_248z$
|
|
354
|
+
var css_248z$Q = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px; }\n .ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px; }\n";
|
|
355
|
+
var styles$Q = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
356
|
+
styleInject(css_248z$Q);
|
|
355
357
|
|
|
356
358
|
const ListItemIcon = (_a) => {
|
|
357
359
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
358
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
360
|
+
return (React.createElement("div", Object.assign({ className: styles$Q.icon }, rest), icon));
|
|
359
361
|
};
|
|
360
362
|
|
|
361
|
-
var css_248z$
|
|
362
|
-
var styles$
|
|
363
|
-
styleInject(css_248z$
|
|
363
|
+
var css_248z$P = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px; }\n .ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px; }\n";
|
|
364
|
+
var styles$P = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
365
|
+
styleInject(css_248z$P);
|
|
364
366
|
|
|
365
367
|
const ListItemAction = (_a) => {
|
|
366
368
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
367
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
369
|
+
return (React.createElement("div", Object.assign({ className: styles$P.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
368
370
|
};
|
|
369
371
|
|
|
370
|
-
var css_248z$
|
|
371
|
-
var styles$
|
|
372
|
-
styleInject(css_248z$
|
|
372
|
+
var css_248z$O = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1; }\n";
|
|
373
|
+
var styles$O = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
374
|
+
styleInject(css_248z$O);
|
|
373
375
|
|
|
374
376
|
const ListItemText = (_a) => {
|
|
375
377
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
376
378
|
const getCssClasses = () => {
|
|
377
379
|
const cssClasses = [];
|
|
378
|
-
cssClasses.push(styles$
|
|
380
|
+
cssClasses.push(styles$O.listItemText);
|
|
379
381
|
return cssClasses.filter(css => css).join(' ');
|
|
380
382
|
};
|
|
381
383
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -386,9 +388,9 @@ const ListItemText = (_a) => {
|
|
|
386
388
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
387
389
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
388
390
|
|
|
389
|
-
var css_248z$
|
|
390
|
-
var styles$
|
|
391
|
-
styleInject(css_248z$
|
|
391
|
+
var css_248z$N = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative; }\n\n.AutoComplete-module_select__NNYOi {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .AutoComplete-module_select__NNYOi:hover {\n cursor: pointer; }\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";
|
|
392
|
+
var styles$N = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
393
|
+
styleInject(css_248z$N);
|
|
392
394
|
|
|
393
395
|
// preset value
|
|
394
396
|
// enter -> delay? -> show results
|
|
@@ -444,7 +446,7 @@ const AutoComplete = (props) => {
|
|
|
444
446
|
const getCssClass = () => {
|
|
445
447
|
const cssClasses = [];
|
|
446
448
|
className && cssClasses.push(className);
|
|
447
|
-
cssClasses.push(styles$
|
|
449
|
+
cssClasses.push(styles$N.select);
|
|
448
450
|
return cssClasses.filter(r => r).join(' ');
|
|
449
451
|
};
|
|
450
452
|
const show = () => setIsShow(true);
|
|
@@ -468,35 +470,35 @@ const AutoComplete = (props) => {
|
|
|
468
470
|
setModel('');
|
|
469
471
|
setSearchText('');
|
|
470
472
|
};
|
|
471
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
473
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$N.selectContainer },
|
|
472
474
|
React.createElement("div", { className: "d-flex" },
|
|
473
475
|
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 }),
|
|
474
476
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
475
477
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
476
478
|
isShow &&
|
|
477
479
|
React.createElement(React.Fragment, null,
|
|
478
|
-
React.createElement("div", { className: styles$
|
|
480
|
+
React.createElement("div", { className: styles$N.selectMenu },
|
|
479
481
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
480
482
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
481
483
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
482
484
|
};
|
|
483
485
|
|
|
484
|
-
var css_248z$
|
|
485
|
-
var styles$
|
|
486
|
-
styleInject(css_248z$
|
|
486
|
+
var css_248z$M = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle; }\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 .Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n";
|
|
487
|
+
var styles$M = {"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"};
|
|
488
|
+
styleInject(css_248z$M);
|
|
487
489
|
|
|
488
490
|
const Badge = (props) => {
|
|
489
491
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
490
492
|
const getCssClassesBadgeContainer = () => {
|
|
491
493
|
const cssClasses = [];
|
|
492
|
-
cssClasses.push(styles$
|
|
494
|
+
cssClasses.push(styles$M.badgeContainer);
|
|
493
495
|
className && cssClasses.push(className);
|
|
494
496
|
return cssClasses.filter(css => css).join(' ');
|
|
495
497
|
};
|
|
496
498
|
const getCssClassesBadge = () => {
|
|
497
499
|
const cssClasses = [];
|
|
498
|
-
cssClasses.push(styles$
|
|
499
|
-
cssClasses.push(styles$
|
|
500
|
+
cssClasses.push(styles$M.badge);
|
|
501
|
+
cssClasses.push(styles$M[color]);
|
|
500
502
|
return cssClasses.filter(css => css).join(' ');
|
|
501
503
|
};
|
|
502
504
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -504,26 +506,26 @@ const Badge = (props) => {
|
|
|
504
506
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
505
507
|
};
|
|
506
508
|
|
|
507
|
-
var css_248z$
|
|
508
|
-
var styles$
|
|
509
|
-
styleInject(css_248z$
|
|
509
|
+
var css_248z$L = ".Button-module_button__qeIer {\n text-transform: uppercase !important;\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 .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow); }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\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 .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\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 .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\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 .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\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 .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary) !important; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px; }\n";
|
|
510
|
+
var styles$L = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","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"};
|
|
511
|
+
styleInject(css_248z$L);
|
|
510
512
|
|
|
511
513
|
const Button = (props) => {
|
|
512
514
|
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow"]);
|
|
513
515
|
const getCssClasses = () => {
|
|
514
516
|
const cssClasses = [];
|
|
515
|
-
cssClasses.push(styles$
|
|
517
|
+
cssClasses.push(styles$L.button);
|
|
516
518
|
if (variant !== 'outline' && variant !== 'text') {
|
|
517
|
-
cssClasses.push(styles$
|
|
518
|
-
cssClasses.push(styles$
|
|
519
|
+
cssClasses.push(styles$L.btnContained);
|
|
520
|
+
cssClasses.push(styles$L[color]);
|
|
519
521
|
}
|
|
520
522
|
if (variant === 'outline') {
|
|
521
|
-
cssClasses.push(styles$
|
|
522
|
-
cssClasses.push(styles$
|
|
523
|
+
cssClasses.push(styles$L.btnOutline);
|
|
524
|
+
cssClasses.push(styles$L[color]);
|
|
523
525
|
}
|
|
524
526
|
if (variant === 'text') {
|
|
525
|
-
cssClasses.push(styles$
|
|
526
|
-
cssClasses.push(styles$
|
|
527
|
+
cssClasses.push(styles$L.btnText);
|
|
528
|
+
cssClasses.push(styles$L[color]);
|
|
527
529
|
}
|
|
528
530
|
if (isRounded && variant !== 'text') {
|
|
529
531
|
cssClasses.push(`rounded-pill`);
|
|
@@ -531,43 +533,43 @@ const Button = (props) => {
|
|
|
531
533
|
if (isActive) {
|
|
532
534
|
cssClasses.push('active');
|
|
533
535
|
}
|
|
534
|
-
shadow && cssClasses.push(styles$
|
|
536
|
+
shadow && cssClasses.push(styles$L.shadow);
|
|
535
537
|
className && cssClasses.push(className);
|
|
536
538
|
return cssClasses.filter(css => css).join(' ');
|
|
537
539
|
};
|
|
538
540
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
539
541
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
540
542
|
startIcon &&
|
|
541
|
-
React.createElement(Icon, { className: styles$
|
|
543
|
+
React.createElement(Icon, { className: styles$L.startIcon }, startIcon),
|
|
542
544
|
children,
|
|
543
545
|
endIcon &&
|
|
544
|
-
React.createElement(Icon, { className: styles$
|
|
546
|
+
React.createElement(Icon, { className: styles$L.endIcon }, endIcon))));
|
|
545
547
|
};
|
|
546
548
|
|
|
547
|
-
var css_248z$
|
|
548
|
-
var styles$
|
|
549
|
-
styleInject(css_248z$
|
|
549
|
+
var css_248z$K = ".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";
|
|
550
|
+
var styles$K = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
551
|
+
styleInject(css_248z$K);
|
|
550
552
|
|
|
551
553
|
const ButtonGroup = (props) => {
|
|
552
554
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
553
555
|
const getCssClasses = () => {
|
|
554
556
|
const cssClasses = [];
|
|
555
|
-
cssClasses.push(styles$
|
|
557
|
+
cssClasses.push(styles$K.buttonGroup);
|
|
556
558
|
className && cssClasses.push(className);
|
|
557
559
|
return cssClasses.filter(css => css).join(' ');
|
|
558
560
|
};
|
|
559
561
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
560
562
|
};
|
|
561
563
|
|
|
562
|
-
var css_248z$
|
|
563
|
-
var styles$
|
|
564
|
-
styleInject(css_248z$
|
|
564
|
+
var css_248z$J = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin-bottom: 0;\n list-style: none;\n margin-bottom: 1rem; }\n";
|
|
565
|
+
var styles$J = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
566
|
+
styleInject(css_248z$J);
|
|
565
567
|
|
|
566
568
|
const Breadcrumb = (props) => {
|
|
567
569
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
568
570
|
const getCssClasses = () => {
|
|
569
571
|
const cssClasses = [];
|
|
570
|
-
cssClasses.push(styles$
|
|
572
|
+
cssClasses.push(styles$J.breadcrumb);
|
|
571
573
|
className && cssClasses.push(className);
|
|
572
574
|
return cssClasses.filter(css => css).join(' ');
|
|
573
575
|
};
|
|
@@ -577,15 +579,15 @@ const Breadcrumb = (props) => {
|
|
|
577
579
|
|
|
578
580
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
579
581
|
|
|
580
|
-
var css_248z$
|
|
581
|
-
var styles$
|
|
582
|
-
styleInject(css_248z$
|
|
582
|
+
var css_248z$I = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\"; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary); }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset; }\n";
|
|
583
|
+
var styles$I = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
584
|
+
styleInject(css_248z$I);
|
|
583
585
|
|
|
584
586
|
const BreadcrumbItem = (props) => {
|
|
585
587
|
const { children, className, isActive, onClick } = props;
|
|
586
588
|
const getCssClasses = () => {
|
|
587
589
|
const cssClasses = [];
|
|
588
|
-
cssClasses.push(styles$
|
|
590
|
+
cssClasses.push(styles$I.breadcrumbItem);
|
|
589
591
|
className && cssClasses.push(className);
|
|
590
592
|
isActive && cssClasses.push('active');
|
|
591
593
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -597,115 +599,115 @@ const BreadcrumbItem = (props) => {
|
|
|
597
599
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
598
600
|
};
|
|
599
601
|
|
|
600
|
-
var css_248z$
|
|
601
|
-
var styles$
|
|
602
|
-
styleInject(css_248z$
|
|
602
|
+
var css_248z$H = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius); }\n .Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow); }\n";
|
|
603
|
+
var styles$H = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
604
|
+
styleInject(css_248z$H);
|
|
603
605
|
|
|
604
606
|
const Card = (props) => {
|
|
605
607
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
606
608
|
const getCssClasses = () => {
|
|
607
609
|
const cssClasses = [];
|
|
608
|
-
cssClasses.push(styles$
|
|
609
|
-
shadow && cssClasses.push(styles$
|
|
610
|
+
cssClasses.push(styles$H.card);
|
|
611
|
+
shadow && cssClasses.push(styles$H.shadow);
|
|
610
612
|
className && cssClasses.push(className);
|
|
611
613
|
return cssClasses.filter(css => css).join(' ');
|
|
612
614
|
};
|
|
613
615
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
614
616
|
};
|
|
615
617
|
|
|
616
|
-
var css_248z$
|
|
617
|
-
var styles$
|
|
618
|
-
styleInject(css_248z$
|
|
618
|
+
var css_248z$G = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem; }\n";
|
|
619
|
+
var styles$G = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
620
|
+
styleInject(css_248z$G);
|
|
619
621
|
|
|
620
622
|
const CardBody = (props) => {
|
|
621
623
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
622
624
|
const getCssClasses = () => {
|
|
623
625
|
const cssClasses = [];
|
|
624
|
-
cssClasses.push(styles$
|
|
626
|
+
cssClasses.push(styles$G.cardBody);
|
|
625
627
|
className && cssClasses.push(className);
|
|
626
628
|
return cssClasses.filter(css => css).join(' ');
|
|
627
629
|
};
|
|
628
630
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
629
631
|
};
|
|
630
632
|
|
|
631
|
-
var css_248z$
|
|
632
|
-
var styles$
|
|
633
|
-
styleInject(css_248z$
|
|
633
|
+
var css_248z$F = ".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 .CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
|
|
634
|
+
var styles$F = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
635
|
+
styleInject(css_248z$F);
|
|
634
636
|
|
|
635
637
|
const CardFooter = (props) => {
|
|
636
638
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
637
639
|
const getCssClasses = () => {
|
|
638
640
|
const cssClasses = [];
|
|
639
|
-
cssClasses.push(styles$
|
|
641
|
+
cssClasses.push(styles$F.cardFooter);
|
|
640
642
|
className && cssClasses.push(className);
|
|
641
643
|
return cssClasses.filter(css => css).join(' ');
|
|
642
644
|
};
|
|
643
645
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
644
646
|
};
|
|
645
647
|
|
|
646
|
-
var css_248z$
|
|
647
|
-
var styles$
|
|
648
|
-
styleInject(css_248z$
|
|
648
|
+
var css_248z$E = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important; }\n";
|
|
649
|
+
var styles$E = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
650
|
+
styleInject(css_248z$E);
|
|
649
651
|
|
|
650
652
|
const CardSubtitle = (props) => {
|
|
651
653
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
652
654
|
const getCssClasses = () => {
|
|
653
655
|
const cssClasses = [];
|
|
654
|
-
cssClasses.push(styles$
|
|
656
|
+
cssClasses.push(styles$E.cardSubtitle);
|
|
655
657
|
className && cssClasses.push(className);
|
|
656
658
|
return cssClasses.filter(css => css).join(' ');
|
|
657
659
|
};
|
|
658
660
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
659
661
|
};
|
|
660
662
|
|
|
661
|
-
var css_248z$
|
|
662
|
-
var styles$
|
|
663
|
-
styleInject(css_248z$
|
|
663
|
+
var css_248z$D = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0; }\n";
|
|
664
|
+
var styles$D = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
665
|
+
styleInject(css_248z$D);
|
|
664
666
|
|
|
665
667
|
const CardText = (props) => {
|
|
666
668
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
667
669
|
const getCssClasses = () => {
|
|
668
670
|
const cssClasses = [];
|
|
669
|
-
cssClasses.push(styles$
|
|
671
|
+
cssClasses.push(styles$D.cardText);
|
|
670
672
|
className && cssClasses.push(className);
|
|
671
673
|
return cssClasses.filter(css => css).join(' ');
|
|
672
674
|
};
|
|
673
675
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
674
676
|
};
|
|
675
677
|
|
|
676
|
-
var css_248z$
|
|
677
|
-
var styles$
|
|
678
|
-
styleInject(css_248z$
|
|
678
|
+
var css_248z$C = ".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";
|
|
679
|
+
var styles$C = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
680
|
+
styleInject(css_248z$C);
|
|
679
681
|
|
|
680
682
|
const CardTitle = (props) => {
|
|
681
683
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
682
684
|
const getCssClasses = () => {
|
|
683
685
|
const cssClasses = [];
|
|
684
|
-
cssClasses.push(styles$
|
|
686
|
+
cssClasses.push(styles$C.cardTitle);
|
|
685
687
|
className && cssClasses.push(className);
|
|
686
688
|
return cssClasses.filter(css => css).join(' ');
|
|
687
689
|
};
|
|
688
690
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
689
691
|
};
|
|
690
692
|
|
|
691
|
-
var css_248z$
|
|
692
|
-
var styles$
|
|
693
|
-
styleInject(css_248z$
|
|
693
|
+
var css_248z$B = ".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";
|
|
694
|
+
var styles$B = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
695
|
+
styleInject(css_248z$B);
|
|
694
696
|
|
|
695
697
|
const CardImage = (props) => {
|
|
696
698
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
697
699
|
const getCssClasses = () => {
|
|
698
700
|
const cssClasses = [];
|
|
699
|
-
cssClasses.push(styles$
|
|
701
|
+
cssClasses.push(styles$B.cardImage);
|
|
700
702
|
className && cssClasses.push(className);
|
|
701
703
|
return cssClasses.filter(css => css).join(' ');
|
|
702
704
|
};
|
|
703
705
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
704
706
|
};
|
|
705
707
|
|
|
706
|
-
var css_248z$
|
|
707
|
-
var styles$
|
|
708
|
-
styleInject(css_248z$
|
|
708
|
+
var css_248z$A = ".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 .Checkbox-module_checkboxContainer__x2GCi label {\n margin-bottom: 0;\n margin-left: 0; }\n .Checkbox-module_checkboxContainer__x2GCi label: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";
|
|
709
|
+
var styles$A = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
710
|
+
styleInject(css_248z$A);
|
|
709
711
|
|
|
710
712
|
const Checkbox = (props) => {
|
|
711
713
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -742,24 +744,24 @@ const Checkbox = (props) => {
|
|
|
742
744
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
743
745
|
}
|
|
744
746
|
};
|
|
745
|
-
return (React.createElement("div", { className: styles$
|
|
747
|
+
return (React.createElement("div", { className: styles$A.checkboxContainer },
|
|
746
748
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
747
|
-
React.createElement("label", { onClick: handleClick, className: styles$
|
|
749
|
+
React.createElement("label", { onClick: handleClick, className: styles$A.checkboxLabel + ' ' + (disabled ? styles$A['disabled'] : undefined) }, label),
|
|
748
750
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
749
751
|
};
|
|
750
752
|
|
|
751
|
-
var css_248z$
|
|
752
|
-
var styles$
|
|
753
|
-
styleInject(css_248z$
|
|
753
|
+
var css_248z$z = ".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 .Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow); }\n";
|
|
754
|
+
var styles$z = {"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"};
|
|
755
|
+
styleInject(css_248z$z);
|
|
754
756
|
|
|
755
757
|
const Chip = (props) => {
|
|
756
758
|
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"]);
|
|
757
759
|
const getCssClass = () => {
|
|
758
760
|
const cssClasses = [];
|
|
759
|
-
cssClasses.push(styles$
|
|
760
|
-
cssClasses.push(styles$
|
|
761
|
-
shadow && cssClasses.push(styles$
|
|
762
|
-
onClick && cssClasses.push(styles$
|
|
761
|
+
cssClasses.push(styles$z.chip);
|
|
762
|
+
cssClasses.push(styles$z[color]);
|
|
763
|
+
shadow && cssClasses.push(styles$z['shadow']);
|
|
764
|
+
onClick && cssClasses.push(styles$z['clickable']);
|
|
763
765
|
className && cssClasses.push(className);
|
|
764
766
|
return cssClasses.filter(r => r).join(' ');
|
|
765
767
|
};
|
|
@@ -769,18 +771,18 @@ const Chip = (props) => {
|
|
|
769
771
|
};
|
|
770
772
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
771
773
|
React.createElement("div", null, children),
|
|
772
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
774
|
+
isDeletable && (React.createElement("div", { className: styles$z.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
773
775
|
};
|
|
774
776
|
|
|
775
|
-
var css_248z$
|
|
776
|
-
var styles$
|
|
777
|
-
styleInject(css_248z$
|
|
777
|
+
var css_248z$y = ".FormLabel-module_formLabel__TXcHc {\n margin-bottom: .5rem; }\n";
|
|
778
|
+
var styles$y = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
779
|
+
styleInject(css_248z$y);
|
|
778
780
|
|
|
779
781
|
const FormLabel = (_a) => {
|
|
780
782
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
781
783
|
const getCssClasses = () => {
|
|
782
784
|
const cssClasses = [];
|
|
783
|
-
cssClasses.push(styles$
|
|
785
|
+
cssClasses.push(styles$y.formLabel);
|
|
784
786
|
className && cssClasses.push(className);
|
|
785
787
|
return cssClasses.filter(css => css).join(' ');
|
|
786
788
|
};
|
|
@@ -817,9 +819,9 @@ const FileInput = (props) => {
|
|
|
817
819
|
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))));
|
|
818
820
|
};
|
|
819
821
|
|
|
820
|
-
var css_248z$
|
|
821
|
-
var styles$
|
|
822
|
-
styleInject(css_248z$
|
|
822
|
+
var css_248z$x = ".Select-module_selectContainer__DHFDZ {\n position: relative; }\n\n.Select-module_select__Fbn38 {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .Select-module_select__Fbn38:hover {\n cursor: pointer; }\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";
|
|
823
|
+
var styles$x = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
824
|
+
styleInject(css_248z$x);
|
|
823
825
|
|
|
824
826
|
const Select = (props) => {
|
|
825
827
|
var _a, _b, _c;
|
|
@@ -832,7 +834,7 @@ const Select = (props) => {
|
|
|
832
834
|
const getCssClass = () => {
|
|
833
835
|
const cssClasses = [];
|
|
834
836
|
className && cssClasses.push(className);
|
|
835
|
-
cssClasses.push(styles$
|
|
837
|
+
cssClasses.push(styles$x.select);
|
|
836
838
|
return cssClasses.filter(r => r).join(' ');
|
|
837
839
|
};
|
|
838
840
|
useEffect(() => {
|
|
@@ -950,7 +952,7 @@ const Select = (props) => {
|
|
|
950
952
|
}
|
|
951
953
|
}
|
|
952
954
|
};
|
|
953
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
955
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$x.selectContainer },
|
|
954
956
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
955
957
|
!multiple && renderSingleViewModel(),
|
|
956
958
|
multiple && renderMultipleViewModel(),
|
|
@@ -958,7 +960,7 @@ const Select = (props) => {
|
|
|
958
960
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
959
961
|
isShow &&
|
|
960
962
|
createPortal(React.createElement(React.Fragment, null,
|
|
961
|
-
React.createElement("div", { className: styles$
|
|
963
|
+
React.createElement("div", { className: styles$x.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 } },
|
|
962
964
|
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) },
|
|
963
965
|
multiple &&
|
|
964
966
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -966,30 +968,30 @@ const Select = (props) => {
|
|
|
966
968
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
967
969
|
};
|
|
968
970
|
|
|
969
|
-
var css_248z$
|
|
970
|
-
var styles$
|
|
971
|
-
styleInject(css_248z$
|
|
971
|
+
var css_248z$w = "textarea {\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 transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n resize: vertical; }\n textarea:focus {\n outline: none !important;\n border-color: var(--primary); }\n";
|
|
972
|
+
var styles$w = {};
|
|
973
|
+
styleInject(css_248z$w);
|
|
972
974
|
|
|
973
975
|
const Textarea = (props) => {
|
|
974
976
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
975
977
|
const getCssClass = () => {
|
|
976
978
|
const cssClasses = [];
|
|
977
|
-
cssClasses.push(styles$
|
|
979
|
+
cssClasses.push(styles$w.textarea);
|
|
978
980
|
className && cssClasses.push(className);
|
|
979
981
|
return cssClasses.filter(r => r).join(' ');
|
|
980
982
|
};
|
|
981
983
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
982
984
|
};
|
|
983
985
|
|
|
984
|
-
var css_248z$
|
|
985
|
-
var styles$
|
|
986
|
-
styleInject(css_248z$
|
|
986
|
+
var css_248z$v = ".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 .FormInput-module_formInput__VXZip:focus {\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";
|
|
987
|
+
var styles$v = {"formInput":"FormInput-module_formInput__VXZip"};
|
|
988
|
+
styleInject(css_248z$v);
|
|
987
989
|
|
|
988
990
|
const FormInput = (props) => {
|
|
989
991
|
const { value, name, type, placeholder, className = 'form-control', isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
990
992
|
const getCssClasses = () => {
|
|
991
993
|
const cssClasses = [];
|
|
992
|
-
cssClasses.push(styles$
|
|
994
|
+
cssClasses.push(styles$v.formInput);
|
|
993
995
|
className && cssClasses.push(className);
|
|
994
996
|
!isValid && cssClasses.push('is-invalid');
|
|
995
997
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -1359,16 +1361,16 @@ const DateSelect = (props) => {
|
|
|
1359
1361
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1360
1362
|
// };
|
|
1361
1363
|
|
|
1362
|
-
var css_248z$
|
|
1363
|
-
var styles$
|
|
1364
|
-
styleInject(css_248z$
|
|
1364
|
+
var css_248z$u = ".Drawer-module_drawer__kdQCk {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 280px;\n overflow-y: auto; }\n .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n position: inherit;\n z-index: 0; }\n .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n order: 0; }\n .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n order: 2; }\n .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n overflow: hidden; }\n";
|
|
1365
|
+
var styles$u = {"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"};
|
|
1366
|
+
styleInject(css_248z$u);
|
|
1365
1367
|
|
|
1366
1368
|
const Drawer = (props) => {
|
|
1367
1369
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1368
1370
|
useEffect(() => {
|
|
1369
|
-
document.body.classList.add(styles$
|
|
1371
|
+
document.body.classList.add(styles$u.drawerOpen);
|
|
1370
1372
|
return () => {
|
|
1371
|
-
document.body.classList.remove(styles$
|
|
1373
|
+
document.body.classList.remove(styles$u.drawerOpen);
|
|
1372
1374
|
};
|
|
1373
1375
|
}, []);
|
|
1374
1376
|
const handleClickBackdrop = () => {
|
|
@@ -1382,10 +1384,10 @@ const DrawerContent = (props) => {
|
|
|
1382
1384
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1383
1385
|
const getCssClasses = () => {
|
|
1384
1386
|
const cssClasses = [];
|
|
1385
|
-
cssClasses.push(styles$
|
|
1386
|
-
shadow && cssClasses.push(styles$
|
|
1387
|
-
!!permanent && cssClasses.push(styles$
|
|
1388
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1387
|
+
cssClasses.push(styles$u.drawer);
|
|
1388
|
+
shadow && cssClasses.push(styles$u.shadow);
|
|
1389
|
+
!!permanent && cssClasses.push(styles$u['permanent']);
|
|
1390
|
+
position === 'left' ? cssClasses.push(styles$u['left']) : cssClasses.push(styles$u['right']);
|
|
1389
1391
|
className && cssClasses.push(className);
|
|
1390
1392
|
return cssClasses.filter(css => css).join(' ');
|
|
1391
1393
|
};
|
|
@@ -1399,9 +1401,9 @@ const DrawerContent = (props) => {
|
|
|
1399
1401
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1400
1402
|
};
|
|
1401
1403
|
|
|
1402
|
-
var css_248z$
|
|
1403
|
-
var styles$
|
|
1404
|
-
styleInject(css_248z$
|
|
1404
|
+
var css_248z$t = ".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 .MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n box-shadow: var(--shadow); }\n";
|
|
1405
|
+
var styles$t = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1406
|
+
styleInject(css_248z$t);
|
|
1405
1407
|
|
|
1406
1408
|
const MenuBody = (props) => {
|
|
1407
1409
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1432,8 +1434,8 @@ const MenuBody = (props) => {
|
|
|
1432
1434
|
}, [menuBodyRef]);
|
|
1433
1435
|
const getCssClasses = () => {
|
|
1434
1436
|
const cssClasses = [];
|
|
1435
|
-
cssClasses.push(styles$
|
|
1436
|
-
shadow && cssClasses.push(styles$
|
|
1437
|
+
cssClasses.push(styles$t.menuBody);
|
|
1438
|
+
shadow && cssClasses.push(styles$t.shadow);
|
|
1437
1439
|
className && cssClasses.push(className);
|
|
1438
1440
|
return cssClasses.filter(css => css).join(' ');
|
|
1439
1441
|
};
|
|
@@ -1445,9 +1447,9 @@ const MenuBody = (props) => {
|
|
|
1445
1447
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1446
1448
|
};
|
|
1447
1449
|
|
|
1448
|
-
var css_248z$
|
|
1449
|
-
var styles$
|
|
1450
|
-
styleInject(css_248z$
|
|
1450
|
+
var css_248z$s = ".Menu-module_menu__p8QL- {\n display: flex; }\n";
|
|
1451
|
+
var styles$s = {"menu":"Menu-module_menu__p8QL-"};
|
|
1452
|
+
styleInject(css_248z$s);
|
|
1451
1453
|
|
|
1452
1454
|
const Menu = (props) => {
|
|
1453
1455
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
@@ -1455,7 +1457,7 @@ const Menu = (props) => {
|
|
|
1455
1457
|
const toggleContainerRef = useRef(null);
|
|
1456
1458
|
const getCssClasses = () => {
|
|
1457
1459
|
const cssClasses = [];
|
|
1458
|
-
cssClasses.push(styles$
|
|
1460
|
+
cssClasses.push(styles$s.menu);
|
|
1459
1461
|
className && cssClasses.push(className);
|
|
1460
1462
|
return cssClasses.filter(css => css).join(' ');
|
|
1461
1463
|
};
|
|
@@ -1468,17 +1470,17 @@ const Menu = (props) => {
|
|
|
1468
1470
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1469
1471
|
};
|
|
1470
1472
|
|
|
1471
|
-
var css_248z$
|
|
1472
|
-
var styles$
|
|
1473
|
-
styleInject(css_248z$
|
|
1473
|
+
var css_248z$r = ".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 .MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n margin-bottom: 0;\n font-size: 0.875rem; }\n .MenuItem-module_menuItem__MeBxN:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04); }\n";
|
|
1474
|
+
var styles$r = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1475
|
+
styleInject(css_248z$r);
|
|
1474
1476
|
|
|
1475
1477
|
const MenuItem = (props) => {
|
|
1476
1478
|
const { children, onClick, type = 'item' } = props;
|
|
1477
1479
|
const getCssClasses = () => {
|
|
1478
1480
|
const cssClasses = [];
|
|
1479
|
-
cssClasses.push(styles$
|
|
1481
|
+
cssClasses.push(styles$r.menuItem);
|
|
1480
1482
|
if (type === 'header') {
|
|
1481
|
-
cssClasses.push(styles$
|
|
1483
|
+
cssClasses.push(styles$r.menuItemHeader);
|
|
1482
1484
|
}
|
|
1483
1485
|
return cssClasses.filter(css => css).join(' ');
|
|
1484
1486
|
};
|
|
@@ -1494,23 +1496,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1494
1496
|
return (React.createElement(Fragment, null, children));
|
|
1495
1497
|
};
|
|
1496
1498
|
|
|
1497
|
-
var css_248z$
|
|
1498
|
-
var styles$
|
|
1499
|
-
styleInject(css_248z$
|
|
1499
|
+
var css_248z$q = ".MenuDivider-module_menuItemDivider__oRP-j {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef; }\n";
|
|
1500
|
+
var styles$q = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1501
|
+
styleInject(css_248z$q);
|
|
1500
1502
|
|
|
1501
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1503
|
+
const MenuDivider = () => React.createElement("div", { className: styles$q.menuItemDivider });
|
|
1502
1504
|
|
|
1503
|
-
var css_248z$
|
|
1504
|
-
var styles$
|
|
1505
|
-
styleInject(css_248z$
|
|
1505
|
+
var css_248z$p = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px; }\n";
|
|
1506
|
+
var styles$p = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1507
|
+
styleInject(css_248z$p);
|
|
1506
1508
|
|
|
1507
1509
|
const ExpansionPanelContent = ({ children }) => {
|
|
1508
|
-
return (React.createElement("div", { className: styles$
|
|
1510
|
+
return (React.createElement("div", { className: styles$p.expansionPanelContent }, children));
|
|
1509
1511
|
};
|
|
1510
1512
|
|
|
1511
|
-
var css_248z$
|
|
1512
|
-
var styles$
|
|
1513
|
-
styleInject(css_248z$
|
|
1513
|
+
var css_248z$o = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px; }\n .ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n cursor: pointer;\n background-color: var(--highlight); }\n";
|
|
1514
|
+
var styles$o = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1515
|
+
styleInject(css_248z$o);
|
|
1514
1516
|
|
|
1515
1517
|
const ExpansionPanelHeader = (props) => {
|
|
1516
1518
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1518,15 +1520,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1518
1520
|
e.stopPropagation();
|
|
1519
1521
|
onClick && onClick(e);
|
|
1520
1522
|
};
|
|
1521
|
-
return (React.createElement("div", { className: styles$
|
|
1523
|
+
return (React.createElement("div", { className: styles$o.expansionPanelHeader, onClick: handleClick },
|
|
1522
1524
|
children,
|
|
1523
1525
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1524
1526
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1525
1527
|
};
|
|
1526
1528
|
|
|
1527
|
-
var css_248z$
|
|
1528
|
-
var styles$
|
|
1529
|
-
styleInject(css_248z$
|
|
1529
|
+
var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\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 .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph {\n margin: 16px 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0; }\n";
|
|
1530
|
+
var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1531
|
+
styleInject(css_248z$n);
|
|
1530
1532
|
|
|
1531
1533
|
const ExpansionPanel = (props) => {
|
|
1532
1534
|
const { header, children, isExpanded = false, onChange } = props;
|
|
@@ -1536,9 +1538,9 @@ const ExpansionPanel = (props) => {
|
|
|
1536
1538
|
}, [isExpanded]);
|
|
1537
1539
|
const getCssClasses = () => {
|
|
1538
1540
|
const cssClasses = [];
|
|
1539
|
-
cssClasses.push(styles$
|
|
1541
|
+
cssClasses.push(styles$n.expansionPanel);
|
|
1540
1542
|
if (_isExpanded) {
|
|
1541
|
-
cssClasses.push(styles$
|
|
1543
|
+
cssClasses.push(styles$n.isExpanded);
|
|
1542
1544
|
}
|
|
1543
1545
|
return cssClasses.filter(css => css).join(' ');
|
|
1544
1546
|
};
|
|
@@ -1552,16 +1554,16 @@ const ExpansionPanel = (props) => {
|
|
|
1552
1554
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1553
1555
|
};
|
|
1554
1556
|
|
|
1555
|
-
var css_248z$
|
|
1556
|
-
var styles$
|
|
1557
|
-
styleInject(css_248z$
|
|
1557
|
+
var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n box-shadow: var(--shadow); }\n .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 1000; }\n";
|
|
1558
|
+
var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
|
|
1559
|
+
styleInject(css_248z$m);
|
|
1558
1560
|
|
|
1559
1561
|
const FloatingActionButton = (props) => {
|
|
1560
1562
|
const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1561
1563
|
const getCssClasses = () => {
|
|
1562
1564
|
const cssClasses = [];
|
|
1563
|
-
cssClasses.push(styles$
|
|
1564
|
-
fixed && cssClasses.push(styles$
|
|
1565
|
+
cssClasses.push(styles$m.fab);
|
|
1566
|
+
fixed && cssClasses.push(styles$m['fixed']);
|
|
1565
1567
|
className && cssClasses.push(className);
|
|
1566
1568
|
return cssClasses.filter(css => css).join(' ');
|
|
1567
1569
|
};
|
|
@@ -1604,16 +1606,16 @@ const Row = (props) => {
|
|
|
1604
1606
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
1605
1607
|
};
|
|
1606
1608
|
|
|
1607
|
-
var css_248z$
|
|
1608
|
-
var styles$
|
|
1609
|
-
styleInject(css_248z$
|
|
1609
|
+
var css_248z$l = ".Link-module_link__YlJQl {\n color: var(--primary);\n text-decoration: underline; }\n .Link-module_link__YlJQl:hover {\n color: var(--primary-dark); }\n";
|
|
1610
|
+
var styles$l = {"link":"Link-module_link__YlJQl"};
|
|
1611
|
+
styleInject(css_248z$l);
|
|
1610
1612
|
|
|
1611
1613
|
const Link = (props) => {
|
|
1612
1614
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1613
1615
|
const [status, setStatus] = useState(STATUS.NORMAL);
|
|
1614
1616
|
const getCssClasses = () => {
|
|
1615
1617
|
const cssClasses = [];
|
|
1616
|
-
cssClasses.push(styles$
|
|
1618
|
+
cssClasses.push(styles$l.link);
|
|
1617
1619
|
className && cssClasses.push(className);
|
|
1618
1620
|
status !== STATUS.NORMAL && cssClasses.push(status);
|
|
1619
1621
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -1627,15 +1629,15 @@ const Link = (props) => {
|
|
|
1627
1629
|
return (React.createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1628
1630
|
};
|
|
1629
1631
|
|
|
1630
|
-
var css_248z$
|
|
1631
|
-
var styles$
|
|
1632
|
-
styleInject(css_248z$
|
|
1632
|
+
var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%; }\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@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg); }\n to {\n transform: rotate(360deg); } }\n";
|
|
1633
|
+
var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1634
|
+
styleInject(css_248z$k);
|
|
1633
1635
|
|
|
1634
1636
|
const LoadingIndicator = (_a) => {
|
|
1635
1637
|
var rest = __rest(_a, []);
|
|
1636
1638
|
const getCssClasses = () => {
|
|
1637
1639
|
const cssClasses = [];
|
|
1638
|
-
cssClasses.push(styles$
|
|
1640
|
+
cssClasses.push(styles$k.loadingIndicator);
|
|
1639
1641
|
return cssClasses.filter(css => css).join(' ');
|
|
1640
1642
|
};
|
|
1641
1643
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1645,7 +1647,7 @@ const LoadingIndicator = (_a) => {
|
|
|
1645
1647
|
const LoadingIndicatorContainer = ({ children }) => {
|
|
1646
1648
|
const getCssClasses = () => {
|
|
1647
1649
|
const cssClasses = [];
|
|
1648
|
-
cssClasses.push(styles$
|
|
1650
|
+
cssClasses.push(styles$k.loadingIndicatorContainer);
|
|
1649
1651
|
return cssClasses.filter(css => css).join(' ');
|
|
1650
1652
|
};
|
|
1651
1653
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1673,41 +1675,45 @@ class LoadingIndicatorService {
|
|
|
1673
1675
|
}
|
|
1674
1676
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1675
1677
|
|
|
1676
|
-
var css_248z$
|
|
1677
|
-
var styles$
|
|
1678
|
-
styleInject(css_248z$
|
|
1678
|
+
var css_248z$j = ".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.ModalHeader-module_modalTitle__2xShH {\n margin-bottom: 0;\n line-height: 1.5; }\n";
|
|
1679
|
+
var styles$j = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1680
|
+
styleInject(css_248z$j);
|
|
1679
1681
|
|
|
1680
1682
|
const ModalHeader = (props) => {
|
|
1681
1683
|
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1682
1684
|
const handleClick = () => {
|
|
1683
1685
|
onClose && onClose();
|
|
1684
1686
|
};
|
|
1685
|
-
return (React.createElement("div", Object.assign({ className:
|
|
1686
|
-
React.createElement("h5", { className:
|
|
1687
|
+
return (React.createElement("div", Object.assign({ className: styles$j.modalHeader }, rest),
|
|
1688
|
+
React.createElement("h5", { className: styles$j.modalTitle }, children),
|
|
1687
1689
|
isDismissable &&
|
|
1688
1690
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
1689
1691
|
};
|
|
1690
1692
|
|
|
1691
|
-
|
|
1693
|
+
var css_248z$i = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem; }\n";
|
|
1694
|
+
var styles$i = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1695
|
+
styleInject(css_248z$i);
|
|
1692
1696
|
|
|
1693
|
-
|
|
1694
|
-
|
|
1697
|
+
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$i.modalBody }, children));
|
|
1698
|
+
|
|
1699
|
+
var css_248z$h = ".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 .ModalFooter-module_modalFooter__SNm-f > * {\n margin: 0.25rem; }\n";
|
|
1700
|
+
var styles$h = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1695
1701
|
styleInject(css_248z$h);
|
|
1696
1702
|
|
|
1697
|
-
|
|
1698
|
-
var styles$g = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1699
|
-
styleInject(css_248z$g);
|
|
1703
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$h.modalFooter }, children));
|
|
1700
1704
|
|
|
1701
|
-
|
|
1705
|
+
var css_248z$g = ".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 .Modal-module_modal__HMxWV .Modal-module_sm__CsR6U {\n max-width: 300px; }\n .Modal-module_modal__HMxWV .Modal-module_md__lNggx {\n max-width: 500px; }\n .Modal-module_modal__HMxWV .Modal-module_lg__6dtT2 {\n max-width: 1140px; }\n @media (min-width: 576px) {\n .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n max-width: 600px; } }\n\n.Modal-module_modalDialog__fNqyK {\n position: relative;\n width: auto;\n pointer-events: none; }\n @media (min-width: 576px) {\n .Modal-module_modalDialog__fNqyK {\n max-width: 500px;\n margin: 1.75rem auto; } }\n\n.Modal-module_modalDialogCentered__sa2wv {\n min-height: calc(100% - 3.5rem);\n display: flex;\n align-items: center; }\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 black;\n outline: 0; }\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 .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 @media (min-width: 320px) {\n .Modal-module_fullscreen__iepGa {\n max-width: 100% !important; } }\n";
|
|
1706
|
+
var styles$g = {"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"};
|
|
1707
|
+
styleInject(css_248z$g);
|
|
1702
1708
|
|
|
1703
1709
|
const Modal = (props) => {
|
|
1704
1710
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1705
1711
|
const getCssClass = () => {
|
|
1706
1712
|
const cssClasses = [];
|
|
1707
|
-
cssClasses.push(
|
|
1708
|
-
cssClasses.push(styles$
|
|
1709
|
-
|
|
1710
|
-
size && cssClasses.push(styles$
|
|
1713
|
+
cssClasses.push(styles$g.modalDialog);
|
|
1714
|
+
cssClasses.push(styles$g.modalDialogCentered);
|
|
1715
|
+
fullScreen && cssClasses.push(styles$g.fullscreen);
|
|
1716
|
+
size && cssClasses.push(styles$g[size]);
|
|
1711
1717
|
className && cssClasses.push(className);
|
|
1712
1718
|
return cssClasses.filter(r => r).join(' ');
|
|
1713
1719
|
};
|
|
@@ -1720,10 +1726,10 @@ const Modal = (props) => {
|
|
|
1720
1726
|
const handleClickBackdrop = () => {
|
|
1721
1727
|
onBackdropClick && onBackdropClick();
|
|
1722
1728
|
};
|
|
1723
|
-
return (React.createElement(Fragment, null,
|
|
1724
|
-
React.createElement("div", { className:
|
|
1729
|
+
return (React.createElement(React.Fragment, null,
|
|
1730
|
+
React.createElement("div", { className: styles$g.modal },
|
|
1725
1731
|
React.createElement("div", { className: getCssClass() },
|
|
1726
|
-
React.createElement("div", { className:
|
|
1732
|
+
React.createElement("div", { className: styles$g.modalContent },
|
|
1727
1733
|
header &&
|
|
1728
1734
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1729
1735
|
React.createElement(ModalBody, null, children),
|
|
@@ -1747,8 +1753,8 @@ var MODALBUTTONTYPE;
|
|
|
1747
1753
|
})(MODALBUTTONTYPE || (MODALBUTTONTYPE = {}));
|
|
1748
1754
|
|
|
1749
1755
|
const GlobalModal = ({ title, description, formControls, onOk, onCancel, isDismissable = false, buttons = [
|
|
1750
|
-
{ label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text,
|
|
1751
|
-
{ label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained },
|
|
1756
|
+
{ label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text, shadow: false },
|
|
1757
|
+
{ label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained, focus: true },
|
|
1752
1758
|
], size = SIZE.md, fullScreen = false }) => {
|
|
1753
1759
|
// workaround for getDerivedStateFromProps
|
|
1754
1760
|
const [myControls, setMyControls] = useState(null);
|
|
@@ -1787,7 +1793,7 @@ const GlobalModal = ({ title, description, formControls, onOk, onCancel, isDismi
|
|
|
1787
1793
|
}
|
|
1788
1794
|
button.handler && button.handler();
|
|
1789
1795
|
};
|
|
1790
|
-
return (React.createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, onClick: () => handleClickButton(button) }, button.label)))) },
|
|
1796
|
+
return (React.createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, shadow: button.shadow, onClick: () => handleClickButton(button) }, button.label)))) },
|
|
1791
1797
|
description && React.createElement("div", null, description),
|
|
1792
1798
|
modalType === MODALTYPE.FORM &&
|
|
1793
1799
|
React.createElement(Fragment, null,
|