react-asc 18.8.5 → 18.8.6
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/Form/FormHint/FormHint.d.ts +5 -0
- package/components/Form/FormHint/index.d.ts +1 -0
- package/components/Form/{FormInput.d.ts → FormInput/FormInput.d.ts} +9 -3
- package/components/Form/FormInput/index.d.ts +1 -0
- package/components/Form/FormLabel/FormLabel.d.ts +6 -0
- package/components/Form/FormLabel/index.d.ts +1 -0
- package/index.es.js +204 -166
- package/index.es.js.map +1 -1
- package/index.js +204 -166
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/components/Form/FormHint.d.ts +0 -7
- package/components/Form/FormLabel.d.ts +0 -7
package/index.js
CHANGED
|
@@ -95,56 +95,56 @@ function styleInject(css, ref) {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
var css_248z$
|
|
99
|
-
var styles$
|
|
100
|
-
styleInject(css_248z$
|
|
98
|
+
var css_248z$V = ".Alert-module_alert__2yOUn {\n border-radius: var(--borderRadius);\n padding: 6px 16px; }\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.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";
|
|
99
|
+
var styles$V = {"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"};
|
|
100
|
+
styleInject(css_248z$V);
|
|
101
101
|
|
|
102
102
|
const Alert = (props) => {
|
|
103
103
|
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
104
104
|
const getCssClasses = () => {
|
|
105
105
|
const cssClasses = [];
|
|
106
|
-
cssClasses.push(styles$
|
|
106
|
+
cssClasses.push(styles$V.alert);
|
|
107
107
|
if (variant === exports.VARIANT.contained) {
|
|
108
|
-
cssClasses.push(styles$
|
|
109
|
-
cssClasses.push(styles$
|
|
108
|
+
cssClasses.push(styles$V.contained);
|
|
109
|
+
cssClasses.push(styles$V[color]);
|
|
110
110
|
}
|
|
111
111
|
if (variant === exports.VARIANT.outline) {
|
|
112
|
-
cssClasses.push(styles$
|
|
113
|
-
cssClasses.push(styles$
|
|
112
|
+
cssClasses.push(styles$V.outline);
|
|
113
|
+
cssClasses.push(styles$V[color]);
|
|
114
114
|
}
|
|
115
|
-
shadow && cssClasses.push(styles$
|
|
115
|
+
shadow && cssClasses.push(styles$V['shadow']);
|
|
116
116
|
className && cssClasses.push(className);
|
|
117
117
|
return cssClasses.filter(r => r).join(' ');
|
|
118
118
|
};
|
|
119
119
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
120
120
|
};
|
|
121
121
|
|
|
122
|
-
var css_248z$
|
|
123
|
-
var styles$
|
|
124
|
-
styleInject(css_248z$
|
|
122
|
+
var css_248z$U = ".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 .AppBar-module_appbar__1S8G1.AppBar-module_primary__3CiO7 {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .AppBar-module_appbar__1S8G1.AppBar-module_secondary__1W4qT {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .AppBar-module_appbar__1S8G1.AppBar-module_accent__Mgcwx {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .AppBar-module_appbar__1S8G1.AppBar-module_light__1FxmL {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .AppBar-module_appbar__1S8G1.AppBar-module_dark__3n5rm {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .AppBar-module_appbar__1S8G1.AppBar-module_shadow__2c8iH {\n box-shadow: var(--shadow); }\n";
|
|
123
|
+
var styles$U = {"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"};
|
|
124
|
+
styleInject(css_248z$U);
|
|
125
125
|
|
|
126
126
|
const AppBar = (props) => {
|
|
127
127
|
const { children, className, color = exports.COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
128
128
|
const getCssClasses = () => {
|
|
129
129
|
const cssClasses = [];
|
|
130
|
-
cssClasses.push(styles$
|
|
131
|
-
cssClasses.push(styles$
|
|
132
|
-
shadow && cssClasses.push(styles$
|
|
130
|
+
cssClasses.push(styles$U[color]);
|
|
131
|
+
cssClasses.push(styles$U.appbar);
|
|
132
|
+
shadow && cssClasses.push(styles$U['shadow']);
|
|
133
133
|
className && cssClasses.push(className);
|
|
134
134
|
return cssClasses.filter(r => r).join(' ');
|
|
135
135
|
};
|
|
136
136
|
return (React__default["default"].createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
var css_248z$
|
|
140
|
-
var styles$
|
|
141
|
-
styleInject(css_248z$
|
|
139
|
+
var css_248z$T = ".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 .AppBarTitle-module_appbarTitle__3J-Z1:hover {\n cursor: pointer; }\n";
|
|
140
|
+
var styles$T = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
|
|
141
|
+
styleInject(css_248z$T);
|
|
142
142
|
|
|
143
143
|
const AppBarTitle = (props) => {
|
|
144
144
|
const { children, className, onClick } = props;
|
|
145
145
|
const getCssClass = () => {
|
|
146
146
|
const cssClasses = [];
|
|
147
|
-
cssClasses.push(styles$
|
|
147
|
+
cssClasses.push(styles$T.appbarTitle);
|
|
148
148
|
className && cssClasses.push(className);
|
|
149
149
|
return cssClasses.filter(r => r).join(' ');
|
|
150
150
|
};
|
|
@@ -172,40 +172,40 @@ const Backdrop = (props) => {
|
|
|
172
172
|
return (reactDom.createPortal(React__default["default"].createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles() }), target));
|
|
173
173
|
};
|
|
174
174
|
|
|
175
|
-
var css_248z$
|
|
176
|
-
var styles$
|
|
177
|
-
styleInject(css_248z$
|
|
175
|
+
var css_248z$S = ".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";
|
|
176
|
+
var styles$S = {"list":"List-module_list__1ax9w"};
|
|
177
|
+
styleInject(css_248z$S);
|
|
178
178
|
|
|
179
179
|
const List = (props) => {
|
|
180
180
|
const { children, className, isFlush } = props;
|
|
181
181
|
const getCssClasses = () => {
|
|
182
182
|
const cssClasses = [];
|
|
183
183
|
if (isFlush) {
|
|
184
|
-
cssClasses.push(styles$
|
|
184
|
+
cssClasses.push(styles$S.flush);
|
|
185
185
|
}
|
|
186
|
-
cssClasses.push(styles$
|
|
186
|
+
cssClasses.push(styles$S.list);
|
|
187
187
|
className && cssClasses.push(className);
|
|
188
188
|
return cssClasses.filter(css => css).join(' ');
|
|
189
189
|
};
|
|
190
190
|
return (React__default["default"].createElement("ul", { className: getCssClasses() }, children));
|
|
191
191
|
};
|
|
192
192
|
|
|
193
|
-
var css_248z$
|
|
194
|
-
var styles$
|
|
195
|
-
styleInject(css_248z$
|
|
193
|
+
var css_248z$R = ".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 .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 .ListItem-module_listItem__3hAZb + .ListItem-module_listItem__3hAZb {\n border-top-width: 0; }\n .ListItem-module_listItem__3hAZb.ListItem-module_primary__2OJAg {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .ListItem-module_listItem__3hAZb.ListItem-module_accent__2RXHe {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .ListItem-module_listItem__3hAZb.ListItem-module_secondary__3EVjH {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .ListItem-module_listItem__3hAZb.ListItem-module_light__3CJBB {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .ListItem-module_listItem__3hAZb.ListItem-module_dark__SazkE {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o {\n color: rgba(0, 0, 0, 0.26); }\n .ListItem-module_listItem__3hAZb.ListItem-module_disabled__2Kh0o:hover {\n cursor: not-allowed;\n background-color: inherit; }\n";
|
|
194
|
+
var styles$R = {"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","disabled":"ListItem-module_disabled__2Kh0o"};
|
|
195
|
+
styleInject(css_248z$R);
|
|
196
196
|
|
|
197
197
|
const ListItem = (props) => {
|
|
198
198
|
const { id, children, color, active, className, isHoverable, disabled, onClick } = props;
|
|
199
199
|
const getCssClasses = () => {
|
|
200
200
|
const cssClasses = [];
|
|
201
201
|
if (active) {
|
|
202
|
-
cssClasses.push(styles$
|
|
202
|
+
cssClasses.push(styles$R['active']);
|
|
203
203
|
}
|
|
204
204
|
if (disabled) {
|
|
205
|
-
cssClasses.push(styles$
|
|
205
|
+
cssClasses.push(styles$R['disabled']);
|
|
206
206
|
}
|
|
207
|
-
color && cssClasses.push(styles$
|
|
208
|
-
cssClasses.push(styles$
|
|
207
|
+
color && cssClasses.push(styles$R[color]);
|
|
208
|
+
cssClasses.push(styles$R.listItem);
|
|
209
209
|
className && cssClasses.push(className);
|
|
210
210
|
return cssClasses.filter(css => css).join(' ');
|
|
211
211
|
};
|
|
@@ -215,32 +215,32 @@ const ListItem = (props) => {
|
|
|
215
215
|
return (React__default["default"].createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
|
|
216
216
|
};
|
|
217
217
|
|
|
218
|
-
var css_248z$
|
|
219
|
-
var styles$
|
|
220
|
-
styleInject(css_248z$
|
|
218
|
+
var css_248z$Q = ".ListItemAvatar-module_avatar__1fjSE {\n margin-right: 16px; }\n .ListItemAvatar-module_avatar__1fjSE svg, .ListItemAvatar-module_avatar__1fjSE img {\n width: 24px;\n height: 24px; }\n .ListItemAvatar-module_avatar__1fjSE img {\n border-radius: 50%; }\n";
|
|
219
|
+
var styles$Q = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
|
|
220
|
+
styleInject(css_248z$Q);
|
|
221
221
|
|
|
222
|
-
const ListItemAvatar = ({ avatar }) => (React__default["default"].createElement("div", { className: styles$
|
|
222
|
+
const ListItemAvatar = ({ avatar }) => (React__default["default"].createElement("div", { className: styles$Q.avatar }, avatar));
|
|
223
223
|
|
|
224
|
-
var css_248z$
|
|
225
|
-
var styles$
|
|
226
|
-
styleInject(css_248z$
|
|
224
|
+
var css_248z$P = ".ListItemIcon-module_icon__-nsUy {\n margin-right: 32px; }\n .ListItemIcon-module_icon__-nsUy svg {\n width: 24px;\n height: 24px; }\n";
|
|
225
|
+
var styles$P = {"icon":"ListItemIcon-module_icon__-nsUy"};
|
|
226
|
+
styleInject(css_248z$P);
|
|
227
227
|
|
|
228
|
-
const ListItemIcon = ({ icon }) => (React__default["default"].createElement("div", { className: styles$
|
|
228
|
+
const ListItemIcon = ({ icon }) => (React__default["default"].createElement("div", { className: styles$P.icon }, icon));
|
|
229
229
|
|
|
230
|
-
var css_248z$
|
|
231
|
-
var styles$
|
|
232
|
-
styleInject(css_248z$
|
|
230
|
+
var css_248z$O = ".ListItemAction-module_listItemAction__26S66 {\n display: flex;\n justify-content: center;\n min-width: 40px; }\n .ListItemAction-module_listItemAction__26S66 svg {\n width: 20px;\n height: 20px; }\n";
|
|
231
|
+
var styles$O = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
|
|
232
|
+
styleInject(css_248z$O);
|
|
233
233
|
|
|
234
|
-
const ListItemAction = ({ children, onClick }) => (React__default["default"].createElement("div", { className: styles$
|
|
234
|
+
const ListItemAction = ({ children, onClick }) => (React__default["default"].createElement("div", { className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
235
235
|
|
|
236
|
-
var css_248z$
|
|
237
|
-
var styles$
|
|
238
|
-
styleInject(css_248z$
|
|
236
|
+
var css_248z$N = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1; }\n";
|
|
237
|
+
var styles$N = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
238
|
+
styleInject(css_248z$N);
|
|
239
239
|
|
|
240
240
|
const ListItemText = ({ primary, secondary }) => {
|
|
241
241
|
const getCssClasses = () => {
|
|
242
242
|
const cssClasses = [];
|
|
243
|
-
cssClasses.push(styles$
|
|
243
|
+
cssClasses.push(styles$N.listItemText);
|
|
244
244
|
return cssClasses.filter(css => css).join(' ');
|
|
245
245
|
};
|
|
246
246
|
return (React__default["default"].createElement("div", { className: getCssClasses() },
|
|
@@ -251,9 +251,9 @@ const ListItemText = ({ primary, secondary }) => {
|
|
|
251
251
|
const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
|
|
252
252
|
const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
253
253
|
|
|
254
|
-
var css_248z$
|
|
255
|
-
var styles$
|
|
256
|
-
styleInject(css_248z$
|
|
254
|
+
var css_248z$M = ".AutoComplete-module_selectContainer__SyqtX {\n position: relative; }\n\n.AutoComplete-module_select__2_7JD {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .AutoComplete-module_select__2_7JD:hover {\n cursor: pointer; }\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";
|
|
255
|
+
var styles$M = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
|
|
256
|
+
styleInject(css_248z$M);
|
|
257
257
|
|
|
258
258
|
// preset value
|
|
259
259
|
// enter -> delay? -> show results
|
|
@@ -309,7 +309,7 @@ const AutoComplete = (props) => {
|
|
|
309
309
|
const getCssClass = () => {
|
|
310
310
|
const cssClasses = [];
|
|
311
311
|
className && cssClasses.push(className);
|
|
312
|
-
cssClasses.push(styles$
|
|
312
|
+
cssClasses.push(styles$M.select);
|
|
313
313
|
return cssClasses.filter(r => r).join(' ');
|
|
314
314
|
};
|
|
315
315
|
const show = () => setIsShow(true);
|
|
@@ -334,35 +334,35 @@ const AutoComplete = (props) => {
|
|
|
334
334
|
setSearchText('');
|
|
335
335
|
};
|
|
336
336
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
337
|
-
React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
337
|
+
React__default["default"].createElement("div", { ref: selectConainter, className: styles$M.selectContainer },
|
|
338
338
|
React__default["default"].createElement("div", { className: "d-flex" },
|
|
339
339
|
React__default["default"].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
340
340
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
341
341
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
342
342
|
isShow &&
|
|
343
343
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
344
|
-
React__default["default"].createElement("div", { className: styles$
|
|
344
|
+
React__default["default"].createElement("div", { className: styles$M.selectMenu },
|
|
345
345
|
React__default["default"].createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
346
346
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
347
347
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
348
348
|
};
|
|
349
349
|
|
|
350
|
-
var css_248z$
|
|
351
|
-
var styles$
|
|
352
|
-
styleInject(css_248z$
|
|
350
|
+
var css_248z$L = ".Badge-module_badgeContainer__1QtTD {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle; }\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 .Badge-module_badge__2Y_LO.Badge-module_primary__2mn7_ {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Badge-module_badge__2Y_LO.Badge-module_accent__8Hg8z {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Badge-module_badge__2Y_LO.Badge-module_secondary__1QqDc {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Badge-module_badge__2Y_LO.Badge-module_light__3Z7JO {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Badge-module_badge__2Y_LO.Badge-module_dark__2qWe_ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n";
|
|
351
|
+
var styles$L = {"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_"};
|
|
352
|
+
styleInject(css_248z$L);
|
|
353
353
|
|
|
354
354
|
const Badge = (props) => {
|
|
355
355
|
const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
356
356
|
const getCssClassesBadgeContainer = () => {
|
|
357
357
|
const cssClasses = [];
|
|
358
|
-
cssClasses.push(styles$
|
|
358
|
+
cssClasses.push(styles$L.badgeContainer);
|
|
359
359
|
className && cssClasses.push(className);
|
|
360
360
|
return cssClasses.filter(css => css).join(' ');
|
|
361
361
|
};
|
|
362
362
|
const getCssClassesBadge = () => {
|
|
363
363
|
const cssClasses = [];
|
|
364
|
-
cssClasses.push(styles$
|
|
365
|
-
cssClasses.push(styles$
|
|
364
|
+
cssClasses.push(styles$L.badge);
|
|
365
|
+
cssClasses.push(styles$L[color]);
|
|
366
366
|
return cssClasses.filter(css => css).join(' ');
|
|
367
367
|
};
|
|
368
368
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -370,42 +370,42 @@ const Badge = (props) => {
|
|
|
370
370
|
React__default["default"].createElement("span", { className: getCssClassesBadge() }, content)));
|
|
371
371
|
};
|
|
372
372
|
|
|
373
|
-
var css_248z$
|
|
374
|
-
var styles$
|
|
375
|
-
styleInject(css_248z$
|
|
373
|
+
var css_248z$K = ".Icon-module_icon__2etAT {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px; }\n .Icon-module_icon__2etAT svg {\n width: inherit;\n height: inherit; }\n .Icon-module_icon__2etAT.Icon-module_primary__32Mh4 {\n color: var(--primary); }\n .Icon-module_icon__2etAT.Icon-module_accent__2U_no {\n color: var(--accent); }\n .Icon-module_icon__2etAT.Icon-module_secondary__3cMmx {\n color: var(--secondary); }\n .Icon-module_icon__2etAT.Icon-module_light__2SugS {\n color: var(--light); }\n .Icon-module_icon__2etAT.Icon-module_dark__GWMzb {\n color: var(--dark); }\n";
|
|
374
|
+
var styles$K = {"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"};
|
|
375
|
+
styleInject(css_248z$K);
|
|
376
376
|
|
|
377
377
|
const Icon = (props) => {
|
|
378
378
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
379
379
|
const getCssClasses = () => {
|
|
380
380
|
const cssClasses = [];
|
|
381
|
-
cssClasses.push(styles$
|
|
382
|
-
iconColor && cssClasses.push(styles$
|
|
381
|
+
cssClasses.push(styles$K.icon);
|
|
382
|
+
iconColor && cssClasses.push(styles$K[iconColor]);
|
|
383
383
|
className && cssClasses.push(className);
|
|
384
384
|
return cssClasses.filter(css => css).join(' ');
|
|
385
385
|
};
|
|
386
386
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
387
387
|
};
|
|
388
388
|
|
|
389
|
-
var css_248z$
|
|
390
|
-
var styles$
|
|
391
|
-
styleInject(css_248z$
|
|
389
|
+
var css_248z$J = ".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.Button-module_btnContained__8Q4uL.Button-module_primary__2soUg {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\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 .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 .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 .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 .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.Button-module_btnText__32H44 {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__32H44.Button-module_primary__2soUg {\n color: var(--primary) !important; }\n .Button-module_btnText__32H44.Button-module_primary__2soUg:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_secondary__psAvb {\n color: var(--secondary) !important; }\n .Button-module_btnText__32H44.Button-module_secondary__psAvb:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_accent__1_cP6 {\n color: var(--accent) !important; }\n .Button-module_btnText__32H44.Button-module_accent__1_cP6:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__32H44.Button-module_light__JVK1z:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__32H44.Button-module_dark__O89wU {\n color: var(--dark) !important; }\n .Button-module_btnText__32H44.Button-module_dark__O89wU:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__2drkn {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__2drkn.Button-module_primary__2soUg {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__2drkn.Button-module_primary__2soUg:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__2drkn.Button-module_secondary__psAvb:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6 {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__2drkn.Button-module_accent__1_cP6:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_light__JVK1z {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__2drkn.Button-module_light__JVK1z:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__2drkn.Button-module_dark__O89wU {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__2drkn.Button-module_dark__O89wU:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__1TN-G {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__1TN-G svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__3uZjE {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__3uZjE svg {\n width: 18px;\n height: 18px; }\n";
|
|
390
|
+
var styles$J = {"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"};
|
|
391
|
+
styleInject(css_248z$J);
|
|
392
392
|
|
|
393
393
|
const ButtonTemplate = (props) => {
|
|
394
394
|
const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
|
|
395
395
|
const getCssClasses = () => {
|
|
396
396
|
const cssClasses = [];
|
|
397
|
-
cssClasses.push(styles$
|
|
397
|
+
cssClasses.push(styles$J.button);
|
|
398
398
|
if (variant !== 'outline' && variant !== 'text') {
|
|
399
|
-
cssClasses.push(styles$
|
|
400
|
-
cssClasses.push(styles$
|
|
399
|
+
cssClasses.push(styles$J.btnContained);
|
|
400
|
+
cssClasses.push(styles$J[color]);
|
|
401
401
|
}
|
|
402
402
|
if (variant === 'outline') {
|
|
403
|
-
cssClasses.push(styles$
|
|
404
|
-
cssClasses.push(styles$
|
|
403
|
+
cssClasses.push(styles$J.btnOutline);
|
|
404
|
+
cssClasses.push(styles$J[color]);
|
|
405
405
|
}
|
|
406
406
|
if (variant === 'text') {
|
|
407
|
-
cssClasses.push(styles$
|
|
408
|
-
cssClasses.push(styles$
|
|
407
|
+
cssClasses.push(styles$J.btnText);
|
|
408
|
+
cssClasses.push(styles$J[color]);
|
|
409
409
|
}
|
|
410
410
|
if (isRounded && variant !== 'text') {
|
|
411
411
|
cssClasses.push(`rounded-pill`);
|
|
@@ -419,40 +419,40 @@ const ButtonTemplate = (props) => {
|
|
|
419
419
|
return (React__default["default"].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
420
420
|
React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
|
|
421
421
|
startIcon &&
|
|
422
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
422
|
+
React__default["default"].createElement(Icon, { className: styles$J.startIcon }, startIcon),
|
|
423
423
|
children,
|
|
424
424
|
endIcon &&
|
|
425
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
425
|
+
React__default["default"].createElement(Icon, { className: styles$J.endIcon }, endIcon))));
|
|
426
426
|
};
|
|
427
427
|
|
|
428
428
|
const Button = (props) => {
|
|
429
429
|
return (React__default["default"].createElement(ButtonTemplate, Object.assign({}, props)));
|
|
430
430
|
};
|
|
431
431
|
|
|
432
|
-
var css_248z$
|
|
433
|
-
var styles$
|
|
434
|
-
styleInject(css_248z$
|
|
432
|
+
var css_248z$I = ".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";
|
|
433
|
+
var styles$I = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
|
|
434
|
+
styleInject(css_248z$I);
|
|
435
435
|
|
|
436
436
|
const ButtonGroup = (props) => {
|
|
437
437
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
438
438
|
const getCssClasses = () => {
|
|
439
439
|
const cssClasses = [];
|
|
440
|
-
cssClasses.push(styles$
|
|
440
|
+
cssClasses.push(styles$I.buttonGroup);
|
|
441
441
|
className && cssClasses.push(className);
|
|
442
442
|
return cssClasses.filter(css => css).join(' ');
|
|
443
443
|
};
|
|
444
444
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
445
445
|
};
|
|
446
446
|
|
|
447
|
-
var css_248z$
|
|
448
|
-
var styles$
|
|
449
|
-
styleInject(css_248z$
|
|
447
|
+
var css_248z$H = ".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";
|
|
448
|
+
var styles$H = {"breadcrumb":"Breadcrumb-module_breadcrumb__2BHXS"};
|
|
449
|
+
styleInject(css_248z$H);
|
|
450
450
|
|
|
451
451
|
const Breadcrumb = (props) => {
|
|
452
452
|
const { children, className } = props;
|
|
453
453
|
const getCssClasses = () => {
|
|
454
454
|
const cssClasses = [];
|
|
455
|
-
cssClasses.push(styles$
|
|
455
|
+
cssClasses.push(styles$H.breadcrumb);
|
|
456
456
|
className && cssClasses.push(className);
|
|
457
457
|
return cssClasses.filter(css => css).join(' ');
|
|
458
458
|
};
|
|
@@ -462,15 +462,15 @@ const Breadcrumb = (props) => {
|
|
|
462
462
|
|
|
463
463
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
464
464
|
|
|
465
|
-
var css_248z$
|
|
466
|
-
var styles$
|
|
467
|
-
styleInject(css_248z$
|
|
465
|
+
var css_248z$G = ".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";
|
|
466
|
+
var styles$G = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__1yy-D","active":"BreadcrumbItem-module_active__3iVU2"};
|
|
467
|
+
styleInject(css_248z$G);
|
|
468
468
|
|
|
469
469
|
const BreadcrumbItem = (props) => {
|
|
470
470
|
const { children, className, isActive, onClick } = props;
|
|
471
471
|
const getCssClasses = () => {
|
|
472
472
|
const cssClasses = [];
|
|
473
|
-
cssClasses.push(styles$
|
|
473
|
+
cssClasses.push(styles$G.breadcrumbItem);
|
|
474
474
|
className && cssClasses.push(className);
|
|
475
475
|
isActive && cssClasses.push('active');
|
|
476
476
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -484,106 +484,106 @@ const BreadcrumbItem = (props) => {
|
|
|
484
484
|
wrapper: label => React__default["default"].createElement("a", null, label) }, children)));
|
|
485
485
|
};
|
|
486
486
|
|
|
487
|
-
var css_248z$
|
|
488
|
-
var styles$
|
|
489
|
-
styleInject(css_248z$
|
|
487
|
+
var css_248z$F = ".Card-module_card__31o3Z {\n background: var(--white);\n border-radius: var(--borderRadius); }\n .Card-module_card__31o3Z.Card-module_shadow__2lpYq {\n box-shadow: var(--shadow); }\n";
|
|
488
|
+
var styles$F = {"card":"Card-module_card__31o3Z","shadow":"Card-module_shadow__2lpYq"};
|
|
489
|
+
styleInject(css_248z$F);
|
|
490
490
|
|
|
491
491
|
const Card = (props) => {
|
|
492
492
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
493
493
|
const getCssClasses = () => {
|
|
494
494
|
const cssClasses = [];
|
|
495
|
-
cssClasses.push(styles$
|
|
496
|
-
shadow && cssClasses.push(styles$
|
|
495
|
+
cssClasses.push(styles$F.card);
|
|
496
|
+
shadow && cssClasses.push(styles$F.shadow);
|
|
497
497
|
className && cssClasses.push(className);
|
|
498
498
|
return cssClasses.filter(css => css).join(' ');
|
|
499
499
|
};
|
|
500
500
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
501
501
|
};
|
|
502
502
|
|
|
503
|
-
var css_248z$
|
|
504
|
-
var styles$
|
|
505
|
-
styleInject(css_248z$
|
|
503
|
+
var css_248z$E = ".CardBody-module_cardBody__N8z-L {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem; }\n";
|
|
504
|
+
var styles$E = {"cardBody":"CardBody-module_cardBody__N8z-L"};
|
|
505
|
+
styleInject(css_248z$E);
|
|
506
506
|
|
|
507
507
|
const CardBody = (props) => {
|
|
508
508
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
509
509
|
const getCssClasses = () => {
|
|
510
510
|
const cssClasses = [];
|
|
511
|
-
cssClasses.push(styles$
|
|
511
|
+
cssClasses.push(styles$E.cardBody);
|
|
512
512
|
className && cssClasses.push(className);
|
|
513
513
|
return cssClasses.filter(css => css).join(' ');
|
|
514
514
|
};
|
|
515
515
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
516
516
|
};
|
|
517
517
|
|
|
518
|
-
var css_248z$
|
|
519
|
-
var styles$
|
|
520
|
-
styleInject(css_248z$
|
|
518
|
+
var css_248z$D = ".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 .CardFooter-module_cardFooter__3dYKa:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
|
|
519
|
+
var styles$D = {"cardFooter":"CardFooter-module_cardFooter__3dYKa"};
|
|
520
|
+
styleInject(css_248z$D);
|
|
521
521
|
|
|
522
522
|
const CardFooter = (props) => {
|
|
523
523
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
524
524
|
const getCssClasses = () => {
|
|
525
525
|
const cssClasses = [];
|
|
526
|
-
cssClasses.push(styles$
|
|
526
|
+
cssClasses.push(styles$D.cardFooter);
|
|
527
527
|
className && cssClasses.push(className);
|
|
528
528
|
return cssClasses.filter(css => css).join(' ');
|
|
529
529
|
};
|
|
530
530
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
531
531
|
};
|
|
532
532
|
|
|
533
|
-
var css_248z$
|
|
534
|
-
var styles$
|
|
535
|
-
styleInject(css_248z$
|
|
533
|
+
var css_248z$C = ".CardSubtitle-module_cardSubtitle__2WWHW {\n color: #6c757d !important; }\n";
|
|
534
|
+
var styles$C = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__2WWHW"};
|
|
535
|
+
styleInject(css_248z$C);
|
|
536
536
|
|
|
537
537
|
const CardSubtitle = (props) => {
|
|
538
538
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
539
539
|
const getCssClasses = () => {
|
|
540
540
|
const cssClasses = [];
|
|
541
|
-
cssClasses.push(styles$
|
|
541
|
+
cssClasses.push(styles$C.cardSubtitle);
|
|
542
542
|
className && cssClasses.push(className);
|
|
543
543
|
return cssClasses.filter(css => css).join(' ');
|
|
544
544
|
};
|
|
545
545
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
546
546
|
};
|
|
547
547
|
|
|
548
|
-
var css_248z$
|
|
549
|
-
var styles$
|
|
550
|
-
styleInject(css_248z$
|
|
548
|
+
var css_248z$B = ".CardText-module_cardText__1LWJi:last-child {\n margin-bottom: 0; }\n";
|
|
549
|
+
var styles$B = {"cardText":"CardText-module_cardText__1LWJi"};
|
|
550
|
+
styleInject(css_248z$B);
|
|
551
551
|
|
|
552
552
|
const CardText = (props) => {
|
|
553
553
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
554
554
|
const getCssClasses = () => {
|
|
555
555
|
const cssClasses = [];
|
|
556
|
-
cssClasses.push(styles$
|
|
556
|
+
cssClasses.push(styles$B.cardText);
|
|
557
557
|
className && cssClasses.push(className);
|
|
558
558
|
return cssClasses.filter(css => css).join(' ');
|
|
559
559
|
};
|
|
560
560
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
|
|
561
561
|
};
|
|
562
562
|
|
|
563
|
-
var css_248z$
|
|
564
|
-
var styles$
|
|
565
|
-
styleInject(css_248z$
|
|
563
|
+
var css_248z$A = ".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";
|
|
564
|
+
var styles$A = {"cardTitle":"CardTitle-module_cardTitle__24Amb"};
|
|
565
|
+
styleInject(css_248z$A);
|
|
566
566
|
|
|
567
567
|
const CardTitle = (props) => {
|
|
568
568
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
569
569
|
const getCssClasses = () => {
|
|
570
570
|
const cssClasses = [];
|
|
571
|
-
cssClasses.push(styles$
|
|
571
|
+
cssClasses.push(styles$A.cardTitle);
|
|
572
572
|
className && cssClasses.push(className);
|
|
573
573
|
return cssClasses.filter(css => css).join(' ');
|
|
574
574
|
};
|
|
575
575
|
return (React__default["default"].createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
576
576
|
};
|
|
577
577
|
|
|
578
|
-
var css_248z$
|
|
579
|
-
var styles$
|
|
580
|
-
styleInject(css_248z$
|
|
578
|
+
var css_248z$z = ".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";
|
|
579
|
+
var styles$z = {"cardImage":"CardImage-module_cardImage__1tZM4"};
|
|
580
|
+
styleInject(css_248z$z);
|
|
581
581
|
|
|
582
582
|
const CardImage = (props) => {
|
|
583
583
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
584
584
|
const getCssClasses = () => {
|
|
585
585
|
const cssClasses = [];
|
|
586
|
-
cssClasses.push(styles$
|
|
586
|
+
cssClasses.push(styles$z.cardImage);
|
|
587
587
|
className && cssClasses.push(className);
|
|
588
588
|
return cssClasses.filter(css => css).join(' ');
|
|
589
589
|
};
|
|
@@ -632,15 +632,15 @@ const CircleSolidIcon = () => (React__default["default"].createElement("svg", {
|
|
|
632
632
|
const ChevronLeftSolidIcon = () => (React__default["default"].createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
|
|
633
633
|
React__default["default"].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" })));
|
|
634
634
|
|
|
635
|
-
var css_248z$
|
|
636
|
-
var styles$
|
|
637
|
-
styleInject(css_248z$
|
|
635
|
+
var css_248z$y = ".Typography-module_typography__2bM6E {\n text-overflow: ellipsis;\n overflow: hidden !important; }\n";
|
|
636
|
+
var styles$y = {"typography":"Typography-module_typography__2bM6E"};
|
|
637
|
+
styleInject(css_248z$y);
|
|
638
638
|
|
|
639
639
|
const Wrapper = (props) => {
|
|
640
640
|
const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
|
|
641
641
|
const getCssClasses = () => {
|
|
642
642
|
const cssClasses = [];
|
|
643
|
-
cssClasses.push(styles$
|
|
643
|
+
cssClasses.push(styles$y.typography);
|
|
644
644
|
className && cssClasses.push(className);
|
|
645
645
|
return cssClasses.filter(css => css).join(' ');
|
|
646
646
|
};
|
|
@@ -651,21 +651,21 @@ const Typography = (_a) => {
|
|
|
651
651
|
return (React__default["default"].createElement(Wrapper, Object.assign({ as: as }, rest), children));
|
|
652
652
|
};
|
|
653
653
|
|
|
654
|
-
var css_248z$
|
|
655
|
-
var styles$
|
|
656
|
-
styleInject(css_248z$
|
|
654
|
+
var css_248z$x = ".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 .IconButton-module_iconButton__1xqrL:hover {\n cursor: pointer; }\n .IconButton-module_iconButton__1xqrL.IconButton-module_shadow__5U4-_ {\n box-shadow: var(--shadow); }\n .IconButton-module_iconButton__1xqrL.IconButton-module_md__1lmDL {\n width: 48px;\n height: 48px; }\n .IconButton-module_iconButton__1xqrL.IconButton-module_lg__1O2Uy {\n width: 56px;\n height: 56px; }\n .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG {\n padding: 0;\n background: transparent;\n color: inherit; }\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 .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_primary__qRw4T {\n color: var(--primary); }\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-dark); }\n .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_secondary__1lzNL {\n color: var(--secondary); }\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-dark); }\n .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_accent__exm5t {\n color: var(--accent); }\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-dark); }\n .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_light__2nWhD {\n color: var(--light); }\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-dark); }\n .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR {\n color: var(--dark); }\n .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR:hover, .IconButton-module_iconButton__1xqrL.IconButton-module_text__33RrG.IconButton-module_dark__1e6bR.IconButton-module_active__2tJut {\n color: var(--dark-dark); }\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 .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 .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_primary__qRw4T {\n background-color: var(--primary);\n color: var(--white); }\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 .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_secondary__1lzNL {\n background-color: var(--secondary);\n color: var(--white); }\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 .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_accent__exm5t {\n background-color: var(--accent);\n color: var(--white); }\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 .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_light__2nWhD {\n background-color: var(--light);\n color: var(--dark); }\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 .IconButton-module_iconButton__1xqrL.IconButton-module_contained__gWulJ.IconButton-module_dark__1e6bR {\n background-color: var(--dark);\n color: var(--white); }\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 .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";
|
|
655
|
+
var styles$x = {"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"};
|
|
656
|
+
styleInject(css_248z$x);
|
|
657
657
|
|
|
658
658
|
const IconButton = (props) => {
|
|
659
659
|
const { children, icon, label, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "label", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
660
660
|
const getCssClasses = () => {
|
|
661
661
|
const cssClasses = [];
|
|
662
|
-
cssClasses.push(styles$
|
|
663
|
-
cssClasses.push(styles$
|
|
664
|
-
cssClasses.push(styles$
|
|
665
|
-
cssClasses.push(styles$
|
|
666
|
-
isActive && cssClasses.push(styles$
|
|
667
|
-
disabled && cssClasses.push(styles$
|
|
668
|
-
shadow && cssClasses.push(styles$
|
|
662
|
+
cssClasses.push(styles$x[color]);
|
|
663
|
+
cssClasses.push(styles$x[variant]);
|
|
664
|
+
cssClasses.push(styles$x[size]);
|
|
665
|
+
cssClasses.push(styles$x.iconButton);
|
|
666
|
+
isActive && cssClasses.push(styles$x.active);
|
|
667
|
+
disabled && cssClasses.push(styles$x.disabled);
|
|
668
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
669
669
|
className && cssClasses.push(className);
|
|
670
670
|
return cssClasses.filter(css => css).join(' ');
|
|
671
671
|
};
|
|
@@ -674,9 +674,9 @@ const IconButton = (props) => {
|
|
|
674
674
|
label && React__default["default"].createElement(Typography, null, label)));
|
|
675
675
|
};
|
|
676
676
|
|
|
677
|
-
var css_248z$
|
|
678
|
-
var styles$
|
|
679
|
-
styleInject(css_248z$
|
|
677
|
+
var css_248z$w = ".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 .Checkbox-module_checkboxContainer__2oWhu label {\n margin-bottom: 0;\n margin-left: 0; }\n .Checkbox-module_checkboxContainer__2oWhu label:hover {\n cursor: pointer; }\n\n.Checkbox-module_checkboxLabel__27Y6U.Checkbox-module_disabled__3EXUd {\n color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed; }\n";
|
|
678
|
+
var styles$w = {"checkboxContainer":"Checkbox-module_checkboxContainer__2oWhu","checkboxLabel":"Checkbox-module_checkboxLabel__27Y6U","disabled":"Checkbox-module_disabled__3EXUd"};
|
|
679
|
+
styleInject(css_248z$w);
|
|
680
680
|
|
|
681
681
|
const Checkbox = (props) => {
|
|
682
682
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -711,24 +711,24 @@ const Checkbox = (props) => {
|
|
|
711
711
|
setIsChecked(!isChecked);
|
|
712
712
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
713
713
|
};
|
|
714
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
714
|
+
return (React__default["default"].createElement("div", { className: styles$w.checkboxContainer },
|
|
715
715
|
React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
716
|
-
React__default["default"].createElement("label", { onClick: handleClick, className: styles$
|
|
716
|
+
React__default["default"].createElement("label", { onClick: handleClick, className: styles$w.checkboxLabel + ' ' + (disabled ? styles$w['disabled'] : undefined) }, label),
|
|
717
717
|
React__default["default"].createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
718
718
|
};
|
|
719
719
|
|
|
720
|
-
var css_248z$
|
|
721
|
-
var styles$
|
|
722
|
-
styleInject(css_248z$
|
|
720
|
+
var css_248z$v = ".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 .Chip-module_chip__1cghp svg {\n width: 18px;\n height: 18px; }\n .Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c {\n margin-left: 5px; }\n .Chip-module_chip__1cghp .Chip-module_deleteIcon__34X9c:hover {\n cursor: pointer; }\n .Chip-module_chip__1cghp.Chip-module_primary__198Dq {\n background: var(--primary);\n color: var(--primary-contrast-text); }\n .Chip-module_chip__1cghp.Chip-module_secondary__14H0b {\n background: var(--secondary);\n color: var(--secondary-contrast-text); }\n .Chip-module_chip__1cghp.Chip-module_accent__2LkWr {\n background: var(--accent);\n color: var(--accent-contrast-text); }\n .Chip-module_chip__1cghp.Chip-module_light__2zVYs {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Chip-module_chip__1cghp.Chip-module_dark__2Bg-S {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover {\n cursor: pointer; }\n .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_primary__198Dq {\n background: var(--primary-dark); }\n .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_secondary__14H0b {\n background: var(--secondary-dark); }\n .Chip-module_chip__1cghp.Chip-module_clickable__2Y4x7:hover.Chip-module_accent__2LkWr {\n background: var(--accent-dark); }\n .Chip-module_chip__1cghp.Chip-module_shadow__3TYny {\n box-shadow: var(--shadow); }\n";
|
|
721
|
+
var styles$v = {"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"};
|
|
722
|
+
styleInject(css_248z$v);
|
|
723
723
|
|
|
724
724
|
const Chip = (props) => {
|
|
725
725
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React__default["default"].createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
726
726
|
const getCssClass = () => {
|
|
727
727
|
const cssClasses = [];
|
|
728
|
-
cssClasses.push(styles$
|
|
729
|
-
cssClasses.push(styles$
|
|
730
|
-
shadow && cssClasses.push(styles$
|
|
731
|
-
onClick && cssClasses.push(styles$
|
|
728
|
+
cssClasses.push(styles$v.chip);
|
|
729
|
+
cssClasses.push(styles$v[color]);
|
|
730
|
+
shadow && cssClasses.push(styles$v['shadow']);
|
|
731
|
+
onClick && cssClasses.push(styles$v['clickable']);
|
|
732
732
|
className && cssClasses.push(className);
|
|
733
733
|
return cssClasses.filter(r => r).join(' ');
|
|
734
734
|
};
|
|
@@ -738,10 +738,23 @@ const Chip = (props) => {
|
|
|
738
738
|
};
|
|
739
739
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
740
740
|
React__default["default"].createElement("div", null, children),
|
|
741
|
-
isDeletable && (React__default["default"].createElement("div", { className: styles$
|
|
741
|
+
isDeletable && (React__default["default"].createElement("div", { className: styles$v.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
742
742
|
};
|
|
743
743
|
|
|
744
|
-
|
|
744
|
+
var css_248z$u = ".FormLabel-module_formLabel__1Zv0W {\n margin-bottom: .5rem; }\n";
|
|
745
|
+
var styles$u = {"formLabel":"FormLabel-module_formLabel__1Zv0W"};
|
|
746
|
+
styleInject(css_248z$u);
|
|
747
|
+
|
|
748
|
+
const FormLabel = (props) => {
|
|
749
|
+
const { children, className, htmlFor } = props, rest = __rest(props, ["children", "className", "htmlFor"]);
|
|
750
|
+
const getCssClasses = () => {
|
|
751
|
+
const cssClasses = [];
|
|
752
|
+
cssClasses.push(styles$u.formLabel);
|
|
753
|
+
className && cssClasses.push(className);
|
|
754
|
+
return cssClasses.filter(css => css).join(' ');
|
|
755
|
+
};
|
|
756
|
+
return (React__default["default"].createElement("label", Object.assign({ htmlFor: htmlFor, className: getCssClasses() }, rest), children));
|
|
757
|
+
};
|
|
745
758
|
|
|
746
759
|
const FormGroup = (props) => {
|
|
747
760
|
const { children, className = 'mb-1' } = props;
|
|
@@ -774,9 +787,9 @@ const FileInput = (props) => {
|
|
|
774
787
|
React__default["default"].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))));
|
|
775
788
|
};
|
|
776
789
|
|
|
777
|
-
var css_248z$
|
|
778
|
-
var styles$
|
|
779
|
-
styleInject(css_248z$
|
|
790
|
+
var css_248z$t = ".Select-module_selectContainer__2oizY {\n position: relative; }\n\n.Select-module_select__MSqgU {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .Select-module_select__MSqgU:hover {\n cursor: pointer; }\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";
|
|
791
|
+
var styles$t = {"selectContainer":"Select-module_selectContainer__2oizY","select":"Select-module_select__MSqgU","selectMenu":"Select-module_selectMenu__2vhJt"};
|
|
792
|
+
styleInject(css_248z$t);
|
|
780
793
|
|
|
781
794
|
const Select = (props) => {
|
|
782
795
|
var _a, _b, _c;
|
|
@@ -789,7 +802,7 @@ const Select = (props) => {
|
|
|
789
802
|
const getCssClass = () => {
|
|
790
803
|
const cssClasses = [];
|
|
791
804
|
className && cssClasses.push(className);
|
|
792
|
-
cssClasses.push(styles$
|
|
805
|
+
cssClasses.push(styles$t.select);
|
|
793
806
|
return cssClasses.filter(r => r).join(' ');
|
|
794
807
|
};
|
|
795
808
|
React.useEffect(() => {
|
|
@@ -908,7 +921,7 @@ const Select = (props) => {
|
|
|
908
921
|
}
|
|
909
922
|
};
|
|
910
923
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
911
|
-
React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
924
|
+
React__default["default"].createElement("div", { ref: selectConainter, className: styles$t.selectContainer },
|
|
912
925
|
React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
913
926
|
!multiple && renderSingleViewModel(),
|
|
914
927
|
multiple && renderMultipleViewModel(),
|
|
@@ -916,7 +929,7 @@ const Select = (props) => {
|
|
|
916
929
|
React__default["default"].createElement(ChevronDownSolidIcon, null))),
|
|
917
930
|
isShow &&
|
|
918
931
|
reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
919
|
-
React__default["default"].createElement("div", { className: styles$
|
|
932
|
+
React__default["default"].createElement("div", { className: styles$t.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 } },
|
|
920
933
|
React__default["default"].createElement(List, null, options && options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
921
934
|
multiple &&
|
|
922
935
|
React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -924,23 +937,40 @@ const Select = (props) => {
|
|
|
924
937
|
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
|
|
925
938
|
};
|
|
926
939
|
|
|
927
|
-
var css_248z$
|
|
928
|
-
var styles$
|
|
929
|
-
styleInject(css_248z$
|
|
940
|
+
var css_248z$s = "textarea {\n min-height: calc(10em + 0.75rem + 2px);\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n resize: vertical; }\n textarea:focus {\n outline: none !important;\n border-color: var(--primary); }\n";
|
|
941
|
+
var styles$s = {};
|
|
942
|
+
styleInject(css_248z$s);
|
|
930
943
|
|
|
931
944
|
const Textarea = (props) => {
|
|
932
945
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
933
946
|
const getCssClass = () => {
|
|
934
947
|
const cssClasses = [];
|
|
935
|
-
cssClasses.push(styles$
|
|
948
|
+
cssClasses.push(styles$s.textarea);
|
|
936
949
|
className && cssClasses.push(className);
|
|
937
950
|
return cssClasses.filter(r => r).join(' ');
|
|
938
951
|
};
|
|
939
952
|
return (React__default["default"].createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
940
953
|
};
|
|
941
954
|
|
|
955
|
+
var css_248z$r = ".FormInput-module_formInput__1gAYi {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n -webkit-appearance: none;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n .FormInput-module_formInput__1gAYi:focus {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }\n";
|
|
956
|
+
var styles$r = {"formInput":"FormInput-module_formInput__1gAYi"};
|
|
957
|
+
styleInject(css_248z$r);
|
|
958
|
+
|
|
942
959
|
const FormInput = (props) => {
|
|
943
|
-
const { value, name, type, placeholder, className = 'form-control', isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onChange, onBlur, onKeyDown } = props;
|
|
960
|
+
const { value, name, type, placeholder, className = 'form-control', isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
961
|
+
const getCssClasses = () => {
|
|
962
|
+
const cssClasses = [];
|
|
963
|
+
cssClasses.push(styles$r.formInput);
|
|
964
|
+
className && cssClasses.push(className);
|
|
965
|
+
!isValid && cssClasses.push('is-invalid');
|
|
966
|
+
return cssClasses.filter(css => css).join(' ');
|
|
967
|
+
};
|
|
968
|
+
const handleOnInput = (value, type, name) => {
|
|
969
|
+
onInput && onInput({ value, type, name });
|
|
970
|
+
};
|
|
971
|
+
const handleOnChange = (value, type, name) => {
|
|
972
|
+
onChange && onChange({ value, type, name });
|
|
973
|
+
};
|
|
944
974
|
return (React__default["default"].createElement(React.Fragment, null,
|
|
945
975
|
(type === 'text' ||
|
|
946
976
|
type === 'date' ||
|
|
@@ -951,24 +981,32 @@ const FormInput = (props) => {
|
|
|
951
981
|
type === 'color' ||
|
|
952
982
|
type === 'time')
|
|
953
983
|
&&
|
|
954
|
-
React__default["default"].createElement("input", { id: name, name: name, type: type, className:
|
|
984
|
+
React__default["default"].createElement("input", { id: name, name: name, type: type, className: getCssClasses(), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
|
|
955
985
|
type === 'file' &&
|
|
956
|
-
React__default["default"].createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e =>
|
|
986
|
+
React__default["default"].createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e => handleOnChange(e.target.value, type, name) }, "choose a file"),
|
|
957
987
|
type === 'textarea' &&
|
|
958
|
-
React__default["default"].createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus,
|
|
988
|
+
React__default["default"].createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
|
|
959
989
|
type === 'select' &&
|
|
960
|
-
React__default["default"].createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e =>
|
|
990
|
+
React__default["default"].createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
|
|
961
991
|
type === 'autocomplete' &&
|
|
962
|
-
React__default["default"].createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e =>
|
|
992
|
+
React__default["default"].createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), onKeyDown: onKeyDown, options: options }),
|
|
963
993
|
type === 'checkbox' &&
|
|
964
|
-
React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e =>
|
|
994
|
+
React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value, onKeyDown: onKeyDown }),
|
|
965
995
|
type === 'radio' &&
|
|
966
996
|
React__default["default"].createElement(React.Fragment, null, options.map((option) => React__default["default"].createElement("div", { className: "form-check", key: option.id },
|
|
967
|
-
React__default["default"].createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e =>
|
|
997
|
+
React__default["default"].createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
|
|
968
998
|
React__default["default"].createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
|
|
969
999
|
};
|
|
970
1000
|
|
|
971
|
-
const FormHint = (
|
|
1001
|
+
const FormHint = (props) => {
|
|
1002
|
+
const { children, className = 'form-text text-muted' } = props;
|
|
1003
|
+
const getCssClasses = () => {
|
|
1004
|
+
const cssClasses = [];
|
|
1005
|
+
className && cssClasses.push(className);
|
|
1006
|
+
return cssClasses.filter(css => css).join(' ');
|
|
1007
|
+
};
|
|
1008
|
+
return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
|
|
1009
|
+
};
|
|
972
1010
|
|
|
973
1011
|
const FormError = (props) => {
|
|
974
1012
|
const { className = 'invalid-feedback', errors = [] } = props;
|
|
@@ -1147,11 +1185,11 @@ class Form extends React.Component {
|
|
|
1147
1185
|
return (React__default["default"].createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
|
|
1148
1186
|
this.getControl(fieldKey).config.labelPosition !== 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
|
|
1149
1187
|
this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
|
|
1150
|
-
React__default["default"].createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: (name, value, type) => this.handleInputChange(name, value, type), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
|
|
1188
|
+
React__default["default"].createElement(FormInput, { autoFocus: this.getControl(fieldKey).config.autoFocus, className: this.getControl(fieldKey).config.formControlClassName, isValid: !this.isInvalid(fieldKey), label: this.getControl(fieldKey).config.label, name: fieldKey, options: this.getControl(fieldKey).config.options, placeholder: this.getControl(fieldKey).config.placeholder, textareaOptions: this.getControl(fieldKey).config.textareaOptions, selectOptions: this.getControl(fieldKey).config.selectOptions, autoCompleteOptions: this.getControl(fieldKey).config.autoCompleteOptions, type: this.getControl(fieldKey).type, value: this.getControl(fieldKey).value, disabled: this.getControl(fieldKey).config.disabled, readonly: this.getControl(fieldKey).config.readonly, onChange: ({ name, value, type }) => this.handleInputChange(name, value, type), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
|
|
1151
1189
|
this.getControl(fieldKey).config.labelPosition === 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
|
|
1152
1190
|
this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
|
|
1153
1191
|
this.getControl(fieldKey).config.hint &&
|
|
1154
|
-
React__default["default"].createElement(FormHint,
|
|
1192
|
+
React__default["default"].createElement(FormHint, null, this.getControl(fieldKey).config.hint),
|
|
1155
1193
|
this.getControl(fieldKey).errors &&
|
|
1156
1194
|
React__default["default"].createElement(FormError, { errors: this.getControl(fieldKey).errors })));
|
|
1157
1195
|
})));
|