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.es.js
CHANGED
|
@@ -2,33 +2,6 @@ import React, { useRef, useEffect, useState, useMemo, createContext, useContext,
|
|
|
2
2
|
import reactDom, { createPortal } from 'react-dom';
|
|
3
3
|
import { createPopper } from '@popperjs/core';
|
|
4
4
|
|
|
5
|
-
/*! *****************************************************************************
|
|
6
|
-
Copyright (c) Microsoft Corporation.
|
|
7
|
-
|
|
8
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
9
|
-
purpose with or without fee is hereby granted.
|
|
10
|
-
|
|
11
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
12
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
13
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
14
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
15
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
16
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
17
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
18
|
-
***************************************************************************** */
|
|
19
|
-
|
|
20
|
-
function __rest(s, e) {
|
|
21
|
-
var t = {};
|
|
22
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
23
|
-
t[p] = s[p];
|
|
24
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
25
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
26
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
27
|
-
t[p[i]] = s[p[i]];
|
|
28
|
-
}
|
|
29
|
-
return t;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
5
|
var COLOR;
|
|
33
6
|
(function (COLOR) {
|
|
34
7
|
COLOR["primary"] = "primary";
|
|
@@ -88,97 +61,97 @@ function styleInject(css, ref) {
|
|
|
88
61
|
}
|
|
89
62
|
}
|
|
90
63
|
|
|
91
|
-
var css_248z$
|
|
92
|
-
var styles$
|
|
93
|
-
styleInject(css_248z$
|
|
64
|
+
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}";
|
|
65
|
+
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"};
|
|
66
|
+
styleInject(css_248z$14);
|
|
94
67
|
|
|
95
68
|
const Alert = (props) => {
|
|
96
|
-
const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true
|
|
69
|
+
const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true, ...rest } = props;
|
|
97
70
|
const getCssClasses = () => {
|
|
98
71
|
const cssClasses = [];
|
|
99
|
-
cssClasses.push(styles$
|
|
72
|
+
cssClasses.push(styles$14.alert);
|
|
100
73
|
if (variant === VARIANT.contained) {
|
|
101
|
-
cssClasses.push(styles$
|
|
102
|
-
cssClasses.push(styles$
|
|
74
|
+
cssClasses.push(styles$14.contained);
|
|
75
|
+
cssClasses.push(styles$14[color]);
|
|
103
76
|
}
|
|
104
77
|
if (variant === VARIANT.outline) {
|
|
105
|
-
cssClasses.push(styles$
|
|
106
|
-
cssClasses.push(styles$
|
|
78
|
+
cssClasses.push(styles$14.outline);
|
|
79
|
+
cssClasses.push(styles$14[color]);
|
|
107
80
|
}
|
|
108
|
-
shadow && cssClasses.push(styles$
|
|
81
|
+
shadow && cssClasses.push(styles$14['shadow']);
|
|
109
82
|
className && cssClasses.push(className);
|
|
110
83
|
return cssClasses.filter(r => r).join(' ');
|
|
111
84
|
};
|
|
112
|
-
return (React.createElement("div",
|
|
85
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
113
86
|
};
|
|
114
87
|
|
|
115
|
-
var css_248z$
|
|
116
|
-
var styles$
|
|
117
|
-
styleInject(css_248z$
|
|
88
|
+
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}";
|
|
89
|
+
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"};
|
|
90
|
+
styleInject(css_248z$13);
|
|
118
91
|
|
|
119
92
|
const AppBar = (props) => {
|
|
120
|
-
const { children, className, color = COLOR.primary, shadow = true
|
|
93
|
+
const { children, className, color = COLOR.primary, shadow = true, ...rest } = props;
|
|
121
94
|
const getCssClasses = () => {
|
|
122
95
|
const cssClasses = [];
|
|
123
|
-
cssClasses.push(styles$
|
|
124
|
-
cssClasses.push(styles$
|
|
125
|
-
shadow && cssClasses.push(styles$
|
|
96
|
+
cssClasses.push(styles$13[color]);
|
|
97
|
+
cssClasses.push(styles$13.appbar);
|
|
98
|
+
shadow && cssClasses.push(styles$13['shadow']);
|
|
126
99
|
className && cssClasses.push(className);
|
|
127
100
|
return cssClasses.filter(r => r).join(' ');
|
|
128
101
|
};
|
|
129
|
-
return (React.createElement("nav",
|
|
102
|
+
return (React.createElement("nav", { className: getCssClasses(), ...rest }, children));
|
|
130
103
|
};
|
|
131
104
|
|
|
132
|
-
var css_248z$
|
|
133
|
-
var styles$
|
|
134
|
-
styleInject(css_248z$
|
|
105
|
+
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}";
|
|
106
|
+
var styles$12 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
107
|
+
styleInject(css_248z$12);
|
|
135
108
|
|
|
136
109
|
const AppBarTitle = (props) => {
|
|
137
110
|
const { children, className, onClick } = props;
|
|
138
111
|
const getCssClass = () => {
|
|
139
112
|
const cssClasses = [];
|
|
140
|
-
cssClasses.push(styles$
|
|
113
|
+
cssClasses.push(styles$12.appbarTitle);
|
|
141
114
|
className && cssClasses.push(className);
|
|
142
115
|
return cssClasses.filter(r => r).join(' ');
|
|
143
116
|
};
|
|
144
117
|
return (React.createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
145
118
|
};
|
|
146
119
|
|
|
147
|
-
var css_248z$
|
|
148
|
-
var styles$
|
|
149
|
-
styleInject(css_248z$
|
|
120
|
+
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}";
|
|
121
|
+
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"};
|
|
122
|
+
styleInject(css_248z$11);
|
|
150
123
|
|
|
151
124
|
const Icon = (props) => {
|
|
152
|
-
const { children, iconColor, className
|
|
125
|
+
const { children, iconColor, className, ...rest } = props;
|
|
153
126
|
const getCssClasses = () => {
|
|
154
127
|
const cssClasses = [];
|
|
155
|
-
cssClasses.push(styles$
|
|
156
|
-
iconColor && cssClasses.push(styles$
|
|
128
|
+
cssClasses.push(styles$11.icon);
|
|
129
|
+
iconColor && cssClasses.push(styles$11[iconColor]);
|
|
157
130
|
className && cssClasses.push(className);
|
|
158
131
|
return cssClasses.filter(css => css).join(' ');
|
|
159
132
|
};
|
|
160
|
-
return (React.createElement("div",
|
|
133
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
161
134
|
};
|
|
162
135
|
|
|
163
|
-
var css_248z
|
|
164
|
-
var styles
|
|
165
|
-
styleInject(css_248z
|
|
136
|
+
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}";
|
|
137
|
+
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"};
|
|
138
|
+
styleInject(css_248z$10);
|
|
166
139
|
|
|
167
140
|
const IconButton = (props) => {
|
|
168
|
-
const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow
|
|
141
|
+
const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow, ...rest } = props;
|
|
169
142
|
const getCssClasses = () => {
|
|
170
143
|
const cssClasses = [];
|
|
171
|
-
cssClasses.push(styles
|
|
172
|
-
cssClasses.push(styles
|
|
173
|
-
cssClasses.push(styles
|
|
174
|
-
cssClasses.push(styles
|
|
175
|
-
isActive && cssClasses.push(styles
|
|
176
|
-
disabled && cssClasses.push(styles
|
|
177
|
-
shadow && cssClasses.push(styles
|
|
144
|
+
cssClasses.push(styles$10[color]);
|
|
145
|
+
cssClasses.push(styles$10[variant]);
|
|
146
|
+
cssClasses.push(styles$10[size]);
|
|
147
|
+
cssClasses.push(styles$10.iconButton);
|
|
148
|
+
isActive && cssClasses.push(styles$10.active);
|
|
149
|
+
disabled && cssClasses.push(styles$10.disabled);
|
|
150
|
+
shadow && cssClasses.push(styles$10.shadow);
|
|
178
151
|
className && cssClasses.push(className);
|
|
179
152
|
return cssClasses.filter(css => css).join(' ');
|
|
180
153
|
};
|
|
181
|
-
return (React.createElement("button",
|
|
154
|
+
return (React.createElement("button", { type: "button", className: getCssClasses(), disabled: disabled, ...rest },
|
|
182
155
|
icon && React.createElement(Icon, null, icon),
|
|
183
156
|
children));
|
|
184
157
|
};
|
|
@@ -241,7 +214,7 @@ const useConstructor = (callBack) => {
|
|
|
241
214
|
};
|
|
242
215
|
|
|
243
216
|
function useCssClasses(cssClasses) {
|
|
244
|
-
return [
|
|
217
|
+
return [cssClasses?.filter(css => css).join(' ') || ''];
|
|
245
218
|
}
|
|
246
219
|
|
|
247
220
|
function useHover() {
|
|
@@ -319,105 +292,95 @@ const Portal = ({ children, target = document.body, className }) => {
|
|
|
319
292
|
return createPortal(children, containerEl);
|
|
320
293
|
};
|
|
321
294
|
|
|
322
|
-
var css_248z
|
|
323
|
-
var styles
|
|
324
|
-
styleInject(css_248z
|
|
295
|
+
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}";
|
|
296
|
+
var styles$$ = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
297
|
+
styleInject(css_248z$$);
|
|
325
298
|
|
|
326
299
|
const Backdrop = (props) => {
|
|
327
|
-
const { target = document.body, isTransparent = false, onClick, style
|
|
300
|
+
const { target = document.body, isTransparent = false, onClick, style, ...rest } = props;
|
|
328
301
|
const handleClick = (e) => {
|
|
329
302
|
e.stopPropagation();
|
|
330
303
|
onClick && onClick(e);
|
|
331
304
|
};
|
|
332
305
|
const getCssClasses = () => {
|
|
333
306
|
const cssClasses = [];
|
|
334
|
-
cssClasses.push(styles
|
|
335
|
-
isTransparent && cssClasses.push(styles
|
|
307
|
+
cssClasses.push(styles$$.backdrop);
|
|
308
|
+
isTransparent && cssClasses.push(styles$$['isTransparent']);
|
|
336
309
|
return cssClasses.filter(css => css).join(' ');
|
|
337
310
|
};
|
|
338
311
|
const getStyles = () => {
|
|
339
312
|
return Object.assign({ height: '100%', width: '100%', position: 'absolute' }, style);
|
|
340
313
|
};
|
|
341
314
|
return (React.createElement(Portal, { className: 'backdrop-root', target: target },
|
|
342
|
-
React.createElement("div",
|
|
315
|
+
React.createElement("div", { className: getCssClasses(), onClick: handleClick, style: getStyles(), ...rest })));
|
|
343
316
|
};
|
|
344
317
|
|
|
345
|
-
var css_248z$
|
|
346
|
-
var styles$
|
|
347
|
-
styleInject(css_248z$
|
|
318
|
+
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}";
|
|
319
|
+
var styles$_ = {"list":"List-module_list__gpZ41"};
|
|
320
|
+
styleInject(css_248z$_);
|
|
348
321
|
|
|
349
322
|
const List = (props) => {
|
|
350
|
-
const { children, className, isFlush
|
|
323
|
+
const { children, className, isFlush, ...rest } = props;
|
|
351
324
|
const getCssClasses = () => {
|
|
352
325
|
const cssClasses = [];
|
|
353
|
-
isFlush && cssClasses.push(styles$
|
|
354
|
-
cssClasses.push(styles$
|
|
326
|
+
isFlush && cssClasses.push(styles$_.flush);
|
|
327
|
+
cssClasses.push(styles$_.list);
|
|
355
328
|
className && cssClasses.push(className);
|
|
356
329
|
return cssClasses.filter(css => css).join(' ');
|
|
357
330
|
};
|
|
358
|
-
return (React.createElement("ul",
|
|
331
|
+
return (React.createElement("ul", { className: getCssClasses(), ...rest }, children));
|
|
359
332
|
};
|
|
360
333
|
|
|
361
|
-
var css_248z$
|
|
362
|
-
var styles$
|
|
363
|
-
styleInject(css_248z$
|
|
334
|
+
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}";
|
|
335
|
+
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"};
|
|
336
|
+
styleInject(css_248z$Z);
|
|
364
337
|
|
|
365
338
|
const ListItem = (props) => {
|
|
366
|
-
const { children, color, active, className, disabled, onClick
|
|
339
|
+
const { children, color, active, className, disabled, onClick, ...rest } = props;
|
|
367
340
|
const getCssClasses = () => {
|
|
368
341
|
const cssClasses = [];
|
|
369
|
-
cssClasses.push(styles$
|
|
370
|
-
color && cssClasses.push(styles$
|
|
371
|
-
active && cssClasses.push(styles$
|
|
372
|
-
disabled && cssClasses.push(styles$
|
|
342
|
+
cssClasses.push(styles$Z.listItem);
|
|
343
|
+
color && cssClasses.push(styles$Z[color]);
|
|
344
|
+
active && cssClasses.push(styles$Z['active']);
|
|
345
|
+
disabled && cssClasses.push(styles$Z['disabled']);
|
|
373
346
|
className && cssClasses.push(className);
|
|
374
347
|
return cssClasses.filter(css => css).join(' ');
|
|
375
348
|
};
|
|
376
349
|
const handleClick = (e) => {
|
|
377
350
|
!disabled && onClick && onClick(e);
|
|
378
351
|
};
|
|
379
|
-
return (React.createElement("li",
|
|
352
|
+
return (React.createElement("li", { onClick: handleClick, className: getCssClasses(), ...rest }, children));
|
|
380
353
|
};
|
|
381
354
|
|
|
382
|
-
var css_248z$
|
|
383
|
-
var styles$
|
|
355
|
+
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}";
|
|
356
|
+
var styles$Y = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
357
|
+
styleInject(css_248z$Y);
|
|
358
|
+
|
|
359
|
+
const ListItemAvatar = ({ avatar, ...rest }) => (React.createElement("div", { className: styles$Y.avatar, ...rest }, avatar));
|
|
360
|
+
|
|
361
|
+
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}";
|
|
362
|
+
var styles$X = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
384
363
|
styleInject(css_248z$X);
|
|
385
364
|
|
|
386
|
-
const
|
|
387
|
-
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
388
|
-
return (React.createElement("div", Object.assign({ className: styles$X.avatar }, rest), avatar));
|
|
389
|
-
};
|
|
365
|
+
const ListItemIcon = ({ icon, ...rest }) => (React.createElement("div", { className: styles$X.icon, ...rest }, icon));
|
|
390
366
|
|
|
391
|
-
var css_248z$W = ".
|
|
392
|
-
var styles$W = {"
|
|
367
|
+
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}";
|
|
368
|
+
var styles$W = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
393
369
|
styleInject(css_248z$W);
|
|
394
370
|
|
|
395
|
-
const
|
|
396
|
-
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
397
|
-
return (React.createElement("div", Object.assign({ className: styles$W.icon }, rest), icon));
|
|
398
|
-
};
|
|
371
|
+
const ListItemAction = ({ children, onClick, ...rest }) => (React.createElement("div", { className: styles$W.listItemAction, onClick: (e) => onClick && onClick(e), ...rest }, children));
|
|
399
372
|
|
|
400
|
-
var css_248z$V = ".
|
|
401
|
-
var styles$V = {"
|
|
373
|
+
var css_248z$V = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
374
|
+
var styles$V = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
402
375
|
styleInject(css_248z$V);
|
|
403
376
|
|
|
404
|
-
const
|
|
405
|
-
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
406
|
-
return (React.createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: (e) => onClick && onClick(e) }, rest), children));
|
|
407
|
-
};
|
|
408
|
-
|
|
409
|
-
var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
410
|
-
var styles$U = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
411
|
-
styleInject(css_248z$U);
|
|
412
|
-
|
|
413
|
-
const ListItemText = (_a) => {
|
|
414
|
-
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
377
|
+
const ListItemText = ({ primary, secondary, ...rest }) => {
|
|
415
378
|
const getCssClasses = () => {
|
|
416
379
|
const cssClasses = [];
|
|
417
|
-
cssClasses.push(styles$
|
|
380
|
+
cssClasses.push(styles$V.listItemText);
|
|
418
381
|
return cssClasses.filter(css => css).join(' ');
|
|
419
382
|
};
|
|
420
|
-
return (React.createElement("div",
|
|
383
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest },
|
|
421
384
|
React.createElement(ListItemTextPrimary, null, primary),
|
|
422
385
|
secondary &&
|
|
423
386
|
React.createElement(ListItemTextSecondary, null, secondary)));
|
|
@@ -425,9 +388,9 @@ const ListItemText = (_a) => {
|
|
|
425
388
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
426
389
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
427
390
|
|
|
428
|
-
var css_248z$
|
|
429
|
-
var styles$
|
|
430
|
-
styleInject(css_248z$
|
|
391
|
+
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}";
|
|
392
|
+
var styles$U = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
393
|
+
styleInject(css_248z$U);
|
|
431
394
|
|
|
432
395
|
// preset value
|
|
433
396
|
// enter -> delay? -> show results
|
|
@@ -457,25 +420,25 @@ const AutoComplete = (props) => {
|
|
|
457
420
|
if (isShow === true) {
|
|
458
421
|
document.body.classList.add('modal-open');
|
|
459
422
|
const main = document.querySelector('.main');
|
|
460
|
-
main
|
|
423
|
+
main?.classList.add('modal-open');
|
|
461
424
|
}
|
|
462
425
|
else {
|
|
463
426
|
document.body.classList.remove('modal-open');
|
|
464
427
|
const main = document.querySelector('.main');
|
|
465
|
-
main
|
|
428
|
+
main?.classList.remove('modal-open');
|
|
466
429
|
}
|
|
467
430
|
}, [isShow]);
|
|
468
431
|
useEffect(() => {
|
|
469
432
|
return () => {
|
|
470
433
|
document.body.classList.remove('modal-open');
|
|
471
434
|
const main = document.querySelector('.main');
|
|
472
|
-
main
|
|
435
|
+
main?.classList.remove('modal-open');
|
|
473
436
|
};
|
|
474
437
|
}, []);
|
|
475
438
|
const getCssClass = () => {
|
|
476
439
|
const cssClasses = [];
|
|
477
440
|
className && cssClasses.push(className);
|
|
478
|
-
cssClasses.push(styles$
|
|
441
|
+
cssClasses.push(styles$U.select);
|
|
479
442
|
return cssClasses.filter(r => r).join(' ');
|
|
480
443
|
};
|
|
481
444
|
const show = () => setIsShow(true);
|
|
@@ -499,46 +462,46 @@ const AutoComplete = (props) => {
|
|
|
499
462
|
setModel('');
|
|
500
463
|
setSearchText('');
|
|
501
464
|
};
|
|
502
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
465
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$U.selectContainer },
|
|
503
466
|
React.createElement("div", { className: "d-flex" },
|
|
504
467
|
React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
505
|
-
showClearButton &&
|
|
468
|
+
showClearButton && model?.length > 0 &&
|
|
506
469
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
507
470
|
isShow &&
|
|
508
471
|
React.createElement(React.Fragment, null,
|
|
509
|
-
React.createElement("div", { className: styles$
|
|
472
|
+
React.createElement("div", { className: styles$U.selectMenu },
|
|
510
473
|
React.createElement(List, null, _options && _options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
511
474
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
512
475
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
513
476
|
};
|
|
514
477
|
|
|
515
|
-
var css_248z$
|
|
516
|
-
var styles$
|
|
517
|
-
styleInject(css_248z$
|
|
478
|
+
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}";
|
|
479
|
+
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"};
|
|
480
|
+
styleInject(css_248z$T);
|
|
518
481
|
|
|
519
482
|
const Badge = (props) => {
|
|
520
|
-
const { children, content, className, color = COLOR.primary
|
|
483
|
+
const { children, content, className, color = COLOR.primary, ...rest } = props;
|
|
521
484
|
const [cssClassName] = useCssClasses([
|
|
522
|
-
styles$
|
|
523
|
-
styles$
|
|
485
|
+
styles$T.badge,
|
|
486
|
+
styles$T[color],
|
|
524
487
|
className
|
|
525
488
|
]);
|
|
526
489
|
return (React.createElement(BadgeContainer, null,
|
|
527
490
|
children,
|
|
528
|
-
React.createElement("span",
|
|
491
|
+
React.createElement("span", { className: cssClassName, ...rest }, content)));
|
|
529
492
|
};
|
|
530
493
|
const BadgeContainer = (props) => {
|
|
531
|
-
const { children, className
|
|
494
|
+
const { children, className, ...rest } = props;
|
|
532
495
|
const [cssClassName] = useCssClasses([
|
|
533
|
-
styles$
|
|
496
|
+
styles$T.badgeContainer,
|
|
534
497
|
className,
|
|
535
498
|
]);
|
|
536
|
-
return (React.createElement("div",
|
|
499
|
+
return (React.createElement("div", { className: cssClassName, ...rest }, children));
|
|
537
500
|
};
|
|
538
501
|
|
|
539
|
-
var css_248z$
|
|
540
|
-
var styles$
|
|
541
|
-
styleInject(css_248z$
|
|
502
|
+
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}";
|
|
503
|
+
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"};
|
|
504
|
+
styleInject(css_248z$S);
|
|
542
505
|
|
|
543
506
|
const ButtonContext = createContext({
|
|
544
507
|
color: null
|
|
@@ -546,23 +509,23 @@ const ButtonContext = createContext({
|
|
|
546
509
|
const useButtonContext = () => useContext(ButtonContext);
|
|
547
510
|
|
|
548
511
|
const Button = (props) => {
|
|
549
|
-
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block
|
|
512
|
+
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block, ...rest } = props;
|
|
550
513
|
const buttonContext = useButtonContext();
|
|
551
514
|
const getCssClasses = () => {
|
|
552
515
|
const cssClasses = [];
|
|
553
|
-
cssClasses.push(styles$
|
|
516
|
+
cssClasses.push(styles$S.button);
|
|
554
517
|
const buttonColor = buttonContext.color || color;
|
|
555
518
|
if (variant !== 'outline' && variant !== 'text') {
|
|
556
|
-
cssClasses.push(styles$
|
|
557
|
-
cssClasses.push(styles$
|
|
519
|
+
cssClasses.push(styles$S.btnContained);
|
|
520
|
+
cssClasses.push(styles$S[buttonColor]);
|
|
558
521
|
}
|
|
559
522
|
if (variant === 'outline') {
|
|
560
|
-
cssClasses.push(styles$
|
|
561
|
-
cssClasses.push(styles$
|
|
523
|
+
cssClasses.push(styles$S.btnOutline);
|
|
524
|
+
cssClasses.push(styles$S[buttonColor]);
|
|
562
525
|
}
|
|
563
526
|
if (variant === 'text') {
|
|
564
|
-
cssClasses.push(styles$
|
|
565
|
-
cssClasses.push(styles$
|
|
527
|
+
cssClasses.push(styles$S.btnText);
|
|
528
|
+
cssClasses.push(styles$S[buttonColor]);
|
|
566
529
|
}
|
|
567
530
|
if (isRounded && variant !== 'text') {
|
|
568
531
|
cssClasses.push(`rounded-pill`);
|
|
@@ -570,63 +533,63 @@ const Button = (props) => {
|
|
|
570
533
|
if (isActive) {
|
|
571
534
|
cssClasses.push('active');
|
|
572
535
|
}
|
|
573
|
-
shadow && cssClasses.push(styles$
|
|
574
|
-
block && cssClasses.push(styles$
|
|
536
|
+
shadow && cssClasses.push(styles$S.shadow);
|
|
537
|
+
block && cssClasses.push(styles$S.block);
|
|
575
538
|
className && cssClasses.push(className);
|
|
576
539
|
return cssClasses.filter(css => css).join(' ');
|
|
577
540
|
};
|
|
578
|
-
return (React.createElement("button",
|
|
541
|
+
return (React.createElement("button", { type: "button", className: getCssClasses(), ...rest },
|
|
579
542
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
580
543
|
startIcon &&
|
|
581
|
-
React.createElement(Icon, { className: styles$
|
|
544
|
+
React.createElement(Icon, { className: styles$S.startIcon }, startIcon),
|
|
582
545
|
children,
|
|
583
546
|
endIcon &&
|
|
584
|
-
React.createElement(Icon, { className: styles$
|
|
547
|
+
React.createElement(Icon, { className: styles$S.endIcon }, endIcon))));
|
|
585
548
|
};
|
|
586
549
|
|
|
587
|
-
var css_248z$
|
|
588
|
-
var styles$
|
|
589
|
-
styleInject(css_248z$
|
|
550
|
+
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}";
|
|
551
|
+
var styles$R = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
552
|
+
styleInject(css_248z$R);
|
|
590
553
|
|
|
591
554
|
const ButtonGroup = (props) => {
|
|
592
|
-
const { children, className, color
|
|
555
|
+
const { children, className, color, ...rest } = props;
|
|
593
556
|
const getCssClasses = () => {
|
|
594
557
|
const cssClasses = [];
|
|
595
|
-
cssClasses.push(styles$
|
|
558
|
+
cssClasses.push(styles$R.buttonGroup);
|
|
596
559
|
className && cssClasses.push(className);
|
|
597
560
|
return cssClasses.filter(css => css).join(' ');
|
|
598
561
|
};
|
|
599
562
|
return (React.createElement(ButtonContext.Provider, { value: { color: color || COLOR.primary } },
|
|
600
|
-
React.createElement("div",
|
|
563
|
+
React.createElement("div", { className: getCssClasses(), role: "group", ...rest }, children)));
|
|
601
564
|
};
|
|
602
565
|
|
|
603
|
-
var css_248z$
|
|
604
|
-
var styles$
|
|
605
|
-
styleInject(css_248z$
|
|
566
|
+
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}";
|
|
567
|
+
var styles$Q = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
568
|
+
styleInject(css_248z$Q);
|
|
606
569
|
|
|
607
570
|
const Breadcrumb = (props) => {
|
|
608
|
-
const { children, className
|
|
571
|
+
const { children, className, ...rest } = props;
|
|
609
572
|
const getCssClasses = () => {
|
|
610
573
|
const cssClasses = [];
|
|
611
|
-
cssClasses.push(styles$
|
|
574
|
+
cssClasses.push(styles$Q.breadcrumb);
|
|
612
575
|
className && cssClasses.push(className);
|
|
613
576
|
return cssClasses.filter(css => css).join(' ');
|
|
614
577
|
};
|
|
615
|
-
return (React.createElement("nav",
|
|
578
|
+
return (React.createElement("nav", { ...rest },
|
|
616
579
|
React.createElement("ol", { className: getCssClasses() }, children)));
|
|
617
580
|
};
|
|
618
581
|
|
|
619
582
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
620
583
|
|
|
621
|
-
var css_248z$
|
|
622
|
-
var styles$
|
|
623
|
-
styleInject(css_248z$
|
|
584
|
+
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}";
|
|
585
|
+
var styles$P = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
586
|
+
styleInject(css_248z$P);
|
|
624
587
|
|
|
625
588
|
const BreadcrumbItem = (props) => {
|
|
626
589
|
const { children, className, isActive, onClick } = props;
|
|
627
590
|
const getCssClasses = () => {
|
|
628
591
|
const cssClasses = [];
|
|
629
|
-
cssClasses.push(styles$
|
|
592
|
+
cssClasses.push(styles$P.breadcrumbItem);
|
|
630
593
|
className && cssClasses.push(className);
|
|
631
594
|
isActive && cssClasses.push('active');
|
|
632
595
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -638,118 +601,118 @@ const BreadcrumbItem = (props) => {
|
|
|
638
601
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: (label) => React.createElement("a", null, label) }, children)));
|
|
639
602
|
};
|
|
640
603
|
|
|
641
|
-
var css_248z$
|
|
642
|
-
var styles$
|
|
643
|
-
styleInject(css_248z$
|
|
604
|
+
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}";
|
|
605
|
+
var styles$O = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
606
|
+
styleInject(css_248z$O);
|
|
644
607
|
|
|
645
608
|
const Card = (props) => {
|
|
646
|
-
const { children, className, shadow = true
|
|
609
|
+
const { children, className, shadow = true, ...rest } = props;
|
|
647
610
|
const getCssClasses = () => {
|
|
648
611
|
const cssClasses = [];
|
|
649
|
-
cssClasses.push(styles$
|
|
650
|
-
shadow && cssClasses.push(styles$
|
|
612
|
+
cssClasses.push(styles$O.card);
|
|
613
|
+
shadow && cssClasses.push(styles$O.shadow);
|
|
651
614
|
className && cssClasses.push(className);
|
|
652
615
|
return cssClasses.filter(css => css).join(' ');
|
|
653
616
|
};
|
|
654
|
-
return (React.createElement("div",
|
|
617
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
655
618
|
};
|
|
656
619
|
|
|
657
|
-
var css_248z$
|
|
658
|
-
var styles$
|
|
659
|
-
styleInject(css_248z$
|
|
620
|
+
var css_248z$N = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
621
|
+
var styles$N = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
622
|
+
styleInject(css_248z$N);
|
|
660
623
|
|
|
661
624
|
const CardBody = (props) => {
|
|
662
|
-
const { children, className
|
|
625
|
+
const { children, className, ...rest } = props;
|
|
663
626
|
const getCssClasses = () => {
|
|
664
627
|
const cssClasses = [];
|
|
665
|
-
cssClasses.push(styles$
|
|
628
|
+
cssClasses.push(styles$N.cardBody);
|
|
666
629
|
className && cssClasses.push(className);
|
|
667
630
|
return cssClasses.filter(css => css).join(' ');
|
|
668
631
|
};
|
|
669
|
-
return (React.createElement("div",
|
|
632
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
670
633
|
};
|
|
671
634
|
|
|
672
|
-
var css_248z$
|
|
673
|
-
var styles$
|
|
674
|
-
styleInject(css_248z$
|
|
635
|
+
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}";
|
|
636
|
+
var styles$M = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
637
|
+
styleInject(css_248z$M);
|
|
675
638
|
|
|
676
639
|
const CardFooter = (props) => {
|
|
677
|
-
const { children, className
|
|
640
|
+
const { children, className, ...rest } = props;
|
|
678
641
|
const getCssClasses = () => {
|
|
679
642
|
const cssClasses = [];
|
|
680
|
-
cssClasses.push(styles$
|
|
643
|
+
cssClasses.push(styles$M.cardFooter);
|
|
681
644
|
className && cssClasses.push(className);
|
|
682
645
|
return cssClasses.filter(css => css).join(' ');
|
|
683
646
|
};
|
|
684
|
-
return (React.createElement("div",
|
|
647
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
685
648
|
};
|
|
686
649
|
|
|
687
|
-
var css_248z$
|
|
688
|
-
var styles$
|
|
689
|
-
styleInject(css_248z$
|
|
650
|
+
var css_248z$L = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
651
|
+
var styles$L = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
652
|
+
styleInject(css_248z$L);
|
|
690
653
|
|
|
691
654
|
const CardSubtitle = (props) => {
|
|
692
|
-
const { children, className
|
|
655
|
+
const { children, className, ...rest } = props;
|
|
693
656
|
const getCssClasses = () => {
|
|
694
657
|
const cssClasses = [];
|
|
695
|
-
cssClasses.push(styles$
|
|
658
|
+
cssClasses.push(styles$L.cardSubtitle);
|
|
696
659
|
className && cssClasses.push(className);
|
|
697
660
|
return cssClasses.filter(css => css).join(' ');
|
|
698
661
|
};
|
|
699
|
-
return (React.createElement("p",
|
|
662
|
+
return (React.createElement("p", { className: getCssClasses(), ...rest }, children));
|
|
700
663
|
};
|
|
701
664
|
|
|
702
|
-
var css_248z$
|
|
703
|
-
var styles$
|
|
704
|
-
styleInject(css_248z$
|
|
665
|
+
var css_248z$K = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
666
|
+
var styles$K = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
667
|
+
styleInject(css_248z$K);
|
|
705
668
|
|
|
706
669
|
const CardText = (props) => {
|
|
707
|
-
const { children, className
|
|
670
|
+
const { children, className, ...rest } = props;
|
|
708
671
|
const getCssClasses = () => {
|
|
709
672
|
const cssClasses = [];
|
|
710
|
-
cssClasses.push(styles$
|
|
673
|
+
cssClasses.push(styles$K.cardText);
|
|
711
674
|
className && cssClasses.push(className);
|
|
712
675
|
return cssClasses.filter(css => css).join(' ');
|
|
713
676
|
};
|
|
714
|
-
return (React.createElement("p",
|
|
677
|
+
return (React.createElement("p", { className: getCssClasses(), ...rest }, children));
|
|
715
678
|
};
|
|
716
679
|
|
|
717
|
-
var css_248z$
|
|
718
|
-
var styles$
|
|
719
|
-
styleInject(css_248z$
|
|
680
|
+
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}";
|
|
681
|
+
var styles$J = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
682
|
+
styleInject(css_248z$J);
|
|
720
683
|
|
|
721
684
|
const CardTitle = (props) => {
|
|
722
|
-
const { children, className, as: As = 'div'
|
|
685
|
+
const { children, className, as: As = 'div', ...rest } = props;
|
|
723
686
|
const getCssClasses = () => {
|
|
724
687
|
const cssClasses = [];
|
|
725
|
-
cssClasses.push(styles$
|
|
688
|
+
cssClasses.push(styles$J.cardTitle);
|
|
726
689
|
className && cssClasses.push(className);
|
|
727
690
|
return cssClasses.filter(css => css).join(' ');
|
|
728
691
|
};
|
|
729
|
-
return (React.createElement(As,
|
|
692
|
+
return (React.createElement(As, { className: getCssClasses(), ...rest }, children));
|
|
730
693
|
};
|
|
731
694
|
|
|
732
|
-
var css_248z$
|
|
733
|
-
var styles$
|
|
734
|
-
styleInject(css_248z$
|
|
695
|
+
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}";
|
|
696
|
+
var styles$I = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
697
|
+
styleInject(css_248z$I);
|
|
735
698
|
|
|
736
699
|
const CardImage = (props) => {
|
|
737
|
-
const { src, alt, className
|
|
700
|
+
const { src, alt, className, ...rest } = props;
|
|
738
701
|
const getCssClasses = () => {
|
|
739
702
|
const cssClasses = [];
|
|
740
|
-
cssClasses.push(styles$
|
|
703
|
+
cssClasses.push(styles$I.cardImage);
|
|
741
704
|
className && cssClasses.push(className);
|
|
742
705
|
return cssClasses.filter(css => css).join(' ');
|
|
743
706
|
};
|
|
744
|
-
return (React.createElement("img",
|
|
707
|
+
return (React.createElement("img", { className: getCssClasses(), src: src, alt: alt, ...rest }));
|
|
745
708
|
};
|
|
746
709
|
|
|
747
|
-
var css_248z$
|
|
748
|
-
var styles$
|
|
749
|
-
styleInject(css_248z$
|
|
710
|
+
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}";
|
|
711
|
+
var styles$H = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
712
|
+
styleInject(css_248z$H);
|
|
750
713
|
|
|
751
714
|
const Checkbox = (props) => {
|
|
752
|
-
const { id, checked, className, label, name, value = 'off', disabled, readOnly
|
|
715
|
+
const { id, checked, className, label, name, value = 'off', disabled, readOnly, ...rest } = props;
|
|
753
716
|
// TODO
|
|
754
717
|
// add own value
|
|
755
718
|
// set from outer
|
|
@@ -775,38 +738,37 @@ const Checkbox = (props) => {
|
|
|
775
738
|
};
|
|
776
739
|
const getCssClassesLabel = () => {
|
|
777
740
|
const cssClasses = [];
|
|
778
|
-
cssClasses.push(styles$
|
|
779
|
-
disabled && cssClasses.push(styles$
|
|
741
|
+
cssClasses.push(styles$H.checkboxLabel);
|
|
742
|
+
disabled && cssClasses.push(styles$H['disabled']);
|
|
780
743
|
return cssClasses.filter(css => css).join(' ');
|
|
781
744
|
};
|
|
782
745
|
const getIcon = () => {
|
|
783
746
|
return isChecked ? icons.selected : icons.default;
|
|
784
747
|
};
|
|
785
748
|
const handleClick = () => {
|
|
786
|
-
var _a;
|
|
787
749
|
if (!disabled && !readOnly) {
|
|
788
750
|
setIsChecked(!isChecked);
|
|
789
|
-
|
|
751
|
+
checkboxElement?.current?.click();
|
|
790
752
|
}
|
|
791
753
|
};
|
|
792
|
-
return (React.createElement("div", { className: styles$
|
|
754
|
+
return (React.createElement("div", { className: styles$H.checkboxContainer },
|
|
793
755
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
794
756
|
React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
795
|
-
React.createElement("input",
|
|
757
|
+
React.createElement("input", { type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value, ...rest })));
|
|
796
758
|
};
|
|
797
759
|
|
|
798
|
-
var css_248z$
|
|
799
|
-
var styles$
|
|
800
|
-
styleInject(css_248z$
|
|
760
|
+
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}";
|
|
761
|
+
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"};
|
|
762
|
+
styleInject(css_248z$G);
|
|
801
763
|
|
|
802
764
|
const Chip = (props) => {
|
|
803
|
-
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style
|
|
765
|
+
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style, ...rest } = props;
|
|
804
766
|
const getCssClass = () => {
|
|
805
767
|
const cssClasses = [];
|
|
806
|
-
cssClasses.push(styles$
|
|
807
|
-
cssClasses.push(styles$
|
|
808
|
-
shadow && cssClasses.push(styles$
|
|
809
|
-
onClick && cssClasses.push(styles$
|
|
768
|
+
cssClasses.push(styles$G.chip);
|
|
769
|
+
cssClasses.push(styles$G[color]);
|
|
770
|
+
shadow && cssClasses.push(styles$G['shadow']);
|
|
771
|
+
onClick && cssClasses.push(styles$G['clickable']);
|
|
810
772
|
className && cssClasses.push(className);
|
|
811
773
|
return cssClasses.filter(r => r).join(' ');
|
|
812
774
|
};
|
|
@@ -814,9 +776,9 @@ const Chip = (props) => {
|
|
|
814
776
|
e.stopPropagation();
|
|
815
777
|
onDelete && onDelete(e);
|
|
816
778
|
};
|
|
817
|
-
return (React.createElement("div",
|
|
779
|
+
return (React.createElement("div", { className: getCssClass(), ...rest, style: style },
|
|
818
780
|
React.createElement("span", null, children),
|
|
819
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
781
|
+
isDeletable && (React.createElement("div", { className: styles$G.deleteIcon, onClick: (e) => handleClickOnDelete(e) }, deleteIcon))));
|
|
820
782
|
};
|
|
821
783
|
|
|
822
784
|
const CssTransition = (props) => {
|
|
@@ -881,63 +843,61 @@ const CssTransition = (props) => {
|
|
|
881
843
|
}, [isShow]);
|
|
882
844
|
const getCssClasses = () => {
|
|
883
845
|
const cssClasses = [];
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
846
|
+
cssState?.hidden && cssClasses.push(`hidden`);
|
|
847
|
+
cssState?.enter && cssClasses.push(`${className}-enter`);
|
|
848
|
+
cssState?.enterStart && cssClasses.push(`${className}-enter-start`);
|
|
849
|
+
cssState?.enterEnd && cssClasses.push(`${className}-enter-end`);
|
|
850
|
+
cssState?.leave && cssClasses.push(`${className}-leave`);
|
|
851
|
+
cssState?.leaveStart && cssClasses.push(`${className}-leave-start`);
|
|
852
|
+
cssState?.leaveEnd && cssClasses.push(`${className}-leave-end`);
|
|
891
853
|
return cssClasses.filter((css) => css).join(' ');
|
|
892
854
|
};
|
|
893
855
|
return (React.createElement(React.Fragment, null, isRenderChild &&
|
|
894
856
|
React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
895
857
|
};
|
|
896
858
|
|
|
897
|
-
var css_248z$
|
|
898
|
-
var styles$
|
|
899
|
-
styleInject(css_248z$
|
|
859
|
+
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}";
|
|
860
|
+
var styles$F = {"column":"Column-module_column__fcTgl"};
|
|
861
|
+
styleInject(css_248z$F);
|
|
900
862
|
|
|
901
863
|
const Column = (props) => {
|
|
902
|
-
const { children, className
|
|
864
|
+
const { children, className, ...rest } = props;
|
|
903
865
|
const getCssClasses = () => {
|
|
904
866
|
const cssClasses = [];
|
|
905
|
-
cssClasses.push(styles$
|
|
867
|
+
cssClasses.push(styles$F.column);
|
|
906
868
|
className && cssClasses.push(className);
|
|
907
869
|
return cssClasses.filter(css => css).join(' ');
|
|
908
870
|
};
|
|
909
|
-
return (React.createElement("div",
|
|
871
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
910
872
|
};
|
|
911
873
|
|
|
912
|
-
var css_248z$
|
|
913
|
-
var styles$
|
|
914
|
-
styleInject(css_248z$
|
|
874
|
+
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}";
|
|
875
|
+
var styles$E = {"row":"Row-module_row__bTIWp"};
|
|
876
|
+
styleInject(css_248z$E);
|
|
915
877
|
|
|
916
|
-
const Row = (
|
|
917
|
-
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
878
|
+
const Row = ({ children, direction = 'row', className, ...rest }) => {
|
|
918
879
|
const getCssClasses = () => {
|
|
919
880
|
const cssClasses = [];
|
|
920
|
-
cssClasses.push(styles$
|
|
881
|
+
cssClasses.push(styles$E.row);
|
|
921
882
|
className && cssClasses.push(className);
|
|
922
883
|
direction && cssClasses.push(`flex-${direction}`);
|
|
923
884
|
return cssClasses.filter(css => css).join(' ');
|
|
924
885
|
};
|
|
925
|
-
return (React.createElement("div",
|
|
886
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }, children));
|
|
926
887
|
};
|
|
927
888
|
|
|
928
|
-
var css_248z$
|
|
929
|
-
var styles$
|
|
930
|
-
styleInject(css_248z$
|
|
889
|
+
var css_248z$D = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
890
|
+
var styles$D = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
891
|
+
styleInject(css_248z$D);
|
|
931
892
|
|
|
932
|
-
const FormLabel = (
|
|
933
|
-
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
893
|
+
const FormLabel = ({ children, className, htmlFor, ...rest }) => {
|
|
934
894
|
const getCssClasses = () => {
|
|
935
895
|
const cssClasses = [];
|
|
936
|
-
cssClasses.push(styles$
|
|
896
|
+
cssClasses.push(styles$D.formLabel);
|
|
937
897
|
className && cssClasses.push(className);
|
|
938
898
|
return cssClasses.filter(css => css).join(' ');
|
|
939
899
|
};
|
|
940
|
-
return (React.createElement("label",
|
|
900
|
+
return (React.createElement("label", { htmlFor: htmlFor, className: getCssClasses(), ...rest }, children));
|
|
941
901
|
};
|
|
942
902
|
|
|
943
903
|
const FormGroup = (props) => {
|
|
@@ -946,7 +906,7 @@ const FormGroup = (props) => {
|
|
|
946
906
|
};
|
|
947
907
|
|
|
948
908
|
const FileInput = (props) => {
|
|
949
|
-
const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false
|
|
909
|
+
const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false, ...rest } = props;
|
|
950
910
|
const inputFileElement = useRef(null);
|
|
951
911
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
952
912
|
const [model, setModel] = useState(value);
|
|
@@ -965,17 +925,16 @@ const FileInput = (props) => {
|
|
|
965
925
|
alert('coming soon');
|
|
966
926
|
};
|
|
967
927
|
return (React.createElement("div", { className: "d-flex align-items-start" },
|
|
968
|
-
React.createElement(Button, { className: "flex-wrap", disabled: disabled, onClick: () =>
|
|
928
|
+
React.createElement(Button, { className: "flex-wrap", disabled: disabled, onClick: () => inputFileElement.current?.click() }, children),
|
|
969
929
|
React.createElement("div", { className: "d-flex align-items-center flex-wrap ml-1" }, fileList && Array.from(fileList).map((file) => React.createElement(Chip, { key: file.name, isDeletable: deletable, onDelete: () => handleOnDelete() }, file.name))),
|
|
970
|
-
React.createElement("input",
|
|
930
|
+
React.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 })));
|
|
971
931
|
};
|
|
972
932
|
|
|
973
|
-
var css_248z$
|
|
974
|
-
var styles$
|
|
975
|
-
styleInject(css_248z$
|
|
933
|
+
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}";
|
|
934
|
+
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"};
|
|
935
|
+
styleInject(css_248z$C);
|
|
976
936
|
|
|
977
937
|
const Select = (props) => {
|
|
978
|
-
var _a, _b, _c;
|
|
979
938
|
const { id, className, options = [], value, multiple, multipleMaxCountItems = 5, disabled, readOnly, onChange, onKeyDown } = props;
|
|
980
939
|
const [model, setModel] = useState('');
|
|
981
940
|
const [hoverIndex, setHoverIndex] = useState(null);
|
|
@@ -985,9 +944,9 @@ const Select = (props) => {
|
|
|
985
944
|
const getCssClass = () => {
|
|
986
945
|
const cssClasses = [];
|
|
987
946
|
className && cssClasses.push(className);
|
|
988
|
-
disabled && cssClasses.push(styles$
|
|
989
|
-
readOnly && cssClasses.push(styles$
|
|
990
|
-
cssClasses.push(styles$
|
|
947
|
+
disabled && cssClasses.push(styles$C['disabled']);
|
|
948
|
+
readOnly && cssClasses.push(styles$C['readOnly']);
|
|
949
|
+
cssClasses.push(styles$C.select);
|
|
991
950
|
return cssClasses.filter(r => r).join(' ');
|
|
992
951
|
};
|
|
993
952
|
useEffect(() => {
|
|
@@ -1006,10 +965,9 @@ const Select = (props) => {
|
|
|
1006
965
|
}
|
|
1007
966
|
}, [hoverIndex, isShow]);
|
|
1008
967
|
const scrollIntoView = (index) => {
|
|
1009
|
-
|
|
1010
|
-
const htmlListItem = (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.querySelector(`#list-item-${index}`);
|
|
968
|
+
const htmlListItem = selectConainter.current?.querySelector(`#list-item-${index}`);
|
|
1011
969
|
if (htmlListItem) {
|
|
1012
|
-
htmlListItem
|
|
970
|
+
htmlListItem?.scrollIntoView({ block: 'end', behavior: 'smooth' });
|
|
1013
971
|
}
|
|
1014
972
|
};
|
|
1015
973
|
const writeValue = (val) => setModel(val);
|
|
@@ -1110,17 +1068,17 @@ const Select = (props) => {
|
|
|
1110
1068
|
}
|
|
1111
1069
|
}
|
|
1112
1070
|
};
|
|
1113
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
1071
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$C.selectContainer },
|
|
1114
1072
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: (e) => handleOnKeyDown(e) },
|
|
1115
1073
|
React.createElement(React.Fragment, null,
|
|
1116
1074
|
!multiple && renderSingleViewModel(),
|
|
1117
1075
|
multiple &&
|
|
1118
|
-
React.createElement("div", { className: styles$
|
|
1076
|
+
React.createElement("div", { className: styles$C.chipContainer }, renderMultipleViewModel()),
|
|
1119
1077
|
React.createElement(Icon, { className: "ml-auto" },
|
|
1120
1078
|
React.createElement(ChevronDownSolidIcon, null)))),
|
|
1121
1079
|
isShow &&
|
|
1122
1080
|
React.createElement(Portal, { className: 'backdrop-root' },
|
|
1123
|
-
React.createElement("div", { className: styles$
|
|
1081
|
+
React.createElement("div", { className: styles$C.selectMenu, style: { left: selectConainter.current?.getBoundingClientRect().x, top: selectConainter.current?.getBoundingClientRect().y, width: selectConainter.current?.getBoundingClientRect().width } },
|
|
1124
1082
|
React.createElement(List, null, options && options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
1125
1083
|
multiple &&
|
|
1126
1084
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1128,33 +1086,33 @@ const Select = (props) => {
|
|
|
1128
1086
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1129
1087
|
};
|
|
1130
1088
|
|
|
1131
|
-
var css_248z$
|
|
1132
|
-
var styles$
|
|
1133
|
-
styleInject(css_248z$
|
|
1089
|
+
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}";
|
|
1090
|
+
var styles$B = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1091
|
+
styleInject(css_248z$B);
|
|
1134
1092
|
|
|
1135
1093
|
const Textarea = (props) => {
|
|
1136
|
-
const { className, error
|
|
1094
|
+
const { className, error, ...rest } = props;
|
|
1137
1095
|
const getCssClass = () => {
|
|
1138
1096
|
const cssClasses = [];
|
|
1139
|
-
cssClasses.push(styles$
|
|
1097
|
+
cssClasses.push(styles$B.textarea);
|
|
1140
1098
|
className && cssClasses.push(className);
|
|
1141
|
-
error && cssClasses.push(styles$
|
|
1099
|
+
error && cssClasses.push(styles$B['isInvalid']);
|
|
1142
1100
|
return cssClasses.filter(r => r).join(' ');
|
|
1143
1101
|
};
|
|
1144
|
-
return (React.createElement("textarea",
|
|
1102
|
+
return (React.createElement("textarea", { className: getCssClass(), ...rest }));
|
|
1145
1103
|
};
|
|
1146
1104
|
|
|
1147
|
-
var css_248z$
|
|
1148
|
-
var styles$
|
|
1149
|
-
styleInject(css_248z$
|
|
1105
|
+
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}";
|
|
1106
|
+
var styles$A = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1107
|
+
styleInject(css_248z$A);
|
|
1150
1108
|
|
|
1151
1109
|
const FormInput = (props) => {
|
|
1152
1110
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1153
1111
|
const getCssClasses = () => {
|
|
1154
1112
|
const cssClasses = [];
|
|
1155
|
-
cssClasses.push(styles$
|
|
1113
|
+
cssClasses.push(styles$A.formInput);
|
|
1156
1114
|
className && cssClasses.push(className);
|
|
1157
|
-
!isValid && cssClasses.push(styles$
|
|
1115
|
+
!isValid && cssClasses.push(styles$A['isInvalid']);
|
|
1158
1116
|
return cssClasses.filter(css => css).join(' ');
|
|
1159
1117
|
};
|
|
1160
1118
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1175,20 +1133,20 @@ const FormInput = (props) => {
|
|
|
1175
1133
|
type === 'color' ||
|
|
1176
1134
|
type === 'time')
|
|
1177
1135
|
&&
|
|
1178
|
-
React.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
|
|
1136
|
+
React.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 }),
|
|
1179
1137
|
type === 'file' &&
|
|
1180
1138
|
React.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"),
|
|
1181
1139
|
type === 'textarea' &&
|
|
1182
|
-
React.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
|
|
1140
|
+
React.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' } }),
|
|
1183
1141
|
type === 'select' &&
|
|
1184
|
-
React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions
|
|
1142
|
+
React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions?.multiple, onChange: (e) => handleOnChange(e, type, name), options: options }),
|
|
1185
1143
|
type === 'autocomplete' &&
|
|
1186
|
-
React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions
|
|
1144
|
+
React.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 }),
|
|
1187
1145
|
type === 'checkbox' &&
|
|
1188
|
-
React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: (e) => handleOnChange((e
|
|
1146
|
+
React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: (e) => handleOnChange((e?.target).checked, type, name), checked: value }),
|
|
1189
1147
|
type === 'radio' &&
|
|
1190
1148
|
React.createElement(React.Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
|
|
1191
|
-
React.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: (e) => handleOnChange((e
|
|
1149
|
+
React.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 }),
|
|
1192
1150
|
React.createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
|
|
1193
1151
|
};
|
|
1194
1152
|
|
|
@@ -1202,12 +1160,12 @@ const FormHint = (props) => {
|
|
|
1202
1160
|
return (React.createElement("small", { className: getCssClasses() }, children));
|
|
1203
1161
|
};
|
|
1204
1162
|
|
|
1205
|
-
var css_248z$
|
|
1206
|
-
var styles$
|
|
1207
|
-
styleInject(css_248z$
|
|
1163
|
+
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}";
|
|
1164
|
+
var styles$z = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1165
|
+
styleInject(css_248z$z);
|
|
1208
1166
|
|
|
1209
1167
|
const FormError = (props) => {
|
|
1210
|
-
const { className = styles$
|
|
1168
|
+
const { className = styles$z.isInvalid, errors = [] } = props;
|
|
1211
1169
|
return (React.createElement(Fragment, null, errors &&
|
|
1212
1170
|
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
1213
1171
|
};
|
|
@@ -1249,7 +1207,10 @@ class Form extends Component {
|
|
|
1249
1207
|
const newValue = ((control.type === 'date' || control.type === 'datetime-local') &&
|
|
1250
1208
|
control.value &&
|
|
1251
1209
|
isValidDate((control.value))) ? new Date((control.value)).toISOString() : control.value;
|
|
1252
|
-
return (
|
|
1210
|
+
return ({
|
|
1211
|
+
...obj,
|
|
1212
|
+
[f]: newValue
|
|
1213
|
+
});
|
|
1253
1214
|
}, {});
|
|
1254
1215
|
if (this.state.isValid && this.state.isSubmitted) {
|
|
1255
1216
|
this.props.onSubmit && this.props.onSubmit(values);
|
|
@@ -1312,7 +1273,7 @@ class Form extends Component {
|
|
|
1312
1273
|
field.isDirty = true;
|
|
1313
1274
|
field.errors = this.validateField(field.value, field.validators);
|
|
1314
1275
|
field.isValid = field.errors.length === 0;
|
|
1315
|
-
const newControls =
|
|
1276
|
+
const newControls = { ...this.state.controls };
|
|
1316
1277
|
newControls[name] = field;
|
|
1317
1278
|
this.setState({ controls: newControls, isChanged: true }, () => this.handleChange());
|
|
1318
1279
|
}
|
|
@@ -1357,7 +1318,7 @@ class Form extends Component {
|
|
|
1357
1318
|
field.isValid = field.errors.length === 0;
|
|
1358
1319
|
}
|
|
1359
1320
|
this.setState({
|
|
1360
|
-
controls:
|
|
1321
|
+
controls: { ...this.state.controls },
|
|
1361
1322
|
isSubmitted: true,
|
|
1362
1323
|
isValid: Object.keys(this.state.controls).map(f => this.getControl(f).isValid).every(valid => valid === true)
|
|
1363
1324
|
}, () => this.handleChange());
|
|
@@ -1372,7 +1333,7 @@ class Form extends Component {
|
|
|
1372
1333
|
field.isValid = field.errors.length === 0;
|
|
1373
1334
|
}
|
|
1374
1335
|
this.setState({
|
|
1375
|
-
controls:
|
|
1336
|
+
controls: { ...this.state.controls },
|
|
1376
1337
|
isSubmitted: false,
|
|
1377
1338
|
isChanged: false,
|
|
1378
1339
|
isValid: false
|
|
@@ -1519,7 +1480,7 @@ const DateSelect = (props) => {
|
|
|
1519
1480
|
return (React.createElement(Row, { className: getCssClasses() },
|
|
1520
1481
|
React.createElement(Column, null,
|
|
1521
1482
|
React.createElement(FormLabel, null, "Year"),
|
|
1522
|
-
React.createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig
|
|
1483
|
+
React.createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig?.from, to: yearConfig?.to, onChange: (e) => handleOnChange(e, DATEMODE.YEAR) })),
|
|
1523
1484
|
React.createElement(Column, null,
|
|
1524
1485
|
React.createElement(FormLabel, null, "Month"),
|
|
1525
1486
|
React.createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: (e) => handleOnChange(e, DATEMODE.MONTH) })),
|
|
@@ -1538,33 +1499,33 @@ const DateSelect = (props) => {
|
|
|
1538
1499
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1539
1500
|
// };
|
|
1540
1501
|
|
|
1541
|
-
var css_248z$
|
|
1542
|
-
var styles$
|
|
1543
|
-
styleInject(css_248z$
|
|
1502
|
+
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}";
|
|
1503
|
+
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"};
|
|
1504
|
+
styleInject(css_248z$y);
|
|
1544
1505
|
|
|
1545
1506
|
const Drawer = (props) => {
|
|
1546
|
-
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop
|
|
1507
|
+
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop, ...rest } = props;
|
|
1547
1508
|
useEffect(() => {
|
|
1548
|
-
document.body.classList.add(styles$
|
|
1509
|
+
document.body.classList.add(styles$y.drawerOpen);
|
|
1549
1510
|
return () => {
|
|
1550
|
-
document.body.classList.remove(styles$
|
|
1511
|
+
document.body.classList.remove(styles$y.drawerOpen);
|
|
1551
1512
|
};
|
|
1552
1513
|
}, []);
|
|
1553
1514
|
const handleClickBackdrop = () => {
|
|
1554
1515
|
onClickBackdrop && onClickBackdrop();
|
|
1555
1516
|
};
|
|
1556
1517
|
return (React.createElement(Portal, { className: 'drawer-root', target: target },
|
|
1557
|
-
React.createElement(DrawerContent,
|
|
1518
|
+
React.createElement(DrawerContent, { className: className, position: position, permanent: permanent, shadow: shadow, ...rest }, children),
|
|
1558
1519
|
!permanent && React.createElement(Backdrop, { onClick: handleClickBackdrop })));
|
|
1559
1520
|
};
|
|
1560
1521
|
const DrawerContent = (props) => {
|
|
1561
|
-
const { children, className, position = 'left', permanent = false, shadow
|
|
1522
|
+
const { children, className, position = 'left', permanent = false, shadow, ...rest } = props;
|
|
1562
1523
|
const getCssClasses = () => {
|
|
1563
1524
|
const cssClasses = [];
|
|
1564
|
-
cssClasses.push(styles$
|
|
1565
|
-
shadow && cssClasses.push(styles$
|
|
1566
|
-
!!permanent && cssClasses.push(styles$
|
|
1567
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1525
|
+
cssClasses.push(styles$y.drawer);
|
|
1526
|
+
shadow && cssClasses.push(styles$y.shadow);
|
|
1527
|
+
!!permanent && cssClasses.push(styles$y['permanent']);
|
|
1528
|
+
position === 'left' ? cssClasses.push(styles$y['left']) : cssClasses.push(styles$y['right']);
|
|
1568
1529
|
className && cssClasses.push(className);
|
|
1569
1530
|
return cssClasses.filter(css => css).join(' ');
|
|
1570
1531
|
};
|
|
@@ -1575,12 +1536,12 @@ const DrawerContent = (props) => {
|
|
|
1575
1536
|
const getStyles = () => {
|
|
1576
1537
|
return !permanent ? positionStyles[position] : undefined;
|
|
1577
1538
|
};
|
|
1578
|
-
return (React.createElement("div",
|
|
1539
|
+
return (React.createElement("div", { className: getCssClasses(), style: getStyles(), ...rest }, children));
|
|
1579
1540
|
};
|
|
1580
1541
|
|
|
1581
|
-
var css_248z$
|
|
1582
|
-
var styles$
|
|
1583
|
-
styleInject(css_248z$
|
|
1542
|
+
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}";
|
|
1543
|
+
var styles$x = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1544
|
+
styleInject(css_248z$x);
|
|
1584
1545
|
|
|
1585
1546
|
const MenuBody = (props) => {
|
|
1586
1547
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1611,8 +1572,8 @@ const MenuBody = (props) => {
|
|
|
1611
1572
|
}, [menuBodyRef]);
|
|
1612
1573
|
const getCssClasses = () => {
|
|
1613
1574
|
const cssClasses = [];
|
|
1614
|
-
cssClasses.push(styles$
|
|
1615
|
-
shadow && cssClasses.push(styles$
|
|
1575
|
+
cssClasses.push(styles$x.menuBody);
|
|
1576
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
1616
1577
|
className && cssClasses.push(className);
|
|
1617
1578
|
return cssClasses.filter(css => css).join(' ');
|
|
1618
1579
|
};
|
|
@@ -1626,7 +1587,7 @@ const MenuBody = (props) => {
|
|
|
1626
1587
|
};
|
|
1627
1588
|
|
|
1628
1589
|
const Menu = (props) => {
|
|
1629
|
-
const { toggle, children, className, open, menuPosition, onClickBackdrop
|
|
1590
|
+
const { toggle, children, className, open, menuPosition, onClickBackdrop, ...rest } = props;
|
|
1630
1591
|
const menuContainer = useRef(null);
|
|
1631
1592
|
const toggleContainerRef = useRef(null);
|
|
1632
1593
|
const getCssClasses = () => {
|
|
@@ -1637,14 +1598,14 @@ const Menu = (props) => {
|
|
|
1637
1598
|
const handleClickBackdrop = () => {
|
|
1638
1599
|
onClickBackdrop && onClickBackdrop();
|
|
1639
1600
|
};
|
|
1640
|
-
return (React.createElement("div",
|
|
1601
|
+
return (React.createElement("div", { ref: menuContainer, className: getCssClasses(), ...rest },
|
|
1641
1602
|
React.createElement("div", { ref: toggleContainerRef }, toggle),
|
|
1642
1603
|
open &&
|
|
1643
1604
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1644
1605
|
};
|
|
1645
1606
|
|
|
1646
1607
|
const MenuItem = (props) => {
|
|
1647
|
-
const { children, onClick
|
|
1608
|
+
const { children, onClick, ...rest } = props;
|
|
1648
1609
|
const getCssClasses = () => {
|
|
1649
1610
|
const cssClasses = [];
|
|
1650
1611
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -1653,30 +1614,30 @@ const MenuItem = (props) => {
|
|
|
1653
1614
|
e.stopPropagation();
|
|
1654
1615
|
onClick && onClick(e);
|
|
1655
1616
|
};
|
|
1656
|
-
return (React.createElement(ListItem,
|
|
1617
|
+
return (React.createElement(ListItem, { className: getCssClasses(), onClick: handleClick, ...rest }, children));
|
|
1657
1618
|
};
|
|
1658
1619
|
|
|
1659
1620
|
const MenuToggle = ({ children }) => {
|
|
1660
1621
|
return children;
|
|
1661
1622
|
};
|
|
1662
1623
|
|
|
1663
|
-
var css_248z$
|
|
1664
|
-
var styles$
|
|
1665
|
-
styleInject(css_248z$
|
|
1624
|
+
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}";
|
|
1625
|
+
var styles$w = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1626
|
+
styleInject(css_248z$w);
|
|
1666
1627
|
|
|
1667
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1628
|
+
const MenuDivider = () => React.createElement("div", { className: styles$w.menuItemDivider });
|
|
1668
1629
|
|
|
1669
|
-
var css_248z$
|
|
1670
|
-
var styles$
|
|
1671
|
-
styleInject(css_248z$
|
|
1630
|
+
var css_248z$v = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px;\n}";
|
|
1631
|
+
var styles$v = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1632
|
+
styleInject(css_248z$v);
|
|
1672
1633
|
|
|
1673
1634
|
const ExpansionPanelContent = ({ children }) => {
|
|
1674
|
-
return (React.createElement("div", { className: styles$
|
|
1635
|
+
return (React.createElement("div", { className: styles$v.expansionPanelContent }, children));
|
|
1675
1636
|
};
|
|
1676
1637
|
|
|
1677
|
-
var css_248z$
|
|
1678
|
-
var styles$
|
|
1679
|
-
styleInject(css_248z$
|
|
1638
|
+
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}";
|
|
1639
|
+
var styles$u = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1640
|
+
styleInject(css_248z$u);
|
|
1680
1641
|
|
|
1681
1642
|
const ExpansionPanelHeader = (props) => {
|
|
1682
1643
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1684,15 +1645,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1684
1645
|
e.stopPropagation();
|
|
1685
1646
|
onClick && onClick(e);
|
|
1686
1647
|
};
|
|
1687
|
-
return (React.createElement("div", { className: styles$
|
|
1648
|
+
return (React.createElement("div", { className: styles$u.expansionPanelHeader, onClick: handleClick },
|
|
1688
1649
|
children,
|
|
1689
1650
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1690
1651
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1691
1652
|
};
|
|
1692
1653
|
|
|
1693
|
-
var css_248z$
|
|
1694
|
-
var styles$
|
|
1695
|
-
styleInject(css_248z$
|
|
1654
|
+
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}";
|
|
1655
|
+
var styles$t = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1656
|
+
styleInject(css_248z$t);
|
|
1696
1657
|
|
|
1697
1658
|
const ExpansionPanel = (props) => {
|
|
1698
1659
|
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
@@ -1702,11 +1663,11 @@ const ExpansionPanel = (props) => {
|
|
|
1702
1663
|
}, [isExpanded]);
|
|
1703
1664
|
const getCssClasses = () => {
|
|
1704
1665
|
const cssClasses = [];
|
|
1705
|
-
cssClasses.push(styles$
|
|
1666
|
+
cssClasses.push(styles$t.expansionPanel);
|
|
1706
1667
|
if (_isExpanded) {
|
|
1707
|
-
cssClasses.push(styles$
|
|
1668
|
+
cssClasses.push(styles$t.isExpanded);
|
|
1708
1669
|
}
|
|
1709
|
-
shadow && cssClasses.push(styles$
|
|
1670
|
+
shadow && cssClasses.push(styles$t.shadow);
|
|
1710
1671
|
return cssClasses.filter(css => css).join(' ');
|
|
1711
1672
|
};
|
|
1712
1673
|
const handleClickHeader = (event) => {
|
|
@@ -1719,17 +1680,17 @@ const ExpansionPanel = (props) => {
|
|
|
1719
1680
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1720
1681
|
};
|
|
1721
1682
|
|
|
1722
|
-
var css_248z$
|
|
1723
|
-
var styles$
|
|
1724
|
-
styleInject(css_248z$
|
|
1683
|
+
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}";
|
|
1684
|
+
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"};
|
|
1685
|
+
styleInject(css_248z$s);
|
|
1725
1686
|
|
|
1726
1687
|
const FloatingActionButton = (props) => {
|
|
1727
1688
|
const { className, icon, color = COLOR.primary, fixed, position = 'rightBottom', size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1728
1689
|
const getCssClasses = () => {
|
|
1729
1690
|
const cssClasses = [];
|
|
1730
|
-
cssClasses.push(styles$
|
|
1731
|
-
fixed && cssClasses.push(styles$
|
|
1732
|
-
position && fixed && cssClasses.push(styles$
|
|
1691
|
+
cssClasses.push(styles$s.fab);
|
|
1692
|
+
fixed && cssClasses.push(styles$s.fixed);
|
|
1693
|
+
position && fixed && cssClasses.push(styles$s[position]);
|
|
1733
1694
|
className && cssClasses.push(className);
|
|
1734
1695
|
return cssClasses.filter(css => css).join(' ');
|
|
1735
1696
|
};
|
|
@@ -1740,43 +1701,42 @@ const FloatingActionButton = (props) => {
|
|
|
1740
1701
|
return (React.createElement(IconButton, { className: getCssClasses(), color: color, size: size, isActive: isActive, disabled: disabled, icon: icon, variant: VARIANT.contained, onClick: handleClick }));
|
|
1741
1702
|
};
|
|
1742
1703
|
|
|
1743
|
-
var css_248z$
|
|
1744
|
-
var styles$
|
|
1745
|
-
styleInject(css_248z$
|
|
1704
|
+
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}";
|
|
1705
|
+
var styles$r = {"link":"Link-module_link__YlJQl"};
|
|
1706
|
+
styleInject(css_248z$r);
|
|
1746
1707
|
|
|
1747
1708
|
const Link = (props) => {
|
|
1748
|
-
const { href = '#', className, target, children
|
|
1709
|
+
const { href = '#', className, target, children, ...rest } = props;
|
|
1749
1710
|
const [status, setStatus] = useState(STATUS.NORMAL);
|
|
1750
|
-
const [cssClassName] = useCssClasses([styles$
|
|
1711
|
+
const [cssClassName] = useCssClasses([styles$r.link, className, status]);
|
|
1751
1712
|
const onMouseEnter = () => {
|
|
1752
1713
|
setStatus(STATUS.HOVERED);
|
|
1753
1714
|
};
|
|
1754
1715
|
const onMouseLeave = () => {
|
|
1755
1716
|
setStatus(STATUS.NORMAL);
|
|
1756
1717
|
};
|
|
1757
|
-
return (React.createElement("a",
|
|
1718
|
+
return (React.createElement("a", { className: cssClassName, href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, ...rest }, children));
|
|
1758
1719
|
};
|
|
1759
1720
|
|
|
1760
|
-
var css_248z$
|
|
1761
|
-
var styles$
|
|
1762
|
-
styleInject(css_248z$
|
|
1721
|
+
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}";
|
|
1722
|
+
var styles$q = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","isFixed":"LoadingIndicator-module_isFixed__WCFNG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1723
|
+
styleInject(css_248z$q);
|
|
1763
1724
|
|
|
1764
|
-
const LoadingIndicator = (
|
|
1765
|
-
var rest = __rest(_a, []);
|
|
1725
|
+
const LoadingIndicator = ({ ...rest }) => {
|
|
1766
1726
|
const getCssClasses = () => {
|
|
1767
1727
|
const cssClasses = [];
|
|
1768
|
-
cssClasses.push(styles$
|
|
1728
|
+
cssClasses.push(styles$q.loadingIndicator);
|
|
1769
1729
|
return cssClasses.filter(css => css).join(' ');
|
|
1770
1730
|
};
|
|
1771
|
-
return (React.createElement("div",
|
|
1731
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest },
|
|
1772
1732
|
React.createElement(SpinnerSolidIcon, null)));
|
|
1773
1733
|
};
|
|
1774
1734
|
|
|
1775
1735
|
const LoadingIndicatorContainer = ({ children, isFixed }) => {
|
|
1776
1736
|
const getCssClasses = () => {
|
|
1777
1737
|
const cssClasses = [];
|
|
1778
|
-
cssClasses.push(styles$
|
|
1779
|
-
isFixed && cssClasses.push(styles$
|
|
1738
|
+
cssClasses.push(styles$q.loadingIndicatorContainer);
|
|
1739
|
+
isFixed && cssClasses.push(styles$q.isFixed);
|
|
1780
1740
|
return cssClasses.filter(css => css).join(' ');
|
|
1781
1741
|
};
|
|
1782
1742
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1828,9 +1788,8 @@ class LoadingIndicatorService {
|
|
|
1828
1788
|
React.createElement(LoadingIndicator, null)));
|
|
1829
1789
|
}
|
|
1830
1790
|
hide() {
|
|
1831
|
-
var _a;
|
|
1832
1791
|
if (this.container) {
|
|
1833
|
-
|
|
1792
|
+
this.root?.unmount();
|
|
1834
1793
|
document.body.removeChild(this.container);
|
|
1835
1794
|
this.container = undefined;
|
|
1836
1795
|
this.handler && clearTimeout(this.handler);
|
|
@@ -1839,45 +1798,45 @@ class LoadingIndicatorService {
|
|
|
1839
1798
|
}
|
|
1840
1799
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1841
1800
|
|
|
1842
|
-
var css_248z$
|
|
1843
|
-
var styles$
|
|
1844
|
-
styleInject(css_248z$
|
|
1801
|
+
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}";
|
|
1802
|
+
var styles$p = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-","modalTitle":"ModalHeader-module_modalTitle__2xShH"};
|
|
1803
|
+
styleInject(css_248z$p);
|
|
1845
1804
|
|
|
1846
1805
|
const ModalHeader = (props) => {
|
|
1847
|
-
const { children, isDismissable = false, onClose
|
|
1806
|
+
const { children, isDismissable = false, onClose, ...rest } = props;
|
|
1848
1807
|
const handleClick = () => {
|
|
1849
1808
|
onClose && onClose();
|
|
1850
1809
|
};
|
|
1851
|
-
return (React.createElement("div",
|
|
1852
|
-
React.createElement("h5", { className: styles$
|
|
1810
|
+
return (React.createElement("div", { className: styles$p.modalHeader, ...rest },
|
|
1811
|
+
React.createElement("h5", { className: styles$p.modalTitle }, children),
|
|
1853
1812
|
isDismissable &&
|
|
1854
1813
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
1855
1814
|
};
|
|
1856
1815
|
|
|
1857
|
-
var css_248z$
|
|
1858
|
-
var styles$
|
|
1859
|
-
styleInject(css_248z$
|
|
1816
|
+
var css_248z$o = ".ModalBody-module_modalBody__D-gk2 {\n position: relative;\n flex: 1 1 auto;\n padding: 1rem;\n}";
|
|
1817
|
+
var styles$o = {"modalBody":"ModalBody-module_modalBody__D-gk2"};
|
|
1818
|
+
styleInject(css_248z$o);
|
|
1860
1819
|
|
|
1861
|
-
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$
|
|
1820
|
+
const ModalBody = ({ children }) => (React.createElement("div", { className: styles$o.modalBody }, children));
|
|
1862
1821
|
|
|
1863
|
-
var css_248z$
|
|
1864
|
-
var styles$
|
|
1865
|
-
styleInject(css_248z$
|
|
1822
|
+
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}";
|
|
1823
|
+
var styles$n = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1824
|
+
styleInject(css_248z$n);
|
|
1866
1825
|
|
|
1867
|
-
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$
|
|
1826
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: styles$n.modalFooter }, children));
|
|
1868
1827
|
|
|
1869
|
-
var css_248z$
|
|
1870
|
-
var styles$
|
|
1871
|
-
styleInject(css_248z$
|
|
1828
|
+
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}";
|
|
1829
|
+
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"};
|
|
1830
|
+
styleInject(css_248z$m);
|
|
1872
1831
|
|
|
1873
1832
|
const Modal = (props) => {
|
|
1874
1833
|
const { target = document.body, className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1875
1834
|
const getCssClass = () => {
|
|
1876
1835
|
const cssClasses = [];
|
|
1877
|
-
cssClasses.push(styles$
|
|
1878
|
-
cssClasses.push(styles$
|
|
1879
|
-
fullScreen && cssClasses.push(styles$
|
|
1880
|
-
size && cssClasses.push(styles$
|
|
1836
|
+
cssClasses.push(styles$m.modalDialog);
|
|
1837
|
+
cssClasses.push(styles$m.modalDialogCentered);
|
|
1838
|
+
fullScreen && cssClasses.push(styles$m.fullscreen);
|
|
1839
|
+
size && cssClasses.push(styles$m[size]);
|
|
1881
1840
|
className && cssClasses.push(className);
|
|
1882
1841
|
return cssClasses.filter(r => r).join(' ');
|
|
1883
1842
|
};
|
|
@@ -1892,9 +1851,9 @@ const Modal = (props) => {
|
|
|
1892
1851
|
};
|
|
1893
1852
|
return (React.createElement(React.Fragment, null,
|
|
1894
1853
|
React.createElement(Portal, { className: 'modal-root', target: target },
|
|
1895
|
-
React.createElement("div", { className: styles$
|
|
1854
|
+
React.createElement("div", { className: styles$m.modal },
|
|
1896
1855
|
React.createElement("div", { className: getCssClass() },
|
|
1897
|
-
React.createElement("div", { className: styles$
|
|
1856
|
+
React.createElement("div", { className: styles$m.modalContent },
|
|
1898
1857
|
header &&
|
|
1899
1858
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1900
1859
|
React.createElement(ModalBody, null, children),
|
|
@@ -1923,15 +1882,14 @@ const GlobalModal = ({ title, description, formControls, onOk, onChange, onCance
|
|
|
1923
1882
|
// workaround for getDerivedStateFromProps
|
|
1924
1883
|
const [myControls, setMyControls] = useState(null);
|
|
1925
1884
|
useEffect(() => {
|
|
1926
|
-
setMyControls(
|
|
1885
|
+
setMyControls({ ...formControls });
|
|
1927
1886
|
}, []);
|
|
1928
1887
|
// end
|
|
1929
1888
|
const modalType = formControls ? MODALTYPE.FORM : MODALTYPE.BASIC;
|
|
1930
1889
|
const myForm = useRef(null);
|
|
1931
1890
|
const handleOk = () => {
|
|
1932
|
-
var _a;
|
|
1933
1891
|
if (modalType === MODALTYPE.FORM) {
|
|
1934
|
-
|
|
1892
|
+
myForm?.current?.handleFormSubmit();
|
|
1935
1893
|
}
|
|
1936
1894
|
else {
|
|
1937
1895
|
onOk && onOk();
|
|
@@ -2002,9 +1960,8 @@ class ModalService {
|
|
|
2002
1960
|
});
|
|
2003
1961
|
}
|
|
2004
1962
|
hide() {
|
|
2005
|
-
var _a;
|
|
2006
1963
|
if (this.container) {
|
|
2007
|
-
|
|
1964
|
+
this.root?.unmount();
|
|
2008
1965
|
// document.body.removeChild(this.container);
|
|
2009
1966
|
this.container = undefined;
|
|
2010
1967
|
}
|
|
@@ -2038,9 +1995,9 @@ const NumberSelect = (props) => {
|
|
|
2038
1995
|
return (React.createElement(Select, { id: id, name: name, className: getCssClasses(), options: numberOptions, onChange: (e) => handleOnChange(parseInt(e)), disabled: disabled, value: newValue.toString() }));
|
|
2039
1996
|
};
|
|
2040
1997
|
|
|
2041
|
-
var css_248z$
|
|
2042
|
-
var styles$
|
|
2043
|
-
styleInject(css_248z$
|
|
1998
|
+
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}";
|
|
1999
|
+
var styles$l = {"tooltipContainer":"Tooltip-module_tooltipContainer__9ZWx3","tooltip":"Tooltip-module_tooltip__x5HOu","arrow":"Tooltip-module_arrow__B6lfe"};
|
|
2000
|
+
styleInject(css_248z$l);
|
|
2044
2001
|
|
|
2045
2002
|
const Tooltip = (props) => {
|
|
2046
2003
|
const { children, text, placement = 'bottom' } = props;
|
|
@@ -2068,22 +2025,22 @@ const Tooltip = (props) => {
|
|
|
2068
2025
|
setShow(false);
|
|
2069
2026
|
};
|
|
2070
2027
|
return (React.createElement(React.Fragment, null,
|
|
2071
|
-
React.createElement("div", { className: styles$
|
|
2028
|
+
React.createElement("div", { className: styles$l.tooltipContainer, ref: refChild, id: "tooltip-container" }, cloneElement(children, {
|
|
2072
2029
|
onMouseOver: handleMouseOver,
|
|
2073
2030
|
onMouseLeave: handleMouseLeave,
|
|
2074
2031
|
})),
|
|
2075
2032
|
show && text &&
|
|
2076
|
-
React.createElement("div", { className: styles$
|
|
2033
|
+
React.createElement("div", { className: styles$l.tooltip, ref: refTooltip, id: "tooltip" },
|
|
2077
2034
|
text,
|
|
2078
2035
|
React.createElement("div", { id: "arrow", "data-popper-arrow": true }))));
|
|
2079
2036
|
};
|
|
2080
2037
|
|
|
2081
|
-
var css_248z$
|
|
2082
|
-
var styles$
|
|
2083
|
-
styleInject(css_248z$
|
|
2038
|
+
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}";
|
|
2039
|
+
var styles$k = {"progressBarContainer":"ProgressBar-module_progressBarContainer__vtbBw","progressBar":"ProgressBar-module_progressBar__hr8I8","indeterminate":"ProgressBar-module_indeterminate__WcQdD","indeterminateAnimation":"ProgressBar-module_indeterminateAnimation__SlBFt"};
|
|
2040
|
+
styleInject(css_248z$k);
|
|
2084
2041
|
|
|
2085
2042
|
const ProgressBar = (props) => {
|
|
2086
|
-
const { className, color = COLOR.primary, value, indeterminate
|
|
2043
|
+
const { className, color = COLOR.primary, value, indeterminate, ...rest } = props;
|
|
2087
2044
|
const [model, setModel] = useState();
|
|
2088
2045
|
useEffect(() => {
|
|
2089
2046
|
document.body.style.setProperty('--progress-bar-bg', `var(--${color})`);
|
|
@@ -2100,14 +2057,14 @@ const ProgressBar = (props) => {
|
|
|
2100
2057
|
}, [value]);
|
|
2101
2058
|
const getCssClasses = () => {
|
|
2102
2059
|
const cssClasses = [];
|
|
2103
|
-
cssClasses.push(styles$
|
|
2060
|
+
cssClasses.push(styles$k.progressBarContainer);
|
|
2104
2061
|
className && cssClasses.push(className);
|
|
2105
2062
|
return cssClasses.filter(r => r).join(' ');
|
|
2106
2063
|
};
|
|
2107
2064
|
const getCssClassesBar = () => {
|
|
2108
2065
|
const cssClasses = [];
|
|
2109
|
-
cssClasses.push(styles$
|
|
2110
|
-
indeterminate && cssClasses.push(styles$
|
|
2066
|
+
cssClasses.push(styles$k.progressBar);
|
|
2067
|
+
indeterminate && cssClasses.push(styles$k['indeterminate']);
|
|
2111
2068
|
return cssClasses.filter(r => r).join(' ');
|
|
2112
2069
|
};
|
|
2113
2070
|
const getStyle = () => {
|
|
@@ -2117,8 +2074,8 @@ const ProgressBar = (props) => {
|
|
|
2117
2074
|
}
|
|
2118
2075
|
return `${width}%`;
|
|
2119
2076
|
};
|
|
2120
|
-
return (React.createElement(Tooltip, { text: !indeterminate ? model
|
|
2121
|
-
React.createElement("div",
|
|
2077
|
+
return (React.createElement(Tooltip, { text: !indeterminate ? model?.toString() : '' },
|
|
2078
|
+
React.createElement("div", { className: getCssClasses(), ...rest },
|
|
2122
2079
|
React.createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2123
2080
|
};
|
|
2124
2081
|
|
|
@@ -2136,7 +2093,7 @@ class SidebarItemModel {
|
|
|
2136
2093
|
}
|
|
2137
2094
|
|
|
2138
2095
|
const Sidebar = (props) => {
|
|
2139
|
-
const { className, items, currentUrl, onItemClicked
|
|
2096
|
+
const { className, items, currentUrl, onItemClicked, ...rest } = props;
|
|
2140
2097
|
const [menuItems, setMenuItems] = useState([]);
|
|
2141
2098
|
useEffect(() => {
|
|
2142
2099
|
if (items && items.length > 0) {
|
|
@@ -2185,7 +2142,7 @@ const Sidebar = (props) => {
|
|
|
2185
2142
|
const handleClickSubItem = (itemPath, subItemPath, e) => {
|
|
2186
2143
|
navigate(e, `${itemPath}/${subItemPath}`);
|
|
2187
2144
|
};
|
|
2188
|
-
return (React.createElement("nav",
|
|
2145
|
+
return (React.createElement("nav", { className: getCssClasses(), ...rest },
|
|
2189
2146
|
React.createElement(List, null, menuItems.map(item => (React.createElement(React.Fragment, { key: item.id },
|
|
2190
2147
|
React.createElement(ListItem, { active: isMenuItemActive(item.path), onClick: (e) => handleClickItem(item, e) },
|
|
2191
2148
|
React.createElement(ListItemText, { primary: React.createElement(React.Fragment, null,
|
|
@@ -2199,25 +2156,25 @@ const Sidebar = (props) => {
|
|
|
2199
2156
|
!item.isCollapsed && item.items && item.items.length > 0 && (React.createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React.createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
2200
2157
|
};
|
|
2201
2158
|
|
|
2202
|
-
var css_248z$
|
|
2203
|
-
var styles$
|
|
2204
|
-
styleInject(css_248z$
|
|
2159
|
+
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}";
|
|
2160
|
+
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"};
|
|
2161
|
+
styleInject(css_248z$j);
|
|
2205
2162
|
|
|
2206
2163
|
const Snackbar = (props) => {
|
|
2207
|
-
const { children, color = COLOR.dark, actionText = 'ok', onOk
|
|
2164
|
+
const { children, color = COLOR.dark, actionText = 'ok', onOk, ...rest } = props;
|
|
2208
2165
|
const getCssClasses = () => {
|
|
2209
2166
|
const cssClasses = [];
|
|
2210
|
-
cssClasses.push(styles$
|
|
2167
|
+
cssClasses.push(styles$j.snackbar);
|
|
2211
2168
|
cssClasses.push(`shadow-lg`);
|
|
2212
|
-
cssClasses.push(styles$
|
|
2169
|
+
cssClasses.push(styles$j[color]);
|
|
2213
2170
|
return cssClasses.filter(css => css).join(' ');
|
|
2214
2171
|
};
|
|
2215
2172
|
const handleClickAction = (e) => {
|
|
2216
2173
|
onOk && onOk(e);
|
|
2217
2174
|
};
|
|
2218
|
-
return (React.createElement("div",
|
|
2219
|
-
React.createElement("div", { className: styles$
|
|
2220
|
-
React.createElement("div", { className: styles$
|
|
2175
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest },
|
|
2176
|
+
React.createElement("div", { className: styles$j.text }, children),
|
|
2177
|
+
React.createElement("div", { className: styles$j.action + ' text-accent', onClick: handleClickAction },
|
|
2221
2178
|
React.createElement("span", null, actionText))));
|
|
2222
2179
|
};
|
|
2223
2180
|
|
|
@@ -2246,9 +2203,8 @@ class SnackbarService {
|
|
|
2246
2203
|
});
|
|
2247
2204
|
}
|
|
2248
2205
|
hide() {
|
|
2249
|
-
var _a;
|
|
2250
2206
|
if (this.container) {
|
|
2251
|
-
|
|
2207
|
+
this.root?.unmount();
|
|
2252
2208
|
document.body.removeChild(this.container);
|
|
2253
2209
|
this.container = undefined;
|
|
2254
2210
|
this.handler && clearTimeout(this.handler);
|
|
@@ -2257,29 +2213,29 @@ class SnackbarService {
|
|
|
2257
2213
|
}
|
|
2258
2214
|
const snackbarService = new SnackbarService();
|
|
2259
2215
|
|
|
2260
|
-
var css_248z$
|
|
2261
|
-
var styles$
|
|
2262
|
-
styleInject(css_248z$
|
|
2216
|
+
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}";
|
|
2217
|
+
var styles$i = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
2218
|
+
styleInject(css_248z$i);
|
|
2263
2219
|
|
|
2264
2220
|
const SpeedDialActions = (props) => {
|
|
2265
2221
|
const { children } = props;
|
|
2266
2222
|
const getCssClasses = () => {
|
|
2267
2223
|
const cssClasses = [];
|
|
2268
|
-
cssClasses.push(styles$
|
|
2224
|
+
cssClasses.push(styles$i.speedDialActions);
|
|
2269
2225
|
return cssClasses.filter(css => css).join(' ');
|
|
2270
2226
|
};
|
|
2271
2227
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
2272
2228
|
};
|
|
2273
2229
|
|
|
2274
|
-
var css_248z$
|
|
2275
|
-
var styles$
|
|
2276
|
-
styleInject(css_248z$
|
|
2230
|
+
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}";
|
|
2231
|
+
var styles$h = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2232
|
+
styleInject(css_248z$h);
|
|
2277
2233
|
|
|
2278
2234
|
const SpeedDial = (props) => {
|
|
2279
|
-
const { children, className, open, onOpen, onClose
|
|
2235
|
+
const { children, className, open, onOpen, onClose, ...rest } = props;
|
|
2280
2236
|
const getCssClasses = () => {
|
|
2281
2237
|
const cssClasses = [];
|
|
2282
|
-
cssClasses.push(styles$
|
|
2238
|
+
cssClasses.push(styles$h.speedDial);
|
|
2283
2239
|
className && cssClasses.push(className);
|
|
2284
2240
|
return cssClasses.filter(css => css).join(' ');
|
|
2285
2241
|
};
|
|
@@ -2291,22 +2247,22 @@ const SpeedDial = (props) => {
|
|
|
2291
2247
|
onOpen && onOpen(e);
|
|
2292
2248
|
}
|
|
2293
2249
|
};
|
|
2294
|
-
return (React.createElement("div",
|
|
2250
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest },
|
|
2295
2251
|
React.createElement("div", { style: { 'transform': open ? 'rotate(45deg)' : undefined } },
|
|
2296
2252
|
React.createElement(FloatingActionButton, { icon: React.createElement(PlusSolidIcon, null), onClick: handleClick })),
|
|
2297
2253
|
open &&
|
|
2298
2254
|
React.createElement(SpeedDialActions, null, children)));
|
|
2299
2255
|
};
|
|
2300
2256
|
|
|
2301
|
-
var css_248z$
|
|
2302
|
-
var styles$
|
|
2303
|
-
styleInject(css_248z$
|
|
2257
|
+
var css_248z$g = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px;\n}";
|
|
2258
|
+
var styles$g = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2259
|
+
styleInject(css_248z$g);
|
|
2304
2260
|
|
|
2305
2261
|
const SpeedDialAction = (props) => {
|
|
2306
2262
|
const { icon, color = COLOR.light, onClick, className } = props;
|
|
2307
2263
|
const getCssClasses = () => {
|
|
2308
2264
|
const cssClasses = [];
|
|
2309
|
-
cssClasses.push(styles$
|
|
2265
|
+
cssClasses.push(styles$g.speedDialAction);
|
|
2310
2266
|
className && cssClasses.push(className);
|
|
2311
2267
|
return cssClasses.filter(css => css).join(' ');
|
|
2312
2268
|
};
|
|
@@ -2314,24 +2270,24 @@ const SpeedDialAction = (props) => {
|
|
|
2314
2270
|
};
|
|
2315
2271
|
|
|
2316
2272
|
const SpeedDialIcon = (props) => {
|
|
2317
|
-
const { children, className
|
|
2273
|
+
const { children, className, ...rest } = props;
|
|
2318
2274
|
const getCssClasses = () => {
|
|
2319
2275
|
const cssClasses = [];
|
|
2320
2276
|
className && cssClasses.push(className);
|
|
2321
2277
|
return cssClasses.filter(css => css).join(' ');
|
|
2322
2278
|
};
|
|
2323
|
-
return (React.createElement(Icon,
|
|
2279
|
+
return (React.createElement(Icon, { className: getCssClasses(), ...rest }, children));
|
|
2324
2280
|
};
|
|
2325
2281
|
|
|
2326
|
-
var css_248z$
|
|
2327
|
-
var styles$
|
|
2328
|
-
styleInject(css_248z$
|
|
2282
|
+
var css_248z$f = ".StepperActions-module_stepperActions__hBUkh {\n display: flex;\n}";
|
|
2283
|
+
var styles$f = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2284
|
+
styleInject(css_248z$f);
|
|
2329
2285
|
|
|
2330
2286
|
const StepperActions = (props) => {
|
|
2331
2287
|
const { className, showDoneButton, showResetButton, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2332
2288
|
const getCssClasses = () => {
|
|
2333
2289
|
const cssClasses = [];
|
|
2334
|
-
cssClasses.push(styles$
|
|
2290
|
+
cssClasses.push(styles$f.stepperActions);
|
|
2335
2291
|
className && cssClasses.push(className);
|
|
2336
2292
|
return cssClasses.filter(css => css).join(' ');
|
|
2337
2293
|
};
|
|
@@ -2352,34 +2308,51 @@ const StepPanel = (props) => {
|
|
|
2352
2308
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
2353
2309
|
};
|
|
2354
2310
|
|
|
2355
|
-
var css_248z$
|
|
2356
|
-
var styles$
|
|
2357
|
-
styleInject(css_248z$
|
|
2311
|
+
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}";
|
|
2312
|
+
var styles$e = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2313
|
+
styleInject(css_248z$e);
|
|
2358
2314
|
|
|
2359
2315
|
const StepConnector = (props) => {
|
|
2360
2316
|
const { isActive, isHorizontal = true } = props;
|
|
2361
2317
|
const getCssClassesConnector = () => {
|
|
2362
2318
|
const cssClasses = [];
|
|
2363
|
-
cssClasses.push(styles$
|
|
2319
|
+
cssClasses.push(styles$e.stepConnector);
|
|
2364
2320
|
return cssClasses.filter(css => css).join(' ');
|
|
2365
2321
|
};
|
|
2366
2322
|
const getCssClassesLine = () => {
|
|
2367
2323
|
const cssClasses = [];
|
|
2368
|
-
cssClasses.push(styles$
|
|
2369
|
-
isActive && cssClasses.push(styles$
|
|
2370
|
-
isHorizontal && cssClasses.push(styles$
|
|
2324
|
+
cssClasses.push(styles$e.stepConnectorLine);
|
|
2325
|
+
isActive && cssClasses.push(styles$e['isActive']);
|
|
2326
|
+
isHorizontal && cssClasses.push(styles$e.stepConnectorLineHorizontal);
|
|
2371
2327
|
return cssClasses.filter(css => css).join(' ');
|
|
2372
2328
|
};
|
|
2373
2329
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
2374
2330
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
2375
2331
|
};
|
|
2376
2332
|
|
|
2377
|
-
var css_248z$
|
|
2378
|
-
var styles$
|
|
2333
|
+
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}";
|
|
2334
|
+
var styles$d = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2335
|
+
styleInject(css_248z$d);
|
|
2336
|
+
|
|
2337
|
+
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}";
|
|
2338
|
+
var styles$c = {"dot":"Dot-module_dot__w59yb","isActive":"Dot-module_isActive__V74RJ"};
|
|
2379
2339
|
styleInject(css_248z$c);
|
|
2380
2340
|
|
|
2341
|
+
const Dot = (props) => {
|
|
2342
|
+
const { className, color = COLOR.primary, isActive, ...rest } = props;
|
|
2343
|
+
const getCssClasses = () => {
|
|
2344
|
+
const cssClasses = [];
|
|
2345
|
+
cssClasses.push(styles$c.dot);
|
|
2346
|
+
cssClasses.push(styles$c[color]);
|
|
2347
|
+
isActive && cssClasses.push(styles$c.isActive);
|
|
2348
|
+
className && cssClasses.push(className);
|
|
2349
|
+
return cssClasses.filter(css => css).join(' ');
|
|
2350
|
+
};
|
|
2351
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }));
|
|
2352
|
+
};
|
|
2353
|
+
|
|
2381
2354
|
const Stepper = (props) => {
|
|
2382
|
-
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, showDoneButton, showResetButton, onChange, onFinish } = props;
|
|
2355
|
+
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, showDoneButton, showResetButton, showSteps = true, showDots, onChange, onFinish } = props;
|
|
2383
2356
|
const [steps, setSteps] = useState();
|
|
2384
2357
|
const [activeIndex, setActiveIndex] = React.useState(0);
|
|
2385
2358
|
const [skipped, setSkipped] = React.useState(new Set());
|
|
@@ -2464,18 +2437,20 @@ const Stepper = (props) => {
|
|
|
2464
2437
|
};
|
|
2465
2438
|
const getCssClasses = () => {
|
|
2466
2439
|
const cssClasses = [];
|
|
2467
|
-
cssClasses.push(styles$
|
|
2468
|
-
isHorizontal && cssClasses.push(styles$
|
|
2440
|
+
cssClasses.push(styles$d.stepper);
|
|
2441
|
+
isHorizontal && cssClasses.push(styles$d['isHorizontal']);
|
|
2469
2442
|
return cssClasses.filter(css => css).join(' ');
|
|
2470
2443
|
};
|
|
2471
2444
|
return (React.createElement(React.Fragment, null, steps &&
|
|
2472
2445
|
React.createElement(React.Fragment, null,
|
|
2473
|
-
React.createElement("div", { className: getCssClasses() }, steps.map((child, index) => (React.createElement(Fragment, { key: child.props.value },
|
|
2446
|
+
React.createElement("div", { className: getCssClasses() }, showSteps && steps.map((child, index) => (React.createElement(Fragment, { key: child.props.value },
|
|
2474
2447
|
renderSteps(child, index),
|
|
2475
2448
|
index !== steps.length - 1 && React.createElement(StepConnector, { isActive: activeIndex > index }))))),
|
|
2476
2449
|
steps && steps.map((step, index) => React.createElement(Fragment, { key: step.props.value }, index === activeIndex &&
|
|
2477
2450
|
React.createElement(StepPanel, null, step.props.children))),
|
|
2478
|
-
React.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 })
|
|
2451
|
+
React.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 }),
|
|
2452
|
+
steps && showDots &&
|
|
2453
|
+
React.createElement("div", { className: 'd-flex mt-2 align-items-center justify-content-center' }, steps.map((step, index) => React.createElement(Dot, { key: index, isActive: activeIndex >= index }))))));
|
|
2479
2454
|
};
|
|
2480
2455
|
|
|
2481
2456
|
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}";
|
|
@@ -2483,7 +2458,7 @@ var styles$b = {"typography":"Typography-module_typography__sw-td","wrap":"Typog
|
|
|
2483
2458
|
styleInject(css_248z$b);
|
|
2484
2459
|
|
|
2485
2460
|
const Wrapper = (props) => {
|
|
2486
|
-
const { as = 'span', wrap, children, className
|
|
2461
|
+
const { as = 'span', wrap, children, className, ...rest } = props;
|
|
2487
2462
|
const getCssClasses = () => {
|
|
2488
2463
|
const cssClasses = [];
|
|
2489
2464
|
cssClasses.push(styles$b.typography);
|
|
@@ -2492,11 +2467,10 @@ const Wrapper = (props) => {
|
|
|
2492
2467
|
className && cssClasses.push(className);
|
|
2493
2468
|
return cssClasses.filter(css => css).join(' ');
|
|
2494
2469
|
};
|
|
2495
|
-
return React.createElement(as,
|
|
2470
|
+
return React.createElement(as, { ...rest, className: getCssClasses() }, children);
|
|
2496
2471
|
};
|
|
2497
|
-
const Typography = (
|
|
2498
|
-
|
|
2499
|
-
return (React.createElement(Wrapper, Object.assign({ as: as, wrap: wrap }, rest), children));
|
|
2472
|
+
const Typography = ({ children, as = 'span', wrap, ...rest }) => {
|
|
2473
|
+
return (React.createElement(Wrapper, { as: as, wrap: wrap, ...rest }, children));
|
|
2500
2474
|
};
|
|
2501
2475
|
|
|
2502
2476
|
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}";
|
|
@@ -2551,14 +2525,14 @@ var styles$9 = {"skeletonAvatar":"SkeletonAvatar-module_skeletonAvatar__03QnJ","
|
|
|
2551
2525
|
styleInject(css_248z$9);
|
|
2552
2526
|
|
|
2553
2527
|
const SkeletonAvatar = (props) => {
|
|
2554
|
-
const { className
|
|
2528
|
+
const { className, ...rest } = props;
|
|
2555
2529
|
const getCssClasses = () => {
|
|
2556
2530
|
const cssClasses = [];
|
|
2557
2531
|
cssClasses.push(styles$9.skeletonAvatar);
|
|
2558
2532
|
className && cssClasses.push(className);
|
|
2559
2533
|
return cssClasses.filter(r => r).join(' ');
|
|
2560
2534
|
};
|
|
2561
|
-
return (React.createElement("div",
|
|
2535
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }));
|
|
2562
2536
|
};
|
|
2563
2537
|
|
|
2564
2538
|
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}";
|
|
@@ -2566,14 +2540,14 @@ var styles$8 = {"skeletonText":"SkeletonText-module_skeletonText__E5NCO","skelet
|
|
|
2566
2540
|
styleInject(css_248z$8);
|
|
2567
2541
|
|
|
2568
2542
|
const SkeletonText = (props) => {
|
|
2569
|
-
const { className
|
|
2543
|
+
const { className, ...rest } = props;
|
|
2570
2544
|
const getCssClasses = () => {
|
|
2571
2545
|
const cssClasses = [];
|
|
2572
2546
|
cssClasses.push(styles$8.skeletonText);
|
|
2573
2547
|
className && cssClasses.push(className);
|
|
2574
2548
|
return cssClasses.filter(r => r).join(' ');
|
|
2575
2549
|
};
|
|
2576
|
-
return (React.createElement("div",
|
|
2550
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }));
|
|
2577
2551
|
};
|
|
2578
2552
|
|
|
2579
2553
|
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}";
|
|
@@ -2581,14 +2555,14 @@ var styles$7 = {"skeletonFooter":"SkeletonFooter-module_skeletonFooter__u2Gxc","
|
|
|
2581
2555
|
styleInject(css_248z$7);
|
|
2582
2556
|
|
|
2583
2557
|
const SkeletonFooter = (props) => {
|
|
2584
|
-
const { className
|
|
2558
|
+
const { className, ...rest } = props;
|
|
2585
2559
|
const getCssClasses = () => {
|
|
2586
2560
|
const cssClasses = [];
|
|
2587
2561
|
cssClasses.push(styles$7.skeletonFooter);
|
|
2588
2562
|
className && cssClasses.push(className);
|
|
2589
2563
|
return cssClasses.filter(r => r).join(' ');
|
|
2590
2564
|
};
|
|
2591
|
-
return (React.createElement("div",
|
|
2565
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest }));
|
|
2592
2566
|
};
|
|
2593
2567
|
|
|
2594
2568
|
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}";
|
|
@@ -2596,14 +2570,14 @@ var styles$6 = {"skeletonImage":"SkeletonImage-module_skeletonImage__2EwDG","ske
|
|
|
2596
2570
|
styleInject(css_248z$6);
|
|
2597
2571
|
|
|
2598
2572
|
const SkeletonImage = (props) => {
|
|
2599
|
-
const { className
|
|
2573
|
+
const { className, ...rest } = props;
|
|
2600
2574
|
const getCssClasses = () => {
|
|
2601
2575
|
const cssClasses = [];
|
|
2602
2576
|
cssClasses.push(styles$6.skeletonImage);
|
|
2603
2577
|
className && cssClasses.push(className);
|
|
2604
2578
|
return cssClasses.filter(r => r).join(' ');
|
|
2605
2579
|
};
|
|
2606
|
-
return (React.createElement("div",
|
|
2580
|
+
return (React.createElement("div", { className: getCssClasses(), ...rest },
|
|
2607
2581
|
React.createElement("div", { className: styles$6.img })));
|
|
2608
2582
|
};
|
|
2609
2583
|
|
|
@@ -2627,8 +2601,8 @@ const Table = (props) => {
|
|
|
2627
2601
|
};
|
|
2628
2602
|
|
|
2629
2603
|
const TableRow = (props) => {
|
|
2630
|
-
const { children
|
|
2631
|
-
return (React.createElement("tr",
|
|
2604
|
+
const { children, ...rest } = props;
|
|
2605
|
+
return (React.createElement("tr", { ...rest }, children));
|
|
2632
2606
|
};
|
|
2633
2607
|
|
|
2634
2608
|
const TableContext = createContext({
|
|
@@ -2637,22 +2611,22 @@ const TableContext = createContext({
|
|
|
2637
2611
|
const useTableContext = () => useContext(TableContext);
|
|
2638
2612
|
|
|
2639
2613
|
const TableHead = (props) => {
|
|
2640
|
-
const { children
|
|
2614
|
+
const { children, ...rest } = props;
|
|
2641
2615
|
return (React.createElement(TableContext.Provider, { value: { variant: 'head' } },
|
|
2642
|
-
React.createElement("thead",
|
|
2616
|
+
React.createElement("thead", { ...rest }, children)));
|
|
2643
2617
|
};
|
|
2644
2618
|
|
|
2645
2619
|
const TableBody = (props) => {
|
|
2646
|
-
const { children
|
|
2620
|
+
const { children, ...rest } = props;
|
|
2647
2621
|
return (React.createElement(TableContext.Provider, { value: { variant: 'body' } },
|
|
2648
|
-
React.createElement("tbody",
|
|
2622
|
+
React.createElement("tbody", { ...rest }, children)));
|
|
2649
2623
|
};
|
|
2650
2624
|
|
|
2651
2625
|
const TableCell = (props) => {
|
|
2652
2626
|
const { variant } = useTableContext();
|
|
2653
|
-
const { children, component
|
|
2654
|
-
return (React.createElement(ConditionalWrapper, { condition: true, wrapper: (children) => ((variant === 'head' || component === 'th') ? (React.createElement("th",
|
|
2655
|
-
React.createElement("td",
|
|
2627
|
+
const { children, component, ...rest } = props;
|
|
2628
|
+
return (React.createElement(ConditionalWrapper, { condition: true, wrapper: (children) => ((variant === 'head' || component === 'th') ? (React.createElement("th", { ...rest }, children)) :
|
|
2629
|
+
React.createElement("td", { ...rest }, children)) }, children));
|
|
2656
2630
|
};
|
|
2657
2631
|
|
|
2658
2632
|
const TabContext = createContext({});
|
|
@@ -2741,8 +2715,8 @@ const Tab = (props) => {
|
|
|
2741
2715
|
};
|
|
2742
2716
|
|
|
2743
2717
|
const TabPanel = (props) => {
|
|
2744
|
-
const { children, value, index
|
|
2745
|
-
return (React.createElement("div",
|
|
2718
|
+
const { children, value, index, ...rest } = props;
|
|
2719
|
+
return (React.createElement("div", { role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}`, ...rest }, value === index && children));
|
|
2746
2720
|
};
|
|
2747
2721
|
|
|
2748
2722
|
const HourSelect = (props) => {
|
|
@@ -2889,14 +2863,14 @@ var styles$1 = {"treeView":"TreeView-module_treeView__VVj-4"};
|
|
|
2889
2863
|
styleInject(css_248z$1);
|
|
2890
2864
|
|
|
2891
2865
|
const TreeView = (props) => {
|
|
2892
|
-
const { children, className
|
|
2866
|
+
const { children, className, ...rest } = props;
|
|
2893
2867
|
const getCssClasses = () => {
|
|
2894
2868
|
const cssClasses = [];
|
|
2895
2869
|
cssClasses.push(styles$1.treeView);
|
|
2896
2870
|
className && cssClasses.push(className);
|
|
2897
2871
|
return cssClasses.filter(css => css).join(' ');
|
|
2898
2872
|
};
|
|
2899
|
-
return (React.createElement("ul",
|
|
2873
|
+
return (React.createElement("ul", { className: getCssClasses(), ...rest }, children));
|
|
2900
2874
|
};
|
|
2901
2875
|
|
|
2902
2876
|
var css_248z = ".TreeItem-module_treeItem__Mxsjr {\n display: flex;\n flex-direction: column;\n min-height: 48px;\n justify-content: center;\n}";
|
|
@@ -2943,4 +2917,4 @@ const TreeItem = (props) => {
|
|
|
2943
2917
|
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2944
2918
|
};
|
|
2945
2919
|
|
|
2946
|
-
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|
|
2920
|
+
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|