react-asc 18.7.2 → 18.8.2
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/TreeView/TreeItem.d.ts +13 -0
- package/components/TreeView/TreeView.d.ts +2 -9
- package/components/TreeView/index.d.ts +1 -0
- package/index.es.js +347 -358
- package/index.es.js.map +1 -1
- package/index.js +347 -357
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/react-asc.scss +4 -15
- package/components/TreeView/TreeNode.d.ts +0 -13
package/index.es.js
CHANGED
|
@@ -87,56 +87,56 @@ 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$T = ".Alert-module_alert__2yOUn {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\n\n.Alert-module_contained__1cUnn.Alert-module_primary__1pnWJ {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Alert-module_contained__1cUnn.Alert-module_accent__3TlkP {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Alert-module_contained__1cUnn.Alert-module_secondary__3cfYS {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Alert-module_contained__1cUnn.Alert-module_light__vSzHK {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Alert-module_contained__1cUnn.Alert-module_dark__3DrkS {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Alert-module_outline__3fdYC.Alert-module_primary__1pnWJ {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_secondary__3cfYS {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_accent__3TlkP {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_light__vSzHK {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important;\n}\n.Alert-module_outline__3fdYC.Alert-module_dark__3DrkS {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important;\n}";
|
|
91
|
+
var styles$T = {"alert":"Alert-module_alert__2yOUn","contained":"Alert-module_contained__1cUnn","primary":"Alert-module_primary__1pnWJ","accent":"Alert-module_accent__3TlkP","secondary":"Alert-module_secondary__3cfYS","light":"Alert-module_light__vSzHK","dark":"Alert-module_dark__3DrkS","outline":"Alert-module_outline__3fdYC"};
|
|
92
|
+
styleInject(css_248z$T);
|
|
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$T.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$T.contained);
|
|
101
|
+
cssClasses.push(styles$T[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$T.outline);
|
|
105
|
+
cssClasses.push(styles$T[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$T['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$S = ".AppBar-module_appbar__1S8G1 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0;\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_primary__3CiO7 {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_secondary__1W4qT {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_accent__Mgcwx {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_light__1FxmL {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_dark__3n5rm {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__1S8G1.AppBar-module_shadow__2c8iH {\n box-shadow: var(--shadow);\n}";
|
|
115
|
+
var styles$S = {"appbar":"AppBar-module_appbar__1S8G1","primary":"AppBar-module_primary__3CiO7","secondary":"AppBar-module_secondary__1W4qT","accent":"AppBar-module_accent__Mgcwx","light":"AppBar-module_light__1FxmL","dark":"AppBar-module_dark__3n5rm","shadow":"AppBar-module_shadow__2c8iH"};
|
|
116
|
+
styleInject(css_248z$S);
|
|
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$S[color]);
|
|
123
|
+
cssClasses.push(styles$S.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$S['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$R = ".AppBarTitle-module_appbarTitle__3J-Z1 {\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__3J-Z1:hover {\n cursor: pointer;\n}";
|
|
132
|
+
var styles$R = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
|
|
133
|
+
styleInject(css_248z$R);
|
|
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$R.appbarTitle);
|
|
140
140
|
className && cssClasses.push(className);
|
|
141
141
|
return cssClasses.filter(r => r).join(' ');
|
|
142
142
|
};
|
|
@@ -164,40 +164,40 @@ const Backdrop = (props) => {
|
|
|
164
164
|
return (createPortal(React.createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
|
|
165
165
|
};
|
|
166
166
|
|
|
167
|
-
var css_248z$
|
|
168
|
-
var styles$
|
|
169
|
-
styleInject(css_248z$
|
|
167
|
+
var css_248z$Q = ".List-module_list__1ax9w {\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}";
|
|
168
|
+
var styles$Q = {"list":"List-module_list__1ax9w"};
|
|
169
|
+
styleInject(css_248z$Q);
|
|
170
170
|
|
|
171
171
|
const List = (props) => {
|
|
172
172
|
const { children, className, isFlush } = props;
|
|
173
173
|
const getCssClasses = () => {
|
|
174
174
|
const cssClasses = [];
|
|
175
175
|
if (isFlush) {
|
|
176
|
-
cssClasses.push(styles$
|
|
176
|
+
cssClasses.push(styles$Q.flush);
|
|
177
177
|
}
|
|
178
|
-
cssClasses.push(styles$
|
|
178
|
+
cssClasses.push(styles$Q.list);
|
|
179
179
|
className && cssClasses.push(className);
|
|
180
180
|
return cssClasses.filter(css => css).join(' ');
|
|
181
181
|
};
|
|
182
182
|
return (React.createElement("ul", { className: getCssClasses() }, children));
|
|
183
183
|
};
|
|
184
184
|
|
|
185
|
-
var css_248z$
|
|
186
|
-
var styles$
|
|
187
|
-
styleInject(css_248z$
|
|
185
|
+
var css_248z$P = ".ListItem-module_listItem__3hAZb {\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__3hAZb:hover, .ListItem-module_listItem__3hAZb.ListItem-module_active__hyvch {\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__3hAZb + .ListItem-module_listItem__3hAZb {\n border-top-width: 0;\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
186
|
+
var styles$P = {"listItem":"ListItem-module_listItem__3hAZb","active":"ListItem-module_active__hyvch","primary":"ListItem-module_primary__2OJAg","accent":"ListItem-module_accent__2RXHe","secondary":"ListItem-module_secondary__3EVjH","light":"ListItem-module_light__3CJBB","dark":"ListItem-module_dark__SazkE"};
|
|
187
|
+
styleInject(css_248z$P);
|
|
188
188
|
|
|
189
189
|
const ListItem = (props) => {
|
|
190
190
|
const { id, children, color, active, className, isHoverable, isDisabled, onClick } = props;
|
|
191
191
|
const getCssClasses = () => {
|
|
192
192
|
const cssClasses = [];
|
|
193
193
|
if (active) {
|
|
194
|
-
cssClasses.push(styles$
|
|
194
|
+
cssClasses.push(styles$P['active']);
|
|
195
195
|
}
|
|
196
196
|
if (isDisabled) {
|
|
197
197
|
cssClasses.push(`disabled`);
|
|
198
198
|
}
|
|
199
|
-
color && cssClasses.push(styles$
|
|
200
|
-
cssClasses.push(styles$
|
|
199
|
+
color && cssClasses.push(styles$P[color]);
|
|
200
|
+
cssClasses.push(styles$P.listItem);
|
|
201
201
|
className && cssClasses.push(className);
|
|
202
202
|
return cssClasses.filter(css => css).join(' ');
|
|
203
203
|
};
|
|
@@ -207,32 +207,32 @@ const ListItem = (props) => {
|
|
|
207
207
|
return (React.createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
|
|
208
208
|
};
|
|
209
209
|
|
|
210
|
-
var css_248z$
|
|
211
|
-
var styles$
|
|
212
|
-
styleInject(css_248z$
|
|
210
|
+
var css_248z$O = ".ListItemAvatar-module_avatar__1fjSE {\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__1fjSE img {\n border-radius: 50%;\n}";
|
|
211
|
+
var styles$O = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
|
|
212
|
+
styleInject(css_248z$O);
|
|
213
213
|
|
|
214
|
-
const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$
|
|
214
|
+
const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$O.avatar }, avatar));
|
|
215
215
|
|
|
216
|
-
var css_248z$
|
|
217
|
-
var styles$
|
|
218
|
-
styleInject(css_248z$
|
|
216
|
+
var css_248z$N = ".ListItemIcon-module_icon__-nsUy {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__-nsUy svg {\n width: 24px;\n height: 24px;\n}";
|
|
217
|
+
var styles$N = {"icon":"ListItemIcon-module_icon__-nsUy"};
|
|
218
|
+
styleInject(css_248z$N);
|
|
219
219
|
|
|
220
|
-
const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$
|
|
220
|
+
const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$N.icon }, icon));
|
|
221
221
|
|
|
222
|
-
var css_248z$
|
|
223
|
-
var styles$
|
|
224
|
-
styleInject(css_248z$
|
|
222
|
+
var css_248z$M = ".ListItemAction-module_listItemAction__26S66 {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__26S66 svg {\n width: 20px;\n height: 20px;\n}";
|
|
223
|
+
var styles$M = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
|
|
224
|
+
styleInject(css_248z$M);
|
|
225
225
|
|
|
226
|
-
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$
|
|
226
|
+
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$M.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
227
227
|
|
|
228
|
-
var css_248z$
|
|
229
|
-
var styles$
|
|
230
|
-
styleInject(css_248z$
|
|
228
|
+
var css_248z$L = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
|
|
229
|
+
var styles$L = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
230
|
+
styleInject(css_248z$L);
|
|
231
231
|
|
|
232
232
|
const ListItemText = ({ primary, secondary }) => {
|
|
233
233
|
const getCssClasses = () => {
|
|
234
234
|
const cssClasses = [];
|
|
235
|
-
cssClasses.push(styles$
|
|
235
|
+
cssClasses.push(styles$L.listItemText);
|
|
236
236
|
return cssClasses.filter(css => css).join(' ');
|
|
237
237
|
};
|
|
238
238
|
return (React.createElement("div", { className: getCssClasses() },
|
|
@@ -243,9 +243,9 @@ const ListItemText = ({ primary, secondary }) => {
|
|
|
243
243
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
244
244
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
245
245
|
|
|
246
|
-
var css_248z$
|
|
247
|
-
var styles$
|
|
248
|
-
styleInject(css_248z$
|
|
246
|
+
var css_248z$K = ".AutoComplete-module_selectContainer__SyqtX {\n position: relative;\n}\n\n.AutoComplete-module_select__2_7JD {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__2_7JD:hover {\n cursor: pointer;\n}\n\n.AutoComplete-module_selectMenu__2_ybA {\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}";
|
|
247
|
+
var styles$K = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
|
|
248
|
+
styleInject(css_248z$K);
|
|
249
249
|
|
|
250
250
|
// preset value
|
|
251
251
|
// enter -> delay? -> show results
|
|
@@ -274,10 +274,27 @@ const AutoComplete = (props) => {
|
|
|
274
274
|
}
|
|
275
275
|
}, [options]);
|
|
276
276
|
useDebounce(() => { onChange && onChange(searchText); }, debounce, [searchText]);
|
|
277
|
+
useEffect(() => {
|
|
278
|
+
if (isShow === true) {
|
|
279
|
+
document.body.classList.add('modal-open');
|
|
280
|
+
const main = document.querySelector('.main');
|
|
281
|
+
main === null || main === void 0 ? void 0 : main.classList.add('modal-open');
|
|
282
|
+
}
|
|
283
|
+
else {
|
|
284
|
+
document.body.classList.remove('modal-open');
|
|
285
|
+
const main = document.querySelector('.main');
|
|
286
|
+
main === null || main === void 0 ? void 0 : main.classList.remove('modal-open');
|
|
287
|
+
}
|
|
288
|
+
}, [isShow]);
|
|
289
|
+
useEffect(() => {
|
|
290
|
+
return () => {
|
|
291
|
+
document.body.classList.remove('modal-open');
|
|
292
|
+
};
|
|
293
|
+
}, []);
|
|
277
294
|
const getCssClass = () => {
|
|
278
295
|
const cssClasses = [];
|
|
279
296
|
className && cssClasses.push(className);
|
|
280
|
-
cssClasses.push(styles$
|
|
297
|
+
cssClasses.push(styles$K.select);
|
|
281
298
|
return cssClasses.filter(r => r).join(' ');
|
|
282
299
|
};
|
|
283
300
|
const show = () => setIsShow(true);
|
|
@@ -302,35 +319,35 @@ const AutoComplete = (props) => {
|
|
|
302
319
|
setSearchText('');
|
|
303
320
|
};
|
|
304
321
|
return (React.createElement(React.Fragment, null,
|
|
305
|
-
React.createElement("div", { ref: selectConainter, className: styles$
|
|
322
|
+
React.createElement("div", { ref: selectConainter, className: styles$K.selectContainer },
|
|
306
323
|
React.createElement("div", { className: "d-flex" },
|
|
307
324
|
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 }),
|
|
308
325
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
309
326
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
310
327
|
isShow &&
|
|
311
328
|
React.createElement(React.Fragment, null,
|
|
312
|
-
React.createElement("div", { className: styles$
|
|
329
|
+
React.createElement("div", { className: styles$K.selectMenu },
|
|
313
330
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option) },
|
|
314
331
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
315
332
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
316
333
|
};
|
|
317
334
|
|
|
318
|
-
var css_248z$
|
|
319
|
-
var styles$
|
|
320
|
-
styleInject(css_248z$
|
|
335
|
+
var css_248z$J = ".Badge-module_badgeContainer__1QtTD {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.Badge-module_badge__2Y_LO {\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__2Y_LO.Badge-module_primary__2mn7_ {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_accent__8Hg8z {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__2Y_LO.Badge-module_secondary__1QqDc {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__2Y_LO.Badge-module_light__3Z7JO {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__2Y_LO.Badge-module_dark__2qWe_ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
336
|
+
var styles$J = {"badgeContainer":"Badge-module_badgeContainer__1QtTD","badge":"Badge-module_badge__2Y_LO","primary":"Badge-module_primary__2mn7_","accent":"Badge-module_accent__8Hg8z","secondary":"Badge-module_secondary__1QqDc","light":"Badge-module_light__3Z7JO","dark":"Badge-module_dark__2qWe_"};
|
|
337
|
+
styleInject(css_248z$J);
|
|
321
338
|
|
|
322
339
|
const Badge = (props) => {
|
|
323
340
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
324
341
|
const getCssClassesBadgeContainer = () => {
|
|
325
342
|
const cssClasses = [];
|
|
326
|
-
cssClasses.push(styles$
|
|
343
|
+
cssClasses.push(styles$J.badgeContainer);
|
|
327
344
|
className && cssClasses.push(className);
|
|
328
345
|
return cssClasses.filter(css => css).join(' ');
|
|
329
346
|
};
|
|
330
347
|
const getCssClassesBadge = () => {
|
|
331
348
|
const cssClasses = [];
|
|
332
|
-
cssClasses.push(styles$
|
|
333
|
-
cssClasses.push(styles$
|
|
349
|
+
cssClasses.push(styles$J.badge);
|
|
350
|
+
cssClasses.push(styles$J[color]);
|
|
334
351
|
return cssClasses.filter(css => css).join(' ');
|
|
335
352
|
};
|
|
336
353
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -338,42 +355,42 @@ const Badge = (props) => {
|
|
|
338
355
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
339
356
|
};
|
|
340
357
|
|
|
341
|
-
var css_248z$
|
|
342
|
-
var styles$
|
|
343
|
-
styleInject(css_248z$
|
|
358
|
+
var css_248z$I = ".Icon-module_icon__2etAT {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__2etAT svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n color: var(--primary);\n}\n.Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n color: var(--accent);\n}\n.Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n color: var(--secondary);\n}\n.Icon-module_icon__2etAT.Icon-module_light__2SugS {\n color: var(--light);\n}\n.Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n color: var(--dark);\n}";
|
|
359
|
+
var styles$I = {"icon":"Icon-module_icon__2etAT","primary":"Icon-module_primary__32Mh4","accent":"Icon-module_accent__2U_no","secondary":"Icon-module_secondary__3cMmx","light":"Icon-module_light__2SugS","dark":"Icon-module_dark__GWMzb"};
|
|
360
|
+
styleInject(css_248z$I);
|
|
344
361
|
|
|
345
362
|
const Icon = (props) => {
|
|
346
363
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
347
364
|
const getCssClasses = () => {
|
|
348
365
|
const cssClasses = [];
|
|
349
|
-
cssClasses.push(styles$
|
|
350
|
-
iconColor && cssClasses.push(styles$
|
|
366
|
+
cssClasses.push(styles$I.icon);
|
|
367
|
+
iconColor && cssClasses.push(styles$I[iconColor]);
|
|
351
368
|
className && cssClasses.push(className);
|
|
352
369
|
return cssClasses.filter(css => css).join(' ');
|
|
353
370
|
};
|
|
354
371
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
355
372
|
};
|
|
356
373
|
|
|
357
|
-
var css_248z$
|
|
358
|
-
var styles$
|
|
359
|
-
styleInject(css_248z$
|
|
374
|
+
var css_248z$H = ".Button-module_button__3cIVZ {\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 box-shadow: var(--shadow);\n}\n\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg:hover {\n background-color: var(--primary-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6 {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Button-module_btnContained__8Q4uL.Button-module_accent__1_cP6:hover {\n background-color: var(--accent-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Button-module_btnContained__8Q4uL.Button-module_secondary__psAvb:hover {\n background-color: var(--secondary-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Button-module_btnContained__8Q4uL.Button-module_light__JVK1z:hover {\n background-color: var(--light-dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Button-module_btnContained__8Q4uL.Button-module_dark__O89wU:hover {\n background-color: var(--dark-dark);\n}\n.Button-module_btnContained__8Q4uL:disabled:hover {\n cursor: not-allowed;\n}\n\n.Button-module_btnText__32H44 {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg {\n color: var(--primary) !important;\n}\n.Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n}\n.Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n}\n.Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n}\n.Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n text-decoration: none;\n background: var(--light-highlight) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU {\n color: var(--dark) !important;\n}\n.Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_btnOutline__2drkn {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n color: var(--primary) !important;\n border-color: var(--primary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n background: var(--primary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n background: var(--secondary-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n border-color: var(--accent) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n background: var(--accent-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n background: var(--light-highlight) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n color: var(--dark) !important;\n border-color: var(--dark) !important;\n}\n.Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n background: var(--dark-highlight) !important;\n}\n\n.Button-module_startIcon__1TN-G {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__1TN-G svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__3uZjE {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__3uZjE svg {\n width: 18px;\n height: 18px;\n}";
|
|
375
|
+
var styles$H = {"button":"Button-module_button__3cIVZ","btnContained":"Button-module_btnContained__8Q4uL","primary":"Button-module_primary__2soUg","accent":"Button-module_accent__1_cP6","secondary":"Button-module_secondary__psAvb","light":"Button-module_light__JVK1z","dark":"Button-module_dark__O89wU","btnText":"Button-module_btnText__32H44","btnOutline":"Button-module_btnOutline__2drkn","startIcon":"Button-module_startIcon__1TN-G","endIcon":"Button-module_endIcon__3uZjE"};
|
|
376
|
+
styleInject(css_248z$H);
|
|
360
377
|
|
|
361
378
|
const ButtonTemplate = (props) => {
|
|
362
379
|
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
|
|
363
380
|
const getCssClasses = () => {
|
|
364
381
|
const cssClasses = [];
|
|
365
|
-
cssClasses.push(styles$
|
|
382
|
+
cssClasses.push(styles$H.button);
|
|
366
383
|
if (variant !== 'outline' && variant !== 'text') {
|
|
367
|
-
cssClasses.push(styles$
|
|
368
|
-
cssClasses.push(styles$
|
|
384
|
+
cssClasses.push(styles$H.btnContained);
|
|
385
|
+
cssClasses.push(styles$H[color]);
|
|
369
386
|
}
|
|
370
387
|
if (variant === 'outline') {
|
|
371
|
-
cssClasses.push(styles$
|
|
372
|
-
cssClasses.push(styles$
|
|
388
|
+
cssClasses.push(styles$H.btnOutline);
|
|
389
|
+
cssClasses.push(styles$H[color]);
|
|
373
390
|
}
|
|
374
391
|
if (variant === 'text') {
|
|
375
|
-
cssClasses.push(styles$
|
|
376
|
-
cssClasses.push(styles$
|
|
392
|
+
cssClasses.push(styles$H.btnText);
|
|
393
|
+
cssClasses.push(styles$H[color]);
|
|
377
394
|
}
|
|
378
395
|
if (isRounded && variant !== 'text') {
|
|
379
396
|
cssClasses.push(`rounded-pill`);
|
|
@@ -387,40 +404,40 @@ const ButtonTemplate = (props) => {
|
|
|
387
404
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
388
405
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
389
406
|
startIcon &&
|
|
390
|
-
React.createElement(Icon, { className: styles$
|
|
407
|
+
React.createElement(Icon, { className: styles$H.startIcon }, startIcon),
|
|
391
408
|
children,
|
|
392
409
|
endIcon &&
|
|
393
|
-
React.createElement(Icon, { className: styles$
|
|
410
|
+
React.createElement(Icon, { className: styles$H.endIcon }, endIcon))));
|
|
394
411
|
};
|
|
395
412
|
|
|
396
413
|
const Button = (props) => {
|
|
397
414
|
return (React.createElement(ButtonTemplate, Object.assign({}, props)));
|
|
398
415
|
};
|
|
399
416
|
|
|
400
|
-
var css_248z$
|
|
401
|
-
var styles$
|
|
402
|
-
styleInject(css_248z$
|
|
417
|
+
var css_248z$G = ".ButtonGroup-module_buttonGroup__2RS71 button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__2RS71 button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}";
|
|
418
|
+
var styles$G = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
|
|
419
|
+
styleInject(css_248z$G);
|
|
403
420
|
|
|
404
421
|
const ButtonGroup = (props) => {
|
|
405
422
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
406
423
|
const getCssClasses = () => {
|
|
407
424
|
const cssClasses = [];
|
|
408
|
-
cssClasses.push(styles$
|
|
425
|
+
cssClasses.push(styles$G.buttonGroup);
|
|
409
426
|
className && cssClasses.push(className);
|
|
410
427
|
return cssClasses.filter(css => css).join(' ');
|
|
411
428
|
};
|
|
412
429
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
413
430
|
};
|
|
414
431
|
|
|
415
|
-
var css_248z$
|
|
416
|
-
var styles$
|
|
417
|
-
styleInject(css_248z$
|
|
432
|
+
var css_248z$F = ".Breadcrumb-module_breadcrumb__2BHXS {\n display: flex;\n flex-wrap: wrap;\n padding: 0.75rem 1rem;\n margin-bottom: 0;\n list-style: none;\n border-radius: var(--borderRadius);\n}";
|
|
433
|
+
var styles$F = {"breadcrumb":"Breadcrumb-module_breadcrumb__2BHXS"};
|
|
434
|
+
styleInject(css_248z$F);
|
|
418
435
|
|
|
419
436
|
const Breadcrumb = (props) => {
|
|
420
437
|
const { children, className } = props;
|
|
421
438
|
const getCssClasses = () => {
|
|
422
439
|
const cssClasses = [];
|
|
423
|
-
cssClasses.push(styles$
|
|
440
|
+
cssClasses.push(styles$F.breadcrumb);
|
|
424
441
|
className && cssClasses.push(className);
|
|
425
442
|
return cssClasses.filter(css => css).join(' ');
|
|
426
443
|
};
|
|
@@ -430,15 +447,15 @@ const Breadcrumb = (props) => {
|
|
|
430
447
|
|
|
431
448
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
432
449
|
|
|
433
|
-
var css_248z$
|
|
434
|
-
var styles$
|
|
435
|
-
styleInject(css_248z$
|
|
450
|
+
var css_248z$E = ".BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D {\n padding-left: 0.5rem;\n}\n.BreadcrumbItem-module_breadcrumbItem__1yy-D + .BreadcrumbItem-module_breadcrumbItem__1yy-D::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\";\n}\n.BreadcrumbItem-module_breadcrumbItem__1yy-D a:not([href]):not([class]) {\n color: var(--primary);\n}\n.BreadcrumbItem-module_breadcrumbItem__1yy-D:hover {\n cursor: pointer;\n}\n.BreadcrumbItem-module_breadcrumbItem__1yy-D.BreadcrumbItem-module_active__3iVU2:hover {\n cursor: unset;\n}";
|
|
451
|
+
var styles$E = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__1yy-D","active":"BreadcrumbItem-module_active__3iVU2"};
|
|
452
|
+
styleInject(css_248z$E);
|
|
436
453
|
|
|
437
454
|
const BreadcrumbItem = (props) => {
|
|
438
455
|
const { children, className, isActive, onClick } = props;
|
|
439
456
|
const getCssClasses = () => {
|
|
440
457
|
const cssClasses = [];
|
|
441
|
-
cssClasses.push(styles$
|
|
458
|
+
cssClasses.push(styles$E.breadcrumbItem);
|
|
442
459
|
className && cssClasses.push(className);
|
|
443
460
|
isActive && cssClasses.push('active');
|
|
444
461
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -452,106 +469,106 @@ const BreadcrumbItem = (props) => {
|
|
|
452
469
|
wrapper: label => React.createElement("a", null, label) }, children)));
|
|
453
470
|
};
|
|
454
471
|
|
|
455
|
-
var css_248z$
|
|
456
|
-
var styles$
|
|
457
|
-
styleInject(css_248z$
|
|
472
|
+
var css_248z$D = ".Card-module_card__31o3Z {\n background: var(--white);\n border-radius: var(--borderRadius);\n}\n.Card-module_card__31o3Z.Card-module_shadow__2lpYq {\n box-shadow: var(--shadow);\n}";
|
|
473
|
+
var styles$D = {"card":"Card-module_card__31o3Z","shadow":"Card-module_shadow__2lpYq"};
|
|
474
|
+
styleInject(css_248z$D);
|
|
458
475
|
|
|
459
476
|
const Card = (props) => {
|
|
460
477
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
461
478
|
const getCssClasses = () => {
|
|
462
479
|
const cssClasses = [];
|
|
463
|
-
cssClasses.push(styles$
|
|
464
|
-
shadow && cssClasses.push(styles$
|
|
480
|
+
cssClasses.push(styles$D.card);
|
|
481
|
+
shadow && cssClasses.push(styles$D.shadow);
|
|
465
482
|
className && cssClasses.push(className);
|
|
466
483
|
return cssClasses.filter(css => css).join(' ');
|
|
467
484
|
};
|
|
468
485
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
469
486
|
};
|
|
470
487
|
|
|
471
|
-
var css_248z$
|
|
472
|
-
var styles$
|
|
473
|
-
styleInject(css_248z$
|
|
488
|
+
var css_248z$C = ".CardBody-module_cardBody__N8z-L {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
489
|
+
var styles$C = {"cardBody":"CardBody-module_cardBody__N8z-L"};
|
|
490
|
+
styleInject(css_248z$C);
|
|
474
491
|
|
|
475
492
|
const CardBody = (props) => {
|
|
476
493
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
477
494
|
const getCssClasses = () => {
|
|
478
495
|
const cssClasses = [];
|
|
479
|
-
cssClasses.push(styles$
|
|
496
|
+
cssClasses.push(styles$C.cardBody);
|
|
480
497
|
className && cssClasses.push(className);
|
|
481
498
|
return cssClasses.filter(css => css).join(' ');
|
|
482
499
|
};
|
|
483
500
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
484
501
|
};
|
|
485
502
|
|
|
486
|
-
var css_248z$
|
|
487
|
-
var styles$
|
|
488
|
-
styleInject(css_248z$
|
|
503
|
+
var css_248z$B = ".CardFooter-module_cardFooter__3dYKa {\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__3dYKa:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);\n}";
|
|
504
|
+
var styles$B = {"cardFooter":"CardFooter-module_cardFooter__3dYKa"};
|
|
505
|
+
styleInject(css_248z$B);
|
|
489
506
|
|
|
490
507
|
const CardFooter = (props) => {
|
|
491
508
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
492
509
|
const getCssClasses = () => {
|
|
493
510
|
const cssClasses = [];
|
|
494
|
-
cssClasses.push(styles$
|
|
511
|
+
cssClasses.push(styles$B.cardFooter);
|
|
495
512
|
className && cssClasses.push(className);
|
|
496
513
|
return cssClasses.filter(css => css).join(' ');
|
|
497
514
|
};
|
|
498
515
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
499
516
|
};
|
|
500
517
|
|
|
501
|
-
var css_248z$
|
|
502
|
-
var styles$
|
|
503
|
-
styleInject(css_248z$
|
|
518
|
+
var css_248z$A = ".CardSubtitle-module_cardSubtitle__2WWHW {\n color: #6c757d !important;\n}";
|
|
519
|
+
var styles$A = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__2WWHW"};
|
|
520
|
+
styleInject(css_248z$A);
|
|
504
521
|
|
|
505
522
|
const CardSubtitle = (props) => {
|
|
506
523
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
507
524
|
const getCssClasses = () => {
|
|
508
525
|
const cssClasses = [];
|
|
509
|
-
cssClasses.push(styles$
|
|
526
|
+
cssClasses.push(styles$A.cardSubtitle);
|
|
510
527
|
className && cssClasses.push(className);
|
|
511
528
|
return cssClasses.filter(css => css).join(' ');
|
|
512
529
|
};
|
|
513
530
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
514
531
|
};
|
|
515
532
|
|
|
516
|
-
var css_248z$
|
|
517
|
-
var styles$
|
|
518
|
-
styleInject(css_248z$
|
|
533
|
+
var css_248z$z = ".CardText-module_cardText__1LWJi:last-child {\n margin-bottom: 0;\n}";
|
|
534
|
+
var styles$z = {"cardText":"CardText-module_cardText__1LWJi"};
|
|
535
|
+
styleInject(css_248z$z);
|
|
519
536
|
|
|
520
537
|
const CardText = (props) => {
|
|
521
538
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
522
539
|
const getCssClasses = () => {
|
|
523
540
|
const cssClasses = [];
|
|
524
|
-
cssClasses.push(styles$
|
|
541
|
+
cssClasses.push(styles$z.cardText);
|
|
525
542
|
className && cssClasses.push(className);
|
|
526
543
|
return cssClasses.filter(css => css).join(' ');
|
|
527
544
|
};
|
|
528
545
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
|
|
529
546
|
};
|
|
530
547
|
|
|
531
|
-
var css_248z$
|
|
532
|
-
var styles$
|
|
533
|
-
styleInject(css_248z$
|
|
548
|
+
var css_248z$y = ".CardTitle-module_cardTitle__24Amb {\n margin-bottom: 0;\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 1.334;\n letter-spacing: 0em;\n}";
|
|
549
|
+
var styles$y = {"cardTitle":"CardTitle-module_cardTitle__24Amb"};
|
|
550
|
+
styleInject(css_248z$y);
|
|
534
551
|
|
|
535
552
|
const CardTitle = (props) => {
|
|
536
553
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
537
554
|
const getCssClasses = () => {
|
|
538
555
|
const cssClasses = [];
|
|
539
|
-
cssClasses.push(styles$
|
|
556
|
+
cssClasses.push(styles$y.cardTitle);
|
|
540
557
|
className && cssClasses.push(className);
|
|
541
558
|
return cssClasses.filter(css => css).join(' ');
|
|
542
559
|
};
|
|
543
560
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
544
561
|
};
|
|
545
562
|
|
|
546
|
-
var css_248z$
|
|
547
|
-
var styles$
|
|
548
|
-
styleInject(css_248z$
|
|
563
|
+
var css_248z$x = ".CardImage-module_cardImage__1tZM4 {\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}";
|
|
564
|
+
var styles$x = {"cardImage":"CardImage-module_cardImage__1tZM4"};
|
|
565
|
+
styleInject(css_248z$x);
|
|
549
566
|
|
|
550
567
|
const CardImage = (props) => {
|
|
551
568
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
552
569
|
const getCssClasses = () => {
|
|
553
570
|
const cssClasses = [];
|
|
554
|
-
cssClasses.push(styles$
|
|
571
|
+
cssClasses.push(styles$x.cardImage);
|
|
555
572
|
className && cssClasses.push(className);
|
|
556
573
|
return cssClasses.filter(css => css).join(' ');
|
|
557
574
|
};
|
|
@@ -600,15 +617,15 @@ const CircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true
|
|
|
600
617
|
const ChevronLeftSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
|
|
601
618
|
React.createElement("path", { fill: "currentColor", d: "M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z" })));
|
|
602
619
|
|
|
603
|
-
var css_248z$
|
|
604
|
-
var styles$
|
|
605
|
-
styleInject(css_248z$
|
|
620
|
+
var css_248z$w = ".Typography-module_typography__2bM6E {\n text-overflow: ellipsis;\n overflow: hidden !important;\n}";
|
|
621
|
+
var styles$w = {"typography":"Typography-module_typography__2bM6E"};
|
|
622
|
+
styleInject(css_248z$w);
|
|
606
623
|
|
|
607
624
|
const Wrapper = (props) => {
|
|
608
625
|
const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
|
|
609
626
|
const getCssClasses = () => {
|
|
610
627
|
const cssClasses = [];
|
|
611
|
-
cssClasses.push(styles$
|
|
628
|
+
cssClasses.push(styles$w.typography);
|
|
612
629
|
className && cssClasses.push(className);
|
|
613
630
|
return cssClasses.filter(css => css).join(' ');
|
|
614
631
|
};
|
|
@@ -619,21 +636,21 @@ const Typography = (_a) => {
|
|
|
619
636
|
return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
|
|
620
637
|
};
|
|
621
638
|
|
|
622
|
-
var css_248z$
|
|
623
|
-
var styles$
|
|
624
|
-
styleInject(css_248z$
|
|
639
|
+
var css_248z$v = ".IconButton-module_iconButton__1xqrL {\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__1xqrL:hover {\n cursor: pointer;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_shadow__5U4-_ {\n box-shadow: var(--shadow);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_md__1lmDL {\n width: 48px;\n height: 48px;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_lg__1O2Uy {\n width: 56px;\n height: 56px;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG {\n padding: 0;\n background: transparent;\n color: inherit;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_active__2tJut {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T.IconButton-module_active__2tJut {\n color: var(--primary);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL.IconButton-module_active__2tJut {\n color: var(--secondary);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t.IconButton-module_active__2tJut {\n color: var(--accent);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD.IconButton-module_active__2tJut {\n color: var(--light);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_disabled__3TgpF {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_active__2tJut {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T {\n background-color: var(--primary);\n color: var(--white);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T.IconButton-module_active__2tJut {\n background-color: var(--primary-dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL {\n background-color: var(--secondary);\n color: var(--white);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL.IconButton-module_active__2tJut {\n background-color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t {\n background-color: var(--accent);\n color: var(--white);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t.IconButton-module_active__2tJut {\n background-color: var(--accent-dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD {\n background-color: var(--light);\n color: var(--dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD.IconButton-module_active__2tJut {\n background-color: var(--light-dark);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR {\n background-color: var(--dark);\n color: var(--white);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR.IconButton-module_active__2tJut {\n background-color: var(--dark-light);\n}\n.IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_disabled__3TgpF {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}";
|
|
640
|
+
var styles$v = {"iconButton":"IconButton-module_iconButton__1xqrL","shadow":"IconButton-module_shadow__5U4-_","md":"IconButton-module_md__1lmDL","lg":"IconButton-module_lg__1O2Uy","text":"IconButton-module_text__33RrG","active":"IconButton-module_active__2tJut","primary":"IconButton-module_primary__qRw4T","secondary":"IconButton-module_secondary__1lzNL","accent":"IconButton-module_accent__exm5t","light":"IconButton-module_light__2nWhD","dark":"IconButton-module_dark__1e6bR","disabled":"IconButton-module_disabled__3TgpF","contained":"IconButton-module_contained__gWulJ"};
|
|
641
|
+
styleInject(css_248z$v);
|
|
625
642
|
|
|
626
643
|
const IconButton = (props) => {
|
|
627
644
|
const { children, icon, label, variant = VARIANT.text, color = COLOR.primary, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "label", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
628
645
|
const getCssClasses = () => {
|
|
629
646
|
const cssClasses = [];
|
|
630
|
-
cssClasses.push(styles$
|
|
631
|
-
cssClasses.push(styles$
|
|
632
|
-
cssClasses.push(styles$
|
|
633
|
-
cssClasses.push(styles$
|
|
634
|
-
isActive && cssClasses.push(styles$
|
|
635
|
-
disabled && cssClasses.push(styles$
|
|
636
|
-
shadow && cssClasses.push(styles$
|
|
647
|
+
cssClasses.push(styles$v[color]);
|
|
648
|
+
cssClasses.push(styles$v[variant]);
|
|
649
|
+
cssClasses.push(styles$v[size]);
|
|
650
|
+
cssClasses.push(styles$v.iconButton);
|
|
651
|
+
isActive && cssClasses.push(styles$v.active);
|
|
652
|
+
disabled && cssClasses.push(styles$v.disabled);
|
|
653
|
+
shadow && cssClasses.push(styles$v.shadow);
|
|
637
654
|
className && cssClasses.push(className);
|
|
638
655
|
return cssClasses.filter(css => css).join(' ');
|
|
639
656
|
};
|
|
@@ -642,9 +659,9 @@ const IconButton = (props) => {
|
|
|
642
659
|
label && React.createElement(Typography, null, label)));
|
|
643
660
|
};
|
|
644
661
|
|
|
645
|
-
var css_248z$
|
|
646
|
-
var styles$
|
|
647
|
-
styleInject(css_248z$
|
|
662
|
+
var css_248z$u = ".Checkbox-module_checkboxContainer__2oWhu {\n display: flex;\n align-items: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Checkbox-module_checkboxContainer__2oWhu label {\n margin-bottom: 0;\n margin-left: 0;\n}\n.Checkbox-module_checkboxContainer__2oWhu label:hover {\n cursor: pointer;\n}\n\n.Checkbox-module_checkboxLabel__27Y6U.Checkbox-module_disabled__3EXUd {\n color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n}";
|
|
663
|
+
var styles$u = {"checkboxContainer":"Checkbox-module_checkboxContainer__2oWhu","checkboxLabel":"Checkbox-module_checkboxLabel__27Y6U","disabled":"Checkbox-module_disabled__3EXUd"};
|
|
664
|
+
styleInject(css_248z$u);
|
|
648
665
|
|
|
649
666
|
const Checkbox = (props) => {
|
|
650
667
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -679,24 +696,24 @@ const Checkbox = (props) => {
|
|
|
679
696
|
setIsChecked(!isChecked);
|
|
680
697
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
681
698
|
};
|
|
682
|
-
return (React.createElement("div", { className: styles$
|
|
699
|
+
return (React.createElement("div", { className: styles$u.checkboxContainer },
|
|
683
700
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
684
|
-
React.createElement("label", { onClick: handleClick, className: styles$
|
|
701
|
+
React.createElement("label", { onClick: handleClick, className: styles$u.checkboxLabel + ' ' + (disabled ? styles$u['disabled'] : undefined) }, label),
|
|
685
702
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
686
703
|
};
|
|
687
704
|
|
|
688
|
-
var css_248z$
|
|
689
|
-
var styles$
|
|
690
|
-
styleInject(css_248z$
|
|
705
|
+
var css_248z$t = ".Chip-module_chip__1cghp {\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__1cghp svg {\n width: 18px;\n height: 18px;\n}\n.Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c {\n margin-left: 5px;\n}\n.Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c:hover {\n cursor: pointer;\n}\n.Chip-module_chip__1cghp.Chip-module_primary__198Dq {\n background: var(--primary);\n color: var(--primary-contrast-text);\n}\n.Chip-module_chip__1cghp.Chip-module_secondary__14H0b {\n background: var(--secondary);\n color: var(--secondary-contrast-text);\n}\n.Chip-module_chip__1cghp.Chip-module_accent__2LkWr {\n background: var(--accent);\n color: var(--accent-contrast-text);\n}\n.Chip-module_chip__1cghp.Chip-module_light__2zVYs {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Chip-module_chip__1cghp.Chip-module_dark__2Bg-S {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover {\n cursor: pointer;\n}\n.Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_primary__198Dq {\n background: var(--primary-dark);\n}\n.Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_secondary__14H0b {\n background: var(--secondary-dark);\n}\n.Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_accent__2LkWr {\n background: var(--accent-dark);\n}\n.Chip-module_chip__1cghp.Chip-module_shadow__3TYny {\n box-shadow: var(--shadow);\n}";
|
|
706
|
+
var styles$t = {"chip":"Chip-module_chip__1cghp","deleteIcon":"Chip-module_deleteIcon__34X9c","primary":"Chip-module_primary__198Dq","secondary":"Chip-module_secondary__14H0b","accent":"Chip-module_accent__2LkWr","light":"Chip-module_light__2zVYs","dark":"Chip-module_dark__2Bg-S","clickable":"Chip-module_clickable__2Y4x7","shadow":"Chip-module_shadow__3TYny"};
|
|
707
|
+
styleInject(css_248z$t);
|
|
691
708
|
|
|
692
709
|
const Chip = (props) => {
|
|
693
710
|
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"]);
|
|
694
711
|
const getCssClass = () => {
|
|
695
712
|
const cssClasses = [];
|
|
696
|
-
cssClasses.push(styles$
|
|
697
|
-
cssClasses.push(styles$
|
|
698
|
-
shadow && cssClasses.push(styles$
|
|
699
|
-
onClick && cssClasses.push(styles$
|
|
713
|
+
cssClasses.push(styles$t.chip);
|
|
714
|
+
cssClasses.push(styles$t[color]);
|
|
715
|
+
shadow && cssClasses.push(styles$t['shadow']);
|
|
716
|
+
onClick && cssClasses.push(styles$t['clickable']);
|
|
700
717
|
className && cssClasses.push(className);
|
|
701
718
|
return cssClasses.filter(r => r).join(' ');
|
|
702
719
|
};
|
|
@@ -706,7 +723,7 @@ const Chip = (props) => {
|
|
|
706
723
|
};
|
|
707
724
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
708
725
|
React.createElement("div", null, children),
|
|
709
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
726
|
+
isDeletable && (React.createElement("div", { className: styles$t.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
710
727
|
};
|
|
711
728
|
|
|
712
729
|
const FormLabel = ({ children, className, htmlFor }) => (React.createElement("label", { htmlFor: htmlFor, className: className }, children));
|
|
@@ -742,9 +759,9 @@ const FileInput = (props) => {
|
|
|
742
759
|
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))));
|
|
743
760
|
};
|
|
744
761
|
|
|
745
|
-
var css_248z$
|
|
746
|
-
var styles$
|
|
747
|
-
styleInject(css_248z$
|
|
762
|
+
var css_248z$s = ".Select-module_selectContainer__2oizY {\n position: relative;\n}\n\n.Select-module_select__MSqgU {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.Select-module_select__MSqgU:hover {\n cursor: pointer;\n}\n\n.Select-module_selectMenu__2vhJt {\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}";
|
|
763
|
+
var styles$s = {"selectContainer":"Select-module_selectContainer__2oizY","select":"Select-module_select__MSqgU","selectMenu":"Select-module_selectMenu__2vhJt"};
|
|
764
|
+
styleInject(css_248z$s);
|
|
748
765
|
|
|
749
766
|
const Select = (props) => {
|
|
750
767
|
var _a, _b, _c;
|
|
@@ -757,7 +774,7 @@ const Select = (props) => {
|
|
|
757
774
|
const getCssClass = () => {
|
|
758
775
|
const cssClasses = [];
|
|
759
776
|
className && cssClasses.push(className);
|
|
760
|
-
cssClasses.push(styles$
|
|
777
|
+
cssClasses.push(styles$s.select);
|
|
761
778
|
return cssClasses.filter(r => r).join(' ');
|
|
762
779
|
};
|
|
763
780
|
useEffect(() => {
|
|
@@ -876,7 +893,7 @@ const Select = (props) => {
|
|
|
876
893
|
}
|
|
877
894
|
};
|
|
878
895
|
return (React.createElement(React.Fragment, null,
|
|
879
|
-
React.createElement("div", { ref: selectConainter, className: styles$
|
|
896
|
+
React.createElement("div", { ref: selectConainter, className: styles$s.selectContainer },
|
|
880
897
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
881
898
|
!multiple && renderSingleViewModel(),
|
|
882
899
|
multiple && renderMultipleViewModel(),
|
|
@@ -884,7 +901,7 @@ const Select = (props) => {
|
|
|
884
901
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
885
902
|
isShow &&
|
|
886
903
|
createPortal(React.createElement(React.Fragment, null,
|
|
887
|
-
React.createElement("div", { className: styles$
|
|
904
|
+
React.createElement("div", { className: styles$s.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 } },
|
|
888
905
|
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) },
|
|
889
906
|
multiple &&
|
|
890
907
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -892,15 +909,15 @@ const Select = (props) => {
|
|
|
892
909
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
|
|
893
910
|
};
|
|
894
911
|
|
|
895
|
-
var css_248z$
|
|
896
|
-
var styles$
|
|
897
|
-
styleInject(css_248z$
|
|
912
|
+
var css_248z$r = "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}\ntextarea:focus {\n outline: none !important;\n border-color: var(--primary);\n}";
|
|
913
|
+
var styles$r = {};
|
|
914
|
+
styleInject(css_248z$r);
|
|
898
915
|
|
|
899
916
|
const Textarea = (props) => {
|
|
900
917
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
901
918
|
const getCssClass = () => {
|
|
902
919
|
const cssClasses = [];
|
|
903
|
-
cssClasses.push(styles$
|
|
920
|
+
cssClasses.push(styles$r.textarea);
|
|
904
921
|
className && cssClasses.push(className);
|
|
905
922
|
return cssClasses.filter(r => r).join(' ');
|
|
906
923
|
};
|
|
@@ -1256,16 +1273,16 @@ const DateSelect = (props) => {
|
|
|
1256
1273
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1257
1274
|
// };
|
|
1258
1275
|
|
|
1259
|
-
var css_248z$
|
|
1260
|
-
var styles$
|
|
1261
|
-
styleInject(css_248z$
|
|
1276
|
+
var css_248z$q = ".Drawer-module_drawer__36R2P {\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}\n.Drawer-module_drawer__36R2P.Drawer-module_permanent__AW5Df {\n position: inherit;\n z-index: 0;\n}\n.Drawer-module_drawer__36R2P.Drawer-module_left__1KKcY {\n order: 0;\n}\n.Drawer-module_drawer__36R2P.Drawer-module_right__2gESb {\n order: 2;\n}\n\n.Drawer-module_drawerOpen__euFdW {\n overflow: hidden;\n}";
|
|
1277
|
+
var styles$q = {"drawer":"Drawer-module_drawer__36R2P","permanent":"Drawer-module_permanent__AW5Df","left":"Drawer-module_left__1KKcY","right":"Drawer-module_right__2gESb","drawerOpen":"Drawer-module_drawerOpen__euFdW"};
|
|
1278
|
+
styleInject(css_248z$q);
|
|
1262
1279
|
|
|
1263
1280
|
const Drawer = (props) => {
|
|
1264
1281
|
const { children, className, position = 'left', permanent = false, target = document.body, onClickBackdrop } = props;
|
|
1265
1282
|
useEffect(() => {
|
|
1266
|
-
document.body.classList.add(styles$
|
|
1283
|
+
document.body.classList.add(styles$q.drawerOpen);
|
|
1267
1284
|
return () => {
|
|
1268
|
-
document.body.classList.remove(styles$
|
|
1285
|
+
document.body.classList.remove(styles$q.drawerOpen);
|
|
1269
1286
|
};
|
|
1270
1287
|
}, []);
|
|
1271
1288
|
const handleClickBackdrop = () => {
|
|
@@ -1279,10 +1296,10 @@ const DrawerContent = (props) => {
|
|
|
1279
1296
|
const { children, className, position = 'left', permanent = false } = props;
|
|
1280
1297
|
const getCssClasses = () => {
|
|
1281
1298
|
const cssClasses = [];
|
|
1282
|
-
cssClasses.push(styles$
|
|
1299
|
+
cssClasses.push(styles$q.drawer);
|
|
1283
1300
|
className && cssClasses.push(className);
|
|
1284
|
-
!!permanent && cssClasses.push(styles$
|
|
1285
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1301
|
+
!!permanent && cssClasses.push(styles$q['permanent']);
|
|
1302
|
+
position === 'left' ? cssClasses.push(styles$q['left']) : cssClasses.push(styles$q['right']);
|
|
1286
1303
|
return cssClasses.filter(css => css).join(' ');
|
|
1287
1304
|
};
|
|
1288
1305
|
const positionStyles = {
|
|
@@ -1295,9 +1312,9 @@ const DrawerContent = (props) => {
|
|
|
1295
1312
|
return (React.createElement("div", { className: getCssClasses(), style: getStyles() }, children));
|
|
1296
1313
|
};
|
|
1297
1314
|
|
|
1298
|
-
var css_248z$
|
|
1299
|
-
var styles$
|
|
1300
|
-
styleInject(css_248z$
|
|
1315
|
+
var css_248z$p = ".MenuBody-module_menuBody__3cPsp {\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__3cPsp.MenuBody-module_shadow__AF_9C {\n box-shadow: var(--shadow);\n}";
|
|
1316
|
+
var styles$p = {"menuBody":"MenuBody-module_menuBody__3cPsp","shadow":"MenuBody-module_shadow__AF_9C"};
|
|
1317
|
+
styleInject(css_248z$p);
|
|
1301
1318
|
|
|
1302
1319
|
const MenuBody = (props) => {
|
|
1303
1320
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1327,8 +1344,8 @@ const MenuBody = (props) => {
|
|
|
1327
1344
|
}, [menuBodyRef]);
|
|
1328
1345
|
const getCssClasses = () => {
|
|
1329
1346
|
const cssClasses = [];
|
|
1330
|
-
cssClasses.push(styles$
|
|
1331
|
-
shadow && cssClasses.push(styles$
|
|
1347
|
+
cssClasses.push(styles$p.menuBody);
|
|
1348
|
+
shadow && cssClasses.push(styles$p.shadow);
|
|
1332
1349
|
className && cssClasses.push(className);
|
|
1333
1350
|
return cssClasses.filter(css => css).join(' ');
|
|
1334
1351
|
};
|
|
@@ -1340,9 +1357,9 @@ const MenuBody = (props) => {
|
|
|
1340
1357
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1341
1358
|
};
|
|
1342
1359
|
|
|
1343
|
-
var css_248z$
|
|
1344
|
-
var styles$
|
|
1345
|
-
styleInject(css_248z$
|
|
1360
|
+
var css_248z$o = ".Menu-module_menu__23BYG {\n display: flex;\n}";
|
|
1361
|
+
var styles$o = {"menu":"Menu-module_menu__23BYG"};
|
|
1362
|
+
styleInject(css_248z$o);
|
|
1346
1363
|
|
|
1347
1364
|
const Menu = (props) => {
|
|
1348
1365
|
const { toggle, children, className, open, menuPosition, onClickBackdrop, onToggleClick } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop", "onToggleClick"]);
|
|
@@ -1350,7 +1367,7 @@ const Menu = (props) => {
|
|
|
1350
1367
|
const toggleContainerRef = useRef(null);
|
|
1351
1368
|
const getCssClasses = () => {
|
|
1352
1369
|
const cssClasses = [];
|
|
1353
|
-
cssClasses.push(styles$
|
|
1370
|
+
cssClasses.push(styles$o.menu);
|
|
1354
1371
|
className && cssClasses.push(className);
|
|
1355
1372
|
return cssClasses.filter(css => css).join(' ');
|
|
1356
1373
|
};
|
|
@@ -1363,17 +1380,17 @@ const Menu = (props) => {
|
|
|
1363
1380
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1364
1381
|
};
|
|
1365
1382
|
|
|
1366
|
-
var css_248z$
|
|
1367
|
-
var styles$
|
|
1368
|
-
styleInject(css_248z$
|
|
1383
|
+
var css_248z$n = ".MenuItem-module_menuItem__kvauR {\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__kvauR.MenuItem-module_menuItemHeader__mp7wc {\n margin-bottom: 0;\n font-size: 0.875rem;\n}\n.MenuItem-module_menuItem__kvauR:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04);\n}";
|
|
1384
|
+
var styles$n = {"menuItem":"MenuItem-module_menuItem__kvauR","menuItemHeader":"MenuItem-module_menuItemHeader__mp7wc"};
|
|
1385
|
+
styleInject(css_248z$n);
|
|
1369
1386
|
|
|
1370
1387
|
const MenuItem = (props) => {
|
|
1371
1388
|
const { children, onClick, type = 'item' } = props;
|
|
1372
1389
|
const getCssClasses = () => {
|
|
1373
1390
|
const cssClasses = [];
|
|
1374
|
-
cssClasses.push(styles$
|
|
1391
|
+
cssClasses.push(styles$n.menuItem);
|
|
1375
1392
|
if (type === 'header') {
|
|
1376
|
-
cssClasses.push(styles$
|
|
1393
|
+
cssClasses.push(styles$n.menuItemHeader);
|
|
1377
1394
|
}
|
|
1378
1395
|
return cssClasses.filter(css => css).join(' ');
|
|
1379
1396
|
};
|
|
@@ -1391,23 +1408,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1391
1408
|
return (React.createElement(Fragment, null, children));
|
|
1392
1409
|
};
|
|
1393
1410
|
|
|
1394
|
-
var css_248z$
|
|
1395
|
-
var styles$
|
|
1396
|
-
styleInject(css_248z$
|
|
1411
|
+
var css_248z$m = ".MenuDivider-module_menuItemDivider__JnLsC {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef;\n}";
|
|
1412
|
+
var styles$m = {"menuItemDivider":"MenuDivider-module_menuItemDivider__JnLsC"};
|
|
1413
|
+
styleInject(css_248z$m);
|
|
1397
1414
|
|
|
1398
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1415
|
+
const MenuDivider = () => React.createElement("div", { className: styles$m.menuItemDivider });
|
|
1399
1416
|
|
|
1400
|
-
var css_248z$
|
|
1401
|
-
var styles$
|
|
1402
|
-
styleInject(css_248z$
|
|
1417
|
+
var css_248z$l = ".ExpansionPanelContent-module_expansionPanelContent__3H62L {\n padding: 8px 16px 16px;\n}";
|
|
1418
|
+
var styles$l = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__3H62L"};
|
|
1419
|
+
styleInject(css_248z$l);
|
|
1403
1420
|
|
|
1404
1421
|
const ExpansionPanelContent = ({ children }) => {
|
|
1405
|
-
return (React.createElement("div", { className: styles$
|
|
1422
|
+
return (React.createElement("div", { className: styles$l.expansionPanelContent }, children));
|
|
1406
1423
|
};
|
|
1407
1424
|
|
|
1408
|
-
var css_248z$
|
|
1409
|
-
var styles$
|
|
1410
|
-
styleInject(css_248z$
|
|
1425
|
+
var css_248z$k = ".ExpansionPanelHeader-module_expansionPanelHeader__3hrsI {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__3hrsI:hover {\n cursor: pointer;\n background-color: var(--highlight);\n}";
|
|
1426
|
+
var styles$k = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__3hrsI"};
|
|
1427
|
+
styleInject(css_248z$k);
|
|
1411
1428
|
|
|
1412
1429
|
const ExpansionPanelHeader = (props) => {
|
|
1413
1430
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1415,15 +1432,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1415
1432
|
e.stopPropagation();
|
|
1416
1433
|
onClick && onClick(e);
|
|
1417
1434
|
};
|
|
1418
|
-
return (React.createElement("div", { className: styles$
|
|
1435
|
+
return (React.createElement("div", { className: styles$k.expansionPanelHeader, onClick: handleClick },
|
|
1419
1436
|
children,
|
|
1420
1437
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1421
1438
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1422
1439
|
};
|
|
1423
1440
|
|
|
1424
|
-
var css_248z$
|
|
1425
|
-
var styles$
|
|
1426
|
-
styleInject(css_248z$
|
|
1441
|
+
var css_248z$j = ".ExpansionPanel-module_expansionPanel__3krcE {\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}\n.ExpansionPanel-module_expansionPanel__3krcE:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__3krcE:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt {\n margin: 16px 0;\n}\n.ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt:first-child {\n margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__3krcE.ExpansionPanel-module_isExpanded__1m4Dt:last-child {\n margin-bottom: 0;\n}";
|
|
1442
|
+
var styles$j = {"expansionPanel":"ExpansionPanel-module_expansionPanel__3krcE","isExpanded":"ExpansionPanel-module_isExpanded__1m4Dt"};
|
|
1443
|
+
styleInject(css_248z$j);
|
|
1427
1444
|
|
|
1428
1445
|
const ExpansionPanel = (props) => {
|
|
1429
1446
|
const { header, children, isExpanded = false, onChange } = props;
|
|
@@ -1433,9 +1450,9 @@ const ExpansionPanel = (props) => {
|
|
|
1433
1450
|
}, [isExpanded]);
|
|
1434
1451
|
const getCssClasses = () => {
|
|
1435
1452
|
const cssClasses = [];
|
|
1436
|
-
cssClasses.push(styles$
|
|
1453
|
+
cssClasses.push(styles$j.expansionPanel);
|
|
1437
1454
|
if (_isExpanded) {
|
|
1438
|
-
cssClasses.push(styles$
|
|
1455
|
+
cssClasses.push(styles$j.isExpanded);
|
|
1439
1456
|
}
|
|
1440
1457
|
return cssClasses.filter(css => css).join(' ');
|
|
1441
1458
|
};
|
|
@@ -1449,16 +1466,16 @@ const ExpansionPanel = (props) => {
|
|
|
1449
1466
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1450
1467
|
};
|
|
1451
1468
|
|
|
1452
|
-
var css_248z$
|
|
1453
|
-
var styles$
|
|
1454
|
-
styleInject(css_248z$
|
|
1469
|
+
var css_248z$i = ".FloatingActionButton-module_fab__3GwiH {\n box-shadow: var(--shadow);\n}\n.FloatingActionButton-module_fab__3GwiH.FloatingActionButton-module_fixed__17qrv {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 1000;\n}";
|
|
1470
|
+
var styles$i = {"fab":"FloatingActionButton-module_fab__3GwiH","fixed":"FloatingActionButton-module_fixed__17qrv"};
|
|
1471
|
+
styleInject(css_248z$i);
|
|
1455
1472
|
|
|
1456
1473
|
const FloatingActionButton = (props) => {
|
|
1457
1474
|
const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1458
1475
|
const getCssClasses = () => {
|
|
1459
1476
|
const cssClasses = [];
|
|
1460
|
-
cssClasses.push(styles$
|
|
1461
|
-
fixed && cssClasses.push(styles$
|
|
1477
|
+
cssClasses.push(styles$i.fab);
|
|
1478
|
+
fixed && cssClasses.push(styles$i['fixed']);
|
|
1462
1479
|
className && cssClasses.push(className);
|
|
1463
1480
|
return cssClasses.filter(css => css).join(' ');
|
|
1464
1481
|
};
|
|
@@ -1520,14 +1537,14 @@ const Link = (props) => {
|
|
|
1520
1537
|
return (React.createElement("a", { className: getCssClasses(), href: url || '#', target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
|
|
1521
1538
|
};
|
|
1522
1539
|
|
|
1523
|
-
var css_248z$
|
|
1524
|
-
var styles$
|
|
1525
|
-
styleInject(css_248z$
|
|
1540
|
+
var css_248z$h = ".LoadingIndicator-module_loadingIndicatorContainer__3e1-3 {\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\n.LoadingIndicator-module_loadingIndicator__tvp5i {\n animation-name: LoadingIndicator-module_spinAnimation__PKRNn;\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__PKRNn {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
|
|
1541
|
+
var styles$h = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__3e1-3","loadingIndicator":"LoadingIndicator-module_loadingIndicator__tvp5i","spinAnimation":"LoadingIndicator-module_spinAnimation__PKRNn"};
|
|
1542
|
+
styleInject(css_248z$h);
|
|
1526
1543
|
|
|
1527
1544
|
const LoadingIndicator = () => {
|
|
1528
1545
|
const getCssClasses = () => {
|
|
1529
1546
|
const cssClasses = [];
|
|
1530
|
-
cssClasses.push(styles$
|
|
1547
|
+
cssClasses.push(styles$h.loadingIndicator);
|
|
1531
1548
|
return cssClasses.filter(css => css).join(' ');
|
|
1532
1549
|
};
|
|
1533
1550
|
return (React.createElement("div", { className: getCssClasses() },
|
|
@@ -1537,7 +1554,7 @@ const LoadingIndicator = () => {
|
|
|
1537
1554
|
const LoadingIndicatorContainer = ({ children }) => {
|
|
1538
1555
|
const getCssClasses = () => {
|
|
1539
1556
|
const cssClasses = [];
|
|
1540
|
-
cssClasses.push(styles$
|
|
1557
|
+
cssClasses.push(styles$h.loadingIndicatorContainer);
|
|
1541
1558
|
return cssClasses.filter(css => css).join(' ');
|
|
1542
1559
|
};
|
|
1543
1560
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1567,16 +1584,16 @@ class LoadingIndicatorService {
|
|
|
1567
1584
|
}
|
|
1568
1585
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1569
1586
|
|
|
1570
|
-
var css_248z$
|
|
1571
|
-
var styles$
|
|
1572
|
-
styleInject(css_248z$
|
|
1587
|
+
var css_248z$g = ".ModalHeader-module_modalHeader__o5HzE {\n border-bottom: none;\n align-items: center;\n}";
|
|
1588
|
+
var styles$g = {"modalHeader":"ModalHeader-module_modalHeader__o5HzE"};
|
|
1589
|
+
styleInject(css_248z$g);
|
|
1573
1590
|
|
|
1574
1591
|
const ModalHeader = (props) => {
|
|
1575
1592
|
const { children, isDismissable = false, onClose } = props;
|
|
1576
1593
|
const handleClick = () => {
|
|
1577
1594
|
onClose && onClose();
|
|
1578
1595
|
};
|
|
1579
|
-
return (React.createElement("div", { className: "modal-header " + styles$
|
|
1596
|
+
return (React.createElement("div", { className: "modal-header " + styles$g.modalHeader },
|
|
1580
1597
|
React.createElement("h5", { className: "modal-title" }, children),
|
|
1581
1598
|
isDismissable &&
|
|
1582
1599
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
@@ -1584,24 +1601,24 @@ const ModalHeader = (props) => {
|
|
|
1584
1601
|
|
|
1585
1602
|
const ModalBody = ({ children }) => (React.createElement("div", { className: "modal-body" }, children));
|
|
1586
1603
|
|
|
1587
|
-
var css_248z$
|
|
1588
|
-
var styles$
|
|
1589
|
-
styleInject(css_248z$
|
|
1604
|
+
var css_248z$f = ".Modal-module_modal__1NdMJ {\n z-index: 1111 !important;\n border-radius: var(--borderRadius);\n}\n.Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM {\n width: 100% !important;\n height: 100% !important;\n max-height: 100% !important;\n margin: 0;\n padding: 0;\n}\n.Modal-module_modal__1NdMJ.Modal-module_fullscreen__3R-sM .Modal-module_modalContent__E2kaP {\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_modal__1NdMJ.Modal-module_fullscreen__3R-sM {\n max-width: 100% !important;\n }\n}\n.Modal-module_modal__1NdMJ .Modal-module_sm__3UfYB {\n max-width: 300px;\n}\n.Modal-module_modal__1NdMJ .Modal-module_md__2uX1a {\n max-width: 500px;\n}\n.Modal-module_modal__1NdMJ .Modal-module_lg__3ux_V {\n max-width: 1140px;\n}\n@media (min-width: 576px) {\n .Modal-module_modal__1NdMJ .Modal-module_modal-dialog__IdJ1c {\n max-width: 600px;\n }\n}";
|
|
1605
|
+
var styles$f = {"modal":"Modal-module_modal__1NdMJ","fullscreen":"Modal-module_fullscreen__3R-sM","modalContent":"Modal-module_modalContent__E2kaP","sm":"Modal-module_sm__3UfYB","md":"Modal-module_md__2uX1a","lg":"Modal-module_lg__3ux_V","modal-dialog":"Modal-module_modal-dialog__IdJ1c"};
|
|
1606
|
+
styleInject(css_248z$f);
|
|
1590
1607
|
|
|
1591
|
-
var css_248z$
|
|
1592
|
-
var styles$
|
|
1593
|
-
styleInject(css_248z$
|
|
1608
|
+
var css_248z$e = ".ModalFooter-module_modalFooter__2Et4e {\n border-top: none;\n}";
|
|
1609
|
+
var styles$e = {"modalFooter":"ModalFooter-module_modalFooter__2Et4e"};
|
|
1610
|
+
styleInject(css_248z$e);
|
|
1594
1611
|
|
|
1595
|
-
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$
|
|
1612
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$e.modalFooter }, children));
|
|
1596
1613
|
|
|
1597
1614
|
const Modal = (props) => {
|
|
1598
1615
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1599
1616
|
const getCssClass = () => {
|
|
1600
1617
|
const cssClasses = [];
|
|
1601
1618
|
cssClasses.push('modal-dialog modal-dialog-centered');
|
|
1602
|
-
cssClasses.push(styles$
|
|
1603
|
-
!!fullScreen && cssClasses.push(styles$
|
|
1604
|
-
size && cssClasses.push(styles$
|
|
1619
|
+
cssClasses.push(styles$f.modal);
|
|
1620
|
+
!!fullScreen && cssClasses.push(styles$f['fullscreen']);
|
|
1621
|
+
size && cssClasses.push(styles$f[size]);
|
|
1605
1622
|
className && cssClasses.push(className);
|
|
1606
1623
|
return cssClasses.filter(r => r).join(' ');
|
|
1607
1624
|
};
|
|
@@ -1615,9 +1632,9 @@ const Modal = (props) => {
|
|
|
1615
1632
|
onBackdropClick && onBackdropClick();
|
|
1616
1633
|
};
|
|
1617
1634
|
return (React.createElement(Fragment, null,
|
|
1618
|
-
React.createElement("div", { className: "modal show " + styles$
|
|
1635
|
+
React.createElement("div", { className: "modal show " + styles$f.modal, style: { display: 'block' } },
|
|
1619
1636
|
React.createElement("div", { className: getCssClass() },
|
|
1620
|
-
React.createElement("div", { className: 'modal-content ' + (!!fullScreen ? styles$
|
|
1637
|
+
React.createElement("div", { className: 'modal-content ' + (!!fullScreen ? styles$f['modalContent'] : undefined) },
|
|
1621
1638
|
header &&
|
|
1622
1639
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1623
1640
|
React.createElement(ModalBody, null, children),
|
|
@@ -1817,25 +1834,25 @@ const Sidebar = (props) => {
|
|
|
1817
1834
|
!item.isCollapsed && item.items && item.items.length > 0 && (React.createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React.createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
1818
1835
|
};
|
|
1819
1836
|
|
|
1820
|
-
var css_248z$
|
|
1821
|
-
var styles$
|
|
1822
|
-
styleInject(css_248z$
|
|
1837
|
+
var css_248z$d = ".Snackbar-module_snackbar__3AF3D {\n display: flex;\n align-items: center;\n min-width: 288px;\n padding: 6px 16px;\n transform-origin: center;\n min-height: 52px;\n animation: Snackbar-module_bounceIn__11jAv 0.4s ease;\n z-index: 1001;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 2%;\n border-radius: var(--borderRadius);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_primary__3Pt9m {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_accent__1iCXk {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_secondary__3ke12 {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_light__3Pi0Y {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Snackbar-module_snackbar__3AF3D.Snackbar-module_dark__3TwXn {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Snackbar-module_text__2gmW- {\n width: 100%;\n padding: 8px 0;\n}\n\n.Snackbar-module_action__1BXqS {\n margin-left: auto;\n}\n.Snackbar-module_action__1BXqS:hover {\n cursor: pointer;\n}\n\n@keyframes Snackbar-module_bounceIn__11jAv {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 0.9;\n }\n 80% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}";
|
|
1838
|
+
var styles$d = {"snackbar":"Snackbar-module_snackbar__3AF3D","bounceIn":"Snackbar-module_bounceIn__11jAv","primary":"Snackbar-module_primary__3Pt9m","accent":"Snackbar-module_accent__1iCXk","secondary":"Snackbar-module_secondary__3ke12","light":"Snackbar-module_light__3Pi0Y","dark":"Snackbar-module_dark__3TwXn","text":"Snackbar-module_text__2gmW-","action":"Snackbar-module_action__1BXqS"};
|
|
1839
|
+
styleInject(css_248z$d);
|
|
1823
1840
|
|
|
1824
1841
|
const Snackbar = (props) => {
|
|
1825
1842
|
const { message, color = COLOR.dark, actionText = 'ok', onOk } = props;
|
|
1826
1843
|
const getCssClasses = () => {
|
|
1827
1844
|
const cssClasses = [];
|
|
1828
|
-
cssClasses.push(styles$
|
|
1845
|
+
cssClasses.push(styles$d.snackbar);
|
|
1829
1846
|
cssClasses.push(`shadow-lg`);
|
|
1830
|
-
cssClasses.push(styles$
|
|
1847
|
+
cssClasses.push(styles$d[color]);
|
|
1831
1848
|
return cssClasses.filter(css => css).join(' ');
|
|
1832
1849
|
};
|
|
1833
1850
|
const handleClickAction = () => {
|
|
1834
1851
|
onOk && onOk();
|
|
1835
1852
|
};
|
|
1836
1853
|
return (React.createElement("div", { className: getCssClasses() },
|
|
1837
|
-
React.createElement("div", { className: styles$
|
|
1838
|
-
React.createElement("div", { className: styles$
|
|
1854
|
+
React.createElement("div", { className: styles$d.text }, message),
|
|
1855
|
+
React.createElement("div", { className: styles$d.action + " text-accent", onClick: handleClickAction },
|
|
1839
1856
|
React.createElement("span", null, actionText))));
|
|
1840
1857
|
};
|
|
1841
1858
|
|
|
@@ -1873,29 +1890,29 @@ class SnackbarService {
|
|
|
1873
1890
|
}
|
|
1874
1891
|
const snackbarService = new SnackbarService();
|
|
1875
1892
|
|
|
1876
|
-
var css_248z$
|
|
1877
|
-
var styles$
|
|
1878
|
-
styleInject(css_248z$
|
|
1893
|
+
var css_248z$c = ".SpeedDialActions-module_speedDialActions__zLEps {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto;\n}";
|
|
1894
|
+
var styles$c = {"speedDialActions":"SpeedDialActions-module_speedDialActions__zLEps"};
|
|
1895
|
+
styleInject(css_248z$c);
|
|
1879
1896
|
|
|
1880
1897
|
const SpeedDialActions = (props) => {
|
|
1881
1898
|
const { children } = props;
|
|
1882
1899
|
const getCssClasses = () => {
|
|
1883
1900
|
const cssClasses = [];
|
|
1884
|
-
cssClasses.push(styles$
|
|
1901
|
+
cssClasses.push(styles$c.speedDialActions);
|
|
1885
1902
|
return cssClasses.filter(css => css).join(' ');
|
|
1886
1903
|
};
|
|
1887
1904
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
1888
1905
|
};
|
|
1889
1906
|
|
|
1890
|
-
var css_248z$
|
|
1891
|
-
var styles$
|
|
1892
|
-
styleInject(css_248z$
|
|
1907
|
+
var css_248z$b = ".SpeedDial-module_speedDial__CQ5x2 {\n position: absolute;\n flex-direction: column-reverse;\n display: flex;\n z-index: 1050;\n align-items: center;\n right: 16px;\n bottom: 16px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
1908
|
+
var styles$b = {"speedDial":"SpeedDial-module_speedDial__CQ5x2"};
|
|
1909
|
+
styleInject(css_248z$b);
|
|
1893
1910
|
|
|
1894
1911
|
const SpeedDial = (props) => {
|
|
1895
1912
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
1896
1913
|
const getCssClasses = () => {
|
|
1897
1914
|
const cssClasses = [];
|
|
1898
|
-
cssClasses.push(styles$
|
|
1915
|
+
cssClasses.push(styles$b.speedDial);
|
|
1899
1916
|
className && cssClasses.push(className);
|
|
1900
1917
|
return cssClasses.filter(css => css).join(' ');
|
|
1901
1918
|
};
|
|
@@ -1912,15 +1929,15 @@ const SpeedDial = (props) => {
|
|
|
1912
1929
|
React.createElement(SpeedDialActions, null, children)));
|
|
1913
1930
|
};
|
|
1914
1931
|
|
|
1915
|
-
var css_248z$
|
|
1916
|
-
var styles$
|
|
1917
|
-
styleInject(css_248z$
|
|
1932
|
+
var css_248z$a = ".SpeedDialAction-module_speedDialAction__qmExs + .SpeedDialAction-module_speedDialAction__qmExs {\n margin-bottom: 10px;\n}";
|
|
1933
|
+
var styles$a = {"speedDialAction":"SpeedDialAction-module_speedDialAction__qmExs"};
|
|
1934
|
+
styleInject(css_248z$a);
|
|
1918
1935
|
|
|
1919
1936
|
const SpeedDialAction = (props) => {
|
|
1920
1937
|
const { icon, onClick, className } = props;
|
|
1921
1938
|
const getCssClasses = () => {
|
|
1922
1939
|
const cssClasses = [];
|
|
1923
|
-
cssClasses.push(styles$
|
|
1940
|
+
cssClasses.push(styles$a.speedDialAction);
|
|
1924
1941
|
className && cssClasses.push(className);
|
|
1925
1942
|
return cssClasses.filter(css => css).join(' ');
|
|
1926
1943
|
};
|
|
@@ -1937,15 +1954,15 @@ const SpeedDialIcon = (props) => {
|
|
|
1937
1954
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
1938
1955
|
};
|
|
1939
1956
|
|
|
1940
|
-
var css_248z$
|
|
1941
|
-
var styles$
|
|
1942
|
-
styleInject(css_248z$
|
|
1957
|
+
var css_248z$9 = ".StepperActions-module_stepperActions__2r5ZT {\n display: flex;\n}";
|
|
1958
|
+
var styles$9 = {"stepperActions":"StepperActions-module_stepperActions__2r5ZT"};
|
|
1959
|
+
styleInject(css_248z$9);
|
|
1943
1960
|
|
|
1944
1961
|
const StepperActions = (props) => {
|
|
1945
1962
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
1946
1963
|
const getCssClasses = () => {
|
|
1947
1964
|
const cssClasses = [];
|
|
1948
|
-
cssClasses.push(styles$
|
|
1965
|
+
cssClasses.push(styles$9.stepperActions);
|
|
1949
1966
|
className && cssClasses.push(className);
|
|
1950
1967
|
return cssClasses.filter(css => css).join(' ');
|
|
1951
1968
|
};
|
|
@@ -1962,31 +1979,31 @@ const StepPanel = (props) => {
|
|
|
1962
1979
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
1963
1980
|
};
|
|
1964
1981
|
|
|
1965
|
-
var css_248z$
|
|
1966
|
-
var styles$
|
|
1967
|
-
styleInject(css_248z$
|
|
1982
|
+
var css_248z$8 = ".StepConnector-module_stepConnector__2m7Xp {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px;\n}\n\n.StepConnector-module_stepConnectorLine__jSqG4 {\n display: block;\n border-color: var(--secondary);\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.StepConnector-module_stepConnectorLine__jSqG4.StepConnector-module_isActive__3Yj6N {\n border-color: var(--primary);\n}\n\n.StepConnector-module_stepConnectorLineHorizontal__3R2R8 {\n border-top-style: solid;\n border-top-width: 1px;\n}";
|
|
1983
|
+
var styles$8 = {"stepConnector":"StepConnector-module_stepConnector__2m7Xp","stepConnectorLine":"StepConnector-module_stepConnectorLine__jSqG4","isActive":"StepConnector-module_isActive__3Yj6N","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__3R2R8"};
|
|
1984
|
+
styleInject(css_248z$8);
|
|
1968
1985
|
|
|
1969
1986
|
const StepConnector = (props) => {
|
|
1970
1987
|
const { isActive, isHorizontal = true } = props;
|
|
1971
1988
|
const getCssClassesConnector = () => {
|
|
1972
1989
|
const cssClasses = [];
|
|
1973
|
-
cssClasses.push(styles$
|
|
1990
|
+
cssClasses.push(styles$8.stepConnector);
|
|
1974
1991
|
return cssClasses.filter(css => css).join(' ');
|
|
1975
1992
|
};
|
|
1976
1993
|
const getCssClassesLine = () => {
|
|
1977
1994
|
const cssClasses = [];
|
|
1978
|
-
cssClasses.push(styles$
|
|
1979
|
-
isActive && cssClasses.push(styles$
|
|
1980
|
-
isHorizontal && cssClasses.push(styles$
|
|
1995
|
+
cssClasses.push(styles$8.stepConnectorLine);
|
|
1996
|
+
isActive && cssClasses.push(styles$8['isActive']);
|
|
1997
|
+
isHorizontal && cssClasses.push(styles$8.stepConnectorLineHorizontal);
|
|
1981
1998
|
return cssClasses.filter(css => css).join(' ');
|
|
1982
1999
|
};
|
|
1983
2000
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
1984
2001
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
1985
2002
|
};
|
|
1986
2003
|
|
|
1987
|
-
var css_248z$
|
|
1988
|
-
var styles$
|
|
1989
|
-
styleInject(css_248z$
|
|
2004
|
+
var css_248z$7 = ".Stepper-module_stepper__1TOxM {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px;\n}\n.Stepper-module_stepper__1TOxM.Stepper-module_isHorizontal__3rFHH {\n overflow-x: auto;\n}";
|
|
2005
|
+
var styles$7 = {"stepper":"Stepper-module_stepper__1TOxM","isHorizontal":"Stepper-module_isHorizontal__3rFHH"};
|
|
2006
|
+
styleInject(css_248z$7);
|
|
1990
2007
|
|
|
1991
2008
|
const Stepper = (props) => {
|
|
1992
2009
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2074,8 +2091,8 @@ const Stepper = (props) => {
|
|
|
2074
2091
|
};
|
|
2075
2092
|
const getCssClasses = () => {
|
|
2076
2093
|
const cssClasses = [];
|
|
2077
|
-
cssClasses.push(styles$
|
|
2078
|
-
isHorizontal && cssClasses.push(styles$
|
|
2094
|
+
cssClasses.push(styles$7.stepper);
|
|
2095
|
+
isHorizontal && cssClasses.push(styles$7['isHorizontal']);
|
|
2079
2096
|
return cssClasses.filter(css => css).join(' ');
|
|
2080
2097
|
};
|
|
2081
2098
|
return (React.createElement(React.Fragment, null, steps &&
|
|
@@ -2144,9 +2161,9 @@ function useDebounce(callback, timeout, deps) {
|
|
|
2144
2161
|
}, deps);
|
|
2145
2162
|
}
|
|
2146
2163
|
|
|
2147
|
-
var css_248z$
|
|
2148
|
-
var styles$
|
|
2149
|
-
styleInject(css_248z$
|
|
2164
|
+
var css_248z$6 = ".Step-module_stepWrapper__1se3l {\n display: flex;\n align-items: center;\n padding-left: 8px;\n padding-right: 8px;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_stepWrapper__1se3l.Step-module_hasLabel__3cdCU:not(.Step-module_disabled__1R7hh):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius);\n}\n\n.Step-module_step__2siYu {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_step__2siYu:not(.Step-module_hasLabel__3cdCU):not(.Step-module_disabled__1R7hh):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n}\n.Step-module_step__2siYu.Step-module_hasLabel__3cdCU svg {\n width: 18px !important;\n height: 18px !important;\n}\n\n.Step-module_stepIconCircle__3IyDn svg {\n width: 24px;\n height: 24px;\n}\n\n.Step-module_stepValue__2TVrP {\n position: absolute;\n color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__2TVrP .Step-module_isActive__1QTL4 {\n color: var(--primary-contrast-text);\n}";
|
|
2165
|
+
var styles$6 = {"stepWrapper":"Step-module_stepWrapper__1se3l","hasLabel":"Step-module_hasLabel__3cdCU","disabled":"Step-module_disabled__1R7hh","step":"Step-module_step__2siYu","stepIconCircle":"Step-module_stepIconCircle__3IyDn","stepValue":"Step-module_stepValue__2TVrP","isActive":"Step-module_isActive__1QTL4"};
|
|
2166
|
+
styleInject(css_248z$6);
|
|
2150
2167
|
|
|
2151
2168
|
const Step = (props) => {
|
|
2152
2169
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2158,24 +2175,24 @@ const Step = (props) => {
|
|
|
2158
2175
|
};
|
|
2159
2176
|
const getCssClasses = () => {
|
|
2160
2177
|
const cssClasses = [];
|
|
2161
|
-
cssClasses.push(styles$
|
|
2162
|
-
label && showLabel && cssClasses.push(styles$
|
|
2163
|
-
isDisabled && cssClasses.push(styles$
|
|
2178
|
+
cssClasses.push(styles$6.stepWrapper);
|
|
2179
|
+
label && showLabel && cssClasses.push(styles$6['hasLabel']);
|
|
2180
|
+
isDisabled && cssClasses.push(styles$6['disabled']);
|
|
2164
2181
|
className && cssClasses.push(className);
|
|
2165
2182
|
return cssClasses.filter(css => css).join(' ');
|
|
2166
2183
|
};
|
|
2167
2184
|
const getCssClassesStep = () => {
|
|
2168
2185
|
const cssClasses = [];
|
|
2169
|
-
cssClasses.push(styles$
|
|
2170
|
-
label && showLabel && cssClasses.push(styles$
|
|
2171
|
-
isDisabled && cssClasses.push(styles$
|
|
2186
|
+
cssClasses.push(styles$6.step);
|
|
2187
|
+
label && showLabel && cssClasses.push(styles$6['hasLabel']);
|
|
2188
|
+
isDisabled && cssClasses.push(styles$6['disabled']);
|
|
2172
2189
|
return cssClasses.filter(css => css).join(' ');
|
|
2173
2190
|
};
|
|
2174
2191
|
return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2175
2192
|
React.createElement("div", { className: getCssClassesStep() },
|
|
2176
|
-
React.createElement(Icon, { className: styles$
|
|
2193
|
+
React.createElement(Icon, { className: styles$6.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
|
|
2177
2194
|
React.createElement(CircleSolidIcon, null)),
|
|
2178
|
-
React.createElement("div", { className: styles$
|
|
2195
|
+
React.createElement("div", { className: styles$6.stepValue + ' ' + (isActive ? (styles$6.stepValue['isActive']) : '') }, showProgressCheckIcon && isActive && isDone ?
|
|
2179
2196
|
React.createElement(Icon, null,
|
|
2180
2197
|
React.createElement(CheckSolidIcon, null))
|
|
2181
2198
|
:
|
|
@@ -2199,16 +2216,16 @@ const Table = (props) => {
|
|
|
2199
2216
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2200
2217
|
};
|
|
2201
2218
|
|
|
2202
|
-
var css_248z$
|
|
2203
|
-
var styles$
|
|
2204
|
-
styleInject(css_248z$
|
|
2219
|
+
var css_248z$5 = ".TabIndicator-module_tabIndicator__wj9Qm {\n bottom: 0;\n height: 2px;\n position: absolute;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.TabIndicator-module_tabIndicator__wj9Qm.TabIndicator-module_primary__2Lc8c {\n background-color: var(--primary);\n}\n.TabIndicator-module_tabIndicator__wj9Qm.TabIndicator-module_accent__37h0D {\n background-color: var(--accent);\n}";
|
|
2220
|
+
var styles$5 = {"tabIndicator":"TabIndicator-module_tabIndicator__wj9Qm","primary":"TabIndicator-module_primary__2Lc8c","accent":"TabIndicator-module_accent__37h0D"};
|
|
2221
|
+
styleInject(css_248z$5);
|
|
2205
2222
|
|
|
2206
2223
|
const TabIndicator = (props) => {
|
|
2207
2224
|
const { color = COLOR.accent, width, amount, index } = props;
|
|
2208
2225
|
const getCssClasses = () => {
|
|
2209
2226
|
const cssClasses = [];
|
|
2210
|
-
cssClasses.push(styles$
|
|
2211
|
-
cssClasses.push(styles$
|
|
2227
|
+
cssClasses.push(styles$5.tabIndicator);
|
|
2228
|
+
cssClasses.push(styles$5[color]);
|
|
2212
2229
|
return cssClasses.filter(css => css).join(' ');
|
|
2213
2230
|
};
|
|
2214
2231
|
return (React.createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2217,9 +2234,9 @@ const TabIndicator = (props) => {
|
|
|
2217
2234
|
} }));
|
|
2218
2235
|
};
|
|
2219
2236
|
|
|
2220
|
-
var css_248z$
|
|
2221
|
-
var styles$
|
|
2222
|
-
styleInject(css_248z$
|
|
2237
|
+
var css_248z$4 = ".Tabs-module_tabs__2azkC {\n display: flex;\n position: relative;\n}";
|
|
2238
|
+
var styles$4 = {"tabs":"Tabs-module_tabs__2azkC"};
|
|
2239
|
+
styleInject(css_248z$4);
|
|
2223
2240
|
|
|
2224
2241
|
const Tabs = (props) => {
|
|
2225
2242
|
const { children, className, fixed, indicatorColor, onChange, value } = props;
|
|
@@ -2234,7 +2251,7 @@ const Tabs = (props) => {
|
|
|
2234
2251
|
}, [children, value]);
|
|
2235
2252
|
const getCssClasses = () => {
|
|
2236
2253
|
const cssClasses = [];
|
|
2237
|
-
cssClasses.push(styles$
|
|
2254
|
+
cssClasses.push(styles$4.tabs);
|
|
2238
2255
|
className && cssClasses.push(className);
|
|
2239
2256
|
return cssClasses.filter(css => css).join(' ');
|
|
2240
2257
|
};
|
|
@@ -2258,15 +2275,15 @@ const Tabs = (props) => {
|
|
|
2258
2275
|
React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
|
|
2259
2276
|
};
|
|
2260
2277
|
|
|
2261
|
-
var css_248z$
|
|
2262
|
-
var styles$
|
|
2263
|
-
styleInject(css_248z$
|
|
2278
|
+
var css_248z$3 = ".Tab-module_tab__31Fjd {\n padding: 6px 12px;\n overflow: hidden;\n position: relative;\n font-size: 0.875rem;\n min-width: 72px;\n box-sizing: border-box;\n min-height: 48px;\n text-align: center;\n font-weight: 500;\n line-height: 1.75;\n white-space: normal;\n letter-spacing: 0.02857em;\n text-transform: uppercase;\n border-radius: 0;\n flex-grow: 1;\n flex-basis: 0;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
2279
|
+
var styles$3 = {"tab":"Tab-module_tab__31Fjd"};
|
|
2280
|
+
styleInject(css_248z$3);
|
|
2264
2281
|
|
|
2265
2282
|
const Tab = (props) => {
|
|
2266
2283
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2267
2284
|
const getCssClasses = () => {
|
|
2268
2285
|
const cssClasses = [];
|
|
2269
|
-
cssClasses.push(styles$
|
|
2286
|
+
cssClasses.push(styles$3.tab);
|
|
2270
2287
|
if (isActive) {
|
|
2271
2288
|
cssClasses.push(`show active`);
|
|
2272
2289
|
}
|
|
@@ -2281,9 +2298,9 @@ const TabPanel = (props) => {
|
|
|
2281
2298
|
return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2282
2299
|
};
|
|
2283
2300
|
|
|
2284
|
-
var css_248z = ".Tooltip-module_tooltipContainer__3SPVX {\n display: inline;\n}\n\n.Tooltip-module_tooltip__1AML3 {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__1AML3 #Tooltip-module_arrow__2c3YL,\n.Tooltip-module_tooltip__1AML3 #Tooltip-module_arrow__2c3YL::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__1AML3 #Tooltip-module_arrow__2c3YL::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=top] > #Tooltip-module_arrow__2c3YL {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=bottom] > #Tooltip-module_arrow__2c3YL {\n top: -4px;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=left] > #Tooltip-module_arrow__2c3YL {\n right: -4px;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=right] > #Tooltip-module_arrow__2c3YL {\n left: -4px;\n}";
|
|
2285
|
-
var styles = {"tooltipContainer":"Tooltip-module_tooltipContainer__3SPVX","tooltip":"Tooltip-module_tooltip__1AML3","arrow":"Tooltip-module_arrow__2c3YL"};
|
|
2286
|
-
styleInject(css_248z);
|
|
2301
|
+
var css_248z$2 = ".Tooltip-module_tooltipContainer__3SPVX {\n display: inline;\n}\n\n.Tooltip-module_tooltip__1AML3 {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__1AML3 #Tooltip-module_arrow__2c3YL,\n.Tooltip-module_tooltip__1AML3 #Tooltip-module_arrow__2c3YL::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__1AML3 #Tooltip-module_arrow__2c3YL::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=top] > #Tooltip-module_arrow__2c3YL {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=bottom] > #Tooltip-module_arrow__2c3YL {\n top: -4px;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=left] > #Tooltip-module_arrow__2c3YL {\n right: -4px;\n}\n.Tooltip-module_tooltip__1AML3[data-popper-placement^=right] > #Tooltip-module_arrow__2c3YL {\n left: -4px;\n}";
|
|
2302
|
+
var styles$2 = {"tooltipContainer":"Tooltip-module_tooltipContainer__3SPVX","tooltip":"Tooltip-module_tooltip__1AML3","arrow":"Tooltip-module_arrow__2c3YL"};
|
|
2303
|
+
styleInject(css_248z$2);
|
|
2287
2304
|
|
|
2288
2305
|
const Tooltip = (props) => {
|
|
2289
2306
|
const { children, text, placement = 'bottom' } = props;
|
|
@@ -2311,12 +2328,12 @@ const Tooltip = (props) => {
|
|
|
2311
2328
|
setShow(false);
|
|
2312
2329
|
};
|
|
2313
2330
|
return (React.createElement(Fragment, null,
|
|
2314
|
-
React.createElement("div", { className: styles.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2331
|
+
React.createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2315
2332
|
onMouseOver: handleMouseOver,
|
|
2316
2333
|
onMouseLeave: handleMouseLeave,
|
|
2317
2334
|
})),
|
|
2318
2335
|
show &&
|
|
2319
|
-
React.createElement("div", { className: styles.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2336
|
+
React.createElement("div", { className: styles$2.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2320
2337
|
text,
|
|
2321
2338
|
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2322
2339
|
};
|
|
@@ -2460,88 +2477,60 @@ const TimeSelect = (props) => {
|
|
|
2460
2477
|
React.createElement(MilliSecondSelect, { className: "form-control", value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MILLISECONDS) }))));
|
|
2461
2478
|
};
|
|
2462
2479
|
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
hasChildren &&
|
|
2467
|
-
React.createElement(IconButton, { onClick: () => onToggleExpand(id), icon: !isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
|
|
2468
|
-
React.createElement(Checkbox, { checked: isSelected, onChange: () => onClickSelect(id) }),
|
|
2469
|
-
label));
|
|
2470
|
-
};
|
|
2480
|
+
var css_248z$1 = ".TreeView-module_treeView__3kmGm {\n list-style-type: none;\n margin-bottom: 0;\n padding-left: 0px !important;\n}\n.TreeView-module_treeView__3kmGm ul {\n padding-left: 48px !important;\n}";
|
|
2481
|
+
var styles$1 = {"treeView":"TreeView-module_treeView__3kmGm"};
|
|
2482
|
+
styleInject(css_248z$1);
|
|
2471
2483
|
|
|
2472
2484
|
const TreeView = (props) => {
|
|
2473
|
-
const {
|
|
2474
|
-
const
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
result = arr1.reduce((acc, val) => {
|
|
2480
|
-
return (Array.isArray(val.children) ?
|
|
2481
|
-
acc.concat([
|
|
2482
|
-
{ id: val.id, label: val.label, level: level, hasChildren: true, parentId: parentId },
|
|
2483
|
-
...flattenDeep(val.children, val.id, level + 1)
|
|
2484
|
-
]) :
|
|
2485
|
-
acc.concat([{ id: val.id, label: val.label, level: level, hasChildren: false, parentId: parentId }]));
|
|
2486
|
-
}, []);
|
|
2487
|
-
return result;
|
|
2488
|
-
};
|
|
2489
|
-
useEffect(() => {
|
|
2490
|
-
setFlattenData(flattenDeep(data));
|
|
2491
|
-
}, [data]);
|
|
2492
|
-
const handleOnToggleExpand = (item) => {
|
|
2493
|
-
if (item.hasChildren) {
|
|
2494
|
-
let newExpandedItems = [...expandedItems];
|
|
2495
|
-
if (isExpanded(item.id)) {
|
|
2496
|
-
newExpandedItems = collapseRecursive(item, [...expandedItems]);
|
|
2497
|
-
onCollapse && onCollapse(item.id);
|
|
2498
|
-
}
|
|
2499
|
-
else {
|
|
2500
|
-
newExpandedItems.push(item);
|
|
2501
|
-
onExpand && onExpand(item.id);
|
|
2502
|
-
}
|
|
2503
|
-
setExpandedItems(newExpandedItems);
|
|
2504
|
-
}
|
|
2505
|
-
};
|
|
2506
|
-
const collapseRecursive = (item, expandedItems) => {
|
|
2507
|
-
let expandedItemIds = expandedItems.map(i => i.id);
|
|
2508
|
-
if (expandedItemIds.indexOf(item.id) >= 0) {
|
|
2509
|
-
expandedItems = expandedItems.filter(i => i.id !== item.id);
|
|
2510
|
-
}
|
|
2511
|
-
if (item.hasChildren) {
|
|
2512
|
-
let children = expandedItems.filter(child => child.parentId === item.id);
|
|
2513
|
-
for (let child of children) {
|
|
2514
|
-
expandedItems = collapseRecursive(child, expandedItems);
|
|
2515
|
-
}
|
|
2516
|
-
}
|
|
2517
|
-
return expandedItems;
|
|
2518
|
-
};
|
|
2519
|
-
const isExpanded = (id) => {
|
|
2520
|
-
return expandedItems.map(i => i.id).indexOf(id) >= 0;
|
|
2485
|
+
const { children, className } = props;
|
|
2486
|
+
const getCssClasses = () => {
|
|
2487
|
+
const cssClasses = [];
|
|
2488
|
+
cssClasses.push(styles$1.treeView);
|
|
2489
|
+
className && cssClasses.push(className);
|
|
2490
|
+
return cssClasses.filter(css => css).join(' ');
|
|
2521
2491
|
};
|
|
2522
|
-
|
|
2523
|
-
|
|
2492
|
+
return (React.createElement("ul", { className: getCssClasses() }, children));
|
|
2493
|
+
};
|
|
2494
|
+
|
|
2495
|
+
var css_248z = ".TreeItem-module_treeItem__2FtLe {\n display: flex;\n flex-direction: column;\n min-height: 48px;\n justify-content: center;\n}";
|
|
2496
|
+
var styles = {"treeItem":"TreeItem-module_treeItem__2FtLe"};
|
|
2497
|
+
styleInject(css_248z);
|
|
2498
|
+
|
|
2499
|
+
const TreeItem = (props) => {
|
|
2500
|
+
const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand, onSelect } = props;
|
|
2501
|
+
const [_isExpanded, setIsExpanded] = useState(false);
|
|
2502
|
+
const [_isSelected, setIsSelected] = useState(false);
|
|
2503
|
+
const getCssClasses = () => {
|
|
2504
|
+
const cssClasses = [];
|
|
2505
|
+
cssClasses.push(styles.treeItem);
|
|
2506
|
+
className && cssClasses.push(className);
|
|
2507
|
+
return cssClasses.filter(css => css).join(' ');
|
|
2524
2508
|
};
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2535
|
-
|
|
2509
|
+
useEffect(() => {
|
|
2510
|
+
if (isExpanded !== undefined)
|
|
2511
|
+
setIsExpanded(isExpanded);
|
|
2512
|
+
}, [isExpanded]);
|
|
2513
|
+
useEffect(() => {
|
|
2514
|
+
if (isSelected !== undefined)
|
|
2515
|
+
setIsSelected(isSelected);
|
|
2516
|
+
}, [isSelected]);
|
|
2517
|
+
const handleOnToggleExpand = (nodeId) => {
|
|
2518
|
+
setIsExpanded(!_isExpanded);
|
|
2519
|
+
onToggleExpand && onToggleExpand(nodeId);
|
|
2536
2520
|
};
|
|
2537
|
-
const
|
|
2538
|
-
|
|
2521
|
+
const handleOnSelect = (nodeId) => {
|
|
2522
|
+
setIsSelected(!_isSelected);
|
|
2523
|
+
onSelect && onSelect(nodeId, !_isSelected);
|
|
2539
2524
|
};
|
|
2540
|
-
return (React.createElement("
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2525
|
+
return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
|
|
2526
|
+
React.createElement("div", { className: "d-flex align-items-center" },
|
|
2527
|
+
children &&
|
|
2528
|
+
React.createElement(IconButton, { onClick: () => handleOnToggleExpand(nodeId), icon: !_isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
|
|
2529
|
+
isSelectable &&
|
|
2530
|
+
React.createElement(Checkbox, { checked: _isSelected, onChange: () => handleOnSelect(nodeId) }),
|
|
2531
|
+
label),
|
|
2532
|
+
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2544
2533
|
};
|
|
2545
2534
|
|
|
2546
|
-
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, 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, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useDebounce, useHover, useWindowSize };
|
|
2535
|
+
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, 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, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useConstructor, useDebounce, useHover, useWindowSize };
|
|
2547
2536
|
//# sourceMappingURL=index.es.js.map
|