react-asc 23.7.2 → 25.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button/Button.d.ts +2 -2
- package/components/FloatingActionButton/FloatingActionButton.d.ts +1 -1
- package/components/Icon/Icon.d.ts +2 -1
- package/components/IconButton/IconButton.d.ts +1 -1
- package/components/List/ListItemAvatar.d.ts +1 -1
- package/components/List/ListItemIcon.d.ts +1 -1
- package/components/Menu/Menu.d.ts +2 -2
- package/components/Menu/MenuBody.d.ts +2 -2
- package/components/Menu/MenuItem.d.ts +3 -8
- package/components/Modal/GlobalModal.d.ts +3 -2
- package/components/Modal/modal.service.d.ts +5 -4
- package/components/Snackbar/snackbar.service.d.ts +3 -2
- package/components/SpeedDial/SpeedDialAction.d.ts +1 -1
- package/components/Tabs/Tab.d.ts +0 -2
- package/components/Tabs/TabContext.d.ts +8 -0
- package/components/Tabs/Tabs.d.ts +2 -6
- package/hooks/useWindowSize.d.ts +3 -2
- package/index.es.js +308 -253
- package/index.js +308 -252
- package/package.json +5 -5
- package/react-asc.scss +2 -0
package/index.js
CHANGED
|
@@ -9,8 +9,9 @@ var core = require('@popperjs/core');
|
|
|
9
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
10
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
|
+
var reactDom__default = /*#__PURE__*/_interopDefaultLegacy(reactDom);
|
|
12
13
|
|
|
13
|
-
|
|
14
|
+
/******************************************************************************
|
|
14
15
|
Copyright (c) Microsoft Corporation.
|
|
15
16
|
|
|
16
17
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -95,93 +96,93 @@ function styleInject(css, ref) {
|
|
|
95
96
|
}
|
|
96
97
|
}
|
|
97
98
|
|
|
98
|
-
var css_248z$
|
|
99
|
-
var styles$
|
|
100
|
-
styleInject(css_248z$
|
|
99
|
+
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}";
|
|
100
|
+
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"};
|
|
101
|
+
styleInject(css_248z$13);
|
|
101
102
|
|
|
102
103
|
const Alert = (props) => {
|
|
103
104
|
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
104
105
|
const getCssClasses = () => {
|
|
105
106
|
const cssClasses = [];
|
|
106
|
-
cssClasses.push(styles$
|
|
107
|
+
cssClasses.push(styles$13.alert);
|
|
107
108
|
if (variant === exports.VARIANT.contained) {
|
|
108
|
-
cssClasses.push(styles$
|
|
109
|
-
cssClasses.push(styles$
|
|
109
|
+
cssClasses.push(styles$13.contained);
|
|
110
|
+
cssClasses.push(styles$13[color]);
|
|
110
111
|
}
|
|
111
112
|
if (variant === exports.VARIANT.outline) {
|
|
112
|
-
cssClasses.push(styles$
|
|
113
|
-
cssClasses.push(styles$
|
|
113
|
+
cssClasses.push(styles$13.outline);
|
|
114
|
+
cssClasses.push(styles$13[color]);
|
|
114
115
|
}
|
|
115
|
-
shadow && cssClasses.push(styles$
|
|
116
|
+
shadow && cssClasses.push(styles$13['shadow']);
|
|
116
117
|
className && cssClasses.push(className);
|
|
117
118
|
return cssClasses.filter(r => r).join(' ');
|
|
118
119
|
};
|
|
119
120
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
120
121
|
};
|
|
121
122
|
|
|
122
|
-
var css_248z$
|
|
123
|
-
var styles$
|
|
124
|
-
styleInject(css_248z$
|
|
123
|
+
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: 0 4px 2px -2px var(--sadowColor);\n}";
|
|
124
|
+
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"};
|
|
125
|
+
styleInject(css_248z$12);
|
|
125
126
|
|
|
126
127
|
const AppBar = (props) => {
|
|
127
128
|
const { children, className, color = exports.COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
128
129
|
const getCssClasses = () => {
|
|
129
130
|
const cssClasses = [];
|
|
130
|
-
cssClasses.push(styles$
|
|
131
|
-
cssClasses.push(styles$
|
|
132
|
-
shadow && cssClasses.push(styles$
|
|
131
|
+
cssClasses.push(styles$12[color]);
|
|
132
|
+
cssClasses.push(styles$12.appbar);
|
|
133
|
+
shadow && cssClasses.push(styles$12['shadow']);
|
|
133
134
|
className && cssClasses.push(className);
|
|
134
135
|
return cssClasses.filter(r => r).join(' ');
|
|
135
136
|
};
|
|
136
137
|
return (React__default["default"].createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
137
138
|
};
|
|
138
139
|
|
|
139
|
-
var css_248z$
|
|
140
|
-
var styles$
|
|
141
|
-
styleInject(css_248z$
|
|
140
|
+
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}";
|
|
141
|
+
var styles$11 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
142
|
+
styleInject(css_248z$11);
|
|
142
143
|
|
|
143
144
|
const AppBarTitle = (props) => {
|
|
144
145
|
const { children, className, onClick } = props;
|
|
145
146
|
const getCssClass = () => {
|
|
146
147
|
const cssClasses = [];
|
|
147
|
-
cssClasses.push(styles$
|
|
148
|
+
cssClasses.push(styles$11.appbarTitle);
|
|
148
149
|
className && cssClasses.push(className);
|
|
149
150
|
return cssClasses.filter(r => r).join(' ');
|
|
150
151
|
};
|
|
151
152
|
return (React__default["default"].createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
152
153
|
};
|
|
153
154
|
|
|
154
|
-
var css_248z$
|
|
155
|
-
var styles$
|
|
156
|
-
styleInject(css_248z$
|
|
155
|
+
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}";
|
|
156
|
+
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"};
|
|
157
|
+
styleInject(css_248z$10);
|
|
157
158
|
|
|
158
159
|
const Icon = (props) => {
|
|
159
160
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
160
161
|
const getCssClasses = () => {
|
|
161
162
|
const cssClasses = [];
|
|
162
|
-
cssClasses.push(styles$
|
|
163
|
-
iconColor && cssClasses.push(styles$
|
|
163
|
+
cssClasses.push(styles$10.icon);
|
|
164
|
+
iconColor && cssClasses.push(styles$10[iconColor]);
|
|
164
165
|
className && cssClasses.push(className);
|
|
165
166
|
return cssClasses.filter(css => css).join(' ');
|
|
166
167
|
};
|
|
167
168
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
168
169
|
};
|
|
169
170
|
|
|
170
|
-
var css_248z
|
|
171
|
-
var styles
|
|
172
|
-
styleInject(css_248z
|
|
171
|
+
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}";
|
|
172
|
+
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"};
|
|
173
|
+
styleInject(css_248z$$);
|
|
173
174
|
|
|
174
175
|
const IconButton = (props) => {
|
|
175
176
|
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
177
|
const getCssClasses = () => {
|
|
177
178
|
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
|
|
179
|
+
cssClasses.push(styles$$[color]);
|
|
180
|
+
cssClasses.push(styles$$[variant]);
|
|
181
|
+
cssClasses.push(styles$$[size]);
|
|
182
|
+
cssClasses.push(styles$$.iconButton);
|
|
183
|
+
isActive && cssClasses.push(styles$$.active);
|
|
184
|
+
disabled && cssClasses.push(styles$$.disabled);
|
|
185
|
+
shadow && cssClasses.push(styles$$.shadow);
|
|
185
186
|
className && cssClasses.push(className);
|
|
186
187
|
return cssClasses.filter(css => css).join(' ');
|
|
187
188
|
};
|
|
@@ -328,9 +329,9 @@ const Portal = ({ children, target = document.body, className }) => {
|
|
|
328
329
|
return reactDom.createPortal(children, containerEl);
|
|
329
330
|
};
|
|
330
331
|
|
|
331
|
-
var css_248z$
|
|
332
|
-
var styles$
|
|
333
|
-
styleInject(css_248z$
|
|
332
|
+
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}";
|
|
333
|
+
var styles$_ = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
334
|
+
styleInject(css_248z$_);
|
|
334
335
|
|
|
335
336
|
const Backdrop = (props) => {
|
|
336
337
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -340,8 +341,8 @@ const Backdrop = (props) => {
|
|
|
340
341
|
};
|
|
341
342
|
const getCssClasses = () => {
|
|
342
343
|
const cssClasses = [];
|
|
343
|
-
cssClasses.push(styles$
|
|
344
|
-
isTransparent && cssClasses.push(styles$
|
|
344
|
+
cssClasses.push(styles$_.backdrop);
|
|
345
|
+
isTransparent && cssClasses.push(styles$_['isTransparent']);
|
|
345
346
|
return cssClasses.filter(css => css).join(' ');
|
|
346
347
|
};
|
|
347
348
|
const getStyles = () => {
|
|
@@ -351,34 +352,34 @@ const Backdrop = (props) => {
|
|
|
351
352
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
|
|
352
353
|
};
|
|
353
354
|
|
|
354
|
-
var css_248z
|
|
355
|
-
var styles
|
|
356
|
-
styleInject(css_248z
|
|
355
|
+
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}";
|
|
356
|
+
var styles$Z = {"list":"List-module_list__gpZ41"};
|
|
357
|
+
styleInject(css_248z$Z);
|
|
357
358
|
|
|
358
359
|
const List = (props) => {
|
|
359
360
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
360
361
|
const getCssClasses = () => {
|
|
361
362
|
const cssClasses = [];
|
|
362
|
-
isFlush && cssClasses.push(styles
|
|
363
|
-
cssClasses.push(styles
|
|
363
|
+
isFlush && cssClasses.push(styles$Z.flush);
|
|
364
|
+
cssClasses.push(styles$Z.list);
|
|
364
365
|
className && cssClasses.push(className);
|
|
365
366
|
return cssClasses.filter(css => css).join(' ');
|
|
366
367
|
};
|
|
367
368
|
return (React__default["default"].createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
368
369
|
};
|
|
369
370
|
|
|
370
|
-
var css_248z$
|
|
371
|
-
var styles$
|
|
372
|
-
styleInject(css_248z$
|
|
371
|
+
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}";
|
|
372
|
+
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"};
|
|
373
|
+
styleInject(css_248z$Y);
|
|
373
374
|
|
|
374
375
|
const ListItem = (props) => {
|
|
375
376
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
376
377
|
const getCssClasses = () => {
|
|
377
378
|
const cssClasses = [];
|
|
378
|
-
cssClasses.push(styles$
|
|
379
|
-
color && cssClasses.push(styles$
|
|
380
|
-
active && cssClasses.push(styles$
|
|
381
|
-
disabled && cssClasses.push(styles$
|
|
379
|
+
cssClasses.push(styles$Y.listItem);
|
|
380
|
+
color && cssClasses.push(styles$Y[color]);
|
|
381
|
+
active && cssClasses.push(styles$Y['active']);
|
|
382
|
+
disabled && cssClasses.push(styles$Y['disabled']);
|
|
382
383
|
className && cssClasses.push(className);
|
|
383
384
|
return cssClasses.filter(css => css).join(' ');
|
|
384
385
|
};
|
|
@@ -388,42 +389,42 @@ const ListItem = (props) => {
|
|
|
388
389
|
return (React__default["default"].createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
389
390
|
};
|
|
390
391
|
|
|
391
|
-
var css_248z$
|
|
392
|
-
var styles$
|
|
393
|
-
styleInject(css_248z$
|
|
392
|
+
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}";
|
|
393
|
+
var styles$X = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
394
|
+
styleInject(css_248z$X);
|
|
394
395
|
|
|
395
396
|
const ListItemAvatar = (_a) => {
|
|
396
397
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
397
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
398
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$X.avatar }, rest), avatar));
|
|
398
399
|
};
|
|
399
400
|
|
|
400
|
-
var css_248z$
|
|
401
|
-
var styles$
|
|
402
|
-
styleInject(css_248z$
|
|
401
|
+
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}";
|
|
402
|
+
var styles$W = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
403
|
+
styleInject(css_248z$W);
|
|
403
404
|
|
|
404
405
|
const ListItemIcon = (_a) => {
|
|
405
406
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
406
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
407
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$W.icon }, rest), icon));
|
|
407
408
|
};
|
|
408
409
|
|
|
409
|
-
var css_248z$
|
|
410
|
-
var styles$
|
|
411
|
-
styleInject(css_248z$
|
|
410
|
+
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}";
|
|
411
|
+
var styles$V = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
412
|
+
styleInject(css_248z$V);
|
|
412
413
|
|
|
413
414
|
const ListItemAction = (_a) => {
|
|
414
415
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
415
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
416
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
416
417
|
};
|
|
417
418
|
|
|
418
|
-
var css_248z$
|
|
419
|
-
var styles$
|
|
420
|
-
styleInject(css_248z$
|
|
419
|
+
var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
420
|
+
var styles$U = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
421
|
+
styleInject(css_248z$U);
|
|
421
422
|
|
|
422
423
|
const ListItemText = (_a) => {
|
|
423
424
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
424
425
|
const getCssClasses = () => {
|
|
425
426
|
const cssClasses = [];
|
|
426
|
-
cssClasses.push(styles$
|
|
427
|
+
cssClasses.push(styles$U.listItemText);
|
|
427
428
|
return cssClasses.filter(css => css).join(' ');
|
|
428
429
|
};
|
|
429
430
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -434,9 +435,9 @@ const ListItemText = (_a) => {
|
|
|
434
435
|
const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
|
|
435
436
|
const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
436
437
|
|
|
437
|
-
var css_248z$
|
|
438
|
-
var styles$
|
|
439
|
-
styleInject(css_248z$
|
|
438
|
+
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}";
|
|
439
|
+
var styles$T = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
440
|
+
styleInject(css_248z$T);
|
|
440
441
|
|
|
441
442
|
// preset value
|
|
442
443
|
// enter -> delay? -> show results
|
|
@@ -459,7 +460,9 @@ const AutoComplete = (props) => {
|
|
|
459
460
|
React.useEffect(() => {
|
|
460
461
|
setOptions(options);
|
|
461
462
|
}, [options]);
|
|
462
|
-
useDebounce(() => {
|
|
463
|
+
useDebounce(() => {
|
|
464
|
+
onChange && onChange(searchText);
|
|
465
|
+
}, debounce, [searchText]);
|
|
463
466
|
React.useEffect(() => {
|
|
464
467
|
if (isShow === true) {
|
|
465
468
|
document.body.classList.add('modal-open');
|
|
@@ -482,7 +485,7 @@ const AutoComplete = (props) => {
|
|
|
482
485
|
const getCssClass = () => {
|
|
483
486
|
const cssClasses = [];
|
|
484
487
|
className && cssClasses.push(className);
|
|
485
|
-
cssClasses.push(styles$
|
|
488
|
+
cssClasses.push(styles$T.select);
|
|
486
489
|
return cssClasses.filter(r => r).join(' ');
|
|
487
490
|
};
|
|
488
491
|
const show = () => setIsShow(true);
|
|
@@ -506,28 +509,28 @@ const AutoComplete = (props) => {
|
|
|
506
509
|
setModel('');
|
|
507
510
|
setSearchText('');
|
|
508
511
|
};
|
|
509
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
512
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$T.selectContainer },
|
|
510
513
|
React__default["default"].createElement("div", { className: "d-flex" },
|
|
511
514
|
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 }),
|
|
512
515
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
513
516
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
514
517
|
isShow &&
|
|
515
518
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
516
|
-
React__default["default"].createElement("div", { className: styles$
|
|
519
|
+
React__default["default"].createElement("div", { className: styles$T.selectMenu },
|
|
517
520
|
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 },
|
|
518
521
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
519
522
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
520
523
|
};
|
|
521
524
|
|
|
522
|
-
var css_248z$
|
|
523
|
-
var styles$
|
|
524
|
-
styleInject(css_248z$
|
|
525
|
+
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}";
|
|
526
|
+
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"};
|
|
527
|
+
styleInject(css_248z$S);
|
|
525
528
|
|
|
526
529
|
const Badge = (props) => {
|
|
527
530
|
const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
528
531
|
const [cssClassName] = useCssClasses([
|
|
529
|
-
styles$
|
|
530
|
-
styles$
|
|
532
|
+
styles$S.badge,
|
|
533
|
+
styles$S[color],
|
|
531
534
|
className
|
|
532
535
|
]);
|
|
533
536
|
return (React__default["default"].createElement(BadgeContainer, null,
|
|
@@ -537,15 +540,15 @@ const Badge = (props) => {
|
|
|
537
540
|
const BadgeContainer = (props) => {
|
|
538
541
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
539
542
|
const [cssClassName] = useCssClasses([
|
|
540
|
-
styles$
|
|
543
|
+
styles$S.badgeContainer,
|
|
541
544
|
className,
|
|
542
545
|
]);
|
|
543
546
|
return (React__default["default"].createElement("div", Object.assign({ className: cssClassName }, rest), children));
|
|
544
547
|
};
|
|
545
548
|
|
|
546
|
-
var css_248z$
|
|
547
|
-
var styles$
|
|
548
|
-
styleInject(css_248z$
|
|
549
|
+
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}";
|
|
550
|
+
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"};
|
|
551
|
+
styleInject(css_248z$R);
|
|
549
552
|
|
|
550
553
|
const ButtonContext = React.createContext({
|
|
551
554
|
color: null
|
|
@@ -557,19 +560,19 @@ const Button = (props) => {
|
|
|
557
560
|
const buttonContext = useButtonContext();
|
|
558
561
|
const getCssClasses = () => {
|
|
559
562
|
const cssClasses = [];
|
|
560
|
-
cssClasses.push(styles$
|
|
563
|
+
cssClasses.push(styles$R.button);
|
|
561
564
|
const buttonColor = buttonContext.color || color;
|
|
562
565
|
if (variant !== 'outline' && variant !== 'text') {
|
|
563
|
-
cssClasses.push(styles$
|
|
564
|
-
cssClasses.push(styles$
|
|
566
|
+
cssClasses.push(styles$R.btnContained);
|
|
567
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
565
568
|
}
|
|
566
569
|
if (variant === 'outline') {
|
|
567
|
-
cssClasses.push(styles$
|
|
568
|
-
cssClasses.push(styles$
|
|
570
|
+
cssClasses.push(styles$R.btnOutline);
|
|
571
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
569
572
|
}
|
|
570
573
|
if (variant === 'text') {
|
|
571
|
-
cssClasses.push(styles$
|
|
572
|
-
cssClasses.push(styles$
|
|
574
|
+
cssClasses.push(styles$R.btnText);
|
|
575
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
573
576
|
}
|
|
574
577
|
if (isRounded && variant !== 'text') {
|
|
575
578
|
cssClasses.push(`rounded-pill`);
|
|
@@ -577,29 +580,29 @@ const Button = (props) => {
|
|
|
577
580
|
if (isActive) {
|
|
578
581
|
cssClasses.push('active');
|
|
579
582
|
}
|
|
580
|
-
shadow && cssClasses.push(styles$
|
|
581
|
-
block && cssClasses.push(styles$
|
|
583
|
+
shadow && cssClasses.push(styles$R.shadow);
|
|
584
|
+
block && cssClasses.push(styles$R.block);
|
|
582
585
|
className && cssClasses.push(className);
|
|
583
586
|
return cssClasses.filter(css => css).join(' ');
|
|
584
587
|
};
|
|
585
588
|
return (React__default["default"].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
586
589
|
React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
|
|
587
590
|
startIcon &&
|
|
588
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
591
|
+
React__default["default"].createElement(Icon, { className: styles$R.startIcon }, startIcon),
|
|
589
592
|
children,
|
|
590
593
|
endIcon &&
|
|
591
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
594
|
+
React__default["default"].createElement(Icon, { className: styles$R.endIcon }, endIcon))));
|
|
592
595
|
};
|
|
593
596
|
|
|
594
|
-
var css_248z$
|
|
595
|
-
var styles$
|
|
596
|
-
styleInject(css_248z$
|
|
597
|
+
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}";
|
|
598
|
+
var styles$Q = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
599
|
+
styleInject(css_248z$Q);
|
|
597
600
|
|
|
598
601
|
const ButtonGroup = (props) => {
|
|
599
602
|
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
600
603
|
const getCssClasses = () => {
|
|
601
604
|
const cssClasses = [];
|
|
602
|
-
cssClasses.push(styles$
|
|
605
|
+
cssClasses.push(styles$Q.buttonGroup);
|
|
603
606
|
className && cssClasses.push(className);
|
|
604
607
|
return cssClasses.filter(css => css).join(' ');
|
|
605
608
|
};
|
|
@@ -607,15 +610,15 @@ const ButtonGroup = (props) => {
|
|
|
607
610
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
608
611
|
};
|
|
609
612
|
|
|
610
|
-
var css_248z$
|
|
611
|
-
var styles$
|
|
612
|
-
styleInject(css_248z$
|
|
613
|
+
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}";
|
|
614
|
+
var styles$P = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
615
|
+
styleInject(css_248z$P);
|
|
613
616
|
|
|
614
617
|
const Breadcrumb = (props) => {
|
|
615
618
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
616
619
|
const getCssClasses = () => {
|
|
617
620
|
const cssClasses = [];
|
|
618
|
-
cssClasses.push(styles$
|
|
621
|
+
cssClasses.push(styles$P.breadcrumb);
|
|
619
622
|
className && cssClasses.push(className);
|
|
620
623
|
return cssClasses.filter(css => css).join(' ');
|
|
621
624
|
};
|
|
@@ -625,15 +628,15 @@ const Breadcrumb = (props) => {
|
|
|
625
628
|
|
|
626
629
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
627
630
|
|
|
628
|
-
var css_248z$
|
|
629
|
-
var styles$
|
|
630
|
-
styleInject(css_248z$
|
|
631
|
+
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}";
|
|
632
|
+
var styles$O = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
633
|
+
styleInject(css_248z$O);
|
|
631
634
|
|
|
632
635
|
const BreadcrumbItem = (props) => {
|
|
633
636
|
const { children, className, isActive, onClick } = props;
|
|
634
637
|
const getCssClasses = () => {
|
|
635
638
|
const cssClasses = [];
|
|
636
|
-
cssClasses.push(styles$
|
|
639
|
+
cssClasses.push(styles$O.breadcrumbItem);
|
|
637
640
|
className && cssClasses.push(className);
|
|
638
641
|
isActive && cssClasses.push('active');
|
|
639
642
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -645,115 +648,115 @@ const BreadcrumbItem = (props) => {
|
|
|
645
648
|
React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React__default["default"].createElement("a", null, label) }, children)));
|
|
646
649
|
};
|
|
647
650
|
|
|
648
|
-
var css_248z$
|
|
649
|
-
var styles$
|
|
650
|
-
styleInject(css_248z$
|
|
651
|
+
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}";
|
|
652
|
+
var styles$N = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
653
|
+
styleInject(css_248z$N);
|
|
651
654
|
|
|
652
655
|
const Card = (props) => {
|
|
653
656
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
654
657
|
const getCssClasses = () => {
|
|
655
658
|
const cssClasses = [];
|
|
656
|
-
cssClasses.push(styles$
|
|
657
|
-
shadow && cssClasses.push(styles$
|
|
659
|
+
cssClasses.push(styles$N.card);
|
|
660
|
+
shadow && cssClasses.push(styles$N.shadow);
|
|
658
661
|
className && cssClasses.push(className);
|
|
659
662
|
return cssClasses.filter(css => css).join(' ');
|
|
660
663
|
};
|
|
661
664
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
662
665
|
};
|
|
663
666
|
|
|
664
|
-
var css_248z$
|
|
665
|
-
var styles$
|
|
666
|
-
styleInject(css_248z$
|
|
667
|
+
var css_248z$M = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
668
|
+
var styles$M = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
669
|
+
styleInject(css_248z$M);
|
|
667
670
|
|
|
668
671
|
const CardBody = (props) => {
|
|
669
672
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
670
673
|
const getCssClasses = () => {
|
|
671
674
|
const cssClasses = [];
|
|
672
|
-
cssClasses.push(styles$
|
|
675
|
+
cssClasses.push(styles$M.cardBody);
|
|
673
676
|
className && cssClasses.push(className);
|
|
674
677
|
return cssClasses.filter(css => css).join(' ');
|
|
675
678
|
};
|
|
676
679
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
677
680
|
};
|
|
678
681
|
|
|
679
|
-
var css_248z$
|
|
680
|
-
var styles$
|
|
681
|
-
styleInject(css_248z$
|
|
682
|
+
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}";
|
|
683
|
+
var styles$L = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
684
|
+
styleInject(css_248z$L);
|
|
682
685
|
|
|
683
686
|
const CardFooter = (props) => {
|
|
684
687
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
685
688
|
const getCssClasses = () => {
|
|
686
689
|
const cssClasses = [];
|
|
687
|
-
cssClasses.push(styles$
|
|
690
|
+
cssClasses.push(styles$L.cardFooter);
|
|
688
691
|
className && cssClasses.push(className);
|
|
689
692
|
return cssClasses.filter(css => css).join(' ');
|
|
690
693
|
};
|
|
691
694
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
692
695
|
};
|
|
693
696
|
|
|
694
|
-
var css_248z$
|
|
695
|
-
var styles$
|
|
696
|
-
styleInject(css_248z$
|
|
697
|
+
var css_248z$K = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
698
|
+
var styles$K = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
699
|
+
styleInject(css_248z$K);
|
|
697
700
|
|
|
698
701
|
const CardSubtitle = (props) => {
|
|
699
702
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
700
703
|
const getCssClasses = () => {
|
|
701
704
|
const cssClasses = [];
|
|
702
|
-
cssClasses.push(styles$
|
|
705
|
+
cssClasses.push(styles$K.cardSubtitle);
|
|
703
706
|
className && cssClasses.push(className);
|
|
704
707
|
return cssClasses.filter(css => css).join(' ');
|
|
705
708
|
};
|
|
706
709
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
707
710
|
};
|
|
708
711
|
|
|
709
|
-
var css_248z$
|
|
710
|
-
var styles$
|
|
711
|
-
styleInject(css_248z$
|
|
712
|
+
var css_248z$J = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
713
|
+
var styles$J = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
714
|
+
styleInject(css_248z$J);
|
|
712
715
|
|
|
713
716
|
const CardText = (props) => {
|
|
714
717
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
715
718
|
const getCssClasses = () => {
|
|
716
719
|
const cssClasses = [];
|
|
717
|
-
cssClasses.push(styles$
|
|
720
|
+
cssClasses.push(styles$J.cardText);
|
|
718
721
|
className && cssClasses.push(className);
|
|
719
722
|
return cssClasses.filter(css => css).join(' ');
|
|
720
723
|
};
|
|
721
724
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
722
725
|
};
|
|
723
726
|
|
|
724
|
-
var css_248z$
|
|
725
|
-
var styles$
|
|
726
|
-
styleInject(css_248z$
|
|
727
|
+
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}";
|
|
728
|
+
var styles$I = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
729
|
+
styleInject(css_248z$I);
|
|
727
730
|
|
|
728
731
|
const CardTitle = (props) => {
|
|
729
732
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
730
733
|
const getCssClasses = () => {
|
|
731
734
|
const cssClasses = [];
|
|
732
|
-
cssClasses.push(styles$
|
|
735
|
+
cssClasses.push(styles$I.cardTitle);
|
|
733
736
|
className && cssClasses.push(className);
|
|
734
737
|
return cssClasses.filter(css => css).join(' ');
|
|
735
738
|
};
|
|
736
739
|
return (React__default["default"].createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
737
740
|
};
|
|
738
741
|
|
|
739
|
-
var css_248z$
|
|
740
|
-
var styles$
|
|
741
|
-
styleInject(css_248z$
|
|
742
|
+
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}";
|
|
743
|
+
var styles$H = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
744
|
+
styleInject(css_248z$H);
|
|
742
745
|
|
|
743
746
|
const CardImage = (props) => {
|
|
744
747
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
745
748
|
const getCssClasses = () => {
|
|
746
749
|
const cssClasses = [];
|
|
747
|
-
cssClasses.push(styles$
|
|
750
|
+
cssClasses.push(styles$H.cardImage);
|
|
748
751
|
className && cssClasses.push(className);
|
|
749
752
|
return cssClasses.filter(css => css).join(' ');
|
|
750
753
|
};
|
|
751
754
|
return (React__default["default"].createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
752
755
|
};
|
|
753
756
|
|
|
754
|
-
var css_248z$
|
|
755
|
-
var styles$
|
|
756
|
-
styleInject(css_248z$
|
|
757
|
+
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}";
|
|
758
|
+
var styles$G = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
759
|
+
styleInject(css_248z$G);
|
|
757
760
|
|
|
758
761
|
const Checkbox = (props) => {
|
|
759
762
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -782,8 +785,8 @@ const Checkbox = (props) => {
|
|
|
782
785
|
};
|
|
783
786
|
const getCssClassesLabel = () => {
|
|
784
787
|
const cssClasses = [];
|
|
785
|
-
cssClasses.push(styles$
|
|
786
|
-
disabled && cssClasses.push(styles$
|
|
788
|
+
cssClasses.push(styles$G.checkboxLabel);
|
|
789
|
+
disabled && cssClasses.push(styles$G['disabled']);
|
|
787
790
|
return cssClasses.filter(css => css).join(' ');
|
|
788
791
|
};
|
|
789
792
|
const getIcon = () => {
|
|
@@ -796,24 +799,24 @@ const Checkbox = (props) => {
|
|
|
796
799
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
797
800
|
}
|
|
798
801
|
};
|
|
799
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
802
|
+
return (React__default["default"].createElement("div", { className: styles$G.checkboxContainer },
|
|
800
803
|
React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
801
804
|
React__default["default"].createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
802
805
|
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))));
|
|
803
806
|
};
|
|
804
807
|
|
|
805
|
-
var css_248z$
|
|
806
|
-
var styles$
|
|
807
|
-
styleInject(css_248z$
|
|
808
|
+
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}";
|
|
809
|
+
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"};
|
|
810
|
+
styleInject(css_248z$F);
|
|
808
811
|
|
|
809
812
|
const Chip = (props) => {
|
|
810
813
|
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"]);
|
|
811
814
|
const getCssClass = () => {
|
|
812
815
|
const cssClasses = [];
|
|
813
|
-
cssClasses.push(styles$
|
|
814
|
-
cssClasses.push(styles$
|
|
815
|
-
shadow && cssClasses.push(styles$
|
|
816
|
-
onClick && cssClasses.push(styles$
|
|
816
|
+
cssClasses.push(styles$F.chip);
|
|
817
|
+
cssClasses.push(styles$F[color]);
|
|
818
|
+
shadow && cssClasses.push(styles$F['shadow']);
|
|
819
|
+
onClick && cssClasses.push(styles$F['clickable']);
|
|
817
820
|
className && cssClasses.push(className);
|
|
818
821
|
return cssClasses.filter(r => r).join(' ');
|
|
819
822
|
};
|
|
@@ -823,7 +826,7 @@ const Chip = (props) => {
|
|
|
823
826
|
};
|
|
824
827
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
825
828
|
React__default["default"].createElement("span", null, children),
|
|
826
|
-
isDeletable && (React__default["default"].createElement("div", { className: styles$
|
|
829
|
+
isDeletable && (React__default["default"].createElement("div", { className: styles$F.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
827
830
|
};
|
|
828
831
|
|
|
829
832
|
const CssTransition = (props) => {
|
|
@@ -901,9 +904,9 @@ const CssTransition = (props) => {
|
|
|
901
904
|
React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
902
905
|
};
|
|
903
906
|
|
|
904
|
-
var css_248z$
|
|
905
|
-
var styles$
|
|
906
|
-
styleInject(css_248z$
|
|
907
|
+
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}";
|
|
908
|
+
var styles$E = {"column":"Column-module_column__fcTgl"};
|
|
909
|
+
styleInject(css_248z$E);
|
|
907
910
|
|
|
908
911
|
const Column = (props) => {
|
|
909
912
|
const { children, className } = props,
|
|
@@ -921,22 +924,22 @@ const Column = (props) => {
|
|
|
921
924
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
922
925
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
923
926
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
924
|
-
cssClasses.push(styles$
|
|
927
|
+
cssClasses.push(styles$E.column);
|
|
925
928
|
className && cssClasses.push(className);
|
|
926
929
|
return cssClasses.filter(css => css).join(' ');
|
|
927
930
|
};
|
|
928
931
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
929
932
|
};
|
|
930
933
|
|
|
931
|
-
var css_248z$
|
|
932
|
-
var styles$
|
|
933
|
-
styleInject(css_248z$
|
|
934
|
+
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}";
|
|
935
|
+
var styles$D = {"row":"Row-module_row__bTIWp"};
|
|
936
|
+
styleInject(css_248z$D);
|
|
934
937
|
|
|
935
938
|
const Row = (_a) => {
|
|
936
939
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
937
940
|
const getCssClasses = () => {
|
|
938
941
|
const cssClasses = [];
|
|
939
|
-
cssClasses.push(styles$
|
|
942
|
+
cssClasses.push(styles$D.row);
|
|
940
943
|
className && cssClasses.push(className);
|
|
941
944
|
direction && cssClasses.push(`flex-${direction}`);
|
|
942
945
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -944,15 +947,15 @@ const Row = (_a) => {
|
|
|
944
947
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
945
948
|
};
|
|
946
949
|
|
|
947
|
-
var css_248z$
|
|
948
|
-
var styles$
|
|
949
|
-
styleInject(css_248z$
|
|
950
|
+
var css_248z$C = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
951
|
+
var styles$C = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
952
|
+
styleInject(css_248z$C);
|
|
950
953
|
|
|
951
954
|
const FormLabel = (_a) => {
|
|
952
955
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
953
956
|
const getCssClasses = () => {
|
|
954
957
|
const cssClasses = [];
|
|
955
|
-
cssClasses.push(styles$
|
|
958
|
+
cssClasses.push(styles$C.formLabel);
|
|
956
959
|
className && cssClasses.push(className);
|
|
957
960
|
return cssClasses.filter(css => css).join(' ');
|
|
958
961
|
};
|
|
@@ -989,9 +992,9 @@ const FileInput = (props) => {
|
|
|
989
992
|
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))));
|
|
990
993
|
};
|
|
991
994
|
|
|
992
|
-
var css_248z$
|
|
993
|
-
var styles$
|
|
994
|
-
styleInject(css_248z$
|
|
995
|
+
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}";
|
|
996
|
+
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"};
|
|
997
|
+
styleInject(css_248z$B);
|
|
995
998
|
|
|
996
999
|
const Select = (props) => {
|
|
997
1000
|
var _a, _b, _c;
|
|
@@ -1004,9 +1007,9 @@ const Select = (props) => {
|
|
|
1004
1007
|
const getCssClass = () => {
|
|
1005
1008
|
const cssClasses = [];
|
|
1006
1009
|
className && cssClasses.push(className);
|
|
1007
|
-
disabled && cssClasses.push(styles$
|
|
1008
|
-
readOnly && cssClasses.push(styles$
|
|
1009
|
-
cssClasses.push(styles$
|
|
1010
|
+
disabled && cssClasses.push(styles$B['disabled']);
|
|
1011
|
+
readOnly && cssClasses.push(styles$B['readOnly']);
|
|
1012
|
+
cssClasses.push(styles$B.select);
|
|
1010
1013
|
return cssClasses.filter(r => r).join(' ');
|
|
1011
1014
|
};
|
|
1012
1015
|
React.useEffect(() => {
|
|
@@ -1128,16 +1131,16 @@ const Select = (props) => {
|
|
|
1128
1131
|
}
|
|
1129
1132
|
}
|
|
1130
1133
|
};
|
|
1131
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
1134
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$B.selectContainer },
|
|
1132
1135
|
React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1133
1136
|
!multiple && renderSingleViewModel(),
|
|
1134
1137
|
multiple &&
|
|
1135
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1136
|
-
React__default["default"].createElement(Icon, { className: "ml-
|
|
1138
|
+
React__default["default"].createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
|
|
1139
|
+
React__default["default"].createElement(Icon, { className: "ml-auto" },
|
|
1137
1140
|
React__default["default"].createElement(ChevronDownSolidIcon, null))),
|
|
1138
1141
|
isShow &&
|
|
1139
1142
|
React__default["default"].createElement(Portal, { className: 'backdrop-root' },
|
|
1140
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1143
|
+
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 } },
|
|
1141
1144
|
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) },
|
|
1142
1145
|
multiple &&
|
|
1143
1146
|
React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1145,33 +1148,33 @@ const Select = (props) => {
|
|
|
1145
1148
|
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1146
1149
|
};
|
|
1147
1150
|
|
|
1148
|
-
var css_248z$
|
|
1149
|
-
var styles$
|
|
1150
|
-
styleInject(css_248z$
|
|
1151
|
+
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}";
|
|
1152
|
+
var styles$A = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1153
|
+
styleInject(css_248z$A);
|
|
1151
1154
|
|
|
1152
1155
|
const Textarea = (props) => {
|
|
1153
1156
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1154
1157
|
const getCssClass = () => {
|
|
1155
1158
|
const cssClasses = [];
|
|
1156
|
-
cssClasses.push(styles$
|
|
1159
|
+
cssClasses.push(styles$A.textarea);
|
|
1157
1160
|
className && cssClasses.push(className);
|
|
1158
|
-
error && cssClasses.push(styles$
|
|
1161
|
+
error && cssClasses.push(styles$A['isInvalid']);
|
|
1159
1162
|
return cssClasses.filter(r => r).join(' ');
|
|
1160
1163
|
};
|
|
1161
1164
|
return (React__default["default"].createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1162
1165
|
};
|
|
1163
1166
|
|
|
1164
|
-
var css_248z$
|
|
1165
|
-
var styles$
|
|
1166
|
-
styleInject(css_248z$
|
|
1167
|
+
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}";
|
|
1168
|
+
var styles$z = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1169
|
+
styleInject(css_248z$z);
|
|
1167
1170
|
|
|
1168
1171
|
const FormInput = (props) => {
|
|
1169
1172
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1170
1173
|
const getCssClasses = () => {
|
|
1171
1174
|
const cssClasses = [];
|
|
1172
|
-
cssClasses.push(styles$
|
|
1175
|
+
cssClasses.push(styles$z.formInput);
|
|
1173
1176
|
className && cssClasses.push(className);
|
|
1174
|
-
!isValid && cssClasses.push(styles$
|
|
1177
|
+
!isValid && cssClasses.push(styles$z['isInvalid']);
|
|
1175
1178
|
return cssClasses.filter(css => css).join(' ');
|
|
1176
1179
|
};
|
|
1177
1180
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1219,12 +1222,12 @@ const FormHint = (props) => {
|
|
|
1219
1222
|
return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
|
|
1220
1223
|
};
|
|
1221
1224
|
|
|
1222
|
-
var css_248z$
|
|
1223
|
-
var styles$
|
|
1224
|
-
styleInject(css_248z$
|
|
1225
|
+
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}";
|
|
1226
|
+
var styles$y = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1227
|
+
styleInject(css_248z$y);
|
|
1225
1228
|
|
|
1226
1229
|
const FormError = (props) => {
|
|
1227
|
-
const { className = styles$
|
|
1230
|
+
const { className = styles$y.isInvalid, errors = [] } = props;
|
|
1228
1231
|
return (React__default["default"].createElement(React.Fragment, null, errors &&
|
|
1229
1232
|
React__default["default"].createElement("div", { className: className }, errors.map(e => React__default["default"].createElement("div", { key: e.validator }, e.message)))));
|
|
1230
1233
|
};
|
|
@@ -1555,16 +1558,16 @@ const DateSelect = (props) => {
|
|
|
1555
1558
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1556
1559
|
// };
|
|
1557
1560
|
|
|
1558
|
-
var css_248z$
|
|
1559
|
-
var styles$
|
|
1560
|
-
styleInject(css_248z$
|
|
1561
|
+
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}";
|
|
1562
|
+
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"};
|
|
1563
|
+
styleInject(css_248z$x);
|
|
1561
1564
|
|
|
1562
1565
|
const Drawer = (props) => {
|
|
1563
1566
|
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
1567
|
React.useEffect(() => {
|
|
1565
|
-
document.body.classList.add(styles$
|
|
1568
|
+
document.body.classList.add(styles$x.drawerOpen);
|
|
1566
1569
|
return () => {
|
|
1567
|
-
document.body.classList.remove(styles$
|
|
1570
|
+
document.body.classList.remove(styles$x.drawerOpen);
|
|
1568
1571
|
};
|
|
1569
1572
|
}, []);
|
|
1570
1573
|
const handleClickBackdrop = () => {
|
|
@@ -1578,10 +1581,10 @@ const DrawerContent = (props) => {
|
|
|
1578
1581
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1579
1582
|
const getCssClasses = () => {
|
|
1580
1583
|
const cssClasses = [];
|
|
1581
|
-
cssClasses.push(styles$
|
|
1582
|
-
shadow && cssClasses.push(styles$
|
|
1583
|
-
!!permanent && cssClasses.push(styles$
|
|
1584
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1584
|
+
cssClasses.push(styles$x.drawer);
|
|
1585
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
1586
|
+
!!permanent && cssClasses.push(styles$x['permanent']);
|
|
1587
|
+
position === 'left' ? cssClasses.push(styles$x['left']) : cssClasses.push(styles$x['right']);
|
|
1585
1588
|
className && cssClasses.push(className);
|
|
1586
1589
|
return cssClasses.filter(css => css).join(' ');
|
|
1587
1590
|
};
|
|
@@ -1595,9 +1598,9 @@ const DrawerContent = (props) => {
|
|
|
1595
1598
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1596
1599
|
};
|
|
1597
1600
|
|
|
1598
|
-
var css_248z$
|
|
1599
|
-
var styles$
|
|
1600
|
-
styleInject(css_248z$
|
|
1601
|
+
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}";
|
|
1602
|
+
var styles$w = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1603
|
+
styleInject(css_248z$w);
|
|
1601
1604
|
|
|
1602
1605
|
const MenuBody = (props) => {
|
|
1603
1606
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1628,8 +1631,8 @@ const MenuBody = (props) => {
|
|
|
1628
1631
|
}, [menuBodyRef]);
|
|
1629
1632
|
const getCssClasses = () => {
|
|
1630
1633
|
const cssClasses = [];
|
|
1631
|
-
cssClasses.push(styles$
|
|
1632
|
-
shadow && cssClasses.push(styles$
|
|
1634
|
+
cssClasses.push(styles$w.menuBody);
|
|
1635
|
+
shadow && cssClasses.push(styles$w.shadow);
|
|
1633
1636
|
className && cssClasses.push(className);
|
|
1634
1637
|
return cssClasses.filter(css => css).join(' ');
|
|
1635
1638
|
};
|
|
@@ -1637,21 +1640,17 @@ const MenuBody = (props) => {
|
|
|
1637
1640
|
onClickBackdrop && onClickBackdrop();
|
|
1638
1641
|
};
|
|
1639
1642
|
return (React__default["default"].createElement(Portal, { className: 'menu-root' },
|
|
1640
|
-
React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1643
|
+
React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1644
|
+
React__default["default"].createElement(List, null, children)),
|
|
1641
1645
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
|
|
1642
1646
|
};
|
|
1643
1647
|
|
|
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
1648
|
const Menu = (props) => {
|
|
1649
1649
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
1650
1650
|
const menuContainer = React.useRef(null);
|
|
1651
1651
|
const toggleContainerRef = React.useRef(null);
|
|
1652
1652
|
const getCssClasses = () => {
|
|
1653
1653
|
const cssClasses = [];
|
|
1654
|
-
cssClasses.push(styles$x.menu);
|
|
1655
1654
|
className && cssClasses.push(className);
|
|
1656
1655
|
return cssClasses.filter(css => css).join(' ');
|
|
1657
1656
|
};
|
|
@@ -1664,26 +1663,17 @@ const Menu = (props) => {
|
|
|
1664
1663
|
React__default["default"].createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1665
1664
|
};
|
|
1666
1665
|
|
|
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
1666
|
const MenuItem = (props) => {
|
|
1672
|
-
const { children, onClick
|
|
1667
|
+
const { children, onClick } = props, rest = __rest(props, ["children", "onClick"]);
|
|
1673
1668
|
const getCssClasses = () => {
|
|
1674
1669
|
const cssClasses = [];
|
|
1675
|
-
cssClasses.push(styles$w.menuItem);
|
|
1676
|
-
if (type === 'header') {
|
|
1677
|
-
cssClasses.push(styles$w.menuItemHeader);
|
|
1678
|
-
}
|
|
1679
1670
|
return cssClasses.filter(css => css).join(' ');
|
|
1680
1671
|
};
|
|
1681
1672
|
const handleClick = (e) => {
|
|
1682
1673
|
e.stopPropagation();
|
|
1683
1674
|
onClick && onClick(e);
|
|
1684
1675
|
};
|
|
1685
|
-
return (React__default["default"].createElement(
|
|
1686
|
-
React__default["default"].createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
|
|
1676
|
+
return (React__default["default"].createElement(ListItem, Object.assign({ className: getCssClasses(), onClick: handleClick }, rest), children));
|
|
1687
1677
|
};
|
|
1688
1678
|
|
|
1689
1679
|
const MenuToggle = ({ children }) => {
|
|
@@ -1883,7 +1873,6 @@ const Modal = (props) => {
|
|
|
1883
1873
|
};
|
|
1884
1874
|
}, []);
|
|
1885
1875
|
const handleClickBackdrop = () => {
|
|
1886
|
-
console.warn('backdrop clicked');
|
|
1887
1876
|
onBackdropClick && onBackdropClick();
|
|
1888
1877
|
};
|
|
1889
1878
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -1899,7 +1888,39 @@ const Modal = (props) => {
|
|
|
1899
1888
|
React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1900
1889
|
};
|
|
1901
1890
|
|
|
1902
|
-
|
|
1891
|
+
function createCommonjsModule(fn, module) {
|
|
1892
|
+
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
|
1893
|
+
}
|
|
1894
|
+
|
|
1895
|
+
var client = createCommonjsModule(function (module, exports) {
|
|
1896
|
+
|
|
1897
|
+
|
|
1898
|
+
if (process.env.NODE_ENV === 'production') {
|
|
1899
|
+
exports.createRoot = reactDom__default["default"].createRoot;
|
|
1900
|
+
exports.hydrateRoot = reactDom__default["default"].hydrateRoot;
|
|
1901
|
+
} else {
|
|
1902
|
+
var i = reactDom__default["default"].__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
|
1903
|
+
exports.createRoot = function(c, o) {
|
|
1904
|
+
i.usingClientEntryPoint = true;
|
|
1905
|
+
try {
|
|
1906
|
+
return reactDom__default["default"].createRoot(c, o);
|
|
1907
|
+
} finally {
|
|
1908
|
+
i.usingClientEntryPoint = false;
|
|
1909
|
+
}
|
|
1910
|
+
};
|
|
1911
|
+
exports.hydrateRoot = function(c, h, o) {
|
|
1912
|
+
i.usingClientEntryPoint = true;
|
|
1913
|
+
try {
|
|
1914
|
+
return reactDom__default["default"].hydrateRoot(c, h, o);
|
|
1915
|
+
} finally {
|
|
1916
|
+
i.usingClientEntryPoint = false;
|
|
1917
|
+
}
|
|
1918
|
+
};
|
|
1919
|
+
}
|
|
1920
|
+
});
|
|
1921
|
+
var client_1 = client.createRoot;
|
|
1922
|
+
client.hydrateRoot;
|
|
1923
|
+
|
|
1903
1924
|
exports.MODALTYPE = void 0;
|
|
1904
1925
|
(function (MODALTYPE) {
|
|
1905
1926
|
MODALTYPE["BASIC"] = "BASIC";
|
|
@@ -1913,7 +1934,7 @@ exports.MODALBUTTONTYPE = void 0;
|
|
|
1913
1934
|
MODALBUTTONTYPE["DEFAULT"] = "DEFAULT";
|
|
1914
1935
|
})(exports.MODALBUTTONTYPE || (exports.MODALBUTTONTYPE = {}));
|
|
1915
1936
|
|
|
1916
|
-
const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackdropClick, isDismissable = false, buttons = [
|
|
1937
|
+
const GlobalModal = ({ title, description, formControls, onOk, onChange, onCancel, onBackdropClick, isDismissable = false, buttons = [
|
|
1917
1938
|
{ label: 'Cancel', type: exports.MODALBUTTONTYPE.CANCEL, color: exports.COLOR.secondary, variant: exports.VARIANT.text, shadow: false },
|
|
1918
1939
|
{ label: 'Ok', type: exports.MODALBUTTONTYPE.OK, variant: exports.VARIANT.contained, focus: true },
|
|
1919
1940
|
], size = exports.SIZE.md, fullScreen = false }) => {
|
|
@@ -1958,11 +1979,29 @@ const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackd
|
|
|
1958
1979
|
description && React__default["default"].createElement("div", null, description),
|
|
1959
1980
|
modalType === exports.MODALTYPE.FORM &&
|
|
1960
1981
|
React__default["default"].createElement(React.Fragment, null,
|
|
1961
|
-
React__default["default"].createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit }))));
|
|
1982
|
+
React__default["default"].createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit, onChange: onChange }))));
|
|
1962
1983
|
};
|
|
1963
1984
|
|
|
1964
1985
|
class ModalService {
|
|
1965
1986
|
show(title, description, options) {
|
|
1987
|
+
return new Promise((resolve, reject) => {
|
|
1988
|
+
if (!this.container) {
|
|
1989
|
+
this.container = document.createElement('div');
|
|
1990
|
+
document.body.appendChild(this.container);
|
|
1991
|
+
const handleOk = () => {
|
|
1992
|
+
resolve();
|
|
1993
|
+
this.hide();
|
|
1994
|
+
};
|
|
1995
|
+
const handleCancel = () => {
|
|
1996
|
+
reject();
|
|
1997
|
+
this.hide();
|
|
1998
|
+
};
|
|
1999
|
+
this.root = client_1(this.container);
|
|
2000
|
+
this.root.render(React__default["default"].createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, description: description, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }));
|
|
2001
|
+
}
|
|
2002
|
+
});
|
|
2003
|
+
}
|
|
2004
|
+
showForm(title, formControls, options) {
|
|
1966
2005
|
return new Promise((resolve, reject) => {
|
|
1967
2006
|
if (!this.container) {
|
|
1968
2007
|
this.container = document.createElement('div');
|
|
@@ -1971,17 +2010,23 @@ class ModalService {
|
|
|
1971
2010
|
resolve(values);
|
|
1972
2011
|
this.hide();
|
|
1973
2012
|
};
|
|
2013
|
+
// TODO - for AutoComplete
|
|
2014
|
+
// const handleOnChange = (values?: IFormValues) => {
|
|
2015
|
+
// console.info(values);
|
|
2016
|
+
// }
|
|
1974
2017
|
const handleCancel = () => {
|
|
1975
2018
|
reject();
|
|
1976
2019
|
this.hide();
|
|
1977
2020
|
};
|
|
1978
|
-
|
|
2021
|
+
this.root = client_1(this.container);
|
|
2022
|
+
this.root.render(React__default["default"].createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, formControls: formControls, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }));
|
|
1979
2023
|
}
|
|
1980
2024
|
});
|
|
1981
2025
|
}
|
|
1982
2026
|
hide() {
|
|
2027
|
+
var _a;
|
|
1983
2028
|
if (this.container) {
|
|
1984
|
-
|
|
2029
|
+
(_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
|
|
1985
2030
|
document.body.removeChild(this.container);
|
|
1986
2031
|
this.container = undefined;
|
|
1987
2032
|
}
|
|
@@ -2218,12 +2263,14 @@ class SnackbarService {
|
|
|
2218
2263
|
resolve();
|
|
2219
2264
|
this.hide();
|
|
2220
2265
|
};
|
|
2221
|
-
|
|
2266
|
+
this.root = client_1(this.container);
|
|
2267
|
+
this.root.render(React__default["default"].createElement(Snackbar, { color: mergedOptions.color, actionText: mergedOptions.actionText, onOk: handleOk }, message));
|
|
2222
2268
|
});
|
|
2223
2269
|
}
|
|
2224
2270
|
hide() {
|
|
2271
|
+
var _a;
|
|
2225
2272
|
if (this.container) {
|
|
2226
|
-
|
|
2273
|
+
(_a = this.root) === null || _a === void 0 ? void 0 : _a.unmount();
|
|
2227
2274
|
document.body.removeChild(this.container);
|
|
2228
2275
|
this.container = undefined;
|
|
2229
2276
|
this.handler && clearTimeout(this.handler);
|
|
@@ -2624,6 +2671,13 @@ const TableCell = (props) => {
|
|
|
2624
2671
|
React__default["default"].createElement("td", Object.assign({}, rest), children)) }, children));
|
|
2625
2672
|
};
|
|
2626
2673
|
|
|
2674
|
+
const TabContext = React.createContext({
|
|
2675
|
+
fixed: false,
|
|
2676
|
+
selectedValue: '',
|
|
2677
|
+
setSelectedValue: () => { }
|
|
2678
|
+
});
|
|
2679
|
+
const useTabContext = () => React.useContext(TabContext);
|
|
2680
|
+
|
|
2627
2681
|
var css_248z$4 = ".TabIndicator-module_tabIndicator__jSJhH {\n bottom: 0;\n height: 2px;\n position: absolute;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_primary__Q5jEo {\n background-color: var(--primary);\n}\n.TabIndicator-module_tabIndicator__jSJhH.TabIndicator-module_accent__qbgIG {\n background-color: var(--accent);\n}";
|
|
2628
2682
|
var styles$4 = {"tabIndicator":"TabIndicator-module_tabIndicator__jSJhH","primary":"TabIndicator-module_primary__Q5jEo","accent":"TabIndicator-module_accent__qbgIG"};
|
|
2629
2683
|
styleInject(css_248z$4);
|
|
@@ -2647,40 +2701,40 @@ var styles$3 = {"tabs":"Tabs-module_tabs__YyRTZ"};
|
|
|
2647
2701
|
styleInject(css_248z$3);
|
|
2648
2702
|
|
|
2649
2703
|
const Tabs = (props) => {
|
|
2650
|
-
const { children, className, fixed, color, indicatorColor
|
|
2651
|
-
const [selectedValue, setSelectedValue] = React.useState(
|
|
2652
|
-
const [selectedIndex, setSelectedIndex] = React.useState();
|
|
2704
|
+
const { children, className, fixed = false, color, indicatorColor = exports.COLOR.accent, value, onChange } = props;
|
|
2705
|
+
const [selectedValue, setSelectedValue] = React.useState('');
|
|
2706
|
+
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
|
2707
|
+
const tabContext = ({
|
|
2708
|
+
selectedValue,
|
|
2709
|
+
setSelectedValue,
|
|
2710
|
+
fixed
|
|
2711
|
+
});
|
|
2712
|
+
const prevSelectedValueRef = React.useRef();
|
|
2713
|
+
React.useEffect(() => {
|
|
2714
|
+
if (value !== undefined && value !== prevSelectedValueRef.current) {
|
|
2715
|
+
setSelectedValue(value);
|
|
2716
|
+
}
|
|
2717
|
+
}, [value]);
|
|
2653
2718
|
React.useEffect(() => {
|
|
2654
2719
|
React__default["default"].Children.toArray(children).forEach((child, index) => {
|
|
2655
|
-
if (child.props.value ===
|
|
2720
|
+
if (child.props.value === selectedValue) {
|
|
2656
2721
|
setSelectedIndex(index);
|
|
2722
|
+
onChange && onChange(selectedValue);
|
|
2657
2723
|
}
|
|
2658
2724
|
});
|
|
2659
|
-
}, [children,
|
|
2725
|
+
}, [children, selectedValue]);
|
|
2660
2726
|
const getCssClasses = () => {
|
|
2661
2727
|
const cssClasses = [];
|
|
2662
2728
|
cssClasses.push(styles$3.tabs);
|
|
2663
2729
|
className && cssClasses.push(className);
|
|
2664
2730
|
return cssClasses.filter(css => css).join(' ');
|
|
2665
2731
|
};
|
|
2666
|
-
const handleClickTab = (event, newValue, index) => {
|
|
2667
|
-
setSelectedValue(newValue);
|
|
2668
|
-
setSelectedIndex(index);
|
|
2669
|
-
onChange && onChange({ event, newValue });
|
|
2670
|
-
};
|
|
2671
|
-
const renderTabs = (child, index) => {
|
|
2672
|
-
return React__default["default"].isValidElement(child) && React.cloneElement(child, {
|
|
2673
|
-
key: child.props.value,
|
|
2674
|
-
isActive: child.props.value === selectedValue,
|
|
2675
|
-
fixed: fixed,
|
|
2676
|
-
onClick: (e) => handleClickTab(e.event, e.value, index),
|
|
2677
|
-
});
|
|
2678
|
-
};
|
|
2679
2732
|
return (React__default["default"].createElement(ButtonContext.Provider, { value: { color: color || exports.COLOR.light } },
|
|
2680
|
-
React__default["default"].createElement(
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2733
|
+
React__default["default"].createElement(TabContext.Provider, { value: tabContext },
|
|
2734
|
+
React__default["default"].createElement("div", { className: getCssClasses() },
|
|
2735
|
+
children,
|
|
2736
|
+
children &&
|
|
2737
|
+
React__default["default"].createElement(TabIndicator, { color: indicatorColor, width: (100 / React__default["default"].Children.toArray(children).length) + '%', index: selectedIndex, amount: React__default["default"].Children.toArray(children).length })))));
|
|
2684
2738
|
};
|
|
2685
2739
|
|
|
2686
2740
|
var css_248z$2 = ".Tab-module_tab__Q8w1f {\n padding: 6px 12px;\n overflow: hidden;\n position: relative;\n font-size: 0.875rem;\n min-width: 72px;\n box-sizing: border-box;\n min-height: 48px;\n text-align: center;\n font-weight: 500;\n line-height: 1.75;\n white-space: normal;\n letter-spacing: 0.02857em;\n text-transform: uppercase;\n border-radius: 0;\n flex-grow: 1;\n flex-basis: 0;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
@@ -2688,17 +2742,19 @@ var styles$2 = {"tab":"Tab-module_tab__Q8w1f"};
|
|
|
2688
2742
|
styleInject(css_248z$2);
|
|
2689
2743
|
|
|
2690
2744
|
const Tab = (props) => {
|
|
2691
|
-
const { label, className,
|
|
2745
|
+
const { label, className, disabled, value, onClick } = props;
|
|
2746
|
+
const { selectedValue, setSelectedValue } = useTabContext();
|
|
2692
2747
|
const getCssClasses = () => {
|
|
2693
2748
|
const cssClasses = [];
|
|
2694
2749
|
cssClasses.push(styles$2.tab);
|
|
2695
|
-
if (isActive) {
|
|
2696
|
-
cssClasses.push(`show active`);
|
|
2697
|
-
}
|
|
2698
2750
|
className && cssClasses.push(className);
|
|
2699
2751
|
return cssClasses.filter(css => css).join(' ');
|
|
2700
2752
|
};
|
|
2701
|
-
|
|
2753
|
+
const handleClick = (event) => {
|
|
2754
|
+
onClick && onClick({ event, value });
|
|
2755
|
+
setSelectedValue(value);
|
|
2756
|
+
};
|
|
2757
|
+
return (React__default["default"].createElement(Button, { className: getCssClasses(), onClick: handleClick, isActive: selectedValue === value, disabled: disabled }, label));
|
|
2702
2758
|
};
|
|
2703
2759
|
|
|
2704
2760
|
const TabPanel = (props) => {
|