react-asc 23.4.1 → 23.5.2
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/validators/MaxValidator.d.ts +1 -0
- package/components/Form/validators/index.d.ts +1 -0
- package/components/ProgressBar/ProgressBar.d.ts +9 -0
- package/components/ProgressBar/index.d.ts +1 -0
- package/components/index.d.ts +1 -0
- package/index.es.js +296 -264
- package/index.js +297 -263
- package/package.json +1 -1
- package/react-asc.scss +11 -0
package/index.es.js
CHANGED
|
@@ -87,93 +87,93 @@ 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$11 = ".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}";
|
|
91
|
+
var styles$11 = {"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"};
|
|
92
|
+
styleInject(css_248z$11);
|
|
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$11.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$11.contained);
|
|
101
|
+
cssClasses.push(styles$11[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$11.outline);
|
|
105
|
+
cssClasses.push(styles$11[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$11['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$10 = ".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: var(--shadow);\n}";
|
|
115
|
+
var styles$10 = {"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"};
|
|
116
|
+
styleInject(css_248z$10);
|
|
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$10[color]);
|
|
123
|
+
cssClasses.push(styles$10.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$10['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$$ = ".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}";
|
|
132
|
+
var styles$$ = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$$);
|
|
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$$.appbarTitle);
|
|
140
140
|
className && cssClasses.push(className);
|
|
141
141
|
return cssClasses.filter(r => r).join(' ');
|
|
142
142
|
};
|
|
143
143
|
return (React.createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
144
144
|
};
|
|
145
145
|
|
|
146
|
-
var css_248z$
|
|
147
|
-
var styles$
|
|
148
|
-
styleInject(css_248z$
|
|
146
|
+
var css_248z$_ = ".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}";
|
|
147
|
+
var styles$_ = {"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"};
|
|
148
|
+
styleInject(css_248z$_);
|
|
149
149
|
|
|
150
150
|
const Icon = (props) => {
|
|
151
151
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
152
152
|
const getCssClasses = () => {
|
|
153
153
|
const cssClasses = [];
|
|
154
|
-
cssClasses.push(styles$
|
|
155
|
-
iconColor && cssClasses.push(styles$
|
|
154
|
+
cssClasses.push(styles$_.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$_[iconColor]);
|
|
156
156
|
className && cssClasses.push(className);
|
|
157
157
|
return cssClasses.filter(css => css).join(' ');
|
|
158
158
|
};
|
|
159
159
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
160
160
|
};
|
|
161
161
|
|
|
162
|
-
var css_248z$
|
|
163
|
-
var styles$
|
|
164
|
-
styleInject(css_248z$
|
|
162
|
+
var css_248z$Z = ".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}";
|
|
163
|
+
var styles$Z = {"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"};
|
|
164
|
+
styleInject(css_248z$Z);
|
|
165
165
|
|
|
166
166
|
const IconButton = (props) => {
|
|
167
167
|
const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
168
168
|
const getCssClasses = () => {
|
|
169
169
|
const cssClasses = [];
|
|
170
|
-
cssClasses.push(styles$
|
|
171
|
-
cssClasses.push(styles$
|
|
172
|
-
cssClasses.push(styles$
|
|
173
|
-
cssClasses.push(styles$
|
|
174
|
-
isActive && cssClasses.push(styles$
|
|
175
|
-
disabled && cssClasses.push(styles$
|
|
176
|
-
shadow && cssClasses.push(styles$
|
|
170
|
+
cssClasses.push(styles$Z[color]);
|
|
171
|
+
cssClasses.push(styles$Z[variant]);
|
|
172
|
+
cssClasses.push(styles$Z[size]);
|
|
173
|
+
cssClasses.push(styles$Z.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$Z.active);
|
|
175
|
+
disabled && cssClasses.push(styles$Z.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$Z.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -308,9 +308,9 @@ const useOnDestroy = (callBack) => {
|
|
|
308
308
|
}, []);
|
|
309
309
|
};
|
|
310
310
|
|
|
311
|
-
var css_248z$
|
|
312
|
-
var styles$
|
|
313
|
-
styleInject(css_248z$
|
|
311
|
+
var css_248z$Y = ".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}";
|
|
312
|
+
var styles$Y = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
313
|
+
styleInject(css_248z$Y);
|
|
314
314
|
|
|
315
315
|
const Backdrop = (props) => {
|
|
316
316
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -320,8 +320,8 @@ const Backdrop = (props) => {
|
|
|
320
320
|
};
|
|
321
321
|
const getCssClasses = () => {
|
|
322
322
|
const cssClasses = [];
|
|
323
|
-
cssClasses.push(styles$
|
|
324
|
-
isTransparent && cssClasses.push(styles$
|
|
323
|
+
cssClasses.push(styles$Y.backdrop);
|
|
324
|
+
isTransparent && cssClasses.push(styles$Y['isTransparent']);
|
|
325
325
|
return cssClasses.filter(css => css).join(' ');
|
|
326
326
|
};
|
|
327
327
|
const getStyles = () => {
|
|
@@ -331,34 +331,34 @@ const Backdrop = (props) => {
|
|
|
331
331
|
return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
|
|
332
332
|
};
|
|
333
333
|
|
|
334
|
-
var css_248z$
|
|
335
|
-
var styles$
|
|
336
|
-
styleInject(css_248z$
|
|
334
|
+
var css_248z$X = ".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}";
|
|
335
|
+
var styles$X = {"list":"List-module_list__gpZ41"};
|
|
336
|
+
styleInject(css_248z$X);
|
|
337
337
|
|
|
338
338
|
const List = (props) => {
|
|
339
339
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
340
340
|
const getCssClasses = () => {
|
|
341
341
|
const cssClasses = [];
|
|
342
|
-
isFlush && cssClasses.push(styles$
|
|
343
|
-
cssClasses.push(styles$
|
|
342
|
+
isFlush && cssClasses.push(styles$X.flush);
|
|
343
|
+
cssClasses.push(styles$X.list);
|
|
344
344
|
className && cssClasses.push(className);
|
|
345
345
|
return cssClasses.filter(css => css).join(' ');
|
|
346
346
|
};
|
|
347
347
|
return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
348
348
|
};
|
|
349
349
|
|
|
350
|
-
var css_248z$
|
|
351
|
-
var styles$
|
|
352
|
-
styleInject(css_248z$
|
|
350
|
+
var css_248z$W = ".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}";
|
|
351
|
+
var styles$W = {"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"};
|
|
352
|
+
styleInject(css_248z$W);
|
|
353
353
|
|
|
354
354
|
const ListItem = (props) => {
|
|
355
355
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
356
356
|
const getCssClasses = () => {
|
|
357
357
|
const cssClasses = [];
|
|
358
|
-
cssClasses.push(styles$
|
|
359
|
-
color && cssClasses.push(styles$
|
|
360
|
-
active && cssClasses.push(styles$
|
|
361
|
-
disabled && cssClasses.push(styles$
|
|
358
|
+
cssClasses.push(styles$W.listItem);
|
|
359
|
+
color && cssClasses.push(styles$W[color]);
|
|
360
|
+
active && cssClasses.push(styles$W['active']);
|
|
361
|
+
disabled && cssClasses.push(styles$W['disabled']);
|
|
362
362
|
className && cssClasses.push(className);
|
|
363
363
|
return cssClasses.filter(css => css).join(' ');
|
|
364
364
|
};
|
|
@@ -368,42 +368,42 @@ const ListItem = (props) => {
|
|
|
368
368
|
return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
369
369
|
};
|
|
370
370
|
|
|
371
|
-
var css_248z$
|
|
372
|
-
var styles$
|
|
373
|
-
styleInject(css_248z$
|
|
371
|
+
var css_248z$V = ".ListItemAvatar-module_avatar__sVWfR {\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}";
|
|
372
|
+
var styles$V = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
373
|
+
styleInject(css_248z$V);
|
|
374
374
|
|
|
375
375
|
const ListItemAvatar = (_a) => {
|
|
376
376
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
377
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
377
|
+
return (React.createElement("div", Object.assign({ className: styles$V.avatar }, rest), avatar));
|
|
378
378
|
};
|
|
379
379
|
|
|
380
|
-
var css_248z$
|
|
381
|
-
var styles$
|
|
382
|
-
styleInject(css_248z$
|
|
380
|
+
var css_248z$U = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px;\n}";
|
|
381
|
+
var styles$U = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
382
|
+
styleInject(css_248z$U);
|
|
383
383
|
|
|
384
384
|
const ListItemIcon = (_a) => {
|
|
385
385
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
386
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
386
|
+
return (React.createElement("div", Object.assign({ className: styles$U.icon }, rest), icon));
|
|
387
387
|
};
|
|
388
388
|
|
|
389
|
-
var css_248z$
|
|
390
|
-
var styles$
|
|
391
|
-
styleInject(css_248z$
|
|
389
|
+
var css_248z$T = ".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}";
|
|
390
|
+
var styles$T = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
391
|
+
styleInject(css_248z$T);
|
|
392
392
|
|
|
393
393
|
const ListItemAction = (_a) => {
|
|
394
394
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
395
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
395
|
+
return (React.createElement("div", Object.assign({ className: styles$T.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
396
396
|
};
|
|
397
397
|
|
|
398
|
-
var css_248z$
|
|
399
|
-
var styles$
|
|
400
|
-
styleInject(css_248z$
|
|
398
|
+
var css_248z$S = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
399
|
+
var styles$S = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
400
|
+
styleInject(css_248z$S);
|
|
401
401
|
|
|
402
402
|
const ListItemText = (_a) => {
|
|
403
403
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
404
404
|
const getCssClasses = () => {
|
|
405
405
|
const cssClasses = [];
|
|
406
|
-
cssClasses.push(styles$
|
|
406
|
+
cssClasses.push(styles$S.listItemText);
|
|
407
407
|
return cssClasses.filter(css => css).join(' ');
|
|
408
408
|
};
|
|
409
409
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -414,9 +414,9 @@ const ListItemText = (_a) => {
|
|
|
414
414
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
415
415
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
416
416
|
|
|
417
|
-
var css_248z$
|
|
418
|
-
var styles$
|
|
419
|
-
styleInject(css_248z$
|
|
417
|
+
var css_248z$R = ".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}";
|
|
418
|
+
var styles$R = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
419
|
+
styleInject(css_248z$R);
|
|
420
420
|
|
|
421
421
|
// preset value
|
|
422
422
|
// enter -> delay? -> show results
|
|
@@ -462,7 +462,7 @@ const AutoComplete = (props) => {
|
|
|
462
462
|
const getCssClass = () => {
|
|
463
463
|
const cssClasses = [];
|
|
464
464
|
className && cssClasses.push(className);
|
|
465
|
-
cssClasses.push(styles$
|
|
465
|
+
cssClasses.push(styles$R.select);
|
|
466
466
|
return cssClasses.filter(r => r).join(' ');
|
|
467
467
|
};
|
|
468
468
|
const show = () => setIsShow(true);
|
|
@@ -486,28 +486,28 @@ const AutoComplete = (props) => {
|
|
|
486
486
|
setModel('');
|
|
487
487
|
setSearchText('');
|
|
488
488
|
};
|
|
489
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
489
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$R.selectContainer },
|
|
490
490
|
React.createElement("div", { className: "d-flex" },
|
|
491
491
|
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 }),
|
|
492
492
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
493
493
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
494
494
|
isShow &&
|
|
495
495
|
React.createElement(React.Fragment, null,
|
|
496
|
-
React.createElement("div", { className: styles$
|
|
496
|
+
React.createElement("div", { className: styles$R.selectMenu },
|
|
497
497
|
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 },
|
|
498
498
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
499
499
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
500
500
|
};
|
|
501
501
|
|
|
502
|
-
var css_248z$
|
|
503
|
-
var styles$
|
|
504
|
-
styleInject(css_248z$
|
|
502
|
+
var css_248z$Q = ".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}";
|
|
503
|
+
var styles$Q = {"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"};
|
|
504
|
+
styleInject(css_248z$Q);
|
|
505
505
|
|
|
506
506
|
const Badge = (props) => {
|
|
507
507
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
508
508
|
const [cssClassName] = useCssClasses([
|
|
509
|
-
styles$
|
|
510
|
-
styles$
|
|
509
|
+
styles$Q.badge,
|
|
510
|
+
styles$Q[color],
|
|
511
511
|
className
|
|
512
512
|
]);
|
|
513
513
|
return (React.createElement(BadgeContainer, null,
|
|
@@ -517,15 +517,15 @@ const Badge = (props) => {
|
|
|
517
517
|
const BadgeContainer = (props) => {
|
|
518
518
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
519
519
|
const [cssClassName] = useCssClasses([
|
|
520
|
-
styles$
|
|
520
|
+
styles$Q.badgeContainer,
|
|
521
521
|
className,
|
|
522
522
|
]);
|
|
523
523
|
return (React.createElement("div", Object.assign({ className: cssClassName }, rest), children));
|
|
524
524
|
};
|
|
525
525
|
|
|
526
|
-
var css_248z$
|
|
527
|
-
var styles$
|
|
528
|
-
styleInject(css_248z$
|
|
526
|
+
var css_248z$P = ".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: #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\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}";
|
|
527
|
+
var styles$P = {"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"};
|
|
528
|
+
styleInject(css_248z$P);
|
|
529
529
|
|
|
530
530
|
const ButtonContext = createContext({
|
|
531
531
|
color: null
|
|
@@ -537,19 +537,19 @@ const Button = (props) => {
|
|
|
537
537
|
const buttonContext = useButtonContext();
|
|
538
538
|
const getCssClasses = () => {
|
|
539
539
|
const cssClasses = [];
|
|
540
|
-
cssClasses.push(styles$
|
|
540
|
+
cssClasses.push(styles$P.button);
|
|
541
541
|
const buttonColor = buttonContext.color || color;
|
|
542
542
|
if (variant !== 'outline' && variant !== 'text') {
|
|
543
|
-
cssClasses.push(styles$
|
|
544
|
-
cssClasses.push(styles$
|
|
543
|
+
cssClasses.push(styles$P.btnContained);
|
|
544
|
+
cssClasses.push(styles$P[buttonColor]);
|
|
545
545
|
}
|
|
546
546
|
if (variant === 'outline') {
|
|
547
|
-
cssClasses.push(styles$
|
|
548
|
-
cssClasses.push(styles$
|
|
547
|
+
cssClasses.push(styles$P.btnOutline);
|
|
548
|
+
cssClasses.push(styles$P[buttonColor]);
|
|
549
549
|
}
|
|
550
550
|
if (variant === 'text') {
|
|
551
|
-
cssClasses.push(styles$
|
|
552
|
-
cssClasses.push(styles$
|
|
551
|
+
cssClasses.push(styles$P.btnText);
|
|
552
|
+
cssClasses.push(styles$P[buttonColor]);
|
|
553
553
|
}
|
|
554
554
|
if (isRounded && variant !== 'text') {
|
|
555
555
|
cssClasses.push(`rounded-pill`);
|
|
@@ -557,29 +557,29 @@ const Button = (props) => {
|
|
|
557
557
|
if (isActive) {
|
|
558
558
|
cssClasses.push('active');
|
|
559
559
|
}
|
|
560
|
-
shadow && cssClasses.push(styles$
|
|
561
|
-
block && cssClasses.push(styles$
|
|
560
|
+
shadow && cssClasses.push(styles$P.shadow);
|
|
561
|
+
block && cssClasses.push(styles$P.block);
|
|
562
562
|
className && cssClasses.push(className);
|
|
563
563
|
return cssClasses.filter(css => css).join(' ');
|
|
564
564
|
};
|
|
565
565
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
566
566
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
567
567
|
startIcon &&
|
|
568
|
-
React.createElement(Icon, { className: styles$
|
|
568
|
+
React.createElement(Icon, { className: styles$P.startIcon }, startIcon),
|
|
569
569
|
children,
|
|
570
570
|
endIcon &&
|
|
571
|
-
React.createElement(Icon, { className: styles$
|
|
571
|
+
React.createElement(Icon, { className: styles$P.endIcon }, endIcon))));
|
|
572
572
|
};
|
|
573
573
|
|
|
574
|
-
var css_248z$
|
|
575
|
-
var styles$
|
|
576
|
-
styleInject(css_248z$
|
|
574
|
+
var css_248z$O = ".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}";
|
|
575
|
+
var styles$O = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
576
|
+
styleInject(css_248z$O);
|
|
577
577
|
|
|
578
578
|
const ButtonGroup = (props) => {
|
|
579
579
|
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
580
580
|
const getCssClasses = () => {
|
|
581
581
|
const cssClasses = [];
|
|
582
|
-
cssClasses.push(styles$
|
|
582
|
+
cssClasses.push(styles$O.buttonGroup);
|
|
583
583
|
className && cssClasses.push(className);
|
|
584
584
|
return cssClasses.filter(css => css).join(' ');
|
|
585
585
|
};
|
|
@@ -587,15 +587,15 @@ const ButtonGroup = (props) => {
|
|
|
587
587
|
React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
588
588
|
};
|
|
589
589
|
|
|
590
|
-
var css_248z$
|
|
591
|
-
var styles$
|
|
592
|
-
styleInject(css_248z$
|
|
590
|
+
var css_248z$N = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0;\n}";
|
|
591
|
+
var styles$N = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
592
|
+
styleInject(css_248z$N);
|
|
593
593
|
|
|
594
594
|
const Breadcrumb = (props) => {
|
|
595
595
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
596
596
|
const getCssClasses = () => {
|
|
597
597
|
const cssClasses = [];
|
|
598
|
-
cssClasses.push(styles$
|
|
598
|
+
cssClasses.push(styles$N.breadcrumb);
|
|
599
599
|
className && cssClasses.push(className);
|
|
600
600
|
return cssClasses.filter(css => css).join(' ');
|
|
601
601
|
};
|
|
@@ -605,15 +605,15 @@ const Breadcrumb = (props) => {
|
|
|
605
605
|
|
|
606
606
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
607
607
|
|
|
608
|
-
var css_248z$
|
|
609
|
-
var styles$
|
|
610
|
-
styleInject(css_248z$
|
|
608
|
+
var css_248z$M = ".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}";
|
|
609
|
+
var styles$M = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
610
|
+
styleInject(css_248z$M);
|
|
611
611
|
|
|
612
612
|
const BreadcrumbItem = (props) => {
|
|
613
613
|
const { children, className, isActive, onClick } = props;
|
|
614
614
|
const getCssClasses = () => {
|
|
615
615
|
const cssClasses = [];
|
|
616
|
-
cssClasses.push(styles$
|
|
616
|
+
cssClasses.push(styles$M.breadcrumbItem);
|
|
617
617
|
className && cssClasses.push(className);
|
|
618
618
|
isActive && cssClasses.push('active');
|
|
619
619
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -625,115 +625,115 @@ const BreadcrumbItem = (props) => {
|
|
|
625
625
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
626
626
|
};
|
|
627
627
|
|
|
628
|
-
var css_248z$
|
|
629
|
-
var styles$
|
|
630
|
-
styleInject(css_248z$
|
|
628
|
+
var css_248z$L = ".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}";
|
|
629
|
+
var styles$L = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
630
|
+
styleInject(css_248z$L);
|
|
631
631
|
|
|
632
632
|
const Card = (props) => {
|
|
633
633
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
634
634
|
const getCssClasses = () => {
|
|
635
635
|
const cssClasses = [];
|
|
636
|
-
cssClasses.push(styles$
|
|
637
|
-
shadow && cssClasses.push(styles$
|
|
636
|
+
cssClasses.push(styles$L.card);
|
|
637
|
+
shadow && cssClasses.push(styles$L.shadow);
|
|
638
638
|
className && cssClasses.push(className);
|
|
639
639
|
return cssClasses.filter(css => css).join(' ');
|
|
640
640
|
};
|
|
641
641
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
642
642
|
};
|
|
643
643
|
|
|
644
|
-
var css_248z$
|
|
645
|
-
var styles$
|
|
646
|
-
styleInject(css_248z$
|
|
644
|
+
var css_248z$K = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
645
|
+
var styles$K = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
646
|
+
styleInject(css_248z$K);
|
|
647
647
|
|
|
648
648
|
const CardBody = (props) => {
|
|
649
649
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
650
650
|
const getCssClasses = () => {
|
|
651
651
|
const cssClasses = [];
|
|
652
|
-
cssClasses.push(styles$
|
|
652
|
+
cssClasses.push(styles$K.cardBody);
|
|
653
653
|
className && cssClasses.push(className);
|
|
654
654
|
return cssClasses.filter(css => css).join(' ');
|
|
655
655
|
};
|
|
656
656
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
657
657
|
};
|
|
658
658
|
|
|
659
|
-
var css_248z$
|
|
660
|
-
var styles$
|
|
661
|
-
styleInject(css_248z$
|
|
659
|
+
var css_248z$J = ".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}";
|
|
660
|
+
var styles$J = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
661
|
+
styleInject(css_248z$J);
|
|
662
662
|
|
|
663
663
|
const CardFooter = (props) => {
|
|
664
664
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
665
665
|
const getCssClasses = () => {
|
|
666
666
|
const cssClasses = [];
|
|
667
|
-
cssClasses.push(styles$
|
|
667
|
+
cssClasses.push(styles$J.cardFooter);
|
|
668
668
|
className && cssClasses.push(className);
|
|
669
669
|
return cssClasses.filter(css => css).join(' ');
|
|
670
670
|
};
|
|
671
671
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
672
672
|
};
|
|
673
673
|
|
|
674
|
-
var css_248z$
|
|
675
|
-
var styles$
|
|
676
|
-
styleInject(css_248z$
|
|
674
|
+
var css_248z$I = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
675
|
+
var styles$I = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
676
|
+
styleInject(css_248z$I);
|
|
677
677
|
|
|
678
678
|
const CardSubtitle = (props) => {
|
|
679
679
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
680
680
|
const getCssClasses = () => {
|
|
681
681
|
const cssClasses = [];
|
|
682
|
-
cssClasses.push(styles$
|
|
682
|
+
cssClasses.push(styles$I.cardSubtitle);
|
|
683
683
|
className && cssClasses.push(className);
|
|
684
684
|
return cssClasses.filter(css => css).join(' ');
|
|
685
685
|
};
|
|
686
686
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
687
687
|
};
|
|
688
688
|
|
|
689
|
-
var css_248z$
|
|
690
|
-
var styles$
|
|
691
|
-
styleInject(css_248z$
|
|
689
|
+
var css_248z$H = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
690
|
+
var styles$H = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
691
|
+
styleInject(css_248z$H);
|
|
692
692
|
|
|
693
693
|
const CardText = (props) => {
|
|
694
694
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
695
695
|
const getCssClasses = () => {
|
|
696
696
|
const cssClasses = [];
|
|
697
|
-
cssClasses.push(styles$
|
|
697
|
+
cssClasses.push(styles$H.cardText);
|
|
698
698
|
className && cssClasses.push(className);
|
|
699
699
|
return cssClasses.filter(css => css).join(' ');
|
|
700
700
|
};
|
|
701
701
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
702
702
|
};
|
|
703
703
|
|
|
704
|
-
var css_248z$
|
|
705
|
-
var styles$
|
|
706
|
-
styleInject(css_248z$
|
|
704
|
+
var css_248z$G = ".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}";
|
|
705
|
+
var styles$G = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
706
|
+
styleInject(css_248z$G);
|
|
707
707
|
|
|
708
708
|
const CardTitle = (props) => {
|
|
709
709
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
710
710
|
const getCssClasses = () => {
|
|
711
711
|
const cssClasses = [];
|
|
712
|
-
cssClasses.push(styles$
|
|
712
|
+
cssClasses.push(styles$G.cardTitle);
|
|
713
713
|
className && cssClasses.push(className);
|
|
714
714
|
return cssClasses.filter(css => css).join(' ');
|
|
715
715
|
};
|
|
716
716
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
717
717
|
};
|
|
718
718
|
|
|
719
|
-
var css_248z$
|
|
720
|
-
var styles$
|
|
721
|
-
styleInject(css_248z$
|
|
719
|
+
var css_248z$F = ".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}";
|
|
720
|
+
var styles$F = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
721
|
+
styleInject(css_248z$F);
|
|
722
722
|
|
|
723
723
|
const CardImage = (props) => {
|
|
724
724
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
725
725
|
const getCssClasses = () => {
|
|
726
726
|
const cssClasses = [];
|
|
727
|
-
cssClasses.push(styles$
|
|
727
|
+
cssClasses.push(styles$F.cardImage);
|
|
728
728
|
className && cssClasses.push(className);
|
|
729
729
|
return cssClasses.filter(css => css).join(' ');
|
|
730
730
|
};
|
|
731
731
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
732
732
|
};
|
|
733
733
|
|
|
734
|
-
var css_248z$
|
|
735
|
-
var styles$
|
|
736
|
-
styleInject(css_248z$
|
|
734
|
+
var css_248z$E = ".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}";
|
|
735
|
+
var styles$E = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
736
|
+
styleInject(css_248z$E);
|
|
737
737
|
|
|
738
738
|
const Checkbox = (props) => {
|
|
739
739
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -762,8 +762,8 @@ const Checkbox = (props) => {
|
|
|
762
762
|
};
|
|
763
763
|
const getCssClassesLabel = () => {
|
|
764
764
|
const cssClasses = [];
|
|
765
|
-
cssClasses.push(styles$
|
|
766
|
-
disabled && cssClasses.push(styles$
|
|
765
|
+
cssClasses.push(styles$E.checkboxLabel);
|
|
766
|
+
disabled && cssClasses.push(styles$E['disabled']);
|
|
767
767
|
return cssClasses.filter(css => css).join(' ');
|
|
768
768
|
};
|
|
769
769
|
const getIcon = () => {
|
|
@@ -776,24 +776,24 @@ const Checkbox = (props) => {
|
|
|
776
776
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
777
777
|
}
|
|
778
778
|
};
|
|
779
|
-
return (React.createElement("div", { className: styles$
|
|
779
|
+
return (React.createElement("div", { className: styles$E.checkboxContainer },
|
|
780
780
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
781
781
|
React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
782
782
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
783
783
|
};
|
|
784
784
|
|
|
785
|
-
var css_248z$
|
|
786
|
-
var styles$
|
|
787
|
-
styleInject(css_248z$
|
|
785
|
+
var css_248z$D = ".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}";
|
|
786
|
+
var styles$D = {"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"};
|
|
787
|
+
styleInject(css_248z$D);
|
|
788
788
|
|
|
789
789
|
const Chip = (props) => {
|
|
790
790
|
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"]);
|
|
791
791
|
const getCssClass = () => {
|
|
792
792
|
const cssClasses = [];
|
|
793
|
-
cssClasses.push(styles$
|
|
794
|
-
cssClasses.push(styles$
|
|
795
|
-
shadow && cssClasses.push(styles$
|
|
796
|
-
onClick && cssClasses.push(styles$
|
|
793
|
+
cssClasses.push(styles$D.chip);
|
|
794
|
+
cssClasses.push(styles$D[color]);
|
|
795
|
+
shadow && cssClasses.push(styles$D['shadow']);
|
|
796
|
+
onClick && cssClasses.push(styles$D['clickable']);
|
|
797
797
|
className && cssClasses.push(className);
|
|
798
798
|
return cssClasses.filter(r => r).join(' ');
|
|
799
799
|
};
|
|
@@ -803,7 +803,7 @@ const Chip = (props) => {
|
|
|
803
803
|
};
|
|
804
804
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
805
805
|
React.createElement("span", null, children),
|
|
806
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
806
|
+
isDeletable && (React.createElement("div", { className: styles$D.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
807
807
|
};
|
|
808
808
|
|
|
809
809
|
const CssTransition = (props) => {
|
|
@@ -881,9 +881,9 @@ const CssTransition = (props) => {
|
|
|
881
881
|
React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
882
882
|
};
|
|
883
883
|
|
|
884
|
-
var css_248z$
|
|
885
|
-
var styles$
|
|
886
|
-
styleInject(css_248z$
|
|
884
|
+
var css_248z$C = ".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}";
|
|
885
|
+
var styles$C = {"column":"Column-module_column__fcTgl"};
|
|
886
|
+
styleInject(css_248z$C);
|
|
887
887
|
|
|
888
888
|
const Column = (props) => {
|
|
889
889
|
const { children, className } = props,
|
|
@@ -901,22 +901,22 @@ const Column = (props) => {
|
|
|
901
901
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
902
902
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
903
903
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
904
|
-
cssClasses.push(styles$
|
|
904
|
+
cssClasses.push(styles$C.column);
|
|
905
905
|
className && cssClasses.push(className);
|
|
906
906
|
return cssClasses.filter(css => css).join(' ');
|
|
907
907
|
};
|
|
908
908
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
909
909
|
};
|
|
910
910
|
|
|
911
|
-
var css_248z$
|
|
912
|
-
var styles$
|
|
913
|
-
styleInject(css_248z$
|
|
911
|
+
var css_248z$B = ".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}";
|
|
912
|
+
var styles$B = {"row":"Row-module_row__bTIWp"};
|
|
913
|
+
styleInject(css_248z$B);
|
|
914
914
|
|
|
915
915
|
const Row = (_a) => {
|
|
916
916
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
917
917
|
const getCssClasses = () => {
|
|
918
918
|
const cssClasses = [];
|
|
919
|
-
cssClasses.push(styles$
|
|
919
|
+
cssClasses.push(styles$B.row);
|
|
920
920
|
className && cssClasses.push(className);
|
|
921
921
|
direction && cssClasses.push(`flex-${direction}`);
|
|
922
922
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -924,15 +924,15 @@ const Row = (_a) => {
|
|
|
924
924
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
925
925
|
};
|
|
926
926
|
|
|
927
|
-
var css_248z$
|
|
928
|
-
var styles$
|
|
929
|
-
styleInject(css_248z$
|
|
927
|
+
var css_248z$A = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
928
|
+
var styles$A = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
929
|
+
styleInject(css_248z$A);
|
|
930
930
|
|
|
931
931
|
const FormLabel = (_a) => {
|
|
932
932
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
933
933
|
const getCssClasses = () => {
|
|
934
934
|
const cssClasses = [];
|
|
935
|
-
cssClasses.push(styles$
|
|
935
|
+
cssClasses.push(styles$A.formLabel);
|
|
936
936
|
className && cssClasses.push(className);
|
|
937
937
|
return cssClasses.filter(css => css).join(' ');
|
|
938
938
|
};
|
|
@@ -969,9 +969,9 @@ const FileInput = (props) => {
|
|
|
969
969
|
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))));
|
|
970
970
|
};
|
|
971
971
|
|
|
972
|
-
var css_248z$
|
|
973
|
-
var styles$
|
|
974
|
-
styleInject(css_248z$
|
|
972
|
+
var css_248z$z = ".Select-module_selectContainer__DHFDZ {\n position: relative;\n}\n\n.Select-module_select__Fbn38 {\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 align-items: center;\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n flex-wrap: wrap;\n}\n.Select-module_select__Fbn38 > span {\n flex: 1;\n}\n.Select-module_select__Fbn38:hover {\n cursor: pointer;\n}\n.Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\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.Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n background-color: #e9ecef;\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n cursor: not-allowed;\n}\n.Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n cursor: inherit;\n}\n\n.Select-module_chipContainer__1poFF {\n gap: 10px;\n flex: 1;\n display: inline-flex;\n flex-wrap: wrap;\n}\n\n.Select-module_selectMenu__8y4kQ {\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}";
|
|
973
|
+
var styles$z = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","chipContainer":"Select-module_chipContainer__1poFF","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
974
|
+
styleInject(css_248z$z);
|
|
975
975
|
|
|
976
976
|
const Select = (props) => {
|
|
977
977
|
var _a, _b, _c;
|
|
@@ -984,9 +984,9 @@ const Select = (props) => {
|
|
|
984
984
|
const getCssClass = () => {
|
|
985
985
|
const cssClasses = [];
|
|
986
986
|
className && cssClasses.push(className);
|
|
987
|
-
disabled && cssClasses.push(styles$
|
|
988
|
-
readOnly && cssClasses.push(styles$
|
|
989
|
-
cssClasses.push(styles$
|
|
987
|
+
disabled && cssClasses.push(styles$z['disabled']);
|
|
988
|
+
readOnly && cssClasses.push(styles$z['readOnly']);
|
|
989
|
+
cssClasses.push(styles$z.select);
|
|
990
990
|
return cssClasses.filter(r => r).join(' ');
|
|
991
991
|
};
|
|
992
992
|
useEffect(() => {
|
|
@@ -1108,16 +1108,16 @@ const Select = (props) => {
|
|
|
1108
1108
|
}
|
|
1109
1109
|
}
|
|
1110
1110
|
};
|
|
1111
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
1111
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$z.selectContainer },
|
|
1112
1112
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1113
1113
|
!multiple && renderSingleViewModel(),
|
|
1114
1114
|
multiple &&
|
|
1115
|
-
React.createElement("div", { className: styles$
|
|
1115
|
+
React.createElement("div", { className: styles$z.chipContainer }, renderMultipleViewModel()),
|
|
1116
1116
|
React.createElement(Icon, { className: "ml-2" },
|
|
1117
1117
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
1118
1118
|
isShow &&
|
|
1119
1119
|
createPortal(React.createElement(React.Fragment, null,
|
|
1120
|
-
React.createElement("div", { className: styles$
|
|
1120
|
+
React.createElement("div", { className: styles$z.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 } },
|
|
1121
1121
|
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) },
|
|
1122
1122
|
multiple &&
|
|
1123
1123
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1125,33 +1125,33 @@ const Select = (props) => {
|
|
|
1125
1125
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
1126
1126
|
};
|
|
1127
1127
|
|
|
1128
|
-
var css_248z$
|
|
1129
|
-
var styles$
|
|
1130
|
-
styleInject(css_248z$
|
|
1128
|
+
var css_248z$y = ".Textarea-module_textarea__L5zqa {\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 resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\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 border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
1129
|
+
var styles$y = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1130
|
+
styleInject(css_248z$y);
|
|
1131
1131
|
|
|
1132
1132
|
const Textarea = (props) => {
|
|
1133
1133
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1134
1134
|
const getCssClass = () => {
|
|
1135
1135
|
const cssClasses = [];
|
|
1136
|
-
cssClasses.push(styles$
|
|
1136
|
+
cssClasses.push(styles$y.textarea);
|
|
1137
1137
|
className && cssClasses.push(className);
|
|
1138
|
-
error && cssClasses.push(styles$
|
|
1138
|
+
error && cssClasses.push(styles$y['isInvalid']);
|
|
1139
1139
|
return cssClasses.filter(r => r).join(' ');
|
|
1140
1140
|
};
|
|
1141
1141
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1142
1142
|
};
|
|
1143
1143
|
|
|
1144
|
-
var css_248z$
|
|
1145
|
-
var styles$
|
|
1146
|
-
styleInject(css_248z$
|
|
1144
|
+
var css_248z$x = ".FormInput-module_formInput__VXZip {\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}\n.FormInput-module_formInput__VXZip:focus:not(.FormInput-module_formInput__VXZip.FormInput-module_disabled__EjdD9) {\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}\n.FormInput-module_formInput__VXZip.FormInput-module_isInvalid__vQDuz {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
1145
|
+
var styles$x = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1146
|
+
styleInject(css_248z$x);
|
|
1147
1147
|
|
|
1148
1148
|
const FormInput = (props) => {
|
|
1149
1149
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1150
1150
|
const getCssClasses = () => {
|
|
1151
1151
|
const cssClasses = [];
|
|
1152
|
-
cssClasses.push(styles$
|
|
1152
|
+
cssClasses.push(styles$x.formInput);
|
|
1153
1153
|
className && cssClasses.push(className);
|
|
1154
|
-
!isValid && cssClasses.push(styles$
|
|
1154
|
+
!isValid && cssClasses.push(styles$x['isInvalid']);
|
|
1155
1155
|
return cssClasses.filter(css => css).join(' ');
|
|
1156
1156
|
};
|
|
1157
1157
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1199,12 +1199,12 @@ const FormHint = (props) => {
|
|
|
1199
1199
|
return (React.createElement("small", { className: getCssClasses() }, children));
|
|
1200
1200
|
};
|
|
1201
1201
|
|
|
1202
|
-
var css_248z$
|
|
1203
|
-
var styles$
|
|
1204
|
-
styleInject(css_248z$
|
|
1202
|
+
var css_248z$w = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
1203
|
+
var styles$w = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1204
|
+
styleInject(css_248z$w);
|
|
1205
1205
|
|
|
1206
1206
|
const FormError = (props) => {
|
|
1207
|
-
const { className = styles$
|
|
1207
|
+
const { className = styles$w.isInvalid, errors = [] } = props;
|
|
1208
1208
|
return (React.createElement(Fragment, null, errors &&
|
|
1209
1209
|
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
1210
1210
|
};
|
|
@@ -1219,6 +1219,8 @@ const EmailValidator = (value) => {
|
|
|
1219
1219
|
|
|
1220
1220
|
const IsEqualValidator = (valueA, valueB) => valueA === valueB;
|
|
1221
1221
|
|
|
1222
|
+
const MaxValidator = (valueA, valueB) => valueA > valueB;
|
|
1223
|
+
|
|
1222
1224
|
// values, isSubmitting, handleChange, handleBlur, handleSubmit
|
|
1223
1225
|
class Form extends Component {
|
|
1224
1226
|
constructor(props) {
|
|
@@ -1268,6 +1270,11 @@ class Form extends Component {
|
|
|
1268
1270
|
errors.push({ validator: validatorName, message: 'Email format is wrong' });
|
|
1269
1271
|
}
|
|
1270
1272
|
break;
|
|
1273
|
+
case 'max':
|
|
1274
|
+
if (MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1275
|
+
errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
|
|
1276
|
+
}
|
|
1277
|
+
break;
|
|
1271
1278
|
case 'match':
|
|
1272
1279
|
if (validatorParam) {
|
|
1273
1280
|
const matchControl = this.getControl(validatorParam);
|
|
@@ -1521,16 +1528,16 @@ const DateSelect = (props) => {
|
|
|
1521
1528
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1522
1529
|
// };
|
|
1523
1530
|
|
|
1524
|
-
var css_248z$
|
|
1525
|
-
var styles$
|
|
1526
|
-
styleInject(css_248z$
|
|
1531
|
+
var css_248z$v = ".Drawer-module_drawer__kdQCk {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 320px;\n overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n position: inherit;\n z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n order: 0;\n left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n order: 2;\n right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n overflow: hidden;\n}";
|
|
1532
|
+
var styles$v = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
|
|
1533
|
+
styleInject(css_248z$v);
|
|
1527
1534
|
|
|
1528
1535
|
const Drawer = (props) => {
|
|
1529
1536
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1530
1537
|
useEffect(() => {
|
|
1531
|
-
document.body.classList.add(styles$
|
|
1538
|
+
document.body.classList.add(styles$v.drawerOpen);
|
|
1532
1539
|
return () => {
|
|
1533
|
-
document.body.classList.remove(styles$
|
|
1540
|
+
document.body.classList.remove(styles$v.drawerOpen);
|
|
1534
1541
|
};
|
|
1535
1542
|
}, []);
|
|
1536
1543
|
const handleClickBackdrop = () => {
|
|
@@ -1544,10 +1551,10 @@ const DrawerContent = (props) => {
|
|
|
1544
1551
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1545
1552
|
const getCssClasses = () => {
|
|
1546
1553
|
const cssClasses = [];
|
|
1547
|
-
cssClasses.push(styles$
|
|
1548
|
-
shadow && cssClasses.push(styles$
|
|
1549
|
-
!!permanent && cssClasses.push(styles$
|
|
1550
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1554
|
+
cssClasses.push(styles$v.drawer);
|
|
1555
|
+
shadow && cssClasses.push(styles$v.shadow);
|
|
1556
|
+
!!permanent && cssClasses.push(styles$v['permanent']);
|
|
1557
|
+
position === 'left' ? cssClasses.push(styles$v['left']) : cssClasses.push(styles$v['right']);
|
|
1551
1558
|
className && cssClasses.push(className);
|
|
1552
1559
|
return cssClasses.filter(css => css).join(' ');
|
|
1553
1560
|
};
|
|
@@ -1561,9 +1568,9 @@ const DrawerContent = (props) => {
|
|
|
1561
1568
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1562
1569
|
};
|
|
1563
1570
|
|
|
1564
|
-
var css_248z$
|
|
1565
|
-
var styles$
|
|
1566
|
-
styleInject(css_248z$
|
|
1571
|
+
var css_248z$u = ".MenuBody-module_menuBody__u4FIQ {\n z-index: 1111;\n margin: 0;\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 10rem;\n padding: 8px 0px;\n font-size: 1rem;\n color: #212529;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border-radius: var(--borderRadius);\n}\n.MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n box-shadow: var(--shadow);\n}";
|
|
1572
|
+
var styles$u = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1573
|
+
styleInject(css_248z$u);
|
|
1567
1574
|
|
|
1568
1575
|
const MenuBody = (props) => {
|
|
1569
1576
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1594,8 +1601,8 @@ const MenuBody = (props) => {
|
|
|
1594
1601
|
}, [menuBodyRef]);
|
|
1595
1602
|
const getCssClasses = () => {
|
|
1596
1603
|
const cssClasses = [];
|
|
1597
|
-
cssClasses.push(styles$
|
|
1598
|
-
shadow && cssClasses.push(styles$
|
|
1604
|
+
cssClasses.push(styles$u.menuBody);
|
|
1605
|
+
shadow && cssClasses.push(styles$u.shadow);
|
|
1599
1606
|
className && cssClasses.push(className);
|
|
1600
1607
|
return cssClasses.filter(css => css).join(' ');
|
|
1601
1608
|
};
|
|
@@ -1607,9 +1614,9 @@ const MenuBody = (props) => {
|
|
|
1607
1614
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1608
1615
|
};
|
|
1609
1616
|
|
|
1610
|
-
var css_248z$
|
|
1611
|
-
var styles$
|
|
1612
|
-
styleInject(css_248z$
|
|
1617
|
+
var css_248z$t = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1618
|
+
var styles$t = {"menu":"Menu-module_menu__p8QL-"};
|
|
1619
|
+
styleInject(css_248z$t);
|
|
1613
1620
|
|
|
1614
1621
|
const Menu = (props) => {
|
|
1615
1622
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
@@ -1617,7 +1624,7 @@ const Menu = (props) => {
|
|
|
1617
1624
|
const toggleContainerRef = useRef(null);
|
|
1618
1625
|
const getCssClasses = () => {
|
|
1619
1626
|
const cssClasses = [];
|
|
1620
|
-
cssClasses.push(styles$
|
|
1627
|
+
cssClasses.push(styles$t.menu);
|
|
1621
1628
|
className && cssClasses.push(className);
|
|
1622
1629
|
return cssClasses.filter(css => css).join(' ');
|
|
1623
1630
|
};
|
|
@@ -1630,17 +1637,17 @@ const Menu = (props) => {
|
|
|
1630
1637
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1631
1638
|
};
|
|
1632
1639
|
|
|
1633
|
-
var css_248z$
|
|
1634
|
-
var styles$
|
|
1635
|
-
styleInject(css_248z$
|
|
1640
|
+
var css_248z$s = ".MenuItem-module_menuItem__MeBxN {\n display: flex;\n width: 100%;\n padding: 0.25rem 1.5rem;\n clear: both;\n font-weight: 400;\n color: #212529;\n text-align: inherit;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n}\n.MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n margin-bottom: 0;\n font-size: 0.875rem;\n}\n.MenuItem-module_menuItem__MeBxN:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04);\n}";
|
|
1641
|
+
var styles$s = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1642
|
+
styleInject(css_248z$s);
|
|
1636
1643
|
|
|
1637
1644
|
const MenuItem = (props) => {
|
|
1638
1645
|
const { children, onClick, type = 'item' } = props;
|
|
1639
1646
|
const getCssClasses = () => {
|
|
1640
1647
|
const cssClasses = [];
|
|
1641
|
-
cssClasses.push(styles$
|
|
1648
|
+
cssClasses.push(styles$s.menuItem);
|
|
1642
1649
|
if (type === 'header') {
|
|
1643
|
-
cssClasses.push(styles$
|
|
1650
|
+
cssClasses.push(styles$s.menuItemHeader);
|
|
1644
1651
|
}
|
|
1645
1652
|
return cssClasses.filter(css => css).join(' ');
|
|
1646
1653
|
};
|
|
@@ -1656,23 +1663,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1656
1663
|
return (React.createElement(Fragment, null, children));
|
|
1657
1664
|
};
|
|
1658
1665
|
|
|
1659
|
-
var css_248z$
|
|
1660
|
-
var styles$
|
|
1661
|
-
styleInject(css_248z$
|
|
1666
|
+
var css_248z$r = ".MenuDivider-module_menuItemDivider__oRP-j {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef;\n}";
|
|
1667
|
+
var styles$r = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1668
|
+
styleInject(css_248z$r);
|
|
1662
1669
|
|
|
1663
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1670
|
+
const MenuDivider = () => React.createElement("div", { className: styles$r.menuItemDivider });
|
|
1664
1671
|
|
|
1665
|
-
var css_248z$
|
|
1666
|
-
var styles$
|
|
1667
|
-
styleInject(css_248z$
|
|
1672
|
+
var css_248z$q = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px;\n}";
|
|
1673
|
+
var styles$q = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1674
|
+
styleInject(css_248z$q);
|
|
1668
1675
|
|
|
1669
1676
|
const ExpansionPanelContent = ({ children }) => {
|
|
1670
|
-
return (React.createElement("div", { className: styles$
|
|
1677
|
+
return (React.createElement("div", { className: styles$q.expansionPanelContent }, children));
|
|
1671
1678
|
};
|
|
1672
1679
|
|
|
1673
|
-
var css_248z$
|
|
1674
|
-
var styles$
|
|
1675
|
-
styleInject(css_248z$
|
|
1680
|
+
var css_248z$p = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n cursor: pointer;\n background-color: var(--highlight);\n}";
|
|
1681
|
+
var styles$p = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1682
|
+
styleInject(css_248z$p);
|
|
1676
1683
|
|
|
1677
1684
|
const ExpansionPanelHeader = (props) => {
|
|
1678
1685
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1680,15 +1687,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1680
1687
|
e.stopPropagation();
|
|
1681
1688
|
onClick && onClick(e);
|
|
1682
1689
|
};
|
|
1683
|
-
return (React.createElement("div", { className: styles$
|
|
1690
|
+
return (React.createElement("div", { className: styles$p.expansionPanelHeader, onClick: handleClick },
|
|
1684
1691
|
children,
|
|
1685
1692
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1686
1693
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1687
1694
|
};
|
|
1688
1695
|
|
|
1689
|
-
var css_248z$
|
|
1690
|
-
var styles$
|
|
1691
|
-
styleInject(css_248z$
|
|
1696
|
+
var css_248z$o = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n box-shadow: var(--shadow);\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0;\n}";
|
|
1697
|
+
var styles$o = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1698
|
+
styleInject(css_248z$o);
|
|
1692
1699
|
|
|
1693
1700
|
const ExpansionPanel = (props) => {
|
|
1694
1701
|
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
@@ -1698,11 +1705,11 @@ const ExpansionPanel = (props) => {
|
|
|
1698
1705
|
}, [isExpanded]);
|
|
1699
1706
|
const getCssClasses = () => {
|
|
1700
1707
|
const cssClasses = [];
|
|
1701
|
-
cssClasses.push(styles$
|
|
1708
|
+
cssClasses.push(styles$o.expansionPanel);
|
|
1702
1709
|
if (_isExpanded) {
|
|
1703
|
-
cssClasses.push(styles$
|
|
1710
|
+
cssClasses.push(styles$o.isExpanded);
|
|
1704
1711
|
}
|
|
1705
|
-
shadow && cssClasses.push(styles$
|
|
1712
|
+
shadow && cssClasses.push(styles$o.shadow);
|
|
1706
1713
|
return cssClasses.filter(css => css).join(' ');
|
|
1707
1714
|
};
|
|
1708
1715
|
const handleClickHeader = (event) => {
|
|
@@ -1715,17 +1722,17 @@ const ExpansionPanel = (props) => {
|
|
|
1715
1722
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1716
1723
|
};
|
|
1717
1724
|
|
|
1718
|
-
var css_248z$
|
|
1719
|
-
var styles$
|
|
1720
|
-
styleInject(css_248z$
|
|
1725
|
+
var css_248z$n = ".FloatingActionButton-module_fab__Rw3kd {\n box-shadow: var(--shadow);\n}\n\n.FloatingActionButton-module_fixed__XQOkG {\n position: fixed;\n z-index: 1000;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n top: 16px;\n left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n bottom: 16px;\n left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n top: 64px;\n right: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n bottom: 16px;\n right: 16px;\n}";
|
|
1726
|
+
var styles$n = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
|
|
1727
|
+
styleInject(css_248z$n);
|
|
1721
1728
|
|
|
1722
1729
|
const FloatingActionButton = (props) => {
|
|
1723
1730
|
const { className, icon, color = COLOR.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1724
1731
|
const getCssClasses = () => {
|
|
1725
1732
|
const cssClasses = [];
|
|
1726
|
-
cssClasses.push(styles$
|
|
1727
|
-
fixed && cssClasses.push(styles$
|
|
1728
|
-
position && fixed && cssClasses.push(styles$
|
|
1733
|
+
cssClasses.push(styles$n.fab);
|
|
1734
|
+
fixed && cssClasses.push(styles$n.fixed);
|
|
1735
|
+
position && fixed && cssClasses.push(styles$n[position]);
|
|
1729
1736
|
className && cssClasses.push(className);
|
|
1730
1737
|
return cssClasses.filter(css => css).join(' ');
|
|
1731
1738
|
};
|
|
@@ -1736,14 +1743,14 @@ const FloatingActionButton = (props) => {
|
|
|
1736
1743
|
return (React.createElement(IconButton, { className: getCssClasses(), color: color, size: size, isActive: isActive, disabled: disabled, icon: icon, variant: VARIANT.contained, onClick: handleClick }));
|
|
1737
1744
|
};
|
|
1738
1745
|
|
|
1739
|
-
var css_248z$
|
|
1740
|
-
var styles$
|
|
1741
|
-
styleInject(css_248z$
|
|
1746
|
+
var css_248z$m = ".Link-module_link__YlJQl {\n color: var(--primary);\n text-decoration: underline;\n}\n.Link-module_link__YlJQl:hover {\n color: var(--primary-dark);\n}";
|
|
1747
|
+
var styles$m = {"link":"Link-module_link__YlJQl"};
|
|
1748
|
+
styleInject(css_248z$m);
|
|
1742
1749
|
|
|
1743
1750
|
const Link = (props) => {
|
|
1744
1751
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1745
1752
|
const [status, setStatus] = useState(STATUS.NORMAL);
|
|
1746
|
-
const [cssClassName] = useCssClasses([styles$
|
|
1753
|
+
const [cssClassName] = useCssClasses([styles$m.link, className, status]);
|
|
1747
1754
|
const onMouseEnter = () => {
|
|
1748
1755
|
setStatus(STATUS.HOVERED);
|
|
1749
1756
|
};
|
|
@@ -1753,15 +1760,15 @@ const Link = (props) => {
|
|
|
1753
1760
|
return (React.createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1754
1761
|
};
|
|
1755
1762
|
|
|
1756
|
-
var css_248z$
|
|
1757
|
-
var styles$
|
|
1758
|
-
styleInject(css_248z$
|
|
1763
|
+
var css_248z$l = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n.LoadingIndicator-module_loadingIndicatorContainer__GS9OG.LoadingIndicator-module_isFixed__WCFNG {\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px;\n}\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
|
|
1764
|
+
var styles$l = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1765
|
+
styleInject(css_248z$l);
|
|
1759
1766
|
|
|
1760
1767
|
const LoadingIndicator = (_a) => {
|
|
1761
1768
|
var rest = __rest(_a, []);
|
|
1762
1769
|
const getCssClasses = () => {
|
|
1763
1770
|
const cssClasses = [];
|
|
1764
|
-
cssClasses.push(styles$
|
|
1771
|
+
cssClasses.push(styles$l.loadingIndicator);
|
|
1765
1772
|
return cssClasses.filter(css => css).join(' ');
|
|
1766
1773
|
};
|
|
1767
1774
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1771,8 +1778,8 @@ const LoadingIndicator = (_a) => {
|
|
|
1771
1778
|
const LoadingIndicatorContainer = ({ children, isFixed }) => {
|
|
1772
1779
|
const getCssClasses = () => {
|
|
1773
1780
|
const cssClasses = [];
|
|
1774
|
-
cssClasses.push(styles$
|
|
1775
|
-
isFixed && cssClasses.push(styles$
|
|
1781
|
+
cssClasses.push(styles$l.loadingIndicatorContainer);
|
|
1782
|
+
isFixed && cssClasses.push(styles$l.isFixed);
|
|
1776
1783
|
return cssClasses.filter(css => css).join(' ');
|
|
1777
1784
|
};
|
|
1778
1785
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1800,45 +1807,45 @@ class LoadingIndicatorService {
|
|
|
1800
1807
|
}
|
|
1801
1808
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1802
1809
|
|
|
1803
|
-
var css_248z$
|
|
1804
|
-
var styles$
|
|
1805
|
-
styleInject(css_248z$
|
|
1810
|
+
var css_248z$k = ".ModalHeader-module_modalHeader__tw-u- {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1rem;\n border-top-left-radius: calc(0.3rem - 1px);\n border-top-right-radius: calc(0.3rem - 1px);\n border-bottom: none;\n align-items: center;\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n margin-bottom: 0;\n line-height: 1.5;\n}";
|
|
1811
|
+
var styles$k = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1812
|
+
styleInject(css_248z$k);
|
|
1806
1813
|
|
|
1807
1814
|
const ModalHeader = (props) => {
|
|
1808
1815
|
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1809
1816
|
const handleClick = () => {
|
|
1810
1817
|
onClose && onClose();
|
|
1811
1818
|
};
|
|
1812
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
1813
|
-
React.createElement("h5", { className: styles$
|
|
1819
|
+
return (React.createElement("div", Object.assign({ className: styles$k.modalHeader }, rest),
|
|
1820
|
+
React.createElement("h5", { className: styles$k.modalTitle }, children),
|
|
1814
1821
|
isDismissable &&
|
|
1815
1822
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
1816
1823
|
};
|
|
1817
1824
|
|
|
1818
|
-
var css_248z$
|
|
1819
|
-
var styles$
|
|
1820
|
-
styleInject(css_248z$
|
|
1825
|
+
var css_248z$j = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem;\n}";
|
|
1826
|
+
var styles$j = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1827
|
+
styleInject(css_248z$j);
|
|
1821
1828
|
|
|
1822
|
-
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$
|
|
1829
|
+
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$j.modalBody }, children));
|
|
1823
1830
|
|
|
1824
|
-
var css_248z$
|
|
1825
|
-
var styles$
|
|
1826
|
-
styleInject(css_248z$
|
|
1831
|
+
var css_248z$i = ".ModalFooter-module_modalFooter__SNm-f {\n display: flex;\n flex-wrap: wrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n padding: 0.75rem;\n border-bottom-right-radius: calc(0.3rem - 1px);\n border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n margin: 0.25rem;\n}";
|
|
1832
|
+
var styles$i = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1833
|
+
styleInject(css_248z$i);
|
|
1827
1834
|
|
|
1828
|
-
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$
|
|
1835
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$i.modalFooter }, children));
|
|
1829
1836
|
|
|
1830
|
-
var css_248z$
|
|
1831
|
-
var styles$
|
|
1832
|
-
styleInject(css_248z$
|
|
1837
|
+
var css_248z$h = ".Modal-module_modal__HMxWV {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n z-index: 1111 !important;\n border-radius: var(--borderRadius);\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_sm__CsR6U {\n max-width: 300px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_md__lNggx {\n max-width: 500px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_lg__6dtT2 {\n max-width: 1140px;\n}\n@media (min-width: 576px) {\n .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n max-width: 600px;\n }\n}\n\n.Modal-module_modalDialog__fNqyK {\n position: relative;\n width: auto;\n pointer-events: none;\n}\n\n.Modal-module_modalDialogCentered__sa2wv {\n min-height: calc(100% - 3.5rem);\n display: flex;\n align-items: center;\n}\n\n.Modal-module_modalContent__9wAwB {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n pointer-events: auto;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 0.3rem;\n box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);\n outline: 0;\n}\n@media (min-width: 576px) {\n .Modal-module_modalContent__9wAwB {\n max-width: 500px;\n margin: 1.75rem auto;\n }\n}\n\n.Modal-module_fullscreen__iepGa {\n width: 100% !important;\n height: 100% !important;\n max-height: 100% !important;\n margin: 0;\n padding: 0;\n}\n.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n height: auto;\n min-height: 100%;\n max-height: 100%;\n border-radius: 0;\n overflow: auto;\n max-width: 100%;\n}\n@media (min-width: 320px) {\n .Modal-module_fullscreen__iepGa {\n max-width: 100% !important;\n }\n}";
|
|
1838
|
+
var styles$h = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module_modal-dialog__U2wGf","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
|
|
1839
|
+
styleInject(css_248z$h);
|
|
1833
1840
|
|
|
1834
1841
|
const Modal = (props) => {
|
|
1835
1842
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1836
1843
|
const getCssClass = () => {
|
|
1837
1844
|
const cssClasses = [];
|
|
1838
|
-
cssClasses.push(styles$
|
|
1839
|
-
cssClasses.push(styles$
|
|
1840
|
-
fullScreen && cssClasses.push(styles$
|
|
1841
|
-
size && cssClasses.push(styles$
|
|
1845
|
+
cssClasses.push(styles$h.modalDialog);
|
|
1846
|
+
cssClasses.push(styles$h.modalDialogCentered);
|
|
1847
|
+
fullScreen && cssClasses.push(styles$h.fullscreen);
|
|
1848
|
+
size && cssClasses.push(styles$h[size]);
|
|
1842
1849
|
className && cssClasses.push(className);
|
|
1843
1850
|
return cssClasses.filter(r => r).join(' ');
|
|
1844
1851
|
};
|
|
@@ -1852,9 +1859,9 @@ const Modal = (props) => {
|
|
|
1852
1859
|
onBackdropClick && onBackdropClick();
|
|
1853
1860
|
};
|
|
1854
1861
|
return (React.createElement(React.Fragment, null,
|
|
1855
|
-
React.createElement("div", { className: styles$
|
|
1862
|
+
React.createElement("div", { className: styles$h.modal },
|
|
1856
1863
|
React.createElement("div", { className: getCssClass() },
|
|
1857
|
-
React.createElement("div", { className: styles$
|
|
1864
|
+
React.createElement("div", { className: styles$h.modalContent },
|
|
1858
1865
|
header &&
|
|
1859
1866
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1860
1867
|
React.createElement(ModalBody, null, children),
|
|
@@ -1979,6 +1986,31 @@ const NumberSelect = (props) => {
|
|
|
1979
1986
|
return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
1980
1987
|
};
|
|
1981
1988
|
|
|
1989
|
+
var css_248z$g = ".ProgressBar-module_progressBarContainer__vtbBw {\n display: flex;\n height: var(--progress-height);\n overflow: hidden;\n background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n color: var(--progress-bar-color);\n text-align: center;\n white-space: nowrap;\n transition: var(--progress-bar-transition);\n background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n width: 100%;\n height: 100%;\n animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n 0% {\n transform: translateX(0) scaleX(0);\n }\n 40% {\n transform: translateX(0) scaleX(0.4);\n }\n 100% {\n transform: translateX(100%) scaleX(0.5);\n }\n}";
|
|
1990
|
+
var styles$g = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
1991
|
+
styleInject(css_248z$g);
|
|
1992
|
+
|
|
1993
|
+
const ProgressBar = (props) => {
|
|
1994
|
+
const { className, color = COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
1995
|
+
const getCssClasses = () => {
|
|
1996
|
+
const cssClasses = [];
|
|
1997
|
+
cssClasses.push(styles$g.progressBarContainer);
|
|
1998
|
+
className && cssClasses.push(className);
|
|
1999
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2000
|
+
};
|
|
2001
|
+
const getCssClassesBar = () => {
|
|
2002
|
+
const cssClasses = [];
|
|
2003
|
+
cssClasses.push(styles$g.progressBar);
|
|
2004
|
+
indeterminate && cssClasses.push(styles$g['indeterminate']);
|
|
2005
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2006
|
+
};
|
|
2007
|
+
useEffect(() => {
|
|
2008
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2009
|
+
}, [color]);
|
|
2010
|
+
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2011
|
+
React.createElement("div", { className: getCssClassesBar(), style: { 'width': `${(!indeterminate && value && value > 0) ? value : 100}%` }, role: "progressbar" })));
|
|
2012
|
+
};
|
|
2013
|
+
|
|
1982
2014
|
class SidebarItemModel {
|
|
1983
2015
|
constructor(id, label, path, icon, isActive, items, isCollapsible = false, isCollapsed = false) {
|
|
1984
2016
|
this.id = id;
|
|
@@ -2559,7 +2591,7 @@ const Tooltip = (props) => {
|
|
|
2559
2591
|
onMouseOver: handleMouseOver,
|
|
2560
2592
|
onMouseLeave: handleMouseLeave,
|
|
2561
2593
|
})),
|
|
2562
|
-
show &&
|
|
2594
|
+
show && text &&
|
|
2563
2595
|
React.createElement("div", { className: styles$2.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2564
2596
|
text,
|
|
2565
2597
|
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
@@ -2759,4 +2791,4 @@ const TreeItem = (props) => {
|
|
|
2759
2791
|
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2760
2792
|
};
|
|
2761
2793
|
|
|
2762
|
-
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|
|
2794
|
+
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|