react-asc 23.7.0 → 23.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Backdrop/Backdrop.d.ts +2 -3
- package/components/Menu/Menu.d.ts +2 -2
- package/components/Menu/MenuBody.d.ts +3 -3
- package/components/Menu/MenuItem.d.ts +3 -8
- package/components/Modal/Modal.d.ts +2 -1
- package/components/index.d.ts +1 -0
- package/index.es.js +238 -249
- package/index.js +237 -247
- package/package.json +1 -1
- package/react-asc.scss +0 -11
- package/components/Menu/MenuBackdrop.d.ts +0 -6
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$13 = ".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$13 = {"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$13);
|
|
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$13.alert);
|
|
107
107
|
if (variant === exports.VARIANT.contained) {
|
|
108
|
-
cssClasses.push(styles$
|
|
109
|
-
cssClasses.push(styles$
|
|
108
|
+
cssClasses.push(styles$13.contained);
|
|
109
|
+
cssClasses.push(styles$13[color]);
|
|
110
110
|
}
|
|
111
111
|
if (variant === exports.VARIANT.outline) {
|
|
112
|
-
cssClasses.push(styles$
|
|
113
|
-
cssClasses.push(styles$
|
|
112
|
+
cssClasses.push(styles$13.outline);
|
|
113
|
+
cssClasses.push(styles$13[color]);
|
|
114
114
|
}
|
|
115
|
-
shadow && cssClasses.push(styles$
|
|
115
|
+
shadow && cssClasses.push(styles$13['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$12 = ".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$12 = {"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$12);
|
|
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$12[color]);
|
|
131
|
+
cssClasses.push(styles$12.appbar);
|
|
132
|
+
shadow && cssClasses.push(styles$12['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$11 = ".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$11 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
141
|
+
styleInject(css_248z$11);
|
|
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$11.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$10 = ".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$10 = {"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$10);
|
|
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$10.icon);
|
|
163
|
+
iconColor && cssClasses.push(styles$10[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$$ = ".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$$ = {"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$$);
|
|
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$$[color]);
|
|
179
|
+
cssClasses.push(styles$$[variant]);
|
|
180
|
+
cssClasses.push(styles$$[size]);
|
|
181
|
+
cssClasses.push(styles$$.iconButton);
|
|
182
|
+
isActive && cssClasses.push(styles$$.active);
|
|
183
|
+
disabled && cssClasses.push(styles$$.disabled);
|
|
184
|
+
shadow && cssClasses.push(styles$$.shadow);
|
|
185
185
|
className && cssClasses.push(className);
|
|
186
186
|
return cssClasses.filter(css => css).join(' ');
|
|
187
187
|
};
|
|
@@ -316,9 +316,21 @@ const useOnDestroy = (callBack) => {
|
|
|
316
316
|
}, []);
|
|
317
317
|
};
|
|
318
318
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
319
|
+
const Portal = ({ children, target = document.body, className }) => {
|
|
320
|
+
const containerEl = React.useMemo(() => document.createElement('div'), []);
|
|
321
|
+
React.useEffect(() => {
|
|
322
|
+
className && className.split(' ').forEach(cssClass => containerEl.classList.add(cssClass));
|
|
323
|
+
target.appendChild(containerEl);
|
|
324
|
+
return () => {
|
|
325
|
+
target.removeChild(containerEl);
|
|
326
|
+
};
|
|
327
|
+
}, []);
|
|
328
|
+
return reactDom.createPortal(children, containerEl);
|
|
329
|
+
};
|
|
330
|
+
|
|
331
|
+
var css_248z$_ = ".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}";
|
|
332
|
+
var styles$_ = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
333
|
+
styleInject(css_248z$_);
|
|
322
334
|
|
|
323
335
|
const Backdrop = (props) => {
|
|
324
336
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -328,45 +340,45 @@ const Backdrop = (props) => {
|
|
|
328
340
|
};
|
|
329
341
|
const getCssClasses = () => {
|
|
330
342
|
const cssClasses = [];
|
|
331
|
-
cssClasses.push(styles$
|
|
332
|
-
isTransparent && cssClasses.push(styles$
|
|
343
|
+
cssClasses.push(styles$_.backdrop);
|
|
344
|
+
isTransparent && cssClasses.push(styles$_['isTransparent']);
|
|
333
345
|
return cssClasses.filter(css => css).join(' ');
|
|
334
346
|
};
|
|
335
347
|
const getStyles = () => {
|
|
336
|
-
|
|
337
|
-
return styles;
|
|
348
|
+
return Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
|
|
338
349
|
};
|
|
339
|
-
return (
|
|
350
|
+
return (React__default["default"].createElement(Portal, { className: 'backdrop-root', target: target },
|
|
351
|
+
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
|
|
340
352
|
};
|
|
341
353
|
|
|
342
|
-
var css_248z
|
|
343
|
-
var styles
|
|
344
|
-
styleInject(css_248z
|
|
354
|
+
var css_248z$Z = ".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}";
|
|
355
|
+
var styles$Z = {"list":"List-module_list__gpZ41"};
|
|
356
|
+
styleInject(css_248z$Z);
|
|
345
357
|
|
|
346
358
|
const List = (props) => {
|
|
347
359
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
348
360
|
const getCssClasses = () => {
|
|
349
361
|
const cssClasses = [];
|
|
350
|
-
isFlush && cssClasses.push(styles
|
|
351
|
-
cssClasses.push(styles
|
|
362
|
+
isFlush && cssClasses.push(styles$Z.flush);
|
|
363
|
+
cssClasses.push(styles$Z.list);
|
|
352
364
|
className && cssClasses.push(className);
|
|
353
365
|
return cssClasses.filter(css => css).join(' ');
|
|
354
366
|
};
|
|
355
367
|
return (React__default["default"].createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
356
368
|
};
|
|
357
369
|
|
|
358
|
-
var css_248z$
|
|
359
|
-
var styles$
|
|
360
|
-
styleInject(css_248z$
|
|
370
|
+
var css_248z$Y = ".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}";
|
|
371
|
+
var styles$Y = {"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"};
|
|
372
|
+
styleInject(css_248z$Y);
|
|
361
373
|
|
|
362
374
|
const ListItem = (props) => {
|
|
363
375
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
364
376
|
const getCssClasses = () => {
|
|
365
377
|
const cssClasses = [];
|
|
366
|
-
cssClasses.push(styles$
|
|
367
|
-
color && cssClasses.push(styles$
|
|
368
|
-
active && cssClasses.push(styles$
|
|
369
|
-
disabled && cssClasses.push(styles$
|
|
378
|
+
cssClasses.push(styles$Y.listItem);
|
|
379
|
+
color && cssClasses.push(styles$Y[color]);
|
|
380
|
+
active && cssClasses.push(styles$Y['active']);
|
|
381
|
+
disabled && cssClasses.push(styles$Y['disabled']);
|
|
370
382
|
className && cssClasses.push(className);
|
|
371
383
|
return cssClasses.filter(css => css).join(' ');
|
|
372
384
|
};
|
|
@@ -376,42 +388,42 @@ const ListItem = (props) => {
|
|
|
376
388
|
return (React__default["default"].createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
377
389
|
};
|
|
378
390
|
|
|
379
|
-
var css_248z$
|
|
380
|
-
var styles$
|
|
381
|
-
styleInject(css_248z$
|
|
391
|
+
var css_248z$X = ".ListItemAvatar-module_avatar__sVWfR {\n display: flex;\n align-items: center;\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%;\n}";
|
|
392
|
+
var styles$X = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
393
|
+
styleInject(css_248z$X);
|
|
382
394
|
|
|
383
395
|
const ListItemAvatar = (_a) => {
|
|
384
396
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
385
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
397
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$X.avatar }, rest), avatar));
|
|
386
398
|
};
|
|
387
399
|
|
|
388
|
-
var css_248z$
|
|
389
|
-
var styles$
|
|
390
|
-
styleInject(css_248z$
|
|
400
|
+
var css_248z$W = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px;\n}";
|
|
401
|
+
var styles$W = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
402
|
+
styleInject(css_248z$W);
|
|
391
403
|
|
|
392
404
|
const ListItemIcon = (_a) => {
|
|
393
405
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
394
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
406
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$W.icon }, rest), icon));
|
|
395
407
|
};
|
|
396
408
|
|
|
397
|
-
var css_248z$
|
|
398
|
-
var styles$
|
|
399
|
-
styleInject(css_248z$
|
|
409
|
+
var css_248z$V = ".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}";
|
|
410
|
+
var styles$V = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
411
|
+
styleInject(css_248z$V);
|
|
400
412
|
|
|
401
413
|
const ListItemAction = (_a) => {
|
|
402
414
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
403
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
415
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
404
416
|
};
|
|
405
417
|
|
|
406
|
-
var css_248z$
|
|
407
|
-
var styles$
|
|
408
|
-
styleInject(css_248z$
|
|
418
|
+
var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
419
|
+
var styles$U = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
420
|
+
styleInject(css_248z$U);
|
|
409
421
|
|
|
410
422
|
const ListItemText = (_a) => {
|
|
411
423
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
412
424
|
const getCssClasses = () => {
|
|
413
425
|
const cssClasses = [];
|
|
414
|
-
cssClasses.push(styles$
|
|
426
|
+
cssClasses.push(styles$U.listItemText);
|
|
415
427
|
return cssClasses.filter(css => css).join(' ');
|
|
416
428
|
};
|
|
417
429
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -422,9 +434,9 @@ const ListItemText = (_a) => {
|
|
|
422
434
|
const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
|
|
423
435
|
const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
424
436
|
|
|
425
|
-
var css_248z$
|
|
426
|
-
var styles$
|
|
427
|
-
styleInject(css_248z$
|
|
437
|
+
var css_248z$T = ".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}";
|
|
438
|
+
var styles$T = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
439
|
+
styleInject(css_248z$T);
|
|
428
440
|
|
|
429
441
|
// preset value
|
|
430
442
|
// enter -> delay? -> show results
|
|
@@ -470,7 +482,7 @@ const AutoComplete = (props) => {
|
|
|
470
482
|
const getCssClass = () => {
|
|
471
483
|
const cssClasses = [];
|
|
472
484
|
className && cssClasses.push(className);
|
|
473
|
-
cssClasses.push(styles$
|
|
485
|
+
cssClasses.push(styles$T.select);
|
|
474
486
|
return cssClasses.filter(r => r).join(' ');
|
|
475
487
|
};
|
|
476
488
|
const show = () => setIsShow(true);
|
|
@@ -494,28 +506,28 @@ const AutoComplete = (props) => {
|
|
|
494
506
|
setModel('');
|
|
495
507
|
setSearchText('');
|
|
496
508
|
};
|
|
497
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
509
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$T.selectContainer },
|
|
498
510
|
React__default["default"].createElement("div", { className: "d-flex" },
|
|
499
511
|
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
512
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
501
513
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
502
514
|
isShow &&
|
|
503
515
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
504
|
-
React__default["default"].createElement("div", { className: styles$
|
|
516
|
+
React__default["default"].createElement("div", { className: styles$T.selectMenu },
|
|
505
517
|
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
518
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
507
519
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
508
520
|
};
|
|
509
521
|
|
|
510
|
-
var css_248z$
|
|
511
|
-
var styles$
|
|
512
|
-
styleInject(css_248z$
|
|
522
|
+
var css_248z$S = ".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}";
|
|
523
|
+
var styles$S = {"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"};
|
|
524
|
+
styleInject(css_248z$S);
|
|
513
525
|
|
|
514
526
|
const Badge = (props) => {
|
|
515
527
|
const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
516
528
|
const [cssClassName] = useCssClasses([
|
|
517
|
-
styles$
|
|
518
|
-
styles$
|
|
529
|
+
styles$S.badge,
|
|
530
|
+
styles$S[color],
|
|
519
531
|
className
|
|
520
532
|
]);
|
|
521
533
|
return (React__default["default"].createElement(BadgeContainer, null,
|
|
@@ -525,15 +537,15 @@ const Badge = (props) => {
|
|
|
525
537
|
const BadgeContainer = (props) => {
|
|
526
538
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
527
539
|
const [cssClassName] = useCssClasses([
|
|
528
|
-
styles$
|
|
540
|
+
styles$S.badgeContainer,
|
|
529
541
|
className,
|
|
530
542
|
]);
|
|
531
543
|
return (React__default["default"].createElement("div", Object.assign({ className: cssClassName }, rest), children));
|
|
532
544
|
};
|
|
533
545
|
|
|
534
|
-
var css_248z$
|
|
535
|
-
var styles$
|
|
536
|
-
styleInject(css_248z$
|
|
546
|
+
var css_248z$R = ".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}";
|
|
547
|
+
var styles$R = {"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"};
|
|
548
|
+
styleInject(css_248z$R);
|
|
537
549
|
|
|
538
550
|
const ButtonContext = React.createContext({
|
|
539
551
|
color: null
|
|
@@ -545,19 +557,19 @@ const Button = (props) => {
|
|
|
545
557
|
const buttonContext = useButtonContext();
|
|
546
558
|
const getCssClasses = () => {
|
|
547
559
|
const cssClasses = [];
|
|
548
|
-
cssClasses.push(styles$
|
|
560
|
+
cssClasses.push(styles$R.button);
|
|
549
561
|
const buttonColor = buttonContext.color || color;
|
|
550
562
|
if (variant !== 'outline' && variant !== 'text') {
|
|
551
|
-
cssClasses.push(styles$
|
|
552
|
-
cssClasses.push(styles$
|
|
563
|
+
cssClasses.push(styles$R.btnContained);
|
|
564
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
553
565
|
}
|
|
554
566
|
if (variant === 'outline') {
|
|
555
|
-
cssClasses.push(styles$
|
|
556
|
-
cssClasses.push(styles$
|
|
567
|
+
cssClasses.push(styles$R.btnOutline);
|
|
568
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
557
569
|
}
|
|
558
570
|
if (variant === 'text') {
|
|
559
|
-
cssClasses.push(styles$
|
|
560
|
-
cssClasses.push(styles$
|
|
571
|
+
cssClasses.push(styles$R.btnText);
|
|
572
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
561
573
|
}
|
|
562
574
|
if (isRounded && variant !== 'text') {
|
|
563
575
|
cssClasses.push(`rounded-pill`);
|
|
@@ -565,29 +577,29 @@ const Button = (props) => {
|
|
|
565
577
|
if (isActive) {
|
|
566
578
|
cssClasses.push('active');
|
|
567
579
|
}
|
|
568
|
-
shadow && cssClasses.push(styles$
|
|
569
|
-
block && cssClasses.push(styles$
|
|
580
|
+
shadow && cssClasses.push(styles$R.shadow);
|
|
581
|
+
block && cssClasses.push(styles$R.block);
|
|
570
582
|
className && cssClasses.push(className);
|
|
571
583
|
return cssClasses.filter(css => css).join(' ');
|
|
572
584
|
};
|
|
573
585
|
return (React__default["default"].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
574
586
|
React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
|
|
575
587
|
startIcon &&
|
|
576
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
588
|
+
React__default["default"].createElement(Icon, { className: styles$R.startIcon }, startIcon),
|
|
577
589
|
children,
|
|
578
590
|
endIcon &&
|
|
579
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
591
|
+
React__default["default"].createElement(Icon, { className: styles$R.endIcon }, endIcon))));
|
|
580
592
|
};
|
|
581
593
|
|
|
582
|
-
var css_248z$
|
|
583
|
-
var styles$
|
|
584
|
-
styleInject(css_248z$
|
|
594
|
+
var css_248z$Q = ".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}";
|
|
595
|
+
var styles$Q = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
596
|
+
styleInject(css_248z$Q);
|
|
585
597
|
|
|
586
598
|
const ButtonGroup = (props) => {
|
|
587
599
|
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
588
600
|
const getCssClasses = () => {
|
|
589
601
|
const cssClasses = [];
|
|
590
|
-
cssClasses.push(styles$
|
|
602
|
+
cssClasses.push(styles$Q.buttonGroup);
|
|
591
603
|
className && cssClasses.push(className);
|
|
592
604
|
return cssClasses.filter(css => css).join(' ');
|
|
593
605
|
};
|
|
@@ -595,15 +607,15 @@ const ButtonGroup = (props) => {
|
|
|
595
607
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
596
608
|
};
|
|
597
609
|
|
|
598
|
-
var css_248z$
|
|
599
|
-
var styles$
|
|
600
|
-
styleInject(css_248z$
|
|
610
|
+
var css_248z$P = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0;\n}";
|
|
611
|
+
var styles$P = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
612
|
+
styleInject(css_248z$P);
|
|
601
613
|
|
|
602
614
|
const Breadcrumb = (props) => {
|
|
603
615
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
604
616
|
const getCssClasses = () => {
|
|
605
617
|
const cssClasses = [];
|
|
606
|
-
cssClasses.push(styles$
|
|
618
|
+
cssClasses.push(styles$P.breadcrumb);
|
|
607
619
|
className && cssClasses.push(className);
|
|
608
620
|
return cssClasses.filter(css => css).join(' ');
|
|
609
621
|
};
|
|
@@ -613,15 +625,15 @@ const Breadcrumb = (props) => {
|
|
|
613
625
|
|
|
614
626
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
615
627
|
|
|
616
|
-
var css_248z$
|
|
617
|
-
var styles$
|
|
618
|
-
styleInject(css_248z$
|
|
628
|
+
var css_248z$O = ".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}";
|
|
629
|
+
var styles$O = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
630
|
+
styleInject(css_248z$O);
|
|
619
631
|
|
|
620
632
|
const BreadcrumbItem = (props) => {
|
|
621
633
|
const { children, className, isActive, onClick } = props;
|
|
622
634
|
const getCssClasses = () => {
|
|
623
635
|
const cssClasses = [];
|
|
624
|
-
cssClasses.push(styles$
|
|
636
|
+
cssClasses.push(styles$O.breadcrumbItem);
|
|
625
637
|
className && cssClasses.push(className);
|
|
626
638
|
isActive && cssClasses.push('active');
|
|
627
639
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -633,115 +645,115 @@ const BreadcrumbItem = (props) => {
|
|
|
633
645
|
React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React__default["default"].createElement("a", null, label) }, children)));
|
|
634
646
|
};
|
|
635
647
|
|
|
636
|
-
var css_248z$
|
|
637
|
-
var styles$
|
|
638
|
-
styleInject(css_248z$
|
|
648
|
+
var css_248z$N = ".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}";
|
|
649
|
+
var styles$N = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
650
|
+
styleInject(css_248z$N);
|
|
639
651
|
|
|
640
652
|
const Card = (props) => {
|
|
641
653
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
642
654
|
const getCssClasses = () => {
|
|
643
655
|
const cssClasses = [];
|
|
644
|
-
cssClasses.push(styles$
|
|
645
|
-
shadow && cssClasses.push(styles$
|
|
656
|
+
cssClasses.push(styles$N.card);
|
|
657
|
+
shadow && cssClasses.push(styles$N.shadow);
|
|
646
658
|
className && cssClasses.push(className);
|
|
647
659
|
return cssClasses.filter(css => css).join(' ');
|
|
648
660
|
};
|
|
649
661
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
650
662
|
};
|
|
651
663
|
|
|
652
|
-
var css_248z$
|
|
653
|
-
var styles$
|
|
654
|
-
styleInject(css_248z$
|
|
664
|
+
var css_248z$M = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
665
|
+
var styles$M = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
666
|
+
styleInject(css_248z$M);
|
|
655
667
|
|
|
656
668
|
const CardBody = (props) => {
|
|
657
669
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
658
670
|
const getCssClasses = () => {
|
|
659
671
|
const cssClasses = [];
|
|
660
|
-
cssClasses.push(styles$
|
|
672
|
+
cssClasses.push(styles$M.cardBody);
|
|
661
673
|
className && cssClasses.push(className);
|
|
662
674
|
return cssClasses.filter(css => css).join(' ');
|
|
663
675
|
};
|
|
664
676
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
665
677
|
};
|
|
666
678
|
|
|
667
|
-
var css_248z$
|
|
668
|
-
var styles$
|
|
669
|
-
styleInject(css_248z$
|
|
679
|
+
var css_248z$L = ".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}";
|
|
680
|
+
var styles$L = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
681
|
+
styleInject(css_248z$L);
|
|
670
682
|
|
|
671
683
|
const CardFooter = (props) => {
|
|
672
684
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
673
685
|
const getCssClasses = () => {
|
|
674
686
|
const cssClasses = [];
|
|
675
|
-
cssClasses.push(styles$
|
|
687
|
+
cssClasses.push(styles$L.cardFooter);
|
|
676
688
|
className && cssClasses.push(className);
|
|
677
689
|
return cssClasses.filter(css => css).join(' ');
|
|
678
690
|
};
|
|
679
691
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
680
692
|
};
|
|
681
693
|
|
|
682
|
-
var css_248z$
|
|
683
|
-
var styles$
|
|
684
|
-
styleInject(css_248z$
|
|
694
|
+
var css_248z$K = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
695
|
+
var styles$K = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
696
|
+
styleInject(css_248z$K);
|
|
685
697
|
|
|
686
698
|
const CardSubtitle = (props) => {
|
|
687
699
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
688
700
|
const getCssClasses = () => {
|
|
689
701
|
const cssClasses = [];
|
|
690
|
-
cssClasses.push(styles$
|
|
702
|
+
cssClasses.push(styles$K.cardSubtitle);
|
|
691
703
|
className && cssClasses.push(className);
|
|
692
704
|
return cssClasses.filter(css => css).join(' ');
|
|
693
705
|
};
|
|
694
706
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
695
707
|
};
|
|
696
708
|
|
|
697
|
-
var css_248z$
|
|
698
|
-
var styles$
|
|
699
|
-
styleInject(css_248z$
|
|
709
|
+
var css_248z$J = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
710
|
+
var styles$J = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
711
|
+
styleInject(css_248z$J);
|
|
700
712
|
|
|
701
713
|
const CardText = (props) => {
|
|
702
714
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
703
715
|
const getCssClasses = () => {
|
|
704
716
|
const cssClasses = [];
|
|
705
|
-
cssClasses.push(styles$
|
|
717
|
+
cssClasses.push(styles$J.cardText);
|
|
706
718
|
className && cssClasses.push(className);
|
|
707
719
|
return cssClasses.filter(css => css).join(' ');
|
|
708
720
|
};
|
|
709
721
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
710
722
|
};
|
|
711
723
|
|
|
712
|
-
var css_248z$
|
|
713
|
-
var styles$
|
|
714
|
-
styleInject(css_248z$
|
|
724
|
+
var css_248z$I = ".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}";
|
|
725
|
+
var styles$I = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
726
|
+
styleInject(css_248z$I);
|
|
715
727
|
|
|
716
728
|
const CardTitle = (props) => {
|
|
717
729
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
718
730
|
const getCssClasses = () => {
|
|
719
731
|
const cssClasses = [];
|
|
720
|
-
cssClasses.push(styles$
|
|
732
|
+
cssClasses.push(styles$I.cardTitle);
|
|
721
733
|
className && cssClasses.push(className);
|
|
722
734
|
return cssClasses.filter(css => css).join(' ');
|
|
723
735
|
};
|
|
724
736
|
return (React__default["default"].createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
725
737
|
};
|
|
726
738
|
|
|
727
|
-
var css_248z$
|
|
728
|
-
var styles$
|
|
729
|
-
styleInject(css_248z$
|
|
739
|
+
var css_248z$H = ".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}";
|
|
740
|
+
var styles$H = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
741
|
+
styleInject(css_248z$H);
|
|
730
742
|
|
|
731
743
|
const CardImage = (props) => {
|
|
732
744
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
733
745
|
const getCssClasses = () => {
|
|
734
746
|
const cssClasses = [];
|
|
735
|
-
cssClasses.push(styles$
|
|
747
|
+
cssClasses.push(styles$H.cardImage);
|
|
736
748
|
className && cssClasses.push(className);
|
|
737
749
|
return cssClasses.filter(css => css).join(' ');
|
|
738
750
|
};
|
|
739
751
|
return (React__default["default"].createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
740
752
|
};
|
|
741
753
|
|
|
742
|
-
var css_248z$
|
|
743
|
-
var styles$
|
|
744
|
-
styleInject(css_248z$
|
|
754
|
+
var css_248z$G = ".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}";
|
|
755
|
+
var styles$G = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
756
|
+
styleInject(css_248z$G);
|
|
745
757
|
|
|
746
758
|
const Checkbox = (props) => {
|
|
747
759
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -770,8 +782,8 @@ const Checkbox = (props) => {
|
|
|
770
782
|
};
|
|
771
783
|
const getCssClassesLabel = () => {
|
|
772
784
|
const cssClasses = [];
|
|
773
|
-
cssClasses.push(styles$
|
|
774
|
-
disabled && cssClasses.push(styles$
|
|
785
|
+
cssClasses.push(styles$G.checkboxLabel);
|
|
786
|
+
disabled && cssClasses.push(styles$G['disabled']);
|
|
775
787
|
return cssClasses.filter(css => css).join(' ');
|
|
776
788
|
};
|
|
777
789
|
const getIcon = () => {
|
|
@@ -784,24 +796,24 @@ const Checkbox = (props) => {
|
|
|
784
796
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
785
797
|
}
|
|
786
798
|
};
|
|
787
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
799
|
+
return (React__default["default"].createElement("div", { className: styles$G.checkboxContainer },
|
|
788
800
|
React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
789
801
|
React__default["default"].createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
790
802
|
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
803
|
};
|
|
792
804
|
|
|
793
|
-
var css_248z$
|
|
794
|
-
var styles$
|
|
795
|
-
styleInject(css_248z$
|
|
805
|
+
var css_248z$F = ".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}";
|
|
806
|
+
var styles$F = {"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"};
|
|
807
|
+
styleInject(css_248z$F);
|
|
796
808
|
|
|
797
809
|
const Chip = (props) => {
|
|
798
810
|
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
811
|
const getCssClass = () => {
|
|
800
812
|
const cssClasses = [];
|
|
801
|
-
cssClasses.push(styles$
|
|
802
|
-
cssClasses.push(styles$
|
|
803
|
-
shadow && cssClasses.push(styles$
|
|
804
|
-
onClick && cssClasses.push(styles$
|
|
813
|
+
cssClasses.push(styles$F.chip);
|
|
814
|
+
cssClasses.push(styles$F[color]);
|
|
815
|
+
shadow && cssClasses.push(styles$F['shadow']);
|
|
816
|
+
onClick && cssClasses.push(styles$F['clickable']);
|
|
805
817
|
className && cssClasses.push(className);
|
|
806
818
|
return cssClasses.filter(r => r).join(' ');
|
|
807
819
|
};
|
|
@@ -811,7 +823,7 @@ const Chip = (props) => {
|
|
|
811
823
|
};
|
|
812
824
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
813
825
|
React__default["default"].createElement("span", null, children),
|
|
814
|
-
isDeletable && (React__default["default"].createElement("div", { className: styles$
|
|
826
|
+
isDeletable && (React__default["default"].createElement("div", { className: styles$F.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
815
827
|
};
|
|
816
828
|
|
|
817
829
|
const CssTransition = (props) => {
|
|
@@ -889,9 +901,9 @@ const CssTransition = (props) => {
|
|
|
889
901
|
React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
890
902
|
};
|
|
891
903
|
|
|
892
|
-
var css_248z$
|
|
893
|
-
var styles$
|
|
894
|
-
styleInject(css_248z$
|
|
904
|
+
var css_248z$E = ".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}";
|
|
905
|
+
var styles$E = {"column":"Column-module_column__fcTgl"};
|
|
906
|
+
styleInject(css_248z$E);
|
|
895
907
|
|
|
896
908
|
const Column = (props) => {
|
|
897
909
|
const { children, className } = props,
|
|
@@ -909,22 +921,22 @@ const Column = (props) => {
|
|
|
909
921
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
910
922
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
911
923
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
912
|
-
cssClasses.push(styles$
|
|
924
|
+
cssClasses.push(styles$E.column);
|
|
913
925
|
className && cssClasses.push(className);
|
|
914
926
|
return cssClasses.filter(css => css).join(' ');
|
|
915
927
|
};
|
|
916
928
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
917
929
|
};
|
|
918
930
|
|
|
919
|
-
var css_248z$
|
|
920
|
-
var styles$
|
|
921
|
-
styleInject(css_248z$
|
|
931
|
+
var css_248z$D = ".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}";
|
|
932
|
+
var styles$D = {"row":"Row-module_row__bTIWp"};
|
|
933
|
+
styleInject(css_248z$D);
|
|
922
934
|
|
|
923
935
|
const Row = (_a) => {
|
|
924
936
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
925
937
|
const getCssClasses = () => {
|
|
926
938
|
const cssClasses = [];
|
|
927
|
-
cssClasses.push(styles$
|
|
939
|
+
cssClasses.push(styles$D.row);
|
|
928
940
|
className && cssClasses.push(className);
|
|
929
941
|
direction && cssClasses.push(`flex-${direction}`);
|
|
930
942
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -932,15 +944,15 @@ const Row = (_a) => {
|
|
|
932
944
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
933
945
|
};
|
|
934
946
|
|
|
935
|
-
var css_248z$
|
|
936
|
-
var styles$
|
|
937
|
-
styleInject(css_248z$
|
|
947
|
+
var css_248z$C = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
948
|
+
var styles$C = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
949
|
+
styleInject(css_248z$C);
|
|
938
950
|
|
|
939
951
|
const FormLabel = (_a) => {
|
|
940
952
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
941
953
|
const getCssClasses = () => {
|
|
942
954
|
const cssClasses = [];
|
|
943
|
-
cssClasses.push(styles$
|
|
955
|
+
cssClasses.push(styles$C.formLabel);
|
|
944
956
|
className && cssClasses.push(className);
|
|
945
957
|
return cssClasses.filter(css => css).join(' ');
|
|
946
958
|
};
|
|
@@ -977,9 +989,9 @@ const FileInput = (props) => {
|
|
|
977
989
|
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
990
|
};
|
|
979
991
|
|
|
980
|
-
var css_248z$
|
|
981
|
-
var styles$
|
|
982
|
-
styleInject(css_248z$
|
|
992
|
+
var css_248z$B = ".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}";
|
|
993
|
+
var styles$B = {"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"};
|
|
994
|
+
styleInject(css_248z$B);
|
|
983
995
|
|
|
984
996
|
const Select = (props) => {
|
|
985
997
|
var _a, _b, _c;
|
|
@@ -992,9 +1004,9 @@ const Select = (props) => {
|
|
|
992
1004
|
const getCssClass = () => {
|
|
993
1005
|
const cssClasses = [];
|
|
994
1006
|
className && cssClasses.push(className);
|
|
995
|
-
disabled && cssClasses.push(styles$
|
|
996
|
-
readOnly && cssClasses.push(styles$
|
|
997
|
-
cssClasses.push(styles$
|
|
1007
|
+
disabled && cssClasses.push(styles$B['disabled']);
|
|
1008
|
+
readOnly && cssClasses.push(styles$B['readOnly']);
|
|
1009
|
+
cssClasses.push(styles$B.select);
|
|
998
1010
|
return cssClasses.filter(r => r).join(' ');
|
|
999
1011
|
};
|
|
1000
1012
|
React.useEffect(() => {
|
|
@@ -1116,50 +1128,50 @@ const Select = (props) => {
|
|
|
1116
1128
|
}
|
|
1117
1129
|
}
|
|
1118
1130
|
};
|
|
1119
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
1131
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$B.selectContainer },
|
|
1120
1132
|
React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1121
1133
|
!multiple && renderSingleViewModel(),
|
|
1122
1134
|
multiple &&
|
|
1123
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1135
|
+
React__default["default"].createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
|
|
1124
1136
|
React__default["default"].createElement(Icon, { className: "ml-2" },
|
|
1125
1137
|
React__default["default"].createElement(ChevronDownSolidIcon, null))),
|
|
1126
1138
|
isShow &&
|
|
1127
|
-
|
|
1128
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1139
|
+
React__default["default"].createElement(Portal, { className: 'backdrop-root' },
|
|
1140
|
+
React__default["default"].createElement("div", { className: styles$B.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
1141
|
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
1142
|
multiple &&
|
|
1131
1143
|
React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
1132
1144
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
1133
|
-
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))
|
|
1145
|
+
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1134
1146
|
};
|
|
1135
1147
|
|
|
1136
|
-
var css_248z$
|
|
1137
|
-
var styles$
|
|
1138
|
-
styleInject(css_248z$
|
|
1148
|
+
var css_248z$A = ".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}";
|
|
1149
|
+
var styles$A = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1150
|
+
styleInject(css_248z$A);
|
|
1139
1151
|
|
|
1140
1152
|
const Textarea = (props) => {
|
|
1141
1153
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1142
1154
|
const getCssClass = () => {
|
|
1143
1155
|
const cssClasses = [];
|
|
1144
|
-
cssClasses.push(styles$
|
|
1156
|
+
cssClasses.push(styles$A.textarea);
|
|
1145
1157
|
className && cssClasses.push(className);
|
|
1146
|
-
error && cssClasses.push(styles$
|
|
1158
|
+
error && cssClasses.push(styles$A['isInvalid']);
|
|
1147
1159
|
return cssClasses.filter(r => r).join(' ');
|
|
1148
1160
|
};
|
|
1149
1161
|
return (React__default["default"].createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1150
1162
|
};
|
|
1151
1163
|
|
|
1152
|
-
var css_248z$
|
|
1153
|
-
var styles$
|
|
1154
|
-
styleInject(css_248z$
|
|
1164
|
+
var css_248z$z = ".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}";
|
|
1165
|
+
var styles$z = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1166
|
+
styleInject(css_248z$z);
|
|
1155
1167
|
|
|
1156
1168
|
const FormInput = (props) => {
|
|
1157
1169
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1158
1170
|
const getCssClasses = () => {
|
|
1159
1171
|
const cssClasses = [];
|
|
1160
|
-
cssClasses.push(styles$
|
|
1172
|
+
cssClasses.push(styles$z.formInput);
|
|
1161
1173
|
className && cssClasses.push(className);
|
|
1162
|
-
!isValid && cssClasses.push(styles$
|
|
1174
|
+
!isValid && cssClasses.push(styles$z['isInvalid']);
|
|
1163
1175
|
return cssClasses.filter(css => css).join(' ');
|
|
1164
1176
|
};
|
|
1165
1177
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1207,12 +1219,12 @@ const FormHint = (props) => {
|
|
|
1207
1219
|
return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
|
|
1208
1220
|
};
|
|
1209
1221
|
|
|
1210
|
-
var css_248z$
|
|
1211
|
-
var styles$
|
|
1212
|
-
styleInject(css_248z$
|
|
1222
|
+
var css_248z$y = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
1223
|
+
var styles$y = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1224
|
+
styleInject(css_248z$y);
|
|
1213
1225
|
|
|
1214
1226
|
const FormError = (props) => {
|
|
1215
|
-
const { className = styles$
|
|
1227
|
+
const { className = styles$y.isInvalid, errors = [] } = props;
|
|
1216
1228
|
return (React__default["default"].createElement(React.Fragment, null, errors &&
|
|
1217
1229
|
React__default["default"].createElement("div", { className: className }, errors.map(e => React__default["default"].createElement("div", { key: e.validator }, e.message)))));
|
|
1218
1230
|
};
|
|
@@ -1543,34 +1555,22 @@ const DateSelect = (props) => {
|
|
|
1543
1555
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1544
1556
|
// };
|
|
1545
1557
|
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
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);
|
|
1558
|
+
var css_248z$x = ".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$x = {"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$x);
|
|
1561
1561
|
|
|
1562
1562
|
const Drawer = (props) => {
|
|
1563
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"]);
|
|
1564
1564
|
React.useEffect(() => {
|
|
1565
|
-
document.body.classList.add(styles$
|
|
1565
|
+
document.body.classList.add(styles$x.drawerOpen);
|
|
1566
1566
|
return () => {
|
|
1567
|
-
document.body.classList.remove(styles$
|
|
1567
|
+
document.body.classList.remove(styles$x.drawerOpen);
|
|
1568
1568
|
};
|
|
1569
1569
|
}, []);
|
|
1570
1570
|
const handleClickBackdrop = () => {
|
|
1571
1571
|
onClickBackdrop && onClickBackdrop();
|
|
1572
1572
|
};
|
|
1573
|
-
return (React__default["default"].createElement(Portal, { className: 'drawer-
|
|
1573
|
+
return (React__default["default"].createElement(Portal, { className: 'drawer-root', target: target },
|
|
1574
1574
|
React__default["default"].createElement(DrawerContent, Object.assign({ className: className, position: position, permanent: permanent, shadow: shadow }, rest), children),
|
|
1575
1575
|
!permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1576
1576
|
};
|
|
@@ -1578,10 +1578,10 @@ const DrawerContent = (props) => {
|
|
|
1578
1578
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1579
1579
|
const getCssClasses = () => {
|
|
1580
1580
|
const cssClasses = [];
|
|
1581
|
-
cssClasses.push(styles$
|
|
1582
|
-
shadow && cssClasses.push(styles$
|
|
1583
|
-
!!permanent && cssClasses.push(styles$
|
|
1584
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1581
|
+
cssClasses.push(styles$x.drawer);
|
|
1582
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
1583
|
+
!!permanent && cssClasses.push(styles$x['permanent']);
|
|
1584
|
+
position === 'left' ? cssClasses.push(styles$x['left']) : cssClasses.push(styles$x['right']);
|
|
1585
1585
|
className && cssClasses.push(className);
|
|
1586
1586
|
return cssClasses.filter(css => css).join(' ');
|
|
1587
1587
|
};
|
|
@@ -1595,9 +1595,9 @@ const DrawerContent = (props) => {
|
|
|
1595
1595
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1596
1596
|
};
|
|
1597
1597
|
|
|
1598
|
-
var css_248z$
|
|
1599
|
-
var styles$
|
|
1600
|
-
styleInject(css_248z$
|
|
1598
|
+
var css_248z$w = ".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: 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$w = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1600
|
+
styleInject(css_248z$w);
|
|
1601
1601
|
|
|
1602
1602
|
const MenuBody = (props) => {
|
|
1603
1603
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1628,30 +1628,26 @@ const MenuBody = (props) => {
|
|
|
1628
1628
|
}, [menuBodyRef]);
|
|
1629
1629
|
const getCssClasses = () => {
|
|
1630
1630
|
const cssClasses = [];
|
|
1631
|
-
cssClasses.push(styles$
|
|
1632
|
-
shadow && cssClasses.push(styles$
|
|
1631
|
+
cssClasses.push(styles$w.menuBody);
|
|
1632
|
+
shadow && cssClasses.push(styles$w.shadow);
|
|
1633
1633
|
className && cssClasses.push(className);
|
|
1634
1634
|
return cssClasses.filter(css => css).join(' ');
|
|
1635
1635
|
};
|
|
1636
1636
|
const handleClickBackdrop = () => {
|
|
1637
1637
|
onClickBackdrop && onClickBackdrop();
|
|
1638
1638
|
};
|
|
1639
|
-
return (
|
|
1640
|
-
React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1641
|
-
|
|
1639
|
+
return (React__default["default"].createElement(Portal, { className: 'menu-root' },
|
|
1640
|
+
React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1641
|
+
React__default["default"].createElement(List, null, children)),
|
|
1642
|
+
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
|
|
1642
1643
|
};
|
|
1643
1644
|
|
|
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);
|
|
1647
|
-
|
|
1648
1645
|
const Menu = (props) => {
|
|
1649
1646
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
1650
1647
|
const menuContainer = React.useRef(null);
|
|
1651
1648
|
const toggleContainerRef = React.useRef(null);
|
|
1652
1649
|
const getCssClasses = () => {
|
|
1653
1650
|
const cssClasses = [];
|
|
1654
|
-
cssClasses.push(styles$x.menu);
|
|
1655
1651
|
className && cssClasses.push(className);
|
|
1656
1652
|
return cssClasses.filter(css => css).join(' ');
|
|
1657
1653
|
};
|
|
@@ -1664,26 +1660,17 @@ const Menu = (props) => {
|
|
|
1664
1660
|
React__default["default"].createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1665
1661
|
};
|
|
1666
1662
|
|
|
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);
|
|
1670
|
-
|
|
1671
1663
|
const MenuItem = (props) => {
|
|
1672
|
-
const { children, onClick
|
|
1664
|
+
const { children, onClick } = props, rest = __rest(props, ["children", "onClick"]);
|
|
1673
1665
|
const getCssClasses = () => {
|
|
1674
1666
|
const cssClasses = [];
|
|
1675
|
-
cssClasses.push(styles$w.menuItem);
|
|
1676
|
-
if (type === 'header') {
|
|
1677
|
-
cssClasses.push(styles$w.menuItemHeader);
|
|
1678
|
-
}
|
|
1679
1667
|
return cssClasses.filter(css => css).join(' ');
|
|
1680
1668
|
};
|
|
1681
1669
|
const handleClick = (e) => {
|
|
1682
1670
|
e.stopPropagation();
|
|
1683
1671
|
onClick && onClick(e);
|
|
1684
1672
|
};
|
|
1685
|
-
return (React__default["default"].createElement(
|
|
1686
|
-
React__default["default"].createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
|
|
1673
|
+
return (React__default["default"].createElement(ListItem, Object.assign({ className: getCssClasses(), onClick: handleClick }, rest), children));
|
|
1687
1674
|
};
|
|
1688
1675
|
|
|
1689
1676
|
const MenuToggle = ({ children }) => {
|
|
@@ -1866,7 +1853,7 @@ var styles$l = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module
|
|
|
1866
1853
|
styleInject(css_248z$l);
|
|
1867
1854
|
|
|
1868
1855
|
const Modal = (props) => {
|
|
1869
|
-
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1856
|
+
const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1870
1857
|
const getCssClass = () => {
|
|
1871
1858
|
const cssClasses = [];
|
|
1872
1859
|
cssClasses.push(styles$l.modalDialog);
|
|
@@ -1883,17 +1870,19 @@ const Modal = (props) => {
|
|
|
1883
1870
|
};
|
|
1884
1871
|
}, []);
|
|
1885
1872
|
const handleClickBackdrop = () => {
|
|
1873
|
+
console.warn('backdrop clicked');
|
|
1886
1874
|
onBackdropClick && onBackdropClick();
|
|
1887
1875
|
};
|
|
1888
1876
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1889
|
-
React__default["default"].createElement(
|
|
1890
|
-
React__default["default"].createElement("div", { className:
|
|
1891
|
-
React__default["default"].createElement("div", { className:
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1877
|
+
React__default["default"].createElement(Portal, { className: 'modal-root', target: target },
|
|
1878
|
+
React__default["default"].createElement("div", { className: styles$l.modal },
|
|
1879
|
+
React__default["default"].createElement("div", { className: getCssClass() },
|
|
1880
|
+
React__default["default"].createElement("div", { className: styles$l.modalContent },
|
|
1881
|
+
header &&
|
|
1882
|
+
React__default["default"].createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1883
|
+
React__default["default"].createElement(ModalBody, null, children),
|
|
1884
|
+
footer &&
|
|
1885
|
+
React__default["default"].createElement(ModalFooter, null, footer))))),
|
|
1897
1886
|
React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1898
1887
|
};
|
|
1899
1888
|
|
|
@@ -2053,7 +2042,7 @@ const Tooltip = (props) => {
|
|
|
2053
2042
|
React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2054
2043
|
};
|
|
2055
2044
|
|
|
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}";
|
|
2045
|
+
var css_248z$j = ":root {\n --progress-height: 0.5rem;\n --progress-bg: #e9ecef;\n --progress-box-shadow: var(--shadow);\n --progress-bar-color: #fff;\n --progress-bar-bg: var(--primary);\n --progress-bar-transition: width 0.6s ease;\n}\n\n.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
2046
|
var styles$j = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2058
2047
|
styleInject(css_248z$j);
|
|
2059
2048
|
|
|
@@ -2092,7 +2081,7 @@ const ProgressBar = (props) => {
|
|
|
2092
2081
|
}
|
|
2093
2082
|
return `${width}%`;
|
|
2094
2083
|
};
|
|
2095
|
-
return (React__default["default"].createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2084
|
+
return (React__default["default"].createElement(Tooltip, { text: !indeterminate ? model === null || model === void 0 ? void 0 : model.toString() : '' },
|
|
2096
2085
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2097
2086
|
React__default["default"].createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2098
2087
|
};
|
|
@@ -2574,8 +2563,8 @@ const SkeletonImage = (props) => {
|
|
|
2574
2563
|
React__default["default"].createElement("div", { className: styles$6.img })));
|
|
2575
2564
|
};
|
|
2576
2565
|
|
|
2577
|
-
var css_248z$5 = "
|
|
2578
|
-
var styles$5 = {"
|
|
2566
|
+
var css_248z$5 = ":root {\n --table-bg: transparent;\n --table-accent-bg: transparent;\n --table-striped-color: #212529;\n --table-striped-bg: rgba(0, 0, 0, 0.05);\n --table-active-color: #212529;\n --table-active-bg: rgba(0, 0, 0, 0.1);\n --table-hover-color: #212529;\n --table-hover-bg: rgba(0, 0, 0, 0.075);\n}\n\n.Table-module_tableResponsive__ykttB {\n overflow-x: auto;\n}\n\n.Table-module_table__DHKNv {\n display: table;\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0px;\n min-width: 650px;\n}\n.Table-module_table__DHKNv thead {\n display: table-header-group;\n}\n.Table-module_table__DHKNv tbody {\n display: table-row-group;\n}\n.Table-module_table__DHKNv tr {\n color: inherit;\n display: table-row;\n vertical-align: middle;\n outline: 0px;\n}\n.Table-module_table__DHKNv th {\n font-size: 0.875rem;\n line-height: 1.5rem;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgb(224, 224, 224);\n text-align: left;\n padding: 16px;\n color: rgba(0, 0, 0, 0.87);\n border-collapse: collapse;\n border-spacing: 0px;\n}\n.Table-module_table__DHKNv td {\n font-size: 0.875rem;\n line-height: 1.43;\n letter-spacing: 0.01071em;\n display: table-cell;\n vertical-align: inherit;\n border-bottom: 1px solid rgb(224, 224, 224);\n padding: 16px;\n color: rgba(0, 0, 0, 0.87);\n flex-direction: row-reverse;\n}\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n background-color: var(--table-hover-bg);\n color: var(--table-hover-color);\n}";
|
|
2567
|
+
var styles$5 = {"tableResponsive":"Table-module_tableResponsive__ykttB","table":"Table-module_table__DHKNv","hover":"Table-module_hover__P6r3y"};
|
|
2579
2568
|
styleInject(css_248z$5);
|
|
2580
2569
|
|
|
2581
2570
|
const Table = (props) => {
|
|
@@ -2977,6 +2966,7 @@ exports.ModalHeader = ModalHeader;
|
|
|
2977
2966
|
exports.MonthSelect = MonthSelect;
|
|
2978
2967
|
exports.NumberSelect = NumberSelect;
|
|
2979
2968
|
exports.PlusSolidIcon = PlusSolidIcon;
|
|
2969
|
+
exports.Portal = Portal;
|
|
2980
2970
|
exports.ProgressBar = ProgressBar;
|
|
2981
2971
|
exports.Row = Row;
|
|
2982
2972
|
exports.STATUS = STATUS;
|