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.es.js
CHANGED
|
@@ -87,56 +87,56 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
var styles$
|
|
92
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$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";
|
|
91
|
+
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"};
|
|
92
|
+
styleInject(css_248z$V);
|
|
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$V.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$V.contained);
|
|
101
|
+
cssClasses.push(styles$V[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$V.outline);
|
|
105
|
+
cssClasses.push(styles$V[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$V['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$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";
|
|
115
|
+
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"};
|
|
116
|
+
styleInject(css_248z$U);
|
|
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$U[color]);
|
|
123
|
+
cssClasses.push(styles$U.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$U['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$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";
|
|
132
|
+
var styles$T = {"appbarTitle":"AppBarTitle-module_appbarTitle__3J-Z1"};
|
|
133
|
+
styleInject(css_248z$T);
|
|
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$T.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$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";
|
|
168
|
+
var styles$S = {"list":"List-module_list__1ax9w"};
|
|
169
|
+
styleInject(css_248z$S);
|
|
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$S.flush);
|
|
177
177
|
}
|
|
178
|
-
cssClasses.push(styles$
|
|
178
|
+
cssClasses.push(styles$S.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$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";
|
|
186
|
+
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"};
|
|
187
|
+
styleInject(css_248z$R);
|
|
188
188
|
|
|
189
189
|
const ListItem = (props) => {
|
|
190
190
|
const { id, children, color, active, className, isHoverable, disabled, onClick } = props;
|
|
191
191
|
const getCssClasses = () => {
|
|
192
192
|
const cssClasses = [];
|
|
193
193
|
if (active) {
|
|
194
|
-
cssClasses.push(styles$
|
|
194
|
+
cssClasses.push(styles$R['active']);
|
|
195
195
|
}
|
|
196
196
|
if (disabled) {
|
|
197
|
-
cssClasses.push(styles$
|
|
197
|
+
cssClasses.push(styles$R['disabled']);
|
|
198
198
|
}
|
|
199
|
-
color && cssClasses.push(styles$
|
|
200
|
-
cssClasses.push(styles$
|
|
199
|
+
color && cssClasses.push(styles$R[color]);
|
|
200
|
+
cssClasses.push(styles$R.listItem);
|
|
201
201
|
className && cssClasses.push(className);
|
|
202
202
|
return cssClasses.filter(css => css).join(' ');
|
|
203
203
|
};
|
|
@@ -207,32 +207,32 @@ const ListItem = (props) => {
|
|
|
207
207
|
return (React.createElement("li", { id: id, onClick: handleClick, className: getCssClasses() }, children));
|
|
208
208
|
};
|
|
209
209
|
|
|
210
|
-
var css_248z$
|
|
211
|
-
var styles$
|
|
212
|
-
styleInject(css_248z$
|
|
210
|
+
var css_248z$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";
|
|
211
|
+
var styles$Q = {"avatar":"ListItemAvatar-module_avatar__1fjSE"};
|
|
212
|
+
styleInject(css_248z$Q);
|
|
213
213
|
|
|
214
|
-
const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$
|
|
214
|
+
const ListItemAvatar = ({ avatar }) => (React.createElement("div", { className: styles$Q.avatar }, avatar));
|
|
215
215
|
|
|
216
|
-
var css_248z$
|
|
217
|
-
var styles$
|
|
218
|
-
styleInject(css_248z$
|
|
216
|
+
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";
|
|
217
|
+
var styles$P = {"icon":"ListItemIcon-module_icon__-nsUy"};
|
|
218
|
+
styleInject(css_248z$P);
|
|
219
219
|
|
|
220
|
-
const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$
|
|
220
|
+
const ListItemIcon = ({ icon }) => (React.createElement("div", { className: styles$P.icon }, icon));
|
|
221
221
|
|
|
222
|
-
var css_248z$
|
|
223
|
-
var styles$
|
|
224
|
-
styleInject(css_248z$
|
|
222
|
+
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";
|
|
223
|
+
var styles$O = {"listItemAction":"ListItemAction-module_listItemAction__26S66"};
|
|
224
|
+
styleInject(css_248z$O);
|
|
225
225
|
|
|
226
|
-
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$
|
|
226
|
+
const ListItemAction = ({ children, onClick }) => (React.createElement("div", { className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, children));
|
|
227
227
|
|
|
228
|
-
var css_248z$
|
|
229
|
-
var styles$
|
|
230
|
-
styleInject(css_248z$
|
|
228
|
+
var css_248z$N = ".ListItemTextIcon-module_listItemText__ZUWxQ {\n flex: 1; }\n";
|
|
229
|
+
var styles$N = {"listItemText":"ListItemTextIcon-module_listItemText__ZUWxQ"};
|
|
230
|
+
styleInject(css_248z$N);
|
|
231
231
|
|
|
232
232
|
const ListItemText = ({ primary, secondary }) => {
|
|
233
233
|
const getCssClasses = () => {
|
|
234
234
|
const cssClasses = [];
|
|
235
|
-
cssClasses.push(styles$
|
|
235
|
+
cssClasses.push(styles$N.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$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";
|
|
247
|
+
var styles$M = {"selectContainer":"AutoComplete-module_selectContainer__SyqtX","select":"AutoComplete-module_select__2_7JD","selectMenu":"AutoComplete-module_selectMenu__2_ybA"};
|
|
248
|
+
styleInject(css_248z$M);
|
|
249
249
|
|
|
250
250
|
// preset value
|
|
251
251
|
// enter -> delay? -> show results
|
|
@@ -301,7 +301,7 @@ const AutoComplete = (props) => {
|
|
|
301
301
|
const getCssClass = () => {
|
|
302
302
|
const cssClasses = [];
|
|
303
303
|
className && cssClasses.push(className);
|
|
304
|
-
cssClasses.push(styles$
|
|
304
|
+
cssClasses.push(styles$M.select);
|
|
305
305
|
return cssClasses.filter(r => r).join(' ');
|
|
306
306
|
};
|
|
307
307
|
const show = () => setIsShow(true);
|
|
@@ -326,35 +326,35 @@ const AutoComplete = (props) => {
|
|
|
326
326
|
setSearchText('');
|
|
327
327
|
};
|
|
328
328
|
return (React.createElement(React.Fragment, null,
|
|
329
|
-
React.createElement("div", { ref: selectConainter, className: styles$
|
|
329
|
+
React.createElement("div", { ref: selectConainter, className: styles$M.selectContainer },
|
|
330
330
|
React.createElement("div", { className: "d-flex" },
|
|
331
331
|
React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
332
332
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
333
333
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
334
334
|
isShow &&
|
|
335
335
|
React.createElement(React.Fragment, null,
|
|
336
|
-
React.createElement("div", { className: styles$
|
|
336
|
+
React.createElement("div", { className: styles$M.selectMenu },
|
|
337
337
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
338
338
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
339
339
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() })))));
|
|
340
340
|
};
|
|
341
341
|
|
|
342
|
-
var css_248z$
|
|
343
|
-
var styles$
|
|
344
|
-
styleInject(css_248z$
|
|
342
|
+
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";
|
|
343
|
+
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_"};
|
|
344
|
+
styleInject(css_248z$L);
|
|
345
345
|
|
|
346
346
|
const Badge = (props) => {
|
|
347
347
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
348
348
|
const getCssClassesBadgeContainer = () => {
|
|
349
349
|
const cssClasses = [];
|
|
350
|
-
cssClasses.push(styles$
|
|
350
|
+
cssClasses.push(styles$L.badgeContainer);
|
|
351
351
|
className && cssClasses.push(className);
|
|
352
352
|
return cssClasses.filter(css => css).join(' ');
|
|
353
353
|
};
|
|
354
354
|
const getCssClassesBadge = () => {
|
|
355
355
|
const cssClasses = [];
|
|
356
|
-
cssClasses.push(styles$
|
|
357
|
-
cssClasses.push(styles$
|
|
356
|
+
cssClasses.push(styles$L.badge);
|
|
357
|
+
cssClasses.push(styles$L[color]);
|
|
358
358
|
return cssClasses.filter(css => css).join(' ');
|
|
359
359
|
};
|
|
360
360
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -362,42 +362,42 @@ const Badge = (props) => {
|
|
|
362
362
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
363
363
|
};
|
|
364
364
|
|
|
365
|
-
var css_248z$
|
|
366
|
-
var styles$
|
|
367
|
-
styleInject(css_248z$
|
|
365
|
+
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";
|
|
366
|
+
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"};
|
|
367
|
+
styleInject(css_248z$K);
|
|
368
368
|
|
|
369
369
|
const Icon = (props) => {
|
|
370
370
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
371
371
|
const getCssClasses = () => {
|
|
372
372
|
const cssClasses = [];
|
|
373
|
-
cssClasses.push(styles$
|
|
374
|
-
iconColor && cssClasses.push(styles$
|
|
373
|
+
cssClasses.push(styles$K.icon);
|
|
374
|
+
iconColor && cssClasses.push(styles$K[iconColor]);
|
|
375
375
|
className && cssClasses.push(className);
|
|
376
376
|
return cssClasses.filter(css => css).join(' ');
|
|
377
377
|
};
|
|
378
378
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
379
379
|
};
|
|
380
380
|
|
|
381
|
-
var css_248z$
|
|
382
|
-
var styles$
|
|
383
|
-
styleInject(css_248z$
|
|
381
|
+
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";
|
|
382
|
+
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"};
|
|
383
|
+
styleInject(css_248z$J);
|
|
384
384
|
|
|
385
385
|
const ButtonTemplate = (props) => {
|
|
386
386
|
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"]);
|
|
387
387
|
const getCssClasses = () => {
|
|
388
388
|
const cssClasses = [];
|
|
389
|
-
cssClasses.push(styles$
|
|
389
|
+
cssClasses.push(styles$J.button);
|
|
390
390
|
if (variant !== 'outline' && variant !== 'text') {
|
|
391
|
-
cssClasses.push(styles$
|
|
392
|
-
cssClasses.push(styles$
|
|
391
|
+
cssClasses.push(styles$J.btnContained);
|
|
392
|
+
cssClasses.push(styles$J[color]);
|
|
393
393
|
}
|
|
394
394
|
if (variant === 'outline') {
|
|
395
|
-
cssClasses.push(styles$
|
|
396
|
-
cssClasses.push(styles$
|
|
395
|
+
cssClasses.push(styles$J.btnOutline);
|
|
396
|
+
cssClasses.push(styles$J[color]);
|
|
397
397
|
}
|
|
398
398
|
if (variant === 'text') {
|
|
399
|
-
cssClasses.push(styles$
|
|
400
|
-
cssClasses.push(styles$
|
|
399
|
+
cssClasses.push(styles$J.btnText);
|
|
400
|
+
cssClasses.push(styles$J[color]);
|
|
401
401
|
}
|
|
402
402
|
if (isRounded && variant !== 'text') {
|
|
403
403
|
cssClasses.push(`rounded-pill`);
|
|
@@ -411,40 +411,40 @@ const ButtonTemplate = (props) => {
|
|
|
411
411
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
412
412
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
413
413
|
startIcon &&
|
|
414
|
-
React.createElement(Icon, { className: styles$
|
|
414
|
+
React.createElement(Icon, { className: styles$J.startIcon }, startIcon),
|
|
415
415
|
children,
|
|
416
416
|
endIcon &&
|
|
417
|
-
React.createElement(Icon, { className: styles$
|
|
417
|
+
React.createElement(Icon, { className: styles$J.endIcon }, endIcon))));
|
|
418
418
|
};
|
|
419
419
|
|
|
420
420
|
const Button = (props) => {
|
|
421
421
|
return (React.createElement(ButtonTemplate, Object.assign({}, props)));
|
|
422
422
|
};
|
|
423
423
|
|
|
424
|
-
var css_248z$
|
|
425
|
-
var styles$
|
|
426
|
-
styleInject(css_248z$
|
|
424
|
+
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";
|
|
425
|
+
var styles$I = {"buttonGroup":"ButtonGroup-module_buttonGroup__2RS71"};
|
|
426
|
+
styleInject(css_248z$I);
|
|
427
427
|
|
|
428
428
|
const ButtonGroup = (props) => {
|
|
429
429
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
430
430
|
const getCssClasses = () => {
|
|
431
431
|
const cssClasses = [];
|
|
432
|
-
cssClasses.push(styles$
|
|
432
|
+
cssClasses.push(styles$I.buttonGroup);
|
|
433
433
|
className && cssClasses.push(className);
|
|
434
434
|
return cssClasses.filter(css => css).join(' ');
|
|
435
435
|
};
|
|
436
436
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
437
437
|
};
|
|
438
438
|
|
|
439
|
-
var css_248z$
|
|
440
|
-
var styles$
|
|
441
|
-
styleInject(css_248z$
|
|
439
|
+
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";
|
|
440
|
+
var styles$H = {"breadcrumb":"Breadcrumb-module_breadcrumb__2BHXS"};
|
|
441
|
+
styleInject(css_248z$H);
|
|
442
442
|
|
|
443
443
|
const Breadcrumb = (props) => {
|
|
444
444
|
const { children, className } = props;
|
|
445
445
|
const getCssClasses = () => {
|
|
446
446
|
const cssClasses = [];
|
|
447
|
-
cssClasses.push(styles$
|
|
447
|
+
cssClasses.push(styles$H.breadcrumb);
|
|
448
448
|
className && cssClasses.push(className);
|
|
449
449
|
return cssClasses.filter(css => css).join(' ');
|
|
450
450
|
};
|
|
@@ -454,15 +454,15 @@ const Breadcrumb = (props) => {
|
|
|
454
454
|
|
|
455
455
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
456
456
|
|
|
457
|
-
var css_248z$
|
|
458
|
-
var styles$
|
|
459
|
-
styleInject(css_248z$
|
|
457
|
+
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";
|
|
458
|
+
var styles$G = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__1yy-D","active":"BreadcrumbItem-module_active__3iVU2"};
|
|
459
|
+
styleInject(css_248z$G);
|
|
460
460
|
|
|
461
461
|
const BreadcrumbItem = (props) => {
|
|
462
462
|
const { children, className, isActive, onClick } = props;
|
|
463
463
|
const getCssClasses = () => {
|
|
464
464
|
const cssClasses = [];
|
|
465
|
-
cssClasses.push(styles$
|
|
465
|
+
cssClasses.push(styles$G.breadcrumbItem);
|
|
466
466
|
className && cssClasses.push(className);
|
|
467
467
|
isActive && cssClasses.push('active');
|
|
468
468
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -476,106 +476,106 @@ const BreadcrumbItem = (props) => {
|
|
|
476
476
|
wrapper: label => React.createElement("a", null, label) }, children)));
|
|
477
477
|
};
|
|
478
478
|
|
|
479
|
-
var css_248z$
|
|
480
|
-
var styles$
|
|
481
|
-
styleInject(css_248z$
|
|
479
|
+
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";
|
|
480
|
+
var styles$F = {"card":"Card-module_card__31o3Z","shadow":"Card-module_shadow__2lpYq"};
|
|
481
|
+
styleInject(css_248z$F);
|
|
482
482
|
|
|
483
483
|
const Card = (props) => {
|
|
484
484
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
485
485
|
const getCssClasses = () => {
|
|
486
486
|
const cssClasses = [];
|
|
487
|
-
cssClasses.push(styles$
|
|
488
|
-
shadow && cssClasses.push(styles$
|
|
487
|
+
cssClasses.push(styles$F.card);
|
|
488
|
+
shadow && cssClasses.push(styles$F.shadow);
|
|
489
489
|
className && cssClasses.push(className);
|
|
490
490
|
return cssClasses.filter(css => css).join(' ');
|
|
491
491
|
};
|
|
492
492
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
493
493
|
};
|
|
494
494
|
|
|
495
|
-
var css_248z$
|
|
496
|
-
var styles$
|
|
497
|
-
styleInject(css_248z$
|
|
495
|
+
var css_248z$E = ".CardBody-module_cardBody__N8z-L {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem; }\n";
|
|
496
|
+
var styles$E = {"cardBody":"CardBody-module_cardBody__N8z-L"};
|
|
497
|
+
styleInject(css_248z$E);
|
|
498
498
|
|
|
499
499
|
const CardBody = (props) => {
|
|
500
500
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
501
501
|
const getCssClasses = () => {
|
|
502
502
|
const cssClasses = [];
|
|
503
|
-
cssClasses.push(styles$
|
|
503
|
+
cssClasses.push(styles$E.cardBody);
|
|
504
504
|
className && cssClasses.push(className);
|
|
505
505
|
return cssClasses.filter(css => css).join(' ');
|
|
506
506
|
};
|
|
507
507
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
508
508
|
};
|
|
509
509
|
|
|
510
|
-
var css_248z$
|
|
511
|
-
var styles$
|
|
512
|
-
styleInject(css_248z$
|
|
510
|
+
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";
|
|
511
|
+
var styles$D = {"cardFooter":"CardFooter-module_cardFooter__3dYKa"};
|
|
512
|
+
styleInject(css_248z$D);
|
|
513
513
|
|
|
514
514
|
const CardFooter = (props) => {
|
|
515
515
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
516
516
|
const getCssClasses = () => {
|
|
517
517
|
const cssClasses = [];
|
|
518
|
-
cssClasses.push(styles$
|
|
518
|
+
cssClasses.push(styles$D.cardFooter);
|
|
519
519
|
className && cssClasses.push(className);
|
|
520
520
|
return cssClasses.filter(css => css).join(' ');
|
|
521
521
|
};
|
|
522
522
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
523
523
|
};
|
|
524
524
|
|
|
525
|
-
var css_248z$
|
|
526
|
-
var styles$
|
|
527
|
-
styleInject(css_248z$
|
|
525
|
+
var css_248z$C = ".CardSubtitle-module_cardSubtitle__2WWHW {\n color: #6c757d !important; }\n";
|
|
526
|
+
var styles$C = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__2WWHW"};
|
|
527
|
+
styleInject(css_248z$C);
|
|
528
528
|
|
|
529
529
|
const CardSubtitle = (props) => {
|
|
530
530
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
531
531
|
const getCssClasses = () => {
|
|
532
532
|
const cssClasses = [];
|
|
533
|
-
cssClasses.push(styles$
|
|
533
|
+
cssClasses.push(styles$C.cardSubtitle);
|
|
534
534
|
className && cssClasses.push(className);
|
|
535
535
|
return cssClasses.filter(css => css).join(' ');
|
|
536
536
|
};
|
|
537
537
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
538
538
|
};
|
|
539
539
|
|
|
540
|
-
var css_248z$
|
|
541
|
-
var styles$
|
|
542
|
-
styleInject(css_248z$
|
|
540
|
+
var css_248z$B = ".CardText-module_cardText__1LWJi:last-child {\n margin-bottom: 0; }\n";
|
|
541
|
+
var styles$B = {"cardText":"CardText-module_cardText__1LWJi"};
|
|
542
|
+
styleInject(css_248z$B);
|
|
543
543
|
|
|
544
544
|
const CardText = (props) => {
|
|
545
545
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
546
546
|
const getCssClasses = () => {
|
|
547
547
|
const cssClasses = [];
|
|
548
|
-
cssClasses.push(styles$
|
|
548
|
+
cssClasses.push(styles$B.cardText);
|
|
549
549
|
className && cssClasses.push(className);
|
|
550
550
|
return cssClasses.filter(css => css).join(' ');
|
|
551
551
|
};
|
|
552
552
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), props.children));
|
|
553
553
|
};
|
|
554
554
|
|
|
555
|
-
var css_248z$
|
|
556
|
-
var styles$
|
|
557
|
-
styleInject(css_248z$
|
|
555
|
+
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";
|
|
556
|
+
var styles$A = {"cardTitle":"CardTitle-module_cardTitle__24Amb"};
|
|
557
|
+
styleInject(css_248z$A);
|
|
558
558
|
|
|
559
559
|
const CardTitle = (props) => {
|
|
560
560
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
561
561
|
const getCssClasses = () => {
|
|
562
562
|
const cssClasses = [];
|
|
563
|
-
cssClasses.push(styles$
|
|
563
|
+
cssClasses.push(styles$A.cardTitle);
|
|
564
564
|
className && cssClasses.push(className);
|
|
565
565
|
return cssClasses.filter(css => css).join(' ');
|
|
566
566
|
};
|
|
567
567
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
568
568
|
};
|
|
569
569
|
|
|
570
|
-
var css_248z$
|
|
571
|
-
var styles$
|
|
572
|
-
styleInject(css_248z$
|
|
570
|
+
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";
|
|
571
|
+
var styles$z = {"cardImage":"CardImage-module_cardImage__1tZM4"};
|
|
572
|
+
styleInject(css_248z$z);
|
|
573
573
|
|
|
574
574
|
const CardImage = (props) => {
|
|
575
575
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
576
576
|
const getCssClasses = () => {
|
|
577
577
|
const cssClasses = [];
|
|
578
|
-
cssClasses.push(styles$
|
|
578
|
+
cssClasses.push(styles$z.cardImage);
|
|
579
579
|
className && cssClasses.push(className);
|
|
580
580
|
return cssClasses.filter(css => css).join(' ');
|
|
581
581
|
};
|
|
@@ -624,15 +624,15 @@ const CircleSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true
|
|
|
624
624
|
const ChevronLeftSolidIcon = () => (React.createElement("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512" },
|
|
625
625
|
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" })));
|
|
626
626
|
|
|
627
|
-
var css_248z$
|
|
628
|
-
var styles$
|
|
629
|
-
styleInject(css_248z$
|
|
627
|
+
var css_248z$y = ".Typography-module_typography__2bM6E {\n text-overflow: ellipsis;\n overflow: hidden !important; }\n";
|
|
628
|
+
var styles$y = {"typography":"Typography-module_typography__2bM6E"};
|
|
629
|
+
styleInject(css_248z$y);
|
|
630
630
|
|
|
631
631
|
const Wrapper = (props) => {
|
|
632
632
|
const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
|
|
633
633
|
const getCssClasses = () => {
|
|
634
634
|
const cssClasses = [];
|
|
635
|
-
cssClasses.push(styles$
|
|
635
|
+
cssClasses.push(styles$y.typography);
|
|
636
636
|
className && cssClasses.push(className);
|
|
637
637
|
return cssClasses.filter(css => css).join(' ');
|
|
638
638
|
};
|
|
@@ -643,21 +643,21 @@ const Typography = (_a) => {
|
|
|
643
643
|
return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
|
|
644
644
|
};
|
|
645
645
|
|
|
646
|
-
var css_248z$
|
|
647
|
-
var styles$
|
|
648
|
-
styleInject(css_248z$
|
|
646
|
+
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";
|
|
647
|
+
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"};
|
|
648
|
+
styleInject(css_248z$x);
|
|
649
649
|
|
|
650
650
|
const IconButton = (props) => {
|
|
651
651
|
const { children, icon, label, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "label", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
652
652
|
const getCssClasses = () => {
|
|
653
653
|
const cssClasses = [];
|
|
654
|
-
cssClasses.push(styles$
|
|
655
|
-
cssClasses.push(styles$
|
|
656
|
-
cssClasses.push(styles$
|
|
657
|
-
cssClasses.push(styles$
|
|
658
|
-
isActive && cssClasses.push(styles$
|
|
659
|
-
disabled && cssClasses.push(styles$
|
|
660
|
-
shadow && cssClasses.push(styles$
|
|
654
|
+
cssClasses.push(styles$x[color]);
|
|
655
|
+
cssClasses.push(styles$x[variant]);
|
|
656
|
+
cssClasses.push(styles$x[size]);
|
|
657
|
+
cssClasses.push(styles$x.iconButton);
|
|
658
|
+
isActive && cssClasses.push(styles$x.active);
|
|
659
|
+
disabled && cssClasses.push(styles$x.disabled);
|
|
660
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
661
661
|
className && cssClasses.push(className);
|
|
662
662
|
return cssClasses.filter(css => css).join(' ');
|
|
663
663
|
};
|
|
@@ -666,9 +666,9 @@ const IconButton = (props) => {
|
|
|
666
666
|
label && React.createElement(Typography, null, label)));
|
|
667
667
|
};
|
|
668
668
|
|
|
669
|
-
var css_248z$
|
|
670
|
-
var styles$
|
|
671
|
-
styleInject(css_248z$
|
|
669
|
+
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";
|
|
670
|
+
var styles$w = {"checkboxContainer":"Checkbox-module_checkboxContainer__2oWhu","checkboxLabel":"Checkbox-module_checkboxLabel__27Y6U","disabled":"Checkbox-module_disabled__3EXUd"};
|
|
671
|
+
styleInject(css_248z$w);
|
|
672
672
|
|
|
673
673
|
const Checkbox = (props) => {
|
|
674
674
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -703,24 +703,24 @@ const Checkbox = (props) => {
|
|
|
703
703
|
setIsChecked(!isChecked);
|
|
704
704
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
705
705
|
};
|
|
706
|
-
return (React.createElement("div", { className: styles$
|
|
706
|
+
return (React.createElement("div", { className: styles$w.checkboxContainer },
|
|
707
707
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
708
|
-
React.createElement("label", { onClick: handleClick, className: styles$
|
|
708
|
+
React.createElement("label", { onClick: handleClick, className: styles$w.checkboxLabel + ' ' + (disabled ? styles$w['disabled'] : undefined) }, label),
|
|
709
709
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
710
710
|
};
|
|
711
711
|
|
|
712
|
-
var css_248z$
|
|
713
|
-
var styles$
|
|
714
|
-
styleInject(css_248z$
|
|
712
|
+
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";
|
|
713
|
+
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"};
|
|
714
|
+
styleInject(css_248z$v);
|
|
715
715
|
|
|
716
716
|
const Chip = (props) => {
|
|
717
717
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
718
718
|
const getCssClass = () => {
|
|
719
719
|
const cssClasses = [];
|
|
720
|
-
cssClasses.push(styles$
|
|
721
|
-
cssClasses.push(styles$
|
|
722
|
-
shadow && cssClasses.push(styles$
|
|
723
|
-
onClick && cssClasses.push(styles$
|
|
720
|
+
cssClasses.push(styles$v.chip);
|
|
721
|
+
cssClasses.push(styles$v[color]);
|
|
722
|
+
shadow && cssClasses.push(styles$v['shadow']);
|
|
723
|
+
onClick && cssClasses.push(styles$v['clickable']);
|
|
724
724
|
className && cssClasses.push(className);
|
|
725
725
|
return cssClasses.filter(r => r).join(' ');
|
|
726
726
|
};
|
|
@@ -730,10 +730,23 @@ const Chip = (props) => {
|
|
|
730
730
|
};
|
|
731
731
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
732
732
|
React.createElement("div", null, children),
|
|
733
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
733
|
+
isDeletable && (React.createElement("div", { className: styles$v.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
734
734
|
};
|
|
735
735
|
|
|
736
|
-
|
|
736
|
+
var css_248z$u = ".FormLabel-module_formLabel__1Zv0W {\n margin-bottom: .5rem; }\n";
|
|
737
|
+
var styles$u = {"formLabel":"FormLabel-module_formLabel__1Zv0W"};
|
|
738
|
+
styleInject(css_248z$u);
|
|
739
|
+
|
|
740
|
+
const FormLabel = (props) => {
|
|
741
|
+
const { children, className, htmlFor } = props, rest = __rest(props, ["children", "className", "htmlFor"]);
|
|
742
|
+
const getCssClasses = () => {
|
|
743
|
+
const cssClasses = [];
|
|
744
|
+
cssClasses.push(styles$u.formLabel);
|
|
745
|
+
className && cssClasses.push(className);
|
|
746
|
+
return cssClasses.filter(css => css).join(' ');
|
|
747
|
+
};
|
|
748
|
+
return (React.createElement("label", Object.assign({ htmlFor: htmlFor, className: getCssClasses() }, rest), children));
|
|
749
|
+
};
|
|
737
750
|
|
|
738
751
|
const FormGroup = (props) => {
|
|
739
752
|
const { children, className = 'mb-1' } = props;
|
|
@@ -766,9 +779,9 @@ const FileInput = (props) => {
|
|
|
766
779
|
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))));
|
|
767
780
|
};
|
|
768
781
|
|
|
769
|
-
var css_248z$
|
|
770
|
-
var styles$
|
|
771
|
-
styleInject(css_248z$
|
|
782
|
+
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";
|
|
783
|
+
var styles$t = {"selectContainer":"Select-module_selectContainer__2oizY","select":"Select-module_select__MSqgU","selectMenu":"Select-module_selectMenu__2vhJt"};
|
|
784
|
+
styleInject(css_248z$t);
|
|
772
785
|
|
|
773
786
|
const Select = (props) => {
|
|
774
787
|
var _a, _b, _c;
|
|
@@ -781,7 +794,7 @@ const Select = (props) => {
|
|
|
781
794
|
const getCssClass = () => {
|
|
782
795
|
const cssClasses = [];
|
|
783
796
|
className && cssClasses.push(className);
|
|
784
|
-
cssClasses.push(styles$
|
|
797
|
+
cssClasses.push(styles$t.select);
|
|
785
798
|
return cssClasses.filter(r => r).join(' ');
|
|
786
799
|
};
|
|
787
800
|
useEffect(() => {
|
|
@@ -900,7 +913,7 @@ const Select = (props) => {
|
|
|
900
913
|
}
|
|
901
914
|
};
|
|
902
915
|
return (React.createElement(React.Fragment, null,
|
|
903
|
-
React.createElement("div", { ref: selectConainter, className: styles$
|
|
916
|
+
React.createElement("div", { ref: selectConainter, className: styles$t.selectContainer },
|
|
904
917
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
905
918
|
!multiple && renderSingleViewModel(),
|
|
906
919
|
multiple && renderMultipleViewModel(),
|
|
@@ -908,7 +921,7 @@ const Select = (props) => {
|
|
|
908
921
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
909
922
|
isShow &&
|
|
910
923
|
createPortal(React.createElement(React.Fragment, null,
|
|
911
|
-
React.createElement("div", { className: styles$
|
|
924
|
+
React.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 } },
|
|
912
925
|
React.createElement(List, null, options && options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
913
926
|
multiple &&
|
|
914
927
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -916,23 +929,40 @@ const Select = (props) => {
|
|
|
916
929
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body))));
|
|
917
930
|
};
|
|
918
931
|
|
|
919
|
-
var css_248z$
|
|
920
|
-
var styles$
|
|
921
|
-
styleInject(css_248z$
|
|
932
|
+
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";
|
|
933
|
+
var styles$s = {};
|
|
934
|
+
styleInject(css_248z$s);
|
|
922
935
|
|
|
923
936
|
const Textarea = (props) => {
|
|
924
937
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
925
938
|
const getCssClass = () => {
|
|
926
939
|
const cssClasses = [];
|
|
927
|
-
cssClasses.push(styles$
|
|
940
|
+
cssClasses.push(styles$s.textarea);
|
|
928
941
|
className && cssClasses.push(className);
|
|
929
942
|
return cssClasses.filter(r => r).join(' ');
|
|
930
943
|
};
|
|
931
944
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
932
945
|
};
|
|
933
946
|
|
|
947
|
+
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";
|
|
948
|
+
var styles$r = {"formInput":"FormInput-module_formInput__1gAYi"};
|
|
949
|
+
styleInject(css_248z$r);
|
|
950
|
+
|
|
934
951
|
const FormInput = (props) => {
|
|
935
|
-
const { value, name, type, placeholder, className = 'form-control', isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onChange, onBlur, onKeyDown } = props;
|
|
952
|
+
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;
|
|
953
|
+
const getCssClasses = () => {
|
|
954
|
+
const cssClasses = [];
|
|
955
|
+
cssClasses.push(styles$r.formInput);
|
|
956
|
+
className && cssClasses.push(className);
|
|
957
|
+
!isValid && cssClasses.push('is-invalid');
|
|
958
|
+
return cssClasses.filter(css => css).join(' ');
|
|
959
|
+
};
|
|
960
|
+
const handleOnInput = (value, type, name) => {
|
|
961
|
+
onInput && onInput({ value, type, name });
|
|
962
|
+
};
|
|
963
|
+
const handleOnChange = (value, type, name) => {
|
|
964
|
+
onChange && onChange({ value, type, name });
|
|
965
|
+
};
|
|
936
966
|
return (React.createElement(Fragment, null,
|
|
937
967
|
(type === 'text' ||
|
|
938
968
|
type === 'date' ||
|
|
@@ -943,24 +973,32 @@ const FormInput = (props) => {
|
|
|
943
973
|
type === 'color' ||
|
|
944
974
|
type === 'time')
|
|
945
975
|
&&
|
|
946
|
-
React.createElement("input", { id: name, name: name, type: type, className:
|
|
976
|
+
React.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 }),
|
|
947
977
|
type === 'file' &&
|
|
948
|
-
React.createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: e =>
|
|
978
|
+
React.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"),
|
|
949
979
|
type === 'textarea' &&
|
|
950
|
-
React.createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus,
|
|
980
|
+
React.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' } }),
|
|
951
981
|
type === 'select' &&
|
|
952
|
-
React.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 =>
|
|
982
|
+
React.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 }),
|
|
953
983
|
type === 'autocomplete' &&
|
|
954
|
-
React.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 =>
|
|
984
|
+
React.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 }),
|
|
955
985
|
type === 'checkbox' &&
|
|
956
|
-
React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e =>
|
|
986
|
+
React.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 }),
|
|
957
987
|
type === 'radio' &&
|
|
958
988
|
React.createElement(Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
|
|
959
|
-
React.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e =>
|
|
989
|
+
React.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 }),
|
|
960
990
|
React.createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
|
|
961
991
|
};
|
|
962
992
|
|
|
963
|
-
const FormHint = (
|
|
993
|
+
const FormHint = (props) => {
|
|
994
|
+
const { children, className = 'form-text text-muted' } = props;
|
|
995
|
+
const getCssClasses = () => {
|
|
996
|
+
const cssClasses = [];
|
|
997
|
+
className && cssClasses.push(className);
|
|
998
|
+
return cssClasses.filter(css => css).join(' ');
|
|
999
|
+
};
|
|
1000
|
+
return (React.createElement("small", { className: getCssClasses() }, children));
|
|
1001
|
+
};
|
|
964
1002
|
|
|
965
1003
|
const FormError = (props) => {
|
|
966
1004
|
const { className = 'invalid-feedback', errors = [] } = props;
|
|
@@ -1139,11 +1177,11 @@ class Form extends Component {
|
|
|
1139
1177
|
return (React.createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
|
|
1140
1178
|
this.getControl(fieldKey).config.labelPosition !== 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
|
|
1141
1179
|
this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
|
|
1142
|
-
React.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) }),
|
|
1180
|
+
React.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) }),
|
|
1143
1181
|
this.getControl(fieldKey).config.labelPosition === 'behind' && this.getControl(fieldKey).type !== 'checkbox' &&
|
|
1144
1182
|
this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
|
|
1145
1183
|
this.getControl(fieldKey).config.hint &&
|
|
1146
|
-
React.createElement(FormHint,
|
|
1184
|
+
React.createElement(FormHint, null, this.getControl(fieldKey).config.hint),
|
|
1147
1185
|
this.getControl(fieldKey).errors &&
|
|
1148
1186
|
React.createElement(FormError, { errors: this.getControl(fieldKey).errors })));
|
|
1149
1187
|
})));
|