react-asc 25.1.0 → 25.2.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/Stepper/Dot/Dot.d.ts +7 -0
- package/components/Stepper/Dot/index.d.ts +1 -0
- package/components/Stepper/Stepper.d.ts +2 -0
- package/components/Stepper/index.d.ts +1 -0
- package/index.es.js +458 -484
- package/index.js +458 -483
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -11,33 +11,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
|
|
|
11
11
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
12
12
|
var reactDom__default = /*#__PURE__*/_interopDefaultLegacy(reactDom);
|
|
13
13
|
|
|
14
|
-
/*! *****************************************************************************
|
|
15
|
-
Copyright (c) Microsoft Corporation.
|
|
16
|
-
|
|
17
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
18
|
-
purpose with or without fee is hereby granted.
|
|
19
|
-
|
|
20
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
21
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
22
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
23
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
24
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
25
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
26
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
27
|
-
***************************************************************************** */
|
|
28
|
-
|
|
29
|
-
function __rest(s, e) {
|
|
30
|
-
var t = {};
|
|
31
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
32
|
-
t[p] = s[p];
|
|
33
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
34
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
35
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
36
|
-
t[p[i]] = s[p[i]];
|
|
37
|
-
}
|
|
38
|
-
return t;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
14
|
exports.COLOR = void 0;
|
|
42
15
|
(function (COLOR) {
|
|
43
16
|
COLOR["primary"] = "primary";
|
|
@@ -97,97 +70,97 @@ function styleInject(css, ref) {
|
|
|
97
70
|
}
|
|
98
71
|
}
|
|
99
72
|
|
|
100
|
-
var css_248z$
|
|
101
|
-
var styles$
|
|
102
|
-
styleInject(css_248z$
|
|
73
|
+
var css_248z$14 = ".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}";
|
|
74
|
+
var styles$14 = {"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"};
|
|
75
|
+
styleInject(css_248z$14);
|
|
103
76
|
|
|
104
77
|
const Alert = (props) => {
|
|
105
|
-
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true
|
|
78
|
+
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true, ...rest } = props;
|
|
106
79
|
const getCssClasses = () => {
|
|
107
80
|
const cssClasses = [];
|
|
108
|
-
cssClasses.push(styles$
|
|
81
|
+
cssClasses.push(styles$14.alert);
|
|
109
82
|
if (variant === exports.VARIANT.contained) {
|
|
110
|
-
cssClasses.push(styles$
|
|
111
|
-
cssClasses.push(styles$
|
|
83
|
+
cssClasses.push(styles$14.contained);
|
|
84
|
+
cssClasses.push(styles$14[color]);
|
|
112
85
|
}
|
|
113
86
|
if (variant === exports.VARIANT.outline) {
|
|
114
|
-
cssClasses.push(styles$
|
|
115
|
-
cssClasses.push(styles$
|
|
87
|
+
cssClasses.push(styles$14.outline);
|
|
88
|
+
cssClasses.push(styles$14[color]);
|
|
116
89
|
}
|
|
117
|
-
shadow && cssClasses.push(styles$
|
|
90
|
+
shadow && cssClasses.push(styles$14['shadow']);
|
|
118
91
|
className && cssClasses.push(className);
|
|
119
92
|
return cssClasses.filter(r => r).join(' ');
|
|
120
93
|
};
|
|
121
|
-
return (React__default["default"].createElement("div",
|
|
94
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
122
95
|
};
|
|
123
96
|
|
|
124
|
-
var css_248z$
|
|
125
|
-
var styles$
|
|
126
|
-
styleInject(css_248z$
|
|
97
|
+
var css_248z$13 = ".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}";
|
|
98
|
+
var styles$13 = {"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"};
|
|
99
|
+
styleInject(css_248z$13);
|
|
127
100
|
|
|
128
101
|
const AppBar = (props) => {
|
|
129
|
-
const { children, className, color = exports.COLOR.primary, shadow = true
|
|
102
|
+
const { children, className, color = exports.COLOR.primary, shadow = true, ...rest } = props;
|
|
130
103
|
const getCssClasses = () => {
|
|
131
104
|
const cssClasses = [];
|
|
132
|
-
cssClasses.push(styles$
|
|
133
|
-
cssClasses.push(styles$
|
|
134
|
-
shadow && cssClasses.push(styles$
|
|
105
|
+
cssClasses.push(styles$13[color]);
|
|
106
|
+
cssClasses.push(styles$13.appbar);
|
|
107
|
+
shadow && cssClasses.push(styles$13['shadow']);
|
|
135
108
|
className && cssClasses.push(className);
|
|
136
109
|
return cssClasses.filter(r => r).join(' ');
|
|
137
110
|
};
|
|
138
|
-
return (React__default["default"].createElement("nav",
|
|
111
|
+
return (React__default["default"].createElement("nav", { className: getCssClasses(), ...rest }, children));
|
|
139
112
|
};
|
|
140
113
|
|
|
141
|
-
var css_248z$
|
|
142
|
-
var styles$
|
|
143
|
-
styleInject(css_248z$
|
|
114
|
+
var css_248z$12 = ".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}";
|
|
115
|
+
var styles$12 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
116
|
+
styleInject(css_248z$12);
|
|
144
117
|
|
|
145
118
|
const AppBarTitle = (props) => {
|
|
146
119
|
const { children, className, onClick } = props;
|
|
147
120
|
const getCssClass = () => {
|
|
148
121
|
const cssClasses = [];
|
|
149
|
-
cssClasses.push(styles$
|
|
122
|
+
cssClasses.push(styles$12.appbarTitle);
|
|
150
123
|
className && cssClasses.push(className);
|
|
151
124
|
return cssClasses.filter(r => r).join(' ');
|
|
152
125
|
};
|
|
153
126
|
return (React__default["default"].createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
154
127
|
};
|
|
155
128
|
|
|
156
|
-
var css_248z$
|
|
157
|
-
var styles$
|
|
158
|
-
styleInject(css_248z$
|
|
129
|
+
var css_248z$11 = ".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}";
|
|
130
|
+
var styles$11 = {"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"};
|
|
131
|
+
styleInject(css_248z$11);
|
|
159
132
|
|
|
160
133
|
const Icon = (props) => {
|
|
161
|
-
const { children, iconColor, className
|
|
134
|
+
const { children, iconColor, className, ...rest } = props;
|
|
162
135
|
const getCssClasses = () => {
|
|
163
136
|
const cssClasses = [];
|
|
164
|
-
cssClasses.push(styles$
|
|
165
|
-
iconColor && cssClasses.push(styles$
|
|
137
|
+
cssClasses.push(styles$11.icon);
|
|
138
|
+
iconColor && cssClasses.push(styles$11[iconColor]);
|
|
166
139
|
className && cssClasses.push(className);
|
|
167
140
|
return cssClasses.filter(css => css).join(' ');
|
|
168
141
|
};
|
|
169
|
-
return (React__default["default"].createElement("div",
|
|
142
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
170
143
|
};
|
|
171
144
|
|
|
172
|
-
var css_248z
|
|
173
|
-
var styles
|
|
174
|
-
styleInject(css_248z
|
|
145
|
+
var css_248z$10 = ".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}";
|
|
146
|
+
var styles$10 = {"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"};
|
|
147
|
+
styleInject(css_248z$10);
|
|
175
148
|
|
|
176
149
|
const IconButton = (props) => {
|
|
177
|
-
const { children, icon, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow
|
|
150
|
+
const { children, icon, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow, ...rest } = props;
|
|
178
151
|
const getCssClasses = () => {
|
|
179
152
|
const cssClasses = [];
|
|
180
|
-
cssClasses.push(styles
|
|
181
|
-
cssClasses.push(styles
|
|
182
|
-
cssClasses.push(styles
|
|
183
|
-
cssClasses.push(styles
|
|
184
|
-
isActive && cssClasses.push(styles
|
|
185
|
-
disabled && cssClasses.push(styles
|
|
186
|
-
shadow && cssClasses.push(styles
|
|
153
|
+
cssClasses.push(styles$10[color]);
|
|
154
|
+
cssClasses.push(styles$10[variant]);
|
|
155
|
+
cssClasses.push(styles$10[size]);
|
|
156
|
+
cssClasses.push(styles$10.iconButton);
|
|
157
|
+
isActive && cssClasses.push(styles$10.active);
|
|
158
|
+
disabled && cssClasses.push(styles$10.disabled);
|
|
159
|
+
shadow && cssClasses.push(styles$10.shadow);
|
|
187
160
|
className && cssClasses.push(className);
|
|
188
161
|
return cssClasses.filter(css => css).join(' ');
|
|
189
162
|
};
|
|
190
|
-
return (React__default["default"].createElement("button",
|
|
163
|
+
return (React__default["default"].createElement("button", { type: "button", className: getCssClasses(), disabled: disabled, ...rest },
|
|
191
164
|
icon && React__default["default"].createElement(Icon, null, icon),
|
|
192
165
|
children));
|
|
193
166
|
};
|
|
@@ -250,7 +223,7 @@ const useConstructor = (callBack) => {
|
|
|
250
223
|
};
|
|
251
224
|
|
|
252
225
|
function useCssClasses(cssClasses) {
|
|
253
|
-
return [
|
|
226
|
+
return [cssClasses?.filter(css => css).join(' ') || ''];
|
|
254
227
|
}
|
|
255
228
|
|
|
256
229
|
function useHover() {
|
|
@@ -328,105 +301,95 @@ const Portal = ({ children, target = document.body, className }) => {
|
|
|
328
301
|
return reactDom.createPortal(children, containerEl);
|
|
329
302
|
};
|
|
330
303
|
|
|
331
|
-
var css_248z
|
|
332
|
-
var styles
|
|
333
|
-
styleInject(css_248z
|
|
304
|
+
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}";
|
|
305
|
+
var styles$$ = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
306
|
+
styleInject(css_248z$$);
|
|
334
307
|
|
|
335
308
|
const Backdrop = (props) => {
|
|
336
|
-
const { target = document.body, isTransparent = false, onClick, style
|
|
309
|
+
const { target = document.body, isTransparent = false, onClick, style, ...rest } = props;
|
|
337
310
|
const handleClick = (e) => {
|
|
338
311
|
e.stopPropagation();
|
|
339
312
|
onClick && onClick(e);
|
|
340
313
|
};
|
|
341
314
|
const getCssClasses = () => {
|
|
342
315
|
const cssClasses = [];
|
|
343
|
-
cssClasses.push(styles
|
|
344
|
-
isTransparent && cssClasses.push(styles
|
|
316
|
+
cssClasses.push(styles$$.backdrop);
|
|
317
|
+
isTransparent && cssClasses.push(styles$$['isTransparent']);
|
|
345
318
|
return cssClasses.filter(css => css).join(' ');
|
|
346
319
|
};
|
|
347
320
|
const getStyles = () => {
|
|
348
321
|
return Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
|
|
349
322
|
};
|
|
350
323
|
return (React__default["default"].createElement(Portal, { className: 'backdrop-root', target: target },
|
|
351
|
-
React__default["default"].createElement("div",
|
|
324
|
+
React__default["default"].createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles(), ...rest })));
|
|
352
325
|
};
|
|
353
326
|
|
|
354
|
-
var css_248z$
|
|
355
|
-
var styles$
|
|
356
|
-
styleInject(css_248z$
|
|
327
|
+
var css_248z$_ = ".List-module_list__gpZ41 {\n width: 100%;\n display: flex;\n flex-direction: column;\n padding-left: 0;\n margin-bottom: 0;\n margin-top: 0;\n background-color: var(--white);\n}";
|
|
328
|
+
var styles$_ = {"list":"List-module_list__gpZ41"};
|
|
329
|
+
styleInject(css_248z$_);
|
|
357
330
|
|
|
358
331
|
const List = (props) => {
|
|
359
|
-
const { children, className, isFlush
|
|
332
|
+
const { children, className, isFlush, ...rest } = props;
|
|
360
333
|
const getCssClasses = () => {
|
|
361
334
|
const cssClasses = [];
|
|
362
|
-
isFlush && cssClasses.push(styles$
|
|
363
|
-
cssClasses.push(styles$
|
|
335
|
+
isFlush && cssClasses.push(styles$_.flush);
|
|
336
|
+
cssClasses.push(styles$_.list);
|
|
364
337
|
className && cssClasses.push(className);
|
|
365
338
|
return cssClasses.filter(css => css).join(' ');
|
|
366
339
|
};
|
|
367
|
-
return (React__default["default"].createElement("ul",
|
|
340
|
+
return (React__default["default"].createElement("ul", { className: getCssClasses(), ...rest }, children));
|
|
368
341
|
};
|
|
369
342
|
|
|
370
|
-
var css_248z$
|
|
371
|
-
var styles$
|
|
372
|
-
styleInject(css_248z$
|
|
343
|
+
var css_248z$Z = ".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}";
|
|
344
|
+
var styles$Z = {"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"};
|
|
345
|
+
styleInject(css_248z$Z);
|
|
373
346
|
|
|
374
347
|
const ListItem = (props) => {
|
|
375
|
-
const { children, color, active, className, disabled, onClick
|
|
348
|
+
const { children, color, active, className, disabled, onClick, ...rest } = props;
|
|
376
349
|
const getCssClasses = () => {
|
|
377
350
|
const cssClasses = [];
|
|
378
|
-
cssClasses.push(styles$
|
|
379
|
-
color && cssClasses.push(styles$
|
|
380
|
-
active && cssClasses.push(styles$
|
|
381
|
-
disabled && cssClasses.push(styles$
|
|
351
|
+
cssClasses.push(styles$Z.listItem);
|
|
352
|
+
color && cssClasses.push(styles$Z[color]);
|
|
353
|
+
active && cssClasses.push(styles$Z['active']);
|
|
354
|
+
disabled && cssClasses.push(styles$Z['disabled']);
|
|
382
355
|
className && cssClasses.push(className);
|
|
383
356
|
return cssClasses.filter(css => css).join(' ');
|
|
384
357
|
};
|
|
385
358
|
const handleClick = (e) => {
|
|
386
359
|
!disabled && onClick && onClick(e);
|
|
387
360
|
};
|
|
388
|
-
return (React__default["default"].createElement("li",
|
|
361
|
+
return (React__default["default"].createElement("li", { onClick: handleClick, className: getCssClasses(), ...rest }, children));
|
|
389
362
|
};
|
|
390
363
|
|
|
391
|
-
var css_248z$
|
|
392
|
-
var styles$
|
|
364
|
+
var css_248z$Y = ".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}";
|
|
365
|
+
var styles$Y = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
366
|
+
styleInject(css_248z$Y);
|
|
367
|
+
|
|
368
|
+
const ListItemAvatar = ({ avatar, ...rest }) => (React__default["default"].createElement("div", { className: styles$Y.avatar, ...rest }, avatar));
|
|
369
|
+
|
|
370
|
+
var css_248z$X = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px;\n}";
|
|
371
|
+
var styles$X = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
393
372
|
styleInject(css_248z$X);
|
|
394
373
|
|
|
395
|
-
const
|
|
396
|
-
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
397
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$X.avatar }, rest), avatar));
|
|
398
|
-
};
|
|
374
|
+
const ListItemIcon = ({ icon, ...rest }) => (React__default["default"].createElement("div", { className: styles$X.icon, ...rest }, icon));
|
|
399
375
|
|
|
400
|
-
var css_248z$W = ".
|
|
401
|
-
var styles$W = {"
|
|
376
|
+
var css_248z$W = ".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}";
|
|
377
|
+
var styles$W = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
402
378
|
styleInject(css_248z$W);
|
|
403
379
|
|
|
404
|
-
const
|
|
405
|
-
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
406
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$W.icon }, rest), icon));
|
|
407
|
-
};
|
|
380
|
+
const ListItemAction = ({ children, onClick, ...rest }) => (React__default["default"].createElement("div", { className: styles$W.listItemAction, onClick: (e) => onClick && onClick(e), ...rest }, children));
|
|
408
381
|
|
|
409
|
-
var css_248z$V = ".
|
|
410
|
-
var styles$V = {"
|
|
382
|
+
var css_248z$V = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
383
|
+
var styles$V = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
411
384
|
styleInject(css_248z$V);
|
|
412
385
|
|
|
413
|
-
const
|
|
414
|
-
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
415
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: (e) => onClick && onClick(e) }, rest), children));
|
|
416
|
-
};
|
|
417
|
-
|
|
418
|
-
var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
419
|
-
var styles$U = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
420
|
-
styleInject(css_248z$U);
|
|
421
|
-
|
|
422
|
-
const ListItemText = (_a) => {
|
|
423
|
-
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
386
|
+
const ListItemText = ({ primary, secondary, ...rest }) => {
|
|
424
387
|
const getCssClasses = () => {
|
|
425
388
|
const cssClasses = [];
|
|
426
|
-
cssClasses.push(styles$
|
|
389
|
+
cssClasses.push(styles$V.listItemText);
|
|
427
390
|
return cssClasses.filter(css => css).join(' ');
|
|
428
391
|
};
|
|
429
|
-
return (React__default["default"].createElement("div",
|
|
392
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest },
|
|
430
393
|
React__default["default"].createElement(ListItemTextPrimary, null, primary),
|
|
431
394
|
secondary &&
|
|
432
395
|
React__default["default"].createElement(ListItemTextSecondary, null, secondary)));
|
|
@@ -434,9 +397,9 @@ const ListItemText = (_a) => {
|
|
|
434
397
|
const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
|
|
435
398
|
const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
436
399
|
|
|
437
|
-
var css_248z$
|
|
438
|
-
var styles$
|
|
439
|
-
styleInject(css_248z$
|
|
400
|
+
var css_248z$U = ".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}";
|
|
401
|
+
var styles$U = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
402
|
+
styleInject(css_248z$U);
|
|
440
403
|
|
|
441
404
|
// preset value
|
|
442
405
|
// enter -> delay? -> show results
|
|
@@ -466,25 +429,25 @@ const AutoComplete = (props) => {
|
|
|
466
429
|
if (isShow === true) {
|
|
467
430
|
document.body.classList.add('modal-open');
|
|
468
431
|
const main = document.querySelector('.main');
|
|
469
|
-
main
|
|
432
|
+
main?.classList.add('modal-open');
|
|
470
433
|
}
|
|
471
434
|
else {
|
|
472
435
|
document.body.classList.remove('modal-open');
|
|
473
436
|
const main = document.querySelector('.main');
|
|
474
|
-
main
|
|
437
|
+
main?.classList.remove('modal-open');
|
|
475
438
|
}
|
|
476
439
|
}, [isShow]);
|
|
477
440
|
React.useEffect(() => {
|
|
478
441
|
return () => {
|
|
479
442
|
document.body.classList.remove('modal-open');
|
|
480
443
|
const main = document.querySelector('.main');
|
|
481
|
-
main
|
|
444
|
+
main?.classList.remove('modal-open');
|
|
482
445
|
};
|
|
483
446
|
}, []);
|
|
484
447
|
const getCssClass = () => {
|
|
485
448
|
const cssClasses = [];
|
|
486
449
|
className && cssClasses.push(className);
|
|
487
|
-
cssClasses.push(styles$
|
|
450
|
+
cssClasses.push(styles$U.select);
|
|
488
451
|
return cssClasses.filter(r => r).join(' ');
|
|
489
452
|
};
|
|
490
453
|
const show = () => setIsShow(true);
|
|
@@ -508,46 +471,46 @@ const AutoComplete = (props) => {
|
|
|
508
471
|
setModel('');
|
|
509
472
|
setSearchText('');
|
|
510
473
|
};
|
|
511
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
474
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$U.selectContainer },
|
|
512
475
|
React__default["default"].createElement("div", { className: "d-flex" },
|
|
513
476
|
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 }),
|
|
514
|
-
showClearButton &&
|
|
477
|
+
showClearButton && model?.length > 0 &&
|
|
515
478
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
516
479
|
isShow &&
|
|
517
480
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
518
|
-
React__default["default"].createElement("div", { className: styles$
|
|
481
|
+
React__default["default"].createElement("div", { className: styles$U.selectMenu },
|
|
519
482
|
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 },
|
|
520
483
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
521
484
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
522
485
|
};
|
|
523
486
|
|
|
524
|
-
var css_248z$
|
|
525
|
-
var styles$
|
|
526
|
-
styleInject(css_248z$
|
|
487
|
+
var css_248z$T = ".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}";
|
|
488
|
+
var styles$T = {"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"};
|
|
489
|
+
styleInject(css_248z$T);
|
|
527
490
|
|
|
528
491
|
const Badge = (props) => {
|
|
529
|
-
const { children, content, className, color = exports.COLOR.primary
|
|
492
|
+
const { children, content, className, color = exports.COLOR.primary, ...rest } = props;
|
|
530
493
|
const [cssClassName] = useCssClasses([
|
|
531
|
-
styles$
|
|
532
|
-
styles$
|
|
494
|
+
styles$T.badge,
|
|
495
|
+
styles$T[color],
|
|
533
496
|
className
|
|
534
497
|
]);
|
|
535
498
|
return (React__default["default"].createElement(BadgeContainer, null,
|
|
536
499
|
children,
|
|
537
|
-
React__default["default"].createElement("span",
|
|
500
|
+
React__default["default"].createElement("span", { className: cssClassName, ...rest }, content)));
|
|
538
501
|
};
|
|
539
502
|
const BadgeContainer = (props) => {
|
|
540
|
-
const { children, className
|
|
503
|
+
const { children, className, ...rest } = props;
|
|
541
504
|
const [cssClassName] = useCssClasses([
|
|
542
|
-
styles$
|
|
505
|
+
styles$T.badgeContainer,
|
|
543
506
|
className,
|
|
544
507
|
]);
|
|
545
|
-
return (React__default["default"].createElement("div",
|
|
508
|
+
return (React__default["default"].createElement("div", { className: cssClassName, ...rest }, children));
|
|
546
509
|
};
|
|
547
510
|
|
|
548
|
-
var css_248z$
|
|
549
|
-
var styles$
|
|
550
|
-
styleInject(css_248z$
|
|
511
|
+
var css_248z$S = ".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}";
|
|
512
|
+
var styles$S = {"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"};
|
|
513
|
+
styleInject(css_248z$S);
|
|
551
514
|
|
|
552
515
|
const ButtonContext = React.createContext({
|
|
553
516
|
color: null
|
|
@@ -555,23 +518,23 @@ const ButtonContext = React.createContext({
|
|
|
555
518
|
const useButtonContext = () => React.useContext(ButtonContext);
|
|
556
519
|
|
|
557
520
|
const Button = (props) => {
|
|
558
|
-
const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block
|
|
521
|
+
const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block, ...rest } = props;
|
|
559
522
|
const buttonContext = useButtonContext();
|
|
560
523
|
const getCssClasses = () => {
|
|
561
524
|
const cssClasses = [];
|
|
562
|
-
cssClasses.push(styles$
|
|
525
|
+
cssClasses.push(styles$S.button);
|
|
563
526
|
const buttonColor = buttonContext.color || color;
|
|
564
527
|
if (variant !== 'outline' && variant !== 'text') {
|
|
565
|
-
cssClasses.push(styles$
|
|
566
|
-
cssClasses.push(styles$
|
|
528
|
+
cssClasses.push(styles$S.btnContained);
|
|
529
|
+
cssClasses.push(styles$S[buttonColor]);
|
|
567
530
|
}
|
|
568
531
|
if (variant === 'outline') {
|
|
569
|
-
cssClasses.push(styles$
|
|
570
|
-
cssClasses.push(styles$
|
|
532
|
+
cssClasses.push(styles$S.btnOutline);
|
|
533
|
+
cssClasses.push(styles$S[buttonColor]);
|
|
571
534
|
}
|
|
572
535
|
if (variant === 'text') {
|
|
573
|
-
cssClasses.push(styles$
|
|
574
|
-
cssClasses.push(styles$
|
|
536
|
+
cssClasses.push(styles$S.btnText);
|
|
537
|
+
cssClasses.push(styles$S[buttonColor]);
|
|
575
538
|
}
|
|
576
539
|
if (isRounded && variant !== 'text') {
|
|
577
540
|
cssClasses.push(`rounded-pill`);
|
|
@@ -579,63 +542,63 @@ const Button = (props) => {
|
|
|
579
542
|
if (isActive) {
|
|
580
543
|
cssClasses.push('active');
|
|
581
544
|
}
|
|
582
|
-
shadow && cssClasses.push(styles$
|
|
583
|
-
block && cssClasses.push(styles$
|
|
545
|
+
shadow && cssClasses.push(styles$S.shadow);
|
|
546
|
+
block && cssClasses.push(styles$S.block);
|
|
584
547
|
className && cssClasses.push(className);
|
|
585
548
|
return cssClasses.filter(css => css).join(' ');
|
|
586
549
|
};
|
|
587
|
-
return (React__default["default"].createElement("button",
|
|
550
|
+
return (React__default["default"].createElement("button", { type: "button", className: getCssClasses(), ...rest },
|
|
588
551
|
React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
|
|
589
552
|
startIcon &&
|
|
590
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
553
|
+
React__default["default"].createElement(Icon, { className: styles$S.startIcon }, startIcon),
|
|
591
554
|
children,
|
|
592
555
|
endIcon &&
|
|
593
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
556
|
+
React__default["default"].createElement(Icon, { className: styles$S.endIcon }, endIcon))));
|
|
594
557
|
};
|
|
595
558
|
|
|
596
|
-
var css_248z$
|
|
597
|
-
var styles$
|
|
598
|
-
styleInject(css_248z$
|
|
559
|
+
var css_248z$R = ".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}";
|
|
560
|
+
var styles$R = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
561
|
+
styleInject(css_248z$R);
|
|
599
562
|
|
|
600
563
|
const ButtonGroup = (props) => {
|
|
601
|
-
const { children, className, color
|
|
564
|
+
const { children, className, color, ...rest } = props;
|
|
602
565
|
const getCssClasses = () => {
|
|
603
566
|
const cssClasses = [];
|
|
604
|
-
cssClasses.push(styles$
|
|
567
|
+
cssClasses.push(styles$R.buttonGroup);
|
|
605
568
|
className && cssClasses.push(className);
|
|
606
569
|
return cssClasses.filter(css => css).join(' ');
|
|
607
570
|
};
|
|
608
571
|
return (React__default["default"].createElement(ButtonContext.Provider, { value: { color: color || exports.COLOR.primary } },
|
|
609
|
-
React__default["default"].createElement("div",
|
|
572
|
+
React__default["default"].createElement("div", { className: getCssClasses(), role: "group", ...rest }, children)));
|
|
610
573
|
};
|
|
611
574
|
|
|
612
|
-
var css_248z$
|
|
613
|
-
var styles$
|
|
614
|
-
styleInject(css_248z$
|
|
575
|
+
var css_248z$Q = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0;\n}";
|
|
576
|
+
var styles$Q = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
577
|
+
styleInject(css_248z$Q);
|
|
615
578
|
|
|
616
579
|
const Breadcrumb = (props) => {
|
|
617
|
-
const { children, className
|
|
580
|
+
const { children, className, ...rest } = props;
|
|
618
581
|
const getCssClasses = () => {
|
|
619
582
|
const cssClasses = [];
|
|
620
|
-
cssClasses.push(styles$
|
|
583
|
+
cssClasses.push(styles$Q.breadcrumb);
|
|
621
584
|
className && cssClasses.push(className);
|
|
622
585
|
return cssClasses.filter(css => css).join(' ');
|
|
623
586
|
};
|
|
624
|
-
return (React__default["default"].createElement("nav",
|
|
587
|
+
return (React__default["default"].createElement("nav", { ...rest },
|
|
625
588
|
React__default["default"].createElement("ol", { className: getCssClasses() }, children)));
|
|
626
589
|
};
|
|
627
590
|
|
|
628
591
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
629
592
|
|
|
630
|
-
var css_248z$
|
|
631
|
-
var styles$
|
|
632
|
-
styleInject(css_248z$
|
|
593
|
+
var css_248z$P = ".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}";
|
|
594
|
+
var styles$P = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
595
|
+
styleInject(css_248z$P);
|
|
633
596
|
|
|
634
597
|
const BreadcrumbItem = (props) => {
|
|
635
598
|
const { children, className, isActive, onClick } = props;
|
|
636
599
|
const getCssClasses = () => {
|
|
637
600
|
const cssClasses = [];
|
|
638
|
-
cssClasses.push(styles$
|
|
601
|
+
cssClasses.push(styles$P.breadcrumbItem);
|
|
639
602
|
className && cssClasses.push(className);
|
|
640
603
|
isActive && cssClasses.push('active');
|
|
641
604
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -647,118 +610,118 @@ const BreadcrumbItem = (props) => {
|
|
|
647
610
|
React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, wrapper: (label) => React__default["default"].createElement("a", null, label) }, children)));
|
|
648
611
|
};
|
|
649
612
|
|
|
650
|
-
var css_248z$
|
|
651
|
-
var styles$
|
|
652
|
-
styleInject(css_248z$
|
|
613
|
+
var css_248z$O = ".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}";
|
|
614
|
+
var styles$O = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
615
|
+
styleInject(css_248z$O);
|
|
653
616
|
|
|
654
617
|
const Card = (props) => {
|
|
655
|
-
const { children, className, shadow = true
|
|
618
|
+
const { children, className, shadow = true, ...rest } = props;
|
|
656
619
|
const getCssClasses = () => {
|
|
657
620
|
const cssClasses = [];
|
|
658
|
-
cssClasses.push(styles$
|
|
659
|
-
shadow && cssClasses.push(styles$
|
|
621
|
+
cssClasses.push(styles$O.card);
|
|
622
|
+
shadow && cssClasses.push(styles$O.shadow);
|
|
660
623
|
className && cssClasses.push(className);
|
|
661
624
|
return cssClasses.filter(css => css).join(' ');
|
|
662
625
|
};
|
|
663
|
-
return (React__default["default"].createElement("div",
|
|
626
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
664
627
|
};
|
|
665
628
|
|
|
666
|
-
var css_248z$
|
|
667
|
-
var styles$
|
|
668
|
-
styleInject(css_248z$
|
|
629
|
+
var css_248z$N = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
630
|
+
var styles$N = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
631
|
+
styleInject(css_248z$N);
|
|
669
632
|
|
|
670
633
|
const CardBody = (props) => {
|
|
671
|
-
const { children, className
|
|
634
|
+
const { children, className, ...rest } = props;
|
|
672
635
|
const getCssClasses = () => {
|
|
673
636
|
const cssClasses = [];
|
|
674
|
-
cssClasses.push(styles$
|
|
637
|
+
cssClasses.push(styles$N.cardBody);
|
|
675
638
|
className && cssClasses.push(className);
|
|
676
639
|
return cssClasses.filter(css => css).join(' ');
|
|
677
640
|
};
|
|
678
|
-
return (React__default["default"].createElement("div",
|
|
641
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
679
642
|
};
|
|
680
643
|
|
|
681
|
-
var css_248z$
|
|
682
|
-
var styles$
|
|
683
|
-
styleInject(css_248z$
|
|
644
|
+
var css_248z$M = ".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}";
|
|
645
|
+
var styles$M = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
646
|
+
styleInject(css_248z$M);
|
|
684
647
|
|
|
685
648
|
const CardFooter = (props) => {
|
|
686
|
-
const { children, className
|
|
649
|
+
const { children, className, ...rest } = props;
|
|
687
650
|
const getCssClasses = () => {
|
|
688
651
|
const cssClasses = [];
|
|
689
|
-
cssClasses.push(styles$
|
|
652
|
+
cssClasses.push(styles$M.cardFooter);
|
|
690
653
|
className && cssClasses.push(className);
|
|
691
654
|
return cssClasses.filter(css => css).join(' ');
|
|
692
655
|
};
|
|
693
|
-
return (React__default["default"].createElement("div",
|
|
656
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
694
657
|
};
|
|
695
658
|
|
|
696
|
-
var css_248z$
|
|
697
|
-
var styles$
|
|
698
|
-
styleInject(css_248z$
|
|
659
|
+
var css_248z$L = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
660
|
+
var styles$L = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
661
|
+
styleInject(css_248z$L);
|
|
699
662
|
|
|
700
663
|
const CardSubtitle = (props) => {
|
|
701
|
-
const { children, className
|
|
664
|
+
const { children, className, ...rest } = props;
|
|
702
665
|
const getCssClasses = () => {
|
|
703
666
|
const cssClasses = [];
|
|
704
|
-
cssClasses.push(styles$
|
|
667
|
+
cssClasses.push(styles$L.cardSubtitle);
|
|
705
668
|
className && cssClasses.push(className);
|
|
706
669
|
return cssClasses.filter(css => css).join(' ');
|
|
707
670
|
};
|
|
708
|
-
return (React__default["default"].createElement("p",
|
|
671
|
+
return (React__default["default"].createElement("p", { className: getCssClasses(), ...rest }, children));
|
|
709
672
|
};
|
|
710
673
|
|
|
711
|
-
var css_248z$
|
|
712
|
-
var styles$
|
|
713
|
-
styleInject(css_248z$
|
|
674
|
+
var css_248z$K = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
675
|
+
var styles$K = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
676
|
+
styleInject(css_248z$K);
|
|
714
677
|
|
|
715
678
|
const CardText = (props) => {
|
|
716
|
-
const { children, className
|
|
679
|
+
const { children, className, ...rest } = props;
|
|
717
680
|
const getCssClasses = () => {
|
|
718
681
|
const cssClasses = [];
|
|
719
|
-
cssClasses.push(styles$
|
|
682
|
+
cssClasses.push(styles$K.cardText);
|
|
720
683
|
className && cssClasses.push(className);
|
|
721
684
|
return cssClasses.filter(css => css).join(' ');
|
|
722
685
|
};
|
|
723
|
-
return (React__default["default"].createElement("p",
|
|
686
|
+
return (React__default["default"].createElement("p", { className: getCssClasses(), ...rest }, children));
|
|
724
687
|
};
|
|
725
688
|
|
|
726
|
-
var css_248z$
|
|
727
|
-
var styles$
|
|
728
|
-
styleInject(css_248z$
|
|
689
|
+
var css_248z$J = ".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}";
|
|
690
|
+
var styles$J = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
691
|
+
styleInject(css_248z$J);
|
|
729
692
|
|
|
730
693
|
const CardTitle = (props) => {
|
|
731
|
-
const { children, className, as: As = 'div'
|
|
694
|
+
const { children, className, as: As = 'div', ...rest } = props;
|
|
732
695
|
const getCssClasses = () => {
|
|
733
696
|
const cssClasses = [];
|
|
734
|
-
cssClasses.push(styles$
|
|
697
|
+
cssClasses.push(styles$J.cardTitle);
|
|
735
698
|
className && cssClasses.push(className);
|
|
736
699
|
return cssClasses.filter(css => css).join(' ');
|
|
737
700
|
};
|
|
738
|
-
return (React__default["default"].createElement(As,
|
|
701
|
+
return (React__default["default"].createElement(As, { className: getCssClasses(), ...rest }, children));
|
|
739
702
|
};
|
|
740
703
|
|
|
741
|
-
var css_248z$
|
|
742
|
-
var styles$
|
|
743
|
-
styleInject(css_248z$
|
|
704
|
+
var css_248z$I = ".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}";
|
|
705
|
+
var styles$I = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
706
|
+
styleInject(css_248z$I);
|
|
744
707
|
|
|
745
708
|
const CardImage = (props) => {
|
|
746
|
-
const { src, alt, className
|
|
709
|
+
const { src, alt, className, ...rest } = props;
|
|
747
710
|
const getCssClasses = () => {
|
|
748
711
|
const cssClasses = [];
|
|
749
|
-
cssClasses.push(styles$
|
|
712
|
+
cssClasses.push(styles$I.cardImage);
|
|
750
713
|
className && cssClasses.push(className);
|
|
751
714
|
return cssClasses.filter(css => css).join(' ');
|
|
752
715
|
};
|
|
753
|
-
return (React__default["default"].createElement("img",
|
|
716
|
+
return (React__default["default"].createElement("img", { className: getCssClasses(), src: src, alt: alt, ...rest }));
|
|
754
717
|
};
|
|
755
718
|
|
|
756
|
-
var css_248z$
|
|
757
|
-
var styles$
|
|
758
|
-
styleInject(css_248z$
|
|
719
|
+
var css_248z$H = ".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}";
|
|
720
|
+
var styles$H = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
721
|
+
styleInject(css_248z$H);
|
|
759
722
|
|
|
760
723
|
const Checkbox = (props) => {
|
|
761
|
-
const { id, checked, className, label, name, value = 'off', disabled, readOnly
|
|
724
|
+
const { id, checked, className, label, name, value = 'off', disabled, readOnly, ...rest } = props;
|
|
762
725
|
// TODO
|
|
763
726
|
// add own value
|
|
764
727
|
// set from outer
|
|
@@ -784,38 +747,37 @@ const Checkbox = (props) => {
|
|
|
784
747
|
};
|
|
785
748
|
const getCssClassesLabel = () => {
|
|
786
749
|
const cssClasses = [];
|
|
787
|
-
cssClasses.push(styles$
|
|
788
|
-
disabled && cssClasses.push(styles$
|
|
750
|
+
cssClasses.push(styles$H.checkboxLabel);
|
|
751
|
+
disabled && cssClasses.push(styles$H['disabled']);
|
|
789
752
|
return cssClasses.filter(css => css).join(' ');
|
|
790
753
|
};
|
|
791
754
|
const getIcon = () => {
|
|
792
755
|
return isChecked ? icons.selected : icons.default;
|
|
793
756
|
};
|
|
794
757
|
const handleClick = () => {
|
|
795
|
-
var _a;
|
|
796
758
|
if (!disabled && !readOnly) {
|
|
797
759
|
setIsChecked(!isChecked);
|
|
798
|
-
|
|
760
|
+
checkboxElement?.current?.click();
|
|
799
761
|
}
|
|
800
762
|
};
|
|
801
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
763
|
+
return (React__default["default"].createElement("div", { className: styles$H.checkboxContainer },
|
|
802
764
|
React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
803
765
|
React__default["default"].createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
804
|
-
React__default["default"].createElement("input",
|
|
766
|
+
React__default["default"].createElement("input", { type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value, ...rest })));
|
|
805
767
|
};
|
|
806
768
|
|
|
807
|
-
var css_248z$
|
|
808
|
-
var styles$
|
|
809
|
-
styleInject(css_248z$
|
|
769
|
+
var css_248z$G = ".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}";
|
|
770
|
+
var styles$G = {"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"};
|
|
771
|
+
styleInject(css_248z$G);
|
|
810
772
|
|
|
811
773
|
const Chip = (props) => {
|
|
812
|
-
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React__default["default"].createElement(TimesCircleSolidIcon, null), style
|
|
774
|
+
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React__default["default"].createElement(TimesCircleSolidIcon, null), style, ...rest } = props;
|
|
813
775
|
const getCssClass = () => {
|
|
814
776
|
const cssClasses = [];
|
|
815
|
-
cssClasses.push(styles$
|
|
816
|
-
cssClasses.push(styles$
|
|
817
|
-
shadow && cssClasses.push(styles$
|
|
818
|
-
onClick && cssClasses.push(styles$
|
|
777
|
+
cssClasses.push(styles$G.chip);
|
|
778
|
+
cssClasses.push(styles$G[color]);
|
|
779
|
+
shadow && cssClasses.push(styles$G['shadow']);
|
|
780
|
+
onClick && cssClasses.push(styles$G['clickable']);
|
|
819
781
|
className && cssClasses.push(className);
|
|
820
782
|
return cssClasses.filter(r => r).join(' ');
|
|
821
783
|
};
|
|
@@ -823,9 +785,9 @@ const Chip = (props) => {
|
|
|
823
785
|
e.stopPropagation();
|
|
824
786
|
onDelete && onDelete(e);
|
|
825
787
|
};
|
|
826
|
-
return (React__default["default"].createElement("div",
|
|
788
|
+
return (React__default["default"].createElement("div", { className: getCssClass(), ...rest, style: style },
|
|
827
789
|
React__default["default"].createElement("span", null, children),
|
|
828
|
-
isDeletable && (React__default["default"].createElement("div", { className: styles$
|
|
790
|
+
isDeletable && (React__default["default"].createElement("div", { className: styles$G.deleteIcon, onClick: (e) => handleClickOnDelete(e) }, deleteIcon))));
|
|
829
791
|
};
|
|
830
792
|
|
|
831
793
|
const CssTransition = (props) => {
|
|
@@ -890,63 +852,61 @@ const CssTransition = (props) => {
|
|
|
890
852
|
}, [isShow]);
|
|
891
853
|
const getCssClasses = () => {
|
|
892
854
|
const cssClasses = [];
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
855
|
+
cssState?.hidden && cssClasses.push(`hidden`);
|
|
856
|
+
cssState?.enter && cssClasses.push(`${className}-enter`);
|
|
857
|
+
cssState?.enterStart && cssClasses.push(`${className}-enter-start`);
|
|
858
|
+
cssState?.enterEnd && cssClasses.push(`${className}-enter-end`);
|
|
859
|
+
cssState?.leave && cssClasses.push(`${className}-leave`);
|
|
860
|
+
cssState?.leaveStart && cssClasses.push(`${className}-leave-start`);
|
|
861
|
+
cssState?.leaveEnd && cssClasses.push(`${className}-leave-end`);
|
|
900
862
|
return cssClasses.filter((css) => css).join(' ');
|
|
901
863
|
};
|
|
902
864
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, isRenderChild &&
|
|
903
865
|
React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
904
866
|
};
|
|
905
867
|
|
|
906
|
-
var css_248z$
|
|
907
|
-
var styles$
|
|
908
|
-
styleInject(css_248z$
|
|
868
|
+
var css_248z$F = ".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}";
|
|
869
|
+
var styles$F = {"column":"Column-module_column__fcTgl"};
|
|
870
|
+
styleInject(css_248z$F);
|
|
909
871
|
|
|
910
872
|
const Column = (props) => {
|
|
911
|
-
const { children, className
|
|
873
|
+
const { children, className, ...rest } = props;
|
|
912
874
|
const getCssClasses = () => {
|
|
913
875
|
const cssClasses = [];
|
|
914
|
-
cssClasses.push(styles$
|
|
876
|
+
cssClasses.push(styles$F.column);
|
|
915
877
|
className && cssClasses.push(className);
|
|
916
878
|
return cssClasses.filter(css => css).join(' ');
|
|
917
879
|
};
|
|
918
|
-
return (React__default["default"].createElement("div",
|
|
880
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
919
881
|
};
|
|
920
882
|
|
|
921
|
-
var css_248z$
|
|
922
|
-
var styles$
|
|
923
|
-
styleInject(css_248z$
|
|
883
|
+
var css_248z$E = ".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}";
|
|
884
|
+
var styles$E = {"row":"Row-module_row__bTIWp"};
|
|
885
|
+
styleInject(css_248z$E);
|
|
924
886
|
|
|
925
|
-
const Row = (
|
|
926
|
-
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
887
|
+
const Row = ({ children, direction = 'row', className, ...rest }) => {
|
|
927
888
|
const getCssClasses = () => {
|
|
928
889
|
const cssClasses = [];
|
|
929
|
-
cssClasses.push(styles$
|
|
890
|
+
cssClasses.push(styles$E.row);
|
|
930
891
|
className && cssClasses.push(className);
|
|
931
892
|
direction && cssClasses.push(`flex-${direction}`);
|
|
932
893
|
return cssClasses.filter(css => css).join(' ');
|
|
933
894
|
};
|
|
934
|
-
return (React__default["default"].createElement("div",
|
|
895
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
935
896
|
};
|
|
936
897
|
|
|
937
|
-
var css_248z$
|
|
938
|
-
var styles$
|
|
939
|
-
styleInject(css_248z$
|
|
898
|
+
var css_248z$D = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
899
|
+
var styles$D = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
900
|
+
styleInject(css_248z$D);
|
|
940
901
|
|
|
941
|
-
const FormLabel = (
|
|
942
|
-
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
902
|
+
const FormLabel = ({ children, className, htmlFor, ...rest }) => {
|
|
943
903
|
const getCssClasses = () => {
|
|
944
904
|
const cssClasses = [];
|
|
945
|
-
cssClasses.push(styles$
|
|
905
|
+
cssClasses.push(styles$D.formLabel);
|
|
946
906
|
className && cssClasses.push(className);
|
|
947
907
|
return cssClasses.filter(css => css).join(' ');
|
|
948
908
|
};
|
|
949
|
-
return (React__default["default"].createElement("label",
|
|
909
|
+
return (React__default["default"].createElement("label", { htmlFor: htmlFor, className: getCssClasses(), ...rest }, children));
|
|
950
910
|
};
|
|
951
911
|
|
|
952
912
|
const FormGroup = (props) => {
|
|
@@ -955,7 +915,7 @@ const FormGroup = (props) => {
|
|
|
955
915
|
};
|
|
956
916
|
|
|
957
917
|
const FileInput = (props) => {
|
|
958
|
-
const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false
|
|
918
|
+
const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false, ...rest } = props;
|
|
959
919
|
const inputFileElement = React.useRef(null);
|
|
960
920
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
961
921
|
const [model, setModel] = React.useState(value);
|
|
@@ -974,17 +934,16 @@ const FileInput = (props) => {
|
|
|
974
934
|
alert('coming soon');
|
|
975
935
|
};
|
|
976
936
|
return (React__default["default"].createElement("div", { className: "d-flex align-items-start" },
|
|
977
|
-
React__default["default"].createElement(Button, { className: "flex-wrap", disabled: disabled, onClick: () =>
|
|
937
|
+
React__default["default"].createElement(Button, { className: "flex-wrap", disabled: disabled, onClick: () => inputFileElement.current?.click() }, children),
|
|
978
938
|
React__default["default"].createElement("div", { className: "d-flex align-items-center flex-wrap ml-1" }, fileList && Array.from(fileList).map((file) => React__default["default"].createElement(Chip, { key: file.name, isDeletable: deletable, onDelete: () => handleOnDelete() }, file.name))),
|
|
979
|
-
React__default["default"].createElement("input",
|
|
939
|
+
React__default["default"].createElement("input", { 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 })));
|
|
980
940
|
};
|
|
981
941
|
|
|
982
|
-
var css_248z$
|
|
983
|
-
var styles$
|
|
984
|
-
styleInject(css_248z$
|
|
942
|
+
var css_248z$C = ".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}";
|
|
943
|
+
var styles$C = {"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"};
|
|
944
|
+
styleInject(css_248z$C);
|
|
985
945
|
|
|
986
946
|
const Select = (props) => {
|
|
987
|
-
var _a, _b, _c;
|
|
988
947
|
const { id, className, options = [], value, multiple, multipleMaxCountItems = 5, disabled, readOnly, onChange, onKeyDown } = props;
|
|
989
948
|
const [model, setModel] = React.useState('');
|
|
990
949
|
const [hoverIndex, setHoverIndex] = React.useState(null);
|
|
@@ -994,9 +953,9 @@ const Select = (props) => {
|
|
|
994
953
|
const getCssClass = () => {
|
|
995
954
|
const cssClasses = [];
|
|
996
955
|
className && cssClasses.push(className);
|
|
997
|
-
disabled && cssClasses.push(styles$
|
|
998
|
-
readOnly && cssClasses.push(styles$
|
|
999
|
-
cssClasses.push(styles$
|
|
956
|
+
disabled && cssClasses.push(styles$C['disabled']);
|
|
957
|
+
readOnly && cssClasses.push(styles$C['readOnly']);
|
|
958
|
+
cssClasses.push(styles$C.select);
|
|
1000
959
|
return cssClasses.filter(r => r).join(' ');
|
|
1001
960
|
};
|
|
1002
961
|
React.useEffect(() => {
|
|
@@ -1015,10 +974,9 @@ const Select = (props) => {
|
|
|
1015
974
|
}
|
|
1016
975
|
}, [hoverIndex, isShow]);
|
|
1017
976
|
const scrollIntoView = (index) => {
|
|
1018
|
-
|
|
1019
|
-
const htmlListItem = (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.querySelector(`#list-item-${index}`);
|
|
977
|
+
const htmlListItem = selectConainter.current?.querySelector(`#list-item-${index}`);
|
|
1020
978
|
if (htmlListItem) {
|
|
1021
|
-
htmlListItem
|
|
979
|
+
htmlListItem?.scrollIntoView({ block: 'end', behavior: 'smooth' });
|
|
1022
980
|
}
|
|
1023
981
|
};
|
|
1024
982
|
const writeValue = (val) => setModel(val);
|
|
@@ -1119,17 +1077,17 @@ const Select = (props) => {
|
|
|
1119
1077
|
}
|
|
1120
1078
|
}
|
|
1121
1079
|
};
|
|
1122
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
1080
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$C.selectContainer },
|
|
1123
1081
|
React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e) },
|
|
1124
1082
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1125
1083
|
!multiple && renderSingleViewModel(),
|
|
1126
1084
|
multiple &&
|
|
1127
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1085
|
+
React__default["default"].createElement("div", { className: styles$C.chipContainer }, renderMultipleViewModel()),
|
|
1128
1086
|
React__default["default"].createElement(Icon, { className: "ml-auto" },
|
|
1129
1087
|
React__default["default"].createElement(ChevronDownSolidIcon, null)))),
|
|
1130
1088
|
isShow &&
|
|
1131
1089
|
React__default["default"].createElement(Portal, { className: 'backdrop-root' },
|
|
1132
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1090
|
+
React__default["default"].createElement("div", { className: styles$C.selectMenu, style: { left: selectConainter.current?.getBoundingClientRect().x, top: selectConainter.current?.getBoundingClientRect().y, width: selectConainter.current?.getBoundingClientRect().width } },
|
|
1133
1091
|
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) },
|
|
1134
1092
|
multiple &&
|
|
1135
1093
|
React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1137,33 +1095,33 @@ const Select = (props) => {
|
|
|
1137
1095
|
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1138
1096
|
};
|
|
1139
1097
|
|
|
1140
|
-
var css_248z$
|
|
1141
|
-
var styles$
|
|
1142
|
-
styleInject(css_248z$
|
|
1098
|
+
var css_248z$B = ".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}";
|
|
1099
|
+
var styles$B = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1100
|
+
styleInject(css_248z$B);
|
|
1143
1101
|
|
|
1144
1102
|
const Textarea = (props) => {
|
|
1145
|
-
const { className, error
|
|
1103
|
+
const { className, error, ...rest } = props;
|
|
1146
1104
|
const getCssClass = () => {
|
|
1147
1105
|
const cssClasses = [];
|
|
1148
|
-
cssClasses.push(styles$
|
|
1106
|
+
cssClasses.push(styles$B.textarea);
|
|
1149
1107
|
className && cssClasses.push(className);
|
|
1150
|
-
error && cssClasses.push(styles$
|
|
1108
|
+
error && cssClasses.push(styles$B['isInvalid']);
|
|
1151
1109
|
return cssClasses.filter(r => r).join(' ');
|
|
1152
1110
|
};
|
|
1153
|
-
return (React__default["default"].createElement("textarea",
|
|
1111
|
+
return (React__default["default"].createElement("textarea", { className: getCssClass(), ...rest }));
|
|
1154
1112
|
};
|
|
1155
1113
|
|
|
1156
|
-
var css_248z$
|
|
1157
|
-
var styles$
|
|
1158
|
-
styleInject(css_248z$
|
|
1114
|
+
var css_248z$A = ".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}";
|
|
1115
|
+
var styles$A = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1116
|
+
styleInject(css_248z$A);
|
|
1159
1117
|
|
|
1160
1118
|
const FormInput = (props) => {
|
|
1161
1119
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1162
1120
|
const getCssClasses = () => {
|
|
1163
1121
|
const cssClasses = [];
|
|
1164
|
-
cssClasses.push(styles$
|
|
1122
|
+
cssClasses.push(styles$A.formInput);
|
|
1165
1123
|
className && cssClasses.push(className);
|
|
1166
|
-
!isValid && cssClasses.push(styles$
|
|
1124
|
+
!isValid && cssClasses.push(styles$A['isInvalid']);
|
|
1167
1125
|
return cssClasses.filter(css => css).join(' ');
|
|
1168
1126
|
};
|
|
1169
1127
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1184,20 +1142,20 @@ const FormInput = (props) => {
|
|
|
1184
1142
|
type === 'color' ||
|
|
1185
1143
|
type === 'time')
|
|
1186
1144
|
&&
|
|
1187
|
-
React__default["default"].createElement("input", { id: name, name: name, type: type, className: getCssClasses(), value: value, autoFocus: autoFocus, onInput: (e) => handleOnInput(e.target.value, type, name), onChange: (e) => handleOnChange((e
|
|
1145
|
+
React__default["default"].createElement("input", { id: name, name: name, type: type, className: getCssClasses(), value: value, autoFocus: autoFocus, onInput: (e) => handleOnInput(e.target.value, type, name), onChange: (e) => handleOnChange((e?.target).value, type, name), onBlur: onBlur, placeholder: placeholder, readOnly: readonly, disabled: disabled, onKeyDown: onKeyDown }),
|
|
1188
1146
|
type === 'file' &&
|
|
1189
1147
|
React__default["default"].createElement(FileInput, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, readOnly: readonly, disabled: disabled, onChange: (e) => handleOnChange(e.target.value, type, name) }, "choose a file"),
|
|
1190
1148
|
type === 'textarea' &&
|
|
1191
|
-
React__default["default"].createElement(Textarea, { id: name, name: name, className: className, error: !isValid, value: value, autoFocus: autoFocus, onInput: (e) => handleOnInput(e.target.value, type, name), onChange: (e) => handleOnChange(e.target.value, type, name), placeholder: placeholder, rows: textareaOptions
|
|
1149
|
+
React__default["default"].createElement(Textarea, { id: name, name: name, className: className, error: !isValid, value: value, autoFocus: autoFocus, onInput: (e) => handleOnInput(e.target.value, type, name), onChange: (e) => handleOnChange(e.target.value, type, name), placeholder: placeholder, rows: textareaOptions?.rows, style: textareaOptions?.resize !== false ? undefined : { resize: 'none' } }),
|
|
1192
1150
|
type === 'select' &&
|
|
1193
|
-
React__default["default"].createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions
|
|
1151
|
+
React__default["default"].createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions?.multiple, onChange: (e) => handleOnChange(e, type, name), options: options }),
|
|
1194
1152
|
type === 'autocomplete' &&
|
|
1195
|
-
React__default["default"].createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions
|
|
1153
|
+
React__default["default"].createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions?.openOnFocus, onChange: (e) => handleOnChange(e, type, name), onSelect: (e) => handleOnChange(e.value, type, name), options: options }),
|
|
1196
1154
|
type === 'checkbox' &&
|
|
1197
|
-
React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: (e) => handleOnChange((e
|
|
1155
|
+
React__default["default"].createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: (e) => handleOnChange((e?.target).checked, type, name), checked: value }),
|
|
1198
1156
|
type === 'radio' &&
|
|
1199
1157
|
React__default["default"].createElement(React__default["default"].Fragment, null, options.map((option) => React__default["default"].createElement("div", { className: "form-check", key: option.id },
|
|
1200
|
-
React__default["default"].createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: (e) => handleOnChange((e
|
|
1158
|
+
React__default["default"].createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: (e) => handleOnChange((e?.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
|
|
1201
1159
|
React__default["default"].createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
|
|
1202
1160
|
};
|
|
1203
1161
|
|
|
@@ -1211,12 +1169,12 @@ const FormHint = (props) => {
|
|
|
1211
1169
|
return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
|
|
1212
1170
|
};
|
|
1213
1171
|
|
|
1214
|
-
var css_248z$
|
|
1215
|
-
var styles$
|
|
1216
|
-
styleInject(css_248z$
|
|
1172
|
+
var css_248z$z = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
1173
|
+
var styles$z = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1174
|
+
styleInject(css_248z$z);
|
|
1217
1175
|
|
|
1218
1176
|
const FormError = (props) => {
|
|
1219
|
-
const { className = styles$
|
|
1177
|
+
const { className = styles$z.isInvalid, errors = [] } = props;
|
|
1220
1178
|
return (React__default["default"].createElement(React.Fragment, null, errors &&
|
|
1221
1179
|
React__default["default"].createElement("div", { className: className }, errors.map(e => React__default["default"].createElement("div", { key: e.validator }, e.message)))));
|
|
1222
1180
|
};
|
|
@@ -1258,7 +1216,10 @@ class Form extends React.Component {
|
|
|
1258
1216
|
const newValue = ((control.type === 'date' || control.type === 'datetime-local') &&
|
|
1259
1217
|
control.value &&
|
|
1260
1218
|
isValidDate((control.value))) ? new Date((control.value)).toISOString() : control.value;
|
|
1261
|
-
return (
|
|
1219
|
+
return ({
|
|
1220
|
+
...obj,
|
|
1221
|
+
[f]: newValue
|
|
1222
|
+
});
|
|
1262
1223
|
}, {});
|
|
1263
1224
|
if (this.state.isValid && this.state.isSubmitted) {
|
|
1264
1225
|
this.props.onSubmit && this.props.onSubmit(values);
|
|
@@ -1321,7 +1282,7 @@ class Form extends React.Component {
|
|
|
1321
1282
|
field.isDirty = true;
|
|
1322
1283
|
field.errors = this.validateField(field.value, field.validators);
|
|
1323
1284
|
field.isValid = field.errors.length === 0;
|
|
1324
|
-
const newControls =
|
|
1285
|
+
const newControls = { ...this.state.controls };
|
|
1325
1286
|
newControls[name] = field;
|
|
1326
1287
|
this.setState({ controls: newControls, isChanged: true }, () => this.handleChange());
|
|
1327
1288
|
}
|
|
@@ -1366,7 +1327,7 @@ class Form extends React.Component {
|
|
|
1366
1327
|
field.isValid = field.errors.length === 0;
|
|
1367
1328
|
}
|
|
1368
1329
|
this.setState({
|
|
1369
|
-
controls:
|
|
1330
|
+
controls: { ...this.state.controls },
|
|
1370
1331
|
isSubmitted: true,
|
|
1371
1332
|
isValid: Object.keys(this.state.controls).map(f => this.getControl(f).isValid).every(valid => valid === true)
|
|
1372
1333
|
}, () => this.handleChange());
|
|
@@ -1381,7 +1342,7 @@ class Form extends React.Component {
|
|
|
1381
1342
|
field.isValid = field.errors.length === 0;
|
|
1382
1343
|
}
|
|
1383
1344
|
this.setState({
|
|
1384
|
-
controls:
|
|
1345
|
+
controls: { ...this.state.controls },
|
|
1385
1346
|
isSubmitted: false,
|
|
1386
1347
|
isChanged: false,
|
|
1387
1348
|
isValid: false
|
|
@@ -1528,7 +1489,7 @@ const DateSelect = (props) => {
|
|
|
1528
1489
|
return (React__default["default"].createElement(Row, { className: getCssClasses() },
|
|
1529
1490
|
React__default["default"].createElement(Column, null,
|
|
1530
1491
|
React__default["default"].createElement(FormLabel, null, "Year"),
|
|
1531
|
-
React__default["default"].createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig
|
|
1492
|
+
React__default["default"].createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig?.from, to: yearConfig?.to, onChange: (e) => handleOnChange(e, exports.DATEMODE.YEAR) })),
|
|
1532
1493
|
React__default["default"].createElement(Column, null,
|
|
1533
1494
|
React__default["default"].createElement(FormLabel, null, "Month"),
|
|
1534
1495
|
React__default["default"].createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: (e) => handleOnChange(e, exports.DATEMODE.MONTH) })),
|
|
@@ -1547,33 +1508,33 @@ const DateSelect = (props) => {
|
|
|
1547
1508
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1548
1509
|
// };
|
|
1549
1510
|
|
|
1550
|
-
var css_248z$
|
|
1551
|
-
var styles$
|
|
1552
|
-
styleInject(css_248z$
|
|
1511
|
+
var css_248z$y = ".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}";
|
|
1512
|
+
var styles$y = {"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"};
|
|
1513
|
+
styleInject(css_248z$y);
|
|
1553
1514
|
|
|
1554
1515
|
const Drawer = (props) => {
|
|
1555
|
-
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop
|
|
1516
|
+
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop, ...rest } = props;
|
|
1556
1517
|
React.useEffect(() => {
|
|
1557
|
-
document.body.classList.add(styles$
|
|
1518
|
+
document.body.classList.add(styles$y.drawerOpen);
|
|
1558
1519
|
return () => {
|
|
1559
|
-
document.body.classList.remove(styles$
|
|
1520
|
+
document.body.classList.remove(styles$y.drawerOpen);
|
|
1560
1521
|
};
|
|
1561
1522
|
}, []);
|
|
1562
1523
|
const handleClickBackdrop = () => {
|
|
1563
1524
|
onClickBackdrop && onClickBackdrop();
|
|
1564
1525
|
};
|
|
1565
1526
|
return (React__default["default"].createElement(Portal, { className: 'drawer-root', target: target },
|
|
1566
|
-
React__default["default"].createElement(DrawerContent,
|
|
1527
|
+
React__default["default"].createElement(DrawerContent, { className: className, position: position, permanent: permanent, shadow: shadow, ...rest }, children),
|
|
1567
1528
|
!permanent && React__default["default"].createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1568
1529
|
};
|
|
1569
1530
|
const DrawerContent = (props) => {
|
|
1570
|
-
const { children, className, position = 'left', permanent = false, shadow
|
|
1531
|
+
const { children, className, position = 'left', permanent = false, shadow, ...rest } = props;
|
|
1571
1532
|
const getCssClasses = () => {
|
|
1572
1533
|
const cssClasses = [];
|
|
1573
|
-
cssClasses.push(styles$
|
|
1574
|
-
shadow && cssClasses.push(styles$
|
|
1575
|
-
!!permanent && cssClasses.push(styles$
|
|
1576
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1534
|
+
cssClasses.push(styles$y.drawer);
|
|
1535
|
+
shadow && cssClasses.push(styles$y.shadow);
|
|
1536
|
+
!!permanent && cssClasses.push(styles$y['permanent']);
|
|
1537
|
+
position === 'left' ? cssClasses.push(styles$y['left']) : cssClasses.push(styles$y['right']);
|
|
1577
1538
|
className && cssClasses.push(className);
|
|
1578
1539
|
return cssClasses.filter(css => css).join(' ');
|
|
1579
1540
|
};
|
|
@@ -1584,12 +1545,12 @@ const DrawerContent = (props) => {
|
|
|
1584
1545
|
const getStyles = () => {
|
|
1585
1546
|
return !permanent ? positionStyles[position] : undefined;
|
|
1586
1547
|
};
|
|
1587
|
-
return (React__default["default"].createElement("div",
|
|
1548
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), style: getStyles(), ...rest }, children));
|
|
1588
1549
|
};
|
|
1589
1550
|
|
|
1590
|
-
var css_248z$
|
|
1591
|
-
var styles$
|
|
1592
|
-
styleInject(css_248z$
|
|
1551
|
+
var css_248z$x = ".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}";
|
|
1552
|
+
var styles$x = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1553
|
+
styleInject(css_248z$x);
|
|
1593
1554
|
|
|
1594
1555
|
const MenuBody = (props) => {
|
|
1595
1556
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1620,8 +1581,8 @@ const MenuBody = (props) => {
|
|
|
1620
1581
|
}, [menuBodyRef]);
|
|
1621
1582
|
const getCssClasses = () => {
|
|
1622
1583
|
const cssClasses = [];
|
|
1623
|
-
cssClasses.push(styles$
|
|
1624
|
-
shadow && cssClasses.push(styles$
|
|
1584
|
+
cssClasses.push(styles$x.menuBody);
|
|
1585
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
1625
1586
|
className && cssClasses.push(className);
|
|
1626
1587
|
return cssClasses.filter(css => css).join(' ');
|
|
1627
1588
|
};
|
|
@@ -1635,7 +1596,7 @@ const MenuBody = (props) => {
|
|
|
1635
1596
|
};
|
|
1636
1597
|
|
|
1637
1598
|
const Menu = (props) => {
|
|
1638
|
-
const { toggle, children, className, open, menuPosition, onClickBackdrop
|
|
1599
|
+
const { toggle, children, className, open, menuPosition, onClickBackdrop, ...rest } = props;
|
|
1639
1600
|
const menuContainer = React.useRef(null);
|
|
1640
1601
|
const toggleContainerRef = React.useRef(null);
|
|
1641
1602
|
const getCssClasses = () => {
|
|
@@ -1646,14 +1607,14 @@ const Menu = (props) => {
|
|
|
1646
1607
|
const handleClickBackdrop = () => {
|
|
1647
1608
|
onClickBackdrop && onClickBackdrop();
|
|
1648
1609
|
};
|
|
1649
|
-
return (React__default["default"].createElement("div",
|
|
1610
|
+
return (React__default["default"].createElement("div", { ref: menuContainer, className: getCssClasses(), ...rest },
|
|
1650
1611
|
React__default["default"].createElement("div", { ref: toggleContainerRef }, toggle),
|
|
1651
1612
|
open &&
|
|
1652
1613
|
React__default["default"].createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1653
1614
|
};
|
|
1654
1615
|
|
|
1655
1616
|
const MenuItem = (props) => {
|
|
1656
|
-
const { children, onClick
|
|
1617
|
+
const { children, onClick, ...rest } = props;
|
|
1657
1618
|
const getCssClasses = () => {
|
|
1658
1619
|
const cssClasses = [];
|
|
1659
1620
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -1662,30 +1623,30 @@ const MenuItem = (props) => {
|
|
|
1662
1623
|
e.stopPropagation();
|
|
1663
1624
|
onClick && onClick(e);
|
|
1664
1625
|
};
|
|
1665
|
-
return (React__default["default"].createElement(ListItem,
|
|
1626
|
+
return (React__default["default"].createElement(ListItem, { className: getCssClasses(), onClick: handleClick, ...rest }, children));
|
|
1666
1627
|
};
|
|
1667
1628
|
|
|
1668
1629
|
const MenuToggle = ({ children }) => {
|
|
1669
1630
|
return children;
|
|
1670
1631
|
};
|
|
1671
1632
|
|
|
1672
|
-
var css_248z$
|
|
1673
|
-
var styles$
|
|
1674
|
-
styleInject(css_248z$
|
|
1633
|
+
var css_248z$w = ".MenuDivider-module_menuItemDivider__oRP-j {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef;\n}";
|
|
1634
|
+
var styles$w = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1635
|
+
styleInject(css_248z$w);
|
|
1675
1636
|
|
|
1676
|
-
const MenuDivider = () => React__default["default"].createElement("div", { className: styles$
|
|
1637
|
+
const MenuDivider = () => React__default["default"].createElement("div", { className: styles$w.menuItemDivider });
|
|
1677
1638
|
|
|
1678
|
-
var css_248z$
|
|
1679
|
-
var styles$
|
|
1680
|
-
styleInject(css_248z$
|
|
1639
|
+
var css_248z$v = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px;\n}";
|
|
1640
|
+
var styles$v = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1641
|
+
styleInject(css_248z$v);
|
|
1681
1642
|
|
|
1682
1643
|
const ExpansionPanelContent = ({ children }) => {
|
|
1683
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
1644
|
+
return (React__default["default"].createElement("div", { className: styles$v.expansionPanelContent }, children));
|
|
1684
1645
|
};
|
|
1685
1646
|
|
|
1686
|
-
var css_248z$
|
|
1687
|
-
var styles$
|
|
1688
|
-
styleInject(css_248z$
|
|
1647
|
+
var css_248z$u = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px;\n}\n.ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n cursor: pointer;\n background-color: var(--highlight);\n}";
|
|
1648
|
+
var styles$u = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1649
|
+
styleInject(css_248z$u);
|
|
1689
1650
|
|
|
1690
1651
|
const ExpansionPanelHeader = (props) => {
|
|
1691
1652
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1693,15 +1654,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1693
1654
|
e.stopPropagation();
|
|
1694
1655
|
onClick && onClick(e);
|
|
1695
1656
|
};
|
|
1696
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
1657
|
+
return (React__default["default"].createElement("div", { className: styles$u.expansionPanelHeader, onClick: handleClick },
|
|
1697
1658
|
children,
|
|
1698
1659
|
React__default["default"].createElement("span", { className: "ml-auto text-muted" },
|
|
1699
1660
|
React__default["default"].createElement(Icon, null, isExpanded ? React__default["default"].createElement(ChevronUpSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null)))));
|
|
1700
1661
|
};
|
|
1701
1662
|
|
|
1702
|
-
var css_248z$
|
|
1703
|
-
var styles$
|
|
1704
|
-
styleInject(css_248z$
|
|
1663
|
+
var css_248z$t = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n box-shadow: var(--shadow);\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0;\n}\n.ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0;\n}";
|
|
1664
|
+
var styles$t = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1665
|
+
styleInject(css_248z$t);
|
|
1705
1666
|
|
|
1706
1667
|
const ExpansionPanel = (props) => {
|
|
1707
1668
|
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
@@ -1711,11 +1672,11 @@ const ExpansionPanel = (props) => {
|
|
|
1711
1672
|
}, [isExpanded]);
|
|
1712
1673
|
const getCssClasses = () => {
|
|
1713
1674
|
const cssClasses = [];
|
|
1714
|
-
cssClasses.push(styles$
|
|
1675
|
+
cssClasses.push(styles$t.expansionPanel);
|
|
1715
1676
|
if (_isExpanded) {
|
|
1716
|
-
cssClasses.push(styles$
|
|
1677
|
+
cssClasses.push(styles$t.isExpanded);
|
|
1717
1678
|
}
|
|
1718
|
-
shadow && cssClasses.push(styles$
|
|
1679
|
+
shadow && cssClasses.push(styles$t.shadow);
|
|
1719
1680
|
return cssClasses.filter(css => css).join(' ');
|
|
1720
1681
|
};
|
|
1721
1682
|
const handleClickHeader = (event) => {
|
|
@@ -1728,17 +1689,17 @@ const ExpansionPanel = (props) => {
|
|
|
1728
1689
|
React__default["default"].createElement(ExpansionPanelContent, null, children)));
|
|
1729
1690
|
};
|
|
1730
1691
|
|
|
1731
|
-
var css_248z$
|
|
1732
|
-
var styles$
|
|
1733
|
-
styleInject(css_248z$
|
|
1692
|
+
var css_248z$s = ".FloatingActionButton-module_fab__Rw3kd {\n box-shadow: var(--shadow);\n}\n\n.FloatingActionButton-module_fixed__XQOkG {\n position: fixed;\n z-index: 1000;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftTop__ZiHQN {\n top: 16px;\n left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_leftBottom__210sl {\n bottom: 16px;\n left: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightTop__VUsvT {\n top: 64px;\n right: 16px;\n}\n.FloatingActionButton-module_fixed__XQOkG.FloatingActionButton-module_rightBottom__FaUFl {\n bottom: 16px;\n right: 16px;\n}";
|
|
1693
|
+
var styles$s = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG","leftTop":"FloatingActionButton-module_leftTop__ZiHQN","leftBottom":"FloatingActionButton-module_leftBottom__210sl","rightTop":"FloatingActionButton-module_rightTop__VUsvT","rightBottom":"FloatingActionButton-module_rightBottom__FaUFl"};
|
|
1694
|
+
styleInject(css_248z$s);
|
|
1734
1695
|
|
|
1735
1696
|
const FloatingActionButton = (props) => {
|
|
1736
1697
|
const { className, icon, color = exports.COLOR.primary, fixed, position = 'rightBottom', size = exports.SIZE.lg, isActive, disabled, onClick } = props;
|
|
1737
1698
|
const getCssClasses = () => {
|
|
1738
1699
|
const cssClasses = [];
|
|
1739
|
-
cssClasses.push(styles$
|
|
1740
|
-
fixed && cssClasses.push(styles$
|
|
1741
|
-
position && fixed && cssClasses.push(styles$
|
|
1700
|
+
cssClasses.push(styles$s.fab);
|
|
1701
|
+
fixed && cssClasses.push(styles$s.fixed);
|
|
1702
|
+
position && fixed && cssClasses.push(styles$s[position]);
|
|
1742
1703
|
className && cssClasses.push(className);
|
|
1743
1704
|
return cssClasses.filter(css => css).join(' ');
|
|
1744
1705
|
};
|
|
@@ -1749,43 +1710,42 @@ const FloatingActionButton = (props) => {
|
|
|
1749
1710
|
return (React__default["default"].createElement(IconButton, { className: getCssClasses(), color: color, size: size, isActive: isActive, disabled: disabled, icon: icon, variant: exports.VARIANT.contained, onClick: handleClick }));
|
|
1750
1711
|
};
|
|
1751
1712
|
|
|
1752
|
-
var css_248z$
|
|
1753
|
-
var styles$
|
|
1754
|
-
styleInject(css_248z$
|
|
1713
|
+
var css_248z$r = ".Link-module_link__YlJQl {\n color: var(--primary);\n text-decoration: underline;\n}\n.Link-module_link__YlJQl:hover {\n color: var(--primary-dark);\n}";
|
|
1714
|
+
var styles$r = {"link":"Link-module_link__YlJQl"};
|
|
1715
|
+
styleInject(css_248z$r);
|
|
1755
1716
|
|
|
1756
1717
|
const Link = (props) => {
|
|
1757
|
-
const { href = '#', className, target, children
|
|
1718
|
+
const { href = '#', className, target, children, ...rest } = props;
|
|
1758
1719
|
const [status, setStatus] = React.useState(exports.STATUS.NORMAL);
|
|
1759
|
-
const [cssClassName] = useCssClasses([styles$
|
|
1720
|
+
const [cssClassName] = useCssClasses([styles$r.link, className, status]);
|
|
1760
1721
|
const onMouseEnter = () => {
|
|
1761
1722
|
setStatus(exports.STATUS.HOVERED);
|
|
1762
1723
|
};
|
|
1763
1724
|
const onMouseLeave = () => {
|
|
1764
1725
|
setStatus(exports.STATUS.NORMAL);
|
|
1765
1726
|
};
|
|
1766
|
-
return (React__default["default"].createElement("a",
|
|
1727
|
+
return (React__default["default"].createElement("a", { className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...rest }, children));
|
|
1767
1728
|
};
|
|
1768
1729
|
|
|
1769
|
-
var css_248z$
|
|
1770
|
-
var styles$
|
|
1771
|
-
styleInject(css_248z$
|
|
1730
|
+
var css_248z$q = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n}\n.LoadingIndicator-module_loadingIndicatorContainer__GS9OG.LoadingIndicator-module_isFixed__WCFNG {\n position: fixed;\n top: 0;\n left: 0;\n}\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px;\n}\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}";
|
|
1731
|
+
var styles$q = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1732
|
+
styleInject(css_248z$q);
|
|
1772
1733
|
|
|
1773
|
-
const LoadingIndicator = (
|
|
1774
|
-
var rest = __rest(_a, []);
|
|
1734
|
+
const LoadingIndicator = ({ ...rest }) => {
|
|
1775
1735
|
const getCssClasses = () => {
|
|
1776
1736
|
const cssClasses = [];
|
|
1777
|
-
cssClasses.push(styles$
|
|
1737
|
+
cssClasses.push(styles$q.loadingIndicator);
|
|
1778
1738
|
return cssClasses.filter(css => css).join(' ');
|
|
1779
1739
|
};
|
|
1780
|
-
return (React__default["default"].createElement("div",
|
|
1740
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest },
|
|
1781
1741
|
React__default["default"].createElement(SpinnerSolidIcon, null)));
|
|
1782
1742
|
};
|
|
1783
1743
|
|
|
1784
1744
|
const LoadingIndicatorContainer = ({ children, isFixed }) => {
|
|
1785
1745
|
const getCssClasses = () => {
|
|
1786
1746
|
const cssClasses = [];
|
|
1787
|
-
cssClasses.push(styles$
|
|
1788
|
-
isFixed && cssClasses.push(styles$
|
|
1747
|
+
cssClasses.push(styles$q.loadingIndicatorContainer);
|
|
1748
|
+
isFixed && cssClasses.push(styles$q.isFixed);
|
|
1789
1749
|
return cssClasses.filter(css => css).join(' ');
|
|
1790
1750
|
};
|
|
1791
1751
|
return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1837,9 +1797,8 @@ class LoadingIndicatorService {
|
|
|
1837
1797
|
React__default["default"].createElement(LoadingIndicator, null)));
|
|
1838
1798
|
}
|
|
1839
1799
|
hide() {
|
|
1840
|
-
var _a;
|
|
1841
1800
|
if (this.container) {
|
|
1842
|
-
|
|
1801
|
+
this.root?.unmount();
|
|
1843
1802
|
document.body.removeChild(this.container);
|
|
1844
1803
|
this.container = undefined;
|
|
1845
1804
|
this.handler && clearTimeout(this.handler);
|
|
@@ -1848,45 +1807,45 @@ class LoadingIndicatorService {
|
|
|
1848
1807
|
}
|
|
1849
1808
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1850
1809
|
|
|
1851
|
-
var css_248z$
|
|
1852
|
-
var styles$
|
|
1853
|
-
styleInject(css_248z$
|
|
1810
|
+
var css_248z$p = ".ModalHeader-module_modalHeader__tw-u- {\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between;\n padding: 1rem 1rem;\n border-top-left-radius: calc(0.3rem - 1px);\n border-top-right-radius: calc(0.3rem - 1px);\n border-bottom: none;\n align-items: center;\n}\n\n.ModalHeader-module_modalTitle__2xShH {\n margin-bottom: 0;\n line-height: 1.5;\n}";
|
|
1811
|
+
var styles$p = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1812
|
+
styleInject(css_248z$p);
|
|
1854
1813
|
|
|
1855
1814
|
const ModalHeader = (props) => {
|
|
1856
|
-
const { children, isDismissable = false, onClose
|
|
1815
|
+
const { children, isDismissable = false, onClose, ...rest } = props;
|
|
1857
1816
|
const handleClick = () => {
|
|
1858
1817
|
onClose && onClose();
|
|
1859
1818
|
};
|
|
1860
|
-
return (React__default["default"].createElement("div",
|
|
1861
|
-
React__default["default"].createElement("h5", { className: styles$
|
|
1819
|
+
return (React__default["default"].createElement("div", { className: styles$p.modalHeader, ...rest },
|
|
1820
|
+
React__default["default"].createElement("h5", { className: styles$p.modalTitle }, children),
|
|
1862
1821
|
isDismissable &&
|
|
1863
1822
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), variant: exports.VARIANT.text, onClick: handleClick })));
|
|
1864
1823
|
};
|
|
1865
1824
|
|
|
1866
|
-
var css_248z$
|
|
1867
|
-
var styles$
|
|
1868
|
-
styleInject(css_248z$
|
|
1825
|
+
var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem;\n}";
|
|
1826
|
+
var styles$o = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1827
|
+
styleInject(css_248z$o);
|
|
1869
1828
|
|
|
1870
|
-
const ModalBody = ({ children }) => (React__default["default"].createElement("div", { className: styles$
|
|
1829
|
+
const ModalBody = ({ children }) => (React__default["default"].createElement("div", { className: styles$o.modalBody }, children));
|
|
1871
1830
|
|
|
1872
|
-
var css_248z$
|
|
1873
|
-
var styles$
|
|
1874
|
-
styleInject(css_248z$
|
|
1831
|
+
var css_248z$n = ".ModalFooter-module_modalFooter__SNm-f {\n display: flex;\n flex-wrap: wrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: flex-end;\n padding: 0.75rem;\n border-bottom-right-radius: calc(0.3rem - 1px);\n border-bottom-left-radius: calc(0.3rem - 1px);\n}\n.ModalFooter-module_modalFooter__SNm-f > * {\n margin: 0.25rem;\n}";
|
|
1832
|
+
var styles$n = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1833
|
+
styleInject(css_248z$n);
|
|
1875
1834
|
|
|
1876
|
-
const ModalFooter = ({ children }) => (React__default["default"].createElement("div", { className: styles$
|
|
1835
|
+
const ModalFooter = ({ children }) => (React__default["default"].createElement("div", { className: styles$n.modalFooter }, children));
|
|
1877
1836
|
|
|
1878
|
-
var css_248z$
|
|
1879
|
-
var styles$
|
|
1880
|
-
styleInject(css_248z$
|
|
1837
|
+
var css_248z$m = ".Modal-module_modal__HMxWV {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n outline: 0;\n z-index: 1111 !important;\n border-radius: var(--borderRadius);\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_sm__CsR6U {\n max-width: 300px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_md__lNggx {\n max-width: 500px;\n}\n.Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf .Modal-module_lg__6dtT2 {\n max-width: 1140px;\n}\n@media (min-width: 576px) {\n .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n max-width: 600px;\n }\n}\n\n.Modal-module_modalDialog__fNqyK {\n position: relative;\n width: auto;\n pointer-events: none;\n}\n\n.Modal-module_modalDialogCentered__sa2wv {\n min-height: calc(100% - 3.5rem);\n display: flex;\n align-items: center;\n}\n\n.Modal-module_modalContent__9wAwB {\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%;\n pointer-events: auto;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid rgba(0, 0, 0, 0.2);\n border-radius: 0.3rem;\n box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);\n outline: 0;\n}\n@media (min-width: 576px) {\n .Modal-module_modalContent__9wAwB {\n max-width: 500px;\n margin: 1.75rem auto;\n }\n}\n\n.Modal-module_fullscreen__iepGa {\n width: 100% !important;\n height: 100% !important;\n max-height: 100% !important;\n margin: 0;\n padding: 0;\n}\n.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n height: auto;\n min-height: 100%;\n max-height: 100%;\n border-radius: 0;\n overflow: auto;\n max-width: 100%;\n}\n@media (min-width: 320px) {\n .Modal-module_fullscreen__iepGa {\n max-width: 100% !important;\n }\n}";
|
|
1838
|
+
var styles$m = {"modal":"Modal-module_modal__HMxWV","modal-dialog":"Modal-module_modal-dialog__U2wGf","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modalDialog":"Modal-module_modalDialog__fNqyK","modalDialogCentered":"Modal-module_modalDialogCentered__sa2wv","modalContent":"Modal-module_modalContent__9wAwB","fullscreen":"Modal-module_fullscreen__iepGa"};
|
|
1839
|
+
styleInject(css_248z$m);
|
|
1881
1840
|
|
|
1882
1841
|
const Modal = (props) => {
|
|
1883
1842
|
const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1884
1843
|
const getCssClass = () => {
|
|
1885
1844
|
const cssClasses = [];
|
|
1886
|
-
cssClasses.push(styles$
|
|
1887
|
-
cssClasses.push(styles$
|
|
1888
|
-
fullScreen && cssClasses.push(styles$
|
|
1889
|
-
size && cssClasses.push(styles$
|
|
1845
|
+
cssClasses.push(styles$m.modalDialog);
|
|
1846
|
+
cssClasses.push(styles$m.modalDialogCentered);
|
|
1847
|
+
fullScreen && cssClasses.push(styles$m.fullscreen);
|
|
1848
|
+
size && cssClasses.push(styles$m[size]);
|
|
1890
1849
|
className && cssClasses.push(className);
|
|
1891
1850
|
return cssClasses.filter(r => r).join(' ');
|
|
1892
1851
|
};
|
|
@@ -1901,9 +1860,9 @@ const Modal = (props) => {
|
|
|
1901
1860
|
};
|
|
1902
1861
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
1903
1862
|
React__default["default"].createElement(Portal, { className: 'modal-root', target: target },
|
|
1904
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1863
|
+
React__default["default"].createElement("div", { className: styles$m.modal },
|
|
1905
1864
|
React__default["default"].createElement("div", { className: getCssClass() },
|
|
1906
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1865
|
+
React__default["default"].createElement("div", { className: styles$m.modalContent },
|
|
1907
1866
|
header &&
|
|
1908
1867
|
React__default["default"].createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1909
1868
|
React__default["default"].createElement(ModalBody, null, children),
|
|
@@ -1932,15 +1891,14 @@ const GlobalModal = ({ title, description, formControls, onOk, onChange, onCance
|
|
|
1932
1891
|
// workaround for getDerivedStateFromProps
|
|
1933
1892
|
const [myControls, setMyControls] = React.useState(null);
|
|
1934
1893
|
React.useEffect(() => {
|
|
1935
|
-
setMyControls(
|
|
1894
|
+
setMyControls({ ...formControls });
|
|
1936
1895
|
}, []);
|
|
1937
1896
|
// end
|
|
1938
1897
|
const modalType = formControls ? exports.MODALTYPE.FORM : exports.MODALTYPE.BASIC;
|
|
1939
1898
|
const myForm = React.useRef(null);
|
|
1940
1899
|
const handleOk = () => {
|
|
1941
|
-
var _a;
|
|
1942
1900
|
if (modalType === exports.MODALTYPE.FORM) {
|
|
1943
|
-
|
|
1901
|
+
myForm?.current?.handleFormSubmit();
|
|
1944
1902
|
}
|
|
1945
1903
|
else {
|
|
1946
1904
|
onOk && onOk();
|
|
@@ -2011,9 +1969,8 @@ class ModalService {
|
|
|
2011
1969
|
});
|
|
2012
1970
|
}
|
|
2013
1971
|
hide() {
|
|
2014
|
-
var _a;
|
|
2015
1972
|
if (this.container) {
|
|
2016
|
-
|
|
1973
|
+
this.root?.unmount();
|
|
2017
1974
|
// document.body.removeChild(this.container);
|
|
2018
1975
|
this.container = undefined;
|
|
2019
1976
|
}
|
|
@@ -2047,9 +2004,9 @@ const NumberSelect = (props) => {
|
|
|
2047
2004
|
return (React__default["default"].createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
2048
2005
|
};
|
|
2049
2006
|
|
|
2050
|
-
var css_248z$
|
|
2051
|
-
var styles$
|
|
2052
|
-
styleInject(css_248z$
|
|
2007
|
+
var css_248z$l = ".Tooltip-module_tooltipContainer__9ZWx3 {\n display: inline;\n}\n\n.Tooltip-module_tooltip__x5HOu {\n background-color: #333;\n color: white;\n padding: 5px 10px;\n border-radius: 4px;\n font-size: 13px;\n position: absolute;\n left: -1000000px;\n z-index: 1100;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe,\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n position: absolute;\n width: 8px;\n height: 8px;\n z-index: -1;\n}\n.Tooltip-module_tooltip__x5HOu #Tooltip-module_arrow__B6lfe::before {\n content: \"\";\n transform: rotate(45deg);\n background: #333;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=top] > #Tooltip-module_arrow__B6lfe {\n bottom: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=bottom] > #Tooltip-module_arrow__B6lfe {\n top: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=left] > #Tooltip-module_arrow__B6lfe {\n right: -4px;\n}\n.Tooltip-module_tooltip__x5HOu[data-popper-placement^=right] > #Tooltip-module_arrow__B6lfe {\n left: -4px;\n}";
|
|
2008
|
+
var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2009
|
+
styleInject(css_248z$l);
|
|
2053
2010
|
|
|
2054
2011
|
const Tooltip = (props) => {
|
|
2055
2012
|
const { children, text, placement = 'bottom' } = props;
|
|
@@ -2077,22 +2034,22 @@ const Tooltip = (props) => {
|
|
|
2077
2034
|
setShow(false);
|
|
2078
2035
|
};
|
|
2079
2036
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2080
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2037
|
+
React__default["default"].createElement("div", { className: styles$l.tooltipContainer, ref: refChild, id: "tooltip-container" }, React.cloneElement(children, {
|
|
2081
2038
|
onMouseOver: handleMouseOver,
|
|
2082
2039
|
onMouseLeave: handleMouseLeave,
|
|
2083
2040
|
})),
|
|
2084
2041
|
show && text &&
|
|
2085
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2042
|
+
React__default["default"].createElement("div", { className: styles$l.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2086
2043
|
text,
|
|
2087
2044
|
React__default["default"].createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2088
2045
|
};
|
|
2089
2046
|
|
|
2090
|
-
var css_248z$
|
|
2091
|
-
var styles$
|
|
2092
|
-
styleInject(css_248z$
|
|
2047
|
+
var css_248z$k = ":root {\n --progress-height: 0.5rem;\n --progress-bg: #e9ecef;\n --progress-box-shadow: var(--shadow);\n --progress-bar-color: #fff;\n --progress-bar-bg: var(--primary);\n --progress-bar-transition: width 0.6s ease;\n}\n\n.ProgressBar-module_progressBarContainer__vtbBw {\n display: flex;\n height: var(--progress-height);\n overflow: hidden;\n background-color: var(--progress-bg);\n}\n\n.ProgressBar-module_progressBar__hr8I8 {\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n color: var(--progress-bar-color);\n text-align: center;\n white-space: nowrap;\n transition: var(--progress-bar-transition);\n background-color: var(--progress-bar-bg);\n}\n.ProgressBar-module_progressBar__hr8I8.ProgressBar-module_indeterminate__WcQdD {\n width: 100%;\n height: 100%;\n animation: ProgressBar-module_indeterminateAnimation__SlBFt 1s infinite linear;\n transform-origin: 0% 50%;\n}\n\n@keyframes ProgressBar-module_indeterminateAnimation__SlBFt {\n 0% {\n transform: translateX(0) scaleX(0);\n }\n 40% {\n transform: translateX(0) scaleX(0.4);\n }\n 100% {\n transform: translateX(100%) scaleX(0.5);\n }\n}";
|
|
2048
|
+
var styles$k = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2049
|
+
styleInject(css_248z$k);
|
|
2093
2050
|
|
|
2094
2051
|
const ProgressBar = (props) => {
|
|
2095
|
-
const { className, color = exports.COLOR.primary, value, indeterminate
|
|
2052
|
+
const { className, color = exports.COLOR.primary, value, indeterminate, ...rest } = props;
|
|
2096
2053
|
const [model, setModel] = React.useState();
|
|
2097
2054
|
React.useEffect(() => {
|
|
2098
2055
|
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
@@ -2109,14 +2066,14 @@ const ProgressBar = (props) => {
|
|
|
2109
2066
|
}, [value]);
|
|
2110
2067
|
const getCssClasses = () => {
|
|
2111
2068
|
const cssClasses = [];
|
|
2112
|
-
cssClasses.push(styles$
|
|
2069
|
+
cssClasses.push(styles$k.progressBarContainer);
|
|
2113
2070
|
className && cssClasses.push(className);
|
|
2114
2071
|
return cssClasses.filter(r => r).join(' ');
|
|
2115
2072
|
};
|
|
2116
2073
|
const getCssClassesBar = () => {
|
|
2117
2074
|
const cssClasses = [];
|
|
2118
|
-
cssClasses.push(styles$
|
|
2119
|
-
indeterminate && cssClasses.push(styles$
|
|
2075
|
+
cssClasses.push(styles$k.progressBar);
|
|
2076
|
+
indeterminate && cssClasses.push(styles$k['indeterminate']);
|
|
2120
2077
|
return cssClasses.filter(r => r).join(' ');
|
|
2121
2078
|
};
|
|
2122
2079
|
const getStyle = () => {
|
|
@@ -2126,8 +2083,8 @@ const ProgressBar = (props) => {
|
|
|
2126
2083
|
}
|
|
2127
2084
|
return `${width}%`;
|
|
2128
2085
|
};
|
|
2129
|
-
return (React__default["default"].createElement(Tooltip, { text: !indeterminate ? model
|
|
2130
|
-
React__default["default"].createElement("div",
|
|
2086
|
+
return (React__default["default"].createElement(Tooltip, { text: !indeterminate ? model?.toString() : '' },
|
|
2087
|
+
React__default["default"].createElement("div", { className: getCssClasses(), ...rest },
|
|
2131
2088
|
React__default["default"].createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2132
2089
|
};
|
|
2133
2090
|
|
|
@@ -2145,7 +2102,7 @@ class SidebarItemModel {
|
|
|
2145
2102
|
}
|
|
2146
2103
|
|
|
2147
2104
|
const Sidebar = (props) => {
|
|
2148
|
-
const { className, items, currentUrl, onItemClicked
|
|
2105
|
+
const { className, items, currentUrl, onItemClicked, ...rest } = props;
|
|
2149
2106
|
const [menuItems, setMenuItems] = React.useState([]);
|
|
2150
2107
|
React.useEffect(() => {
|
|
2151
2108
|
if (items && items.length > 0) {
|
|
@@ -2194,7 +2151,7 @@ const Sidebar = (props) => {
|
|
|
2194
2151
|
const handleClickSubItem = (itemPath, subItemPath, e) => {
|
|
2195
2152
|
navigate(e, `${itemPath}/${subItemPath}`);
|
|
2196
2153
|
};
|
|
2197
|
-
return (React__default["default"].createElement("nav",
|
|
2154
|
+
return (React__default["default"].createElement("nav", { className: getCssClasses(), ...rest },
|
|
2198
2155
|
React__default["default"].createElement(List, null, menuItems.map(item => (React__default["default"].createElement(React__default["default"].Fragment, { key: item.id },
|
|
2199
2156
|
React__default["default"].createElement(ListItem, { active: isMenuItemActive(item.path), onClick: (e) => handleClickItem(item, e) },
|
|
2200
2157
|
React__default["default"].createElement(ListItemText, { primary: React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -2208,25 +2165,25 @@ const Sidebar = (props) => {
|
|
|
2208
2165
|
!item.isCollapsed && item.items && item.items.length > 0 && (React__default["default"].createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React__default["default"].createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
2209
2166
|
};
|
|
2210
2167
|
|
|
2211
|
-
var css_248z$
|
|
2212
|
-
var styles$
|
|
2213
|
-
styleInject(css_248z$
|
|
2168
|
+
var css_248z$j = ".Snackbar-module_snackbar__O5T2b {\n display: flex;\n align-items: center;\n min-width: 288px;\n padding: 6px 16px;\n transform-origin: center;\n min-height: 52px;\n animation: Snackbar-module_bounceIn__E47iD 0.4s ease;\n z-index: 1001;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 2%;\n border-radius: var(--borderRadius);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_primary__ZBOTN {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_accent__0MnFy {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_secondary__s8-ez {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_light__Vrd7o {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Snackbar-module_snackbar__O5T2b.Snackbar-module_dark__U-5io {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Snackbar-module_text__G5r5D {\n width: 100%;\n padding: 8px 0;\n}\n\n.Snackbar-module_action__vus2Y {\n margin-left: auto;\n}\n.Snackbar-module_action__vus2Y:hover {\n cursor: pointer;\n}\n\n@keyframes Snackbar-module_bounceIn__E47iD {\n 0% {\n opacity: 0;\n }\n 50% {\n opacity: 0.9;\n }\n 80% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n }\n}";
|
|
2169
|
+
var styles$j = {"snackbar":"Snackbar-module_snackbar__O5T2b","bounceIn":"Snackbar-module_bounceIn__E47iD","primary":"Snackbar-module_primary__ZBOTN","accent":"Snackbar-module_accent__0MnFy","secondary":"Snackbar-module_secondary__s8-ez","light":"Snackbar-module_light__Vrd7o","dark":"Snackbar-module_dark__U-5io","text":"Snackbar-module_text__G5r5D","action":"Snackbar-module_action__vus2Y"};
|
|
2170
|
+
styleInject(css_248z$j);
|
|
2214
2171
|
|
|
2215
2172
|
const Snackbar = (props) => {
|
|
2216
|
-
const { children, color = exports.COLOR.dark, actionText = 'ok', onOk
|
|
2173
|
+
const { children, color = exports.COLOR.dark, actionText = 'ok', onOk, ...rest } = props;
|
|
2217
2174
|
const getCssClasses = () => {
|
|
2218
2175
|
const cssClasses = [];
|
|
2219
|
-
cssClasses.push(styles$
|
|
2176
|
+
cssClasses.push(styles$j.snackbar);
|
|
2220
2177
|
cssClasses.push(`shadow-lg`);
|
|
2221
|
-
cssClasses.push(styles$
|
|
2178
|
+
cssClasses.push(styles$j[color]);
|
|
2222
2179
|
return cssClasses.filter(css => css).join(' ');
|
|
2223
2180
|
};
|
|
2224
2181
|
const handleClickAction = (e) => {
|
|
2225
2182
|
onOk && onOk(e);
|
|
2226
2183
|
};
|
|
2227
|
-
return (React__default["default"].createElement("div",
|
|
2228
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2229
|
-
React__default["default"].createElement("div", { className: styles$
|
|
2184
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest },
|
|
2185
|
+
React__default["default"].createElement("div", { className: styles$j.text }, children),
|
|
2186
|
+
React__default["default"].createElement("div", { className: styles$j.action + ' text-accent', onClick: handleClickAction },
|
|
2230
2187
|
React__default["default"].createElement("span", null, actionText))));
|
|
2231
2188
|
};
|
|
2232
2189
|
|
|
@@ -2255,9 +2212,8 @@ class SnackbarService {
|
|
|
2255
2212
|
});
|
|
2256
2213
|
}
|
|
2257
2214
|
hide() {
|
|
2258
|
-
var _a;
|
|
2259
2215
|
if (this.container) {
|
|
2260
|
-
|
|
2216
|
+
this.root?.unmount();
|
|
2261
2217
|
document.body.removeChild(this.container);
|
|
2262
2218
|
this.container = undefined;
|
|
2263
2219
|
this.handler && clearTimeout(this.handler);
|
|
@@ -2266,29 +2222,29 @@ class SnackbarService {
|
|
|
2266
2222
|
}
|
|
2267
2223
|
const snackbarService = new SnackbarService();
|
|
2268
2224
|
|
|
2269
|
-
var css_248z$
|
|
2270
|
-
var styles$
|
|
2271
|
-
styleInject(css_248z$
|
|
2225
|
+
var css_248z$i = ".SpeedDialActions-module_speedDialActions__cY2i3 {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto;\n}";
|
|
2226
|
+
var styles$i = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2227
|
+
styleInject(css_248z$i);
|
|
2272
2228
|
|
|
2273
2229
|
const SpeedDialActions = (props) => {
|
|
2274
2230
|
const { children } = props;
|
|
2275
2231
|
const getCssClasses = () => {
|
|
2276
2232
|
const cssClasses = [];
|
|
2277
|
-
cssClasses.push(styles$
|
|
2233
|
+
cssClasses.push(styles$i.speedDialActions);
|
|
2278
2234
|
return cssClasses.filter(css => css).join(' ');
|
|
2279
2235
|
};
|
|
2280
2236
|
return (React__default["default"].createElement("div", { className: getCssClasses() }, children));
|
|
2281
2237
|
};
|
|
2282
2238
|
|
|
2283
|
-
var css_248z$
|
|
2284
|
-
var styles$
|
|
2285
|
-
styleInject(css_248z$
|
|
2239
|
+
var css_248z$h = ".SpeedDial-module_speedDial__W3VN2 {\n position: absolute;\n flex-direction: column-reverse;\n display: flex;\n z-index: 1050;\n align-items: center;\n right: 16px;\n bottom: 16px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}";
|
|
2240
|
+
var styles$h = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2241
|
+
styleInject(css_248z$h);
|
|
2286
2242
|
|
|
2287
2243
|
const SpeedDial = (props) => {
|
|
2288
|
-
const { children, className, open, onOpen, onClose
|
|
2244
|
+
const { children, className, open, onOpen, onClose, ...rest } = props;
|
|
2289
2245
|
const getCssClasses = () => {
|
|
2290
2246
|
const cssClasses = [];
|
|
2291
|
-
cssClasses.push(styles$
|
|
2247
|
+
cssClasses.push(styles$h.speedDial);
|
|
2292
2248
|
className && cssClasses.push(className);
|
|
2293
2249
|
return cssClasses.filter(css => css).join(' ');
|
|
2294
2250
|
};
|
|
@@ -2300,22 +2256,22 @@ const SpeedDial = (props) => {
|
|
|
2300
2256
|
onOpen && onOpen(e);
|
|
2301
2257
|
}
|
|
2302
2258
|
};
|
|
2303
|
-
return (React__default["default"].createElement("div",
|
|
2259
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest },
|
|
2304
2260
|
React__default["default"].createElement("div", { style: { 'transform': open ? 'rotate(45deg)' : undefined } },
|
|
2305
2261
|
React__default["default"].createElement(FloatingActionButton, { icon: React__default["default"].createElement(PlusSolidIcon, null), onClick: handleClick })),
|
|
2306
2262
|
open &&
|
|
2307
2263
|
React__default["default"].createElement(SpeedDialActions, null, children)));
|
|
2308
2264
|
};
|
|
2309
2265
|
|
|
2310
|
-
var css_248z$
|
|
2311
|
-
var styles$
|
|
2312
|
-
styleInject(css_248z$
|
|
2266
|
+
var css_248z$g = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2267
|
+
var styles$g = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2268
|
+
styleInject(css_248z$g);
|
|
2313
2269
|
|
|
2314
2270
|
const SpeedDialAction = (props) => {
|
|
2315
2271
|
const { icon, color = exports.COLOR.light, onClick, className } = props;
|
|
2316
2272
|
const getCssClasses = () => {
|
|
2317
2273
|
const cssClasses = [];
|
|
2318
|
-
cssClasses.push(styles$
|
|
2274
|
+
cssClasses.push(styles$g.speedDialAction);
|
|
2319
2275
|
className && cssClasses.push(className);
|
|
2320
2276
|
return cssClasses.filter(css => css).join(' ');
|
|
2321
2277
|
};
|
|
@@ -2323,24 +2279,24 @@ const SpeedDialAction = (props) => {
|
|
|
2323
2279
|
};
|
|
2324
2280
|
|
|
2325
2281
|
const SpeedDialIcon = (props) => {
|
|
2326
|
-
const { children, className
|
|
2282
|
+
const { children, className, ...rest } = props;
|
|
2327
2283
|
const getCssClasses = () => {
|
|
2328
2284
|
const cssClasses = [];
|
|
2329
2285
|
className && cssClasses.push(className);
|
|
2330
2286
|
return cssClasses.filter(css => css).join(' ');
|
|
2331
2287
|
};
|
|
2332
|
-
return (React__default["default"].createElement(Icon,
|
|
2288
|
+
return (React__default["default"].createElement(Icon, { className: getCssClasses(), ...rest }, children));
|
|
2333
2289
|
};
|
|
2334
2290
|
|
|
2335
|
-
var css_248z$
|
|
2336
|
-
var styles$
|
|
2337
|
-
styleInject(css_248z$
|
|
2291
|
+
var css_248z$f = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2292
|
+
var styles$f = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2293
|
+
styleInject(css_248z$f);
|
|
2338
2294
|
|
|
2339
2295
|
const StepperActions = (props) => {
|
|
2340
2296
|
const { className, showDoneButton, showResetButton, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2341
2297
|
const getCssClasses = () => {
|
|
2342
2298
|
const cssClasses = [];
|
|
2343
|
-
cssClasses.push(styles$
|
|
2299
|
+
cssClasses.push(styles$f.stepperActions);
|
|
2344
2300
|
className && cssClasses.push(className);
|
|
2345
2301
|
return cssClasses.filter(css => css).join(' ');
|
|
2346
2302
|
};
|
|
@@ -2361,34 +2317,51 @@ const StepPanel = (props) => {
|
|
|
2361
2317
|
return (React__default["default"].createElement("div", { className: "steppanel" }, children));
|
|
2362
2318
|
};
|
|
2363
2319
|
|
|
2364
|
-
var css_248z$
|
|
2365
|
-
var styles$
|
|
2366
|
-
styleInject(css_248z$
|
|
2320
|
+
var css_248z$e = ".StepConnector-module_stepConnector__A7A-7 {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px;\n}\n\n.StepConnector-module_stepConnectorLine__8rQxv {\n display: block;\n border-color: var(--secondary);\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n border-color: var(--primary);\n}\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n border-top-style: solid;\n border-top-width: 1px;\n}";
|
|
2321
|
+
var styles$e = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2322
|
+
styleInject(css_248z$e);
|
|
2367
2323
|
|
|
2368
2324
|
const StepConnector = (props) => {
|
|
2369
2325
|
const { isActive, isHorizontal = true } = props;
|
|
2370
2326
|
const getCssClassesConnector = () => {
|
|
2371
2327
|
const cssClasses = [];
|
|
2372
|
-
cssClasses.push(styles$
|
|
2328
|
+
cssClasses.push(styles$e.stepConnector);
|
|
2373
2329
|
return cssClasses.filter(css => css).join(' ');
|
|
2374
2330
|
};
|
|
2375
2331
|
const getCssClassesLine = () => {
|
|
2376
2332
|
const cssClasses = [];
|
|
2377
|
-
cssClasses.push(styles$
|
|
2378
|
-
isActive && cssClasses.push(styles$
|
|
2379
|
-
isHorizontal && cssClasses.push(styles$
|
|
2333
|
+
cssClasses.push(styles$e.stepConnectorLine);
|
|
2334
|
+
isActive && cssClasses.push(styles$e['isActive']);
|
|
2335
|
+
isHorizontal && cssClasses.push(styles$e.stepConnectorLineHorizontal);
|
|
2380
2336
|
return cssClasses.filter(css => css).join(' ');
|
|
2381
2337
|
};
|
|
2382
2338
|
return (React__default["default"].createElement("div", { className: getCssClassesConnector() },
|
|
2383
2339
|
React__default["default"].createElement("div", { className: getCssClassesLine() })));
|
|
2384
2340
|
};
|
|
2385
2341
|
|
|
2386
|
-
var css_248z$
|
|
2387
|
-
var styles$
|
|
2342
|
+
var css_248z$d = ".Stepper-module_stepper__V6odG {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px;\n}\n.Stepper-module_stepper__V6odG.Stepper-module_isHorizontal__Q-3Wu {\n overflow-x: auto;\n}";
|
|
2343
|
+
var styles$d = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2344
|
+
styleInject(css_248z$d);
|
|
2345
|
+
|
|
2346
|
+
var css_248z$c = ".Dot-module_dot__w59yb {\n transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n border-radius: 50%;\n width: 8px;\n height: 8px;\n margin: 0px 2px;\n background-color: var(--secondary);\n}\n.Dot-module_dot__w59yb.Dot-module_isActive__V74RJ {\n background-color: var(--primary);\n}";
|
|
2347
|
+
var styles$c = {"dot":"Dot-module_dot__w59yb","isActive":"Dot-module_isActive__V74RJ"};
|
|
2388
2348
|
styleInject(css_248z$c);
|
|
2389
2349
|
|
|
2350
|
+
const Dot = (props) => {
|
|
2351
|
+
const { className, color = exports.COLOR.primary, isActive, ...rest } = props;
|
|
2352
|
+
const getCssClasses = () => {
|
|
2353
|
+
const cssClasses = [];
|
|
2354
|
+
cssClasses.push(styles$c.dot);
|
|
2355
|
+
cssClasses.push(styles$c[color]);
|
|
2356
|
+
isActive && cssClasses.push(styles$c.isActive);
|
|
2357
|
+
className && cssClasses.push(className);
|
|
2358
|
+
return cssClasses.filter(css => css).join(' ');
|
|
2359
|
+
};
|
|
2360
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }));
|
|
2361
|
+
};
|
|
2362
|
+
|
|
2390
2363
|
const Stepper = (props) => {
|
|
2391
|
-
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, showDoneButton, showResetButton, onChange, onFinish } = props;
|
|
2364
|
+
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, showDoneButton, showResetButton, showSteps = true, showDots, onChange, onFinish } = props;
|
|
2392
2365
|
const [steps, setSteps] = React.useState();
|
|
2393
2366
|
const [activeIndex, setActiveIndex] = React__default["default"].useState(0);
|
|
2394
2367
|
const [skipped, setSkipped] = React__default["default"].useState(new Set());
|
|
@@ -2473,18 +2446,20 @@ const Stepper = (props) => {
|
|
|
2473
2446
|
};
|
|
2474
2447
|
const getCssClasses = () => {
|
|
2475
2448
|
const cssClasses = [];
|
|
2476
|
-
cssClasses.push(styles$
|
|
2477
|
-
isHorizontal && cssClasses.push(styles$
|
|
2449
|
+
cssClasses.push(styles$d.stepper);
|
|
2450
|
+
isHorizontal && cssClasses.push(styles$d['isHorizontal']);
|
|
2478
2451
|
return cssClasses.filter(css => css).join(' ');
|
|
2479
2452
|
};
|
|
2480
2453
|
return (React__default["default"].createElement(React__default["default"].Fragment, null, steps &&
|
|
2481
2454
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2482
|
-
React__default["default"].createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React__default["default"].createElement(React.Fragment, { key: child.props.value },
|
|
2455
|
+
React__default["default"].createElement("div", { className: getCssClasses() }, showSteps && steps.map((child, index) => (React__default["default"].createElement(React.Fragment, { key: child.props.value },
|
|
2483
2456
|
renderSteps(child, index),
|
|
2484
2457
|
index !== steps.length - 1 && React__default["default"].createElement(StepConnector, { isActive: activeIndex > index }))))),
|
|
2485
2458
|
steps && steps.map((step, index) => React__default["default"].createElement(React.Fragment, { key: step.props.value }, index === activeIndex &&
|
|
2486
2459
|
React__default["default"].createElement(StepPanel, null, step.props.children))),
|
|
2487
|
-
React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset, showDoneButton: showDoneButton, showResetButton: showResetButton })
|
|
2460
|
+
React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset, showDoneButton: showDoneButton, showResetButton: showResetButton }),
|
|
2461
|
+
steps && showDots &&
|
|
2462
|
+
React__default["default"].createElement("div", { className: 'd-flex mt-2 align-items-center justify-content-center' }, steps.map((step, index) => React__default["default"].createElement(Dot, { key: index, isActive: activeIndex >= index }))))));
|
|
2488
2463
|
};
|
|
2489
2464
|
|
|
2490
2465
|
var css_248z$b = ".Typography-module_typography__sw-td {\n font-family: var(--fontFamily);\n}\n.Typography-module_typography__sw-td.Typography-module_wrap__W7G0R {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\nh1 {\n font-size: calc(1.375rem + 1.5vw);\n}\n\nh2 {\n font-size: calc(1.325rem + 0.9vw);\n}\n\nh3 {\n font-size: calc(1.3rem + 0.6vw);\n}\n\nh4 {\n font-size: calc(1.275rem + 0.3vw);\n}\n\nh5 {\n font-size: 1.25rem;\n}\n\nh6 {\n font-size: 1rem;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 500 !important;\n margin-top: 0;\n margin-bottom: 0.5rem;\n line-height: 1.2;\n}";
|
|
@@ -2492,7 +2467,7 @@ var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typog
|
|
|
2492
2467
|
styleInject(css_248z$b);
|
|
2493
2468
|
|
|
2494
2469
|
const Wrapper = (props) => {
|
|
2495
|
-
const { as = 'span', wrap, children, className
|
|
2470
|
+
const { as = 'span', wrap, children, className, ...rest } = props;
|
|
2496
2471
|
const getCssClasses = () => {
|
|
2497
2472
|
const cssClasses = [];
|
|
2498
2473
|
cssClasses.push(styles$b.typography);
|
|
@@ -2501,11 +2476,10 @@ const Wrapper = (props) => {
|
|
|
2501
2476
|
className && cssClasses.push(className);
|
|
2502
2477
|
return cssClasses.filter(css => css).join(' ');
|
|
2503
2478
|
};
|
|
2504
|
-
return React__default["default"].createElement(as,
|
|
2479
|
+
return React__default["default"].createElement(as, { ...rest, className: getCssClasses() }, children);
|
|
2505
2480
|
};
|
|
2506
|
-
const Typography = (
|
|
2507
|
-
|
|
2508
|
-
return (React__default["default"].createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2481
|
+
const Typography = ({ children, as = 'span', wrap, ...rest }) => {
|
|
2482
|
+
return (React__default["default"].createElement(Wrapper, { as: as, wrap: wrap, ...rest }, children));
|
|
2509
2483
|
};
|
|
2510
2484
|
|
|
2511
2485
|
var css_248z$a = ".Step-module_stepWrapper__IQwq1 {\n display: flex;\n align-items: center;\n padding-left: 8px;\n padding-right: 8px;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius);\n}\n\n.Step-module_step__k42go {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n}\n.Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n width: 18px !important;\n height: 18px !important;\n}\n\n.Step-module_stepIconCircle__hnxIV svg {\n width: 24px;\n height: 24px;\n}\n\n.Step-module_stepValue__B0-xv {\n position: absolute;\n color: var(--secondary-contrast-text);\n}\n.Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n color: var(--primary-contrast-text);\n}";
|
|
@@ -2560,14 +2534,14 @@ var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","
|
|
|
2560
2534
|
styleInject(css_248z$9);
|
|
2561
2535
|
|
|
2562
2536
|
const SkeletonAvatar = (props) => {
|
|
2563
|
-
const { className
|
|
2537
|
+
const { className, ...rest } = props;
|
|
2564
2538
|
const getCssClasses = () => {
|
|
2565
2539
|
const cssClasses = [];
|
|
2566
2540
|
cssClasses.push(styles$9.skeletonAvatar);
|
|
2567
2541
|
className && cssClasses.push(className);
|
|
2568
2542
|
return cssClasses.filter(r => r).join(' ');
|
|
2569
2543
|
};
|
|
2570
|
-
return (React__default["default"].createElement("div",
|
|
2544
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }));
|
|
2571
2545
|
};
|
|
2572
2546
|
|
|
2573
2547
|
var css_248z$8 = "@keyframes SkeletonText-module_skeleton-loading__EYFfJ {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonText-module_skeletonText__E5NCO {\n width: 100%;\n height: 0.7rem;\n margin-bottom: 0.5rem;\n border-radius: 0.25rem;\n animation: SkeletonText-module_skeleton-loading__EYFfJ 1s linear infinite alternate;\n}";
|
|
@@ -2575,14 +2549,14 @@ var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skelet
|
|
|
2575
2549
|
styleInject(css_248z$8);
|
|
2576
2550
|
|
|
2577
2551
|
const SkeletonText = (props) => {
|
|
2578
|
-
const { className
|
|
2552
|
+
const { className, ...rest } = props;
|
|
2579
2553
|
const getCssClasses = () => {
|
|
2580
2554
|
const cssClasses = [];
|
|
2581
2555
|
cssClasses.push(styles$8.skeletonText);
|
|
2582
2556
|
className && cssClasses.push(className);
|
|
2583
2557
|
return cssClasses.filter(r => r).join(' ');
|
|
2584
2558
|
};
|
|
2585
|
-
return (React__default["default"].createElement("div",
|
|
2559
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }));
|
|
2586
2560
|
};
|
|
2587
2561
|
|
|
2588
2562
|
var css_248z$7 = "@keyframes SkeletonFooter-module_skeleton-loading__OEErv {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonFooter-module_skeletonFooter__u2Gxc {\n width: 30%;\n height: 0.7rem;\n border-radius: 0.25rem;\n animation: SkeletonFooter-module_skeleton-loading__OEErv 1s linear infinite alternate;\n}";
|
|
@@ -2590,14 +2564,14 @@ var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","
|
|
|
2590
2564
|
styleInject(css_248z$7);
|
|
2591
2565
|
|
|
2592
2566
|
const SkeletonFooter = (props) => {
|
|
2593
|
-
const { className
|
|
2567
|
+
const { className, ...rest } = props;
|
|
2594
2568
|
const getCssClasses = () => {
|
|
2595
2569
|
const cssClasses = [];
|
|
2596
2570
|
cssClasses.push(styles$7.skeletonFooter);
|
|
2597
2571
|
className && cssClasses.push(className);
|
|
2598
2572
|
return cssClasses.filter(r => r).join(' ');
|
|
2599
2573
|
};
|
|
2600
|
-
return (React__default["default"].createElement("div",
|
|
2574
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest }));
|
|
2601
2575
|
};
|
|
2602
2576
|
|
|
2603
2577
|
var css_248z$6 = "@keyframes SkeletonImage-module_skeleton-loading__04lJ7 {\n 0% {\n background-color: hsl(200deg, 20%, 80%);\n }\n 100% {\n background-color: hsl(200deg, 20%, 95%);\n }\n}\n.SkeletonImage-module_skeletonImage__2EwDG {\n height: 10rem;\n margin: 0.5rem 0;\n border-radius: 0.75rem;\n animation: SkeletonImage-module_skeleton-loading__04lJ7 1s linear infinite alternate;\n}\n\n.SkeletonImage-module_div__tqqrB {\n width: 100%;\n height: 100%;\n object-fit: cover;\n margin: auto;\n border-radius: 0.75rem;\n border-color: none;\n}";
|
|
@@ -2605,14 +2579,14 @@ var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","ske
|
|
|
2605
2579
|
styleInject(css_248z$6);
|
|
2606
2580
|
|
|
2607
2581
|
const SkeletonImage = (props) => {
|
|
2608
|
-
const { className
|
|
2582
|
+
const { className, ...rest } = props;
|
|
2609
2583
|
const getCssClasses = () => {
|
|
2610
2584
|
const cssClasses = [];
|
|
2611
2585
|
cssClasses.push(styles$6.skeletonImage);
|
|
2612
2586
|
className && cssClasses.push(className);
|
|
2613
2587
|
return cssClasses.filter(r => r).join(' ');
|
|
2614
2588
|
};
|
|
2615
|
-
return (React__default["default"].createElement("div",
|
|
2589
|
+
return (React__default["default"].createElement("div", { className: getCssClasses(), ...rest },
|
|
2616
2590
|
React__default["default"].createElement("div", { className: styles$6.img })));
|
|
2617
2591
|
};
|
|
2618
2592
|
|
|
@@ -2636,8 +2610,8 @@ const Table = (props) => {
|
|
|
2636
2610
|
};
|
|
2637
2611
|
|
|
2638
2612
|
const TableRow = (props) => {
|
|
2639
|
-
const { children
|
|
2640
|
-
return (React__default["default"].createElement("tr",
|
|
2613
|
+
const { children, ...rest } = props;
|
|
2614
|
+
return (React__default["default"].createElement("tr", { ...rest }, children));
|
|
2641
2615
|
};
|
|
2642
2616
|
|
|
2643
2617
|
const TableContext = React.createContext({
|
|
@@ -2646,22 +2620,22 @@ const TableContext = React.createContext({
|
|
|
2646
2620
|
const useTableContext = () => React.useContext(TableContext);
|
|
2647
2621
|
|
|
2648
2622
|
const TableHead = (props) => {
|
|
2649
|
-
const { children
|
|
2623
|
+
const { children, ...rest } = props;
|
|
2650
2624
|
return (React__default["default"].createElement(TableContext.Provider, { value: { variant: 'head' } },
|
|
2651
|
-
React__default["default"].createElement("thead",
|
|
2625
|
+
React__default["default"].createElement("thead", { ...rest }, children)));
|
|
2652
2626
|
};
|
|
2653
2627
|
|
|
2654
2628
|
const TableBody = (props) => {
|
|
2655
|
-
const { children
|
|
2629
|
+
const { children, ...rest } = props;
|
|
2656
2630
|
return (React__default["default"].createElement(TableContext.Provider, { value: { variant: 'body' } },
|
|
2657
|
-
React__default["default"].createElement("tbody",
|
|
2631
|
+
React__default["default"].createElement("tbody", { ...rest }, children)));
|
|
2658
2632
|
};
|
|
2659
2633
|
|
|
2660
2634
|
const TableCell = (props) => {
|
|
2661
2635
|
const { variant } = useTableContext();
|
|
2662
|
-
const { children, component
|
|
2663
|
-
return (React__default["default"].createElement(ConditionalWrapper, { condition: true, wrapper: (children) => ((variant === 'head' || component === 'th') ? (React__default["default"].createElement("th",
|
|
2664
|
-
React__default["default"].createElement("td",
|
|
2636
|
+
const { children, component, ...rest } = props;
|
|
2637
|
+
return (React__default["default"].createElement(ConditionalWrapper, { condition: true, wrapper: (children) => ((variant === 'head' || component === 'th') ? (React__default["default"].createElement("th", { ...rest }, children)) :
|
|
2638
|
+
React__default["default"].createElement("td", { ...rest }, children)) }, children));
|
|
2665
2639
|
};
|
|
2666
2640
|
|
|
2667
2641
|
const TabContext = React.createContext({});
|
|
@@ -2750,8 +2724,8 @@ const Tab = (props) => {
|
|
|
2750
2724
|
};
|
|
2751
2725
|
|
|
2752
2726
|
const TabPanel = (props) => {
|
|
2753
|
-
const { children, value, index
|
|
2754
|
-
return (React__default["default"].createElement("div",
|
|
2727
|
+
const { children, value, index, ...rest } = props;
|
|
2728
|
+
return (React__default["default"].createElement("div", { role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}`, ...rest }, value === index && children));
|
|
2755
2729
|
};
|
|
2756
2730
|
|
|
2757
2731
|
const HourSelect = (props) => {
|
|
@@ -2898,14 +2872,14 @@ var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
|
|
|
2898
2872
|
styleInject(css_248z$1);
|
|
2899
2873
|
|
|
2900
2874
|
const TreeView = (props) => {
|
|
2901
|
-
const { children, className
|
|
2875
|
+
const { children, className, ...rest } = props;
|
|
2902
2876
|
const getCssClasses = () => {
|
|
2903
2877
|
const cssClasses = [];
|
|
2904
2878
|
cssClasses.push(styles$1.treeView);
|
|
2905
2879
|
className && cssClasses.push(className);
|
|
2906
2880
|
return cssClasses.filter(css => css).join(' ');
|
|
2907
2881
|
};
|
|
2908
|
-
return (React__default["default"].createElement("ul",
|
|
2882
|
+
return (React__default["default"].createElement("ul", { className: getCssClasses(), ...rest }, children));
|
|
2909
2883
|
};
|
|
2910
2884
|
|
|
2911
2885
|
var css_248z = ".TreeItem-module_treeItem__Mxsjr {\n display: flex;\n flex-direction: column;\n min-height: 48px;\n justify-content: center;\n}";
|
|
@@ -2985,6 +2959,7 @@ exports.ConditionalWrapper = ConditionalWrapper;
|
|
|
2985
2959
|
exports.CssTransition = CssTransition;
|
|
2986
2960
|
exports.DateSelect = DateSelect;
|
|
2987
2961
|
exports.DaySelect = DaySelect;
|
|
2962
|
+
exports.Dot = Dot;
|
|
2988
2963
|
exports.Drawer = Drawer;
|
|
2989
2964
|
exports.EmailValidator = EmailValidator;
|
|
2990
2965
|
exports.ExpansionPanel = ExpansionPanel;
|