react-asc 23.5.2 → 23.7.0
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/Drawer/Drawer.d.ts +1 -1
- package/components/Form/validators/MinValidator.d.ts +1 -0
- package/components/Form/validators/index.d.ts +1 -0
- package/components/Portal/Portal.d.ts +7 -0
- package/components/Portal/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 +491 -392
- package/index.js +494 -390
- package/package.json +1 -1
- package/react-asc.scss +4 -2
- package/readme.md +2 -0
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,33 +1543,45 @@ const DateSelect = (props) => {
|
|
|
1536
1543
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1537
1544
|
// };
|
|
1538
1545
|
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1546
|
+
const Portal = ({ children, target = document.body, className }) => {
|
|
1547
|
+
const containerEl = React.useMemo(() => document.createElement('div'), []);
|
|
1548
|
+
React.useEffect(() => {
|
|
1549
|
+
className && className.split(' ').forEach(cssClass => containerEl.classList.add(cssClass));
|
|
1550
|
+
target.appendChild(containerEl);
|
|
1551
|
+
return () => {
|
|
1552
|
+
target.removeChild(containerEl);
|
|
1553
|
+
};
|
|
1554
|
+
}, []);
|
|
1555
|
+
return reactDom.createPortal(children, containerEl);
|
|
1556
|
+
};
|
|
1557
|
+
|
|
1558
|
+
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}";
|
|
1559
|
+
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"};
|
|
1560
|
+
styleInject(css_248z$z);
|
|
1542
1561
|
|
|
1543
1562
|
const Drawer = (props) => {
|
|
1544
1563
|
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
1564
|
React.useEffect(() => {
|
|
1546
|
-
document.body.classList.add(styles$
|
|
1565
|
+
document.body.classList.add(styles$z.drawerOpen);
|
|
1547
1566
|
return () => {
|
|
1548
|
-
document.body.classList.remove(styles$
|
|
1567
|
+
document.body.classList.remove(styles$z.drawerOpen);
|
|
1549
1568
|
};
|
|
1550
1569
|
}, []);
|
|
1551
1570
|
const handleClickBackdrop = () => {
|
|
1552
1571
|
onClickBackdrop && onClickBackdrop();
|
|
1553
1572
|
};
|
|
1554
|
-
return
|
|
1573
|
+
return (React__default["default"].createElement(Portal, { className: 'drawer-container', target: target },
|
|
1555
1574
|
React__default["default"].createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
|
|
1556
|
-
!permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop }))
|
|
1575
|
+
!permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1557
1576
|
};
|
|
1558
1577
|
const DrawerContent = (props) => {
|
|
1559
1578
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1560
1579
|
const getCssClasses = () => {
|
|
1561
1580
|
const cssClasses = [];
|
|
1562
|
-
cssClasses.push(styles$
|
|
1563
|
-
shadow && cssClasses.push(styles$
|
|
1564
|
-
!!permanent && cssClasses.push(styles$
|
|
1565
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1581
|
+
cssClasses.push(styles$z.drawer);
|
|
1582
|
+
shadow && cssClasses.push(styles$z.shadow);
|
|
1583
|
+
!!permanent && cssClasses.push(styles$z['permanent']);
|
|
1584
|
+
position === 'left' ? cssClasses.push(styles$z['left']) : cssClasses.push(styles$z['right']);
|
|
1566
1585
|
className && cssClasses.push(className);
|
|
1567
1586
|
return cssClasses.filter(css => css).join(' ');
|
|
1568
1587
|
};
|
|
@@ -1576,9 +1595,9 @@ const DrawerContent = (props) => {
|
|
|
1576
1595
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1577
1596
|
};
|
|
1578
1597
|
|
|
1579
|
-
var css_248z$
|
|
1580
|
-
var styles$
|
|
1581
|
-
styleInject(css_248z$
|
|
1598
|
+
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}";
|
|
1599
|
+
var styles$y = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1600
|
+
styleInject(css_248z$y);
|
|
1582
1601
|
|
|
1583
1602
|
const MenuBody = (props) => {
|
|
1584
1603
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1609,8 +1628,8 @@ const MenuBody = (props) => {
|
|
|
1609
1628
|
}, [menuBodyRef]);
|
|
1610
1629
|
const getCssClasses = () => {
|
|
1611
1630
|
const cssClasses = [];
|
|
1612
|
-
cssClasses.push(styles$
|
|
1613
|
-
shadow && cssClasses.push(styles$
|
|
1631
|
+
cssClasses.push(styles$y.menuBody);
|
|
1632
|
+
shadow && cssClasses.push(styles$y.shadow);
|
|
1614
1633
|
className && cssClasses.push(className);
|
|
1615
1634
|
return cssClasses.filter(css => css).join(' ');
|
|
1616
1635
|
};
|
|
@@ -1622,9 +1641,9 @@ const MenuBody = (props) => {
|
|
|
1622
1641
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1623
1642
|
};
|
|
1624
1643
|
|
|
1625
|
-
var css_248z$
|
|
1626
|
-
var styles$
|
|
1627
|
-
styleInject(css_248z$
|
|
1644
|
+
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1645
|
+
var styles$x = {"menu":"Menu-module_menu__p8QL-"};
|
|
1646
|
+
styleInject(css_248z$x);
|
|
1628
1647
|
|
|
1629
1648
|
const Menu = (props) => {
|
|
1630
1649
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
@@ -1632,7 +1651,7 @@ const Menu = (props) => {
|
|
|
1632
1651
|
const toggleContainerRef = React.useRef(null);
|
|
1633
1652
|
const getCssClasses = () => {
|
|
1634
1653
|
const cssClasses = [];
|
|
1635
|
-
cssClasses.push(styles$
|
|
1654
|
+
cssClasses.push(styles$x.menu);
|
|
1636
1655
|
className && cssClasses.push(className);
|
|
1637
1656
|
return cssClasses.filter(css => css).join(' ');
|
|
1638
1657
|
};
|
|
@@ -1645,17 +1664,17 @@ const Menu = (props) => {
|
|
|
1645
1664
|
React__default["default"].createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1646
1665
|
};
|
|
1647
1666
|
|
|
1648
|
-
var css_248z$
|
|
1649
|
-
var styles$
|
|
1650
|
-
styleInject(css_248z$
|
|
1667
|
+
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}";
|
|
1668
|
+
var styles$w = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1669
|
+
styleInject(css_248z$w);
|
|
1651
1670
|
|
|
1652
1671
|
const MenuItem = (props) => {
|
|
1653
1672
|
const { children, onClick, type = 'item' } = props;
|
|
1654
1673
|
const getCssClasses = () => {
|
|
1655
1674
|
const cssClasses = [];
|
|
1656
|
-
cssClasses.push(styles$
|
|
1675
|
+
cssClasses.push(styles$w.menuItem);
|
|
1657
1676
|
if (type === 'header') {
|
|
1658
|
-
cssClasses.push(styles$
|
|
1677
|
+
cssClasses.push(styles$w.menuItemHeader);
|
|
1659
1678
|
}
|
|
1660
1679
|
return cssClasses.filter(css => css).join(' ');
|
|
1661
1680
|
};
|
|
@@ -1671,23 +1690,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1671
1690
|
return (React__default["default"].createElement(React.Fragment, null, children));
|
|
1672
1691
|
};
|
|
1673
1692
|
|
|
1674
|
-
var css_248z$
|
|
1675
|
-
var styles$
|
|
1676
|
-
styleInject(css_248z$
|
|
1693
|
+
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}";
|
|
1694
|
+
var styles$v = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1695
|
+
styleInject(css_248z$v);
|
|
1677
1696
|
|
|
1678
|
-
const MenuDivider = () => React__default["default"].createElement("div", { className: styles$
|
|
1697
|
+
const MenuDivider = () => React__default["default"].createElement("div", { className: styles$v.menuItemDivider });
|
|
1679
1698
|
|
|
1680
|
-
var css_248z$
|
|
1681
|
-
var styles$
|
|
1682
|
-
styleInject(css_248z$
|
|
1699
|
+
var css_248z$u = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px;\n}";
|
|
1700
|
+
var styles$u = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1701
|
+
styleInject(css_248z$u);
|
|
1683
1702
|
|
|
1684
1703
|
const ExpansionPanelContent = ({ children }) => {
|
|
1685
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
1704
|
+
return (React__default["default"].createElement("div", { className: styles$u.expansionPanelContent }, children));
|
|
1686
1705
|
};
|
|
1687
1706
|
|
|
1688
|
-
var css_248z$
|
|
1689
|
-
var styles$
|
|
1690
|
-
styleInject(css_248z$
|
|
1707
|
+
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}";
|
|
1708
|
+
var styles$t = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1709
|
+
styleInject(css_248z$t);
|
|
1691
1710
|
|
|
1692
1711
|
const ExpansionPanelHeader = (props) => {
|
|
1693
1712
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1695,15 +1714,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1695
1714
|
e.stopPropagation();
|
|
1696
1715
|
onClick && onClick(e);
|
|
1697
1716
|
};
|
|
1698
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
1717
|
+
return (React__default["default"].createElement("div", { className: styles$t.expansionPanelHeader, onClick: handleClick },
|
|
1699
1718
|
children,
|
|
1700
1719
|
React__default["default"].createElement("span", { className: "ml-auto text-muted" },
|
|
1701
1720
|
React__default["default"].createElement(Icon, null, isExpanded ? React__default["default"].createElement(ChevronUpSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null)))));
|
|
1702
1721
|
};
|
|
1703
1722
|
|
|
1704
|
-
var css_248z$
|
|
1705
|
-
var styles$
|
|
1706
|
-
styleInject(css_248z$
|
|
1723
|
+
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}";
|
|
1724
|
+
var styles$s = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1725
|
+
styleInject(css_248z$s);
|
|
1707
1726
|
|
|
1708
1727
|
const ExpansionPanel = (props) => {
|
|
1709
1728
|
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
@@ -1713,11 +1732,11 @@ const ExpansionPanel = (props) => {
|
|
|
1713
1732
|
}, [isExpanded]);
|
|
1714
1733
|
const getCssClasses = () => {
|
|
1715
1734
|
const cssClasses = [];
|
|
1716
|
-
cssClasses.push(styles$
|
|
1735
|
+
cssClasses.push(styles$s.expansionPanel);
|
|
1717
1736
|
if (_isExpanded) {
|
|
1718
|
-
cssClasses.push(styles$
|
|
1737
|
+
cssClasses.push(styles$s.isExpanded);
|
|
1719
1738
|
}
|
|
1720
|
-
shadow && cssClasses.push(styles$
|
|
1739
|
+
shadow && cssClasses.push(styles$s.shadow);
|
|
1721
1740
|
return cssClasses.filter(css => css).join(' ');
|
|
1722
1741
|
};
|
|
1723
1742
|
const handleClickHeader = (event) => {
|
|
@@ -1730,17 +1749,17 @@ const ExpansionPanel = (props) => {
|
|
|
1730
1749
|
React__default["default"].createElement(ExpansionPanelContent, null, children)));
|
|
1731
1750
|
};
|
|
1732
1751
|
|
|
1733
|
-
var css_248z$
|
|
1734
|
-
var styles$
|
|
1735
|
-
styleInject(css_248z$
|
|
1752
|
+
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}";
|
|
1753
|
+
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"};
|
|
1754
|
+
styleInject(css_248z$r);
|
|
1736
1755
|
|
|
1737
1756
|
const FloatingActionButton = (props) => {
|
|
1738
1757
|
const { className, icon, color = exports.COLOR.primary, fixed, position = 'rightBottom', size = exports.SIZE.lg, isActive, disabled, onClick } = props;
|
|
1739
1758
|
const getCssClasses = () => {
|
|
1740
1759
|
const cssClasses = [];
|
|
1741
|
-
cssClasses.push(styles$
|
|
1742
|
-
fixed && cssClasses.push(styles$
|
|
1743
|
-
position && fixed && cssClasses.push(styles$
|
|
1760
|
+
cssClasses.push(styles$r.fab);
|
|
1761
|
+
fixed && cssClasses.push(styles$r.fixed);
|
|
1762
|
+
position && fixed && cssClasses.push(styles$r[position]);
|
|
1744
1763
|
className && cssClasses.push(className);
|
|
1745
1764
|
return cssClasses.filter(css => css).join(' ');
|
|
1746
1765
|
};
|
|
@@ -1751,14 +1770,14 @@ const FloatingActionButton = (props) => {
|
|
|
1751
1770
|
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
1771
|
};
|
|
1753
1772
|
|
|
1754
|
-
var css_248z$
|
|
1755
|
-
var styles$
|
|
1756
|
-
styleInject(css_248z$
|
|
1773
|
+
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}";
|
|
1774
|
+
var styles$q = {"link":"Link-module_link__YlJQl"};
|
|
1775
|
+
styleInject(css_248z$q);
|
|
1757
1776
|
|
|
1758
1777
|
const Link = (props) => {
|
|
1759
1778
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1760
1779
|
const [status, setStatus] = React.useState(STATUS.NORMAL);
|
|
1761
|
-
const [cssClassName] = useCssClasses([styles$
|
|
1780
|
+
const [cssClassName] = useCssClasses([styles$q.link, className, status]);
|
|
1762
1781
|
const onMouseEnter = () => {
|
|
1763
1782
|
setStatus(STATUS.HOVERED);
|
|
1764
1783
|
};
|
|
@@ -1768,15 +1787,15 @@ const Link = (props) => {
|
|
|
1768
1787
|
return (React__default["default"].createElement("a", Object.assign({ className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1769
1788
|
};
|
|
1770
1789
|
|
|
1771
|
-
var css_248z$
|
|
1772
|
-
var styles$
|
|
1773
|
-
styleInject(css_248z$
|
|
1790
|
+
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}";
|
|
1791
|
+
var styles$p = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1792
|
+
styleInject(css_248z$p);
|
|
1774
1793
|
|
|
1775
1794
|
const LoadingIndicator = (_a) => {
|
|
1776
1795
|
var rest = __rest(_a, []);
|
|
1777
1796
|
const getCssClasses = () => {
|
|
1778
1797
|
const cssClasses = [];
|
|
1779
|
-
cssClasses.push(styles$
|
|
1798
|
+
cssClasses.push(styles$p.loadingIndicator);
|
|
1780
1799
|
return cssClasses.filter(css => css).join(' ');
|
|
1781
1800
|
};
|
|
1782
1801
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1786,8 +1805,8 @@ const LoadingIndicator = (_a) => {
|
|
|
1786
1805
|
const LoadingIndicatorContainer = ({ children, isFixed }) => {
|
|
1787
1806
|
const getCssClasses = () => {
|
|
1788
1807
|
const cssClasses = [];
|
|
1789
|
-
cssClasses.push(styles$
|
|
1790
|
-
isFixed && cssClasses.push(styles$
|
|
1808
|
+
cssClasses.push(styles$p.loadingIndicatorContainer);
|
|
1809
|
+
isFixed && cssClasses.push(styles$p.isFixed);
|
|
1791
1810
|
return cssClasses.filter(css => css).join(' ');
|
|
1792
1811
|
};
|
|
1793
1812
|
return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1815,45 +1834,45 @@ class LoadingIndicatorService {
|
|
|
1815
1834
|
}
|
|
1816
1835
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1817
1836
|
|
|
1818
|
-
var css_248z$
|
|
1819
|
-
var styles$
|
|
1820
|
-
styleInject(css_248z$
|
|
1837
|
+
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}";
|
|
1838
|
+
var styles$o = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1839
|
+
styleInject(css_248z$o);
|
|
1821
1840
|
|
|
1822
1841
|
const ModalHeader = (props) => {
|
|
1823
1842
|
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1824
1843
|
const handleClick = () => {
|
|
1825
1844
|
onClose && onClose();
|
|
1826
1845
|
};
|
|
1827
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
1828
|
-
React__default["default"].createElement("h5", { className: styles$
|
|
1846
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$o.modalHeader }, rest),
|
|
1847
|
+
React__default["default"].createElement("h5", { className: styles$o.modalTitle }, children),
|
|
1829
1848
|
isDismissable &&
|
|
1830
1849
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), variant: exports.VARIANT.text, onClick: handleClick })));
|
|
1831
1850
|
};
|
|
1832
1851
|
|
|
1833
|
-
var css_248z$
|
|
1834
|
-
var styles$
|
|
1835
|
-
styleInject(css_248z$
|
|
1852
|
+
var css_248z$n = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem;\n}";
|
|
1853
|
+
var styles$n = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1854
|
+
styleInject(css_248z$n);
|
|
1836
1855
|
|
|
1837
|
-
const ModalBody = ({ children }) => (React__default["default"].createElement("div", { className: styles$
|
|
1856
|
+
const ModalBody = ({ children }) => (React__default["default"].createElement("div", { className: styles$n.modalBody }, children));
|
|
1838
1857
|
|
|
1839
|
-
var css_248z$
|
|
1840
|
-
var styles$
|
|
1841
|
-
styleInject(css_248z$
|
|
1858
|
+
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}";
|
|
1859
|
+
var styles$m = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1860
|
+
styleInject(css_248z$m);
|
|
1842
1861
|
|
|
1843
|
-
const ModalFooter = ({ children }) => (React__default["default"].createElement("div", { className: styles$
|
|
1862
|
+
const ModalFooter = ({ children }) => (React__default["default"].createElement("div", { className: styles$m.modalFooter }, children));
|
|
1844
1863
|
|
|
1845
|
-
var css_248z$
|
|
1846
|
-
var styles$
|
|
1847
|
-
styleInject(css_248z$
|
|
1864
|
+
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}";
|
|
1865
|
+
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"};
|
|
1866
|
+
styleInject(css_248z$l);
|
|
1848
1867
|
|
|
1849
1868
|
const Modal = (props) => {
|
|
1850
1869
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1851
1870
|
const getCssClass = () => {
|
|
1852
1871
|
const cssClasses = [];
|
|
1853
|
-
cssClasses.push(styles$
|
|
1854
|
-
cssClasses.push(styles$
|
|
1855
|
-
fullScreen && cssClasses.push(styles$
|
|
1856
|
-
size && cssClasses.push(styles$
|
|
1872
|
+
cssClasses.push(styles$l.modalDialog);
|
|
1873
|
+
cssClasses.push(styles$l.modalDialogCentered);
|
|
1874
|
+
fullScreen && cssClasses.push(styles$l.fullscreen);
|
|
1875
|
+
size && cssClasses.push(styles$l[size]);
|
|
1857
1876
|
className && cssClasses.push(className);
|
|
1858
1877
|
return cssClasses.filter(r => r).join(' ');
|
|
1859
1878
|
};
|
|
@@ -1867,9 +1886,9 @@ const Modal = (props) => {
|
|
|
1867
1886
|
onBackdropClick && onBackdropClick();
|
|
1868
1887
|
};
|
|
1869
1888
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1870
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1889
|
+
React__default["default"].createElement("div", { className: styles$l.modal },
|
|
1871
1890
|
React__default["default"].createElement("div", { className: getCssClass() },
|
|
1872
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1891
|
+
React__default["default"].createElement("div", { className: styles$l.modalContent },
|
|
1873
1892
|
header &&
|
|
1874
1893
|
React__default["default"].createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1875
1894
|
React__default["default"].createElement(ModalBody, null, children),
|
|
@@ -1994,29 +2013,88 @@ const NumberSelect = (props) => {
|
|
|
1994
2013
|
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
2014
|
};
|
|
1996
2015
|
|
|
1997
|
-
var css_248z$
|
|
1998
|
-
var styles$
|
|
1999
|
-
styleInject(css_248z$
|
|
2016
|
+
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}";
|
|
2017
|
+
var styles$k = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2018
|
+
styleInject(css_248z$k);
|
|
2019
|
+
|
|
2020
|
+
const Tooltip = (props) => {
|
|
2021
|
+
const { children, text, placement = 'bottom' } = props;
|
|
2022
|
+
const [show, setShow] = React.useState(false);
|
|
2023
|
+
const refChild = React.useRef();
|
|
2024
|
+
const refTooltip = React.useRef();
|
|
2025
|
+
React.useEffect(() => {
|
|
2026
|
+
if (show === true && refChild && refChild.current && refTooltip && refTooltip.current) {
|
|
2027
|
+
// TODO - extract to own component?
|
|
2028
|
+
core.createPopper(refChild.current, refTooltip.current, {
|
|
2029
|
+
placement: placement,
|
|
2030
|
+
modifiers: [
|
|
2031
|
+
{
|
|
2032
|
+
name: 'offset',
|
|
2033
|
+
options: { offset: [0, 8] }
|
|
2034
|
+
},
|
|
2035
|
+
]
|
|
2036
|
+
});
|
|
2037
|
+
}
|
|
2038
|
+
}, [show]);
|
|
2039
|
+
const handleMouseOver = () => {
|
|
2040
|
+
setShow(true);
|
|
2041
|
+
};
|
|
2042
|
+
const handleMouseLeave = () => {
|
|
2043
|
+
setShow(false);
|
|
2044
|
+
};
|
|
2045
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2046
|
+
React__default["default"].createElement("div", { className: styles$k.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
|
|
2047
|
+
onMouseOver: handleMouseOver,
|
|
2048
|
+
onMouseLeave: handleMouseLeave,
|
|
2049
|
+
})),
|
|
2050
|
+
show && text &&
|
|
2051
|
+
React__default["default"].createElement("div", { className: styles$k.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2052
|
+
text,
|
|
2053
|
+
React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2054
|
+
};
|
|
2055
|
+
|
|
2056
|
+
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}";
|
|
2057
|
+
var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2058
|
+
styleInject(css_248z$j);
|
|
2000
2059
|
|
|
2001
2060
|
const ProgressBar = (props) => {
|
|
2002
2061
|
const { className, color = exports.COLOR.primary, value, indeterminate } = props, rest = __rest(props, ["className", "color", "value", "indeterminate"]);
|
|
2062
|
+
const [model, setModel] = React.useState();
|
|
2063
|
+
React.useEffect(() => {
|
|
2064
|
+
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
2065
|
+
}, [color]);
|
|
2066
|
+
React.useEffect(() => {
|
|
2067
|
+
let newValue = value;
|
|
2068
|
+
if (value && value < 0) {
|
|
2069
|
+
newValue = 0;
|
|
2070
|
+
}
|
|
2071
|
+
if (value && value > 100) {
|
|
2072
|
+
newValue = 100;
|
|
2073
|
+
}
|
|
2074
|
+
setModel(newValue);
|
|
2075
|
+
}, [value]);
|
|
2003
2076
|
const getCssClasses = () => {
|
|
2004
2077
|
const cssClasses = [];
|
|
2005
|
-
cssClasses.push(styles$
|
|
2078
|
+
cssClasses.push(styles$j.progressBarContainer);
|
|
2006
2079
|
className && cssClasses.push(className);
|
|
2007
2080
|
return cssClasses.filter(r => r).join(' ');
|
|
2008
2081
|
};
|
|
2009
2082
|
const getCssClassesBar = () => {
|
|
2010
2083
|
const cssClasses = [];
|
|
2011
|
-
cssClasses.push(styles$
|
|
2012
|
-
indeterminate && cssClasses.push(styles$
|
|
2084
|
+
cssClasses.push(styles$j.progressBar);
|
|
2085
|
+
indeterminate && cssClasses.push(styles$j['indeterminate']);
|
|
2013
2086
|
return cssClasses.filter(r => r).join(' ');
|
|
2014
2087
|
};
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2088
|
+
const getStyle = () => {
|
|
2089
|
+
let width = model && model >= 0 ? model : 0;
|
|
2090
|
+
if (indeterminate) {
|
|
2091
|
+
width = 100;
|
|
2092
|
+
}
|
|
2093
|
+
return `${width}%`;
|
|
2094
|
+
};
|
|
2095
|
+
return (React__default["default"].createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2096
|
+
React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2097
|
+
React__default["default"].createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2020
2098
|
};
|
|
2021
2099
|
|
|
2022
2100
|
class SidebarItemModel {
|
|
@@ -2096,25 +2174,25 @@ const Sidebar = (props) => {
|
|
|
2096
2174
|
!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
2175
|
};
|
|
2098
2176
|
|
|
2099
|
-
var css_248z$
|
|
2100
|
-
var styles$
|
|
2101
|
-
styleInject(css_248z$
|
|
2177
|
+
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}";
|
|
2178
|
+
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"};
|
|
2179
|
+
styleInject(css_248z$i);
|
|
2102
2180
|
|
|
2103
2181
|
const Snackbar = (props) => {
|
|
2104
2182
|
const { children, color = exports.COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
2105
2183
|
const getCssClasses = () => {
|
|
2106
2184
|
const cssClasses = [];
|
|
2107
|
-
cssClasses.push(styles$
|
|
2185
|
+
cssClasses.push(styles$i.snackbar);
|
|
2108
2186
|
cssClasses.push(`shadow-lg`);
|
|
2109
|
-
cssClasses.push(styles$
|
|
2187
|
+
cssClasses.push(styles$i[color]);
|
|
2110
2188
|
return cssClasses.filter(css => css).join(' ');
|
|
2111
2189
|
};
|
|
2112
2190
|
const handleClickAction = (e) => {
|
|
2113
2191
|
onOk && onOk(e);
|
|
2114
2192
|
};
|
|
2115
2193
|
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$
|
|
2194
|
+
React__default["default"].createElement("div", { className: styles$i.text }, children),
|
|
2195
|
+
React__default["default"].createElement("div", { className: styles$i.action + ' text-accent', onClick: handleClickAction },
|
|
2118
2196
|
React__default["default"].createElement("span", null, actionText))));
|
|
2119
2197
|
};
|
|
2120
2198
|
|
|
@@ -2152,29 +2230,29 @@ class SnackbarService {
|
|
|
2152
2230
|
}
|
|
2153
2231
|
const snackbarService = new SnackbarService();
|
|
2154
2232
|
|
|
2155
|
-
var css_248z$
|
|
2156
|
-
var styles$
|
|
2157
|
-
styleInject(css_248z$
|
|
2233
|
+
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}";
|
|
2234
|
+
var styles$h = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2235
|
+
styleInject(css_248z$h);
|
|
2158
2236
|
|
|
2159
2237
|
const SpeedDialActions = (props) => {
|
|
2160
2238
|
const { children } = props;
|
|
2161
2239
|
const getCssClasses = () => {
|
|
2162
2240
|
const cssClasses = [];
|
|
2163
|
-
cssClasses.push(styles$
|
|
2241
|
+
cssClasses.push(styles$h.speedDialActions);
|
|
2164
2242
|
return cssClasses.filter(css => css).join(' ');
|
|
2165
2243
|
};
|
|
2166
2244
|
return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
|
|
2167
2245
|
};
|
|
2168
2246
|
|
|
2169
|
-
var css_248z$
|
|
2170
|
-
var styles$
|
|
2171
|
-
styleInject(css_248z$
|
|
2247
|
+
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}";
|
|
2248
|
+
var styles$g = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2249
|
+
styleInject(css_248z$g);
|
|
2172
2250
|
|
|
2173
2251
|
const SpeedDial = (props) => {
|
|
2174
2252
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
2175
2253
|
const getCssClasses = () => {
|
|
2176
2254
|
const cssClasses = [];
|
|
2177
|
-
cssClasses.push(styles$
|
|
2255
|
+
cssClasses.push(styles$g.speedDial);
|
|
2178
2256
|
className && cssClasses.push(className);
|
|
2179
2257
|
return cssClasses.filter(css => css).join(' ');
|
|
2180
2258
|
};
|
|
@@ -2191,15 +2269,15 @@ const SpeedDial = (props) => {
|
|
|
2191
2269
|
React__default["default"].createElement(SpeedDialActions, null, children)));
|
|
2192
2270
|
};
|
|
2193
2271
|
|
|
2194
|
-
var css_248z$
|
|
2195
|
-
var styles$
|
|
2196
|
-
styleInject(css_248z$
|
|
2272
|
+
var css_248z$f = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2273
|
+
var styles$f = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2274
|
+
styleInject(css_248z$f);
|
|
2197
2275
|
|
|
2198
2276
|
const SpeedDialAction = (props) => {
|
|
2199
2277
|
const { icon, color = exports.COLOR.light, onClick, className } = props;
|
|
2200
2278
|
const getCssClasses = () => {
|
|
2201
2279
|
const cssClasses = [];
|
|
2202
|
-
cssClasses.push(styles$
|
|
2280
|
+
cssClasses.push(styles$f.speedDialAction);
|
|
2203
2281
|
className && cssClasses.push(className);
|
|
2204
2282
|
return cssClasses.filter(css => css).join(' ');
|
|
2205
2283
|
};
|
|
@@ -2216,15 +2294,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2216
2294
|
return (React__default["default"].createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2217
2295
|
};
|
|
2218
2296
|
|
|
2219
|
-
var css_248z$
|
|
2220
|
-
var styles$
|
|
2221
|
-
styleInject(css_248z$
|
|
2297
|
+
var css_248z$e = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2298
|
+
var styles$e = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2299
|
+
styleInject(css_248z$e);
|
|
2222
2300
|
|
|
2223
2301
|
const StepperActions = (props) => {
|
|
2224
2302
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2225
2303
|
const getCssClasses = () => {
|
|
2226
2304
|
const cssClasses = [];
|
|
2227
|
-
cssClasses.push(styles$
|
|
2305
|
+
cssClasses.push(styles$e.stepperActions);
|
|
2228
2306
|
className && cssClasses.push(className);
|
|
2229
2307
|
return cssClasses.filter(css => css).join(' ');
|
|
2230
2308
|
};
|
|
@@ -2241,31 +2319,31 @@ const StepPanel = (props) => {
|
|
|
2241
2319
|
return (React__default["default"].createElement("div", { className: "steppanel" }, children));
|
|
2242
2320
|
};
|
|
2243
2321
|
|
|
2244
|
-
var css_248z$
|
|
2245
|
-
var styles$
|
|
2246
|
-
styleInject(css_248z$
|
|
2322
|
+
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}";
|
|
2323
|
+
var styles$d = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2324
|
+
styleInject(css_248z$d);
|
|
2247
2325
|
|
|
2248
2326
|
const StepConnector = (props) => {
|
|
2249
2327
|
const { isActive, isHorizontal = true } = props;
|
|
2250
2328
|
const getCssClassesConnector = () => {
|
|
2251
2329
|
const cssClasses = [];
|
|
2252
|
-
cssClasses.push(styles$
|
|
2330
|
+
cssClasses.push(styles$d.stepConnector);
|
|
2253
2331
|
return cssClasses.filter(css => css).join(' ');
|
|
2254
2332
|
};
|
|
2255
2333
|
const getCssClassesLine = () => {
|
|
2256
2334
|
const cssClasses = [];
|
|
2257
|
-
cssClasses.push(styles$
|
|
2258
|
-
isActive && cssClasses.push(styles$
|
|
2259
|
-
isHorizontal && cssClasses.push(styles$
|
|
2335
|
+
cssClasses.push(styles$d.stepConnectorLine);
|
|
2336
|
+
isActive && cssClasses.push(styles$d['isActive']);
|
|
2337
|
+
isHorizontal && cssClasses.push(styles$d.stepConnectorLineHorizontal);
|
|
2260
2338
|
return cssClasses.filter(css => css).join(' ');
|
|
2261
2339
|
};
|
|
2262
2340
|
return (React__default["default"].createElement("div", { className: getCssClassesConnector() },
|
|
2263
2341
|
React__default["default"].createElement("div", { className: getCssClassesLine() })));
|
|
2264
2342
|
};
|
|
2265
2343
|
|
|
2266
|
-
var css_248z$
|
|
2267
|
-
var styles$
|
|
2268
|
-
styleInject(css_248z$
|
|
2344
|
+
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}";
|
|
2345
|
+
var styles$c = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2346
|
+
styleInject(css_248z$c);
|
|
2269
2347
|
|
|
2270
2348
|
const Stepper = (props) => {
|
|
2271
2349
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2353,8 +2431,8 @@ const Stepper = (props) => {
|
|
|
2353
2431
|
};
|
|
2354
2432
|
const getCssClasses = () => {
|
|
2355
2433
|
const cssClasses = [];
|
|
2356
|
-
cssClasses.push(styles$
|
|
2357
|
-
isHorizontal && cssClasses.push(styles$
|
|
2434
|
+
cssClasses.push(styles$c.stepper);
|
|
2435
|
+
isHorizontal && cssClasses.push(styles$c['isHorizontal']);
|
|
2358
2436
|
return cssClasses.filter(css => css).join(' ');
|
|
2359
2437
|
};
|
|
2360
2438
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, steps &&
|
|
@@ -2367,17 +2445,17 @@ const Stepper = (props) => {
|
|
|
2367
2445
|
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
2446
|
};
|
|
2369
2447
|
|
|
2370
|
-
var css_248z$
|
|
2371
|
-
var styles$
|
|
2372
|
-
styleInject(css_248z$
|
|
2448
|
+
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}";
|
|
2449
|
+
var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typography-module_wrap__W7G0R"};
|
|
2450
|
+
styleInject(css_248z$b);
|
|
2373
2451
|
|
|
2374
2452
|
const Wrapper = (props) => {
|
|
2375
2453
|
const { as = 'span', wrap, children, className } = props, rest = __rest(props, ["as", "wrap", "children", "className"]);
|
|
2376
2454
|
const getCssClasses = () => {
|
|
2377
2455
|
const cssClasses = [];
|
|
2378
|
-
cssClasses.push(styles$
|
|
2379
|
-
cssClasses.push(styles$
|
|
2380
|
-
wrap && cssClasses.push(styles$
|
|
2456
|
+
cssClasses.push(styles$b.typography);
|
|
2457
|
+
cssClasses.push(styles$b.as);
|
|
2458
|
+
wrap && cssClasses.push(styles$b.wrap);
|
|
2381
2459
|
className && cssClasses.push(className);
|
|
2382
2460
|
return cssClasses.filter(css => css).join(' ');
|
|
2383
2461
|
};
|
|
@@ -2388,9 +2466,9 @@ const Typography = (_a) => {
|
|
|
2388
2466
|
return (React__default["default"].createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2389
2467
|
};
|
|
2390
2468
|
|
|
2391
|
-
var css_248z$
|
|
2392
|
-
var styles$
|
|
2393
|
-
styleInject(css_248z$
|
|
2469
|
+
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}";
|
|
2470
|
+
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"};
|
|
2471
|
+
styleInject(css_248z$a);
|
|
2394
2472
|
|
|
2395
2473
|
const Step = (props) => {
|
|
2396
2474
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
@@ -2402,29 +2480,29 @@ const Step = (props) => {
|
|
|
2402
2480
|
};
|
|
2403
2481
|
const getCssClasses = () => {
|
|
2404
2482
|
const cssClasses = [];
|
|
2405
|
-
cssClasses.push(styles$
|
|
2406
|
-
label && showLabel && cssClasses.push(styles$
|
|
2407
|
-
isDisabled && cssClasses.push(styles$
|
|
2483
|
+
cssClasses.push(styles$a.stepWrapper);
|
|
2484
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2485
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2408
2486
|
className && cssClasses.push(className);
|
|
2409
2487
|
return cssClasses.filter(css => css).join(' ');
|
|
2410
2488
|
};
|
|
2411
2489
|
const getCssClassesStep = () => {
|
|
2412
2490
|
const cssClasses = [];
|
|
2413
|
-
cssClasses.push(styles$
|
|
2414
|
-
label && showLabel && cssClasses.push(styles$
|
|
2415
|
-
isDisabled && cssClasses.push(styles$
|
|
2491
|
+
cssClasses.push(styles$a.step);
|
|
2492
|
+
label && showLabel && cssClasses.push(styles$a['hasLabel']);
|
|
2493
|
+
isDisabled && cssClasses.push(styles$a['disabled']);
|
|
2416
2494
|
return cssClasses.filter(css => css).join(' ');
|
|
2417
2495
|
};
|
|
2418
2496
|
const getCssClassesStepValue = () => {
|
|
2419
2497
|
const cssClasses = [];
|
|
2420
|
-
cssClasses.push(styles$
|
|
2498
|
+
cssClasses.push(styles$a.stepValue);
|
|
2421
2499
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2422
|
-
isActive && cssClasses.push(styles$
|
|
2500
|
+
isActive && cssClasses.push(styles$a.stepValue['isActive']);
|
|
2423
2501
|
return cssClasses.filter(css => css).join(' ');
|
|
2424
2502
|
};
|
|
2425
2503
|
return (React__default["default"].createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2426
2504
|
React__default["default"].createElement("div", { className: getCssClassesStep() },
|
|
2427
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
2505
|
+
React__default["default"].createElement(Icon, { className: styles$a.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? exports.COLOR.primary : exports.COLOR.secondary },
|
|
2428
2506
|
React__default["default"].createElement(CircleSolidIcon, null)),
|
|
2429
2507
|
React__default["default"].createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2430
2508
|
React__default["default"].createElement(Icon, null,
|
|
@@ -2435,22 +2513,83 @@ const Step = (props) => {
|
|
|
2435
2513
|
React__default["default"].createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2436
2514
|
};
|
|
2437
2515
|
|
|
2438
|
-
var css_248z$
|
|
2439
|
-
var styles$
|
|
2516
|
+
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}";
|
|
2517
|
+
var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","skeleton-loading":"SkeletonAvatar-module_skeleton-loading__eM-ZU"};
|
|
2518
|
+
styleInject(css_248z$9);
|
|
2519
|
+
|
|
2520
|
+
const SkeletonAvatar = (props) => {
|
|
2521
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2522
|
+
const getCssClasses = () => {
|
|
2523
|
+
const cssClasses = [];
|
|
2524
|
+
cssClasses.push(styles$9.skeletonAvatar);
|
|
2525
|
+
className && cssClasses.push(className);
|
|
2526
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2527
|
+
};
|
|
2528
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2529
|
+
};
|
|
2530
|
+
|
|
2531
|
+
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}";
|
|
2532
|
+
var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skeleton-loading":"SkeletonText-module_skeleton-loading__EYFfJ"};
|
|
2533
|
+
styleInject(css_248z$8);
|
|
2534
|
+
|
|
2535
|
+
const SkeletonText = (props) => {
|
|
2536
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2537
|
+
const getCssClasses = () => {
|
|
2538
|
+
const cssClasses = [];
|
|
2539
|
+
cssClasses.push(styles$8.skeletonText);
|
|
2540
|
+
className && cssClasses.push(className);
|
|
2541
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2542
|
+
};
|
|
2543
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2544
|
+
};
|
|
2545
|
+
|
|
2546
|
+
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}";
|
|
2547
|
+
var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","skeleton-loading":"SkeletonFooter-module_skeleton-loading__OEErv"};
|
|
2548
|
+
styleInject(css_248z$7);
|
|
2549
|
+
|
|
2550
|
+
const SkeletonFooter = (props) => {
|
|
2551
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2552
|
+
const getCssClasses = () => {
|
|
2553
|
+
const cssClasses = [];
|
|
2554
|
+
cssClasses.push(styles$7.skeletonFooter);
|
|
2555
|
+
className && cssClasses.push(className);
|
|
2556
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2557
|
+
};
|
|
2558
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest)));
|
|
2559
|
+
};
|
|
2560
|
+
|
|
2561
|
+
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}";
|
|
2562
|
+
var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","skeleton-loading":"SkeletonImage-module_skeleton-loading__04lJ7","div":"SkeletonImage-module_div__tqqrB"};
|
|
2440
2563
|
styleInject(css_248z$6);
|
|
2441
2564
|
|
|
2565
|
+
const SkeletonImage = (props) => {
|
|
2566
|
+
const { className } = props, rest = __rest(props, ["className"]);
|
|
2567
|
+
const getCssClasses = () => {
|
|
2568
|
+
const cssClasses = [];
|
|
2569
|
+
cssClasses.push(styles$6.skeletonImage);
|
|
2570
|
+
className && cssClasses.push(className);
|
|
2571
|
+
return cssClasses.filter(r => r).join(' ');
|
|
2572
|
+
};
|
|
2573
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2574
|
+
React__default["default"].createElement("div", { className: styles$6.img })));
|
|
2575
|
+
};
|
|
2576
|
+
|
|
2577
|
+
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}";
|
|
2578
|
+
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"};
|
|
2579
|
+
styleInject(css_248z$5);
|
|
2580
|
+
|
|
2442
2581
|
const Table = (props) => {
|
|
2443
2582
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2444
2583
|
const getCssClasses = () => {
|
|
2445
2584
|
const cssClasses = [];
|
|
2446
|
-
cssClasses.push(styles$
|
|
2447
|
-
bordered && cssClasses.push(styles$
|
|
2448
|
-
striped && cssClasses.push(styles$
|
|
2449
|
-
hover && cssClasses.push(styles$
|
|
2585
|
+
cssClasses.push(styles$5.table);
|
|
2586
|
+
bordered && cssClasses.push(styles$5['bordered']);
|
|
2587
|
+
striped && cssClasses.push(styles$5['striped']);
|
|
2588
|
+
hover && cssClasses.push(styles$5['hover']);
|
|
2450
2589
|
className && cssClasses.push(className);
|
|
2451
2590
|
return cssClasses.filter(css => css).join(' ');
|
|
2452
2591
|
};
|
|
2453
|
-
return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React__default["default"].createElement("div", { className: styles$
|
|
2592
|
+
return (React__default["default"].createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React__default["default"].createElement("div", { className: styles$5.tableResponsive }, children) },
|
|
2454
2593
|
React__default["default"].createElement("table", { className: getCssClasses() }, children)));
|
|
2455
2594
|
};
|
|
2456
2595
|
|
|
@@ -2483,16 +2622,16 @@ const TableCell = (props) => {
|
|
|
2483
2622
|
React__default["default"].createElement("td", Object.assign({}, rest), children)) }, children));
|
|
2484
2623
|
};
|
|
2485
2624
|
|
|
2486
|
-
var css_248z$
|
|
2487
|
-
var styles$
|
|
2488
|
-
styleInject(css_248z$
|
|
2625
|
+
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}";
|
|
2626
|
+
var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
|
|
2627
|
+
styleInject(css_248z$4);
|
|
2489
2628
|
|
|
2490
2629
|
const TabIndicator = (props) => {
|
|
2491
2630
|
const { color = exports.COLOR.primary, width, amount, index } = props;
|
|
2492
2631
|
const getCssClasses = () => {
|
|
2493
2632
|
const cssClasses = [];
|
|
2494
|
-
cssClasses.push(styles$
|
|
2495
|
-
cssClasses.push(styles$
|
|
2633
|
+
cssClasses.push(styles$4.tabIndicator);
|
|
2634
|
+
cssClasses.push(styles$4[color]);
|
|
2496
2635
|
return cssClasses.filter(css => css).join(' ');
|
|
2497
2636
|
};
|
|
2498
2637
|
return (React__default["default"].createElement("span", { className: getCssClasses(), style: {
|
|
@@ -2501,9 +2640,9 @@ const TabIndicator = (props) => {
|
|
|
2501
2640
|
} }));
|
|
2502
2641
|
};
|
|
2503
2642
|
|
|
2504
|
-
var css_248z$
|
|
2505
|
-
var styles$
|
|
2506
|
-
styleInject(css_248z$
|
|
2643
|
+
var css_248z$3 = ".Tabs-module_tabs__YyRTZ {\n display: flex;\n position: relative;\n}";
|
|
2644
|
+
var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
2645
|
+
styleInject(css_248z$3);
|
|
2507
2646
|
|
|
2508
2647
|
const Tabs = (props) => {
|
|
2509
2648
|
const { children, className, fixed, color, indicatorColor, onChange, value } = props;
|
|
@@ -2518,7 +2657,7 @@ const Tabs = (props) => {
|
|
|
2518
2657
|
}, [children, value]);
|
|
2519
2658
|
const getCssClasses = () => {
|
|
2520
2659
|
const cssClasses = [];
|
|
2521
|
-
cssClasses.push(styles$
|
|
2660
|
+
cssClasses.push(styles$3.tabs);
|
|
2522
2661
|
className && cssClasses.push(className);
|
|
2523
2662
|
return cssClasses.filter(css => css).join(' ');
|
|
2524
2663
|
};
|
|
@@ -2542,15 +2681,15 @@ const Tabs = (props) => {
|
|
|
2542
2681
|
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
2682
|
};
|
|
2544
2683
|
|
|
2545
|
-
var css_248z$
|
|
2546
|
-
var styles$
|
|
2547
|
-
styleInject(css_248z$
|
|
2684
|
+
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}";
|
|
2685
|
+
var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
|
|
2686
|
+
styleInject(css_248z$2);
|
|
2548
2687
|
|
|
2549
2688
|
const Tab = (props) => {
|
|
2550
2689
|
const { label, className, isActive, disabled, value, onClick } = props;
|
|
2551
2690
|
const getCssClasses = () => {
|
|
2552
2691
|
const cssClasses = [];
|
|
2553
|
-
cssClasses.push(styles$
|
|
2692
|
+
cssClasses.push(styles$2.tab);
|
|
2554
2693
|
if (isActive) {
|
|
2555
2694
|
cssClasses.push(`show active`);
|
|
2556
2695
|
}
|
|
@@ -2565,46 +2704,6 @@ const TabPanel = (props) => {
|
|
|
2565
2704
|
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
2705
|
};
|
|
2567
2706
|
|
|
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
2707
|
const HourSelect = (props) => {
|
|
2609
2708
|
const { className, value = 0, id, name, disabled, onChange } = props;
|
|
2610
2709
|
const [newValue, setNewValue] = React.useState(value);
|
|
@@ -2869,6 +2968,7 @@ exports.MenuDivider = MenuDivider;
|
|
|
2869
2968
|
exports.MenuItem = MenuItem;
|
|
2870
2969
|
exports.MenuToggle = MenuToggle;
|
|
2871
2970
|
exports.MilliSecondSelect = MilliSecondSelect;
|
|
2971
|
+
exports.MinValidator = MinValidator;
|
|
2872
2972
|
exports.MinuteSelect = MinuteSelect;
|
|
2873
2973
|
exports.Modal = Modal;
|
|
2874
2974
|
exports.ModalBody = ModalBody;
|
|
@@ -2883,6 +2983,10 @@ exports.STATUS = STATUS;
|
|
|
2883
2983
|
exports.SecondSelect = SecondSelect;
|
|
2884
2984
|
exports.Select = Select;
|
|
2885
2985
|
exports.Sidebar = Sidebar;
|
|
2986
|
+
exports.SkeletonAvatar = SkeletonAvatar;
|
|
2987
|
+
exports.SkeletonFooter = SkeletonFooter;
|
|
2988
|
+
exports.SkeletonImage = SkeletonImage;
|
|
2989
|
+
exports.SkeletonText = SkeletonText;
|
|
2886
2990
|
exports.Snackbar = Snackbar;
|
|
2887
2991
|
exports.SpeedDial = SpeedDial;
|
|
2888
2992
|
exports.SpeedDialAction = SpeedDialAction;
|