react-asc 25.5.1 → 25.5.3
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/Form.d.ts +4 -2
- package/components/Form/FormGroup.d.ts +2 -2
- package/index.es.js +223 -204
- package/index.js +223 -204
- package/package.json +2 -9
package/index.es.js
CHANGED
|
@@ -61,93 +61,93 @@ function styleInject(css, ref) {
|
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
var css_248z$
|
|
65
|
-
var styles$
|
|
66
|
-
styleInject(css_248z$
|
|
64
|
+
var css_248z$16 = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\n.Alert-module_alert__b4tbk.Alert-module_shadow__5bz-7 {\n box-shadow: var(--shadow);\n}\n\n.Alert-module_contained__EM0x6.Alert-module_primary__q4pNj {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Alert-module_contained__EM0x6.Alert-module_accent__a2WIl {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Alert-module_contained__EM0x6.Alert-module_secondary__syXKX {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Alert-module_contained__EM0x6.Alert-module_light__VKCXF {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Alert-module_contained__EM0x6.Alert-module_dark__3c-Hm {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Alert-module_outline__T2262.Alert-module_primary__q4pNj {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important;\n}\n.Alert-module_outline__T2262.Alert-module_secondary__syXKX {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important;\n}\n.Alert-module_outline__T2262.Alert-module_accent__a2WIl {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important;\n}\n.Alert-module_outline__T2262.Alert-module_light__VKCXF {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important;\n}\n.Alert-module_outline__T2262.Alert-module_dark__3c-Hm {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important;\n}";
|
|
65
|
+
var styles$16 = {"alert":"Alert-module_alert__b4tbk","shadow":"Alert-module_shadow__5bz-7","contained":"Alert-module_contained__EM0x6","primary":"Alert-module_primary__q4pNj","accent":"Alert-module_accent__a2WIl","secondary":"Alert-module_secondary__syXKX","light":"Alert-module_light__VKCXF","dark":"Alert-module_dark__3c-Hm","outline":"Alert-module_outline__T2262"};
|
|
66
|
+
styleInject(css_248z$16);
|
|
67
67
|
|
|
68
68
|
const Alert = (props) => {
|
|
69
69
|
const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true, ...rest } = props;
|
|
70
70
|
const getCssClasses = () => {
|
|
71
71
|
const cssClasses = [];
|
|
72
|
-
cssClasses.push(styles$
|
|
72
|
+
cssClasses.push(styles$16.alert);
|
|
73
73
|
if (variant === VARIANT.contained) {
|
|
74
|
-
cssClasses.push(styles$
|
|
75
|
-
cssClasses.push(styles$
|
|
74
|
+
cssClasses.push(styles$16.contained);
|
|
75
|
+
cssClasses.push(styles$16[color]);
|
|
76
76
|
}
|
|
77
77
|
if (variant === VARIANT.outline) {
|
|
78
|
-
cssClasses.push(styles$
|
|
79
|
-
cssClasses.push(styles$
|
|
78
|
+
cssClasses.push(styles$16.outline);
|
|
79
|
+
cssClasses.push(styles$16[color]);
|
|
80
80
|
}
|
|
81
|
-
shadow && cssClasses.push(styles$
|
|
81
|
+
shadow && cssClasses.push(styles$16['shadow']);
|
|
82
82
|
className && cssClasses.push(className);
|
|
83
83
|
return cssClasses.filter(r => r).join(' ');
|
|
84
84
|
};
|
|
85
85
|
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
-
var css_248z$
|
|
89
|
-
var styles$
|
|
90
|
-
styleInject(css_248z$
|
|
88
|
+
var css_248z$15 = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem var(--1);\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: 0 4px 2px -2px var(--shadowColor);\n}";
|
|
89
|
+
var styles$15 = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module_primary__xMqXD","secondary":"AppBar-module_secondary__8MkLA","accent":"AppBar-module_accent__vHbkp","light":"AppBar-module_light__HGy3y","dark":"AppBar-module_dark__ILq96","shadow":"AppBar-module_shadow__gQN8s"};
|
|
90
|
+
styleInject(css_248z$15);
|
|
91
91
|
|
|
92
92
|
const AppBar = (props) => {
|
|
93
93
|
const { children, className, color = COLOR.primary, shadow = true, ...rest } = props;
|
|
94
94
|
const getCssClasses = () => {
|
|
95
95
|
const cssClasses = [];
|
|
96
|
-
cssClasses.push(styles$
|
|
97
|
-
cssClasses.push(styles$
|
|
98
|
-
shadow && cssClasses.push(styles$
|
|
96
|
+
cssClasses.push(styles$15[color]);
|
|
97
|
+
cssClasses.push(styles$15.appbar);
|
|
98
|
+
shadow && cssClasses.push(styles$15['shadow']);
|
|
99
99
|
className && cssClasses.push(className);
|
|
100
100
|
return cssClasses.filter(r => r).join(' ');
|
|
101
101
|
};
|
|
102
102
|
return (React.createElement("nav", { className: getCssClasses(), ...rest }, children));
|
|
103
103
|
};
|
|
104
104
|
|
|
105
|
-
var css_248z$
|
|
106
|
-
var styles$
|
|
107
|
-
styleInject(css_248z$
|
|
105
|
+
var css_248z$14 = ".AppBarTitle-module_appbarTitle__RsFg5 {\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n font-size: 1.25rem;\n line-height: 1.8;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden !important;\n display: inline-block;\n}\n.AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer;\n}";
|
|
106
|
+
var styles$14 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
107
|
+
styleInject(css_248z$14);
|
|
108
108
|
|
|
109
109
|
const AppBarTitle = (props) => {
|
|
110
110
|
const { children, className, onClick } = props;
|
|
111
111
|
const getCssClass = () => {
|
|
112
112
|
const cssClasses = [];
|
|
113
|
-
cssClasses.push(styles$
|
|
113
|
+
cssClasses.push(styles$14.appbarTitle);
|
|
114
114
|
className && cssClasses.push(className);
|
|
115
115
|
return cssClasses.filter(r => r).join(' ');
|
|
116
116
|
};
|
|
117
117
|
return (React.createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
118
118
|
};
|
|
119
119
|
|
|
120
|
-
var css_248z$
|
|
121
|
-
var styles$
|
|
122
|
-
styleInject(css_248z$
|
|
120
|
+
var css_248z$13 = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary);\n}\n.Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent);\n}\n.Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary);\n}\n.Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light);\n}\n.Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark);\n}";
|
|
121
|
+
var styles$13 = {"icon":"Icon-module_icon__lFKCA","primary":"Icon-module_primary__3fID-","accent":"Icon-module_accent__aZXGb","secondary":"Icon-module_secondary__HKKop","light":"Icon-module_light__-ApMm","dark":"Icon-module_dark__DpCIK"};
|
|
122
|
+
styleInject(css_248z$13);
|
|
123
123
|
|
|
124
124
|
const Icon = (props) => {
|
|
125
125
|
const { children, iconColor, className, ...rest } = props;
|
|
126
126
|
const getCssClasses = () => {
|
|
127
127
|
const cssClasses = [];
|
|
128
|
-
cssClasses.push(styles$
|
|
129
|
-
iconColor && cssClasses.push(styles$
|
|
128
|
+
cssClasses.push(styles$13.icon);
|
|
129
|
+
iconColor && cssClasses.push(styles$13[iconColor]);
|
|
130
130
|
className && cssClasses.push(className);
|
|
131
131
|
return cssClasses.filter(css => css).join(' ');
|
|
132
132
|
};
|
|
133
133
|
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
134
134
|
};
|
|
135
135
|
|
|
136
|
-
var css_248z$
|
|
137
|
-
var styles$
|
|
138
|
-
styleInject(css_248z$
|
|
136
|
+
var css_248z$12 = ".IconButton-module_iconButton__rpCPQ {\n border-radius: 100%;\n padding: 0px;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n min-width: auto;\n box-shadow: none;\n font-weight: 400;\n text-align: center;\n vertical-align: middle;\n -webkit-user-select: none;\n user-select: none;\n background-color: transparent;\n font-size: 1rem;\n line-height: 1.5;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: none;\n}\n.IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n color: var(--dark-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n background-color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n background-color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n background-color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n background-color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n background-color: var(--dark-light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ:focus:not(.IconButton-module_iconButton__rpCPQ.IconButton-module_disabled__QB0ZV) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}";
|
|
137
|
+
var styles$12 = {"iconButton":"IconButton-module_iconButton__rpCPQ","shadow":"IconButton-module_shadow__Uw0RK","md":"IconButton-module_md__XnuSk","lg":"IconButton-module_lg__arEvo","text":"IconButton-module_text__Ualag","active":"IconButton-module_active__VIqU9","primary":"IconButton-module_primary__vbo-G","secondary":"IconButton-module_secondary__AiNAY","accent":"IconButton-module_accent__QRzM2","light":"IconButton-module_light__YNEiO","dark":"IconButton-module_dark__gnbUH","disabled":"IconButton-module_disabled__QB0ZV","contained":"IconButton-module_contained__k7vGA"};
|
|
138
|
+
styleInject(css_248z$12);
|
|
139
139
|
|
|
140
140
|
const IconButton = (props) => {
|
|
141
141
|
const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow, ...rest } = props;
|
|
142
142
|
const getCssClasses = () => {
|
|
143
143
|
const cssClasses = [];
|
|
144
|
-
cssClasses.push(styles$
|
|
145
|
-
cssClasses.push(styles$
|
|
146
|
-
cssClasses.push(styles$
|
|
147
|
-
cssClasses.push(styles$
|
|
148
|
-
isActive && cssClasses.push(styles$
|
|
149
|
-
disabled && cssClasses.push(styles$
|
|
150
|
-
shadow && cssClasses.push(styles$
|
|
144
|
+
cssClasses.push(styles$12[color]);
|
|
145
|
+
cssClasses.push(styles$12[variant]);
|
|
146
|
+
cssClasses.push(styles$12[size]);
|
|
147
|
+
cssClasses.push(styles$12.iconButton);
|
|
148
|
+
isActive && cssClasses.push(styles$12.active);
|
|
149
|
+
disabled && cssClasses.push(styles$12.disabled);
|
|
150
|
+
shadow && cssClasses.push(styles$12.shadow);
|
|
151
151
|
className && cssClasses.push(className);
|
|
152
152
|
return cssClasses.filter(css => css).join(' ');
|
|
153
153
|
};
|
|
@@ -292,9 +292,9 @@ const Portal$1 = ({ children, target = document.body, className }) => {
|
|
|
292
292
|
return createPortal(children, containerEl);
|
|
293
293
|
};
|
|
294
294
|
|
|
295
|
-
var css_248z$
|
|
296
|
-
var styles$
|
|
297
|
-
styleInject(css_248z$
|
|
295
|
+
var css_248z$11 = ".Backdrop-module_backdrop__IRMoL {\n height: 100%;\n width: 100%;\n position: absolute;\n opacity: 0.5;\n z-index: 1040;\n top: 0;\n left: 0;\n background-color: #000;\n}\n.Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n opacity: 0;\n}";
|
|
296
|
+
var styles$11 = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
297
|
+
styleInject(css_248z$11);
|
|
298
298
|
|
|
299
299
|
const Backdrop = (props) => {
|
|
300
300
|
const { target = document.body, isTransparent = false, onClick, style, ...rest } = props;
|
|
@@ -304,8 +304,8 @@ const Backdrop = (props) => {
|
|
|
304
304
|
};
|
|
305
305
|
const getCssClasses = () => {
|
|
306
306
|
const cssClasses = [];
|
|
307
|
-
cssClasses.push(styles$
|
|
308
|
-
isTransparent && cssClasses.push(styles$
|
|
307
|
+
cssClasses.push(styles$11.backdrop);
|
|
308
|
+
isTransparent && cssClasses.push(styles$11['isTransparent']);
|
|
309
309
|
return cssClasses.filter(css => css).join(' ');
|
|
310
310
|
};
|
|
311
311
|
const getStyles = () => {
|
|
@@ -315,34 +315,34 @@ const Backdrop = (props) => {
|
|
|
315
315
|
React.createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles(), ...rest })));
|
|
316
316
|
};
|
|
317
317
|
|
|
318
|
-
var css_248z
|
|
319
|
-
var styles
|
|
320
|
-
styleInject(css_248z
|
|
318
|
+
var css_248z$10 = ".List-module_list__gpZ41 {\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}";
|
|
319
|
+
var styles$10 = {"list":"List-module_list__gpZ41"};
|
|
320
|
+
styleInject(css_248z$10);
|
|
321
321
|
|
|
322
322
|
const List = (props) => {
|
|
323
323
|
const { children, className, isFlush, ...rest } = props;
|
|
324
324
|
const getCssClasses = () => {
|
|
325
325
|
const cssClasses = [];
|
|
326
|
-
isFlush && cssClasses.push(styles
|
|
327
|
-
cssClasses.push(styles
|
|
326
|
+
isFlush && cssClasses.push(styles$10.flush);
|
|
327
|
+
cssClasses.push(styles$10.list);
|
|
328
328
|
className && cssClasses.push(className);
|
|
329
329
|
return cssClasses.filter(css => css).join(' ');
|
|
330
330
|
};
|
|
331
331
|
return (React.createElement("ul", { className: getCssClasses(), ...rest }, children));
|
|
332
332
|
};
|
|
333
333
|
|
|
334
|
-
var css_248z
|
|
335
|
-
var styles
|
|
336
|
-
styleInject(css_248z
|
|
334
|
+
var css_248z$$ = ".ListItem-module_listItem__Pk1AP {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease;\n}\n.ListItem-module_listItem__Pk1AP:hover, .ListItem-module_listItem__Pk1AP.ListItem-module_active__zm2q8 {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0;\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit;\n}";
|
|
335
|
+
var styles$$ = {"listItem":"ListItem-module_listItem__Pk1AP","active":"ListItem-module_active__zm2q8","primary":"ListItem-module_primary__F6Qja","accent":"ListItem-module_accent__pg3Ha","secondary":"ListItem-module_secondary__d0drD","light":"ListItem-module_light__37kby","dark":"ListItem-module_dark__ZxQTF","disabled":"ListItem-module_disabled__DQLKl"};
|
|
336
|
+
styleInject(css_248z$$);
|
|
337
337
|
|
|
338
338
|
const ListItem = (props) => {
|
|
339
339
|
const { children, color, active, className, disabled, onClick, ...rest } = props;
|
|
340
340
|
const getCssClasses = () => {
|
|
341
341
|
const cssClasses = [];
|
|
342
|
-
cssClasses.push(styles
|
|
343
|
-
color && cssClasses.push(styles
|
|
344
|
-
active && cssClasses.push(styles
|
|
345
|
-
disabled && cssClasses.push(styles
|
|
342
|
+
cssClasses.push(styles$$.listItem);
|
|
343
|
+
color && cssClasses.push(styles$$[color]);
|
|
344
|
+
active && cssClasses.push(styles$$['active']);
|
|
345
|
+
disabled && cssClasses.push(styles$$['disabled']);
|
|
346
346
|
className && cssClasses.push(className);
|
|
347
347
|
return cssClasses.filter(css => css).join(' ');
|
|
348
348
|
};
|
|
@@ -352,32 +352,32 @@ const ListItem = (props) => {
|
|
|
352
352
|
return (React.createElement("li", { onClick: handleClick, className: getCssClasses(), ...rest }, children));
|
|
353
353
|
};
|
|
354
354
|
|
|
355
|
-
var css_248z$
|
|
356
|
-
var styles$
|
|
355
|
+
var css_248z$_ = ".ListItemAvatar-module_avatar__sVWfR {\n display: flex;\n align-items: center;\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%;\n}";
|
|
356
|
+
var styles$_ = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
357
|
+
styleInject(css_248z$_);
|
|
358
|
+
|
|
359
|
+
const ListItemAvatar = ({ avatar, ...rest }) => (React.createElement("div", { className: styles$_.avatar, ...rest }, avatar));
|
|
360
|
+
|
|
361
|
+
var css_248z$Z = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px;\n}";
|
|
362
|
+
var styles$Z = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
357
363
|
styleInject(css_248z$Z);
|
|
358
364
|
|
|
359
|
-
const
|
|
365
|
+
const ListItemIcon = ({ icon, ...rest }) => (React.createElement("div", { className: styles$Z.icon, ...rest }, icon));
|
|
360
366
|
|
|
361
|
-
var css_248z$Y = ".
|
|
362
|
-
var styles$Y = {"
|
|
367
|
+
var css_248z$Y = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px;\n}";
|
|
368
|
+
var styles$Y = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
363
369
|
styleInject(css_248z$Y);
|
|
364
370
|
|
|
365
|
-
const
|
|
371
|
+
const ListItemAction = ({ children, onClick, ...rest }) => (React.createElement("div", { className: styles$Y.listItemAction, onClick: (e) => onClick && onClick(e), ...rest }, children));
|
|
366
372
|
|
|
367
|
-
var css_248z$X = ".
|
|
368
|
-
var styles$X = {"
|
|
373
|
+
var css_248z$X = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
374
|
+
var styles$X = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
369
375
|
styleInject(css_248z$X);
|
|
370
376
|
|
|
371
|
-
const ListItemAction = ({ children, onClick, ...rest }) => (React.createElement("div", { className: styles$X.listItemAction, onClick: (e) => onClick && onClick(e), ...rest }, children));
|
|
372
|
-
|
|
373
|
-
var css_248z$W = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
374
|
-
var styles$W = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
375
|
-
styleInject(css_248z$W);
|
|
376
|
-
|
|
377
377
|
const ListItemText = ({ primary, secondary, ...rest }) => {
|
|
378
378
|
const getCssClasses = () => {
|
|
379
379
|
const cssClasses = [];
|
|
380
|
-
cssClasses.push(styles$
|
|
380
|
+
cssClasses.push(styles$X.listItemText);
|
|
381
381
|
return cssClasses.filter(css => css).join(' ');
|
|
382
382
|
};
|
|
383
383
|
return (React.createElement("div", { className: getCssClasses(), ...rest },
|
|
@@ -388,9 +388,9 @@ const ListItemText = ({ primary, secondary, ...rest }) => {
|
|
|
388
388
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
389
389
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
390
390
|
|
|
391
|
-
var css_248z$
|
|
392
|
-
var styles$
|
|
393
|
-
styleInject(css_248z$
|
|
391
|
+
var css_248z$W = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative;\n}\n\n.AutoComplete-module_select__NNYOi {\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 appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__NNYOi:hover {\n cursor: pointer;\n}\n.AutoComplete-module_select__NNYOi:focus:not(.AutoComplete-module_select__NNYOi.AutoComplete-module_disabled__CbGP4) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.AutoComplete-module_select__NNYOi:disabled, .AutoComplete-module_select__NNYOi:read-only {\n background-color: #e9ecef;\n}\n.AutoComplete-module_select__NNYOi:disabled:hover {\n cursor: not-allowed;\n}\n.AutoComplete-module_select__NNYOi:read-only:hover {\n cursor: inherit;\n}\n\n.AutoComplete-module_selectMenu__Gu81L {\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}";
|
|
392
|
+
var styles$W = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
393
|
+
styleInject(css_248z$W);
|
|
394
394
|
|
|
395
395
|
// preset value
|
|
396
396
|
// enter -> delay? -> show results
|
|
@@ -438,7 +438,7 @@ const AutoComplete = (props) => {
|
|
|
438
438
|
const getCssClass = () => {
|
|
439
439
|
const cssClasses = [];
|
|
440
440
|
className && cssClasses.push(className);
|
|
441
|
-
cssClasses.push(styles$
|
|
441
|
+
cssClasses.push(styles$W.select);
|
|
442
442
|
return cssClasses.filter(r => r).join(' ');
|
|
443
443
|
};
|
|
444
444
|
const show = () => setIsShow(true);
|
|
@@ -462,28 +462,28 @@ const AutoComplete = (props) => {
|
|
|
462
462
|
setModel('');
|
|
463
463
|
setSearchText('');
|
|
464
464
|
};
|
|
465
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
465
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$W.selectContainer },
|
|
466
466
|
React.createElement("div", { className: "d-flex" },
|
|
467
467
|
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 }),
|
|
468
468
|
showClearButton && model?.length > 0 &&
|
|
469
469
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
470
470
|
isShow &&
|
|
471
471
|
React.createElement(React.Fragment, null,
|
|
472
|
-
React.createElement("div", { className: styles$
|
|
472
|
+
React.createElement("div", { className: styles$W.selectMenu },
|
|
473
473
|
React.createElement(List, null, _options && _options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
474
474
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
475
475
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
476
476
|
};
|
|
477
477
|
|
|
478
|
-
var css_248z$
|
|
479
|
-
var styles$
|
|
480
|
-
styleInject(css_248z$
|
|
478
|
+
var css_248z$V = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.Badge-module_badge__9ImR0 {\n top: 0;\n right: 0;\n transform: scale(1) translate(50%, -50%);\n transform-origin: 100% 0%;\n height: 20px;\n display: flex;\n padding: 0 6px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n align-items: center;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n border-radius: 10px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
479
|
+
var styles$V = {"badgeContainer":"Badge-module_badgeContainer__3nZBs","badge":"Badge-module_badge__9ImR0","primary":"Badge-module_primary__41U-t","accent":"Badge-module_accent__OQy2-","secondary":"Badge-module_secondary__a9Jfh","light":"Badge-module_light__4QvQ5","dark":"Badge-module_dark__g1yUJ"};
|
|
480
|
+
styleInject(css_248z$V);
|
|
481
481
|
|
|
482
482
|
const Badge = (props) => {
|
|
483
483
|
const { children, content, className, color = COLOR.primary, ...rest } = props;
|
|
484
484
|
const [cssClassName] = useCssClasses([
|
|
485
|
-
styles$
|
|
486
|
-
styles$
|
|
485
|
+
styles$V.badge,
|
|
486
|
+
styles$V[color],
|
|
487
487
|
className
|
|
488
488
|
]);
|
|
489
489
|
return (React.createElement(BadgeContainer, null,
|
|
@@ -493,39 +493,39 @@ const Badge = (props) => {
|
|
|
493
493
|
const BadgeContainer = (props) => {
|
|
494
494
|
const { children, className, ...rest } = props;
|
|
495
495
|
const [cssClassName] = useCssClasses([
|
|
496
|
-
styles$
|
|
496
|
+
styles$V.badgeContainer,
|
|
497
497
|
className,
|
|
498
498
|
]);
|
|
499
499
|
return (React.createElement("div", { className: cssClassName, ...rest }, children));
|
|
500
500
|
};
|
|
501
501
|
|
|
502
|
-
var css_248z$
|
|
503
|
-
var styles$
|
|
504
|
-
styleInject(css_248z$
|
|
502
|
+
var css_248z$U = ".Button-module_button__qeIer {\n text-transform: uppercase;\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}\n.Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow);\n}\n.Button-module_button__qeIer.Button-module_block__JIazf {\n width: 100%;\n}\n.Button-module_button__qeIer:hover:not(:disabled) {\n cursor: pointer;\n}\n.Button-module_button__qeIer:focus:not(:disabled) {\n border-color: var(--primary-highlight);\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem var(--primary-highlight);\n}\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n background-color: var(--primary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n background-color: var(--accent-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background-color: var(--secondary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n background-color: var(--light-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n background-color: var(--dark-dark);\n}\n.Button-module_btnContained__16y5l:disabled {\n color: rgba(0, 0, 0, 0.26);\n box-shadow: none;\n background-color: rgba(0, 0, 0, 0.12);\n}\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed;\n}\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary);\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n text-decoration: none;\n background: var(--primary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n text-decoration: none;\n background: var(--secondary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n text-decoration: none;\n background: var(--accent-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n text-decoration: none;\n background: var(--light-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n text-decoration: none;\n background: var(--dark-highlight);\n}\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary);\n border-color: var(--primary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n background: var(--primary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary);\n border-color: var(--secondary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background: var(--secondary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent);\n border-color: var(--accent);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n background: var(--accent-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n border-color: var(--light);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n background: var(--light-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark);\n border-color: var(--dark);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n background: var(--dark-highlight);\n}\n.Button-module_btnOutline__CCFPI:disabled {\n color: rgba(0, 0, 0, 0.26);\n border: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px;\n}";
|
|
503
|
+
var styles$U = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
|
|
504
|
+
styleInject(css_248z$U);
|
|
505
505
|
|
|
506
506
|
const ButtonContext = createContext({
|
|
507
507
|
color: null
|
|
508
508
|
});
|
|
509
509
|
const useButtonContext = () => useContext(ButtonContext);
|
|
510
510
|
|
|
511
|
-
const Button =
|
|
511
|
+
const Button = props => {
|
|
512
512
|
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block, ...rest } = props;
|
|
513
513
|
const buttonContext = useButtonContext();
|
|
514
514
|
const getCssClasses = () => {
|
|
515
515
|
const cssClasses = [];
|
|
516
|
-
cssClasses.push(styles$
|
|
516
|
+
cssClasses.push(styles$U.button);
|
|
517
517
|
const buttonColor = buttonContext.color || color;
|
|
518
518
|
if (variant !== 'outline' && variant !== 'text') {
|
|
519
|
-
cssClasses.push(styles$
|
|
520
|
-
cssClasses.push(styles$
|
|
519
|
+
cssClasses.push(styles$U.btnContained);
|
|
520
|
+
cssClasses.push(styles$U[buttonColor]);
|
|
521
521
|
}
|
|
522
522
|
if (variant === 'outline') {
|
|
523
|
-
cssClasses.push(styles$
|
|
524
|
-
cssClasses.push(styles$
|
|
523
|
+
cssClasses.push(styles$U.btnOutline);
|
|
524
|
+
cssClasses.push(styles$U[buttonColor]);
|
|
525
525
|
}
|
|
526
526
|
if (variant === 'text') {
|
|
527
|
-
cssClasses.push(styles$
|
|
528
|
-
cssClasses.push(styles$
|
|
527
|
+
cssClasses.push(styles$U.btnText);
|
|
528
|
+
cssClasses.push(styles$U[buttonColor]);
|
|
529
529
|
}
|
|
530
530
|
if (isRounded && variant !== 'text') {
|
|
531
531
|
cssClasses.push(`rounded-pill`);
|
|
@@ -533,29 +533,27 @@ const Button = (props) => {
|
|
|
533
533
|
if (isActive) {
|
|
534
534
|
cssClasses.push('active');
|
|
535
535
|
}
|
|
536
|
-
shadow && cssClasses.push(styles$
|
|
537
|
-
block && cssClasses.push(styles$
|
|
536
|
+
shadow && cssClasses.push(styles$U.shadow);
|
|
537
|
+
block && cssClasses.push(styles$U.block);
|
|
538
538
|
className && cssClasses.push(className);
|
|
539
539
|
return cssClasses.filter(css => css).join(' ');
|
|
540
540
|
};
|
|
541
541
|
return (React.createElement("button", { type: "button", className: getCssClasses(), ...rest },
|
|
542
542
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
543
|
-
startIcon &&
|
|
544
|
-
React.createElement(Icon, { className: styles$T.startIcon }, startIcon),
|
|
543
|
+
startIcon && React.createElement(Icon, { className: styles$U.startIcon }, startIcon),
|
|
545
544
|
children,
|
|
546
|
-
endIcon &&
|
|
547
|
-
React.createElement(Icon, { className: styles$T.endIcon }, endIcon))));
|
|
545
|
+
endIcon && React.createElement(Icon, { className: styles$U.endIcon }, endIcon))));
|
|
548
546
|
};
|
|
549
547
|
|
|
550
|
-
var css_248z$
|
|
551
|
-
var styles$
|
|
552
|
-
styleInject(css_248z$
|
|
548
|
+
var css_248z$T = ".ButtonGroup-module_buttonGroup__w6iB- {\n display: inline-flex;\n border-radius: 4px;\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-of-type) {\n border-right: 1px solid #bdbdbd;\n}";
|
|
549
|
+
var styles$T = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
550
|
+
styleInject(css_248z$T);
|
|
553
551
|
|
|
554
552
|
const ButtonGroup = (props) => {
|
|
555
553
|
const { children, className, color, ...rest } = props;
|
|
556
554
|
const getCssClasses = () => {
|
|
557
555
|
const cssClasses = [];
|
|
558
|
-
cssClasses.push(styles$
|
|
556
|
+
cssClasses.push(styles$T.buttonGroup);
|
|
559
557
|
className && cssClasses.push(className);
|
|
560
558
|
return cssClasses.filter(css => css).join(' ');
|
|
561
559
|
};
|
|
@@ -563,15 +561,15 @@ const ButtonGroup = (props) => {
|
|
|
563
561
|
React.createElement("div", { className: getCssClasses(), role: "group", ...rest }, children)));
|
|
564
562
|
};
|
|
565
563
|
|
|
566
|
-
var css_248z$
|
|
567
|
-
var styles$
|
|
568
|
-
styleInject(css_248z$
|
|
564
|
+
var css_248z$S = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0;\n}";
|
|
565
|
+
var styles$S = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
566
|
+
styleInject(css_248z$S);
|
|
569
567
|
|
|
570
568
|
const Breadcrumb = (props) => {
|
|
571
569
|
const { children, className, ...rest } = props;
|
|
572
570
|
const getCssClasses = () => {
|
|
573
571
|
const cssClasses = [];
|
|
574
|
-
cssClasses.push(styles$
|
|
572
|
+
cssClasses.push(styles$S.breadcrumb);
|
|
575
573
|
className && cssClasses.push(className);
|
|
576
574
|
return cssClasses.filter(css => css).join(' ');
|
|
577
575
|
};
|
|
@@ -581,15 +579,15 @@ const Breadcrumb = (props) => {
|
|
|
581
579
|
|
|
582
580
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
583
581
|
|
|
584
|
-
var css_248z$
|
|
585
|
-
var styles$
|
|
586
|
-
styleInject(css_248z$
|
|
582
|
+
var css_248z$R = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\";\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary);\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset;\n}";
|
|
583
|
+
var styles$R = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
584
|
+
styleInject(css_248z$R);
|
|
587
585
|
|
|
588
586
|
const BreadcrumbItem = (props) => {
|
|
589
587
|
const { children, className, isActive, onClick } = props;
|
|
590
588
|
const getCssClasses = () => {
|
|
591
589
|
const cssClasses = [];
|
|
592
|
-
cssClasses.push(styles$
|
|
590
|
+
cssClasses.push(styles$R.breadcrumbItem);
|
|
593
591
|
className && cssClasses.push(className);
|
|
594
592
|
isActive && cssClasses.push('active');
|
|
595
593
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -601,115 +599,115 @@ const BreadcrumbItem = (props) => {
|
|
|
601
599
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: (label) => React.createElement("a", null, label) }, children)));
|
|
602
600
|
};
|
|
603
601
|
|
|
604
|
-
var css_248z$
|
|
605
|
-
var styles$
|
|
606
|
-
styleInject(css_248z$
|
|
602
|
+
var css_248z$Q = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius);\n}\n.Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow);\n}";
|
|
603
|
+
var styles$Q = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
604
|
+
styleInject(css_248z$Q);
|
|
607
605
|
|
|
608
606
|
const Card = (props) => {
|
|
609
607
|
const { children, className, shadow = true, ...rest } = props;
|
|
610
608
|
const getCssClasses = () => {
|
|
611
609
|
const cssClasses = [];
|
|
612
|
-
cssClasses.push(styles$
|
|
613
|
-
shadow && cssClasses.push(styles$
|
|
610
|
+
cssClasses.push(styles$Q.card);
|
|
611
|
+
shadow && cssClasses.push(styles$Q.shadow);
|
|
614
612
|
className && cssClasses.push(className);
|
|
615
613
|
return cssClasses.filter(css => css).join(' ');
|
|
616
614
|
};
|
|
617
615
|
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
618
616
|
};
|
|
619
617
|
|
|
620
|
-
var css_248z$
|
|
621
|
-
var styles$
|
|
622
|
-
styleInject(css_248z$
|
|
618
|
+
var css_248z$P = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
619
|
+
var styles$P = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
620
|
+
styleInject(css_248z$P);
|
|
623
621
|
|
|
624
622
|
const CardBody = (props) => {
|
|
625
623
|
const { children, className, ...rest } = props;
|
|
626
624
|
const getCssClasses = () => {
|
|
627
625
|
const cssClasses = [];
|
|
628
|
-
cssClasses.push(styles$
|
|
626
|
+
cssClasses.push(styles$P.cardBody);
|
|
629
627
|
className && cssClasses.push(className);
|
|
630
628
|
return cssClasses.filter(css => css).join(' ');
|
|
631
629
|
};
|
|
632
630
|
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
633
631
|
};
|
|
634
632
|
|
|
635
|
-
var css_248z$
|
|
636
|
-
var styles$
|
|
637
|
-
styleInject(css_248z$
|
|
633
|
+
var css_248z$O = ".CardFooter-module_cardFooter__BpOTG {\n padding: 0.75rem 1.25rem;\n background-color: rgba(0, 0, 0, 0.03);\n border-top: 1px solid rgba(0, 0, 0, 0.125);\n}\n.CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);\n}";
|
|
634
|
+
var styles$O = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
635
|
+
styleInject(css_248z$O);
|
|
638
636
|
|
|
639
637
|
const CardFooter = (props) => {
|
|
640
638
|
const { children, className, ...rest } = props;
|
|
641
639
|
const getCssClasses = () => {
|
|
642
640
|
const cssClasses = [];
|
|
643
|
-
cssClasses.push(styles$
|
|
641
|
+
cssClasses.push(styles$O.cardFooter);
|
|
644
642
|
className && cssClasses.push(className);
|
|
645
643
|
return cssClasses.filter(css => css).join(' ');
|
|
646
644
|
};
|
|
647
645
|
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
648
646
|
};
|
|
649
647
|
|
|
650
|
-
var css_248z$
|
|
651
|
-
var styles$
|
|
652
|
-
styleInject(css_248z$
|
|
648
|
+
var css_248z$N = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
649
|
+
var styles$N = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
650
|
+
styleInject(css_248z$N);
|
|
653
651
|
|
|
654
652
|
const CardSubtitle = (props) => {
|
|
655
653
|
const { children, className, ...rest } = props;
|
|
656
654
|
const getCssClasses = () => {
|
|
657
655
|
const cssClasses = [];
|
|
658
|
-
cssClasses.push(styles$
|
|
656
|
+
cssClasses.push(styles$N.cardSubtitle);
|
|
659
657
|
className && cssClasses.push(className);
|
|
660
658
|
return cssClasses.filter(css => css).join(' ');
|
|
661
659
|
};
|
|
662
660
|
return (React.createElement("p", { className: getCssClasses(), ...rest }, children));
|
|
663
661
|
};
|
|
664
662
|
|
|
665
|
-
var css_248z$
|
|
666
|
-
var styles$
|
|
667
|
-
styleInject(css_248z$
|
|
663
|
+
var css_248z$M = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
664
|
+
var styles$M = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
665
|
+
styleInject(css_248z$M);
|
|
668
666
|
|
|
669
667
|
const CardText = (props) => {
|
|
670
668
|
const { children, className, ...rest } = props;
|
|
671
669
|
const getCssClasses = () => {
|
|
672
670
|
const cssClasses = [];
|
|
673
|
-
cssClasses.push(styles$
|
|
671
|
+
cssClasses.push(styles$M.cardText);
|
|
674
672
|
className && cssClasses.push(className);
|
|
675
673
|
return cssClasses.filter(css => css).join(' ');
|
|
676
674
|
};
|
|
677
675
|
return (React.createElement("p", { className: getCssClasses(), ...rest }, children));
|
|
678
676
|
};
|
|
679
677
|
|
|
680
|
-
var css_248z$
|
|
681
|
-
var styles$
|
|
682
|
-
styleInject(css_248z$
|
|
678
|
+
var css_248z$L = ".CardTitle-module_cardTitle__aiPSE {\n margin-bottom: 0;\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 1.334;\n letter-spacing: 0em;\n}";
|
|
679
|
+
var styles$L = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
680
|
+
styleInject(css_248z$L);
|
|
683
681
|
|
|
684
682
|
const CardTitle = (props) => {
|
|
685
683
|
const { children, className, as: As = 'div', ...rest } = props;
|
|
686
684
|
const getCssClasses = () => {
|
|
687
685
|
const cssClasses = [];
|
|
688
|
-
cssClasses.push(styles$
|
|
686
|
+
cssClasses.push(styles$L.cardTitle);
|
|
689
687
|
className && cssClasses.push(className);
|
|
690
688
|
return cssClasses.filter(css => css).join(' ');
|
|
691
689
|
};
|
|
692
690
|
return (React.createElement(As, { className: getCssClasses(), ...rest }, children));
|
|
693
691
|
};
|
|
694
692
|
|
|
695
|
-
var css_248z$
|
|
696
|
-
var styles$
|
|
697
|
-
styleInject(css_248z$
|
|
693
|
+
var css_248z$K = ".CardImage-module_cardImage__Z6JWW {\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}";
|
|
694
|
+
var styles$K = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
695
|
+
styleInject(css_248z$K);
|
|
698
696
|
|
|
699
697
|
const CardImage = (props) => {
|
|
700
698
|
const { src, alt, className, ...rest } = props;
|
|
701
699
|
const getCssClasses = () => {
|
|
702
700
|
const cssClasses = [];
|
|
703
|
-
cssClasses.push(styles$
|
|
701
|
+
cssClasses.push(styles$K.cardImage);
|
|
704
702
|
className && cssClasses.push(className);
|
|
705
703
|
return cssClasses.filter(css => css).join(' ');
|
|
706
704
|
};
|
|
707
705
|
return (React.createElement("img", { className: getCssClasses(), src: src, alt: alt, ...rest }));
|
|
708
706
|
};
|
|
709
707
|
|
|
710
|
-
var css_248z$
|
|
711
|
-
var styles$
|
|
712
|
-
styleInject(css_248z$
|
|
708
|
+
var css_248z$J = ".Checkbox-module_checkboxContainer__x2GCi {\n display: flex;\n align-items: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.Checkbox-module_checkboxLabel__nPY4k:hover {\n cursor: pointer;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG {\n color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG:hover {\n cursor: not-allowed;\n}";
|
|
709
|
+
var styles$J = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
710
|
+
styleInject(css_248z$J);
|
|
713
711
|
|
|
714
712
|
const Checkbox = (props) => {
|
|
715
713
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly, ...rest } = props;
|
|
@@ -738,8 +736,8 @@ const Checkbox = (props) => {
|
|
|
738
736
|
};
|
|
739
737
|
const getCssClassesLabel = () => {
|
|
740
738
|
const cssClasses = [];
|
|
741
|
-
cssClasses.push(styles$
|
|
742
|
-
disabled && cssClasses.push(styles$
|
|
739
|
+
cssClasses.push(styles$J.checkboxLabel);
|
|
740
|
+
disabled && cssClasses.push(styles$J['disabled']);
|
|
743
741
|
return cssClasses.filter(css => css).join(' ');
|
|
744
742
|
};
|
|
745
743
|
const getIcon = () => {
|
|
@@ -751,24 +749,24 @@ const Checkbox = (props) => {
|
|
|
751
749
|
checkboxElement?.current?.click();
|
|
752
750
|
}
|
|
753
751
|
};
|
|
754
|
-
return (React.createElement("div", { className: styles$
|
|
752
|
+
return (React.createElement("div", { className: styles$J.checkboxContainer },
|
|
755
753
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
756
754
|
React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
757
755
|
React.createElement("input", { type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value, ...rest })));
|
|
758
756
|
};
|
|
759
757
|
|
|
760
|
-
var css_248z$
|
|
761
|
-
var styles$
|
|
762
|
-
styleInject(css_248z$
|
|
758
|
+
var css_248z$I = ".Chip-module_chip__dZ5qz {\n display: inline-flex;\n align-items: center;\n padding: 0.5rem;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n font-size: 75%;\n font-weight: 700;\n border-radius: 10rem;\n line-height: 1;\n}\n.Chip-module_chip__dZ5qz span {\n margin-bottom: 2px;\n}\n.Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow);\n}";
|
|
759
|
+
var styles$I = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_deleteIcon__--rUx","primary":"Chip-module_primary__YVDi9","secondary":"Chip-module_secondary__-e4xP","accent":"Chip-module_accent__ZCTwu","light":"Chip-module_light__vKs7O","dark":"Chip-module_dark__G-FLQ","clickable":"Chip-module_clickable__qAqVH","shadow":"Chip-module_shadow__v11NF"};
|
|
760
|
+
styleInject(css_248z$I);
|
|
763
761
|
|
|
764
762
|
const Chip = (props) => {
|
|
765
763
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style, ...rest } = props;
|
|
766
764
|
const getCssClass = () => {
|
|
767
765
|
const cssClasses = [];
|
|
768
|
-
cssClasses.push(styles$
|
|
769
|
-
cssClasses.push(styles$
|
|
770
|
-
shadow && cssClasses.push(styles$
|
|
771
|
-
onClick && cssClasses.push(styles$
|
|
766
|
+
cssClasses.push(styles$I.chip);
|
|
767
|
+
cssClasses.push(styles$I[color]);
|
|
768
|
+
shadow && cssClasses.push(styles$I['shadow']);
|
|
769
|
+
onClick && cssClasses.push(styles$I['clickable']);
|
|
772
770
|
className && cssClasses.push(className);
|
|
773
771
|
return cssClasses.filter(r => r).join(' ');
|
|
774
772
|
};
|
|
@@ -778,7 +776,7 @@ const Chip = (props) => {
|
|
|
778
776
|
};
|
|
779
777
|
return (React.createElement("div", { className: getCssClass(), ...rest, style: style },
|
|
780
778
|
React.createElement("span", null, children),
|
|
781
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
779
|
+
isDeletable && (React.createElement("div", { className: styles$I.deleteIcon, onClick: (e) => handleClickOnDelete(e) }, deleteIcon))));
|
|
782
780
|
};
|
|
783
781
|
|
|
784
782
|
const CssTransition = (props) => {
|
|
@@ -856,29 +854,29 @@ const CssTransition = (props) => {
|
|
|
856
854
|
React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
857
855
|
};
|
|
858
856
|
|
|
859
|
-
var css_248z$
|
|
860
|
-
var styles$
|
|
861
|
-
styleInject(css_248z$
|
|
857
|
+
var css_248z$H = ".Column-module_column__fcTgl {\n flex: 1 0 0%;\n}\n\n@media (max-width: 575.98px) {\n .Column-module_column__fcTgl {\n flex: 1;\n }\n}";
|
|
858
|
+
var styles$H = {"column":"Column-module_column__fcTgl"};
|
|
859
|
+
styleInject(css_248z$H);
|
|
862
860
|
|
|
863
861
|
const Column = (props) => {
|
|
864
862
|
const { children, className, ...rest } = props;
|
|
865
863
|
const getCssClasses = () => {
|
|
866
864
|
const cssClasses = [];
|
|
867
|
-
cssClasses.push(styles$
|
|
865
|
+
cssClasses.push(styles$H.column);
|
|
868
866
|
className && cssClasses.push(className);
|
|
869
867
|
return cssClasses.filter(css => css).join(' ');
|
|
870
868
|
};
|
|
871
869
|
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
872
870
|
};
|
|
873
871
|
|
|
874
|
-
var css_248z$
|
|
875
|
-
var styles$
|
|
876
|
-
styleInject(css_248z$
|
|
872
|
+
var css_248z$G = ".Row-module_row__bTIWp {\n display: flex;\n gap: 15px;\n flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n flex-shrink: 0;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n}";
|
|
873
|
+
var styles$G = {"row":"Row-module_row__bTIWp"};
|
|
874
|
+
styleInject(css_248z$G);
|
|
877
875
|
|
|
878
876
|
const Row = ({ children, direction = 'row', className, ...rest }) => {
|
|
879
877
|
const getCssClasses = () => {
|
|
880
878
|
const cssClasses = [];
|
|
881
|
-
cssClasses.push(styles$
|
|
879
|
+
cssClasses.push(styles$G.row);
|
|
882
880
|
className && cssClasses.push(className);
|
|
883
881
|
direction && cssClasses.push(`flex-${direction}`);
|
|
884
882
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -886,23 +884,33 @@ const Row = ({ children, direction = 'row', className, ...rest }) => {
|
|
|
886
884
|
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
887
885
|
};
|
|
888
886
|
|
|
889
|
-
var css_248z$
|
|
890
|
-
var styles$
|
|
887
|
+
var css_248z$F = ".Form-module_form__h9CkF > div {\n margin-bottom: 10px;\n}\n.Form-module_form__h9CkF :last-child {\n margin-bottom: 0;\n}";
|
|
888
|
+
var styles$F = {"form":"Form-module_form__h9CkF"};
|
|
889
|
+
styleInject(css_248z$F);
|
|
890
|
+
|
|
891
|
+
var css_248z$E = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
892
|
+
var styles$E = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
891
893
|
styleInject(css_248z$E);
|
|
892
894
|
|
|
893
|
-
const
|
|
895
|
+
const FormError = (props) => {
|
|
896
|
+
const { className = styles$E.isInvalid, errors = [] } = props;
|
|
897
|
+
return (React.createElement(Fragment$1, null, errors &&
|
|
898
|
+
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
899
|
+
};
|
|
900
|
+
|
|
901
|
+
const FormGroup = (props) => {
|
|
902
|
+
const { children, className } = props;
|
|
903
|
+
return React.createElement("div", { className: className }, children);
|
|
904
|
+
};
|
|
905
|
+
|
|
906
|
+
const FormHint = (props) => {
|
|
907
|
+
const { children, className = 'form-text text-muted' } = props;
|
|
894
908
|
const getCssClasses = () => {
|
|
895
909
|
const cssClasses = [];
|
|
896
|
-
cssClasses.push(styles$E.formLabel);
|
|
897
910
|
className && cssClasses.push(className);
|
|
898
911
|
return cssClasses.filter(css => css).join(' ');
|
|
899
912
|
};
|
|
900
|
-
return (React.createElement("
|
|
901
|
-
};
|
|
902
|
-
|
|
903
|
-
const FormGroup = (props) => {
|
|
904
|
-
const { children, className = 'mb-1' } = props;
|
|
905
|
-
return (React.createElement("div", { className: className }, children));
|
|
913
|
+
return (React.createElement("small", { className: getCssClasses() }, children));
|
|
906
914
|
};
|
|
907
915
|
|
|
908
916
|
const FileInput = (props) => {
|
|
@@ -1150,24 +1158,18 @@ const FormInput = (props) => {
|
|
|
1150
1158
|
React.createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
|
|
1151
1159
|
};
|
|
1152
1160
|
|
|
1153
|
-
|
|
1154
|
-
|
|
1161
|
+
var css_248z$A = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
1162
|
+
var styles$A = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
1163
|
+
styleInject(css_248z$A);
|
|
1164
|
+
|
|
1165
|
+
const FormLabel = ({ children, className, htmlFor, ...rest }) => {
|
|
1155
1166
|
const getCssClasses = () => {
|
|
1156
1167
|
const cssClasses = [];
|
|
1168
|
+
cssClasses.push(styles$A.formLabel);
|
|
1157
1169
|
className && cssClasses.push(className);
|
|
1158
1170
|
return cssClasses.filter(css => css).join(' ');
|
|
1159
1171
|
};
|
|
1160
|
-
return (React.createElement("
|
|
1161
|
-
};
|
|
1162
|
-
|
|
1163
|
-
var css_248z$A = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
1164
|
-
var styles$A = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1165
|
-
styleInject(css_248z$A);
|
|
1166
|
-
|
|
1167
|
-
const FormError = (props) => {
|
|
1168
|
-
const { className = styles$A.isInvalid, errors = [] } = props;
|
|
1169
|
-
return (React.createElement(Fragment$1, null, errors &&
|
|
1170
|
-
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
1172
|
+
return (React.createElement("label", { htmlFor: htmlFor, className: getCssClasses(), ...rest }, children));
|
|
1171
1173
|
};
|
|
1172
1174
|
|
|
1173
1175
|
const IsEmptyValidator = (value) => value?.trim() === ''
|
|
@@ -1186,16 +1188,27 @@ const MaxValidator = (val, valueB) => val.length <= valueB;
|
|
|
1186
1188
|
|
|
1187
1189
|
const MinValidator = (val, minLength) => val.length >= minLength;
|
|
1188
1190
|
|
|
1189
|
-
// values, isSubmitting, handleChange, handleBlur, handleSubmit
|
|
1190
1191
|
class Form extends Component {
|
|
1191
1192
|
constructor(props) {
|
|
1192
1193
|
super(props);
|
|
1193
1194
|
this.myForm = createRef();
|
|
1194
|
-
this.state = {
|
|
1195
|
+
this.state = {
|
|
1196
|
+
controls: undefined,
|
|
1197
|
+
isValid: false,
|
|
1198
|
+
isChanged: false,
|
|
1199
|
+
isSubmitted: false,
|
|
1200
|
+
submitOnEnter: props.submitOnEnter !== undefined ? props.submitOnEnter : true,
|
|
1201
|
+
};
|
|
1202
|
+
}
|
|
1203
|
+
getCssClasses() {
|
|
1204
|
+
const cssClasses = [];
|
|
1205
|
+
cssClasses.push(styles$F.form);
|
|
1206
|
+
this.props.className && cssClasses.push(this.props.className);
|
|
1207
|
+
return cssClasses.filter(css => css).join(' ');
|
|
1195
1208
|
}
|
|
1196
1209
|
static getDerivedStateFromProps(nextProps, state) {
|
|
1197
1210
|
if (!state.controls && nextProps.controls) {
|
|
1198
|
-
return
|
|
1211
|
+
return { controls: nextProps.controls };
|
|
1199
1212
|
}
|
|
1200
1213
|
return null;
|
|
1201
1214
|
}
|
|
@@ -1206,13 +1219,15 @@ class Form extends Component {
|
|
|
1206
1219
|
const values = keys.reduce((obj, f) => {
|
|
1207
1220
|
const control = this.getControl(f);
|
|
1208
1221
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1209
|
-
const newValue = (
|
|
1222
|
+
const newValue = (control.type === 'date' || control.type === 'datetime-local') &&
|
|
1210
1223
|
control.value &&
|
|
1211
|
-
isValidDate(
|
|
1212
|
-
|
|
1224
|
+
isValidDate(control.value)
|
|
1225
|
+
? new Date(control.value).toISOString()
|
|
1226
|
+
: control.value;
|
|
1227
|
+
return {
|
|
1213
1228
|
...obj,
|
|
1214
|
-
[f]: newValue
|
|
1215
|
-
}
|
|
1229
|
+
[f]: newValue,
|
|
1230
|
+
};
|
|
1216
1231
|
}, {});
|
|
1217
1232
|
if (this.state.isValid && this.state.isSubmitted) {
|
|
1218
1233
|
this.props.onSubmit && this.props.onSubmit(values);
|
|
@@ -1309,7 +1324,7 @@ class Form extends Component {
|
|
|
1309
1324
|
}
|
|
1310
1325
|
renderLabel(fieldKey, label, labelClassName = 'form-label') {
|
|
1311
1326
|
const cssClasses = [labelClassName, this.isRequired(fieldKey) ? 'required' : undefined];
|
|
1312
|
-
return React.createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label);
|
|
1327
|
+
return (React.createElement(FormLabel, { htmlFor: fieldKey, className: cssClasses.join(' ') }, label));
|
|
1313
1328
|
}
|
|
1314
1329
|
handleFormSubmit() {
|
|
1315
1330
|
for (const fieldKey of Object.keys(this.state.controls)) {
|
|
@@ -1322,7 +1337,9 @@ class Form extends Component {
|
|
|
1322
1337
|
this.setState({
|
|
1323
1338
|
controls: { ...this.state.controls },
|
|
1324
1339
|
isSubmitted: true,
|
|
1325
|
-
isValid: Object.keys(this.state.controls)
|
|
1340
|
+
isValid: Object.keys(this.state.controls)
|
|
1341
|
+
.map(f => this.getControl(f).isValid)
|
|
1342
|
+
.every(valid => valid === true),
|
|
1326
1343
|
}, () => this.handleChange());
|
|
1327
1344
|
}
|
|
1328
1345
|
// trigger via ref
|
|
@@ -1338,7 +1355,7 @@ class Form extends Component {
|
|
|
1338
1355
|
controls: { ...this.state.controls },
|
|
1339
1356
|
isSubmitted: false,
|
|
1340
1357
|
isChanged: false,
|
|
1341
|
-
isValid: false
|
|
1358
|
+
isValid: false,
|
|
1342
1359
|
});
|
|
1343
1360
|
}
|
|
1344
1361
|
handleOnKeyDown(e) {
|
|
@@ -1354,18 +1371,20 @@ class Form extends Component {
|
|
|
1354
1371
|
return this.getControl(fieldKey).config.formGroupClassName;
|
|
1355
1372
|
}
|
|
1356
1373
|
render() {
|
|
1357
|
-
return (React.createElement("form", { ref: this.myForm }, this.state &&
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1374
|
+
return (React.createElement("form", { className: this.getCssClasses(), ref: this.myForm }, this.state &&
|
|
1375
|
+
this.state.controls &&
|
|
1376
|
+
Object.keys(this.state.controls).map(fieldKey => {
|
|
1377
|
+
return (React.createElement(FormGroup, { key: fieldKey, className: this.getFormGroupCssClass(fieldKey) },
|
|
1378
|
+
this.getControl(fieldKey).config.labelPosition !== 'behind' &&
|
|
1379
|
+
this.getControl(fieldKey).type !== 'checkbox' &&
|
|
1380
|
+
this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
|
|
1381
|
+
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 }) => this.handleInputChange(name, value), onBlur: (e) => this.handleOnBlur(e), onKeyDown: (e) => this.handleOnKeyDown(e) }),
|
|
1382
|
+
this.getControl(fieldKey).config.labelPosition === 'behind' &&
|
|
1383
|
+
this.getControl(fieldKey).type !== 'checkbox' &&
|
|
1384
|
+
this.renderLabel(fieldKey, this.getControl(fieldKey).config.label, this.getControl(fieldKey).config.labelClassName),
|
|
1385
|
+
this.getControl(fieldKey).config.hint && (React.createElement(FormHint, null, this.getControl(fieldKey).config.hint)),
|
|
1386
|
+
this.getControl(fieldKey).errors && React.createElement(FormError, { errors: this.getControl(fieldKey).errors })));
|
|
1387
|
+
})));
|
|
1369
1388
|
}
|
|
1370
1389
|
}
|
|
1371
1390
|
function isValidDate(dateObject) {
|