react-asc 19.0.3 → 19.0.7
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/Button/Button.d.ts +1 -0
- package/components/Modal/ModalFooter.d.ts +2 -6
- package/components/Modal/modal.interfaces.d.ts +1 -0
- package/hooks/useHover.d.ts +2 -2
- package/index.es.js +324 -305
- package/index.js +324 -305
- package/package.json +1 -1
- package/react-asc.scss +2 -2
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$Z = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px; }\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.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$Z = {"alert":"Alert-module_alert__b4tbk","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$Z);
|
|
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$Z.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$Z.contained);
|
|
101
|
+
cssClasses.push(styles$Z[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$Z.outline);
|
|
105
|
+
cssClasses.push(styles$Z[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$Z['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$Y = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0; }\n .AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: var(--shadow); }\n";
|
|
115
|
+
var styles$Y = {"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$Y);
|
|
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$Y[color]);
|
|
123
|
+
cssClasses.push(styles$Y.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$Y['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$X = ".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 .AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer; }\n";
|
|
132
|
+
var styles$X = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$X);
|
|
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$X.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$W = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px; }\n .Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit; }\n .Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary); }\n .Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent); }\n .Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary); }\n .Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light); }\n .Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark); }\n";
|
|
147
|
+
var styles$W = {"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$W);
|
|
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$W.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$W[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$V = ".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 .IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit; }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark); }\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 .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 .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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white); }\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 .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";
|
|
163
|
+
var styles$V = {"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$V);
|
|
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$V[color]);
|
|
171
|
+
cssClasses.push(styles$V[variant]);
|
|
172
|
+
cssClasses.push(styles$V[size]);
|
|
173
|
+
cssClasses.push(styles$V.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$V.active);
|
|
175
|
+
disabled && cssClasses.push(styles$V.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$V.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -243,22 +243,26 @@ function useWindowSize() {
|
|
|
243
243
|
return windowSize;
|
|
244
244
|
}
|
|
245
245
|
|
|
246
|
-
function useHover(
|
|
246
|
+
function useHover() {
|
|
247
247
|
const [value, setValue] = useState(false);
|
|
248
|
+
const ref = useRef(null);
|
|
248
249
|
const handleMouseOver = () => setValue(true);
|
|
249
250
|
const handleMouseOut = () => setValue(false);
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
node.
|
|
253
|
-
node
|
|
254
|
-
|
|
251
|
+
useEffect(() => {
|
|
252
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
253
|
+
const node = ref.current;
|
|
254
|
+
if (node) {
|
|
255
|
+
node.addEventListener("mouseover", handleMouseOver);
|
|
256
|
+
node.addEventListener("mouseout", handleMouseOut);
|
|
255
257
|
return () => {
|
|
256
258
|
node.removeEventListener("mouseover", handleMouseOver);
|
|
257
259
|
node.removeEventListener("mouseout", handleMouseOut);
|
|
258
260
|
};
|
|
259
|
-
}
|
|
260
|
-
|
|
261
|
-
|
|
261
|
+
}
|
|
262
|
+
return;
|
|
263
|
+
}, [ref.current] // Recall only if ref changes
|
|
264
|
+
);
|
|
265
|
+
return [ref, value];
|
|
262
266
|
}
|
|
263
267
|
|
|
264
268
|
const useConstructor = (callBack) => {
|
|
@@ -278,6 +282,10 @@ function useDebounce(callback, timeout, deps) {
|
|
|
278
282
|
}, deps);
|
|
279
283
|
}
|
|
280
284
|
|
|
285
|
+
var css_248z$U = ".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";
|
|
286
|
+
var styles$U = {"backdrop":"Backdrop-module_backdrop__IRMoL"};
|
|
287
|
+
styleInject(css_248z$U);
|
|
288
|
+
|
|
281
289
|
const Backdrop = (props) => {
|
|
282
290
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
283
291
|
const handleClick = (e) => {
|
|
@@ -286,10 +294,8 @@ const Backdrop = (props) => {
|
|
|
286
294
|
};
|
|
287
295
|
const getCssClasses = () => {
|
|
288
296
|
const cssClasses = [];
|
|
289
|
-
cssClasses.push(
|
|
290
|
-
|
|
291
|
-
cssClasses.push(`bg-transparent`);
|
|
292
|
-
}
|
|
297
|
+
cssClasses.push(styles$U.backdrop);
|
|
298
|
+
isTransparent && cssClasses.push(`bg-transparent`);
|
|
293
299
|
return cssClasses.filter(css => css).join(' ');
|
|
294
300
|
};
|
|
295
301
|
const getStyles = () => {
|
|
@@ -299,34 +305,34 @@ const Backdrop = (props) => {
|
|
|
299
305
|
return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
|
|
300
306
|
};
|
|
301
307
|
|
|
302
|
-
var css_248z$
|
|
303
|
-
var styles$
|
|
304
|
-
styleInject(css_248z$
|
|
308
|
+
var css_248z$T = ".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";
|
|
309
|
+
var styles$T = {"list":"List-module_list__gpZ41"};
|
|
310
|
+
styleInject(css_248z$T);
|
|
305
311
|
|
|
306
312
|
const List = (props) => {
|
|
307
313
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
308
314
|
const getCssClasses = () => {
|
|
309
315
|
const cssClasses = [];
|
|
310
|
-
isFlush && cssClasses.push(styles$
|
|
311
|
-
cssClasses.push(styles$
|
|
316
|
+
isFlush && cssClasses.push(styles$T.flush);
|
|
317
|
+
cssClasses.push(styles$T.list);
|
|
312
318
|
className && cssClasses.push(className);
|
|
313
319
|
return cssClasses.filter(css => css).join(' ');
|
|
314
320
|
};
|
|
315
321
|
return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
316
322
|
};
|
|
317
323
|
|
|
318
|
-
var css_248z$
|
|
319
|
-
var styles$
|
|
320
|
-
styleInject(css_248z$
|
|
324
|
+
var css_248z$S = ".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 .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 .ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0; }\n .ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit; }\n";
|
|
325
|
+
var styles$S = {"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"};
|
|
326
|
+
styleInject(css_248z$S);
|
|
321
327
|
|
|
322
328
|
const ListItem = (props) => {
|
|
323
329
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
324
330
|
const getCssClasses = () => {
|
|
325
331
|
const cssClasses = [];
|
|
326
|
-
cssClasses.push(styles$
|
|
327
|
-
color && cssClasses.push(styles$
|
|
328
|
-
active && cssClasses.push(styles$
|
|
329
|
-
disabled && cssClasses.push(styles$
|
|
332
|
+
cssClasses.push(styles$S.listItem);
|
|
333
|
+
color && cssClasses.push(styles$S[color]);
|
|
334
|
+
active && cssClasses.push(styles$S['active']);
|
|
335
|
+
disabled && cssClasses.push(styles$S['disabled']);
|
|
330
336
|
className && cssClasses.push(className);
|
|
331
337
|
return cssClasses.filter(css => css).join(' ');
|
|
332
338
|
};
|
|
@@ -336,42 +342,42 @@ const ListItem = (props) => {
|
|
|
336
342
|
return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
337
343
|
};
|
|
338
344
|
|
|
339
|
-
var css_248z$
|
|
340
|
-
var styles$
|
|
341
|
-
styleInject(css_248z$
|
|
345
|
+
var css_248z$R = ".ListItemAvatar-module_avatar__sVWfR {\n margin-right: 16px; }\n .ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px; }\n .ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%; }\n";
|
|
346
|
+
var styles$R = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
347
|
+
styleInject(css_248z$R);
|
|
342
348
|
|
|
343
349
|
const ListItemAvatar = (_a) => {
|
|
344
350
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
345
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
351
|
+
return (React.createElement("div", Object.assign({ className: styles$R.avatar }, rest), avatar));
|
|
346
352
|
};
|
|
347
353
|
|
|
348
|
-
var css_248z$
|
|
349
|
-
var styles$
|
|
350
|
-
styleInject(css_248z$
|
|
354
|
+
var css_248z$Q = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px; }\n .ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px; }\n";
|
|
355
|
+
var styles$Q = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
356
|
+
styleInject(css_248z$Q);
|
|
351
357
|
|
|
352
358
|
const ListItemIcon = (_a) => {
|
|
353
359
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
354
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
360
|
+
return (React.createElement("div", Object.assign({ className: styles$Q.icon }, rest), icon));
|
|
355
361
|
};
|
|
356
362
|
|
|
357
|
-
var css_248z$
|
|
358
|
-
var styles$
|
|
359
|
-
styleInject(css_248z$
|
|
363
|
+
var css_248z$P = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px; }\n .ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px; }\n";
|
|
364
|
+
var styles$P = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
365
|
+
styleInject(css_248z$P);
|
|
360
366
|
|
|
361
367
|
const ListItemAction = (_a) => {
|
|
362
368
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
363
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
369
|
+
return (React.createElement("div", Object.assign({ className: styles$P.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
364
370
|
};
|
|
365
371
|
|
|
366
|
-
var css_248z$
|
|
367
|
-
var styles$
|
|
368
|
-
styleInject(css_248z$
|
|
372
|
+
var css_248z$O = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1; }\n";
|
|
373
|
+
var styles$O = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
374
|
+
styleInject(css_248z$O);
|
|
369
375
|
|
|
370
376
|
const ListItemText = (_a) => {
|
|
371
377
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
372
378
|
const getCssClasses = () => {
|
|
373
379
|
const cssClasses = [];
|
|
374
|
-
cssClasses.push(styles$
|
|
380
|
+
cssClasses.push(styles$O.listItemText);
|
|
375
381
|
return cssClasses.filter(css => css).join(' ');
|
|
376
382
|
};
|
|
377
383
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -382,9 +388,9 @@ const ListItemText = (_a) => {
|
|
|
382
388
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
383
389
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
384
390
|
|
|
385
|
-
var css_248z$
|
|
386
|
-
var styles$
|
|
387
|
-
styleInject(css_248z$
|
|
391
|
+
var css_248z$N = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative; }\n\n.AutoComplete-module_select__NNYOi {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .AutoComplete-module_select__NNYOi:hover {\n cursor: pointer; }\n\n.AutoComplete-module_selectMenu__Gu81L {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 38px;\n z-index: 1050;\n max-height: 280px;\n overflow: auto; }\n";
|
|
392
|
+
var styles$N = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
393
|
+
styleInject(css_248z$N);
|
|
388
394
|
|
|
389
395
|
// preset value
|
|
390
396
|
// enter -> delay? -> show results
|
|
@@ -440,7 +446,7 @@ const AutoComplete = (props) => {
|
|
|
440
446
|
const getCssClass = () => {
|
|
441
447
|
const cssClasses = [];
|
|
442
448
|
className && cssClasses.push(className);
|
|
443
|
-
cssClasses.push(styles$
|
|
449
|
+
cssClasses.push(styles$N.select);
|
|
444
450
|
return cssClasses.filter(r => r).join(' ');
|
|
445
451
|
};
|
|
446
452
|
const show = () => setIsShow(true);
|
|
@@ -464,35 +470,35 @@ const AutoComplete = (props) => {
|
|
|
464
470
|
setModel('');
|
|
465
471
|
setSearchText('');
|
|
466
472
|
};
|
|
467
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
473
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$N.selectContainer },
|
|
468
474
|
React.createElement("div", { className: "d-flex" },
|
|
469
475
|
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 }),
|
|
470
476
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
471
477
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
472
478
|
isShow &&
|
|
473
479
|
React.createElement(React.Fragment, null,
|
|
474
|
-
React.createElement("div", { className: styles$
|
|
480
|
+
React.createElement("div", { className: styles$N.selectMenu },
|
|
475
481
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
476
482
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
477
483
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
478
484
|
};
|
|
479
485
|
|
|
480
|
-
var css_248z$
|
|
481
|
-
var styles$
|
|
482
|
-
styleInject(css_248z$
|
|
486
|
+
var css_248z$M = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle; }\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 .Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n";
|
|
487
|
+
var styles$M = {"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"};
|
|
488
|
+
styleInject(css_248z$M);
|
|
483
489
|
|
|
484
490
|
const Badge = (props) => {
|
|
485
491
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
486
492
|
const getCssClassesBadgeContainer = () => {
|
|
487
493
|
const cssClasses = [];
|
|
488
|
-
cssClasses.push(styles$
|
|
494
|
+
cssClasses.push(styles$M.badgeContainer);
|
|
489
495
|
className && cssClasses.push(className);
|
|
490
496
|
return cssClasses.filter(css => css).join(' ');
|
|
491
497
|
};
|
|
492
498
|
const getCssClassesBadge = () => {
|
|
493
499
|
const cssClasses = [];
|
|
494
|
-
cssClasses.push(styles$
|
|
495
|
-
cssClasses.push(styles$
|
|
500
|
+
cssClasses.push(styles$M.badge);
|
|
501
|
+
cssClasses.push(styles$M[color]);
|
|
496
502
|
return cssClasses.filter(css => css).join(' ');
|
|
497
503
|
};
|
|
498
504
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -500,26 +506,26 @@ const Badge = (props) => {
|
|
|
500
506
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
501
507
|
};
|
|
502
508
|
|
|
503
|
-
var css_248z$
|
|
504
|
-
var styles$
|
|
505
|
-
styleInject(css_248z$
|
|
509
|
+
var css_248z$L = ".Button-module_button__qeIer {\n text-transform: uppercase !important;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius); }\n .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow); }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\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 .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\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 .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\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 .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\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 .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary) !important; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px; }\n";
|
|
510
|
+
var styles$L = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","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"};
|
|
511
|
+
styleInject(css_248z$L);
|
|
506
512
|
|
|
507
513
|
const Button = (props) => {
|
|
508
|
-
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
|
|
514
|
+
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow"]);
|
|
509
515
|
const getCssClasses = () => {
|
|
510
516
|
const cssClasses = [];
|
|
511
|
-
cssClasses.push(styles$
|
|
517
|
+
cssClasses.push(styles$L.button);
|
|
512
518
|
if (variant !== 'outline' && variant !== 'text') {
|
|
513
|
-
cssClasses.push(styles$
|
|
514
|
-
cssClasses.push(styles$
|
|
519
|
+
cssClasses.push(styles$L.btnContained);
|
|
520
|
+
cssClasses.push(styles$L[color]);
|
|
515
521
|
}
|
|
516
522
|
if (variant === 'outline') {
|
|
517
|
-
cssClasses.push(styles$
|
|
518
|
-
cssClasses.push(styles$
|
|
523
|
+
cssClasses.push(styles$L.btnOutline);
|
|
524
|
+
cssClasses.push(styles$L[color]);
|
|
519
525
|
}
|
|
520
526
|
if (variant === 'text') {
|
|
521
|
-
cssClasses.push(styles$
|
|
522
|
-
cssClasses.push(styles$
|
|
527
|
+
cssClasses.push(styles$L.btnText);
|
|
528
|
+
cssClasses.push(styles$L[color]);
|
|
523
529
|
}
|
|
524
530
|
if (isRounded && variant !== 'text') {
|
|
525
531
|
cssClasses.push(`rounded-pill`);
|
|
@@ -527,42 +533,43 @@ const Button = (props) => {
|
|
|
527
533
|
if (isActive) {
|
|
528
534
|
cssClasses.push('active');
|
|
529
535
|
}
|
|
536
|
+
shadow && cssClasses.push(styles$L.shadow);
|
|
530
537
|
className && cssClasses.push(className);
|
|
531
538
|
return cssClasses.filter(css => css).join(' ');
|
|
532
539
|
};
|
|
533
540
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
534
541
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
535
542
|
startIcon &&
|
|
536
|
-
React.createElement(Icon, { className: styles$
|
|
543
|
+
React.createElement(Icon, { className: styles$L.startIcon }, startIcon),
|
|
537
544
|
children,
|
|
538
545
|
endIcon &&
|
|
539
|
-
React.createElement(Icon, { className: styles$
|
|
546
|
+
React.createElement(Icon, { className: styles$L.endIcon }, endIcon))));
|
|
540
547
|
};
|
|
541
548
|
|
|
542
|
-
var css_248z$
|
|
543
|
-
var styles$
|
|
544
|
-
styleInject(css_248z$
|
|
549
|
+
var css_248z$K = ".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";
|
|
550
|
+
var styles$K = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
551
|
+
styleInject(css_248z$K);
|
|
545
552
|
|
|
546
553
|
const ButtonGroup = (props) => {
|
|
547
554
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
548
555
|
const getCssClasses = () => {
|
|
549
556
|
const cssClasses = [];
|
|
550
|
-
cssClasses.push(styles$
|
|
557
|
+
cssClasses.push(styles$K.buttonGroup);
|
|
551
558
|
className && cssClasses.push(className);
|
|
552
559
|
return cssClasses.filter(css => css).join(' ');
|
|
553
560
|
};
|
|
554
561
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
555
562
|
};
|
|
556
563
|
|
|
557
|
-
var css_248z$
|
|
558
|
-
var styles$
|
|
559
|
-
styleInject(css_248z$
|
|
564
|
+
var css_248z$J = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin-bottom: 0;\n list-style: none;\n margin-bottom: 1rem; }\n";
|
|
565
|
+
var styles$J = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
566
|
+
styleInject(css_248z$J);
|
|
560
567
|
|
|
561
568
|
const Breadcrumb = (props) => {
|
|
562
569
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
563
570
|
const getCssClasses = () => {
|
|
564
571
|
const cssClasses = [];
|
|
565
|
-
cssClasses.push(styles$
|
|
572
|
+
cssClasses.push(styles$J.breadcrumb);
|
|
566
573
|
className && cssClasses.push(className);
|
|
567
574
|
return cssClasses.filter(css => css).join(' ');
|
|
568
575
|
};
|
|
@@ -572,15 +579,15 @@ const Breadcrumb = (props) => {
|
|
|
572
579
|
|
|
573
580
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
574
581
|
|
|
575
|
-
var css_248z$
|
|
576
|
-
var styles$
|
|
577
|
-
styleInject(css_248z$
|
|
582
|
+
var css_248z$I = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\"; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary); }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset; }\n";
|
|
583
|
+
var styles$I = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
584
|
+
styleInject(css_248z$I);
|
|
578
585
|
|
|
579
586
|
const BreadcrumbItem = (props) => {
|
|
580
587
|
const { children, className, isActive, onClick } = props;
|
|
581
588
|
const getCssClasses = () => {
|
|
582
589
|
const cssClasses = [];
|
|
583
|
-
cssClasses.push(styles$
|
|
590
|
+
cssClasses.push(styles$I.breadcrumbItem);
|
|
584
591
|
className && cssClasses.push(className);
|
|
585
592
|
isActive && cssClasses.push('active');
|
|
586
593
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -592,115 +599,115 @@ const BreadcrumbItem = (props) => {
|
|
|
592
599
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
593
600
|
};
|
|
594
601
|
|
|
595
|
-
var css_248z$
|
|
596
|
-
var styles$
|
|
597
|
-
styleInject(css_248z$
|
|
602
|
+
var css_248z$H = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius); }\n .Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow); }\n";
|
|
603
|
+
var styles$H = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
604
|
+
styleInject(css_248z$H);
|
|
598
605
|
|
|
599
606
|
const Card = (props) => {
|
|
600
607
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
601
608
|
const getCssClasses = () => {
|
|
602
609
|
const cssClasses = [];
|
|
603
|
-
cssClasses.push(styles$
|
|
604
|
-
shadow && cssClasses.push(styles$
|
|
610
|
+
cssClasses.push(styles$H.card);
|
|
611
|
+
shadow && cssClasses.push(styles$H.shadow);
|
|
605
612
|
className && cssClasses.push(className);
|
|
606
613
|
return cssClasses.filter(css => css).join(' ');
|
|
607
614
|
};
|
|
608
615
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
609
616
|
};
|
|
610
617
|
|
|
611
|
-
var css_248z$
|
|
612
|
-
var styles$
|
|
613
|
-
styleInject(css_248z$
|
|
618
|
+
var css_248z$G = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem; }\n";
|
|
619
|
+
var styles$G = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
620
|
+
styleInject(css_248z$G);
|
|
614
621
|
|
|
615
622
|
const CardBody = (props) => {
|
|
616
623
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
617
624
|
const getCssClasses = () => {
|
|
618
625
|
const cssClasses = [];
|
|
619
|
-
cssClasses.push(styles$
|
|
626
|
+
cssClasses.push(styles$G.cardBody);
|
|
620
627
|
className && cssClasses.push(className);
|
|
621
628
|
return cssClasses.filter(css => css).join(' ');
|
|
622
629
|
};
|
|
623
630
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
624
631
|
};
|
|
625
632
|
|
|
626
|
-
var css_248z$
|
|
627
|
-
var styles$
|
|
628
|
-
styleInject(css_248z$
|
|
633
|
+
var css_248z$F = ".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 .CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
|
|
634
|
+
var styles$F = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
635
|
+
styleInject(css_248z$F);
|
|
629
636
|
|
|
630
637
|
const CardFooter = (props) => {
|
|
631
638
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
632
639
|
const getCssClasses = () => {
|
|
633
640
|
const cssClasses = [];
|
|
634
|
-
cssClasses.push(styles$
|
|
641
|
+
cssClasses.push(styles$F.cardFooter);
|
|
635
642
|
className && cssClasses.push(className);
|
|
636
643
|
return cssClasses.filter(css => css).join(' ');
|
|
637
644
|
};
|
|
638
645
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
639
646
|
};
|
|
640
647
|
|
|
641
|
-
var css_248z$
|
|
642
|
-
var styles$
|
|
643
|
-
styleInject(css_248z$
|
|
648
|
+
var css_248z$E = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important; }\n";
|
|
649
|
+
var styles$E = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
650
|
+
styleInject(css_248z$E);
|
|
644
651
|
|
|
645
652
|
const CardSubtitle = (props) => {
|
|
646
653
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
647
654
|
const getCssClasses = () => {
|
|
648
655
|
const cssClasses = [];
|
|
649
|
-
cssClasses.push(styles$
|
|
656
|
+
cssClasses.push(styles$E.cardSubtitle);
|
|
650
657
|
className && cssClasses.push(className);
|
|
651
658
|
return cssClasses.filter(css => css).join(' ');
|
|
652
659
|
};
|
|
653
660
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
654
661
|
};
|
|
655
662
|
|
|
656
|
-
var css_248z$
|
|
657
|
-
var styles$
|
|
658
|
-
styleInject(css_248z$
|
|
663
|
+
var css_248z$D = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0; }\n";
|
|
664
|
+
var styles$D = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
665
|
+
styleInject(css_248z$D);
|
|
659
666
|
|
|
660
667
|
const CardText = (props) => {
|
|
661
668
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
662
669
|
const getCssClasses = () => {
|
|
663
670
|
const cssClasses = [];
|
|
664
|
-
cssClasses.push(styles$
|
|
671
|
+
cssClasses.push(styles$D.cardText);
|
|
665
672
|
className && cssClasses.push(className);
|
|
666
673
|
return cssClasses.filter(css => css).join(' ');
|
|
667
674
|
};
|
|
668
675
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
669
676
|
};
|
|
670
677
|
|
|
671
|
-
var css_248z$
|
|
672
|
-
var styles$
|
|
673
|
-
styleInject(css_248z$
|
|
678
|
+
var css_248z$C = ".CardTitle-module_cardTitle__aiPSE {\n margin-bottom: 0;\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 1.334;\n letter-spacing: 0em; }\n";
|
|
679
|
+
var styles$C = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
680
|
+
styleInject(css_248z$C);
|
|
674
681
|
|
|
675
682
|
const CardTitle = (props) => {
|
|
676
683
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
677
684
|
const getCssClasses = () => {
|
|
678
685
|
const cssClasses = [];
|
|
679
|
-
cssClasses.push(styles$
|
|
686
|
+
cssClasses.push(styles$C.cardTitle);
|
|
680
687
|
className && cssClasses.push(className);
|
|
681
688
|
return cssClasses.filter(css => css).join(' ');
|
|
682
689
|
};
|
|
683
690
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
684
691
|
};
|
|
685
692
|
|
|
686
|
-
var css_248z$
|
|
687
|
-
var styles$
|
|
688
|
-
styleInject(css_248z$
|
|
693
|
+
var css_248z$B = ".CardImage-module_cardImage__Z6JWW {\n flex-shrink: 0;\n width: 100%;\n border-top-left-radius: calc(0.25rem - 1px);\n border-top-right-radius: calc(0.25rem - 1px); }\n";
|
|
694
|
+
var styles$B = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
695
|
+
styleInject(css_248z$B);
|
|
689
696
|
|
|
690
697
|
const CardImage = (props) => {
|
|
691
698
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
692
699
|
const getCssClasses = () => {
|
|
693
700
|
const cssClasses = [];
|
|
694
|
-
cssClasses.push(styles$
|
|
701
|
+
cssClasses.push(styles$B.cardImage);
|
|
695
702
|
className && cssClasses.push(className);
|
|
696
703
|
return cssClasses.filter(css => css).join(' ');
|
|
697
704
|
};
|
|
698
705
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
699
706
|
};
|
|
700
707
|
|
|
701
|
-
var css_248z$
|
|
702
|
-
var styles$
|
|
703
|
-
styleInject(css_248z$
|
|
708
|
+
var css_248z$A = ".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 .Checkbox-module_checkboxContainer__x2GCi label {\n margin-bottom: 0;\n margin-left: 0; }\n .Checkbox-module_checkboxContainer__x2GCi label: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";
|
|
709
|
+
var styles$A = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
710
|
+
styleInject(css_248z$A);
|
|
704
711
|
|
|
705
712
|
const Checkbox = (props) => {
|
|
706
713
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -737,24 +744,24 @@ const Checkbox = (props) => {
|
|
|
737
744
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
738
745
|
}
|
|
739
746
|
};
|
|
740
|
-
return (React.createElement("div", { className: styles$
|
|
747
|
+
return (React.createElement("div", { className: styles$A.checkboxContainer },
|
|
741
748
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
742
|
-
React.createElement("label", { onClick: handleClick, className: styles$
|
|
749
|
+
React.createElement("label", { onClick: handleClick, className: styles$A.checkboxLabel + ' ' + (disabled ? styles$A['disabled'] : undefined) }, label),
|
|
743
750
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
744
751
|
};
|
|
745
752
|
|
|
746
|
-
var css_248z$
|
|
747
|
-
var styles$
|
|
748
|
-
styleInject(css_248z$
|
|
753
|
+
var css_248z$z = ".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 .Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow); }\n";
|
|
754
|
+
var styles$z = {"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"};
|
|
755
|
+
styleInject(css_248z$z);
|
|
749
756
|
|
|
750
757
|
const Chip = (props) => {
|
|
751
758
|
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"]);
|
|
752
759
|
const getCssClass = () => {
|
|
753
760
|
const cssClasses = [];
|
|
754
|
-
cssClasses.push(styles$
|
|
755
|
-
cssClasses.push(styles$
|
|
756
|
-
shadow && cssClasses.push(styles$
|
|
757
|
-
onClick && cssClasses.push(styles$
|
|
761
|
+
cssClasses.push(styles$z.chip);
|
|
762
|
+
cssClasses.push(styles$z[color]);
|
|
763
|
+
shadow && cssClasses.push(styles$z['shadow']);
|
|
764
|
+
onClick && cssClasses.push(styles$z['clickable']);
|
|
758
765
|
className && cssClasses.push(className);
|
|
759
766
|
return cssClasses.filter(r => r).join(' ');
|
|
760
767
|
};
|
|
@@ -764,18 +771,18 @@ const Chip = (props) => {
|
|
|
764
771
|
};
|
|
765
772
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
766
773
|
React.createElement("div", null, children),
|
|
767
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
774
|
+
isDeletable && (React.createElement("div", { className: styles$z.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
768
775
|
};
|
|
769
776
|
|
|
770
|
-
var css_248z$
|
|
771
|
-
var styles$
|
|
772
|
-
styleInject(css_248z$
|
|
777
|
+
var css_248z$y = ".FormLabel-module_formLabel__TXcHc {\n margin-bottom: .5rem; }\n";
|
|
778
|
+
var styles$y = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
779
|
+
styleInject(css_248z$y);
|
|
773
780
|
|
|
774
781
|
const FormLabel = (_a) => {
|
|
775
782
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
776
783
|
const getCssClasses = () => {
|
|
777
784
|
const cssClasses = [];
|
|
778
|
-
cssClasses.push(styles$
|
|
785
|
+
cssClasses.push(styles$y.formLabel);
|
|
779
786
|
className && cssClasses.push(className);
|
|
780
787
|
return cssClasses.filter(css => css).join(' ');
|
|
781
788
|
};
|
|
@@ -812,9 +819,9 @@ const FileInput = (props) => {
|
|
|
812
819
|
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))));
|
|
813
820
|
};
|
|
814
821
|
|
|
815
|
-
var css_248z$
|
|
816
|
-
var styles$
|
|
817
|
-
styleInject(css_248z$
|
|
822
|
+
var css_248z$x = ".Select-module_selectContainer__DHFDZ {\n position: relative; }\n\n.Select-module_select__Fbn38 {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .Select-module_select__Fbn38:hover {\n cursor: pointer; }\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";
|
|
823
|
+
var styles$x = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
824
|
+
styleInject(css_248z$x);
|
|
818
825
|
|
|
819
826
|
const Select = (props) => {
|
|
820
827
|
var _a, _b, _c;
|
|
@@ -827,7 +834,7 @@ const Select = (props) => {
|
|
|
827
834
|
const getCssClass = () => {
|
|
828
835
|
const cssClasses = [];
|
|
829
836
|
className && cssClasses.push(className);
|
|
830
|
-
cssClasses.push(styles$
|
|
837
|
+
cssClasses.push(styles$x.select);
|
|
831
838
|
return cssClasses.filter(r => r).join(' ');
|
|
832
839
|
};
|
|
833
840
|
useEffect(() => {
|
|
@@ -945,7 +952,7 @@ const Select = (props) => {
|
|
|
945
952
|
}
|
|
946
953
|
}
|
|
947
954
|
};
|
|
948
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
955
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$x.selectContainer },
|
|
949
956
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
950
957
|
!multiple && renderSingleViewModel(),
|
|
951
958
|
multiple && renderMultipleViewModel(),
|
|
@@ -953,7 +960,7 @@ const Select = (props) => {
|
|
|
953
960
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
954
961
|
isShow &&
|
|
955
962
|
createPortal(React.createElement(React.Fragment, null,
|
|
956
|
-
React.createElement("div", { className: styles$
|
|
963
|
+
React.createElement("div", { className: styles$x.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 } },
|
|
957
964
|
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) },
|
|
958
965
|
multiple &&
|
|
959
966
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -961,37 +968,39 @@ const Select = (props) => {
|
|
|
961
968
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
962
969
|
};
|
|
963
970
|
|
|
964
|
-
var css_248z$
|
|
965
|
-
var styles$
|
|
966
|
-
styleInject(css_248z$
|
|
971
|
+
var css_248z$w = "textarea {\n min-height: calc(10em + 0.75rem + 2px);\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n resize: vertical; }\n textarea:focus {\n outline: none !important;\n border-color: var(--primary); }\n";
|
|
972
|
+
var styles$w = {};
|
|
973
|
+
styleInject(css_248z$w);
|
|
967
974
|
|
|
968
975
|
const Textarea = (props) => {
|
|
969
976
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
970
977
|
const getCssClass = () => {
|
|
971
978
|
const cssClasses = [];
|
|
972
|
-
cssClasses.push(styles$
|
|
979
|
+
cssClasses.push(styles$w.textarea);
|
|
973
980
|
className && cssClasses.push(className);
|
|
974
981
|
return cssClasses.filter(r => r).join(' ');
|
|
975
982
|
};
|
|
976
983
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
977
984
|
};
|
|
978
985
|
|
|
979
|
-
var css_248z$
|
|
980
|
-
var styles$
|
|
981
|
-
styleInject(css_248z$
|
|
986
|
+
var css_248z$v = ".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 .FormInput-module_formInput__VXZip:focus {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }\n";
|
|
987
|
+
var styles$v = {"formInput":"FormInput-module_formInput__VXZip"};
|
|
988
|
+
styleInject(css_248z$v);
|
|
982
989
|
|
|
983
990
|
const FormInput = (props) => {
|
|
984
991
|
const { value, name, type, placeholder, className = 'form-control', isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
985
992
|
const getCssClasses = () => {
|
|
986
993
|
const cssClasses = [];
|
|
987
|
-
cssClasses.push(styles$
|
|
994
|
+
cssClasses.push(styles$v.formInput);
|
|
988
995
|
className && cssClasses.push(className);
|
|
989
996
|
!isValid && cssClasses.push('is-invalid');
|
|
990
997
|
return cssClasses.filter(css => css).join(' ');
|
|
991
998
|
};
|
|
999
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
992
1000
|
const handleOnInput = (value, type, name) => {
|
|
993
1001
|
onInput && onInput({ value, type, name });
|
|
994
1002
|
};
|
|
1003
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
995
1004
|
const handleOnChange = (value, type, name) => {
|
|
996
1005
|
onChange && onChange({ value, type, name });
|
|
997
1006
|
};
|
|
@@ -1017,9 +1026,7 @@ const FormInput = (props) => {
|
|
|
1017
1026
|
type === 'autocomplete' &&
|
|
1018
1027
|
React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), options: options }),
|
|
1019
1028
|
type === 'checkbox' &&
|
|
1020
|
-
React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''),
|
|
1021
|
-
// onChange={e => handleOnChange((e?.target as HTMLInputElement).checked, type, name as string)}
|
|
1022
|
-
checked: value === 'true' ? true : false }),
|
|
1029
|
+
React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value }),
|
|
1023
1030
|
type === 'radio' &&
|
|
1024
1031
|
React.createElement(React.Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
|
|
1025
1032
|
React.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
|
|
@@ -1354,16 +1361,16 @@ const DateSelect = (props) => {
|
|
|
1354
1361
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1355
1362
|
// };
|
|
1356
1363
|
|
|
1357
|
-
var css_248z$
|
|
1358
|
-
var styles$
|
|
1359
|
-
styleInject(css_248z$
|
|
1364
|
+
var css_248z$u = ".Drawer-module_drawer__kdQCk {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 280px;\n overflow-y: auto; }\n .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n position: inherit;\n z-index: 0; }\n .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n order: 0; }\n .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n order: 2; }\n .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n overflow: hidden; }\n";
|
|
1365
|
+
var styles$u = {"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"};
|
|
1366
|
+
styleInject(css_248z$u);
|
|
1360
1367
|
|
|
1361
1368
|
const Drawer = (props) => {
|
|
1362
1369
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1363
1370
|
useEffect(() => {
|
|
1364
|
-
document.body.classList.add(styles$
|
|
1371
|
+
document.body.classList.add(styles$u.drawerOpen);
|
|
1365
1372
|
return () => {
|
|
1366
|
-
document.body.classList.remove(styles$
|
|
1373
|
+
document.body.classList.remove(styles$u.drawerOpen);
|
|
1367
1374
|
};
|
|
1368
1375
|
}, []);
|
|
1369
1376
|
const handleClickBackdrop = () => {
|
|
@@ -1377,10 +1384,10 @@ const DrawerContent = (props) => {
|
|
|
1377
1384
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1378
1385
|
const getCssClasses = () => {
|
|
1379
1386
|
const cssClasses = [];
|
|
1380
|
-
cssClasses.push(styles$
|
|
1381
|
-
shadow && cssClasses.push(styles$
|
|
1382
|
-
!!permanent && cssClasses.push(styles$
|
|
1383
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1387
|
+
cssClasses.push(styles$u.drawer);
|
|
1388
|
+
shadow && cssClasses.push(styles$u.shadow);
|
|
1389
|
+
!!permanent && cssClasses.push(styles$u['permanent']);
|
|
1390
|
+
position === 'left' ? cssClasses.push(styles$u['left']) : cssClasses.push(styles$u['right']);
|
|
1384
1391
|
className && cssClasses.push(className);
|
|
1385
1392
|
return cssClasses.filter(css => css).join(' ');
|
|
1386
1393
|
};
|
|
@@ -1394,9 +1401,9 @@ const DrawerContent = (props) => {
|
|
|
1394
1401
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1395
1402
|
};
|
|
1396
1403
|
|
|
1397
|
-
var css_248z$
|
|
1398
|
-
var styles$
|
|
1399
|
-
styleInject(css_248z$
|
|
1404
|
+
var css_248z$t = ".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 .MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n box-shadow: var(--shadow); }\n";
|
|
1405
|
+
var styles$t = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1406
|
+
styleInject(css_248z$t);
|
|
1400
1407
|
|
|
1401
1408
|
const MenuBody = (props) => {
|
|
1402
1409
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1427,8 +1434,8 @@ const MenuBody = (props) => {
|
|
|
1427
1434
|
}, [menuBodyRef]);
|
|
1428
1435
|
const getCssClasses = () => {
|
|
1429
1436
|
const cssClasses = [];
|
|
1430
|
-
cssClasses.push(styles$
|
|
1431
|
-
shadow && cssClasses.push(styles$
|
|
1437
|
+
cssClasses.push(styles$t.menuBody);
|
|
1438
|
+
shadow && cssClasses.push(styles$t.shadow);
|
|
1432
1439
|
className && cssClasses.push(className);
|
|
1433
1440
|
return cssClasses.filter(css => css).join(' ');
|
|
1434
1441
|
};
|
|
@@ -1440,9 +1447,9 @@ const MenuBody = (props) => {
|
|
|
1440
1447
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1441
1448
|
};
|
|
1442
1449
|
|
|
1443
|
-
var css_248z$
|
|
1444
|
-
var styles$
|
|
1445
|
-
styleInject(css_248z$
|
|
1450
|
+
var css_248z$s = ".Menu-module_menu__p8QL- {\n display: flex; }\n";
|
|
1451
|
+
var styles$s = {"menu":"Menu-module_menu__p8QL-"};
|
|
1452
|
+
styleInject(css_248z$s);
|
|
1446
1453
|
|
|
1447
1454
|
const Menu = (props) => {
|
|
1448
1455
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
@@ -1450,7 +1457,7 @@ const Menu = (props) => {
|
|
|
1450
1457
|
const toggleContainerRef = useRef(null);
|
|
1451
1458
|
const getCssClasses = () => {
|
|
1452
1459
|
const cssClasses = [];
|
|
1453
|
-
cssClasses.push(styles$
|
|
1460
|
+
cssClasses.push(styles$s.menu);
|
|
1454
1461
|
className && cssClasses.push(className);
|
|
1455
1462
|
return cssClasses.filter(css => css).join(' ');
|
|
1456
1463
|
};
|
|
@@ -1463,17 +1470,17 @@ const Menu = (props) => {
|
|
|
1463
1470
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1464
1471
|
};
|
|
1465
1472
|
|
|
1466
|
-
var css_248z$
|
|
1467
|
-
var styles$
|
|
1468
|
-
styleInject(css_248z$
|
|
1473
|
+
var css_248z$r = ".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 .MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n margin-bottom: 0;\n font-size: 0.875rem; }\n .MenuItem-module_menuItem__MeBxN:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04); }\n";
|
|
1474
|
+
var styles$r = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1475
|
+
styleInject(css_248z$r);
|
|
1469
1476
|
|
|
1470
1477
|
const MenuItem = (props) => {
|
|
1471
1478
|
const { children, onClick, type = 'item' } = props;
|
|
1472
1479
|
const getCssClasses = () => {
|
|
1473
1480
|
const cssClasses = [];
|
|
1474
|
-
cssClasses.push(styles$
|
|
1481
|
+
cssClasses.push(styles$r.menuItem);
|
|
1475
1482
|
if (type === 'header') {
|
|
1476
|
-
cssClasses.push(styles$
|
|
1483
|
+
cssClasses.push(styles$r.menuItemHeader);
|
|
1477
1484
|
}
|
|
1478
1485
|
return cssClasses.filter(css => css).join(' ');
|
|
1479
1486
|
};
|
|
@@ -1489,23 +1496,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1489
1496
|
return (React.createElement(Fragment, null, children));
|
|
1490
1497
|
};
|
|
1491
1498
|
|
|
1492
|
-
var css_248z$
|
|
1493
|
-
var styles$
|
|
1494
|
-
styleInject(css_248z$
|
|
1499
|
+
var css_248z$q = ".MenuDivider-module_menuItemDivider__oRP-j {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef; }\n";
|
|
1500
|
+
var styles$q = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1501
|
+
styleInject(css_248z$q);
|
|
1495
1502
|
|
|
1496
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1503
|
+
const MenuDivider = () => React.createElement("div", { className: styles$q.menuItemDivider });
|
|
1497
1504
|
|
|
1498
|
-
var css_248z$
|
|
1499
|
-
var styles$
|
|
1500
|
-
styleInject(css_248z$
|
|
1505
|
+
var css_248z$p = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px; }\n";
|
|
1506
|
+
var styles$p = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1507
|
+
styleInject(css_248z$p);
|
|
1501
1508
|
|
|
1502
1509
|
const ExpansionPanelContent = ({ children }) => {
|
|
1503
|
-
return (React.createElement("div", { className: styles$
|
|
1510
|
+
return (React.createElement("div", { className: styles$p.expansionPanelContent }, children));
|
|
1504
1511
|
};
|
|
1505
1512
|
|
|
1506
|
-
var css_248z$
|
|
1507
|
-
var styles$
|
|
1508
|
-
styleInject(css_248z$
|
|
1513
|
+
var css_248z$o = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px; }\n .ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n cursor: pointer;\n background-color: var(--highlight); }\n";
|
|
1514
|
+
var styles$o = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1515
|
+
styleInject(css_248z$o);
|
|
1509
1516
|
|
|
1510
1517
|
const ExpansionPanelHeader = (props) => {
|
|
1511
1518
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1513,15 +1520,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1513
1520
|
e.stopPropagation();
|
|
1514
1521
|
onClick && onClick(e);
|
|
1515
1522
|
};
|
|
1516
|
-
return (React.createElement("div", { className: styles$
|
|
1523
|
+
return (React.createElement("div", { className: styles$o.expansionPanelHeader, onClick: handleClick },
|
|
1517
1524
|
children,
|
|
1518
1525
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1519
1526
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1520
1527
|
};
|
|
1521
1528
|
|
|
1522
|
-
var css_248z$
|
|
1523
|
-
var styles$
|
|
1524
|
-
styleInject(css_248z$
|
|
1529
|
+
var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph {\n margin: 16px 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0; }\n";
|
|
1530
|
+
var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1531
|
+
styleInject(css_248z$n);
|
|
1525
1532
|
|
|
1526
1533
|
const ExpansionPanel = (props) => {
|
|
1527
1534
|
const { header, children, isExpanded = false, onChange } = props;
|
|
@@ -1531,9 +1538,9 @@ const ExpansionPanel = (props) => {
|
|
|
1531
1538
|
}, [isExpanded]);
|
|
1532
1539
|
const getCssClasses = () => {
|
|
1533
1540
|
const cssClasses = [];
|
|
1534
|
-
cssClasses.push(styles$
|
|
1541
|
+
cssClasses.push(styles$n.expansionPanel);
|
|
1535
1542
|
if (_isExpanded) {
|
|
1536
|
-
cssClasses.push(styles$
|
|
1543
|
+
cssClasses.push(styles$n.isExpanded);
|
|
1537
1544
|
}
|
|
1538
1545
|
return cssClasses.filter(css => css).join(' ');
|
|
1539
1546
|
};
|
|
@@ -1547,16 +1554,16 @@ const ExpansionPanel = (props) => {
|
|
|
1547
1554
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1548
1555
|
};
|
|
1549
1556
|
|
|
1550
|
-
var css_248z$
|
|
1551
|
-
var styles$
|
|
1552
|
-
styleInject(css_248z$
|
|
1557
|
+
var css_248z$m = ".FloatingActionButton-module_fab__Rw3kd {\n box-shadow: var(--shadow); }\n .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 1000; }\n";
|
|
1558
|
+
var styles$m = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
|
|
1559
|
+
styleInject(css_248z$m);
|
|
1553
1560
|
|
|
1554
1561
|
const FloatingActionButton = (props) => {
|
|
1555
1562
|
const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1556
1563
|
const getCssClasses = () => {
|
|
1557
1564
|
const cssClasses = [];
|
|
1558
|
-
cssClasses.push(styles$
|
|
1559
|
-
fixed && cssClasses.push(styles$
|
|
1565
|
+
cssClasses.push(styles$m.fab);
|
|
1566
|
+
fixed && cssClasses.push(styles$m['fixed']);
|
|
1560
1567
|
className && cssClasses.push(className);
|
|
1561
1568
|
return cssClasses.filter(css => css).join(' ');
|
|
1562
1569
|
};
|
|
@@ -1599,11 +1606,16 @@ const Row = (props) => {
|
|
|
1599
1606
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
1600
1607
|
};
|
|
1601
1608
|
|
|
1609
|
+
var css_248z$l = ".Link-module_link__YlJQl {\n color: var(--primary);\n text-decoration: underline; }\n .Link-module_link__YlJQl:hover {\n color: var(--primary-dark); }\n";
|
|
1610
|
+
var styles$l = {"link":"Link-module_link__YlJQl"};
|
|
1611
|
+
styleInject(css_248z$l);
|
|
1612
|
+
|
|
1602
1613
|
const Link = (props) => {
|
|
1603
1614
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1604
1615
|
const [status, setStatus] = useState(STATUS.NORMAL);
|
|
1605
1616
|
const getCssClasses = () => {
|
|
1606
1617
|
const cssClasses = [];
|
|
1618
|
+
cssClasses.push(styles$l.link);
|
|
1607
1619
|
className && cssClasses.push(className);
|
|
1608
1620
|
status !== STATUS.NORMAL && cssClasses.push(status);
|
|
1609
1621
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -1617,15 +1629,15 @@ const Link = (props) => {
|
|
|
1617
1629
|
return (React.createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1618
1630
|
};
|
|
1619
1631
|
|
|
1620
|
-
var css_248z$
|
|
1621
|
-
var styles$
|
|
1622
|
-
styleInject(css_248z$
|
|
1632
|
+
var css_248z$k = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%; }\n\n.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@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg); }\n to {\n transform: rotate(360deg); } }\n";
|
|
1633
|
+
var styles$k = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1634
|
+
styleInject(css_248z$k);
|
|
1623
1635
|
|
|
1624
1636
|
const LoadingIndicator = (_a) => {
|
|
1625
1637
|
var rest = __rest(_a, []);
|
|
1626
1638
|
const getCssClasses = () => {
|
|
1627
1639
|
const cssClasses = [];
|
|
1628
|
-
cssClasses.push(styles$
|
|
1640
|
+
cssClasses.push(styles$k.loadingIndicator);
|
|
1629
1641
|
return cssClasses.filter(css => css).join(' ');
|
|
1630
1642
|
};
|
|
1631
1643
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1635,7 +1647,7 @@ const LoadingIndicator = (_a) => {
|
|
|
1635
1647
|
const LoadingIndicatorContainer = ({ children }) => {
|
|
1636
1648
|
const getCssClasses = () => {
|
|
1637
1649
|
const cssClasses = [];
|
|
1638
|
-
cssClasses.push(styles$
|
|
1650
|
+
cssClasses.push(styles$k.loadingIndicatorContainer);
|
|
1639
1651
|
return cssClasses.filter(css => css).join(' ');
|
|
1640
1652
|
};
|
|
1641
1653
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1663,40 +1675,44 @@ class LoadingIndicatorService {
|
|
|
1663
1675
|
}
|
|
1664
1676
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1665
1677
|
|
|
1666
|
-
var css_248z$
|
|
1667
|
-
var styles$
|
|
1668
|
-
styleInject(css_248z$
|
|
1678
|
+
var css_248z$j = ".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.ModalHeader-module_modalTitle__2xShH {\n margin-bottom: 0;\n line-height: 1.5; }\n";
|
|
1679
|
+
var styles$j = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1680
|
+
styleInject(css_248z$j);
|
|
1669
1681
|
|
|
1670
1682
|
const ModalHeader = (props) => {
|
|
1671
1683
|
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1672
1684
|
const handleClick = () => {
|
|
1673
1685
|
onClose && onClose();
|
|
1674
1686
|
};
|
|
1675
|
-
return (React.createElement("div", Object.assign({ className:
|
|
1676
|
-
React.createElement("h5", { className:
|
|
1687
|
+
return (React.createElement("div", Object.assign({ className: styles$j.modalHeader }, rest),
|
|
1688
|
+
React.createElement("h5", { className: styles$j.modalTitle }, children),
|
|
1677
1689
|
isDismissable &&
|
|
1678
1690
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
1679
1691
|
};
|
|
1680
1692
|
|
|
1681
|
-
|
|
1693
|
+
var css_248z$i = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem; }\n";
|
|
1694
|
+
var styles$i = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1695
|
+
styleInject(css_248z$i);
|
|
1682
1696
|
|
|
1683
|
-
|
|
1684
|
-
var styles$g = {"modal":"Modal-module_modal__HMxWV","fullscreen":"Modal-module_fullscreen__iepGa","modalContent":"Modal-module_modalContent__9wAwB","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modal-dialog":"Modal-module_modal-dialog__U2wGf"};
|
|
1685
|
-
styleInject(css_248z$g);
|
|
1697
|
+
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$i.modalBody }, children));
|
|
1686
1698
|
|
|
1687
|
-
var css_248z$
|
|
1688
|
-
var styles$
|
|
1689
|
-
styleInject(css_248z$
|
|
1699
|
+
var css_248z$h = ".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 .ModalFooter-module_modalFooter__SNm-f > * {\n margin: 0.25rem; }\n";
|
|
1700
|
+
var styles$h = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1701
|
+
styleInject(css_248z$h);
|
|
1702
|
+
|
|
1703
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$h.modalFooter }, children));
|
|
1690
1704
|
|
|
1691
|
-
|
|
1705
|
+
var css_248z$g = ".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 .Modal-module_modal__HMxWV .Modal-module_sm__CsR6U {\n max-width: 300px; }\n .Modal-module_modal__HMxWV .Modal-module_md__lNggx {\n max-width: 500px; }\n .Modal-module_modal__HMxWV .Modal-module_lg__6dtT2 {\n max-width: 1140px; }\n @media (min-width: 576px) {\n .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n max-width: 600px; } }\n\n.Modal-module_modalDialog__fNqyK {\n position: relative;\n width: auto;\n pointer-events: none; }\n @media (min-width: 576px) {\n .Modal-module_modalDialog__fNqyK {\n max-width: 500px;\n margin: 1.75rem auto; } }\n\n.Modal-module_modalDialogCentered__sa2wv {\n min-height: calc(100% - 3.5rem);\n display: flex;\n align-items: center; }\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 black;\n outline: 0; }\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 .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 @media (min-width: 320px) {\n .Modal-module_fullscreen__iepGa {\n max-width: 100% !important; } }\n";
|
|
1706
|
+
var styles$g = {"modal":"Modal-module_modal__HMxWV","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modal-dialog":"Modal-module_modal-dialog__U2wGf","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
|
|
1707
|
+
styleInject(css_248z$g);
|
|
1692
1708
|
|
|
1693
1709
|
const Modal = (props) => {
|
|
1694
1710
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1695
1711
|
const getCssClass = () => {
|
|
1696
1712
|
const cssClasses = [];
|
|
1697
|
-
cssClasses.push(
|
|
1698
|
-
cssClasses.push(styles$g.
|
|
1699
|
-
|
|
1713
|
+
cssClasses.push(styles$g.modalDialog);
|
|
1714
|
+
cssClasses.push(styles$g.modalDialogCentered);
|
|
1715
|
+
fullScreen && cssClasses.push(styles$g.fullscreen);
|
|
1700
1716
|
size && cssClasses.push(styles$g[size]);
|
|
1701
1717
|
className && cssClasses.push(className);
|
|
1702
1718
|
return cssClasses.filter(r => r).join(' ');
|
|
@@ -1710,10 +1726,10 @@ const Modal = (props) => {
|
|
|
1710
1726
|
const handleClickBackdrop = () => {
|
|
1711
1727
|
onBackdropClick && onBackdropClick();
|
|
1712
1728
|
};
|
|
1713
|
-
return (React.createElement(Fragment, null,
|
|
1714
|
-
React.createElement("div", { className:
|
|
1729
|
+
return (React.createElement(React.Fragment, null,
|
|
1730
|
+
React.createElement("div", { className: styles$g.modal },
|
|
1715
1731
|
React.createElement("div", { className: getCssClass() },
|
|
1716
|
-
React.createElement("div", { className:
|
|
1732
|
+
React.createElement("div", { className: styles$g.modalContent },
|
|
1717
1733
|
header &&
|
|
1718
1734
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1719
1735
|
React.createElement(ModalBody, null, children),
|
|
@@ -1737,8 +1753,8 @@ var MODALBUTTONTYPE;
|
|
|
1737
1753
|
})(MODALBUTTONTYPE || (MODALBUTTONTYPE = {}));
|
|
1738
1754
|
|
|
1739
1755
|
const GlobalModal = ({ title, description, formControls, onOk, onCancel, isDismissable = false, buttons = [
|
|
1740
|
-
{ label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text,
|
|
1741
|
-
{ label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained },
|
|
1756
|
+
{ label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text, shadow: false },
|
|
1757
|
+
{ label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained, focus: true },
|
|
1742
1758
|
], size = SIZE.md, fullScreen = false }) => {
|
|
1743
1759
|
// workaround for getDerivedStateFromProps
|
|
1744
1760
|
const [myControls, setMyControls] = useState(null);
|
|
@@ -1777,7 +1793,7 @@ const GlobalModal = ({ title, description, formControls, onOk, onCancel, isDismi
|
|
|
1777
1793
|
}
|
|
1778
1794
|
button.handler && button.handler();
|
|
1779
1795
|
};
|
|
1780
|
-
return (React.createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, onClick: () => handleClickButton(button) }, button.label)))) },
|
|
1796
|
+
return (React.createElement(Modal, { size: size, fullScreen: fullScreen, header: title, onHeaderCloseClick: onCancel, isDismissable: isDismissable, footer: React.createElement(Fragment, null, buttons.map((button, index) => (React.createElement(Button, { key: index, variant: button.variant, color: button.color, autoFocus: button.autoFocus, shadow: button.shadow, onClick: () => handleClickButton(button) }, button.label)))) },
|
|
1781
1797
|
description && React.createElement("div", null, description),
|
|
1782
1798
|
modalType === MODALTYPE.FORM &&
|
|
1783
1799
|
React.createElement(Fragment, null,
|
|
@@ -1916,25 +1932,25 @@ const Sidebar = (props) => {
|
|
|
1916
1932
|
!item.isCollapsed && item.items && item.items.length > 0 && (React.createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React.createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
1917
1933
|
};
|
|
1918
1934
|
|
|
1919
|
-
var css_248z$
|
|
1920
|
-
var styles$
|
|
1921
|
-
styleInject(css_248z$
|
|
1935
|
+
var css_248z$f = ".Snackbar-module_snackbar__O5T2b {\n display: flex;\n align-items: center;\n min-width: 288px;\n padding: 6px 16px;\n transform-origin: center;\n min-height: 52px;\n animation: Snackbar-module_bounceIn__E47iD 0.4s ease;\n z-index: 1001;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 2%;\n border-radius: var(--borderRadius); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_primary__ZBOTN {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_accent__0MnFy {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_secondary__s8-ez {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_light__Vrd7o {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_dark__U-5io {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n\n.Snackbar-module_text__G5r5D {\n width: 100%;\n padding: 8px 0; }\n\n.Snackbar-module_action__vus2Y {\n margin-left: auto; }\n .Snackbar-module_action__vus2Y:hover {\n cursor: pointer; }\n\n@keyframes Snackbar-module_bounceIn__E47iD {\n 0% {\n opacity: 0; }\n 50% {\n opacity: 0.9; }\n 80% {\n opacity: 1; }\n 100% {\n opacity: 1; } }\n";
|
|
1936
|
+
var styles$f = {"snackbar":"Snackbar-module_snackbar__O5T2b","bounceIn":"Snackbar-module_bounceIn__E47iD","primary":"Snackbar-module_primary__ZBOTN","accent":"Snackbar-module_accent__0MnFy","secondary":"Snackbar-module_secondary__s8-ez","light":"Snackbar-module_light__Vrd7o","dark":"Snackbar-module_dark__U-5io","text":"Snackbar-module_text__G5r5D","action":"Snackbar-module_action__vus2Y"};
|
|
1937
|
+
styleInject(css_248z$f);
|
|
1922
1938
|
|
|
1923
1939
|
const Snackbar = (props) => {
|
|
1924
1940
|
const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
1925
1941
|
const getCssClasses = () => {
|
|
1926
1942
|
const cssClasses = [];
|
|
1927
|
-
cssClasses.push(styles$
|
|
1943
|
+
cssClasses.push(styles$f.snackbar);
|
|
1928
1944
|
cssClasses.push(`shadow-lg`);
|
|
1929
|
-
cssClasses.push(styles$
|
|
1945
|
+
cssClasses.push(styles$f[color]);
|
|
1930
1946
|
return cssClasses.filter(css => css).join(' ');
|
|
1931
1947
|
};
|
|
1932
1948
|
const handleClickAction = (e) => {
|
|
1933
1949
|
onOk && onOk(e);
|
|
1934
1950
|
};
|
|
1935
1951
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
1936
|
-
React.createElement("div", { className: styles$
|
|
1937
|
-
React.createElement("div", { className: styles$
|
|
1952
|
+
React.createElement("div", { className: styles$f.text }, children),
|
|
1953
|
+
React.createElement("div", { className: styles$f.action + " text-accent", onClick: handleClickAction },
|
|
1938
1954
|
React.createElement("span", null, actionText))));
|
|
1939
1955
|
};
|
|
1940
1956
|
|
|
@@ -1972,29 +1988,29 @@ class SnackbarService {
|
|
|
1972
1988
|
}
|
|
1973
1989
|
const snackbarService = new SnackbarService();
|
|
1974
1990
|
|
|
1975
|
-
var css_248z$
|
|
1976
|
-
var styles$
|
|
1977
|
-
styleInject(css_248z$
|
|
1991
|
+
var css_248z$e = ".SpeedDialActions-module_speedDialActions__cY2i3 {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto; }\n";
|
|
1992
|
+
var styles$e = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
1993
|
+
styleInject(css_248z$e);
|
|
1978
1994
|
|
|
1979
1995
|
const SpeedDialActions = (props) => {
|
|
1980
1996
|
const { children } = props;
|
|
1981
1997
|
const getCssClasses = () => {
|
|
1982
1998
|
const cssClasses = [];
|
|
1983
|
-
cssClasses.push(styles$
|
|
1999
|
+
cssClasses.push(styles$e.speedDialActions);
|
|
1984
2000
|
return cssClasses.filter(css => css).join(' ');
|
|
1985
2001
|
};
|
|
1986
2002
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
1987
2003
|
};
|
|
1988
2004
|
|
|
1989
|
-
var css_248z$
|
|
1990
|
-
var styles$
|
|
1991
|
-
styleInject(css_248z$
|
|
2005
|
+
var css_248z$d = ".SpeedDial-module_speedDial__W3VN2 {\n position: absolute;\n flex-direction: column-reverse;\n display: flex;\n z-index: 1050;\n align-items: center;\n right: 16px;\n bottom: 16px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n";
|
|
2006
|
+
var styles$d = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2007
|
+
styleInject(css_248z$d);
|
|
1992
2008
|
|
|
1993
2009
|
const SpeedDial = (props) => {
|
|
1994
2010
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
1995
2011
|
const getCssClasses = () => {
|
|
1996
2012
|
const cssClasses = [];
|
|
1997
|
-
cssClasses.push(styles$
|
|
2013
|
+
cssClasses.push(styles$d.speedDial);
|
|
1998
2014
|
className && cssClasses.push(className);
|
|
1999
2015
|
return cssClasses.filter(css => css).join(' ');
|
|
2000
2016
|
};
|
|
@@ -2011,15 +2027,15 @@ const SpeedDial = (props) => {
|
|
|
2011
2027
|
React.createElement(SpeedDialActions, null, children)));
|
|
2012
2028
|
};
|
|
2013
2029
|
|
|
2014
|
-
var css_248z$
|
|
2015
|
-
var styles$
|
|
2016
|
-
styleInject(css_248z$
|
|
2030
|
+
var css_248z$c = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px; }\n";
|
|
2031
|
+
var styles$c = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2032
|
+
styleInject(css_248z$c);
|
|
2017
2033
|
|
|
2018
2034
|
const SpeedDialAction = (props) => {
|
|
2019
2035
|
const { icon, color = COLOR.light, onClick, className } = props;
|
|
2020
2036
|
const getCssClasses = () => {
|
|
2021
2037
|
const cssClasses = [];
|
|
2022
|
-
cssClasses.push(styles$
|
|
2038
|
+
cssClasses.push(styles$c.speedDialAction);
|
|
2023
2039
|
className && cssClasses.push(className);
|
|
2024
2040
|
return cssClasses.filter(css => css).join(' ');
|
|
2025
2041
|
};
|
|
@@ -2036,15 +2052,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2036
2052
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2037
2053
|
};
|
|
2038
2054
|
|
|
2039
|
-
var css_248z$
|
|
2040
|
-
var styles$
|
|
2041
|
-
styleInject(css_248z$
|
|
2055
|
+
var css_248z$b = ".StepperActions-module_stepperActions__hBUkh {\n display: flex; }\n";
|
|
2056
|
+
var styles$b = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2057
|
+
styleInject(css_248z$b);
|
|
2042
2058
|
|
|
2043
2059
|
const StepperActions = (props) => {
|
|
2044
2060
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2045
2061
|
const getCssClasses = () => {
|
|
2046
2062
|
const cssClasses = [];
|
|
2047
|
-
cssClasses.push(styles$
|
|
2063
|
+
cssClasses.push(styles$b.stepperActions);
|
|
2048
2064
|
className && cssClasses.push(className);
|
|
2049
2065
|
return cssClasses.filter(css => css).join(' ');
|
|
2050
2066
|
};
|
|
@@ -2061,31 +2077,31 @@ const StepPanel = (props) => {
|
|
|
2061
2077
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
2062
2078
|
};
|
|
2063
2079
|
|
|
2064
|
-
var css_248z$
|
|
2065
|
-
var styles$
|
|
2066
|
-
styleInject(css_248z$
|
|
2080
|
+
var css_248z$a = ".StepConnector-module_stepConnector__A7A-7 {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px; }\n\n.StepConnector-module_stepConnectorLine__8rQxv {\n display: block;\n border-color: var(--secondary);\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n .StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n border-color: var(--primary); }\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n border-top-style: solid;\n border-top-width: 1px; }\n";
|
|
2081
|
+
var styles$a = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2082
|
+
styleInject(css_248z$a);
|
|
2067
2083
|
|
|
2068
2084
|
const StepConnector = (props) => {
|
|
2069
2085
|
const { isActive, isHorizontal = true } = props;
|
|
2070
2086
|
const getCssClassesConnector = () => {
|
|
2071
2087
|
const cssClasses = [];
|
|
2072
|
-
cssClasses.push(styles$
|
|
2088
|
+
cssClasses.push(styles$a.stepConnector);
|
|
2073
2089
|
return cssClasses.filter(css => css).join(' ');
|
|
2074
2090
|
};
|
|
2075
2091
|
const getCssClassesLine = () => {
|
|
2076
2092
|
const cssClasses = [];
|
|
2077
|
-
cssClasses.push(styles$
|
|
2078
|
-
isActive && cssClasses.push(styles$
|
|
2079
|
-
isHorizontal && cssClasses.push(styles$
|
|
2093
|
+
cssClasses.push(styles$a.stepConnectorLine);
|
|
2094
|
+
isActive && cssClasses.push(styles$a['isActive']);
|
|
2095
|
+
isHorizontal && cssClasses.push(styles$a.stepConnectorLineHorizontal);
|
|
2080
2096
|
return cssClasses.filter(css => css).join(' ');
|
|
2081
2097
|
};
|
|
2082
2098
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
2083
2099
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
2084
2100
|
};
|
|
2085
2101
|
|
|
2086
|
-
var css_248z$
|
|
2087
|
-
var styles$
|
|
2088
|
-
styleInject(css_248z$
|
|
2102
|
+
var css_248z$9 = ".Stepper-module_stepper__V6odG {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px; }\n .Stepper-module_stepper__V6odG.Stepper-module_isHorizontal__Q-3Wu {\n overflow-x: auto; }\n";
|
|
2103
|
+
var styles$9 = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2104
|
+
styleInject(css_248z$9);
|
|
2089
2105
|
|
|
2090
2106
|
const Stepper = (props) => {
|
|
2091
2107
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2173,8 +2189,8 @@ const Stepper = (props) => {
|
|
|
2173
2189
|
};
|
|
2174
2190
|
const getCssClasses = () => {
|
|
2175
2191
|
const cssClasses = [];
|
|
2176
|
-
cssClasses.push(styles$
|
|
2177
|
-
isHorizontal && cssClasses.push(styles$
|
|
2192
|
+
cssClasses.push(styles$9.stepper);
|
|
2193
|
+
isHorizontal && cssClasses.push(styles$9['isHorizontal']);
|
|
2178
2194
|
return cssClasses.filter(css => css).join(' ');
|
|
2179
2195
|
};
|
|
2180
2196
|
return (React.createElement(React.Fragment, null, steps &&
|
|
@@ -2187,15 +2203,15 @@ const Stepper = (props) => {
|
|
|
2187
2203
|
React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2188
2204
|
};
|
|
2189
2205
|
|
|
2190
|
-
var css_248z$
|
|
2191
|
-
var styles$
|
|
2192
|
-
styleInject(css_248z$
|
|
2206
|
+
var css_248z$8 = ".Typography-module_typography__sw-td {\n text-overflow: ellipsis;\n overflow: hidden !important; }\n";
|
|
2207
|
+
var styles$8 = {"typography":"Typography-module_typography__sw-td"};
|
|
2208
|
+
styleInject(css_248z$8);
|
|
2193
2209
|
|
|
2194
2210
|
const Wrapper = (props) => {
|
|
2195
2211
|
const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
|
|
2196
2212
|
const getCssClasses = () => {
|
|
2197
2213
|
const cssClasses = [];
|
|
2198
|
-
cssClasses.push(styles$
|
|
2214
|
+
cssClasses.push(styles$8.typography);
|
|
2199
2215
|
className && cssClasses.push(className);
|
|
2200
2216
|
return cssClasses.filter(css => css).join(' ');
|
|
2201
2217
|
};
|
|
@@ -2206,14 +2222,13 @@ const Typography = (_a) => {
|
|
|
2206
2222
|
return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
|
|
2207
2223
|
};
|
|
2208
2224
|
|
|
2209
|
-
var css_248z$
|
|
2210
|
-
var styles$
|
|
2211
|
-
styleInject(css_248z$
|
|
2225
|
+
var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\n display: flex;\n align-items: center;\n padding-left: 8px;\n padding-right: 8px;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04); }\n .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n width: 18px !important;\n height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n width: 24px;\n height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n position: absolute;\n color: var(--secondary-contrast-text); }\n .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n color: var(--primary-contrast-text); }\n";
|
|
2226
|
+
var styles$7 = {"stepWrapper":"Step-module_stepWrapper__IQwq1","hasLabel":"Step-module_hasLabel__LZNvd","disabled":"Step-module_disabled__JnxUP","step":"Step-module_step__k42go","stepIconCircle":"Step-module_stepIconCircle__hnxIV","stepValue":"Step-module_stepValue__B0-xv","isActive":"Step-module_isActive__3GGcl"};
|
|
2227
|
+
styleInject(css_248z$7);
|
|
2212
2228
|
|
|
2213
2229
|
const Step = (props) => {
|
|
2214
2230
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
2215
|
-
const hoverRef =
|
|
2216
|
-
const isHover = useHover(hoverRef);
|
|
2231
|
+
const [hoverRef, isHovered] = useHover();
|
|
2217
2232
|
const handleClick = (event) => {
|
|
2218
2233
|
if (!isDisabled) {
|
|
2219
2234
|
onClick && onClick({ event, value });
|
|
@@ -2221,29 +2236,29 @@ const Step = (props) => {
|
|
|
2221
2236
|
};
|
|
2222
2237
|
const getCssClasses = () => {
|
|
2223
2238
|
const cssClasses = [];
|
|
2224
|
-
cssClasses.push(styles$
|
|
2225
|
-
label && showLabel && cssClasses.push(styles$
|
|
2226
|
-
isDisabled && cssClasses.push(styles$
|
|
2239
|
+
cssClasses.push(styles$7.stepWrapper);
|
|
2240
|
+
label && showLabel && cssClasses.push(styles$7['hasLabel']);
|
|
2241
|
+
isDisabled && cssClasses.push(styles$7['disabled']);
|
|
2227
2242
|
className && cssClasses.push(className);
|
|
2228
2243
|
return cssClasses.filter(css => css).join(' ');
|
|
2229
2244
|
};
|
|
2230
2245
|
const getCssClassesStep = () => {
|
|
2231
2246
|
const cssClasses = [];
|
|
2232
|
-
cssClasses.push(styles$
|
|
2233
|
-
label && showLabel && cssClasses.push(styles$
|
|
2234
|
-
isDisabled && cssClasses.push(styles$
|
|
2247
|
+
cssClasses.push(styles$7.step);
|
|
2248
|
+
label && showLabel && cssClasses.push(styles$7['hasLabel']);
|
|
2249
|
+
isDisabled && cssClasses.push(styles$7['disabled']);
|
|
2235
2250
|
return cssClasses.filter(css => css).join(' ');
|
|
2236
2251
|
};
|
|
2237
2252
|
const getCssClassesStepValue = () => {
|
|
2238
2253
|
const cssClasses = [];
|
|
2239
|
-
cssClasses.push(styles$
|
|
2254
|
+
cssClasses.push(styles$7.stepValue);
|
|
2240
2255
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2241
|
-
isActive && cssClasses.push(styles$
|
|
2256
|
+
isActive && cssClasses.push(styles$7.stepValue['isActive']);
|
|
2242
2257
|
return cssClasses.filter(css => css).join(' ');
|
|
2243
2258
|
};
|
|
2244
2259
|
return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2245
2260
|
React.createElement("div", { className: getCssClassesStep() },
|
|
2246
|
-
React.createElement(Icon, { className: styles$
|
|
2261
|
+
React.createElement(Icon, { className: styles$7.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
|
|
2247
2262
|
React.createElement(CircleSolidIcon, null)),
|
|
2248
2263
|
React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2249
2264
|
React.createElement(Icon, null,
|
|
@@ -2254,18 +2269,22 @@ const Step = (props) => {
|
|
|
2254
2269
|
React.createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2255
2270
|
};
|
|
2256
2271
|
|
|
2272
|
+
var css_248z$6 = ".Table-module_table__DHKNv {\n --bs-table-bg: transparent;\n --bs-table-accent-bg: transparent;\n --bs-table-striped-color: #212529;\n --bs-table-striped-bg: rgba(0, 0, 0, 0.05);\n --bs-table-active-color: #212529;\n --bs-table-active-bg: rgba(0, 0, 0, 0.1);\n --bs-table-hover-color: #212529;\n --bs-table-hover-bg: rgba(0, 0, 0, 0.075);\n width: 100%;\n margin-bottom: 1rem;\n color: #212529;\n vertical-align: top;\n border-color: #dee2e6; }\n .Table-module_table__DHKNv thead {\n vertical-align: bottom; }\n .Table-module_table__DHKNv > :not(caption) > * > * {\n padding: 0.5rem 0.5rem;\n background-color: var(--bs-table-bg);\n border-bottom-width: 1px;\n box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); }\n .Table-module_table__DHKNv > :not(:first-child) {\n border-top: 2px solid currentColor; }\n\n.Table-module_bordered__1Kp1p > :not(caption) > * > * {\n border-width: 0 1px; }\n\n.Table-module_bordered__1Kp1p > :not(caption) > * {\n border-width: 1px 0; }\n\n.Table-module_striped__jmxgE > tbody > tr:nth-of-type(odd) > * {\n --bs-table-accent-bg: var(--bs-table-striped-bg);\n color: var(--bs-table-striped-color); }\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n --bs-table-accent-bg: var(--bs-table-hover-bg);\n color: var(--bs-table-hover-color); }\n\n.Table-module_tableResponsive__ykttB {\n overflow-x: auto; }\n";
|
|
2273
|
+
var styles$6 = {"table":"Table-module_table__DHKNv","bordered":"Table-module_bordered__1Kp1p","striped":"Table-module_striped__jmxgE","hover":"Table-module_hover__P6r3y","tableResponsive":"Table-module_tableResponsive__ykttB"};
|
|
2274
|
+
styleInject(css_248z$6);
|
|
2275
|
+
|
|
2257
2276
|
const Table = (props) => {
|
|
2258
2277
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2259
2278
|
const getCssClasses = () => {
|
|
2260
2279
|
const cssClasses = [];
|
|
2261
|
-
cssClasses.push(
|
|
2262
|
-
bordered && cssClasses.push('
|
|
2263
|
-
striped && cssClasses.push('
|
|
2264
|
-
hover && cssClasses.push('
|
|
2280
|
+
cssClasses.push(styles$6.table);
|
|
2281
|
+
bordered && cssClasses.push(styles$6['bordered']);
|
|
2282
|
+
striped && cssClasses.push(styles$6['striped']);
|
|
2283
|
+
hover && cssClasses.push(styles$6['hover']);
|
|
2265
2284
|
className && cssClasses.push(className);
|
|
2266
2285
|
return cssClasses.filter(css => css).join(' ');
|
|
2267
2286
|
};
|
|
2268
|
-
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className:
|
|
2287
|
+
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$6.tableResponsive }, children) },
|
|
2269
2288
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2270
2289
|
};
|
|
2271
2290
|
|