react-asc 18.7.1 → 18.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/AutoComplete/AutoComplete.d.ts +1 -0
- package/components/TreeView/TreeItem.d.ts +12 -0
- package/components/TreeView/TreeView.d.ts +2 -9
- package/components/TreeView/index.d.ts +1 -0
- package/index.es.js +355 -360
- package/index.es.js.map +1 -1
- package/index.js +355 -359
- 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
|
|
@@ -253,7 +253,7 @@ styleInject(css_248z$I);
|
|
|
253
253
|
// multiple
|
|
254
254
|
// custom template render items
|
|
255
255
|
const AutoComplete = (props) => {
|
|
256
|
-
const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, onChange, onSelect, value } = props;
|
|
256
|
+
const { id, name, className, options = [], openOnFocus = true, disabled, readOnly, debounce = 0, placeholder, showClearButton, onChange, onSelect, value } = props;
|
|
257
257
|
const [model, setModel] = useState('');
|
|
258
258
|
const [searchText, setSearchText] = useState('');
|
|
259
259
|
const [isShow, setIsShow] = useState(false);
|
|
@@ -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);
|
|
@@ -297,33 +314,40 @@ const AutoComplete = (props) => {
|
|
|
297
314
|
const handleOnFocus = () => {
|
|
298
315
|
openOnFocus && show();
|
|
299
316
|
};
|
|
317
|
+
const handleClickReset = () => {
|
|
318
|
+
setModel('');
|
|
319
|
+
setSearchText('');
|
|
320
|
+
};
|
|
300
321
|
return (React.createElement(React.Fragment, null,
|
|
301
|
-
React.createElement("div", { ref: selectConainter, className: styles$
|
|
302
|
-
React.createElement("
|
|
322
|
+
React.createElement("div", { ref: selectConainter, className: styles$K.selectContainer },
|
|
323
|
+
React.createElement("div", { className: "d-flex" },
|
|
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 }),
|
|
325
|
+
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
326
|
+
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
303
327
|
isShow &&
|
|
304
328
|
React.createElement(React.Fragment, null,
|
|
305
|
-
React.createElement("div", { className: styles$
|
|
329
|
+
React.createElement("div", { className: styles$K.selectMenu },
|
|
306
330
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option) },
|
|
307
331
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
308
332
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
309
333
|
};
|
|
310
334
|
|
|
311
|
-
var css_248z$
|
|
312
|
-
var styles$
|
|
313
|
-
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);
|
|
314
338
|
|
|
315
339
|
const Badge = (props) => {
|
|
316
340
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
317
341
|
const getCssClassesBadgeContainer = () => {
|
|
318
342
|
const cssClasses = [];
|
|
319
|
-
cssClasses.push(styles$
|
|
343
|
+
cssClasses.push(styles$J.badgeContainer);
|
|
320
344
|
className && cssClasses.push(className);
|
|
321
345
|
return cssClasses.filter(css => css).join(' ');
|
|
322
346
|
};
|
|
323
347
|
const getCssClassesBadge = () => {
|
|
324
348
|
const cssClasses = [];
|
|
325
|
-
cssClasses.push(styles$
|
|
326
|
-
cssClasses.push(styles$
|
|
349
|
+
cssClasses.push(styles$J.badge);
|
|
350
|
+
cssClasses.push(styles$J[color]);
|
|
327
351
|
return cssClasses.filter(css => css).join(' ');
|
|
328
352
|
};
|
|
329
353
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -331,42 +355,42 @@ const Badge = (props) => {
|
|
|
331
355
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
332
356
|
};
|
|
333
357
|
|
|
334
|
-
var css_248z$
|
|
335
|
-
var styles$
|
|
336
|
-
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);
|
|
337
361
|
|
|
338
362
|
const Icon = (props) => {
|
|
339
363
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
340
364
|
const getCssClasses = () => {
|
|
341
365
|
const cssClasses = [];
|
|
342
|
-
cssClasses.push(styles$
|
|
343
|
-
iconColor && cssClasses.push(styles$
|
|
366
|
+
cssClasses.push(styles$I.icon);
|
|
367
|
+
iconColor && cssClasses.push(styles$I[iconColor]);
|
|
344
368
|
className && cssClasses.push(className);
|
|
345
369
|
return cssClasses.filter(css => css).join(' ');
|
|
346
370
|
};
|
|
347
371
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
348
372
|
};
|
|
349
373
|
|
|
350
|
-
var css_248z$
|
|
351
|
-
var styles$
|
|
352
|
-
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);
|
|
353
377
|
|
|
354
378
|
const ButtonTemplate = (props) => {
|
|
355
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"]);
|
|
356
380
|
const getCssClasses = () => {
|
|
357
381
|
const cssClasses = [];
|
|
358
|
-
cssClasses.push(styles$
|
|
382
|
+
cssClasses.push(styles$H.button);
|
|
359
383
|
if (variant !== 'outline' && variant !== 'text') {
|
|
360
|
-
cssClasses.push(styles$
|
|
361
|
-
cssClasses.push(styles$
|
|
384
|
+
cssClasses.push(styles$H.btnContained);
|
|
385
|
+
cssClasses.push(styles$H[color]);
|
|
362
386
|
}
|
|
363
387
|
if (variant === 'outline') {
|
|
364
|
-
cssClasses.push(styles$
|
|
365
|
-
cssClasses.push(styles$
|
|
388
|
+
cssClasses.push(styles$H.btnOutline);
|
|
389
|
+
cssClasses.push(styles$H[color]);
|
|
366
390
|
}
|
|
367
391
|
if (variant === 'text') {
|
|
368
|
-
cssClasses.push(styles$
|
|
369
|
-
cssClasses.push(styles$
|
|
392
|
+
cssClasses.push(styles$H.btnText);
|
|
393
|
+
cssClasses.push(styles$H[color]);
|
|
370
394
|
}
|
|
371
395
|
if (isRounded && variant !== 'text') {
|
|
372
396
|
cssClasses.push(`rounded-pill`);
|
|
@@ -380,40 +404,40 @@ const ButtonTemplate = (props) => {
|
|
|
380
404
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
381
405
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
382
406
|
startIcon &&
|
|
383
|
-
React.createElement(Icon, { className: styles$
|
|
407
|
+
React.createElement(Icon, { className: styles$H.startIcon }, startIcon),
|
|
384
408
|
children,
|
|
385
409
|
endIcon &&
|
|
386
|
-
React.createElement(Icon, { className: styles$
|
|
410
|
+
React.createElement(Icon, { className: styles$H.endIcon }, endIcon))));
|
|
387
411
|
};
|
|
388
412
|
|
|
389
413
|
const Button = (props) => {
|
|
390
414
|
return (React.createElement(ButtonTemplate, Object.assign({}, props)));
|
|
391
415
|
};
|
|
392
416
|
|
|
393
|
-
var css_248z$
|
|
394
|
-
var styles$
|
|
395
|
-
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);
|
|
396
420
|
|
|
397
421
|
const ButtonGroup = (props) => {
|
|
398
422
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
399
423
|
const getCssClasses = () => {
|
|
400
424
|
const cssClasses = [];
|
|
401
|
-
cssClasses.push(styles$
|
|
425
|
+
cssClasses.push(styles$G.buttonGroup);
|
|
402
426
|
className && cssClasses.push(className);
|
|
403
427
|
return cssClasses.filter(css => css).join(' ');
|
|
404
428
|
};
|
|
405
429
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
406
430
|
};
|
|
407
431
|
|
|
408
|
-
var css_248z$
|
|
409
|
-
var styles$
|
|
410
|
-
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);
|
|
411
435
|
|
|
412
436
|
const Breadcrumb = (props) => {
|
|
413
437
|
const { children, className } = props;
|
|
414
438
|
const getCssClasses = () => {
|
|
415
439
|
const cssClasses = [];
|
|
416
|
-
cssClasses.push(styles$
|
|
440
|
+
cssClasses.push(styles$F.breadcrumb);
|
|
417
441
|
className && cssClasses.push(className);
|
|
418
442
|
return cssClasses.filter(css => css).join(' ');
|
|
419
443
|
};
|
|
@@ -423,15 +447,15 @@ const Breadcrumb = (props) => {
|
|
|
423
447
|
|
|
424
448
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
425
449
|
|
|
426
|
-
var css_248z$
|
|
427
|
-
var styles$
|
|
428
|
-
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);
|
|
429
453
|
|
|
430
454
|
const BreadcrumbItem = (props) => {
|
|
431
455
|
const { children, className, isActive, onClick } = props;
|
|
432
456
|
const getCssClasses = () => {
|
|
433
457
|
const cssClasses = [];
|
|
434
|
-
cssClasses.push(styles$
|
|
458
|
+
cssClasses.push(styles$E.breadcrumbItem);
|
|
435
459
|
className && cssClasses.push(className);
|
|
436
460
|
isActive && cssClasses.push('active');
|
|
437
461
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -445,106 +469,106 @@ const BreadcrumbItem = (props) => {
|
|
|
445
469
|
wrapper: label => React.createElement("a", null, label) }, children)));
|
|
446
470
|
};
|
|
447
471
|
|
|
448
|
-
var css_248z$
|
|
449
|
-
var styles$
|
|
450
|
-
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);
|
|
451
475
|
|
|
452
476
|
const Card = (props) => {
|
|
453
477
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
454
478
|
const getCssClasses = () => {
|
|
455
479
|
const cssClasses = [];
|
|
456
|
-
cssClasses.push(styles$
|
|
457
|
-
shadow && cssClasses.push(styles$
|
|
480
|
+
cssClasses.push(styles$D.card);
|
|
481
|
+
shadow && cssClasses.push(styles$D.shadow);
|
|
458
482
|
className && cssClasses.push(className);
|
|
459
483
|
return cssClasses.filter(css => css).join(' ');
|
|
460
484
|
};
|
|
461
485
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
462
486
|
};
|
|
463
487
|
|
|
464
|
-
var css_248z$
|
|
465
|
-
var styles$
|
|
466
|
-
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);
|
|
467
491
|
|
|
468
492
|
const CardBody = (props) => {
|
|
469
493
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
470
494
|
const getCssClasses = () => {
|
|
471
495
|
const cssClasses = [];
|
|
472
|
-
cssClasses.push(styles$
|
|
496
|
+
cssClasses.push(styles$C.cardBody);
|
|
473
497
|
className && cssClasses.push(className);
|
|
474
498
|
return cssClasses.filter(css => css).join(' ');
|
|
475
499
|
};
|
|
476
500
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
477
501
|
};
|
|
478
502
|
|
|
479
|
-
var css_248z$
|
|
480
|
-
var styles$
|
|
481
|
-
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);
|
|
482
506
|
|
|
483
507
|
const CardFooter = (props) => {
|
|
484
508
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
485
509
|
const getCssClasses = () => {
|
|
486
510
|
const cssClasses = [];
|
|
487
|
-
cssClasses.push(styles$
|
|
511
|
+
cssClasses.push(styles$B.cardFooter);
|
|
488
512
|
className && cssClasses.push(className);
|
|
489
513
|
return cssClasses.filter(css => css).join(' ');
|
|
490
514
|
};
|
|
491
515
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
492
516
|
};
|
|
493
517
|
|
|
494
|
-
var css_248z$
|
|
495
|
-
var styles$
|
|
496
|
-
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);
|
|
497
521
|
|
|
498
522
|
const CardSubtitle = (props) => {
|
|
499
523
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
500
524
|
const getCssClasses = () => {
|
|
501
525
|
const cssClasses = [];
|
|
502
|
-
cssClasses.push(styles$
|
|
526
|
+
cssClasses.push(styles$A.cardSubtitle);
|
|
503
527
|
className && cssClasses.push(className);
|
|
504
528
|
return cssClasses.filter(css => css).join(' ');
|
|
505
529
|
};
|
|
506
530
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
507
531
|
};
|
|
508
532
|
|
|
509
|
-
var css_248z$
|
|
510
|
-
var styles$
|
|
511
|
-
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);
|
|
512
536
|
|
|
513
537
|
const CardText = (props) => {
|
|
514
538
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
515
539
|
const getCssClasses = () => {
|
|
516
540
|
const cssClasses = [];
|
|
517
|
-
cssClasses.push(styles$
|
|
541
|
+
cssClasses.push(styles$z.cardText);
|
|
518
542
|
className && cssClasses.push(className);
|
|
519
543
|
return cssClasses.filter(css => css).join(' ');
|
|
520
544
|
};
|
|
521
545
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
|
|
522
546
|
};
|
|
523
547
|
|
|
524
|
-
var css_248z$
|
|
525
|
-
var styles$
|
|
526
|
-
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);
|
|
527
551
|
|
|
528
552
|
const CardTitle = (props) => {
|
|
529
553
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
530
554
|
const getCssClasses = () => {
|
|
531
555
|
const cssClasses = [];
|
|
532
|
-
cssClasses.push(styles$
|
|
556
|
+
cssClasses.push(styles$y.cardTitle);
|
|
533
557
|
className && cssClasses.push(className);
|
|
534
558
|
return cssClasses.filter(css => css).join(' ');
|
|
535
559
|
};
|
|
536
560
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
537
561
|
};
|
|
538
562
|
|
|
539
|
-
var css_248z$
|
|
540
|
-
var styles$
|
|
541
|
-
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);
|
|
542
566
|
|
|
543
567
|
const CardImage = (props) => {
|
|
544
568
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
545
569
|
const getCssClasses = () => {
|
|
546
570
|
const cssClasses = [];
|
|
547
|
-
cssClasses.push(styles$
|
|
571
|
+
cssClasses.push(styles$x.cardImage);
|
|
548
572
|
className && cssClasses.push(className);
|
|
549
573
|
return cssClasses.filter(css => css).join(' ');
|
|
550
574
|
};
|
|
@@ -593,15 +617,15 @@ const CircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true
|
|
|
593
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" },
|
|
594
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" })));
|
|
595
619
|
|
|
596
|
-
var css_248z$
|
|
597
|
-
var styles$
|
|
598
|
-
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);
|
|
599
623
|
|
|
600
624
|
const Wrapper = (props) => {
|
|
601
625
|
const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
|
|
602
626
|
const getCssClasses = () => {
|
|
603
627
|
const cssClasses = [];
|
|
604
|
-
cssClasses.push(styles$
|
|
628
|
+
cssClasses.push(styles$w.typography);
|
|
605
629
|
className && cssClasses.push(className);
|
|
606
630
|
return cssClasses.filter(css => css).join(' ');
|
|
607
631
|
};
|
|
@@ -612,21 +636,21 @@ const Typography = (_a) => {
|
|
|
612
636
|
return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
|
|
613
637
|
};
|
|
614
638
|
|
|
615
|
-
var css_248z$
|
|
616
|
-
var styles$
|
|
617
|
-
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);
|
|
618
642
|
|
|
619
643
|
const IconButton = (props) => {
|
|
620
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"]);
|
|
621
645
|
const getCssClasses = () => {
|
|
622
646
|
const cssClasses = [];
|
|
623
|
-
cssClasses.push(styles$
|
|
624
|
-
cssClasses.push(styles$
|
|
625
|
-
cssClasses.push(styles$
|
|
626
|
-
cssClasses.push(styles$
|
|
627
|
-
isActive && cssClasses.push(styles$
|
|
628
|
-
disabled && cssClasses.push(styles$
|
|
629
|
-
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);
|
|
630
654
|
className && cssClasses.push(className);
|
|
631
655
|
return cssClasses.filter(css => css).join(' ');
|
|
632
656
|
};
|
|
@@ -635,9 +659,9 @@ const IconButton = (props) => {
|
|
|
635
659
|
label && React.createElement(Typography, null, label)));
|
|
636
660
|
};
|
|
637
661
|
|
|
638
|
-
var css_248z$
|
|
639
|
-
var styles$
|
|
640
|
-
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);
|
|
641
665
|
|
|
642
666
|
const Checkbox = (props) => {
|
|
643
667
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -672,24 +696,24 @@ const Checkbox = (props) => {
|
|
|
672
696
|
setIsChecked(!isChecked);
|
|
673
697
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
674
698
|
};
|
|
675
|
-
return (React.createElement("div", { className: styles$
|
|
699
|
+
return (React.createElement("div", { className: styles$u.checkboxContainer },
|
|
676
700
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
677
|
-
React.createElement("label", { onClick: handleClick, className: styles$
|
|
701
|
+
React.createElement("label", { onClick: handleClick, className: styles$u.checkboxLabel + ' ' + (disabled ? styles$u['disabled'] : undefined) }, label),
|
|
678
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))));
|
|
679
703
|
};
|
|
680
704
|
|
|
681
|
-
var css_248z$
|
|
682
|
-
var styles$
|
|
683
|
-
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);
|
|
684
708
|
|
|
685
709
|
const Chip = (props) => {
|
|
686
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"]);
|
|
687
711
|
const getCssClass = () => {
|
|
688
712
|
const cssClasses = [];
|
|
689
|
-
cssClasses.push(styles$
|
|
690
|
-
cssClasses.push(styles$
|
|
691
|
-
shadow && cssClasses.push(styles$
|
|
692
|
-
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']);
|
|
693
717
|
className && cssClasses.push(className);
|
|
694
718
|
return cssClasses.filter(r => r).join(' ');
|
|
695
719
|
};
|
|
@@ -699,7 +723,7 @@ const Chip = (props) => {
|
|
|
699
723
|
};
|
|
700
724
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
701
725
|
React.createElement("div", null, children),
|
|
702
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
726
|
+
isDeletable && (React.createElement("div", { className: styles$t.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
703
727
|
};
|
|
704
728
|
|
|
705
729
|
const FormLabel = ({ children, className, htmlFor }) => (React.createElement("label", { htmlFor: htmlFor, className: className }, children));
|
|
@@ -735,9 +759,9 @@ const FileInput = (props) => {
|
|
|
735
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))));
|
|
736
760
|
};
|
|
737
761
|
|
|
738
|
-
var css_248z$
|
|
739
|
-
var styles$
|
|
740
|
-
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);
|
|
741
765
|
|
|
742
766
|
const Select = (props) => {
|
|
743
767
|
var _a, _b, _c;
|
|
@@ -750,7 +774,7 @@ const Select = (props) => {
|
|
|
750
774
|
const getCssClass = () => {
|
|
751
775
|
const cssClasses = [];
|
|
752
776
|
className && cssClasses.push(className);
|
|
753
|
-
cssClasses.push(styles$
|
|
777
|
+
cssClasses.push(styles$s.select);
|
|
754
778
|
return cssClasses.filter(r => r).join(' ');
|
|
755
779
|
};
|
|
756
780
|
useEffect(() => {
|
|
@@ -869,7 +893,7 @@ const Select = (props) => {
|
|
|
869
893
|
}
|
|
870
894
|
};
|
|
871
895
|
return (React.createElement(React.Fragment, null,
|
|
872
|
-
React.createElement("div", { ref: selectConainter, className: styles$
|
|
896
|
+
React.createElement("div", { ref: selectConainter, className: styles$s.selectContainer },
|
|
873
897
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
874
898
|
!multiple && renderSingleViewModel(),
|
|
875
899
|
multiple && renderMultipleViewModel(),
|
|
@@ -877,7 +901,7 @@ const Select = (props) => {
|
|
|
877
901
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
878
902
|
isShow &&
|
|
879
903
|
createPortal(React.createElement(React.Fragment, null,
|
|
880
|
-
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 } },
|
|
881
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) },
|
|
882
906
|
multiple &&
|
|
883
907
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -885,15 +909,15 @@ const Select = (props) => {
|
|
|
885
909
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
|
|
886
910
|
};
|
|
887
911
|
|
|
888
|
-
var css_248z$
|
|
889
|
-
var styles$
|
|
890
|
-
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);
|
|
891
915
|
|
|
892
916
|
const Textarea = (props) => {
|
|
893
917
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
894
918
|
const getCssClass = () => {
|
|
895
919
|
const cssClasses = [];
|
|
896
|
-
cssClasses.push(styles$
|
|
920
|
+
cssClasses.push(styles$r.textarea);
|
|
897
921
|
className && cssClasses.push(className);
|
|
898
922
|
return cssClasses.filter(r => r).join(' ');
|
|
899
923
|
};
|
|
@@ -1249,16 +1273,16 @@ const DateSelect = (props) => {
|
|
|
1249
1273
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1250
1274
|
// };
|
|
1251
1275
|
|
|
1252
|
-
var css_248z$
|
|
1253
|
-
var styles$
|
|
1254
|
-
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);
|
|
1255
1279
|
|
|
1256
1280
|
const Drawer = (props) => {
|
|
1257
1281
|
const { children, className, position = 'left', permanent = false, target = document.body, onClickBackdrop } = props;
|
|
1258
1282
|
useEffect(() => {
|
|
1259
|
-
document.body.classList.add(styles$
|
|
1283
|
+
document.body.classList.add(styles$q.drawerOpen);
|
|
1260
1284
|
return () => {
|
|
1261
|
-
document.body.classList.remove(styles$
|
|
1285
|
+
document.body.classList.remove(styles$q.drawerOpen);
|
|
1262
1286
|
};
|
|
1263
1287
|
}, []);
|
|
1264
1288
|
const handleClickBackdrop = () => {
|
|
@@ -1272,10 +1296,10 @@ const DrawerContent = (props) => {
|
|
|
1272
1296
|
const { children, className, position = 'left', permanent = false } = props;
|
|
1273
1297
|
const getCssClasses = () => {
|
|
1274
1298
|
const cssClasses = [];
|
|
1275
|
-
cssClasses.push(styles$
|
|
1299
|
+
cssClasses.push(styles$q.drawer);
|
|
1276
1300
|
className && cssClasses.push(className);
|
|
1277
|
-
!!permanent && cssClasses.push(styles$
|
|
1278
|
-
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']);
|
|
1279
1303
|
return cssClasses.filter(css => css).join(' ');
|
|
1280
1304
|
};
|
|
1281
1305
|
const positionStyles = {
|
|
@@ -1288,9 +1312,9 @@ const DrawerContent = (props) => {
|
|
|
1288
1312
|
return (React.createElement("div", { className: getCssClasses(), style: getStyles() }, children));
|
|
1289
1313
|
};
|
|
1290
1314
|
|
|
1291
|
-
var css_248z$
|
|
1292
|
-
var styles$
|
|
1293
|
-
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);
|
|
1294
1318
|
|
|
1295
1319
|
const MenuBody = (props) => {
|
|
1296
1320
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1320,8 +1344,8 @@ const MenuBody = (props) => {
|
|
|
1320
1344
|
}, [menuBodyRef]);
|
|
1321
1345
|
const getCssClasses = () => {
|
|
1322
1346
|
const cssClasses = [];
|
|
1323
|
-
cssClasses.push(styles$
|
|
1324
|
-
shadow && cssClasses.push(styles$
|
|
1347
|
+
cssClasses.push(styles$p.menuBody);
|
|
1348
|
+
shadow && cssClasses.push(styles$p.shadow);
|
|
1325
1349
|
className && cssClasses.push(className);
|
|
1326
1350
|
return cssClasses.filter(css => css).join(' ');
|
|
1327
1351
|
};
|
|
@@ -1333,9 +1357,9 @@ const MenuBody = (props) => {
|
|
|
1333
1357
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1334
1358
|
};
|
|
1335
1359
|
|
|
1336
|
-
var css_248z$
|
|
1337
|
-
var styles$
|
|
1338
|
-
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);
|
|
1339
1363
|
|
|
1340
1364
|
const Menu = (props) => {
|
|
1341
1365
|
const { toggle, children, className, open, menuPosition, onClickBackdrop, onToggleClick } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop", "onToggleClick"]);
|
|
@@ -1343,7 +1367,7 @@ const Menu = (props) => {
|
|
|
1343
1367
|
const toggleContainerRef = useRef(null);
|
|
1344
1368
|
const getCssClasses = () => {
|
|
1345
1369
|
const cssClasses = [];
|
|
1346
|
-
cssClasses.push(styles$
|
|
1370
|
+
cssClasses.push(styles$o.menu);
|
|
1347
1371
|
className && cssClasses.push(className);
|
|
1348
1372
|
return cssClasses.filter(css => css).join(' ');
|
|
1349
1373
|
};
|
|
@@ -1356,17 +1380,17 @@ const Menu = (props) => {
|
|
|
1356
1380
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1357
1381
|
};
|
|
1358
1382
|
|
|
1359
|
-
var css_248z$
|
|
1360
|
-
var styles$
|
|
1361
|
-
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);
|
|
1362
1386
|
|
|
1363
1387
|
const MenuItem = (props) => {
|
|
1364
1388
|
const { children, onClick, type = 'item' } = props;
|
|
1365
1389
|
const getCssClasses = () => {
|
|
1366
1390
|
const cssClasses = [];
|
|
1367
|
-
cssClasses.push(styles$
|
|
1391
|
+
cssClasses.push(styles$n.menuItem);
|
|
1368
1392
|
if (type === 'header') {
|
|
1369
|
-
cssClasses.push(styles$
|
|
1393
|
+
cssClasses.push(styles$n.menuItemHeader);
|
|
1370
1394
|
}
|
|
1371
1395
|
return cssClasses.filter(css => css).join(' ');
|
|
1372
1396
|
};
|
|
@@ -1384,23 +1408,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1384
1408
|
return (React.createElement(Fragment, null, children));
|
|
1385
1409
|
};
|
|
1386
1410
|
|
|
1387
|
-
var css_248z$
|
|
1388
|
-
var styles$
|
|
1389
|
-
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);
|
|
1390
1414
|
|
|
1391
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1415
|
+
const MenuDivider = () => React.createElement("div", { className: styles$m.menuItemDivider });
|
|
1392
1416
|
|
|
1393
|
-
var css_248z$
|
|
1394
|
-
var styles$
|
|
1395
|
-
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);
|
|
1396
1420
|
|
|
1397
1421
|
const ExpansionPanelContent = ({ children }) => {
|
|
1398
|
-
return (React.createElement("div", { className: styles$
|
|
1422
|
+
return (React.createElement("div", { className: styles$l.expansionPanelContent }, children));
|
|
1399
1423
|
};
|
|
1400
1424
|
|
|
1401
|
-
var css_248z$
|
|
1402
|
-
var styles$
|
|
1403
|
-
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);
|
|
1404
1428
|
|
|
1405
1429
|
const ExpansionPanelHeader = (props) => {
|
|
1406
1430
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1408,15 +1432,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1408
1432
|
e.stopPropagation();
|
|
1409
1433
|
onClick && onClick(e);
|
|
1410
1434
|
};
|
|
1411
|
-
return (React.createElement("div", { className: styles$
|
|
1435
|
+
return (React.createElement("div", { className: styles$k.expansionPanelHeader, onClick: handleClick },
|
|
1412
1436
|
children,
|
|
1413
1437
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1414
1438
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1415
1439
|
};
|
|
1416
1440
|
|
|
1417
|
-
var css_248z$
|
|
1418
|
-
var styles$
|
|
1419
|
-
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);
|
|
1420
1444
|
|
|
1421
1445
|
const ExpansionPanel = (props) => {
|
|
1422
1446
|
const { header, children, isExpanded = false, onChange } = props;
|
|
@@ -1426,9 +1450,9 @@ const ExpansionPanel = (props) => {
|
|
|
1426
1450
|
}, [isExpanded]);
|
|
1427
1451
|
const getCssClasses = () => {
|
|
1428
1452
|
const cssClasses = [];
|
|
1429
|
-
cssClasses.push(styles$
|
|
1453
|
+
cssClasses.push(styles$j.expansionPanel);
|
|
1430
1454
|
if (_isExpanded) {
|
|
1431
|
-
cssClasses.push(styles$
|
|
1455
|
+
cssClasses.push(styles$j.isExpanded);
|
|
1432
1456
|
}
|
|
1433
1457
|
return cssClasses.filter(css => css).join(' ');
|
|
1434
1458
|
};
|
|
@@ -1442,16 +1466,16 @@ const ExpansionPanel = (props) => {
|
|
|
1442
1466
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1443
1467
|
};
|
|
1444
1468
|
|
|
1445
|
-
var css_248z$
|
|
1446
|
-
var styles$
|
|
1447
|
-
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);
|
|
1448
1472
|
|
|
1449
1473
|
const FloatingActionButton = (props) => {
|
|
1450
1474
|
const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1451
1475
|
const getCssClasses = () => {
|
|
1452
1476
|
const cssClasses = [];
|
|
1453
|
-
cssClasses.push(styles$
|
|
1454
|
-
fixed && cssClasses.push(styles$
|
|
1477
|
+
cssClasses.push(styles$i.fab);
|
|
1478
|
+
fixed && cssClasses.push(styles$i['fixed']);
|
|
1455
1479
|
className && cssClasses.push(className);
|
|
1456
1480
|
return cssClasses.filter(css => css).join(' ');
|
|
1457
1481
|
};
|
|
@@ -1513,14 +1537,14 @@ const Link = (props) => {
|
|
|
1513
1537
|
return (React.createElement("a", { className: getCssClasses(), href: url || '#', target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
|
|
1514
1538
|
};
|
|
1515
1539
|
|
|
1516
|
-
var css_248z$
|
|
1517
|
-
var styles$
|
|
1518
|
-
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);
|
|
1519
1543
|
|
|
1520
1544
|
const LoadingIndicator = () => {
|
|
1521
1545
|
const getCssClasses = () => {
|
|
1522
1546
|
const cssClasses = [];
|
|
1523
|
-
cssClasses.push(styles$
|
|
1547
|
+
cssClasses.push(styles$h.loadingIndicator);
|
|
1524
1548
|
return cssClasses.filter(css => css).join(' ');
|
|
1525
1549
|
};
|
|
1526
1550
|
return (React.createElement("div", { className: getCssClasses() },
|
|
@@ -1530,7 +1554,7 @@ const LoadingIndicator = () => {
|
|
|
1530
1554
|
const LoadingIndicatorContainer = ({ children }) => {
|
|
1531
1555
|
const getCssClasses = () => {
|
|
1532
1556
|
const cssClasses = [];
|
|
1533
|
-
cssClasses.push(styles$
|
|
1557
|
+
cssClasses.push(styles$h.loadingIndicatorContainer);
|
|
1534
1558
|
return cssClasses.filter(css => css).join(' ');
|
|
1535
1559
|
};
|
|
1536
1560
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1560,16 +1584,16 @@ class LoadingIndicatorService {
|
|
|
1560
1584
|
}
|
|
1561
1585
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1562
1586
|
|
|
1563
|
-
var css_248z$
|
|
1564
|
-
var styles$
|
|
1565
|
-
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);
|
|
1566
1590
|
|
|
1567
1591
|
const ModalHeader = (props) => {
|
|
1568
1592
|
const { children, isDismissable = false, onClose } = props;
|
|
1569
1593
|
const handleClick = () => {
|
|
1570
1594
|
onClose && onClose();
|
|
1571
1595
|
};
|
|
1572
|
-
return (React.createElement("div", { className: "modal-header " + styles$
|
|
1596
|
+
return (React.createElement("div", { className: "modal-header " + styles$g.modalHeader },
|
|
1573
1597
|
React.createElement("h5", { className: "modal-title" }, children),
|
|
1574
1598
|
isDismissable &&
|
|
1575
1599
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
@@ -1577,24 +1601,24 @@ const ModalHeader = (props) => {
|
|
|
1577
1601
|
|
|
1578
1602
|
const ModalBody = ({ children }) => (React.createElement("div", { className: "modal-body" }, children));
|
|
1579
1603
|
|
|
1580
|
-
var css_248z$
|
|
1581
|
-
var styles$
|
|
1582
|
-
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);
|
|
1583
1607
|
|
|
1584
|
-
var css_248z$
|
|
1585
|
-
var styles$
|
|
1586
|
-
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);
|
|
1587
1611
|
|
|
1588
|
-
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$
|
|
1612
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$e.modalFooter }, children));
|
|
1589
1613
|
|
|
1590
1614
|
const Modal = (props) => {
|
|
1591
1615
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1592
1616
|
const getCssClass = () => {
|
|
1593
1617
|
const cssClasses = [];
|
|
1594
1618
|
cssClasses.push('modal-dialog modal-dialog-centered');
|
|
1595
|
-
cssClasses.push(styles$
|
|
1596
|
-
!!fullScreen && cssClasses.push(styles$
|
|
1597
|
-
size && cssClasses.push(styles$
|
|
1619
|
+
cssClasses.push(styles$f.modal);
|
|
1620
|
+
!!fullScreen && cssClasses.push(styles$f['fullscreen']);
|
|
1621
|
+
size && cssClasses.push(styles$f[size]);
|
|
1598
1622
|
className && cssClasses.push(className);
|
|
1599
1623
|
return cssClasses.filter(r => r).join(' ');
|
|
1600
1624
|
};
|
|
@@ -1608,9 +1632,9 @@ const Modal = (props) => {
|
|
|
1608
1632
|
onBackdropClick && onBackdropClick();
|
|
1609
1633
|
};
|
|
1610
1634
|
return (React.createElement(Fragment, null,
|
|
1611
|
-
React.createElement("div", { className: "modal show " + styles$
|
|
1635
|
+
React.createElement("div", { className: "modal show " + styles$f.modal, style: { display: 'block' } },
|
|
1612
1636
|
React.createElement("div", { className: getCssClass() },
|
|
1613
|
-
React.createElement("div", { className: 'modal-content ' + (!!fullScreen ? styles$
|
|
1637
|
+
React.createElement("div", { className: 'modal-content ' + (!!fullScreen ? styles$f['modalContent'] : undefined) },
|
|
1614
1638
|
header &&
|
|
1615
1639
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1616
1640
|
React.createElement(ModalBody, null, children),
|
|
@@ -1810,25 +1834,25 @@ const Sidebar = (props) => {
|
|
|
1810
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)))))))))));
|
|
1811
1835
|
};
|
|
1812
1836
|
|
|
1813
|
-
var css_248z$
|
|
1814
|
-
var styles$
|
|
1815
|
-
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);
|
|
1816
1840
|
|
|
1817
1841
|
const Snackbar = (props) => {
|
|
1818
1842
|
const { message, color = COLOR.dark, actionText = 'ok', onOk } = props;
|
|
1819
1843
|
const getCssClasses = () => {
|
|
1820
1844
|
const cssClasses = [];
|
|
1821
|
-
cssClasses.push(styles$
|
|
1845
|
+
cssClasses.push(styles$d.snackbar);
|
|
1822
1846
|
cssClasses.push(`shadow-lg`);
|
|
1823
|
-
cssClasses.push(styles$
|
|
1847
|
+
cssClasses.push(styles$d[color]);
|
|
1824
1848
|
return cssClasses.filter(css => css).join(' ');
|
|
1825
1849
|
};
|
|
1826
1850
|
const handleClickAction = () => {
|
|
1827
1851
|
onOk && onOk();
|
|
1828
1852
|
};
|
|
1829
1853
|
return (React.createElement("div", { className: getCssClasses() },
|
|
1830
|
-
React.createElement("div", { className: styles$
|
|
1831
|
-
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 },
|
|
1832
1856
|
React.createElement("span", null, actionText))));
|
|
1833
1857
|
};
|
|
1834
1858
|
|
|
@@ -1866,29 +1890,29 @@ class SnackbarService {
|
|
|
1866
1890
|
}
|
|
1867
1891
|
const snackbarService = new SnackbarService();
|
|
1868
1892
|
|
|
1869
|
-
var css_248z$
|
|
1870
|
-
var styles$
|
|
1871
|
-
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);
|
|
1872
1896
|
|
|
1873
1897
|
const SpeedDialActions = (props) => {
|
|
1874
1898
|
const { children } = props;
|
|
1875
1899
|
const getCssClasses = () => {
|
|
1876
1900
|
const cssClasses = [];
|
|
1877
|
-
cssClasses.push(styles$
|
|
1901
|
+
cssClasses.push(styles$c.speedDialActions);
|
|
1878
1902
|
return cssClasses.filter(css => css).join(' ');
|
|
1879
1903
|
};
|
|
1880
1904
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
1881
1905
|
};
|
|
1882
1906
|
|
|
1883
|
-
var css_248z$
|
|
1884
|
-
var styles$
|
|
1885
|
-
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);
|
|
1886
1910
|
|
|
1887
1911
|
const SpeedDial = (props) => {
|
|
1888
1912
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
1889
1913
|
const getCssClasses = () => {
|
|
1890
1914
|
const cssClasses = [];
|
|
1891
|
-
cssClasses.push(styles$
|
|
1915
|
+
cssClasses.push(styles$b.speedDial);
|
|
1892
1916
|
className && cssClasses.push(className);
|
|
1893
1917
|
return cssClasses.filter(css => css).join(' ');
|
|
1894
1918
|
};
|
|
@@ -1905,15 +1929,15 @@ const SpeedDial = (props) => {
|
|
|
1905
1929
|
React.createElement(SpeedDialActions, null, children)));
|
|
1906
1930
|
};
|
|
1907
1931
|
|
|
1908
|
-
var css_248z$
|
|
1909
|
-
var styles$
|
|
1910
|
-
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);
|
|
1911
1935
|
|
|
1912
1936
|
const SpeedDialAction = (props) => {
|
|
1913
1937
|
const { icon, onClick, className } = props;
|
|
1914
1938
|
const getCssClasses = () => {
|
|
1915
1939
|
const cssClasses = [];
|
|
1916
|
-
cssClasses.push(styles$
|
|
1940
|
+
cssClasses.push(styles$a.speedDialAction);
|
|
1917
1941
|
className && cssClasses.push(className);
|
|
1918
1942
|
return cssClasses.filter(css => css).join(' ');
|
|
1919
1943
|
};
|
|
@@ -1930,15 +1954,15 @@ const SpeedDialIcon = (props) => {
|
|
|
1930
1954
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
1931
1955
|
};
|
|
1932
1956
|
|
|
1933
|
-
var css_248z$
|
|
1934
|
-
var styles$
|
|
1935
|
-
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);
|
|
1936
1960
|
|
|
1937
1961
|
const StepperActions = (props) => {
|
|
1938
1962
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
1939
1963
|
const getCssClasses = () => {
|
|
1940
1964
|
const cssClasses = [];
|
|
1941
|
-
cssClasses.push(styles$
|
|
1965
|
+
cssClasses.push(styles$9.stepperActions);
|
|
1942
1966
|
className && cssClasses.push(className);
|
|
1943
1967
|
return cssClasses.filter(css => css).join(' ');
|
|
1944
1968
|
};
|
|
@@ -1955,31 +1979,31 @@ const StepPanel = (props) => {
|
|
|
1955
1979
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
1956
1980
|
};
|
|
1957
1981
|
|
|
1958
|
-
var css_248z$
|
|
1959
|
-
var styles$
|
|
1960
|
-
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);
|
|
1961
1985
|
|
|
1962
1986
|
const StepConnector = (props) => {
|
|
1963
1987
|
const { isActive, isHorizontal = true } = props;
|
|
1964
1988
|
const getCssClassesConnector = () => {
|
|
1965
1989
|
const cssClasses = [];
|
|
1966
|
-
cssClasses.push(styles$
|
|
1990
|
+
cssClasses.push(styles$8.stepConnector);
|
|
1967
1991
|
return cssClasses.filter(css => css).join(' ');
|
|
1968
1992
|
};
|
|
1969
1993
|
const getCssClassesLine = () => {
|
|
1970
1994
|
const cssClasses = [];
|
|
1971
|
-
cssClasses.push(styles$
|
|
1972
|
-
isActive && cssClasses.push(styles$
|
|
1973
|
-
isHorizontal && cssClasses.push(styles$
|
|
1995
|
+
cssClasses.push(styles$8.stepConnectorLine);
|
|
1996
|
+
isActive && cssClasses.push(styles$8['isActive']);
|
|
1997
|
+
isHorizontal && cssClasses.push(styles$8.stepConnectorLineHorizontal);
|
|
1974
1998
|
return cssClasses.filter(css => css).join(' ');
|
|
1975
1999
|
};
|
|
1976
2000
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
1977
2001
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
1978
2002
|
};
|
|
1979
2003
|
|
|
1980
|
-
var css_248z$
|
|
1981
|
-
var styles$
|
|
1982
|
-
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);
|
|
1983
2007
|
|
|
1984
2008
|
const Stepper = (props) => {
|
|
1985
2009
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2067,8 +2091,8 @@ const Stepper = (props) => {
|
|
|
2067
2091
|
};
|
|
2068
2092
|
const getCssClasses = () => {
|
|
2069
2093
|
const cssClasses = [];
|
|
2070
|
-
cssClasses.push(styles$
|
|
2071
|
-
isHorizontal && cssClasses.push(styles$
|
|
2094
|
+
cssClasses.push(styles$7.stepper);
|
|
2095
|
+
isHorizontal && cssClasses.push(styles$7['isHorizontal']);
|
|
2072
2096
|
return cssClasses.filter(css => css).join(' ');
|
|
2073
2097
|
};
|
|
2074
2098
|
return (React.createElement(React.Fragment, null, steps &&
|
|
@@ -2137,9 +2161,9 @@ function useDebounce(callback, timeout, deps) {
|
|
|
2137
2161
|
}, deps);
|
|
2138
2162
|
}
|
|
2139
2163
|
|
|
2140
|
-
var css_248z$
|
|
2141
|
-
var styles$
|
|
2142
|
-
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);
|
|
2143
2167
|
|
|
2144
2168
|
const Step = (props) => {
|
|
2145
2169
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2151,24 +2175,24 @@ const Step = (props) => {
|
|
|
2151
2175
|
};
|
|
2152
2176
|
const getCssClasses = () => {
|
|
2153
2177
|
const cssClasses = [];
|
|
2154
|
-
cssClasses.push(styles$
|
|
2155
|
-
label && showLabel && cssClasses.push(styles$
|
|
2156
|
-
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']);
|
|
2157
2181
|
className && cssClasses.push(className);
|
|
2158
2182
|
return cssClasses.filter(css => css).join(' ');
|
|
2159
2183
|
};
|
|
2160
2184
|
const getCssClassesStep = () => {
|
|
2161
2185
|
const cssClasses = [];
|
|
2162
|
-
cssClasses.push(styles$
|
|
2163
|
-
label && showLabel && cssClasses.push(styles$
|
|
2164
|
-
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']);
|
|
2165
2189
|
return cssClasses.filter(css => css).join(' ');
|
|
2166
2190
|
};
|
|
2167
2191
|
return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2168
2192
|
React.createElement("div", { className: getCssClassesStep() },
|
|
2169
|
-
React.createElement(Icon, { className: styles$
|
|
2193
|
+
React.createElement(Icon, { className: styles$6.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
|
|
2170
2194
|
React.createElement(CircleSolidIcon, null)),
|
|
2171
|
-
React.createElement("div", { className: styles$
|
|
2195
|
+
React.createElement("div", { className: styles$6.stepValue + ' ' + (isActive ? (styles$6.stepValue['isActive']) : '') }, showProgressCheckIcon && isActive && isDone ?
|
|
2172
2196
|
React.createElement(Icon, null,
|
|
2173
2197
|
React.createElement(CheckSolidIcon, null))
|
|
2174
2198
|
:
|
|
@@ -2192,16 +2216,16 @@ const Table = (props) => {
|
|
|
2192
2216
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2193
2217
|
};
|
|
2194
2218
|
|
|
2195
|
-
var css_248z$
|
|
2196
|
-
var styles$
|
|
2197
|
-
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);
|
|
2198
2222
|
|
|
2199
2223
|
const TabIndicator = (props) => {
|
|
2200
2224
|
const { color = COLOR.accent, width, amount, index } = props;
|
|
2201
2225
|
const getCssClasses = () => {
|
|
2202
2226
|
const cssClasses = [];
|
|
2203
|
-
cssClasses.push(styles$
|
|
2204
|
-
cssClasses.push(styles$
|
|
2227
|
+
cssClasses.push(styles$5.tabIndicator);
|
|
2228
|
+
cssClasses.push(styles$5[color]);
|
|
2205
2229
|
return cssClasses.filter(css => css).join(' ');
|
|
2206
2230
|
};
|
|
2207
2231
|
return (React.createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2210,9 +2234,9 @@ const TabIndicator = (props) => {
|
|
|
2210
2234
|
} }));
|
|
2211
2235
|
};
|
|
2212
2236
|
|
|
2213
|
-
var css_248z$
|
|
2214
|
-
var styles$
|
|
2215
|
-
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);
|
|
2216
2240
|
|
|
2217
2241
|
const Tabs = (props) => {
|
|
2218
2242
|
const { children, className, fixed, indicatorColor, onChange, value } = props;
|
|
@@ -2227,7 +2251,7 @@ const Tabs = (props) => {
|
|
|
2227
2251
|
}, [children, value]);
|
|
2228
2252
|
const getCssClasses = () => {
|
|
2229
2253
|
const cssClasses = [];
|
|
2230
|
-
cssClasses.push(styles$
|
|
2254
|
+
cssClasses.push(styles$4.tabs);
|
|
2231
2255
|
className && cssClasses.push(className);
|
|
2232
2256
|
return cssClasses.filter(css => css).join(' ');
|
|
2233
2257
|
};
|
|
@@ -2251,15 +2275,15 @@ const Tabs = (props) => {
|
|
|
2251
2275
|
React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
|
|
2252
2276
|
};
|
|
2253
2277
|
|
|
2254
|
-
var css_248z$
|
|
2255
|
-
var styles$
|
|
2256
|
-
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);
|
|
2257
2281
|
|
|
2258
2282
|
const Tab = (props) => {
|
|
2259
2283
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2260
2284
|
const getCssClasses = () => {
|
|
2261
2285
|
const cssClasses = [];
|
|
2262
|
-
cssClasses.push(styles$
|
|
2286
|
+
cssClasses.push(styles$3.tab);
|
|
2263
2287
|
if (isActive) {
|
|
2264
2288
|
cssClasses.push(`show active`);
|
|
2265
2289
|
}
|
|
@@ -2274,9 +2298,9 @@ const TabPanel = (props) => {
|
|
|
2274
2298
|
return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2275
2299
|
};
|
|
2276
2300
|
|
|
2277
|
-
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}";
|
|
2278
|
-
var styles = {"tooltipContainer":"Tooltip-module_tooltipContainer__3SPVX","tooltip":"Tooltip-module_tooltip__1AML3","arrow":"Tooltip-module_arrow__2c3YL"};
|
|
2279
|
-
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);
|
|
2280
2304
|
|
|
2281
2305
|
const Tooltip = (props) => {
|
|
2282
2306
|
const { children, text, placement = 'bottom' } = props;
|
|
@@ -2304,12 +2328,12 @@ const Tooltip = (props) => {
|
|
|
2304
2328
|
setShow(false);
|
|
2305
2329
|
};
|
|
2306
2330
|
return (React.createElement(Fragment, null,
|
|
2307
|
-
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, {
|
|
2308
2332
|
onMouseOver: handleMouseOver,
|
|
2309
2333
|
onMouseLeave: handleMouseLeave,
|
|
2310
2334
|
})),
|
|
2311
2335
|
show &&
|
|
2312
|
-
React.createElement("div", { className: styles.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2336
|
+
React.createElement("div", { className: styles$2.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2313
2337
|
text,
|
|
2314
2338
|
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2315
2339
|
};
|
|
@@ -2453,88 +2477,59 @@ const TimeSelect = (props) => {
|
|
|
2453
2477
|
React.createElement(MilliSecondSelect, { className: "form-control", value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MILLISECONDS) }))));
|
|
2454
2478
|
};
|
|
2455
2479
|
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
hasChildren &&
|
|
2460
|
-
React.createElement(IconButton, { onClick: () => onToggleExpand(id), icon: !isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
|
|
2461
|
-
React.createElement(Checkbox, { checked: isSelected, onChange: () => onClickSelect(id) }),
|
|
2462
|
-
label));
|
|
2463
|
-
};
|
|
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);
|
|
2464
2483
|
|
|
2465
2484
|
const TreeView = (props) => {
|
|
2466
|
-
const {
|
|
2467
|
-
const
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
result = arr1.reduce((acc, val) => {
|
|
2473
|
-
return (Array.isArray(val.children) ?
|
|
2474
|
-
acc.concat([
|
|
2475
|
-
{ id: val.id, label: val.label, level: level, hasChildren: true, parentId: parentId },
|
|
2476
|
-
...flattenDeep(val.children, val.id, level + 1)
|
|
2477
|
-
]) :
|
|
2478
|
-
acc.concat([{ id: val.id, label: val.label, level: level, hasChildren: false, parentId: parentId }]));
|
|
2479
|
-
}, []);
|
|
2480
|
-
return result;
|
|
2481
|
-
};
|
|
2482
|
-
useEffect(() => {
|
|
2483
|
-
setFlattenData(flattenDeep(data));
|
|
2484
|
-
}, [data]);
|
|
2485
|
-
const handleOnToggleExpand = (item) => {
|
|
2486
|
-
if (item.hasChildren) {
|
|
2487
|
-
let newExpandedItems = [...expandedItems];
|
|
2488
|
-
if (isExpanded(item.id)) {
|
|
2489
|
-
newExpandedItems = collapseRecursive(item, [...expandedItems]);
|
|
2490
|
-
onCollapse && onCollapse(item.id);
|
|
2491
|
-
}
|
|
2492
|
-
else {
|
|
2493
|
-
newExpandedItems.push(item);
|
|
2494
|
-
onExpand && onExpand(item.id);
|
|
2495
|
-
}
|
|
2496
|
-
setExpandedItems(newExpandedItems);
|
|
2497
|
-
}
|
|
2498
|
-
};
|
|
2499
|
-
const collapseRecursive = (item, expandedItems) => {
|
|
2500
|
-
let expandedItemIds = expandedItems.map(i => i.id);
|
|
2501
|
-
if (expandedItemIds.indexOf(item.id) >= 0) {
|
|
2502
|
-
expandedItems = expandedItems.filter(i => i.id !== item.id);
|
|
2503
|
-
}
|
|
2504
|
-
if (item.hasChildren) {
|
|
2505
|
-
let children = expandedItems.filter(child => child.parentId === item.id);
|
|
2506
|
-
for (let child of children) {
|
|
2507
|
-
expandedItems = collapseRecursive(child, expandedItems);
|
|
2508
|
-
}
|
|
2509
|
-
}
|
|
2510
|
-
return expandedItems;
|
|
2511
|
-
};
|
|
2512
|
-
const isExpanded = (id) => {
|
|
2513
|
-
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(' ');
|
|
2514
2491
|
};
|
|
2515
|
-
|
|
2516
|
-
|
|
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}";
|
|
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, 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(' ');
|
|
2517
2508
|
};
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
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);
|
|
2529
2520
|
};
|
|
2530
|
-
const
|
|
2531
|
-
|
|
2521
|
+
const handleOnSelect = (nodeId) => {
|
|
2522
|
+
setIsSelected(!_isSelected);
|
|
2523
|
+
onSelect && onSelect(nodeId, !_isSelected);
|
|
2532
2524
|
};
|
|
2533
|
-
return (React.createElement("
|
|
2534
|
-
|
|
2535
|
-
|
|
2536
|
-
|
|
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
|
+
React.createElement(Checkbox, { checked: _isSelected, onChange: () => handleOnSelect(nodeId) }),
|
|
2530
|
+
label),
|
|
2531
|
+
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2537
2532
|
};
|
|
2538
2533
|
|
|
2539
|
-
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 };
|
|
2534
|
+
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 };
|
|
2540
2535
|
//# sourceMappingURL=index.es.js.map
|