react-asc 18.3.5 → 18.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Menu/Menu.d.ts +2 -0
- package/components/Menu/MenuBody.d.ts +1 -0
- package/components/Modal/GlobalModal.d.ts +3 -1
- package/components/Modal/Modal.d.ts +3 -2
- package/components/Modal/modal.service.d.ts +2 -0
- package/components/TreeView/TreeNode.d.ts +1 -1
- package/components/TreeView/TreeView.d.ts +9 -2
- package/index.es.js +173 -185
- package/index.es.js.map +1 -1
- package/index.js +172 -184
- package/index.js.map +1 -1
- package/package.json +1 -1
package/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useRef, useEffect, Fragment, Component, createRef,
|
|
1
|
+
import React, { useState, useRef, useEffect, Fragment, Component, createRef, cloneElement } from 'react';
|
|
2
2
|
import { createPortal, render, unmountComponentAtNode } from 'react-dom';
|
|
3
3
|
import { createPopper } from '@popperjs/core';
|
|
4
4
|
|
|
@@ -87,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$Q = ".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$Q = {"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$Q);
|
|
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$Q.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$Q.contained);
|
|
101
|
+
cssClasses.push(styles$Q[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$Q.outline);
|
|
105
|
+
cssClasses.push(styles$Q[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$Q['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$P = ".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$P = {"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$P);
|
|
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$P[color]);
|
|
123
|
+
cssClasses.push(styles$P.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$P['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$O = ".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$O = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
|
|
133
|
+
styleInject(css_248z$O);
|
|
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$O.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$N = ".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$N = {"list":"List-module_list__1ax9w"};
|
|
169
|
+
styleInject(css_248z$N);
|
|
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$N.flush);
|
|
177
177
|
}
|
|
178
|
-
cssClasses.push(styles$
|
|
178
|
+
cssClasses.push(styles$N.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$M = ".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$M = {"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$M);
|
|
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$M['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$M[color]);
|
|
200
|
+
cssClasses.push(styles$M.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$
|
|
210
|
+
var css_248z$L = ".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$L = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
|
|
212
|
+
styleInject(css_248z$L);
|
|
213
|
+
|
|
214
|
+
const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$L.avatar }, avatar));
|
|
215
|
+
|
|
216
|
+
var css_248z$K = ".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$K = {"icon":"ListItemIcon-module_icon__-nsUy"};
|
|
212
218
|
styleInject(css_248z$K);
|
|
213
219
|
|
|
214
|
-
const
|
|
220
|
+
const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$K.icon }, icon));
|
|
215
221
|
|
|
216
|
-
var css_248z$J = ".
|
|
217
|
-
var styles$J = {"
|
|
222
|
+
var css_248z$J = ".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$J = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
|
|
218
224
|
styleInject(css_248z$J);
|
|
219
225
|
|
|
220
|
-
const
|
|
226
|
+
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$J.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
221
227
|
|
|
222
|
-
var css_248z$I = ".
|
|
223
|
-
var styles$I = {"
|
|
228
|
+
var css_248z$I = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1;\n}";
|
|
229
|
+
var styles$I = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
224
230
|
styleInject(css_248z$I);
|
|
225
231
|
|
|
226
|
-
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$I.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
227
|
-
|
|
228
|
-
var css_248z$H = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1; }\n";
|
|
229
|
-
var styles$H = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
230
|
-
styleInject(css_248z$H);
|
|
231
|
-
|
|
232
232
|
const ListItemText = ({ primary, secondary }) => {
|
|
233
233
|
const getCssClasses = () => {
|
|
234
234
|
const cssClasses = [];
|
|
235
|
-
cssClasses.push(styles$
|
|
235
|
+
cssClasses.push(styles$I.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$H = ".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$H = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
|
|
248
|
+
styleInject(css_248z$H);
|
|
249
249
|
|
|
250
250
|
// preset value
|
|
251
251
|
// enter -> delay? -> show results
|
|
@@ -271,7 +271,7 @@ const AutoComplete = (props) => {
|
|
|
271
271
|
const getCssClass = () => {
|
|
272
272
|
const cssClasses = [];
|
|
273
273
|
className && cssClasses.push(className);
|
|
274
|
-
cssClasses.push(styles$
|
|
274
|
+
cssClasses.push(styles$H.select);
|
|
275
275
|
return cssClasses.filter(r => r).join(' ');
|
|
276
276
|
};
|
|
277
277
|
const show = () => setIsShow(true);
|
|
@@ -296,32 +296,32 @@ const AutoComplete = (props) => {
|
|
|
296
296
|
openOnFocus && show();
|
|
297
297
|
};
|
|
298
298
|
return (React.createElement(React.Fragment, null,
|
|
299
|
-
React.createElement("div", { ref: selectConainter, className: styles$
|
|
299
|
+
React.createElement("div", { ref: selectConainter, className: styles$H.selectContainer },
|
|
300
300
|
React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, value: model }),
|
|
301
301
|
isShow &&
|
|
302
302
|
React.createElement(React.Fragment, null,
|
|
303
|
-
React.createElement("div", { className: styles$
|
|
303
|
+
React.createElement("div", { className: styles$H.selectMenu },
|
|
304
304
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option) },
|
|
305
305
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
306
306
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
307
307
|
};
|
|
308
308
|
|
|
309
|
-
var css_248z$
|
|
310
|
-
var styles$
|
|
311
|
-
styleInject(css_248z$
|
|
309
|
+
var css_248z$G = ".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}";
|
|
310
|
+
var styles$G = {"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_"};
|
|
311
|
+
styleInject(css_248z$G);
|
|
312
312
|
|
|
313
313
|
const Badge = (props) => {
|
|
314
314
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
315
315
|
const getCssClassesBadgeContainer = () => {
|
|
316
316
|
const cssClasses = [];
|
|
317
|
-
cssClasses.push(styles$
|
|
317
|
+
cssClasses.push(styles$G.badgeContainer);
|
|
318
318
|
className && cssClasses.push(className);
|
|
319
319
|
return cssClasses.filter(css => css).join(' ');
|
|
320
320
|
};
|
|
321
321
|
const getCssClassesBadge = () => {
|
|
322
322
|
const cssClasses = [];
|
|
323
|
-
cssClasses.push(styles$
|
|
324
|
-
cssClasses.push(styles$
|
|
323
|
+
cssClasses.push(styles$G.badge);
|
|
324
|
+
cssClasses.push(styles$G[color]);
|
|
325
325
|
return cssClasses.filter(css => css).join(' ');
|
|
326
326
|
};
|
|
327
327
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -329,43 +329,43 @@ const Badge = (props) => {
|
|
|
329
329
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
330
330
|
};
|
|
331
331
|
|
|
332
|
-
var css_248z$
|
|
333
|
-
var styles$
|
|
334
|
-
styleInject(css_248z$
|
|
332
|
+
var css_248z$F = ".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}";
|
|
333
|
+
var styles$F = {"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"};
|
|
334
|
+
styleInject(css_248z$F);
|
|
335
335
|
|
|
336
336
|
const Icon = (props) => {
|
|
337
337
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
338
338
|
const getCssClasses = () => {
|
|
339
339
|
const cssClasses = [];
|
|
340
|
-
cssClasses.push(styles$
|
|
341
|
-
iconColor && cssClasses.push(styles$
|
|
340
|
+
cssClasses.push(styles$F.icon);
|
|
341
|
+
iconColor && cssClasses.push(styles$F[iconColor]);
|
|
342
342
|
className && cssClasses.push(className);
|
|
343
343
|
return cssClasses.filter(css => css).join(' ');
|
|
344
344
|
};
|
|
345
345
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
346
346
|
};
|
|
347
347
|
|
|
348
|
-
var css_248z$
|
|
349
|
-
var styles$
|
|
350
|
-
styleInject(css_248z$
|
|
348
|
+
var css_248z$E = ".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}";
|
|
349
|
+
var styles$E = {"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"};
|
|
350
|
+
styleInject(css_248z$E);
|
|
351
351
|
|
|
352
352
|
const ButtonTemplate = (props) => {
|
|
353
353
|
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"]);
|
|
354
354
|
const getCssClasses = () => {
|
|
355
355
|
const cssClasses = [];
|
|
356
356
|
cssClasses.push(`btn`);
|
|
357
|
-
cssClasses.push(styles$
|
|
357
|
+
cssClasses.push(styles$E.button);
|
|
358
358
|
if (variant !== 'outline' && variant !== 'text') {
|
|
359
|
-
cssClasses.push(styles$
|
|
360
|
-
cssClasses.push(styles$
|
|
359
|
+
cssClasses.push(styles$E.btnContained);
|
|
360
|
+
cssClasses.push(styles$E[color]);
|
|
361
361
|
}
|
|
362
362
|
if (variant === 'outline') {
|
|
363
|
-
cssClasses.push(styles$
|
|
364
|
-
cssClasses.push(styles$
|
|
363
|
+
cssClasses.push(styles$E.btnOutline);
|
|
364
|
+
cssClasses.push(styles$E[color]);
|
|
365
365
|
}
|
|
366
366
|
if (variant === 'text') {
|
|
367
|
-
cssClasses.push(styles$
|
|
368
|
-
cssClasses.push(styles$
|
|
367
|
+
cssClasses.push(styles$E.btnText);
|
|
368
|
+
cssClasses.push(styles$E[color]);
|
|
369
369
|
}
|
|
370
370
|
if (isRounded && variant !== 'text') {
|
|
371
371
|
cssClasses.push(`rounded-pill`);
|
|
@@ -379,10 +379,10 @@ const ButtonTemplate = (props) => {
|
|
|
379
379
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
380
380
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
381
381
|
startIcon &&
|
|
382
|
-
React.createElement(Icon, { className: styles$
|
|
382
|
+
React.createElement(Icon, { className: styles$E.startIcon }, startIcon),
|
|
383
383
|
children,
|
|
384
384
|
endIcon &&
|
|
385
|
-
React.createElement(Icon, { className: styles$
|
|
385
|
+
React.createElement(Icon, { className: styles$E.endIcon }, endIcon))));
|
|
386
386
|
};
|
|
387
387
|
|
|
388
388
|
const Button = (props) => {
|
|
@@ -400,15 +400,15 @@ const ButtonGroup = (props) => {
|
|
|
400
400
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
401
401
|
};
|
|
402
402
|
|
|
403
|
-
var css_248z$
|
|
404
|
-
var styles$
|
|
405
|
-
styleInject(css_248z$
|
|
403
|
+
var css_248z$D = ".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}";
|
|
404
|
+
var styles$D = {"breadcrumb":"Breadcrumb-module_breadcrumb__2BHXS"};
|
|
405
|
+
styleInject(css_248z$D);
|
|
406
406
|
|
|
407
407
|
const Breadcrumb = (props) => {
|
|
408
408
|
const { children, className } = props;
|
|
409
409
|
const getCssClasses = () => {
|
|
410
410
|
const cssClasses = [];
|
|
411
|
-
cssClasses.push(styles$
|
|
411
|
+
cssClasses.push(styles$D.breadcrumb);
|
|
412
412
|
className && cssClasses.push(className);
|
|
413
413
|
return cssClasses.filter(css => css).join(' ');
|
|
414
414
|
};
|
|
@@ -418,15 +418,15 @@ const Breadcrumb = (props) => {
|
|
|
418
418
|
|
|
419
419
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
420
420
|
|
|
421
|
-
var css_248z$
|
|
422
|
-
var styles$
|
|
423
|
-
styleInject(css_248z$
|
|
421
|
+
var css_248z$C = ".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}";
|
|
422
|
+
var styles$C = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__1yy-D","active":"BreadcrumbItem-module_active__3iVU2"};
|
|
423
|
+
styleInject(css_248z$C);
|
|
424
424
|
|
|
425
425
|
const BreadcrumbItem = (props) => {
|
|
426
426
|
const { children, className, isActive, onClick } = props;
|
|
427
427
|
const getCssClasses = () => {
|
|
428
428
|
const cssClasses = [];
|
|
429
|
-
cssClasses.push(styles$
|
|
429
|
+
cssClasses.push(styles$C.breadcrumbItem);
|
|
430
430
|
className && cssClasses.push(className);
|
|
431
431
|
isActive && cssClasses.push('active');
|
|
432
432
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -440,106 +440,106 @@ const BreadcrumbItem = (props) => {
|
|
|
440
440
|
wrapper: label => React.createElement("a", null, label) }, children)));
|
|
441
441
|
};
|
|
442
442
|
|
|
443
|
-
var css_248z$
|
|
444
|
-
var styles$
|
|
445
|
-
styleInject(css_248z$
|
|
443
|
+
var css_248z$B = ".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}";
|
|
444
|
+
var styles$B = {"card":"Card-module_card__31o3Z","shadow":"Card-module_shadow__2lpYq"};
|
|
445
|
+
styleInject(css_248z$B);
|
|
446
446
|
|
|
447
447
|
const Card = (props) => {
|
|
448
448
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
449
449
|
const getCssClasses = () => {
|
|
450
450
|
const cssClasses = [];
|
|
451
|
-
cssClasses.push(styles$
|
|
452
|
-
shadow && cssClasses.push(styles$
|
|
451
|
+
cssClasses.push(styles$B.card);
|
|
452
|
+
shadow && cssClasses.push(styles$B.shadow);
|
|
453
453
|
className && cssClasses.push(className);
|
|
454
454
|
return cssClasses.filter(css => css).join(' ');
|
|
455
455
|
};
|
|
456
456
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
457
457
|
};
|
|
458
458
|
|
|
459
|
-
var css_248z$
|
|
460
|
-
var styles$
|
|
461
|
-
styleInject(css_248z$
|
|
459
|
+
var css_248z$A = ".CardBody-module_cardBody__N8z-L {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
460
|
+
var styles$A = {"cardBody":"CardBody-module_cardBody__N8z-L"};
|
|
461
|
+
styleInject(css_248z$A);
|
|
462
462
|
|
|
463
463
|
const CardBody = (props) => {
|
|
464
464
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
465
465
|
const getCssClasses = () => {
|
|
466
466
|
const cssClasses = [];
|
|
467
|
-
cssClasses.push(styles$
|
|
467
|
+
cssClasses.push(styles$A.cardBody);
|
|
468
468
|
className && cssClasses.push(className);
|
|
469
469
|
return cssClasses.filter(css => css).join(' ');
|
|
470
470
|
};
|
|
471
471
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
472
472
|
};
|
|
473
473
|
|
|
474
|
-
var css_248z$
|
|
475
|
-
var styles$
|
|
476
|
-
styleInject(css_248z$
|
|
474
|
+
var css_248z$z = ".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}";
|
|
475
|
+
var styles$z = {"cardFooter":"CardFooter-module_cardFooter__3dYKa"};
|
|
476
|
+
styleInject(css_248z$z);
|
|
477
477
|
|
|
478
478
|
const CardFooter = (props) => {
|
|
479
479
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
480
480
|
const getCssClasses = () => {
|
|
481
481
|
const cssClasses = [];
|
|
482
|
-
cssClasses.push(styles$
|
|
482
|
+
cssClasses.push(styles$z.cardFooter);
|
|
483
483
|
className && cssClasses.push(className);
|
|
484
484
|
return cssClasses.filter(css => css).join(' ');
|
|
485
485
|
};
|
|
486
486
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
487
487
|
};
|
|
488
488
|
|
|
489
|
-
var css_248z$
|
|
490
|
-
var styles$
|
|
491
|
-
styleInject(css_248z$
|
|
489
|
+
var css_248z$y = ".CardSubtitle-module_cardSubtitle__2WWHW {\n color: #6c757d !important;\n}";
|
|
490
|
+
var styles$y = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__2WWHW"};
|
|
491
|
+
styleInject(css_248z$y);
|
|
492
492
|
|
|
493
493
|
const CardSubtitle = (props) => {
|
|
494
494
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
495
495
|
const getCssClasses = () => {
|
|
496
496
|
const cssClasses = [];
|
|
497
|
-
cssClasses.push(styles$
|
|
497
|
+
cssClasses.push(styles$y.cardSubtitle);
|
|
498
498
|
className && cssClasses.push(className);
|
|
499
499
|
return cssClasses.filter(css => css).join(' ');
|
|
500
500
|
};
|
|
501
501
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
502
502
|
};
|
|
503
503
|
|
|
504
|
-
var css_248z$
|
|
505
|
-
var styles$
|
|
506
|
-
styleInject(css_248z$
|
|
504
|
+
var css_248z$x = ".CardText-module_cardText__1LWJi:last-child {\n margin-bottom: 0;\n}";
|
|
505
|
+
var styles$x = {"cardText":"CardText-module_cardText__1LWJi"};
|
|
506
|
+
styleInject(css_248z$x);
|
|
507
507
|
|
|
508
508
|
const CardText = (props) => {
|
|
509
509
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
510
510
|
const getCssClasses = () => {
|
|
511
511
|
const cssClasses = [];
|
|
512
|
-
cssClasses.push(styles$
|
|
512
|
+
cssClasses.push(styles$x.cardText);
|
|
513
513
|
className && cssClasses.push(className);
|
|
514
514
|
return cssClasses.filter(css => css).join(' ');
|
|
515
515
|
};
|
|
516
516
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
|
|
517
517
|
};
|
|
518
518
|
|
|
519
|
-
var css_248z$
|
|
520
|
-
var styles$
|
|
521
|
-
styleInject(css_248z$
|
|
519
|
+
var css_248z$w = ".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}";
|
|
520
|
+
var styles$w = {"cardTitle":"CardTitle-module_cardTitle__24Amb"};
|
|
521
|
+
styleInject(css_248z$w);
|
|
522
522
|
|
|
523
523
|
const CardTitle = (props) => {
|
|
524
524
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
525
525
|
const getCssClasses = () => {
|
|
526
526
|
const cssClasses = [];
|
|
527
|
-
cssClasses.push(styles$
|
|
527
|
+
cssClasses.push(styles$w.cardTitle);
|
|
528
528
|
className && cssClasses.push(className);
|
|
529
529
|
return cssClasses.filter(css => css).join(' ');
|
|
530
530
|
};
|
|
531
531
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
532
532
|
};
|
|
533
533
|
|
|
534
|
-
var css_248z$
|
|
535
|
-
var styles$
|
|
536
|
-
styleInject(css_248z$
|
|
534
|
+
var css_248z$v = ".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}";
|
|
535
|
+
var styles$v = {"cardImage":"CardImage-module_cardImage__1tZM4"};
|
|
536
|
+
styleInject(css_248z$v);
|
|
537
537
|
|
|
538
538
|
const CardImage = (props) => {
|
|
539
539
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
540
540
|
const getCssClasses = () => {
|
|
541
541
|
const cssClasses = [];
|
|
542
|
-
cssClasses.push(styles$
|
|
542
|
+
cssClasses.push(styles$v.cardImage);
|
|
543
543
|
className && cssClasses.push(className);
|
|
544
544
|
return cssClasses.filter(css => css).join(' ');
|
|
545
545
|
};
|
|
@@ -588,11 +588,15 @@ const CircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true
|
|
|
588
588
|
const ChevronLeftSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
|
|
589
589
|
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" })));
|
|
590
590
|
|
|
591
|
+
var css_248z$u = ".Typography-module_typography__2bM6E {\n text-overflow: ellipsis;\n overflow: hidden !important;\n}";
|
|
592
|
+
var styles$u = {"typography":"Typography-module_typography__2bM6E"};
|
|
593
|
+
styleInject(css_248z$u);
|
|
594
|
+
|
|
591
595
|
const Wrapper = (props) => {
|
|
592
596
|
const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
|
|
593
597
|
const getCssClasses = () => {
|
|
594
598
|
const cssClasses = [];
|
|
595
|
-
cssClasses.push(
|
|
599
|
+
cssClasses.push(styles$u.typography);
|
|
596
600
|
className && cssClasses.push(className);
|
|
597
601
|
return cssClasses.filter(css => css).join(' ');
|
|
598
602
|
};
|
|
@@ -603,7 +607,7 @@ const Typography = (_a) => {
|
|
|
603
607
|
return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
|
|
604
608
|
};
|
|
605
609
|
|
|
606
|
-
var css_248z$t = ".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
|
|
610
|
+
var css_248z$t = ".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}";
|
|
607
611
|
var styles$t = {"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"};
|
|
608
612
|
styleInject(css_248z$t);
|
|
609
613
|
|
|
@@ -626,7 +630,7 @@ const IconButton = (props) => {
|
|
|
626
630
|
label && React.createElement(Typography, null, label)));
|
|
627
631
|
};
|
|
628
632
|
|
|
629
|
-
var css_248z$s = ".Checkbox-module_checkboxContainer__2oWhu {\n display: flex;\n align-items: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
|
|
633
|
+
var css_248z$s = ".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}";
|
|
630
634
|
var styles$s = {"checkboxContainer":"Checkbox-module_checkboxContainer__2oWhu","checkboxLabel":"Checkbox-module_checkboxLabel__27Y6U","disabled":"Checkbox-module_disabled__3EXUd"};
|
|
631
635
|
styleInject(css_248z$s);
|
|
632
636
|
|
|
@@ -669,7 +673,7 @@ const Checkbox = (props) => {
|
|
|
669
673
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
670
674
|
};
|
|
671
675
|
|
|
672
|
-
var css_248z$r = ".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
|
|
676
|
+
var css_248z$r = ".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}";
|
|
673
677
|
var styles$r = {"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"};
|
|
674
678
|
styleInject(css_248z$r);
|
|
675
679
|
|
|
@@ -726,7 +730,7 @@ const FileInput = (props) => {
|
|
|
726
730
|
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))));
|
|
727
731
|
};
|
|
728
732
|
|
|
729
|
-
var css_248z$q = ".Select-module_selectContainer__2oizY {\n position: relative
|
|
733
|
+
var css_248z$q = ".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}";
|
|
730
734
|
var styles$q = {"selectContainer":"Select-module_selectContainer__2oizY","select":"Select-module_select__MSqgU","selectMenu":"Select-module_selectMenu__2vhJt"};
|
|
731
735
|
styleInject(css_248z$q);
|
|
732
736
|
|
|
@@ -876,7 +880,7 @@ const Select = (props) => {
|
|
|
876
880
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
|
|
877
881
|
};
|
|
878
882
|
|
|
879
|
-
var css_248z$p = "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
|
|
883
|
+
var css_248z$p = "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}";
|
|
880
884
|
var styles$p = {};
|
|
881
885
|
styleInject(css_248z$p);
|
|
882
886
|
|
|
@@ -1240,7 +1244,7 @@ const DateSelect = (props) => {
|
|
|
1240
1244
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1241
1245
|
// };
|
|
1242
1246
|
|
|
1243
|
-
var css_248z$o = ".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
|
|
1247
|
+
var css_248z$o = ".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}";
|
|
1244
1248
|
var styles$o = {"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"};
|
|
1245
1249
|
styleInject(css_248z$o);
|
|
1246
1250
|
|
|
@@ -1279,19 +1283,13 @@ const DrawerContent = (props) => {
|
|
|
1279
1283
|
return (React.createElement("div", { className: getCssClasses(), style: getStyles() }, children));
|
|
1280
1284
|
};
|
|
1281
1285
|
|
|
1282
|
-
|
|
1283
|
-
isShow: false,
|
|
1284
|
-
setIsShow: () => { }
|
|
1285
|
-
});
|
|
1286
|
-
|
|
1287
|
-
var css_248z$n = ".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 .MenuBody-module_menuBody__3cPsp.MenuBody-module_shadow__AF_9C {\n box-shadow: var(--shadow); }\n";
|
|
1286
|
+
var css_248z$n = ".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}";
|
|
1288
1287
|
var styles$n = {"menuBody":"MenuBody-module_menuBody__3cPsp","shadow":"MenuBody-module_shadow__AF_9C"};
|
|
1289
1288
|
styleInject(css_248z$n);
|
|
1290
1289
|
|
|
1291
1290
|
const MenuBody = (props) => {
|
|
1292
|
-
const { parentRef, children, className, shadow = true, menuPosition = 'left' } = props;
|
|
1291
|
+
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
1293
1292
|
const menuBodyRef = useRef(null);
|
|
1294
|
-
const { setIsShow } = useContext(MenuContext);
|
|
1295
1293
|
useEffect(() => {
|
|
1296
1294
|
if (menuBodyRef) {
|
|
1297
1295
|
createPopper(parentRef.current, menuBodyRef.current, {
|
|
@@ -1322,27 +1320,20 @@ const MenuBody = (props) => {
|
|
|
1322
1320
|
className && cssClasses.push(className);
|
|
1323
1321
|
return cssClasses.filter(css => css).join(' ');
|
|
1324
1322
|
};
|
|
1325
|
-
const
|
|
1326
|
-
|
|
1323
|
+
const handleClickBackdrop = () => {
|
|
1324
|
+
onClickBackdrop && onClickBackdrop();
|
|
1327
1325
|
};
|
|
1328
1326
|
return (createPortal(React.createElement(React.Fragment, null,
|
|
1329
|
-
React.createElement("div", { ref: menuBodyRef, className: getCssClasses() }, children
|
|
1330
|
-
|
|
1331
|
-
onClick: (e) => {
|
|
1332
|
-
child.props.onClick && child.props.onClick(e);
|
|
1333
|
-
child.props.type !== 'header' && handleClickItem();
|
|
1334
|
-
}
|
|
1335
|
-
})))),
|
|
1336
|
-
React.createElement(Backdrop, { isTransparent: true, onClick: () => setIsShow(false) })), document.body));
|
|
1327
|
+
React.createElement("div", { ref: menuBodyRef, className: getCssClasses() }, children),
|
|
1328
|
+
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1337
1329
|
};
|
|
1338
1330
|
|
|
1339
|
-
var css_248z$m = ".Menu-module_menu__23BYG {\n display: flex
|
|
1331
|
+
var css_248z$m = ".Menu-module_menu__23BYG {\n display: flex;\n}";
|
|
1340
1332
|
var styles$m = {"menu":"Menu-module_menu__23BYG"};
|
|
1341
1333
|
styleInject(css_248z$m);
|
|
1342
1334
|
|
|
1343
1335
|
const Menu = (props) => {
|
|
1344
|
-
const { toggle, children, className, menuPosition, onToggleClick } = props, rest = __rest(props, ["toggle", "children", "className", "menuPosition", "onToggleClick"]);
|
|
1345
|
-
const [isShow, setIsShow] = useState(false);
|
|
1336
|
+
const { toggle, children, className, open, menuPosition, onClickBackdrop, onToggleClick } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop", "onToggleClick"]);
|
|
1346
1337
|
const menuContainer = useRef(null);
|
|
1347
1338
|
const toggleContainerRef = useRef(null);
|
|
1348
1339
|
const getCssClasses = () => {
|
|
@@ -1351,23 +1342,16 @@ const Menu = (props) => {
|
|
|
1351
1342
|
className && cssClasses.push(className);
|
|
1352
1343
|
return cssClasses.filter(css => css).join(' ');
|
|
1353
1344
|
};
|
|
1354
|
-
const
|
|
1355
|
-
|
|
1356
|
-
setIsShow: setIsShow
|
|
1357
|
-
};
|
|
1358
|
-
const handleClickToggle = (e) => {
|
|
1359
|
-
e.stopPropagation();
|
|
1360
|
-
setIsShow(!isShow);
|
|
1361
|
-
onToggleClick && onToggleClick(e);
|
|
1345
|
+
const handleClickBackdrop = () => {
|
|
1346
|
+
onClickBackdrop && onClickBackdrop();
|
|
1362
1347
|
};
|
|
1363
|
-
return (React.createElement(
|
|
1364
|
-
React.createElement("div",
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition }, children))));
|
|
1348
|
+
return (React.createElement("div", Object.assign({ ref: menuContainer, className: getCssClasses() }, rest),
|
|
1349
|
+
React.createElement("div", { ref: toggleContainerRef }, toggle),
|
|
1350
|
+
open &&
|
|
1351
|
+
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1368
1352
|
};
|
|
1369
1353
|
|
|
1370
|
-
var css_248z$l = ".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
|
|
1354
|
+
var css_248z$l = ".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}";
|
|
1371
1355
|
var styles$l = {"menuItem":"MenuItem-module_menuItem__kvauR","menuItemHeader":"MenuItem-module_menuItemHeader__mp7wc"};
|
|
1372
1356
|
styleInject(css_248z$l);
|
|
1373
1357
|
|
|
@@ -1395,13 +1379,13 @@ const MenuToggle = ({ children }) => {
|
|
|
1395
1379
|
return (React.createElement(Fragment, null, children));
|
|
1396
1380
|
};
|
|
1397
1381
|
|
|
1398
|
-
var css_248z$k = ".MenuDivider-module_menuItemDivider__JnLsC {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef
|
|
1382
|
+
var css_248z$k = ".MenuDivider-module_menuItemDivider__JnLsC {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef;\n}";
|
|
1399
1383
|
var styles$k = {"menuItemDivider":"MenuDivider-module_menuItemDivider__JnLsC"};
|
|
1400
1384
|
styleInject(css_248z$k);
|
|
1401
1385
|
|
|
1402
1386
|
const MenuDivider = () => React.createElement("div", { className: styles$k.menuItemDivider });
|
|
1403
1387
|
|
|
1404
|
-
var css_248z$j = ".ExpansionPanelContent-module_expansionPanelContent__3H62L {\n padding: 8px 16px 16px
|
|
1388
|
+
var css_248z$j = ".ExpansionPanelContent-module_expansionPanelContent__3H62L {\n padding: 8px 16px 16px;\n}";
|
|
1405
1389
|
var styles$j = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__3H62L"};
|
|
1406
1390
|
styleInject(css_248z$j);
|
|
1407
1391
|
|
|
@@ -1409,7 +1393,7 @@ const ExpansionPanelContent = ({ children }) => {
|
|
|
1409
1393
|
return (React.createElement("div", { className: styles$j.expansionPanelContent }, children));
|
|
1410
1394
|
};
|
|
1411
1395
|
|
|
1412
|
-
var css_248z$i = ".ExpansionPanelHeader-module_expansionPanelHeader__3hrsI {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px
|
|
1396
|
+
var css_248z$i = ".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}";
|
|
1413
1397
|
var styles$i = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__3hrsI"};
|
|
1414
1398
|
styleInject(css_248z$i);
|
|
1415
1399
|
|
|
@@ -1425,7 +1409,7 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1425
1409
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1426
1410
|
};
|
|
1427
1411
|
|
|
1428
|
-
var css_248z$h = ".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
|
|
1412
|
+
var css_248z$h = ".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}";
|
|
1429
1413
|
var styles$h = {"expansionPanel":"ExpansionPanel-module_expansionPanel__3krcE","isExpanded":"ExpansionPanel-module_isExpanded__1m4Dt"};
|
|
1430
1414
|
styleInject(css_248z$h);
|
|
1431
1415
|
|
|
@@ -1453,7 +1437,7 @@ const ExpansionPanel = (props) => {
|
|
|
1453
1437
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1454
1438
|
};
|
|
1455
1439
|
|
|
1456
|
-
var css_248z$g = ".FloatingActionButton-module_fab__3GwiH {\n box-shadow: var(--shadow)
|
|
1440
|
+
var css_248z$g = ".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}";
|
|
1457
1441
|
var styles$g = {"fab":"FloatingActionButton-module_fab__3GwiH","fixed":"FloatingActionButton-module_fixed__17qrv"};
|
|
1458
1442
|
styleInject(css_248z$g);
|
|
1459
1443
|
|
|
@@ -1524,7 +1508,7 @@ const Link = (props) => {
|
|
|
1524
1508
|
return (React.createElement("a", { className: getCssClasses(), href: url || '#', target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, children));
|
|
1525
1509
|
};
|
|
1526
1510
|
|
|
1527
|
-
var css_248z$f = ".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
|
|
1511
|
+
var css_248z$f = ".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}";
|
|
1528
1512
|
var styles$f = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__3e1-3","loadingIndicator":"LoadingIndicator-module_loadingIndicator__tvp5i","spinAnimation":"LoadingIndicator-module_spinAnimation__PKRNn"};
|
|
1529
1513
|
styleInject(css_248z$f);
|
|
1530
1514
|
|
|
@@ -1571,7 +1555,7 @@ class LoadingIndicatorService {
|
|
|
1571
1555
|
}
|
|
1572
1556
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1573
1557
|
|
|
1574
|
-
var css_248z$e = ".ModalHeader-module_modalHeader__o5HzE {\n border-bottom: none;\n align-items: center
|
|
1558
|
+
var css_248z$e = ".ModalHeader-module_modalHeader__o5HzE {\n border-bottom: none;\n align-items: center;\n}";
|
|
1575
1559
|
var styles$e = {"modalHeader":"ModalHeader-module_modalHeader__o5HzE"};
|
|
1576
1560
|
styleInject(css_248z$e);
|
|
1577
1561
|
|
|
@@ -1588,23 +1572,24 @@ const ModalHeader = (props) => {
|
|
|
1588
1572
|
|
|
1589
1573
|
const ModalBody = ({ children }) => (React.createElement("div", { className: "modal-body" }, children));
|
|
1590
1574
|
|
|
1591
|
-
var css_248z$d = ".Modal-module_modal__1NdMJ {\n z-index: 1111 !important;\n border-radius: var(--borderRadius)
|
|
1592
|
-
var styles$d = {"modal":"Modal-module_modal__1NdMJ","fullscreen":"Modal-module_fullscreen__3R-sM","modalContent":"Modal-module_modalContent__E2kaP","modal-dialog":"Modal-module_modal-dialog__IdJ1c"};
|
|
1575
|
+
var css_248z$d = ".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}";
|
|
1576
|
+
var styles$d = {"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"};
|
|
1593
1577
|
styleInject(css_248z$d);
|
|
1594
1578
|
|
|
1595
|
-
var css_248z$c = ".ModalFooter-module_modalFooter__2Et4e {\n border-top: none
|
|
1579
|
+
var css_248z$c = ".ModalFooter-module_modalFooter__2Et4e {\n border-top: none;\n}";
|
|
1596
1580
|
var styles$c = {"modalFooter":"ModalFooter-module_modalFooter__2Et4e"};
|
|
1597
1581
|
styleInject(css_248z$c);
|
|
1598
1582
|
|
|
1599
1583
|
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$c.modalFooter }, children));
|
|
1600
1584
|
|
|
1601
1585
|
const Modal = (props) => {
|
|
1602
|
-
const { className, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1586
|
+
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1603
1587
|
const getCssClass = () => {
|
|
1604
1588
|
const cssClasses = [];
|
|
1605
1589
|
cssClasses.push('modal-dialog modal-dialog-centered');
|
|
1606
1590
|
cssClasses.push(styles$d.modal);
|
|
1607
1591
|
!!fullScreen && cssClasses.push(styles$d['fullscreen']);
|
|
1592
|
+
size && cssClasses.push(styles$d[size]);
|
|
1608
1593
|
className && cssClasses.push(className);
|
|
1609
1594
|
return cssClasses.filter(r => r).join(' ');
|
|
1610
1595
|
};
|
|
@@ -1646,7 +1631,7 @@ var MODALBUTTONTYPE;
|
|
|
1646
1631
|
const GlobalModal = ({ title, description, formControls, onOk, onCancel, isDismissable = false, buttons = [
|
|
1647
1632
|
{ label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text, focus: true },
|
|
1648
1633
|
{ label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained },
|
|
1649
|
-
], fullScreen = false }) => {
|
|
1634
|
+
], size = SIZE.md, fullScreen = false }) => {
|
|
1650
1635
|
// workaround for getDerivedStateFromProps
|
|
1651
1636
|
const [myControls, setMyControls] = useState(null);
|
|
1652
1637
|
useEffect(() => {
|
|
@@ -1684,7 +1669,7 @@ const GlobalModal = ({ title, description, formControls, onOk, onCancel, isDismi
|
|
|
1684
1669
|
}
|
|
1685
1670
|
button.handler && button.handler();
|
|
1686
1671
|
};
|
|
1687
|
-
return (React.createElement(Modal, { fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, onClick: () => handleClickButton(button) }, button.label)))) },
|
|
1672
|
+
return (React.createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, onClick: () => handleClickButton(button) }, button.label)))) },
|
|
1688
1673
|
description && React.createElement("div", null, description),
|
|
1689
1674
|
modalType === MODALTYPE.FORM &&
|
|
1690
1675
|
React.createElement(Fragment, null,
|
|
@@ -1705,7 +1690,7 @@ class ModalService {
|
|
|
1705
1690
|
reject();
|
|
1706
1691
|
this.hide();
|
|
1707
1692
|
};
|
|
1708
|
-
render(React.createElement(GlobalModal, { fullScreen: options && options.fullScreen, title: title, description: description, formControls: options && options.formControls, onCancel: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }), this.container);
|
|
1693
|
+
render(React.createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, description: description, formControls: options && options.formControls, onCancel: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }), this.container);
|
|
1709
1694
|
}
|
|
1710
1695
|
});
|
|
1711
1696
|
}
|
|
@@ -1820,7 +1805,7 @@ const Sidebar = (props) => {
|
|
|
1820
1805
|
!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)))))))))));
|
|
1821
1806
|
};
|
|
1822
1807
|
|
|
1823
|
-
var css_248z$b = ".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)
|
|
1808
|
+
var css_248z$b = ".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}";
|
|
1824
1809
|
var styles$b = {"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"};
|
|
1825
1810
|
styleInject(css_248z$b);
|
|
1826
1811
|
|
|
@@ -1876,7 +1861,7 @@ class SnackbarService {
|
|
|
1876
1861
|
}
|
|
1877
1862
|
const snackbarService = new SnackbarService();
|
|
1878
1863
|
|
|
1879
|
-
var css_248z$a = ".SpeedDialActions-module_speedDialActions__zLEps {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto
|
|
1864
|
+
var css_248z$a = ".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}";
|
|
1880
1865
|
var styles$a = {"speedDialActions":"SpeedDialActions-module_speedDialActions__zLEps"};
|
|
1881
1866
|
styleInject(css_248z$a);
|
|
1882
1867
|
|
|
@@ -1890,7 +1875,7 @@ const SpeedDialActions = (props) => {
|
|
|
1890
1875
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
1891
1876
|
};
|
|
1892
1877
|
|
|
1893
|
-
var css_248z$9 = ".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
|
|
1878
|
+
var css_248z$9 = ".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}";
|
|
1894
1879
|
var styles$9 = {"speedDial":"SpeedDial-module_speedDial__CQ5x2"};
|
|
1895
1880
|
styleInject(css_248z$9);
|
|
1896
1881
|
|
|
@@ -1915,7 +1900,7 @@ const SpeedDial = (props) => {
|
|
|
1915
1900
|
React.createElement(SpeedDialActions, null, children)));
|
|
1916
1901
|
};
|
|
1917
1902
|
|
|
1918
|
-
var css_248z$8 = ".SpeedDialAction-module_speedDialAction__qmExs + .SpeedDialAction-module_speedDialAction__qmExs {\n margin-bottom: 10px
|
|
1903
|
+
var css_248z$8 = ".SpeedDialAction-module_speedDialAction__qmExs + .SpeedDialAction-module_speedDialAction__qmExs {\n margin-bottom: 10px;\n}";
|
|
1919
1904
|
var styles$8 = {"speedDialAction":"SpeedDialAction-module_speedDialAction__qmExs"};
|
|
1920
1905
|
styleInject(css_248z$8);
|
|
1921
1906
|
|
|
@@ -1940,7 +1925,7 @@ const SpeedDialIcon = (props) => {
|
|
|
1940
1925
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
1941
1926
|
};
|
|
1942
1927
|
|
|
1943
|
-
var css_248z$7 = ".StepperActions-module_stepperActions__2r5ZT {\n display: flex
|
|
1928
|
+
var css_248z$7 = ".StepperActions-module_stepperActions__2r5ZT {\n display: flex;\n}";
|
|
1944
1929
|
var styles$7 = {"stepperActions":"StepperActions-module_stepperActions__2r5ZT"};
|
|
1945
1930
|
styleInject(css_248z$7);
|
|
1946
1931
|
|
|
@@ -1965,7 +1950,7 @@ const StepPanel = (props) => {
|
|
|
1965
1950
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
1966
1951
|
};
|
|
1967
1952
|
|
|
1968
|
-
var css_248z$6 = ".StepConnector-module_stepConnector__2m7Xp {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px
|
|
1953
|
+
var css_248z$6 = ".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}";
|
|
1969
1954
|
var styles$6 = {"stepConnector":"StepConnector-module_stepConnector__2m7Xp","stepConnectorLine":"StepConnector-module_stepConnectorLine__jSqG4","isActive":"StepConnector-module_isActive__3Yj6N","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__3R2R8"};
|
|
1970
1955
|
styleInject(css_248z$6);
|
|
1971
1956
|
|
|
@@ -1987,7 +1972,7 @@ const StepConnector = (props) => {
|
|
|
1987
1972
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
1988
1973
|
};
|
|
1989
1974
|
|
|
1990
|
-
var css_248z$5 = ".Stepper-module_stepper__1TOxM {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px
|
|
1975
|
+
var css_248z$5 = ".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}";
|
|
1991
1976
|
var styles$5 = {"stepper":"Stepper-module_stepper__1TOxM","isHorizontal":"Stepper-module_isHorizontal__3rFHH"};
|
|
1992
1977
|
styleInject(css_248z$5);
|
|
1993
1978
|
|
|
@@ -2138,7 +2123,7 @@ const useConstructor = (callBack = () => { }) => {
|
|
|
2138
2123
|
setHasBeenCalled(true);
|
|
2139
2124
|
};
|
|
2140
2125
|
|
|
2141
|
-
var css_248z$4 = ".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
|
|
2126
|
+
var css_248z$4 = ".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}";
|
|
2142
2127
|
var styles$4 = {"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"};
|
|
2143
2128
|
styleInject(css_248z$4);
|
|
2144
2129
|
|
|
@@ -2193,7 +2178,7 @@ const Table = (props) => {
|
|
|
2193
2178
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2194
2179
|
};
|
|
2195
2180
|
|
|
2196
|
-
var css_248z$3 = ".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
|
|
2181
|
+
var css_248z$3 = ".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}";
|
|
2197
2182
|
var styles$3 = {"tabIndicator":"TabIndicator-module_tabIndicator__wj9Qm","primary":"TabIndicator-module_primary__2Lc8c","accent":"TabIndicator-module_accent__37h0D"};
|
|
2198
2183
|
styleInject(css_248z$3);
|
|
2199
2184
|
|
|
@@ -2211,7 +2196,7 @@ const TabIndicator = (props) => {
|
|
|
2211
2196
|
} }));
|
|
2212
2197
|
};
|
|
2213
2198
|
|
|
2214
|
-
var css_248z$2 = ".Tabs-module_tabs__2azkC {\n display: flex;\n position: relative
|
|
2199
|
+
var css_248z$2 = ".Tabs-module_tabs__2azkC {\n display: flex;\n position: relative;\n}";
|
|
2215
2200
|
var styles$2 = {"tabs":"Tabs-module_tabs__2azkC"};
|
|
2216
2201
|
styleInject(css_248z$2);
|
|
2217
2202
|
|
|
@@ -2252,7 +2237,7 @@ const Tabs = (props) => {
|
|
|
2252
2237
|
React.createElement(TabIndicator, { color: indicatorColor, width: (100 / React.Children.toArray(children).length) + '%', index: selectedIndex, amount: React.Children.toArray(children).length }))));
|
|
2253
2238
|
};
|
|
2254
2239
|
|
|
2255
|
-
var css_248z$1 = ".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
|
|
2240
|
+
var css_248z$1 = ".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}";
|
|
2256
2241
|
var styles$1 = {"tab":"Tab-module_tab__31Fjd"};
|
|
2257
2242
|
styleInject(css_248z$1);
|
|
2258
2243
|
|
|
@@ -2275,7 +2260,7 @@ const TabPanel = (props) => {
|
|
|
2275
2260
|
return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2276
2261
|
};
|
|
2277
2262
|
|
|
2278
|
-
var css_248z = ".Tooltip-module_tooltipContainer__3SPVX {\n display: inline
|
|
2263
|
+
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}";
|
|
2279
2264
|
var styles = {"tooltipContainer":"Tooltip-module_tooltipContainer__3SPVX","tooltip":"Tooltip-module_tooltip__1AML3","arrow":"Tooltip-module_arrow__2c3YL"};
|
|
2280
2265
|
styleInject(css_248z);
|
|
2281
2266
|
|
|
@@ -2286,6 +2271,7 @@ const Tooltip = (props) => {
|
|
|
2286
2271
|
const refTooltip = useRef(null);
|
|
2287
2272
|
useEffect(() => {
|
|
2288
2273
|
if (show === true && refChild && refChild.current) {
|
|
2274
|
+
// TODO - extract to own component?
|
|
2289
2275
|
createPopper(refChild.current, refTooltip.current, {
|
|
2290
2276
|
placement: placement,
|
|
2291
2277
|
modifiers: [
|
|
@@ -2454,16 +2440,16 @@ const TimeSelect = (props) => {
|
|
|
2454
2440
|
};
|
|
2455
2441
|
|
|
2456
2442
|
const TreeNode = (props) => {
|
|
2457
|
-
const { id, label, level, hasChildren, isExpanded, isSelected,
|
|
2443
|
+
const { id, label, level, hasChildren, isExpanded, isSelected, onToggleExpand, onClickSelect } = props;
|
|
2458
2444
|
return (React.createElement("li", { className: "tree-node", style: { paddingLeft: `${(48 * level) + (hasChildren ? 0 : 1) * 48}px` } },
|
|
2459
2445
|
hasChildren &&
|
|
2460
|
-
React.createElement(IconButton, { onClick: () =>
|
|
2446
|
+
React.createElement(IconButton, { onClick: () => onToggleExpand(id), icon: !isExpanded ? React.createElement(ChevronRightSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null) }),
|
|
2461
2447
|
React.createElement(Checkbox, { checked: isSelected, onChange: () => onClickSelect(id) }),
|
|
2462
2448
|
label));
|
|
2463
2449
|
};
|
|
2464
2450
|
|
|
2465
2451
|
const TreeView = (props) => {
|
|
2466
|
-
const { data, onSelect } = props;
|
|
2452
|
+
const { data, onSelect, onExpand, onCollapse } = props;
|
|
2467
2453
|
const [flattenData, setFlattenData] = useState([]);
|
|
2468
2454
|
const [expandedItems, setExpandedItems] = useState([]);
|
|
2469
2455
|
const [selectedItemIds, setSelectedItemIds] = useState([]);
|
|
@@ -2482,14 +2468,16 @@ const TreeView = (props) => {
|
|
|
2482
2468
|
useEffect(() => {
|
|
2483
2469
|
setFlattenData(flattenDeep(data));
|
|
2484
2470
|
}, [data]);
|
|
2485
|
-
const
|
|
2471
|
+
const handleOnToggleExpand = (item) => {
|
|
2486
2472
|
if (item.hasChildren) {
|
|
2487
2473
|
let newExpandedItems = [...expandedItems];
|
|
2488
2474
|
if (isExpanded(item.id)) {
|
|
2489
2475
|
newExpandedItems = collapseRecursive(item, [...expandedItems]);
|
|
2476
|
+
onCollapse && onCollapse(item.id);
|
|
2490
2477
|
}
|
|
2491
2478
|
else {
|
|
2492
2479
|
newExpandedItems.push(item);
|
|
2480
|
+
onExpand && onExpand(item.id);
|
|
2493
2481
|
}
|
|
2494
2482
|
setExpandedItems(newExpandedItems);
|
|
2495
2483
|
}
|
|
@@ -2530,7 +2518,7 @@ const TreeView = (props) => {
|
|
|
2530
2518
|
};
|
|
2531
2519
|
return (React.createElement("ul", { className: "treeview" }, flattenData.map(item => {
|
|
2532
2520
|
return isItemVisible(item) &&
|
|
2533
|
-
React.createElement(TreeNode, { key: item.id, id: item.id, label: item.label, level: item.level, parentId: item.parentId, isExpanded: isExpanded(item.id), isSelected: isSelected(item.id), hasChildren: item.hasChildren,
|
|
2521
|
+
React.createElement(TreeNode, { key: item.id, id: item.id, label: item.label, level: item.level, parentId: item.parentId, isExpanded: isExpanded(item.id), isSelected: isSelected(item.id), hasChildren: item.hasChildren, onToggleExpand: () => handleOnToggleExpand(item), onClickSelect: () => handleNodeClickSelect(item) });
|
|
2534
2522
|
})));
|
|
2535
2523
|
};
|
|
2536
2524
|
|