react-asc 23.5.1 → 23.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Form/validators/MinValidator.d.ts +1 -0
- package/components/Form/validators/index.d.ts +1 -0
- package/components/Skeleton/SkeletonAvatar.d.ts +5 -0
- package/components/Skeleton/SkeletonFooter.d.ts +5 -0
- package/components/Skeleton/SkeletonImage.d.ts +5 -0
- package/components/Skeleton/SkeletonText.d.ts +5 -0
- package/components/Skeleton/index.d.ts +4 -0
- package/components/index.d.ts +1 -0
- package/index.es.js +476 -389
- package/index.js +480 -388
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -95,93 +95,93 @@ function styleInject(css, ref) {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
var css_248z$
|
|
99
|
-
var styles$
|
|
100
|
-
styleInject(css_248z$
|
|
98
|
+
var css_248z$15 = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\n.Alert-module_alert__b4tbk.Alert-module_shadow__5bz-7 {\n box-shadow: var(--shadow);\n}\n\n.Alert-module_contained__EM0x6.Alert-module_primary__q4pNj {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Alert-module_contained__EM0x6.Alert-module_accent__a2WIl {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Alert-module_contained__EM0x6.Alert-module_secondary__syXKX {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Alert-module_contained__EM0x6.Alert-module_light__VKCXF {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Alert-module_contained__EM0x6.Alert-module_dark__3c-Hm {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Alert-module_outline__T2262.Alert-module_primary__q4pNj {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important;\n}\n.Alert-module_outline__T2262.Alert-module_secondary__syXKX {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important;\n}\n.Alert-module_outline__T2262.Alert-module_accent__a2WIl {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important;\n}\n.Alert-module_outline__T2262.Alert-module_light__VKCXF {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important;\n}\n.Alert-module_outline__T2262.Alert-module_dark__3c-Hm {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important;\n}";
|
|
99
|
+
var styles$15 = {"alert":"Alert-module_alert__b4tbk","shadow":"Alert-module_shadow__5bz-7","contained":"Alert-module_contained__EM0x6","primary":"Alert-module_primary__q4pNj","accent":"Alert-module_accent__a2WIl","secondary":"Alert-module_secondary__syXKX","light":"Alert-module_light__VKCXF","dark":"Alert-module_dark__3c-Hm","outline":"Alert-module_outline__T2262"};
|
|
100
|
+
styleInject(css_248z$15);
|
|
101
101
|
|
|
102
102
|
const Alert = (props) => {
|
|
103
103
|
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
104
104
|
const getCssClasses = () => {
|
|
105
105
|
const cssClasses = [];
|
|
106
|
-
cssClasses.push(styles$
|
|
106
|
+
cssClasses.push(styles$15.alert);
|
|
107
107
|
if (variant === exports.VARIANT.contained) {
|
|
108
|
-
cssClasses.push(styles$
|
|
109
|
-
cssClasses.push(styles$
|
|
108
|
+
cssClasses.push(styles$15.contained);
|
|
109
|
+
cssClasses.push(styles$15[color]);
|
|
110
110
|
}
|
|
111
111
|
if (variant === exports.VARIANT.outline) {
|
|
112
|
-
cssClasses.push(styles$
|
|
113
|
-
cssClasses.push(styles$
|
|
112
|
+
cssClasses.push(styles$15.outline);
|
|
113
|
+
cssClasses.push(styles$15[color]);
|
|
114
114
|
}
|
|
115
|
-
shadow && cssClasses.push(styles$
|
|
115
|
+
shadow && cssClasses.push(styles$15['shadow']);
|
|
116
116
|
className && cssClasses.push(className);
|
|
117
117
|
return cssClasses.filter(r => r).join(' ');
|
|
118
118
|
};
|
|
119
119
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
120
120
|
};
|
|
121
121
|
|
|
122
|
-
var css_248z$
|
|
123
|
-
var styles$
|
|
124
|
-
styleInject(css_248z$
|
|
122
|
+
var css_248z$14 = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem var(--1);\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: var(--shadow);\n}";
|
|
123
|
+
var styles$14 = {"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"};
|
|
124
|
+
styleInject(css_248z$14);
|
|
125
125
|
|
|
126
126
|
const AppBar = (props) => {
|
|
127
127
|
const { children, className, color = exports.COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
128
128
|
const getCssClasses = () => {
|
|
129
129
|
const cssClasses = [];
|
|
130
|
-
cssClasses.push(styles$
|
|
131
|
-
cssClasses.push(styles$
|
|
132
|
-
shadow && cssClasses.push(styles$
|
|
130
|
+
cssClasses.push(styles$14[color]);
|
|
131
|
+
cssClasses.push(styles$14.appbar);
|
|
132
|
+
shadow && cssClasses.push(styles$14['shadow']);
|
|
133
133
|
className && cssClasses.push(className);
|
|
134
134
|
return cssClasses.filter(r => r).join(' ');
|
|
135
135
|
};
|
|
136
136
|
return (React__default["default"].createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
var css_248z
|
|
140
|
-
var styles
|
|
141
|
-
styleInject(css_248z
|
|
139
|
+
var css_248z$13 = ".AppBarTitle-module_appbarTitle__RsFg5 {\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n font-size: 1.25rem;\n line-height: 1.8;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden !important;\n display: inline-block;\n}\n.AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer;\n}";
|
|
140
|
+
var styles$13 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
141
|
+
styleInject(css_248z$13);
|
|
142
142
|
|
|
143
143
|
const AppBarTitle = (props) => {
|
|
144
144
|
const { children, className, onClick } = props;
|
|
145
145
|
const getCssClass = () => {
|
|
146
146
|
const cssClasses = [];
|
|
147
|
-
cssClasses.push(styles
|
|
147
|
+
cssClasses.push(styles$13.appbarTitle);
|
|
148
148
|
className && cssClasses.push(className);
|
|
149
149
|
return cssClasses.filter(r => r).join(' ');
|
|
150
150
|
};
|
|
151
151
|
return (React__default["default"].createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
152
152
|
};
|
|
153
153
|
|
|
154
|
-
var css_248z$
|
|
155
|
-
var styles$
|
|
156
|
-
styleInject(css_248z$
|
|
154
|
+
var css_248z$12 = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary);\n}\n.Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent);\n}\n.Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary);\n}\n.Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light);\n}\n.Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark);\n}";
|
|
155
|
+
var styles$12 = {"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"};
|
|
156
|
+
styleInject(css_248z$12);
|
|
157
157
|
|
|
158
158
|
const Icon = (props) => {
|
|
159
159
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
160
160
|
const getCssClasses = () => {
|
|
161
161
|
const cssClasses = [];
|
|
162
|
-
cssClasses.push(styles$
|
|
163
|
-
iconColor && cssClasses.push(styles$
|
|
162
|
+
cssClasses.push(styles$12.icon);
|
|
163
|
+
iconColor && cssClasses.push(styles$12[iconColor]);
|
|
164
164
|
className && cssClasses.push(className);
|
|
165
165
|
return cssClasses.filter(css => css).join(' ');
|
|
166
166
|
};
|
|
167
167
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
168
168
|
};
|
|
169
169
|
|
|
170
|
-
var css_248z$
|
|
171
|
-
var styles$
|
|
172
|
-
styleInject(css_248z$
|
|
170
|
+
var css_248z$11 = ".IconButton-module_iconButton__rpCPQ {\n border-radius: 100%;\n padding: 0px;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n min-width: auto;\n box-shadow: none;\n font-weight: 400;\n text-align: center;\n vertical-align: middle;\n -webkit-user-select: none;\n user-select: none;\n background-color: transparent;\n font-size: 1rem;\n line-height: 1.5;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: none;\n}\n.IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n color: var(--dark-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n background-color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n background-color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n background-color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n background-color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n background-color: var(--dark-light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ:focus:not(.IconButton-module_iconButton__rpCPQ.IconButton-module_disabled__QB0ZV) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}";
|
|
171
|
+
var styles$11 = {"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"};
|
|
172
|
+
styleInject(css_248z$11);
|
|
173
173
|
|
|
174
174
|
const IconButton = (props) => {
|
|
175
175
|
const { children, icon, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
176
176
|
const getCssClasses = () => {
|
|
177
177
|
const cssClasses = [];
|
|
178
|
-
cssClasses.push(styles$
|
|
179
|
-
cssClasses.push(styles$
|
|
180
|
-
cssClasses.push(styles$
|
|
181
|
-
cssClasses.push(styles$
|
|
182
|
-
isActive && cssClasses.push(styles$
|
|
183
|
-
disabled && cssClasses.push(styles$
|
|
184
|
-
shadow && cssClasses.push(styles$
|
|
178
|
+
cssClasses.push(styles$11[color]);
|
|
179
|
+
cssClasses.push(styles$11[variant]);
|
|
180
|
+
cssClasses.push(styles$11[size]);
|
|
181
|
+
cssClasses.push(styles$11.iconButton);
|
|
182
|
+
isActive && cssClasses.push(styles$11.active);
|
|
183
|
+
disabled && cssClasses.push(styles$11.disabled);
|
|
184
|
+
shadow && cssClasses.push(styles$11.shadow);
|
|
185
185
|
className && cssClasses.push(className);
|
|
186
186
|
return cssClasses.filter(css => css).join(' ');
|
|
187
187
|
};
|
|
@@ -316,9 +316,9 @@ const useOnDestroy = (callBack) => {
|
|
|
316
316
|
}, []);
|
|
317
317
|
};
|
|
318
318
|
|
|
319
|
-
var css_248z$
|
|
320
|
-
var styles$
|
|
321
|
-
styleInject(css_248z$
|
|
319
|
+
var css_248z$10 = ".Backdrop-module_backdrop__IRMoL {\n height: 100%;\n width: 100%;\n position: absolute;\n opacity: 0.5;\n z-index: 1040;\n top: 0;\n left: 0;\n background-color: #000;\n}\n.Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n opacity: 0;\n}";
|
|
320
|
+
var styles$10 = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
321
|
+
styleInject(css_248z$10);
|
|
322
322
|
|
|
323
323
|
const Backdrop = (props) => {
|
|
324
324
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -328,8 +328,8 @@ const Backdrop = (props) => {
|
|
|
328
328
|
};
|
|
329
329
|
const getCssClasses = () => {
|
|
330
330
|
const cssClasses = [];
|
|
331
|
-
cssClasses.push(styles$
|
|
332
|
-
isTransparent && cssClasses.push(styles$
|
|
331
|
+
cssClasses.push(styles$10.backdrop);
|
|
332
|
+
isTransparent && cssClasses.push(styles$10['isTransparent']);
|
|
333
333
|
return cssClasses.filter(css => css).join(' ');
|
|
334
334
|
};
|
|
335
335
|
const getStyles = () => {
|
|
@@ -339,34 +339,34 @@ const Backdrop = (props) => {
|
|
|
339
339
|
return (reactDom.createPortal(React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
|
|
340
340
|
};
|
|
341
341
|
|
|
342
|
-
var css_248z
|
|
343
|
-
var styles
|
|
344
|
-
styleInject(css_248z
|
|
342
|
+
var css_248z$$ = ".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}";
|
|
343
|
+
var styles$$ = {"list":"List-module_list__gpZ41"};
|
|
344
|
+
styleInject(css_248z$$);
|
|
345
345
|
|
|
346
346
|
const List = (props) => {
|
|
347
347
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
348
348
|
const getCssClasses = () => {
|
|
349
349
|
const cssClasses = [];
|
|
350
|
-
isFlush && cssClasses.push(styles
|
|
351
|
-
cssClasses.push(styles
|
|
350
|
+
isFlush && cssClasses.push(styles$$.flush);
|
|
351
|
+
cssClasses.push(styles$$.list);
|
|
352
352
|
className && cssClasses.push(className);
|
|
353
353
|
return cssClasses.filter(css => css).join(' ');
|
|
354
354
|
};
|
|
355
355
|
return (React__default["default"].createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
356
356
|
};
|
|
357
357
|
|
|
358
|
-
var css_248z$
|
|
359
|
-
var styles$
|
|
360
|
-
styleInject(css_248z$
|
|
358
|
+
var css_248z$_ = ".ListItem-module_listItem__Pk1AP {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease;\n}\n.ListItem-module_listItem__Pk1AP:hover, .ListItem-module_listItem__Pk1AP.ListItem-module_active__zm2q8 {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0;\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit;\n}";
|
|
359
|
+
var styles$_ = {"listItem":"ListItem-module_listItem__Pk1AP","active":"ListItem-module_active__zm2q8","primary":"ListItem-module_primary__F6Qja","accent":"ListItem-module_accent__pg3Ha","secondary":"ListItem-module_secondary__d0drD","light":"ListItem-module_light__37kby","dark":"ListItem-module_dark__ZxQTF","disabled":"ListItem-module_disabled__DQLKl"};
|
|
360
|
+
styleInject(css_248z$_);
|
|
361
361
|
|
|
362
362
|
const ListItem = (props) => {
|
|
363
363
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
364
364
|
const getCssClasses = () => {
|
|
365
365
|
const cssClasses = [];
|
|
366
|
-
cssClasses.push(styles$
|
|
367
|
-
color && cssClasses.push(styles$
|
|
368
|
-
active && cssClasses.push(styles$
|
|
369
|
-
disabled && cssClasses.push(styles$
|
|
366
|
+
cssClasses.push(styles$_.listItem);
|
|
367
|
+
color && cssClasses.push(styles$_[color]);
|
|
368
|
+
active && cssClasses.push(styles$_['active']);
|
|
369
|
+
disabled && cssClasses.push(styles$_['disabled']);
|
|
370
370
|
className && cssClasses.push(className);
|
|
371
371
|
return cssClasses.filter(css => css).join(' ');
|
|
372
372
|
};
|
|
@@ -376,42 +376,42 @@ const ListItem = (props) => {
|
|
|
376
376
|
return (React__default["default"].createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
377
377
|
};
|
|
378
378
|
|
|
379
|
-
var css_248z$
|
|
380
|
-
var styles$
|
|
381
|
-
styleInject(css_248z$
|
|
379
|
+
var css_248z$Z = ".ListItemAvatar-module_avatar__sVWfR {\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%;\n}";
|
|
380
|
+
var styles$Z = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
381
|
+
styleInject(css_248z$Z);
|
|
382
382
|
|
|
383
383
|
const ListItemAvatar = (_a) => {
|
|
384
384
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
385
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
385
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$Z.avatar }, rest), avatar));
|
|
386
386
|
};
|
|
387
387
|
|
|
388
|
-
var css_248z$
|
|
389
|
-
var styles$
|
|
390
|
-
styleInject(css_248z$
|
|
388
|
+
var css_248z$Y = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px;\n}";
|
|
389
|
+
var styles$Y = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
390
|
+
styleInject(css_248z$Y);
|
|
391
391
|
|
|
392
392
|
const ListItemIcon = (_a) => {
|
|
393
393
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
394
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
394
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$Y.icon }, rest), icon));
|
|
395
395
|
};
|
|
396
396
|
|
|
397
|
-
var css_248z$
|
|
398
|
-
var styles$
|
|
399
|
-
styleInject(css_248z$
|
|
397
|
+
var css_248z$X = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px;\n}";
|
|
398
|
+
var styles$X = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
399
|
+
styleInject(css_248z$X);
|
|
400
400
|
|
|
401
401
|
const ListItemAction = (_a) => {
|
|
402
402
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
403
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
403
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$X.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
404
404
|
};
|
|
405
405
|
|
|
406
|
-
var css_248z$
|
|
407
|
-
var styles$
|
|
408
|
-
styleInject(css_248z$
|
|
406
|
+
var css_248z$W = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
407
|
+
var styles$W = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
408
|
+
styleInject(css_248z$W);
|
|
409
409
|
|
|
410
410
|
const ListItemText = (_a) => {
|
|
411
411
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
412
412
|
const getCssClasses = () => {
|
|
413
413
|
const cssClasses = [];
|
|
414
|
-
cssClasses.push(styles$
|
|
414
|
+
cssClasses.push(styles$W.listItemText);
|
|
415
415
|
return cssClasses.filter(css => css).join(' ');
|
|
416
416
|
};
|
|
417
417
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -422,9 +422,9 @@ const ListItemText = (_a) => {
|
|
|
422
422
|
const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
|
|
423
423
|
const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
424
424
|
|
|
425
|
-
var css_248z$
|
|
426
|
-
var styles$
|
|
427
|
-
styleInject(css_248z$
|
|
425
|
+
var css_248z$V = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative;\n}\n\n.AutoComplete-module_select__NNYOi {\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__NNYOi:hover {\n cursor: pointer;\n}\n.AutoComplete-module_select__NNYOi:focus:not(.AutoComplete-module_select__NNYOi.AutoComplete-module_disabled__CbGP4) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.AutoComplete-module_select__NNYOi:disabled, .AutoComplete-module_select__NNYOi:read-only {\n background-color: #e9ecef;\n}\n.AutoComplete-module_select__NNYOi:disabled:hover {\n cursor: not-allowed;\n}\n.AutoComplete-module_select__NNYOi:read-only:hover {\n cursor: inherit;\n}\n\n.AutoComplete-module_selectMenu__Gu81L {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 38px;\n z-index: 1050;\n max-height: 280px;\n overflow: auto;\n}";
|
|
426
|
+
var styles$V = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
427
|
+
styleInject(css_248z$V);
|
|
428
428
|
|
|
429
429
|
// preset value
|
|
430
430
|
// enter -> delay? -> show results
|
|
@@ -470,7 +470,7 @@ const AutoComplete = (props) => {
|
|
|
470
470
|
const getCssClass = () => {
|
|
471
471
|
const cssClasses = [];
|
|
472
472
|
className && cssClasses.push(className);
|
|
473
|
-
cssClasses.push(styles$
|
|
473
|
+
cssClasses.push(styles$V.select);
|
|
474
474
|
return cssClasses.filter(r => r).join(' ');
|
|
475
475
|
};
|
|
476
476
|
const show = () => setIsShow(true);
|
|
@@ -494,28 +494,28 @@ const AutoComplete = (props) => {
|
|
|
494
494
|
setModel('');
|
|
495
495
|
setSearchText('');
|
|
496
496
|
};
|
|
497
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
497
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$V.selectContainer },
|
|
498
498
|
React__default["default"].createElement("div", { className: "d-flex" },
|
|
499
499
|
React__default["default"].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
500
500
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
501
501
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
502
502
|
isShow &&
|
|
503
503
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
504
|
-
React__default["default"].createElement("div", { className: styles$
|
|
504
|
+
React__default["default"].createElement("div", { className: styles$V.selectMenu },
|
|
505
505
|
React__default["default"].createElement(List, null, _options && _options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
506
506
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
507
507
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
508
508
|
};
|
|
509
509
|
|
|
510
|
-
var css_248z$
|
|
511
|
-
var styles$
|
|
512
|
-
styleInject(css_248z$
|
|
510
|
+
var css_248z$U = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.Badge-module_badge__9ImR0 {\n top: 0;\n right: 0;\n transform: scale(1) translate(50%, -50%);\n transform-origin: 100% 0%;\n height: 20px;\n display: flex;\n padding: 0 6px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n align-items: center;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n border-radius: 10px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
511
|
+
var styles$U = {"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"};
|
|
512
|
+
styleInject(css_248z$U);
|
|
513
513
|
|
|
514
514
|
const Badge = (props) => {
|
|
515
515
|
const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
516
516
|
const [cssClassName] = useCssClasses([
|
|
517
|
-
styles$
|
|
518
|
-
styles$
|
|
517
|
+
styles$U.badge,
|
|
518
|
+
styles$U[color],
|
|
519
519
|
className
|
|
520
520
|
]);
|
|
521
521
|
return (React__default["default"].createElement(BadgeContainer, null,
|
|
@@ -525,15 +525,15 @@ const Badge = (props) => {
|
|
|
525
525
|
const BadgeContainer = (props) => {
|
|
526
526
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
527
527
|
const [cssClassName] = useCssClasses([
|
|
528
|
-
styles$
|
|
528
|
+
styles$U.badgeContainer,
|
|
529
529
|
className,
|
|
530
530
|
]);
|
|
531
531
|
return (React__default["default"].createElement("div", Object.assign({ className: cssClassName }, rest), children));
|
|
532
532
|
};
|
|
533
533
|
|
|
534
|
-
var css_248z$
|
|
535
|
-
var styles$
|
|
536
|
-
styleInject(css_248z$
|
|
534
|
+
var css_248z$T = ".Button-module_button__qeIer {\n text-transform: uppercase;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius);\n}\n.Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow);\n}\n.Button-module_button__qeIer.Button-module_block__JIazf {\n width: 100%;\n}\n.Button-module_button__qeIer:hover:not(:disabled) {\n cursor: pointer;\n}\n.Button-module_button__qeIer:focus:not(:disabled) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n background-color: var(--primary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n background-color: var(--accent-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background-color: var(--secondary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n background-color: var(--light-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n background-color: var(--dark-dark);\n}\n.Button-module_btnContained__16y5l:disabled {\n color: rgba(0, 0, 0, 0.26);\n box-shadow: none;\n background-color: rgba(0, 0, 0, 0.12);\n}\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed;\n}\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary);\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n text-decoration: none;\n background: var(--primary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n text-decoration: none;\n background: var(--secondary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n text-decoration: none;\n background: var(--accent-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n text-decoration: none;\n background: var(--light-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n text-decoration: none;\n background: var(--dark-highlight);\n}\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary);\n border-color: var(--primary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n background: var(--primary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary);\n border-color: var(--secondary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background: var(--secondary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent);\n border-color: var(--accent);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n background: var(--accent-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n border-color: var(--light);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n background: var(--light-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark);\n border-color: var(--dark);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n background: var(--dark-highlight);\n}\n.Button-module_btnOutline__CCFPI:disabled {\n color: rgba(0, 0, 0, 0.26);\n border: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px;\n}";
|
|
535
|
+
var styles$T = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
|
|
536
|
+
styleInject(css_248z$T);
|
|
537
537
|
|
|
538
538
|
const ButtonContext = React.createContext({
|
|
539
539
|
color: null
|
|
@@ -545,19 +545,19 @@ const Button = (props) => {
|
|
|
545
545
|
const buttonContext = useButtonContext();
|
|
546
546
|
const getCssClasses = () => {
|
|
547
547
|
const cssClasses = [];
|
|
548
|
-
cssClasses.push(styles$
|
|
548
|
+
cssClasses.push(styles$T.button);
|
|
549
549
|
const buttonColor = buttonContext.color || color;
|
|
550
550
|
if (variant !== 'outline' && variant !== 'text') {
|
|
551
|
-
cssClasses.push(styles$
|
|
552
|
-
cssClasses.push(styles$
|
|
551
|
+
cssClasses.push(styles$T.btnContained);
|
|
552
|
+
cssClasses.push(styles$T[buttonColor]);
|
|
553
553
|
}
|
|
554
554
|
if (variant === 'outline') {
|
|
555
|
-
cssClasses.push(styles$
|
|
556
|
-
cssClasses.push(styles$
|
|
555
|
+
cssClasses.push(styles$T.btnOutline);
|
|
556
|
+
cssClasses.push(styles$T[buttonColor]);
|
|
557
557
|
}
|
|
558
558
|
if (variant === 'text') {
|
|
559
|
-
cssClasses.push(styles$
|
|
560
|
-
cssClasses.push(styles$
|
|
559
|
+
cssClasses.push(styles$T.btnText);
|
|
560
|
+
cssClasses.push(styles$T[buttonColor]);
|
|
561
561
|
}
|
|
562
562
|
if (isRounded && variant !== 'text') {
|
|
563
563
|
cssClasses.push(`rounded-pill`);
|
|
@@ -565,29 +565,29 @@ const Button = (props) => {
|
|
|
565
565
|
if (isActive) {
|
|
566
566
|
cssClasses.push('active');
|
|
567
567
|
}
|
|
568
|
-
shadow && cssClasses.push(styles$
|
|
569
|
-
block && cssClasses.push(styles$
|
|
568
|
+
shadow && cssClasses.push(styles$T.shadow);
|
|
569
|
+
block && cssClasses.push(styles$T.block);
|
|
570
570
|
className && cssClasses.push(className);
|
|
571
571
|
return cssClasses.filter(css => css).join(' ');
|
|
572
572
|
};
|
|
573
573
|
return (React__default["default"].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
574
574
|
React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
|
|
575
575
|
startIcon &&
|
|
576
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
576
|
+
React__default["default"].createElement(Icon, { className: styles$T.startIcon }, startIcon),
|
|
577
577
|
children,
|
|
578
578
|
endIcon &&
|
|
579
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
579
|
+
React__default["default"].createElement(Icon, { className: styles$T.endIcon }, endIcon))));
|
|
580
580
|
};
|
|
581
581
|
|
|
582
|
-
var css_248z$
|
|
583
|
-
var styles$
|
|
584
|
-
styleInject(css_248z$
|
|
582
|
+
var css_248z$S = ".ButtonGroup-module_buttonGroup__w6iB- {\n display: inline-flex;\n border-radius: 4px;\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-of-type) {\n border-right: 1px solid #bdbdbd;\n}";
|
|
583
|
+
var styles$S = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
584
|
+
styleInject(css_248z$S);
|
|
585
585
|
|
|
586
586
|
const ButtonGroup = (props) => {
|
|
587
587
|
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
588
588
|
const getCssClasses = () => {
|
|
589
589
|
const cssClasses = [];
|
|
590
|
-
cssClasses.push(styles$
|
|
590
|
+
cssClasses.push(styles$S.buttonGroup);
|
|
591
591
|
className && cssClasses.push(className);
|
|
592
592
|
return cssClasses.filter(css => css).join(' ');
|
|
593
593
|
};
|
|
@@ -595,15 +595,15 @@ const ButtonGroup = (props) => {
|
|
|
595
595
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
596
596
|
};
|
|
597
597
|
|
|
598
|
-
var css_248z$
|
|
599
|
-
var styles$
|
|
600
|
-
styleInject(css_248z$
|
|
598
|
+
var css_248z$R = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0;\n}";
|
|
599
|
+
var styles$R = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
600
|
+
styleInject(css_248z$R);
|
|
601
601
|
|
|
602
602
|
const Breadcrumb = (props) => {
|
|
603
603
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
604
604
|
const getCssClasses = () => {
|
|
605
605
|
const cssClasses = [];
|
|
606
|
-
cssClasses.push(styles$
|
|
606
|
+
cssClasses.push(styles$R.breadcrumb);
|
|
607
607
|
className && cssClasses.push(className);
|
|
608
608
|
return cssClasses.filter(css => css).join(' ');
|
|
609
609
|
};
|
|
@@ -613,15 +613,15 @@ const Breadcrumb = (props) => {
|
|
|
613
613
|
|
|
614
614
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
615
615
|
|
|
616
|
-
var css_248z$
|
|
617
|
-
var styles$
|
|
618
|
-
styleInject(css_248z$
|
|
616
|
+
var css_248z$Q = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\";\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary);\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset;\n}";
|
|
617
|
+
var styles$Q = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
618
|
+
styleInject(css_248z$Q);
|
|
619
619
|
|
|
620
620
|
const BreadcrumbItem = (props) => {
|
|
621
621
|
const { children, className, isActive, onClick } = props;
|
|
622
622
|
const getCssClasses = () => {
|
|
623
623
|
const cssClasses = [];
|
|
624
|
-
cssClasses.push(styles$
|
|
624
|
+
cssClasses.push(styles$Q.breadcrumbItem);
|
|
625
625
|
className && cssClasses.push(className);
|
|
626
626
|
isActive && cssClasses.push('active');
|
|
627
627
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -633,115 +633,115 @@ const BreadcrumbItem = (props) => {
|
|
|
633
633
|
React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React__default["default"].createElement("a", null, label) }, children)));
|
|
634
634
|
};
|
|
635
635
|
|
|
636
|
-
var css_248z$
|
|
637
|
-
var styles$
|
|
638
|
-
styleInject(css_248z$
|
|
636
|
+
var css_248z$P = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius);\n}\n.Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow);\n}";
|
|
637
|
+
var styles$P = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
638
|
+
styleInject(css_248z$P);
|
|
639
639
|
|
|
640
640
|
const Card = (props) => {
|
|
641
641
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
642
642
|
const getCssClasses = () => {
|
|
643
643
|
const cssClasses = [];
|
|
644
|
-
cssClasses.push(styles$
|
|
645
|
-
shadow && cssClasses.push(styles$
|
|
644
|
+
cssClasses.push(styles$P.card);
|
|
645
|
+
shadow && cssClasses.push(styles$P.shadow);
|
|
646
646
|
className && cssClasses.push(className);
|
|
647
647
|
return cssClasses.filter(css => css).join(' ');
|
|
648
648
|
};
|
|
649
649
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
650
650
|
};
|
|
651
651
|
|
|
652
|
-
var css_248z$
|
|
653
|
-
var styles$
|
|
654
|
-
styleInject(css_248z$
|
|
652
|
+
var css_248z$O = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
653
|
+
var styles$O = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
654
|
+
styleInject(css_248z$O);
|
|
655
655
|
|
|
656
656
|
const CardBody = (props) => {
|
|
657
657
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
658
658
|
const getCssClasses = () => {
|
|
659
659
|
const cssClasses = [];
|
|
660
|
-
cssClasses.push(styles$
|
|
660
|
+
cssClasses.push(styles$O.cardBody);
|
|
661
661
|
className && cssClasses.push(className);
|
|
662
662
|
return cssClasses.filter(css => css).join(' ');
|
|
663
663
|
};
|
|
664
664
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
665
665
|
};
|
|
666
666
|
|
|
667
|
-
var css_248z$
|
|
668
|
-
var styles$
|
|
669
|
-
styleInject(css_248z$
|
|
667
|
+
var css_248z$N = ".CardFooter-module_cardFooter__BpOTG {\n padding: 0.75rem 1.25rem;\n background-color: rgba(0, 0, 0, 0.03);\n border-top: 1px solid rgba(0, 0, 0, 0.125);\n}\n.CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);\n}";
|
|
668
|
+
var styles$N = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
669
|
+
styleInject(css_248z$N);
|
|
670
670
|
|
|
671
671
|
const CardFooter = (props) => {
|
|
672
672
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
673
673
|
const getCssClasses = () => {
|
|
674
674
|
const cssClasses = [];
|
|
675
|
-
cssClasses.push(styles$
|
|
675
|
+
cssClasses.push(styles$N.cardFooter);
|
|
676
676
|
className && cssClasses.push(className);
|
|
677
677
|
return cssClasses.filter(css => css).join(' ');
|
|
678
678
|
};
|
|
679
679
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
680
680
|
};
|
|
681
681
|
|
|
682
|
-
var css_248z$
|
|
683
|
-
var styles$
|
|
684
|
-
styleInject(css_248z$
|
|
682
|
+
var css_248z$M = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
683
|
+
var styles$M = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
684
|
+
styleInject(css_248z$M);
|
|
685
685
|
|
|
686
686
|
const CardSubtitle = (props) => {
|
|
687
687
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
688
688
|
const getCssClasses = () => {
|
|
689
689
|
const cssClasses = [];
|
|
690
|
-
cssClasses.push(styles$
|
|
690
|
+
cssClasses.push(styles$M.cardSubtitle);
|
|
691
691
|
className && cssClasses.push(className);
|
|
692
692
|
return cssClasses.filter(css => css).join(' ');
|
|
693
693
|
};
|
|
694
694
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
695
695
|
};
|
|
696
696
|
|
|
697
|
-
var css_248z$
|
|
698
|
-
var styles$
|
|
699
|
-
styleInject(css_248z$
|
|
697
|
+
var css_248z$L = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
698
|
+
var styles$L = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
699
|
+
styleInject(css_248z$L);
|
|
700
700
|
|
|
701
701
|
const CardText = (props) => {
|
|
702
702
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
703
703
|
const getCssClasses = () => {
|
|
704
704
|
const cssClasses = [];
|
|
705
|
-
cssClasses.push(styles$
|
|
705
|
+
cssClasses.push(styles$L.cardText);
|
|
706
706
|
className && cssClasses.push(className);
|
|
707
707
|
return cssClasses.filter(css => css).join(' ');
|
|
708
708
|
};
|
|
709
709
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
710
710
|
};
|
|
711
711
|
|
|
712
|
-
var css_248z$
|
|
713
|
-
var styles$
|
|
714
|
-
styleInject(css_248z$
|
|
712
|
+
var css_248z$K = ".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}";
|
|
713
|
+
var styles$K = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
714
|
+
styleInject(css_248z$K);
|
|
715
715
|
|
|
716
716
|
const CardTitle = (props) => {
|
|
717
717
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
718
718
|
const getCssClasses = () => {
|
|
719
719
|
const cssClasses = [];
|
|
720
|
-
cssClasses.push(styles$
|
|
720
|
+
cssClasses.push(styles$K.cardTitle);
|
|
721
721
|
className && cssClasses.push(className);
|
|
722
722
|
return cssClasses.filter(css => css).join(' ');
|
|
723
723
|
};
|
|
724
724
|
return (React__default["default"].createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
725
725
|
};
|
|
726
726
|
|
|
727
|
-
var css_248z$
|
|
728
|
-
var styles$
|
|
729
|
-
styleInject(css_248z$
|
|
727
|
+
var css_248z$J = ".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}";
|
|
728
|
+
var styles$J = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
729
|
+
styleInject(css_248z$J);
|
|
730
730
|
|
|
731
731
|
const CardImage = (props) => {
|
|
732
732
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
733
733
|
const getCssClasses = () => {
|
|
734
734
|
const cssClasses = [];
|
|
735
|
-
cssClasses.push(styles$
|
|
735
|
+
cssClasses.push(styles$J.cardImage);
|
|
736
736
|
className && cssClasses.push(className);
|
|
737
737
|
return cssClasses.filter(css => css).join(' ');
|
|
738
738
|
};
|
|
739
739
|
return (React__default["default"].createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
740
740
|
};
|
|
741
741
|
|
|
742
|
-
var css_248z$
|
|
743
|
-
var styles$
|
|
744
|
-
styleInject(css_248z$
|
|
742
|
+
var css_248z$I = ".Checkbox-module_checkboxContainer__x2GCi {\n display: flex;\n align-items: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.Checkbox-module_checkboxLabel__nPY4k:hover {\n cursor: pointer;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG {\n color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG:hover {\n cursor: not-allowed;\n}";
|
|
743
|
+
var styles$I = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
744
|
+
styleInject(css_248z$I);
|
|
745
745
|
|
|
746
746
|
const Checkbox = (props) => {
|
|
747
747
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -770,8 +770,8 @@ const Checkbox = (props) => {
|
|
|
770
770
|
};
|
|
771
771
|
const getCssClassesLabel = () => {
|
|
772
772
|
const cssClasses = [];
|
|
773
|
-
cssClasses.push(styles$
|
|
774
|
-
disabled && cssClasses.push(styles$
|
|
773
|
+
cssClasses.push(styles$I.checkboxLabel);
|
|
774
|
+
disabled && cssClasses.push(styles$I['disabled']);
|
|
775
775
|
return cssClasses.filter(css => css).join(' ');
|
|
776
776
|
};
|
|
777
777
|
const getIcon = () => {
|
|
@@ -784,24 +784,24 @@ const Checkbox = (props) => {
|
|
|
784
784
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
785
785
|
}
|
|
786
786
|
};
|
|
787
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
787
|
+
return (React__default["default"].createElement("div", { className: styles$I.checkboxContainer },
|
|
788
788
|
React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
789
789
|
React__default["default"].createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
790
790
|
React__default["default"].createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
791
791
|
};
|
|
792
792
|
|
|
793
|
-
var css_248z$
|
|
794
|
-
var styles$
|
|
795
|
-
styleInject(css_248z$
|
|
793
|
+
var css_248z$H = ".Chip-module_chip__dZ5qz {\n display: inline-flex;\n align-items: center;\n padding: 0.5rem;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n font-size: 75%;\n font-weight: 700;\n border-radius: 10rem;\n line-height: 1;\n}\n.Chip-module_chip__dZ5qz span {\n margin-bottom: 2px;\n}\n.Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow);\n}";
|
|
794
|
+
var styles$H = {"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"};
|
|
795
|
+
styleInject(css_248z$H);
|
|
796
796
|
|
|
797
797
|
const Chip = (props) => {
|
|
798
798
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React__default["default"].createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
799
799
|
const getCssClass = () => {
|
|
800
800
|
const cssClasses = [];
|
|
801
|
-
cssClasses.push(styles$
|
|
802
|
-
cssClasses.push(styles$
|
|
803
|
-
shadow && cssClasses.push(styles$
|
|
804
|
-
onClick && cssClasses.push(styles$
|
|
801
|
+
cssClasses.push(styles$H.chip);
|
|
802
|
+
cssClasses.push(styles$H[color]);
|
|
803
|
+
shadow && cssClasses.push(styles$H['shadow']);
|
|
804
|
+
onClick && cssClasses.push(styles$H['clickable']);
|
|
805
805
|
className && cssClasses.push(className);
|
|
806
806
|
return cssClasses.filter(r => r).join(' ');
|
|
807
807
|
};
|
|
@@ -811,7 +811,7 @@ const Chip = (props) => {
|
|
|
811
811
|
};
|
|
812
812
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
813
813
|
React__default["default"].createElement("span", null, children),
|
|
814
|
-
isDeletable && (React__default["default"].createElement("div", { className: styles$
|
|
814
|
+
isDeletable && (React__default["default"].createElement("div", { className: styles$H.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
815
815
|
};
|
|
816
816
|
|
|
817
817
|
const CssTransition = (props) => {
|
|
@@ -889,9 +889,9 @@ const CssTransition = (props) => {
|
|
|
889
889
|
React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
890
890
|
};
|
|
891
891
|
|
|
892
|
-
var css_248z$
|
|
893
|
-
var styles$
|
|
894
|
-
styleInject(css_248z$
|
|
892
|
+
var css_248z$G = ".Column-module_column__fcTgl {\n flex: 1 0 0%;\n}\n\n@media (max-width: 575.98px) {\n .Column-module_column__fcTgl {\n flex: 1;\n }\n}";
|
|
893
|
+
var styles$G = {"column":"Column-module_column__fcTgl"};
|
|
894
|
+
styleInject(css_248z$G);
|
|
895
895
|
|
|
896
896
|
const Column = (props) => {
|
|
897
897
|
const { children, className } = props,
|
|
@@ -909,22 +909,22 @@ const Column = (props) => {
|
|
|
909
909
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
910
910
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
911
911
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
912
|
-
cssClasses.push(styles$
|
|
912
|
+
cssClasses.push(styles$G.column);
|
|
913
913
|
className && cssClasses.push(className);
|
|
914
914
|
return cssClasses.filter(css => css).join(' ');
|
|
915
915
|
};
|
|
916
916
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
917
917
|
};
|
|
918
918
|
|
|
919
|
-
var css_248z$
|
|
920
|
-
var styles$
|
|
921
|
-
styleInject(css_248z$
|
|
919
|
+
var css_248z$F = ".Row-module_row__bTIWp {\n display: flex;\n gap: 15px;\n flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n flex-shrink: 0;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n}";
|
|
920
|
+
var styles$F = {"row":"Row-module_row__bTIWp"};
|
|
921
|
+
styleInject(css_248z$F);
|
|
922
922
|
|
|
923
923
|
const Row = (_a) => {
|
|
924
924
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
925
925
|
const getCssClasses = () => {
|
|
926
926
|
const cssClasses = [];
|
|
927
|
-
cssClasses.push(styles$
|
|
927
|
+
cssClasses.push(styles$F.row);
|
|
928
928
|
className && cssClasses.push(className);
|
|
929
929
|
direction && cssClasses.push(`flex-${direction}`);
|
|
930
930
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -932,15 +932,15 @@ const Row = (_a) => {
|
|
|
932
932
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
933
933
|
};
|
|
934
934
|
|
|
935
|
-
var css_248z$
|
|
936
|
-
var styles$
|
|
937
|
-
styleInject(css_248z$
|
|
935
|
+
var css_248z$E = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
936
|
+
var styles$E = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
937
|
+
styleInject(css_248z$E);
|
|
938
938
|
|
|
939
939
|
const FormLabel = (_a) => {
|
|
940
940
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
941
941
|
const getCssClasses = () => {
|
|
942
942
|
const cssClasses = [];
|
|
943
|
-
cssClasses.push(styles$
|
|
943
|
+
cssClasses.push(styles$E.formLabel);
|
|
944
944
|
className && cssClasses.push(className);
|
|
945
945
|
return cssClasses.filter(css => css).join(' ');
|
|
946
946
|
};
|
|
@@ -977,9 +977,9 @@ const FileInput = (props) => {
|
|
|
977
977
|
React__default["default"].createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
|
|
978
978
|
};
|
|
979
979
|
|
|
980
|
-
var css_248z$
|
|
981
|
-
var styles$
|
|
982
|
-
styleInject(css_248z$
|
|
980
|
+
var css_248z$D = ".Select-module_selectContainer__DHFDZ {\n position: relative;\n}\n\n.Select-module_select__Fbn38 {\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n align-items: center;\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n flex-wrap: wrap;\n}\n.Select-module_select__Fbn38 > span {\n flex: 1;\n}\n.Select-module_select__Fbn38:hover {\n cursor: pointer;\n}\n.Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n background-color: #e9ecef;\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n cursor: not-allowed;\n}\n.Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n cursor: inherit;\n}\n\n.Select-module_chipContainer__1poFF {\n gap: 10px;\n flex: 1;\n display: inline-flex;\n flex-wrap: wrap;\n}\n\n.Select-module_selectMenu__8y4kQ {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 2px;\n z-index: 1112;\n max-height: 280px;\n overflow: auto;\n}";
|
|
981
|
+
var styles$D = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","chipContainer":"Select-module_chipContainer__1poFF","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
982
|
+
styleInject(css_248z$D);
|
|
983
983
|
|
|
984
984
|
const Select = (props) => {
|
|
985
985
|
var _a, _b, _c;
|
|
@@ -992,9 +992,9 @@ const Select = (props) => {
|
|
|
992
992
|
const getCssClass = () => {
|
|
993
993
|
const cssClasses = [];
|
|
994
994
|
className && cssClasses.push(className);
|
|
995
|
-
disabled && cssClasses.push(styles$
|
|
996
|
-
readOnly && cssClasses.push(styles$
|
|
997
|
-
cssClasses.push(styles$
|
|
995
|
+
disabled && cssClasses.push(styles$D['disabled']);
|
|
996
|
+
readOnly && cssClasses.push(styles$D['readOnly']);
|
|
997
|
+
cssClasses.push(styles$D.select);
|
|
998
998
|
return cssClasses.filter(r => r).join(' ');
|
|
999
999
|
};
|
|
1000
1000
|
React.useEffect(() => {
|
|
@@ -1116,16 +1116,16 @@ const Select = (props) => {
|
|
|
1116
1116
|
}
|
|
1117
1117
|
}
|
|
1118
1118
|
};
|
|
1119
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
1119
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$D.selectContainer },
|
|
1120
1120
|
React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1121
1121
|
!multiple && renderSingleViewModel(),
|
|
1122
1122
|
multiple &&
|
|
1123
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1123
|
+
React__default["default"].createElement("div", { className: styles$D.chipContainer }, renderMultipleViewModel()),
|
|
1124
1124
|
React__default["default"].createElement(Icon, { className: "ml-2" },
|
|
1125
1125
|
React__default["default"].createElement(ChevronDownSolidIcon, null))),
|
|
1126
1126
|
isShow &&
|
|
1127
1127
|
reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1128
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1128
|
+
React__default["default"].createElement("div", { className: styles$D.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 } },
|
|
1129
1129
|
React__default["default"].createElement(List, null, options && options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
1130
1130
|
multiple &&
|
|
1131
1131
|
React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1133,33 +1133,33 @@ const Select = (props) => {
|
|
|
1133
1133
|
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
1134
1134
|
};
|
|
1135
1135
|
|
|
1136
|
-
var css_248z$
|
|
1137
|
-
var styles$
|
|
1138
|
-
styleInject(css_248z$
|
|
1136
|
+
var css_248z$C = ".Textarea-module_textarea__L5zqa {\n min-height: calc(10em + 0.75rem + 2px);\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
1137
|
+
var styles$C = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1138
|
+
styleInject(css_248z$C);
|
|
1139
1139
|
|
|
1140
1140
|
const Textarea = (props) => {
|
|
1141
1141
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1142
1142
|
const getCssClass = () => {
|
|
1143
1143
|
const cssClasses = [];
|
|
1144
|
-
cssClasses.push(styles$
|
|
1144
|
+
cssClasses.push(styles$C.textarea);
|
|
1145
1145
|
className && cssClasses.push(className);
|
|
1146
|
-
error && cssClasses.push(styles$
|
|
1146
|
+
error && cssClasses.push(styles$C['isInvalid']);
|
|
1147
1147
|
return cssClasses.filter(r => r).join(' ');
|
|
1148
1148
|
};
|
|
1149
1149
|
return (React__default["default"].createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1150
1150
|
};
|
|
1151
1151
|
|
|
1152
|
-
var css_248z$
|
|
1153
|
-
var styles$
|
|
1154
|
-
styleInject(css_248z$
|
|
1152
|
+
var css_248z$B = ".FormInput-module_formInput__VXZip {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n -webkit-appearance: none;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.FormInput-module_formInput__VXZip:focus:not(.FormInput-module_formInput__VXZip.FormInput-module_disabled__EjdD9) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\n}\n.FormInput-module_formInput__VXZip.FormInput-module_isInvalid__vQDuz {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
1153
|
+
var styles$B = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1154
|
+
styleInject(css_248z$B);
|
|
1155
1155
|
|
|
1156
1156
|
const FormInput = (props) => {
|
|
1157
1157
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1158
1158
|
const getCssClasses = () => {
|
|
1159
1159
|
const cssClasses = [];
|
|
1160
|
-
cssClasses.push(styles$
|
|
1160
|
+
cssClasses.push(styles$B.formInput);
|
|
1161
1161
|
className && cssClasses.push(className);
|
|
1162
|
-
!isValid && cssClasses.push(styles$
|
|
1162
|
+
!isValid && cssClasses.push(styles$B['isInvalid']);
|
|
1163
1163
|
return cssClasses.filter(css => css).join(' ');
|
|
1164
1164
|
};
|
|
1165
1165
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1207,12 +1207,12 @@ const FormHint = (props) => {
|
|
|
1207
1207
|
return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
|
|
1208
1208
|
};
|
|
1209
1209
|
|
|
1210
|
-
var css_248z$
|
|
1211
|
-
var styles$
|
|
1212
|
-
styleInject(css_248z$
|
|
1210
|
+
var css_248z$A = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
1211
|
+
var styles$A = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1212
|
+
styleInject(css_248z$A);
|
|
1213
1213
|
|
|
1214
1214
|
const FormError = (props) => {
|
|
1215
|
-
const { className = styles$
|
|
1215
|
+
const { className = styles$A.isInvalid, errors = [] } = props;
|
|
1216
1216
|
return (React__default["default"].createElement(React.Fragment, null, errors &&
|
|
1217
1217
|
React__default["default"].createElement("div", { className: className }, errors.map(e => React__default["default"].createElement("div", { key: e.validator }, e.message)))));
|
|
1218
1218
|
};
|
|
@@ -1227,7 +1227,9 @@ const EmailValidator = (value) => {
|
|
|
1227
1227
|
|
|
1228
1228
|
const IsEqualValidator = (valueA, valueB) => valueA === valueB;
|
|
1229
1229
|
|
|
1230
|
-
const MaxValidator = (valueA, valueB) => valueA
|
|
1230
|
+
const MaxValidator = (valueA, valueB) => valueA <= valueB;
|
|
1231
|
+
|
|
1232
|
+
const MinValidator = (valueA, valueB) => valueA >= valueB;
|
|
1231
1233
|
|
|
1232
1234
|
// values, isSubmitting, handleChange, handleBlur, handleSubmit
|
|
1233
1235
|
class Form extends React.Component {
|
|
@@ -1278,8 +1280,13 @@ class Form extends React.Component {
|
|
|
1278
1280
|
errors.push({ validator: validatorName, message: 'Email format is wrong' });
|
|
1279
1281
|
}
|
|
1280
1282
|
break;
|
|
1283
|
+
case 'min':
|
|
1284
|
+
if (!MinValidator(fieldValue, parseInt(validatorParam))) {
|
|
1285
|
+
errors.push({ validator: validatorName, message: `Number is less than ${validatorParam}` });
|
|
1286
|
+
}
|
|
1287
|
+
break;
|
|
1281
1288
|
case 'max':
|
|
1282
|
-
if (MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1289
|
+
if (!MaxValidator(fieldValue, parseInt(validatorParam))) {
|
|
1283
1290
|
errors.push({ validator: validatorName, message: `Number is greater than ${validatorParam}` });
|
|
1284
1291
|
}
|
|
1285
1292
|
break;
|
|
@@ -1536,16 +1543,16 @@ const DateSelect = (props) => {
|
|
|
1536
1543
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1537
1544
|
// };
|
|
1538
1545
|
|
|
1539
|
-
var css_248z$
|
|
1540
|
-
var styles$
|
|
1541
|
-
styleInject(css_248z$
|
|
1546
|
+
var css_248z$z = ".Drawer-module_drawer__kdQCk {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 320px;\n overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n position: inherit;\n z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n order: 0;\n left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n order: 2;\n right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n overflow: hidden;\n}";
|
|
1547
|
+
var styles$z = {"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"};
|
|
1548
|
+
styleInject(css_248z$z);
|
|
1542
1549
|
|
|
1543
1550
|
const Drawer = (props) => {
|
|
1544
1551
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1545
1552
|
React.useEffect(() => {
|
|
1546
|
-
document.body.classList.add(styles$
|
|
1553
|
+
document.body.classList.add(styles$z.drawerOpen);
|
|
1547
1554
|
return () => {
|
|
1548
|
-
document.body.classList.remove(styles$
|
|
1555
|
+
document.body.classList.remove(styles$z.drawerOpen);
|
|
1549
1556
|
};
|
|
1550
1557
|
}, []);
|
|
1551
1558
|
const handleClickBackdrop = () => {
|
|
@@ -1559,10 +1566,10 @@ const DrawerContent = (props) => {
|
|
|
1559
1566
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1560
1567
|
const getCssClasses = () => {
|
|
1561
1568
|
const cssClasses = [];
|
|
1562
|
-
cssClasses.push(styles$
|
|
1563
|
-
shadow && cssClasses.push(styles$
|
|
1564
|
-
!!permanent && cssClasses.push(styles$
|
|
1565
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1569
|
+
cssClasses.push(styles$z.drawer);
|
|
1570
|
+
shadow && cssClasses.push(styles$z.shadow);
|
|
1571
|
+
!!permanent && cssClasses.push(styles$z['permanent']);
|
|
1572
|
+
position === 'left' ? cssClasses.push(styles$z['left']) : cssClasses.push(styles$z['right']);
|
|
1566
1573
|
className && cssClasses.push(className);
|
|
1567
1574
|
return cssClasses.filter(css => css).join(' ');
|
|
1568
1575
|
};
|
|
@@ -1576,9 +1583,9 @@ const DrawerContent = (props) => {
|
|
|
1576
1583
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1577
1584
|
};
|
|
1578
1585
|
|
|
1579
|
-
var css_248z$
|
|
1580
|
-
var styles$
|
|
1581
|
-
styleInject(css_248z$
|
|
1586
|
+
var css_248z$y = ".MenuBody-module_menuBody__u4FIQ {\n z-index: 1111;\n margin: 0;\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 10rem;\n padding: 8px 0px;\n font-size: 1rem;\n color: #212529;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border-radius: var(--borderRadius);\n}\n.MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n box-shadow: var(--shadow);\n}";
|
|
1587
|
+
var styles$y = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1588
|
+
styleInject(css_248z$y);
|
|
1582
1589
|
|
|
1583
1590
|
const MenuBody = (props) => {
|
|
1584
1591
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1609,8 +1616,8 @@ const MenuBody = (props) => {
|
|
|
1609
1616
|
}, [menuBodyRef]);
|
|
1610
1617
|
const getCssClasses = () => {
|
|
1611
1618
|
const cssClasses = [];
|
|
1612
|
-
cssClasses.push(styles$
|
|
1613
|
-
shadow && cssClasses.push(styles$
|
|
1619
|
+
cssClasses.push(styles$y.menuBody);
|
|
1620
|
+
shadow && cssClasses.push(styles$y.shadow);
|
|
1614
1621
|
className && cssClasses.push(className);
|
|
1615
1622
|
return cssClasses.filter(css => css).join(' ');
|
|
1616
1623
|
};
|
|
@@ -1622,9 +1629,9 @@ const MenuBody = (props) => {
|
|
|
1622
1629
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1623
1630
|
};
|
|
1624
1631
|
|
|
1625
|
-
var css_248z$
|
|
1626
|
-
var styles$
|
|
1627
|
-
styleInject(css_248z$
|
|
1632
|
+
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1633
|
+
var styles$x = {"menu":"Menu-module_menu__p8QL-"};
|
|
1634
|
+
styleInject(css_248z$x);
|
|
1628
1635
|
|
|
1629
1636
|
const Menu = (props) => {
|
|
1630
1637
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
@@ -1632,7 +1639,7 @@ const Menu = (props) => {
|
|
|
1632
1639
|
const toggleContainerRef = React.useRef(null);
|
|
1633
1640
|
const getCssClasses = () => {
|
|
1634
1641
|
const cssClasses = [];
|
|
1635
|
-
cssClasses.push(styles$
|
|
1642
|
+
cssClasses.push(styles$x.menu);
|
|
1636
1643
|
className && cssClasses.push(className);
|
|
1637
1644
|
return cssClasses.filter(css => css).join(' ');
|
|
1638
1645
|
};
|
|
@@ -1645,17 +1652,17 @@ const Menu = (props) => {
|
|
|
1645
1652
|
React__default["default"].createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1646
1653
|
};
|
|
1647
1654
|
|
|
1648
|
-
var css_248z$
|
|
1649
|
-
var styles$
|
|
1650
|
-
styleInject(css_248z$
|
|
1655
|
+
var css_248z$w = ".MenuItem-module_menuItem__MeBxN {\n display: flex;\n width: 100%;\n padding: 0.25rem 1.5rem;\n clear: both;\n font-weight: 400;\n color: #212529;\n text-align: inherit;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n}\n.MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n margin-bottom: 0;\n font-size: 0.875rem;\n}\n.MenuItem-module_menuItem__MeBxN:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04);\n}";
|
|
1656
|
+
var styles$w = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1657
|
+
styleInject(css_248z$w);
|
|
1651
1658
|
|
|
1652
1659
|
const MenuItem = (props) => {
|
|
1653
1660
|
const { children, onClick, type = 'item' } = props;
|
|
1654
1661
|
const getCssClasses = () => {
|
|
1655
1662
|
const cssClasses = [];
|
|
1656
|
-
cssClasses.push(styles$
|
|
1663
|
+
cssClasses.push(styles$w.menuItem);
|
|
1657
1664
|
if (type === 'header') {
|
|
1658
|
-
cssClasses.push(styles$
|
|
1665
|
+
cssClasses.push(styles$w.menuItemHeader);
|
|
1659
1666
|
}
|
|
1660
1667
|
return cssClasses.filter(css => css).join(' ');
|
|
1661
1668
|
};
|
|
@@ -1671,23 +1678,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1671
1678
|
return (React__default["default"].createElement(React.Fragment, null, children));
|
|
1672
1679
|
};
|
|
1673
1680
|
|
|
1674
|
-
var css_248z$
|
|
1675
|
-
var styles$
|
|
1676
|
-
styleInject(css_248z$
|
|
1681
|
+
var css_248z$v = ".MenuDivider-module_menuItemDivider__oRP-j {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef;\n}";
|
|
1682
|
+
var styles$v = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1683
|
+
styleInject(css_248z$v);
|
|
1677
1684
|
|
|
1678
|
-
const MenuDivider = () => React__default["default"].createElement("div", { className: styles$
|
|
1685
|
+
const MenuDivider = () => React__default["default"].createElement("div", { className: styles$v.menuItemDivider });
|
|
1679
1686
|
|
|
1680
|
-
var css_248z$
|
|
1681
|
-
var styles$
|
|
1682
|
-
styleInject(css_248z$
|
|
1687
|
+
var css_248z$u = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px;\n}";
|
|
1688
|
+
var styles$u = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1689
|
+
styleInject(css_248z$u);
|
|
1683
1690
|
|
|
1684
1691
|
const ExpansionPanelContent = ({ children }) => {
|
|
1685
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
1692
|
+
return (React__default["default"].createElement("div", { className: styles$u.expansionPanelContent }, children));
|
|
1686
1693
|
};
|
|
1687
1694
|
|
|
1688
|
-
var css_248z$
|
|
1689
|
-
var styles$
|
|
1690
|
-
styleInject(css_248z$
|
|
1695
|
+
var css_248z$t = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n cursor: pointer;\n background-color: var(--highlight);\n}";
|
|
1696
|
+
var styles$t = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1697
|
+
styleInject(css_248z$t);
|
|
1691
1698
|
|
|
1692
1699
|
const ExpansionPanelHeader = (props) => {
|
|
1693
1700
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1695,15 +1702,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1695
1702
|
e.stopPropagation();
|
|
1696
1703
|
onClick && onClick(e);
|
|
1697
1704
|
};
|
|
1698
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
1705
|
+
return (React__default["default"].createElement("div", { className: styles$t.expansionPanelHeader, onClick: handleClick },
|
|
1699
1706
|
children,
|
|
1700
1707
|
React__default["default"].createElement("span", { className: "ml-auto text-muted" },
|
|
1701
1708
|
React__default["default"].createElement(Icon, null, isExpanded ? React__default["default"].createElement(ChevronUpSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null)))));
|
|
1702
1709
|
};
|
|
1703
1710
|
|
|
1704
|
-
var css_248z$
|
|
1705
|
-
var styles$
|
|
1706
|
-
styleInject(css_248z$
|
|
1711
|
+
var css_248z$s = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n box-shadow: var(--shadow);\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0;\n}";
|
|
1712
|
+
var styles$s = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1713
|
+
styleInject(css_248z$s);
|
|
1707
1714
|
|
|
1708
1715
|
const ExpansionPanel = (props) => {
|
|
1709
1716
|
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
@@ -1713,11 +1720,11 @@ const ExpansionPanel = (props) => {
|
|
|
1713
1720
|
}, [isExpanded]);
|
|
1714
1721
|
const getCssClasses = () => {
|
|
1715
1722
|
const cssClasses = [];
|
|
1716
|
-
cssClasses.push(styles$
|
|
1723
|
+
cssClasses.push(styles$s.expansionPanel);
|
|
1717
1724
|
if (_isExpanded) {
|
|
1718
|
-
cssClasses.push(styles$
|
|
1725
|
+
cssClasses.push(styles$s.isExpanded);
|
|
1719
1726
|
}
|
|
1720
|
-
shadow && cssClasses.push(styles$
|
|
1727
|
+
shadow && cssClasses.push(styles$s.shadow);
|
|
1721
1728
|
return cssClasses.filter(css => css).join(' ');
|
|
1722
1729
|
};
|
|
1723
1730
|
const handleClickHeader = (event) => {
|
|
@@ -1730,17 +1737,17 @@ const ExpansionPanel = (props) => {
|
|
|
1730
1737
|
React__default["default"].createElement(ExpansionPanelContent, null, children)));
|
|
1731
1738
|
};
|
|
1732
1739
|
|
|
1733
|
-
var css_248z$
|
|
1734
|
-
var styles$
|
|
1735
|
-
styleInject(css_248z$
|
|
1740
|
+
var css_248z$r = ".FloatingActionButton-module_fab__Rw3kd {\n box-shadow: var(--shadow);\n}\n\n.FloatingActionButton-module_fixed__XQOkG {\n position: fixed;\n z-index: 1000;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n top: 16px;\n left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n bottom: 16px;\n left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n top: 64px;\n right: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n bottom: 16px;\n right: 16px;\n}";
|
|
1741
|
+
var styles$r = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
|
|
1742
|
+
styleInject(css_248z$r);
|
|
1736
1743
|
|
|
1737
1744
|
const FloatingActionButton = (props) => {
|
|
1738
1745
|
const { className, icon, color = exports.COLOR.primary, fixed, position = 'rightBottom', size = exports.SIZE.lg, isActive, disabled, onClick } = props;
|
|
1739
1746
|
const getCssClasses = () => {
|
|
1740
1747
|
const cssClasses = [];
|
|
1741
|
-
cssClasses.push(styles$
|
|
1742
|
-
fixed && cssClasses.push(styles$
|
|
1743
|
-
position && fixed && cssClasses.push(styles$
|
|
1748
|
+
cssClasses.push(styles$r.fab);
|
|
1749
|
+
fixed && cssClasses.push(styles$r.fixed);
|
|
1750
|
+
position && fixed && cssClasses.push(styles$r[position]);
|
|
1744
1751
|
className && cssClasses.push(className);
|
|
1745
1752
|
return cssClasses.filter(css => css).join(' ');
|
|
1746
1753
|
};
|
|
@@ -1751,14 +1758,14 @@ const FloatingActionButton = (props) => {
|
|
|
1751
1758
|
return (React__default["default"].createElement(IconButton, { className: getCssClasses(), color: color, size: size, isActive: isActive, disabled: disabled, icon: icon, variant: exports.VARIANT.contained, onClick: handleClick }));
|
|
1752
1759
|
};
|
|
1753
1760
|
|
|
1754
|
-
var css_248z$
|
|
1755
|
-
var styles$
|
|
1756
|
-
styleInject(css_248z$
|
|
1761
|
+
var css_248z$q = ".Link-module_link__YlJQl {\n color: var(--primary);\n text-decoration: underline;\n}\n.Link-module_link__YlJQl:hover {\n color: var(--primary-dark);\n}";
|
|
1762
|
+
var styles$q = {"link":"Link-module_link__YlJQl"};
|
|
1763
|
+
styleInject(css_248z$q);
|
|
1757
1764
|
|
|
1758
1765
|
const Link = (props) => {
|
|
1759
1766
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1760
1767
|
const [status, setStatus] = React.useState(STATUS.NORMAL);
|
|
1761
|
-
const [cssClassName] = useCssClasses([styles$
|
|
1768
|
+
const [cssClassName] = useCssClasses([styles$q.link, className, status]);
|
|
1762
1769
|
const onMouseEnter = () => {
|
|
1763
1770
|
setStatus(STATUS.HOVERED);
|
|
1764
1771
|
};
|
|
@@ -1768,15 +1775,15 @@ const Link = (props) => {
|
|
|
1768
1775
|
return (React__default["default"].createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1769
1776
|
};
|
|
1770
1777
|
|
|
1771
|
-
var css_248z$
|
|
1772
|
-
var styles$
|
|
1773
|
-
styleInject(css_248z$
|
|
1778
|
+
var css_248z$p = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n.LoadingIndicator-module_loadingIndicatorContainer__GS9OG.LoadingIndicator-module_isFixed__WCFNG {\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px;\n}\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
|
|
1779
|
+
var styles$p = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1780
|
+
styleInject(css_248z$p);
|
|
1774
1781
|
|
|
1775
1782
|
const LoadingIndicator = (_a) => {
|
|
1776
1783
|
var rest = __rest(_a, []);
|
|
1777
1784
|
const getCssClasses = () => {
|
|
1778
1785
|
const cssClasses = [];
|
|
1779
|
-
cssClasses.push(styles$
|
|
1786
|
+
cssClasses.push(styles$p.loadingIndicator);
|
|
1780
1787
|
return cssClasses.filter(css => css).join(' ');
|
|
1781
1788
|
};
|
|
1782
1789
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1786,8 +1793,8 @@ const LoadingIndicator = (_a) => {
|
|
|
1786
1793
|
const LoadingIndicatorContainer = ({ children, isFixed }) => {
|
|
1787
1794
|
const getCssClasses = () => {
|
|
1788
1795
|
const cssClasses = [];
|
|
1789
|
-
cssClasses.push(styles$
|
|
1790
|
-
isFixed && cssClasses.push(styles$
|
|
1796
|
+
cssClasses.push(styles$p.loadingIndicatorContainer);
|
|
1797
|
+
isFixed && cssClasses.push(styles$p.isFixed);
|
|
1791
1798
|
return cssClasses.filter(css => css).join(' ');
|
|
1792
1799
|
};
|
|
1793
1800
|
return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1815,45 +1822,45 @@ class LoadingIndicatorService {
|
|
|
1815
1822
|
}
|
|
1816
1823
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1817
1824
|
|
|
1818
|
-
var css_248z$
|
|
1819
|
-
var styles$
|
|
1820
|
-
styleInject(css_248z$
|
|
1825
|
+
var css_248z$o = ".ModalHeader-module_modalHeader__tw-u- {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1rem;\n border-top-left-radius: calc(0.3rem - 1px);\n border-top-right-radius: calc(0.3rem - 1px);\n border-bottom: none;\n align-items: center;\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n margin-bottom: 0;\n line-height: 1.5;\n}";
|
|
1826
|
+
var styles$o = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1827
|
+
styleInject(css_248z$o);
|
|
1821
1828
|
|
|
1822
1829
|
const ModalHeader = (props) => {
|
|
1823
1830
|
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1824
1831
|
const handleClick = () => {
|
|
1825
1832
|
onClose && onClose();
|
|
1826
1833
|
};
|
|
1827
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
1828
|
-
React__default["default"].createElement("h5", { className: styles$
|
|
1834
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$o.modalHeader }, rest),
|
|
1835
|
+
React__default["default"].createElement("h5", { className: styles$o.modalTitle }, children),
|
|
1829
1836
|
isDismissable &&
|
|
1830
1837
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), variant: exports.VARIANT.text, onClick: handleClick })));
|
|
1831
1838
|
};
|
|
1832
1839
|
|
|
1833
|
-
var css_248z$
|
|
1834
|
-
var styles$
|
|
1835
|
-
styleInject(css_248z$
|
|
1840
|
+
var css_248z$n = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem;\n}";
|
|
1841
|
+
var styles$n = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1842
|
+
styleInject(css_248z$n);
|
|
1836
1843
|
|
|
1837
|
-
const ModalBody = ({ children }) => (React__default["default"].createElement("div", { className: styles$
|
|
1844
|
+
const ModalBody = ({ children }) => (React__default["default"].createElement("div", { className: styles$n.modalBody }, children));
|
|
1838
1845
|
|
|
1839
|
-
var css_248z$
|
|
1840
|
-
var styles$
|
|
1841
|
-
styleInject(css_248z$
|
|
1846
|
+
var css_248z$m = ".ModalFooter-module_modalFooter__SNm-f {\n display: flex;\n flex-wrap: wrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n padding: 0.75rem;\n border-bottom-right-radius: calc(0.3rem - 1px);\n border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n margin: 0.25rem;\n}";
|
|
1847
|
+
var styles$m = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1848
|
+
styleInject(css_248z$m);
|
|
1842
1849
|
|
|
1843
|
-
const ModalFooter = ({ children }) => (React__default["default"].createElement("div", { className: styles$
|
|
1850
|
+
const ModalFooter = ({ children }) => (React__default["default"].createElement("div", { className: styles$m.modalFooter }, children));
|
|
1844
1851
|
|
|
1845
|
-
var css_248z$
|
|
1846
|
-
var styles$
|
|
1847
|
-
styleInject(css_248z$
|
|
1852
|
+
var css_248z$l = ".Modal-module_modal__HMxWV {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n z-index: 1111 !important;\n border-radius: var(--borderRadius);\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_sm__CsR6U {\n max-width: 300px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_md__lNggx {\n max-width: 500px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_lg__6dtT2 {\n max-width: 1140px;\n}\n@media (min-width: 576px) {\n .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n max-width: 600px;\n }\n}\n\n.Modal-module_modalDialog__fNqyK {\n position: relative;\n width: auto;\n pointer-events: none;\n}\n\n.Modal-module_modalDialogCentered__sa2wv {\n min-height: calc(100% - 3.5rem);\n display: flex;\n align-items: center;\n}\n\n.Modal-module_modalContent__9wAwB {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n pointer-events: auto;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 0.3rem;\n box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);\n outline: 0;\n}\n@media (min-width: 576px) {\n .Modal-module_modalContent__9wAwB {\n max-width: 500px;\n margin: 1.75rem auto;\n }\n}\n\n.Modal-module_fullscreen__iepGa {\n width: 100% !important;\n height: 100% !important;\n max-height: 100% !important;\n margin: 0;\n padding: 0;\n}\n.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n height: auto;\n min-height: 100%;\n max-height: 100%;\n border-radius: 0;\n overflow: auto;\n max-width: 100%;\n}\n@media (min-width: 320px) {\n .Modal-module_fullscreen__iepGa {\n max-width: 100% !important;\n }\n}";
|
|
1853
|
+
var styles$l = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module_modal-dialog__U2wGf","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
|
|
1854
|
+
styleInject(css_248z$l);
|
|
1848
1855
|
|
|
1849
1856
|
const Modal = (props) => {
|
|
1850
1857
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1851
1858
|
const getCssClass = () => {
|
|
1852
1859
|
const cssClasses = [];
|
|
1853
|
-
cssClasses.push(styles$
|
|
1854
|
-
cssClasses.push(styles$
|
|
1855
|
-
fullScreen && cssClasses.push(styles$
|
|
1856
|
-
size && cssClasses.push(styles$
|
|
1860
|
+
cssClasses.push(styles$l.modalDialog);
|
|
1861
|
+
cssClasses.push(styles$l.modalDialogCentered);
|
|
1862
|
+
fullScreen && cssClasses.push(styles$l.fullscreen);
|
|
1863
|
+
size && cssClasses.push(styles$l[size]);
|
|
1857
1864
|
className && cssClasses.push(className);
|
|
1858
1865
|
return cssClasses.filter(r => r).join(' ');
|
|
1859
1866
|
};
|
|
@@ -1867,9 +1874,9 @@ const Modal = (props) => {
|
|
|
1867
1874
|
onBackdropClick && onBackdropClick();
|
|
1868
1875
|
};
|
|
1869
1876
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1870
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1877
|
+
React__default["default"].createElement("div", { className: styles$l.modal },
|
|
1871
1878
|
React__default["default"].createElement("div", { className: getCssClass() },
|
|
1872
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1879
|
+
React__default["default"].createElement("div", { className: styles$l.modalContent },
|
|
1873
1880
|
header &&
|
|
1874
1881
|
React__default["default"].createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1875
1882
|
React__default["default"].createElement(ModalBody, null, children),
|
|
@@ -1994,29 +2001,88 @@ const NumberSelect = (props) => {
|
|
|
1994
2001
|
return (React__default["default"].createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
1995
2002
|
};
|
|
1996
2003
|
|
|
1997
|
-
var css_248z$
|
|
1998
|
-
var styles$
|
|
1999
|
-
styleInject(css_248z$
|
|
2004
|
+
var css_248z$k = ".Tooltip-module_tooltipContainer__9ZWx3 {\n display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n left: -4px;\n}";
|
|
2005
|
+
var styles$k = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2006
|
+
styleInject(css_248z$k);
|
|
2007
|
+
|
|
2008
|
+
const Tooltip = (props) => {
|
|
2009
|
+
const { children, text, placement = 'bottom' } = props;
|
|
2010
|
+
const [show, setShow] = React.useState(false);
|
|
2011
|
+
const refChild = React.useRef();
|
|
2012
|
+
const refTooltip = React.useRef();
|
|
2013
|
+
React.useEffect(() => {
|
|
2014
|
+
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2015
|
+
// TODO - extract to own component?
|
|
2016
|
+
core.createPopper(refChild.current, refTooltip.current, {
|
|
2017
|
+
placement: placement,
|
|
2018
|
+
modifiers: [
|
|
2019
|
+
{
|
|
2020
|
+
name: 'offset',
|
|
2021
|
+
options: { offset: [0, 8] }
|
|
2022
|
+
},
|
|
2023
|
+
]
|
|
2024
|
+
});
|
|
2025
|
+
}
|
|
2026
|
+
}, [show]);
|
|
2027
|
+
const handleMouseOver = () => {
|
|
2028
|
+
setShow(true);
|
|
2029
|
+
};
|
|
2030
|
+
const handleMouseLeave = () => {
|
|
2031
|
+
setShow(false);
|
|
2032
|
+
};
|
|
2033
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2034
|
+
React__default["default"].createElement("div", { className: styles$k.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
|
|
2035
|
+
onMouseOver: handleMouseOver,
|
|
2036
|
+
onMouseLeave: handleMouseLeave,
|
|
2037
|
+
})),
|
|
2038
|
+
show && text &&
|
|
2039
|
+
React__default["default"].createElement("div", { className: styles$k.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2040
|
+
text,
|
|
2041
|
+
React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2042
|
+
};
|
|
2043
|
+
|
|
2044
|
+
var css_248z$j = ".ProgressBar-module_progressBarContainer__vtbBw {\n display: flex;\n height: var(--progress-height);\n overflow: hidden;\n background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n color: var(--progress-bar-color);\n text-align: center;\n white-space: nowrap;\n transition: var(--progress-bar-transition);\n background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n width: 100%;\n height: 100%;\n animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n 0% {\n transform: translateX(0) scaleX(0);\n }\n 40% {\n transform: translateX(0) scaleX(0.4);\n }\n 100% {\n transform: translateX(100%) scaleX(0.5);\n }\n}";
|
|
2045
|
+
var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2046
|
+
styleInject(css_248z$j);
|
|
2000
2047
|
|
|
2001
2048
|
const ProgressBar = (props) => {
|
|
2002
2049
|
const { className, color = exports.COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
2050
|
+
const [model, setModel] = React.useState();
|
|
2051
|
+
React.useEffect(() => {
|
|
2052
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2053
|
+
}, [color]);
|
|
2054
|
+
React.useEffect(() => {
|
|
2055
|
+
let newValue = value;
|
|
2056
|
+
if (value && value < 0) {
|
|
2057
|
+
newValue = 0;
|
|
2058
|
+
}
|
|
2059
|
+
if (value && value > 100) {
|
|
2060
|
+
newValue = 100;
|
|
2061
|
+
}
|
|
2062
|
+
setModel(newValue);
|
|
2063
|
+
}, [value]);
|
|
2003
2064
|
const getCssClasses = () => {
|
|
2004
2065
|
const cssClasses = [];
|
|
2005
|
-
cssClasses.push(styles$
|
|
2066
|
+
cssClasses.push(styles$j.progressBarContainer);
|
|
2006
2067
|
className && cssClasses.push(className);
|
|
2007
2068
|
return cssClasses.filter(r => r).join(' ');
|
|
2008
2069
|
};
|
|
2009
2070
|
const getCssClassesBar = () => {
|
|
2010
2071
|
const cssClasses = [];
|
|
2011
|
-
cssClasses.push(styles$
|
|
2012
|
-
indeterminate && cssClasses.push(styles$
|
|
2072
|
+
cssClasses.push(styles$j.progressBar);
|
|
2073
|
+
indeterminate && cssClasses.push(styles$j['indeterminate']);
|
|
2013
2074
|
return cssClasses.filter(r => r).join(' ');
|
|
2014
2075
|
};
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2076
|
+
const getStyle = () => {
|
|
2077
|
+
let width = model && model >= 0 ? model : 0;
|
|
2078
|
+
if (indeterminate) {
|
|
2079
|
+
width = 100;
|
|
2080
|
+
}
|
|
2081
|
+
return `${width}%`;
|
|
2082
|
+
};
|
|
2083
|
+
return (React__default["default"].createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2084
|
+
React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2085
|
+
React__default["default"].createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2020
2086
|
};
|
|
2021
2087
|
|
|
2022
2088
|
class SidebarItemModel {
|
|
@@ -2096,25 +2162,25 @@ const Sidebar = (props) => {
|
|
|
2096
2162
|
!item.isCollapsed && item.items && item.items.length > 0 && (React__default["default"].createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React__default["default"].createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
2097
2163
|
};
|
|
2098
2164
|
|
|
2099
|
-
var css_248z$
|
|
2100
|
-
var styles$
|
|
2101
|
-
styleInject(css_248z$
|
|
2165
|
+
var css_248z$i = ".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}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_primary__ZBOTN {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_accent__0MnFy {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_secondary__s8-ez {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_light__Vrd7o {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_dark__U-5io {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Snackbar-module_text__G5r5D {\n width: 100%;\n padding: 8px 0;\n}\n\n.Snackbar-module_action__vus2Y {\n margin-left: auto;\n}\n.Snackbar-module_action__vus2Y:hover {\n cursor: pointer;\n}\n\n@keyframes Snackbar-module_bounceIn__E47iD {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 0.9;\n }\n 80% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}";
|
|
2166
|
+
var styles$i = {"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"};
|
|
2167
|
+
styleInject(css_248z$i);
|
|
2102
2168
|
|
|
2103
2169
|
const Snackbar = (props) => {
|
|
2104
2170
|
const { children, color = exports.COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
2105
2171
|
const getCssClasses = () => {
|
|
2106
2172
|
const cssClasses = [];
|
|
2107
|
-
cssClasses.push(styles$
|
|
2173
|
+
cssClasses.push(styles$i.snackbar);
|
|
2108
2174
|
cssClasses.push(`shadow-lg`);
|
|
2109
|
-
cssClasses.push(styles$
|
|
2175
|
+
cssClasses.push(styles$i[color]);
|
|
2110
2176
|
return cssClasses.filter(css => css).join(' ');
|
|
2111
2177
|
};
|
|
2112
2178
|
const handleClickAction = (e) => {
|
|
2113
2179
|
onOk && onOk(e);
|
|
2114
2180
|
};
|
|
2115
2181
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2116
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2117
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2182
|
+
React__default["default"].createElement("div", { className: styles$i.text }, children),
|
|
2183
|
+
React__default["default"].createElement("div", { className: styles$i.action + ' text-accent', onClick: handleClickAction },
|
|
2118
2184
|
React__default["default"].createElement("span", null, actionText))));
|
|
2119
2185
|
};
|
|
2120
2186
|
|
|
@@ -2152,29 +2218,29 @@ class SnackbarService {
|
|
|
2152
2218
|
}
|
|
2153
2219
|
const snackbarService = new SnackbarService();
|
|
2154
2220
|
|
|
2155
|
-
var css_248z$
|
|
2156
|
-
var styles$
|
|
2157
|
-
styleInject(css_248z$
|
|
2221
|
+
var css_248z$h = ".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}";
|
|
2222
|
+
var styles$h = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2223
|
+
styleInject(css_248z$h);
|
|
2158
2224
|
|
|
2159
2225
|
const SpeedDialActions = (props) => {
|
|
2160
2226
|
const { children } = props;
|
|
2161
2227
|
const getCssClasses = () => {
|
|
2162
2228
|
const cssClasses = [];
|
|
2163
|
-
cssClasses.push(styles$
|
|
2229
|
+
cssClasses.push(styles$h.speedDialActions);
|
|
2164
2230
|
return cssClasses.filter(css => css).join(' ');
|
|
2165
2231
|
};
|
|
2166
2232
|
return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
|
|
2167
2233
|
};
|
|
2168
2234
|
|
|
2169
|
-
var css_248z$
|
|
2170
|
-
var styles$
|
|
2171
|
-
styleInject(css_248z$
|
|
2235
|
+
var css_248z$g = ".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}";
|
|
2236
|
+
var styles$g = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2237
|
+
styleInject(css_248z$g);
|
|
2172
2238
|
|
|
2173
2239
|
const SpeedDial = (props) => {
|
|
2174
2240
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
2175
2241
|
const getCssClasses = () => {
|
|
2176
2242
|
const cssClasses = [];
|
|
2177
|
-
cssClasses.push(styles$
|
|
2243
|
+
cssClasses.push(styles$g.speedDial);
|
|
2178
2244
|
className && cssClasses.push(className);
|
|
2179
2245
|
return cssClasses.filter(css => css).join(' ');
|
|
2180
2246
|
};
|
|
@@ -2191,15 +2257,15 @@ const SpeedDial = (props) => {
|
|
|
2191
2257
|
React__default["default"].createElement(SpeedDialActions, null, children)));
|
|
2192
2258
|
};
|
|
2193
2259
|
|
|
2194
|
-
var css_248z$
|
|
2195
|
-
var styles$
|
|
2196
|
-
styleInject(css_248z$
|
|
2260
|
+
var css_248z$f = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2261
|
+
var styles$f = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2262
|
+
styleInject(css_248z$f);
|
|
2197
2263
|
|
|
2198
2264
|
const SpeedDialAction = (props) => {
|
|
2199
2265
|
const { icon, color = exports.COLOR.light, onClick, className } = props;
|
|
2200
2266
|
const getCssClasses = () => {
|
|
2201
2267
|
const cssClasses = [];
|
|
2202
|
-
cssClasses.push(styles$
|
|
2268
|
+
cssClasses.push(styles$f.speedDialAction);
|
|
2203
2269
|
className && cssClasses.push(className);
|
|
2204
2270
|
return cssClasses.filter(css => css).join(' ');
|
|
2205
2271
|
};
|
|
@@ -2216,15 +2282,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2216
2282
|
return (React__default["default"].createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2217
2283
|
};
|
|
2218
2284
|
|
|
2219
|
-
var css_248z$
|
|
2220
|
-
var styles$
|
|
2221
|
-
styleInject(css_248z$
|
|
2285
|
+
var css_248z$e = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2286
|
+
var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2287
|
+
styleInject(css_248z$e);
|
|
2222
2288
|
|
|
2223
2289
|
const StepperActions = (props) => {
|
|
2224
2290
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2225
2291
|
const getCssClasses = () => {
|
|
2226
2292
|
const cssClasses = [];
|
|
2227
|
-
cssClasses.push(styles$
|
|
2293
|
+
cssClasses.push(styles$e.stepperActions);
|
|
2228
2294
|
className && cssClasses.push(className);
|
|
2229
2295
|
return cssClasses.filter(css => css).join(' ');
|
|
2230
2296
|
};
|
|
@@ -2241,31 +2307,31 @@ const StepPanel = (props) => {
|
|
|
2241
2307
|
return (React__default["default"].createElement("div", { className: "steppanel" }, children));
|
|
2242
2308
|
};
|
|
2243
2309
|
|
|
2244
|
-
var css_248z$
|
|
2245
|
-
var styles$
|
|
2246
|
-
styleInject(css_248z$
|
|
2310
|
+
var css_248z$d = ".StepConnector-module_stepConnector__A7A-7 {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px;\n}\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}\n.StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n border-color: var(--primary);\n}\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n border-top-style: solid;\n border-top-width: 1px;\n}";
|
|
2311
|
+
var styles$d = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2312
|
+
styleInject(css_248z$d);
|
|
2247
2313
|
|
|
2248
2314
|
const StepConnector = (props) => {
|
|
2249
2315
|
const { isActive, isHorizontal = true } = props;
|
|
2250
2316
|
const getCssClassesConnector = () => {
|
|
2251
2317
|
const cssClasses = [];
|
|
2252
|
-
cssClasses.push(styles$
|
|
2318
|
+
cssClasses.push(styles$d.stepConnector);
|
|
2253
2319
|
return cssClasses.filter(css => css).join(' ');
|
|
2254
2320
|
};
|
|
2255
2321
|
const getCssClassesLine = () => {
|
|
2256
2322
|
const cssClasses = [];
|
|
2257
|
-
cssClasses.push(styles$
|
|
2258
|
-
isActive && cssClasses.push(styles$
|
|
2259
|
-
isHorizontal && cssClasses.push(styles$
|
|
2323
|
+
cssClasses.push(styles$d.stepConnectorLine);
|
|
2324
|
+
isActive && cssClasses.push(styles$d['isActive']);
|
|
2325
|
+
isHorizontal && cssClasses.push(styles$d.stepConnectorLineHorizontal);
|
|
2260
2326
|
return cssClasses.filter(css => css).join(' ');
|
|
2261
2327
|
};
|
|
2262
2328
|
return (React__default["default"].createElement("div", { className: getCssClassesConnector() },
|
|
2263
2329
|
React__default["default"].createElement("div", { className: getCssClassesLine() })));
|
|
2264
2330
|
};
|
|
2265
2331
|
|
|
2266
|
-
var css_248z$
|
|
2267
|
-
var styles$
|
|
2268
|
-
styleInject(css_248z$
|
|
2332
|
+
var css_248z$c = ".Stepper-module_stepper__V6odG {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px;\n}\n.Stepper-module_stepper__V6odG.Stepper-module_isHorizontal__Q-3Wu {\n overflow-x: auto;\n}";
|
|
2333
|
+
var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2334
|
+
styleInject(css_248z$c);
|
|
2269
2335
|
|
|
2270
2336
|
const Stepper = (props) => {
|
|
2271
2337
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2353,8 +2419,8 @@ const Stepper = (props) => {
|
|
|
2353
2419
|
};
|
|
2354
2420
|
const getCssClasses = () => {
|
|
2355
2421
|
const cssClasses = [];
|
|
2356
|
-
cssClasses.push(styles$
|
|
2357
|
-
isHorizontal && cssClasses.push(styles$
|
|
2422
|
+
cssClasses.push(styles$c.stepper);
|
|
2423
|
+
isHorizontal && cssClasses.push(styles$c['isHorizontal']);
|
|
2358
2424
|
return cssClasses.filter(css => css).join(' ');
|
|
2359
2425
|
};
|
|
2360
2426
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, steps &&
|
|
@@ -2367,17 +2433,17 @@ const Stepper = (props) => {
|
|
|
2367
2433
|
React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2368
2434
|
};
|
|
2369
2435
|
|
|
2370
|
-
var css_248z$
|
|
2371
|
-
var styles$
|
|
2372
|
-
styleInject(css_248z$
|
|
2436
|
+
var css_248z$b = ".Typography-module_typography__sw-td {\n font-family: var(--fontFamily);\n}\n.Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\nh1 {\n font-size: calc(1.375rem + 1.5vw);\n}\n\nh2 {\n font-size: calc(1.325rem + 0.9vw);\n}\n\nh3 {\n font-size: calc(1.3rem + 0.6vw);\n}\n\nh4 {\n font-size: calc(1.275rem + 0.3vw);\n}\n\nh5 {\n font-size: 1.25rem;\n}\n\nh6 {\n font-size: 1rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 500 !important;\n margin-top: 0;\n margin-bottom: 0.5rem;\n line-height: 1.2;\n}";
|
|
2437
|
+
var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
|
|
2438
|
+
styleInject(css_248z$b);
|
|
2373
2439
|
|
|
2374
2440
|
const Wrapper = (props) => {
|
|
2375
2441
|
const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
|
|
2376
2442
|
const getCssClasses = () => {
|
|
2377
2443
|
const cssClasses = [];
|
|
2378
|
-
cssClasses.push(styles$
|
|
2379
|
-
cssClasses.push(styles$
|
|
2380
|
-
wrap && cssClasses.push(styles$
|
|
2444
|
+
cssClasses.push(styles$b.typography);
|
|
2445
|
+
cssClasses.push(styles$b.as);
|
|
2446
|
+
wrap && cssClasses.push(styles$b.wrap);
|
|
2381
2447
|
className && cssClasses.push(className);
|
|
2382
2448
|
return cssClasses.filter(css => css).join(' ');
|
|
2383
2449
|
};
|
|
@@ -2388,9 +2454,9 @@ const Typography = (_a) => {
|
|
|
2388
2454
|
return (React__default["default"].createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2389
2455
|
};
|
|
2390
2456
|
|
|
2391
|
-
var css_248z$
|
|
2392
|
-
var styles$
|
|
2393
|
-
styleInject(css_248z$
|
|
2457
|
+
var css_248z$a = ".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}\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\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}\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}\n.Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n width: 18px !important;\n height: 18px !important;\n}\n\n.Step-module_stepIconCircle__hnxIV svg {\n width: 24px;\n height: 24px;\n}\n\n.Step-module_stepValue__B0-xv {\n position: absolute;\n color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n color: var(--primary-contrast-text);\n}";
|
|
2458
|
+
var styles$a = {"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"};
|
|
2459
|
+
styleInject(css_248z$a);
|
|
2394
2460
|
|
|
2395
2461
|
const Step = (props) => {
|
|
2396
2462
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2402,29 +2468,29 @@ const Step = (props) => {
|
|
|
2402
2468
|
};
|
|
2403
2469
|
const getCssClasses = () => {
|
|
2404
2470
|
const cssClasses = [];
|
|
2405
|
-
cssClasses.push(styles$
|
|
2406
|
-
label && showLabel && cssClasses.push(styles$
|
|
2407
|
-
isDisabled && cssClasses.push(styles$
|
|
2471
|
+
cssClasses.push(styles$a.stepWrapper);
|
|
2472
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2473
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2408
2474
|
className && cssClasses.push(className);
|
|
2409
2475
|
return cssClasses.filter(css => css).join(' ');
|
|
2410
2476
|
};
|
|
2411
2477
|
const getCssClassesStep = () => {
|
|
2412
2478
|
const cssClasses = [];
|
|
2413
|
-
cssClasses.push(styles$
|
|
2414
|
-
label && showLabel && cssClasses.push(styles$
|
|
2415
|
-
isDisabled && cssClasses.push(styles$
|
|
2479
|
+
cssClasses.push(styles$a.step);
|
|
2480
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2481
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2416
2482
|
return cssClasses.filter(css => css).join(' ');
|
|
2417
2483
|
};
|
|
2418
2484
|
const getCssClassesStepValue = () => {
|
|
2419
2485
|
const cssClasses = [];
|
|
2420
|
-
cssClasses.push(styles$
|
|
2486
|
+
cssClasses.push(styles$a.stepValue);
|
|
2421
2487
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2422
|
-
isActive && cssClasses.push(styles$
|
|
2488
|
+
isActive && cssClasses.push(styles$a.stepValue['isActive']);
|
|
2423
2489
|
return cssClasses.filter(css => css).join(' ');
|
|
2424
2490
|
};
|
|
2425
2491
|
return (React__default["default"].createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2426
2492
|
React__default["default"].createElement("div", { className: getCssClassesStep() },
|
|
2427
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
2493
|
+
React__default["default"].createElement(Icon, { className: styles$a.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? exports.COLOR.primary : exports.COLOR.secondary },
|
|
2428
2494
|
React__default["default"].createElement(CircleSolidIcon, null)),
|
|
2429
2495
|
React__default["default"].createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2430
2496
|
React__default["default"].createElement(Icon, null,
|
|
@@ -2435,22 +2501,83 @@ const Step = (props) => {
|
|
|
2435
2501
|
React__default["default"].createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2436
2502
|
};
|
|
2437
2503
|
|
|
2438
|
-
var css_248z$
|
|
2439
|
-
var styles$
|
|
2504
|
+
var css_248z$9 = "@keyframes SkeletonAvatar-module_skeleton-loading__eM-ZU {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonAvatar-module_skeletonAvatar__03QnJ {\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background-color: var(--secondary);\n animation: SkeletonAvatar-module_skeleton-loading__eM-ZU 1s linear infinite alternate;\n}";
|
|
2505
|
+
var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","skeleton-loading":"SkeletonAvatar-module_skeleton-loading__eM-ZU"};
|
|
2506
|
+
styleInject(css_248z$9);
|
|
2507
|
+
|
|
2508
|
+
const SkeletonAvatar = (props) => {
|
|
2509
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2510
|
+
const getCssClasses = () => {
|
|
2511
|
+
const cssClasses = [];
|
|
2512
|
+
cssClasses.push(styles$9.skeletonAvatar);
|
|
2513
|
+
className && cssClasses.push(className);
|
|
2514
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2515
|
+
};
|
|
2516
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2517
|
+
};
|
|
2518
|
+
|
|
2519
|
+
var css_248z$8 = "@keyframes SkeletonText-module_skeleton-loading__EYFfJ {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonText-module_skeletonText__E5NCO {\n width: 100%;\n height: 0.7rem;\n margin-bottom: 0.5rem;\n border-radius: 0.25rem;\n animation: SkeletonText-module_skeleton-loading__EYFfJ 1s linear infinite alternate;\n}";
|
|
2520
|
+
var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skeleton-loading":"SkeletonText-module_skeleton-loading__EYFfJ"};
|
|
2521
|
+
styleInject(css_248z$8);
|
|
2522
|
+
|
|
2523
|
+
const SkeletonText = (props) => {
|
|
2524
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2525
|
+
const getCssClasses = () => {
|
|
2526
|
+
const cssClasses = [];
|
|
2527
|
+
cssClasses.push(styles$8.skeletonText);
|
|
2528
|
+
className && cssClasses.push(className);
|
|
2529
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2530
|
+
};
|
|
2531
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2532
|
+
};
|
|
2533
|
+
|
|
2534
|
+
var css_248z$7 = "@keyframes SkeletonFooter-module_skeleton-loading__OEErv {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonFooter-module_skeletonFooter__u2Gxc {\n width: 30%;\n height: 0.7rem;\n border-radius: 0.25rem;\n animation: SkeletonFooter-module_skeleton-loading__OEErv 1s linear infinite alternate;\n}";
|
|
2535
|
+
var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","skeleton-loading":"SkeletonFooter-module_skeleton-loading__OEErv"};
|
|
2536
|
+
styleInject(css_248z$7);
|
|
2537
|
+
|
|
2538
|
+
const SkeletonFooter = (props) => {
|
|
2539
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2540
|
+
const getCssClasses = () => {
|
|
2541
|
+
const cssClasses = [];
|
|
2542
|
+
cssClasses.push(styles$7.skeletonFooter);
|
|
2543
|
+
className && cssClasses.push(className);
|
|
2544
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2545
|
+
};
|
|
2546
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2547
|
+
};
|
|
2548
|
+
|
|
2549
|
+
var css_248z$6 = "@keyframes SkeletonImage-module_skeleton-loading__04lJ7 {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonImage-module_skeletonImage__2EwDG {\n height: 10rem;\n margin: 0.5rem 0;\n border-radius: 0.75rem;\n animation: SkeletonImage-module_skeleton-loading__04lJ7 1s linear infinite alternate;\n}\n\n.SkeletonImage-module_div__tqqrB {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: auto;\n border-radius: 0.75rem;\n border-color: none;\n}";
|
|
2550
|
+
var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","skeleton-loading":"SkeletonImage-module_skeleton-loading__04lJ7","div":"SkeletonImage-module_div__tqqrB"};
|
|
2440
2551
|
styleInject(css_248z$6);
|
|
2441
2552
|
|
|
2553
|
+
const SkeletonImage = (props) => {
|
|
2554
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2555
|
+
const getCssClasses = () => {
|
|
2556
|
+
const cssClasses = [];
|
|
2557
|
+
cssClasses.push(styles$6.skeletonImage);
|
|
2558
|
+
className && cssClasses.push(className);
|
|
2559
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2560
|
+
};
|
|
2561
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2562
|
+
React__default["default"].createElement("div", { className: styles$6.img })));
|
|
2563
|
+
};
|
|
2564
|
+
|
|
2565
|
+
var css_248z$5 = ".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}\n.Table-module_table__DHKNv thead {\n vertical-align: bottom;\n}\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}\n.Table-module_table__DHKNv > :not(:first-child) {\n border-top: 2px solid currentColor;\n}\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\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\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\n.Table-module_tableResponsive__ykttB {\n overflow-x: auto;\n}";
|
|
2566
|
+
var styles$5 = {"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"};
|
|
2567
|
+
styleInject(css_248z$5);
|
|
2568
|
+
|
|
2442
2569
|
const Table = (props) => {
|
|
2443
2570
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2444
2571
|
const getCssClasses = () => {
|
|
2445
2572
|
const cssClasses = [];
|
|
2446
|
-
cssClasses.push(styles$
|
|
2447
|
-
bordered && cssClasses.push(styles$
|
|
2448
|
-
striped && cssClasses.push(styles$
|
|
2449
|
-
hover && cssClasses.push(styles$
|
|
2573
|
+
cssClasses.push(styles$5.table);
|
|
2574
|
+
bordered && cssClasses.push(styles$5['bordered']);
|
|
2575
|
+
striped && cssClasses.push(styles$5['striped']);
|
|
2576
|
+
hover && cssClasses.push(styles$5['hover']);
|
|
2450
2577
|
className && cssClasses.push(className);
|
|
2451
2578
|
return cssClasses.filter(css => css).join(' ');
|
|
2452
2579
|
};
|
|
2453
|
-
return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React__default["default"].createElement("div", { className: styles$
|
|
2580
|
+
return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React__default["default"].createElement("div", { className: styles$5.tableResponsive }, children) },
|
|
2454
2581
|
React__default["default"].createElement("table", { className: getCssClasses() }, children)));
|
|
2455
2582
|
};
|
|
2456
2583
|
|
|
@@ -2483,16 +2610,16 @@ const TableCell = (props) => {
|
|
|
2483
2610
|
React__default["default"].createElement("td", Object.assign({}, rest), children)) }, children));
|
|
2484
2611
|
};
|
|
2485
2612
|
|
|
2486
|
-
var css_248z$
|
|
2487
|
-
var styles$
|
|
2488
|
-
styleInject(css_248z$
|
|
2613
|
+
var css_248z$4 = ".TabIndicator-module_tabIndicator__jSJhH {\n bottom: 0;\n height: 2px;\n position: absolute;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_primary__Q5jEo {\n background-color: var(--primary);\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_accent__qbgIG {\n background-color: var(--accent);\n}";
|
|
2614
|
+
var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
|
|
2615
|
+
styleInject(css_248z$4);
|
|
2489
2616
|
|
|
2490
2617
|
const TabIndicator = (props) => {
|
|
2491
2618
|
const { color = exports.COLOR.primary, width, amount, index } = props;
|
|
2492
2619
|
const getCssClasses = () => {
|
|
2493
2620
|
const cssClasses = [];
|
|
2494
|
-
cssClasses.push(styles$
|
|
2495
|
-
cssClasses.push(styles$
|
|
2621
|
+
cssClasses.push(styles$4.tabIndicator);
|
|
2622
|
+
cssClasses.push(styles$4[color]);
|
|
2496
2623
|
return cssClasses.filter(css => css).join(' ');
|
|
2497
2624
|
};
|
|
2498
2625
|
return (React__default["default"].createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2501,9 +2628,9 @@ const TabIndicator = (props) => {
|
|
|
2501
2628
|
} }));
|
|
2502
2629
|
};
|
|
2503
2630
|
|
|
2504
|
-
var css_248z$
|
|
2505
|
-
var styles$
|
|
2506
|
-
styleInject(css_248z$
|
|
2631
|
+
var css_248z$3 = ".Tabs-module_tabs__YyRTZ {\n display: flex;\n position: relative;\n}";
|
|
2632
|
+
var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
2633
|
+
styleInject(css_248z$3);
|
|
2507
2634
|
|
|
2508
2635
|
const Tabs = (props) => {
|
|
2509
2636
|
const { children, className, fixed, color, indicatorColor, onChange, value } = props;
|
|
@@ -2518,7 +2645,7 @@ const Tabs = (props) => {
|
|
|
2518
2645
|
}, [children, value]);
|
|
2519
2646
|
const getCssClasses = () => {
|
|
2520
2647
|
const cssClasses = [];
|
|
2521
|
-
cssClasses.push(styles$
|
|
2648
|
+
cssClasses.push(styles$3.tabs);
|
|
2522
2649
|
className && cssClasses.push(className);
|
|
2523
2650
|
return cssClasses.filter(css => css).join(' ');
|
|
2524
2651
|
};
|
|
@@ -2542,15 +2669,15 @@ const Tabs = (props) => {
|
|
|
2542
2669
|
React__default["default"].createElement(TabIndicator, { color: indicatorColor, width: (100 / React__default["default"].Children.toArray(children).length) + '%', index: selectedIndex, amount: React__default["default"].Children.toArray(children).length }))));
|
|
2543
2670
|
};
|
|
2544
2671
|
|
|
2545
|
-
var css_248z$
|
|
2546
|
-
var styles$
|
|
2547
|
-
styleInject(css_248z$
|
|
2672
|
+
var css_248z$2 = ".Tab-module_tab__Q8w1f {\n padding: 6px 12px;\n overflow: hidden;\n position: relative;\n font-size: 0.875rem;\n min-width: 72px;\n box-sizing: border-box;\n min-height: 48px;\n text-align: center;\n font-weight: 500;\n line-height: 1.75;\n white-space: normal;\n letter-spacing: 0.02857em;\n text-transform: uppercase;\n border-radius: 0;\n flex-grow: 1;\n flex-basis: 0;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
2673
|
+
var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
|
|
2674
|
+
styleInject(css_248z$2);
|
|
2548
2675
|
|
|
2549
2676
|
const Tab = (props) => {
|
|
2550
2677
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2551
2678
|
const getCssClasses = () => {
|
|
2552
2679
|
const cssClasses = [];
|
|
2553
|
-
cssClasses.push(styles$
|
|
2680
|
+
cssClasses.push(styles$2.tab);
|
|
2554
2681
|
if (isActive) {
|
|
2555
2682
|
cssClasses.push(`show active`);
|
|
2556
2683
|
}
|
|
@@ -2565,46 +2692,6 @@ const TabPanel = (props) => {
|
|
|
2565
2692
|
return (React__default["default"].createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2566
2693
|
};
|
|
2567
2694
|
|
|
2568
|
-
var css_248z$2 = ".Tooltip-module_tooltipContainer__9ZWx3 {\n display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n left: -4px;\n}";
|
|
2569
|
-
var styles$2 = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2570
|
-
styleInject(css_248z$2);
|
|
2571
|
-
|
|
2572
|
-
const Tooltip = (props) => {
|
|
2573
|
-
const { children, text, placement = 'bottom' } = props;
|
|
2574
|
-
const [show, setShow] = React.useState(false);
|
|
2575
|
-
const refChild = React.useRef();
|
|
2576
|
-
const refTooltip = React.useRef();
|
|
2577
|
-
React.useEffect(() => {
|
|
2578
|
-
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2579
|
-
// TODO - extract to own component?
|
|
2580
|
-
core.createPopper(refChild.current, refTooltip.current, {
|
|
2581
|
-
placement: placement,
|
|
2582
|
-
modifiers: [
|
|
2583
|
-
{
|
|
2584
|
-
name: 'offset',
|
|
2585
|
-
options: { offset: [0, 8] }
|
|
2586
|
-
},
|
|
2587
|
-
]
|
|
2588
|
-
});
|
|
2589
|
-
}
|
|
2590
|
-
}, [show]);
|
|
2591
|
-
const handleMouseOver = () => {
|
|
2592
|
-
setShow(true);
|
|
2593
|
-
};
|
|
2594
|
-
const handleMouseLeave = () => {
|
|
2595
|
-
setShow(false);
|
|
2596
|
-
};
|
|
2597
|
-
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2598
|
-
React__default["default"].createElement("div", { className: styles$2.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
|
|
2599
|
-
onMouseOver: handleMouseOver,
|
|
2600
|
-
onMouseLeave: handleMouseLeave,
|
|
2601
|
-
})),
|
|
2602
|
-
show && text &&
|
|
2603
|
-
React__default["default"].createElement("div", { className: styles$2.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2604
|
-
text,
|
|
2605
|
-
React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2606
|
-
};
|
|
2607
|
-
|
|
2608
2695
|
const HourSelect = (props) => {
|
|
2609
2696
|
const { className, value = 0, id, name, disabled, onChange } = props;
|
|
2610
2697
|
const [newValue, setNewValue] = React.useState(value);
|
|
@@ -2869,6 +2956,7 @@ exports.MenuDivider = MenuDivider;
|
|
|
2869
2956
|
exports.MenuItem = MenuItem;
|
|
2870
2957
|
exports.MenuToggle = MenuToggle;
|
|
2871
2958
|
exports.MilliSecondSelect = MilliSecondSelect;
|
|
2959
|
+
exports.MinValidator = MinValidator;
|
|
2872
2960
|
exports.MinuteSelect = MinuteSelect;
|
|
2873
2961
|
exports.Modal = Modal;
|
|
2874
2962
|
exports.ModalBody = ModalBody;
|
|
@@ -2883,6 +2971,10 @@ exports.STATUS = STATUS;
|
|
|
2883
2971
|
exports.SecondSelect = SecondSelect;
|
|
2884
2972
|
exports.Select = Select;
|
|
2885
2973
|
exports.Sidebar = Sidebar;
|
|
2974
|
+
exports.SkeletonAvatar = SkeletonAvatar;
|
|
2975
|
+
exports.SkeletonFooter = SkeletonFooter;
|
|
2976
|
+
exports.SkeletonImage = SkeletonImage;
|
|
2977
|
+
exports.SkeletonText = SkeletonText;
|
|
2886
2978
|
exports.Snackbar = Snackbar;
|
|
2887
2979
|
exports.SpeedDial = SpeedDial;
|
|
2888
2980
|
exports.SpeedDialAction = SpeedDialAction;
|