react-asc 19.0.7 → 20.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Textarea/Textarea.d.ts +4 -1
- package/index.es.js +188 -177
- package/index.js +188 -177
- package/package.json +3 -2
- package/react-asc.scss +4 -1
package/index.es.js
CHANGED
|
@@ -87,93 +87,93 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
var styles$
|
|
92
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$_ = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px; }\n .Alert-module_alert__b4tbk.Alert-module_shadow__5bz-7 {\n box-shadow: var(--shadow); }\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.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";
|
|
91
|
+
var styles$_ = {"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"};
|
|
92
|
+
styleInject(css_248z$_);
|
|
93
93
|
|
|
94
94
|
const Alert = (props) => {
|
|
95
95
|
const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
96
96
|
const getCssClasses = () => {
|
|
97
97
|
const cssClasses = [];
|
|
98
|
-
cssClasses.push(styles$
|
|
98
|
+
cssClasses.push(styles$_.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$_.contained);
|
|
101
|
+
cssClasses.push(styles$_[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$_.outline);
|
|
105
|
+
cssClasses.push(styles$_[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$_['shadow']);
|
|
108
108
|
className && cssClasses.push(className);
|
|
109
109
|
return cssClasses.filter(r => r).join(' ');
|
|
110
110
|
};
|
|
111
111
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
112
112
|
};
|
|
113
113
|
|
|
114
|
-
var css_248z$
|
|
115
|
-
var styles$
|
|
116
|
-
styleInject(css_248z$
|
|
114
|
+
var css_248z$Z = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0; }\n .AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: var(--shadow); }\n";
|
|
115
|
+
var styles$Z = {"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"};
|
|
116
|
+
styleInject(css_248z$Z);
|
|
117
117
|
|
|
118
118
|
const AppBar = (props) => {
|
|
119
119
|
const { children, className, color = COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
120
120
|
const getCssClasses = () => {
|
|
121
121
|
const cssClasses = [];
|
|
122
|
-
cssClasses.push(styles$
|
|
123
|
-
cssClasses.push(styles$
|
|
124
|
-
shadow && cssClasses.push(styles$
|
|
122
|
+
cssClasses.push(styles$Z[color]);
|
|
123
|
+
cssClasses.push(styles$Z.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$Z['shadow']);
|
|
125
125
|
className && cssClasses.push(className);
|
|
126
126
|
return cssClasses.filter(r => r).join(' ');
|
|
127
127
|
};
|
|
128
128
|
return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
129
129
|
};
|
|
130
130
|
|
|
131
|
-
var css_248z$
|
|
132
|
-
var styles$
|
|
133
|
-
styleInject(css_248z$
|
|
131
|
+
var css_248z$Y = ".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 .AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer; }\n";
|
|
132
|
+
var styles$Y = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$Y);
|
|
134
134
|
|
|
135
135
|
const AppBarTitle = (props) => {
|
|
136
136
|
const { children, className, onClick } = props;
|
|
137
137
|
const getCssClass = () => {
|
|
138
138
|
const cssClasses = [];
|
|
139
|
-
cssClasses.push(styles$
|
|
139
|
+
cssClasses.push(styles$Y.appbarTitle);
|
|
140
140
|
className && cssClasses.push(className);
|
|
141
141
|
return cssClasses.filter(r => r).join(' ');
|
|
142
142
|
};
|
|
143
143
|
return (React.createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
144
144
|
};
|
|
145
145
|
|
|
146
|
-
var css_248z$
|
|
147
|
-
var styles$
|
|
148
|
-
styleInject(css_248z$
|
|
146
|
+
var css_248z$X = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px; }\n .Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit; }\n .Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary); }\n .Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent); }\n .Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary); }\n .Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light); }\n .Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark); }\n";
|
|
147
|
+
var styles$X = {"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"};
|
|
148
|
+
styleInject(css_248z$X);
|
|
149
149
|
|
|
150
150
|
const Icon = (props) => {
|
|
151
151
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
152
152
|
const getCssClasses = () => {
|
|
153
153
|
const cssClasses = [];
|
|
154
|
-
cssClasses.push(styles$
|
|
155
|
-
iconColor && cssClasses.push(styles$
|
|
154
|
+
cssClasses.push(styles$X.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$X[iconColor]);
|
|
156
156
|
className && cssClasses.push(className);
|
|
157
157
|
return cssClasses.filter(css => css).join(' ');
|
|
158
158
|
};
|
|
159
159
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
160
160
|
};
|
|
161
161
|
|
|
162
|
-
var css_248z$
|
|
163
|
-
var styles$
|
|
164
|
-
styleInject(css_248z$
|
|
162
|
+
var css_248z$W = ".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 .IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit; }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark); }\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 .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 .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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark); }\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 .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white); }\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 .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 .IconButton-module_iconButton__rpCPQ:focus {\n color: #212529;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n";
|
|
163
|
+
var styles$W = {"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"};
|
|
164
|
+
styleInject(css_248z$W);
|
|
165
165
|
|
|
166
166
|
const IconButton = (props) => {
|
|
167
167
|
const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
168
168
|
const getCssClasses = () => {
|
|
169
169
|
const cssClasses = [];
|
|
170
|
-
cssClasses.push(styles$
|
|
171
|
-
cssClasses.push(styles$
|
|
172
|
-
cssClasses.push(styles$
|
|
173
|
-
cssClasses.push(styles$
|
|
174
|
-
isActive && cssClasses.push(styles$
|
|
175
|
-
disabled && cssClasses.push(styles$
|
|
176
|
-
shadow && cssClasses.push(styles$
|
|
170
|
+
cssClasses.push(styles$W[color]);
|
|
171
|
+
cssClasses.push(styles$W[variant]);
|
|
172
|
+
cssClasses.push(styles$W[size]);
|
|
173
|
+
cssClasses.push(styles$W.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$W.active);
|
|
175
|
+
disabled && cssClasses.push(styles$W.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$W.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -282,9 +282,9 @@ function useDebounce(callback, timeout, deps) {
|
|
|
282
282
|
}, deps);
|
|
283
283
|
}
|
|
284
284
|
|
|
285
|
-
var css_248z$
|
|
286
|
-
var styles$
|
|
287
|
-
styleInject(css_248z$
|
|
285
|
+
var css_248z$V = ".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";
|
|
286
|
+
var styles$V = {"backdrop":"Backdrop-module_backdrop__IRMoL"};
|
|
287
|
+
styleInject(css_248z$V);
|
|
288
288
|
|
|
289
289
|
const Backdrop = (props) => {
|
|
290
290
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -294,7 +294,7 @@ const Backdrop = (props) => {
|
|
|
294
294
|
};
|
|
295
295
|
const getCssClasses = () => {
|
|
296
296
|
const cssClasses = [];
|
|
297
|
-
cssClasses.push(styles$
|
|
297
|
+
cssClasses.push(styles$V.backdrop);
|
|
298
298
|
isTransparent && cssClasses.push(`bg-transparent`);
|
|
299
299
|
return cssClasses.filter(css => css).join(' ');
|
|
300
300
|
};
|
|
@@ -305,34 +305,34 @@ const Backdrop = (props) => {
|
|
|
305
305
|
return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
|
|
306
306
|
};
|
|
307
307
|
|
|
308
|
-
var css_248z$
|
|
309
|
-
var styles$
|
|
310
|
-
styleInject(css_248z$
|
|
308
|
+
var css_248z$U = ".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";
|
|
309
|
+
var styles$U = {"list":"List-module_list__gpZ41"};
|
|
310
|
+
styleInject(css_248z$U);
|
|
311
311
|
|
|
312
312
|
const List = (props) => {
|
|
313
313
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
314
314
|
const getCssClasses = () => {
|
|
315
315
|
const cssClasses = [];
|
|
316
|
-
isFlush && cssClasses.push(styles$
|
|
317
|
-
cssClasses.push(styles$
|
|
316
|
+
isFlush && cssClasses.push(styles$U.flush);
|
|
317
|
+
cssClasses.push(styles$U.list);
|
|
318
318
|
className && cssClasses.push(className);
|
|
319
319
|
return cssClasses.filter(css => css).join(' ');
|
|
320
320
|
};
|
|
321
321
|
return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
322
322
|
};
|
|
323
323
|
|
|
324
|
-
var css_248z$
|
|
325
|
-
var styles$
|
|
326
|
-
styleInject(css_248z$
|
|
324
|
+
var css_248z$T = ".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 .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 .ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0; }\n .ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit; }\n";
|
|
325
|
+
var styles$T = {"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"};
|
|
326
|
+
styleInject(css_248z$T);
|
|
327
327
|
|
|
328
328
|
const ListItem = (props) => {
|
|
329
329
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
330
330
|
const getCssClasses = () => {
|
|
331
331
|
const cssClasses = [];
|
|
332
|
-
cssClasses.push(styles$
|
|
333
|
-
color && cssClasses.push(styles$
|
|
334
|
-
active && cssClasses.push(styles$
|
|
335
|
-
disabled && cssClasses.push(styles$
|
|
332
|
+
cssClasses.push(styles$T.listItem);
|
|
333
|
+
color && cssClasses.push(styles$T[color]);
|
|
334
|
+
active && cssClasses.push(styles$T['active']);
|
|
335
|
+
disabled && cssClasses.push(styles$T['disabled']);
|
|
336
336
|
className && cssClasses.push(className);
|
|
337
337
|
return cssClasses.filter(css => css).join(' ');
|
|
338
338
|
};
|
|
@@ -342,42 +342,42 @@ const ListItem = (props) => {
|
|
|
342
342
|
return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
343
343
|
};
|
|
344
344
|
|
|
345
|
-
var css_248z$
|
|
346
|
-
var styles$
|
|
347
|
-
styleInject(css_248z$
|
|
345
|
+
var css_248z$S = ".ListItemAvatar-module_avatar__sVWfR {\n margin-right: 16px; }\n .ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px; }\n .ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%; }\n";
|
|
346
|
+
var styles$S = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
347
|
+
styleInject(css_248z$S);
|
|
348
348
|
|
|
349
349
|
const ListItemAvatar = (_a) => {
|
|
350
350
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
351
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
351
|
+
return (React.createElement("div", Object.assign({ className: styles$S.avatar }, rest), avatar));
|
|
352
352
|
};
|
|
353
353
|
|
|
354
|
-
var css_248z$
|
|
355
|
-
var styles$
|
|
356
|
-
styleInject(css_248z$
|
|
354
|
+
var css_248z$R = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px; }\n .ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px; }\n";
|
|
355
|
+
var styles$R = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
356
|
+
styleInject(css_248z$R);
|
|
357
357
|
|
|
358
358
|
const ListItemIcon = (_a) => {
|
|
359
359
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
360
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
360
|
+
return (React.createElement("div", Object.assign({ className: styles$R.icon }, rest), icon));
|
|
361
361
|
};
|
|
362
362
|
|
|
363
|
-
var css_248z$
|
|
364
|
-
var styles$
|
|
365
|
-
styleInject(css_248z$
|
|
363
|
+
var css_248z$Q = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px; }\n .ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px; }\n";
|
|
364
|
+
var styles$Q = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
365
|
+
styleInject(css_248z$Q);
|
|
366
366
|
|
|
367
367
|
const ListItemAction = (_a) => {
|
|
368
368
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
369
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
369
|
+
return (React.createElement("div", Object.assign({ className: styles$Q.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
370
370
|
};
|
|
371
371
|
|
|
372
|
-
var css_248z$
|
|
373
|
-
var styles$
|
|
374
|
-
styleInject(css_248z$
|
|
372
|
+
var css_248z$P = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1; }\n";
|
|
373
|
+
var styles$P = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
374
|
+
styleInject(css_248z$P);
|
|
375
375
|
|
|
376
376
|
const ListItemText = (_a) => {
|
|
377
377
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
378
378
|
const getCssClasses = () => {
|
|
379
379
|
const cssClasses = [];
|
|
380
|
-
cssClasses.push(styles$
|
|
380
|
+
cssClasses.push(styles$P.listItemText);
|
|
381
381
|
return cssClasses.filter(css => css).join(' ');
|
|
382
382
|
};
|
|
383
383
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -388,9 +388,9 @@ const ListItemText = (_a) => {
|
|
|
388
388
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
389
389
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
390
390
|
|
|
391
|
-
var css_248z$
|
|
392
|
-
var styles$
|
|
393
|
-
styleInject(css_248z$
|
|
391
|
+
var css_248z$O = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative; }\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 #00000013;\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 .AutoComplete-module_select__NNYOi:hover {\n cursor: pointer; }\n .AutoComplete-module_select__NNYOi:focus {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\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$O = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
393
|
+
styleInject(css_248z$O);
|
|
394
394
|
|
|
395
395
|
// preset value
|
|
396
396
|
// enter -> delay? -> show results
|
|
@@ -446,7 +446,7 @@ const AutoComplete = (props) => {
|
|
|
446
446
|
const getCssClass = () => {
|
|
447
447
|
const cssClasses = [];
|
|
448
448
|
className && cssClasses.push(className);
|
|
449
|
-
cssClasses.push(styles$
|
|
449
|
+
cssClasses.push(styles$O.select);
|
|
450
450
|
return cssClasses.filter(r => r).join(' ');
|
|
451
451
|
};
|
|
452
452
|
const show = () => setIsShow(true);
|
|
@@ -470,35 +470,35 @@ const AutoComplete = (props) => {
|
|
|
470
470
|
setModel('');
|
|
471
471
|
setSearchText('');
|
|
472
472
|
};
|
|
473
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
473
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$O.selectContainer },
|
|
474
474
|
React.createElement("div", { className: "d-flex" },
|
|
475
475
|
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 }),
|
|
476
476
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
477
477
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
478
478
|
isShow &&
|
|
479
479
|
React.createElement(React.Fragment, null,
|
|
480
|
-
React.createElement("div", { className: styles$
|
|
480
|
+
React.createElement("div", { className: styles$O.selectMenu },
|
|
481
481
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
482
482
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
483
483
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
484
484
|
};
|
|
485
485
|
|
|
486
|
-
var css_248z$
|
|
487
|
-
var styles$
|
|
488
|
-
styleInject(css_248z$
|
|
486
|
+
var css_248z$N = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle; }\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 .Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n";
|
|
487
|
+
var styles$N = {"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"};
|
|
488
|
+
styleInject(css_248z$N);
|
|
489
489
|
|
|
490
490
|
const Badge = (props) => {
|
|
491
491
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
492
492
|
const getCssClassesBadgeContainer = () => {
|
|
493
493
|
const cssClasses = [];
|
|
494
|
-
cssClasses.push(styles$
|
|
494
|
+
cssClasses.push(styles$N.badgeContainer);
|
|
495
495
|
className && cssClasses.push(className);
|
|
496
496
|
return cssClasses.filter(css => css).join(' ');
|
|
497
497
|
};
|
|
498
498
|
const getCssClassesBadge = () => {
|
|
499
499
|
const cssClasses = [];
|
|
500
|
-
cssClasses.push(styles$
|
|
501
|
-
cssClasses.push(styles$
|
|
500
|
+
cssClasses.push(styles$N.badge);
|
|
501
|
+
cssClasses.push(styles$N[color]);
|
|
502
502
|
return cssClasses.filter(css => css).join(' ');
|
|
503
503
|
};
|
|
504
504
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -506,26 +506,26 @@ const Badge = (props) => {
|
|
|
506
506
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
507
507
|
};
|
|
508
508
|
|
|
509
|
-
var css_248z$
|
|
510
|
-
var styles$
|
|
511
|
-
styleInject(css_248z$
|
|
509
|
+
var css_248z$M = ".Button-module_button__qeIer {\n text-transform: uppercase !important;\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 .Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow); }\n .Button-module_button__qeIer:hover {\n cursor: pointer; }\n .Button-module_button__qeIer:focus {\n color: #212529;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\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 .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\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 .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\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 .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\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 .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary) !important; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px; }\n";
|
|
510
|
+
var styles$M = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","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"};
|
|
511
|
+
styleInject(css_248z$M);
|
|
512
512
|
|
|
513
513
|
const Button = (props) => {
|
|
514
514
|
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow"]);
|
|
515
515
|
const getCssClasses = () => {
|
|
516
516
|
const cssClasses = [];
|
|
517
|
-
cssClasses.push(styles$
|
|
517
|
+
cssClasses.push(styles$M.button);
|
|
518
518
|
if (variant !== 'outline' && variant !== 'text') {
|
|
519
|
-
cssClasses.push(styles$
|
|
520
|
-
cssClasses.push(styles$
|
|
519
|
+
cssClasses.push(styles$M.btnContained);
|
|
520
|
+
cssClasses.push(styles$M[color]);
|
|
521
521
|
}
|
|
522
522
|
if (variant === 'outline') {
|
|
523
|
-
cssClasses.push(styles$
|
|
524
|
-
cssClasses.push(styles$
|
|
523
|
+
cssClasses.push(styles$M.btnOutline);
|
|
524
|
+
cssClasses.push(styles$M[color]);
|
|
525
525
|
}
|
|
526
526
|
if (variant === 'text') {
|
|
527
|
-
cssClasses.push(styles$
|
|
528
|
-
cssClasses.push(styles$
|
|
527
|
+
cssClasses.push(styles$M.btnText);
|
|
528
|
+
cssClasses.push(styles$M[color]);
|
|
529
529
|
}
|
|
530
530
|
if (isRounded && variant !== 'text') {
|
|
531
531
|
cssClasses.push(`rounded-pill`);
|
|
@@ -533,43 +533,43 @@ const Button = (props) => {
|
|
|
533
533
|
if (isActive) {
|
|
534
534
|
cssClasses.push('active');
|
|
535
535
|
}
|
|
536
|
-
shadow && cssClasses.push(styles$
|
|
536
|
+
shadow && cssClasses.push(styles$M.shadow);
|
|
537
537
|
className && cssClasses.push(className);
|
|
538
538
|
return cssClasses.filter(css => css).join(' ');
|
|
539
539
|
};
|
|
540
540
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
541
541
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
542
542
|
startIcon &&
|
|
543
|
-
React.createElement(Icon, { className: styles$
|
|
543
|
+
React.createElement(Icon, { className: styles$M.startIcon }, startIcon),
|
|
544
544
|
children,
|
|
545
545
|
endIcon &&
|
|
546
|
-
React.createElement(Icon, { className: styles$
|
|
546
|
+
React.createElement(Icon, { className: styles$M.endIcon }, endIcon))));
|
|
547
547
|
};
|
|
548
548
|
|
|
549
|
-
var css_248z$
|
|
550
|
-
var styles$
|
|
551
|
-
styleInject(css_248z$
|
|
549
|
+
var css_248z$L = ".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";
|
|
550
|
+
var styles$L = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
551
|
+
styleInject(css_248z$L);
|
|
552
552
|
|
|
553
553
|
const ButtonGroup = (props) => {
|
|
554
554
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
555
555
|
const getCssClasses = () => {
|
|
556
556
|
const cssClasses = [];
|
|
557
|
-
cssClasses.push(styles$
|
|
557
|
+
cssClasses.push(styles$L.buttonGroup);
|
|
558
558
|
className && cssClasses.push(className);
|
|
559
559
|
return cssClasses.filter(css => css).join(' ');
|
|
560
560
|
};
|
|
561
561
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
562
562
|
};
|
|
563
563
|
|
|
564
|
-
var css_248z$
|
|
565
|
-
var styles$
|
|
566
|
-
styleInject(css_248z$
|
|
564
|
+
var css_248z$K = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin-bottom: 0;\n list-style: none;\n margin-bottom: 1rem; }\n";
|
|
565
|
+
var styles$K = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
566
|
+
styleInject(css_248z$K);
|
|
567
567
|
|
|
568
568
|
const Breadcrumb = (props) => {
|
|
569
569
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
570
570
|
const getCssClasses = () => {
|
|
571
571
|
const cssClasses = [];
|
|
572
|
-
cssClasses.push(styles$
|
|
572
|
+
cssClasses.push(styles$K.breadcrumb);
|
|
573
573
|
className && cssClasses.push(className);
|
|
574
574
|
return cssClasses.filter(css => css).join(' ');
|
|
575
575
|
};
|
|
@@ -579,15 +579,15 @@ const Breadcrumb = (props) => {
|
|
|
579
579
|
|
|
580
580
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
581
581
|
|
|
582
|
-
var css_248z$
|
|
583
|
-
var styles$
|
|
584
|
-
styleInject(css_248z$
|
|
582
|
+
var css_248z$J = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\"; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary); }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset; }\n";
|
|
583
|
+
var styles$J = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
584
|
+
styleInject(css_248z$J);
|
|
585
585
|
|
|
586
586
|
const BreadcrumbItem = (props) => {
|
|
587
587
|
const { children, className, isActive, onClick } = props;
|
|
588
588
|
const getCssClasses = () => {
|
|
589
589
|
const cssClasses = [];
|
|
590
|
-
cssClasses.push(styles$
|
|
590
|
+
cssClasses.push(styles$J.breadcrumbItem);
|
|
591
591
|
className && cssClasses.push(className);
|
|
592
592
|
isActive && cssClasses.push('active');
|
|
593
593
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -599,115 +599,115 @@ const BreadcrumbItem = (props) => {
|
|
|
599
599
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
600
600
|
};
|
|
601
601
|
|
|
602
|
-
var css_248z$
|
|
603
|
-
var styles$
|
|
604
|
-
styleInject(css_248z$
|
|
602
|
+
var css_248z$I = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius); }\n .Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow); }\n";
|
|
603
|
+
var styles$I = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
604
|
+
styleInject(css_248z$I);
|
|
605
605
|
|
|
606
606
|
const Card = (props) => {
|
|
607
607
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
608
608
|
const getCssClasses = () => {
|
|
609
609
|
const cssClasses = [];
|
|
610
|
-
cssClasses.push(styles$
|
|
611
|
-
shadow && cssClasses.push(styles$
|
|
610
|
+
cssClasses.push(styles$I.card);
|
|
611
|
+
shadow && cssClasses.push(styles$I.shadow);
|
|
612
612
|
className && cssClasses.push(className);
|
|
613
613
|
return cssClasses.filter(css => css).join(' ');
|
|
614
614
|
};
|
|
615
615
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
616
616
|
};
|
|
617
617
|
|
|
618
|
-
var css_248z$
|
|
619
|
-
var styles$
|
|
620
|
-
styleInject(css_248z$
|
|
618
|
+
var css_248z$H = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem; }\n";
|
|
619
|
+
var styles$H = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
620
|
+
styleInject(css_248z$H);
|
|
621
621
|
|
|
622
622
|
const CardBody = (props) => {
|
|
623
623
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
624
624
|
const getCssClasses = () => {
|
|
625
625
|
const cssClasses = [];
|
|
626
|
-
cssClasses.push(styles$
|
|
626
|
+
cssClasses.push(styles$H.cardBody);
|
|
627
627
|
className && cssClasses.push(className);
|
|
628
628
|
return cssClasses.filter(css => css).join(' ');
|
|
629
629
|
};
|
|
630
630
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
631
631
|
};
|
|
632
632
|
|
|
633
|
-
var css_248z$
|
|
634
|
-
var styles$
|
|
635
|
-
styleInject(css_248z$
|
|
633
|
+
var css_248z$G = ".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 .CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
|
|
634
|
+
var styles$G = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
635
|
+
styleInject(css_248z$G);
|
|
636
636
|
|
|
637
637
|
const CardFooter = (props) => {
|
|
638
638
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
639
639
|
const getCssClasses = () => {
|
|
640
640
|
const cssClasses = [];
|
|
641
|
-
cssClasses.push(styles$
|
|
641
|
+
cssClasses.push(styles$G.cardFooter);
|
|
642
642
|
className && cssClasses.push(className);
|
|
643
643
|
return cssClasses.filter(css => css).join(' ');
|
|
644
644
|
};
|
|
645
645
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
646
646
|
};
|
|
647
647
|
|
|
648
|
-
var css_248z$
|
|
649
|
-
var styles$
|
|
650
|
-
styleInject(css_248z$
|
|
648
|
+
var css_248z$F = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important; }\n";
|
|
649
|
+
var styles$F = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
650
|
+
styleInject(css_248z$F);
|
|
651
651
|
|
|
652
652
|
const CardSubtitle = (props) => {
|
|
653
653
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
654
654
|
const getCssClasses = () => {
|
|
655
655
|
const cssClasses = [];
|
|
656
|
-
cssClasses.push(styles$
|
|
656
|
+
cssClasses.push(styles$F.cardSubtitle);
|
|
657
657
|
className && cssClasses.push(className);
|
|
658
658
|
return cssClasses.filter(css => css).join(' ');
|
|
659
659
|
};
|
|
660
660
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
661
661
|
};
|
|
662
662
|
|
|
663
|
-
var css_248z$
|
|
664
|
-
var styles$
|
|
665
|
-
styleInject(css_248z$
|
|
663
|
+
var css_248z$E = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0; }\n";
|
|
664
|
+
var styles$E = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
665
|
+
styleInject(css_248z$E);
|
|
666
666
|
|
|
667
667
|
const CardText = (props) => {
|
|
668
668
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
669
669
|
const getCssClasses = () => {
|
|
670
670
|
const cssClasses = [];
|
|
671
|
-
cssClasses.push(styles$
|
|
671
|
+
cssClasses.push(styles$E.cardText);
|
|
672
672
|
className && cssClasses.push(className);
|
|
673
673
|
return cssClasses.filter(css => css).join(' ');
|
|
674
674
|
};
|
|
675
675
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
676
676
|
};
|
|
677
677
|
|
|
678
|
-
var css_248z$
|
|
679
|
-
var styles$
|
|
680
|
-
styleInject(css_248z$
|
|
678
|
+
var css_248z$D = ".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";
|
|
679
|
+
var styles$D = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
680
|
+
styleInject(css_248z$D);
|
|
681
681
|
|
|
682
682
|
const CardTitle = (props) => {
|
|
683
683
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
684
684
|
const getCssClasses = () => {
|
|
685
685
|
const cssClasses = [];
|
|
686
|
-
cssClasses.push(styles$
|
|
686
|
+
cssClasses.push(styles$D.cardTitle);
|
|
687
687
|
className && cssClasses.push(className);
|
|
688
688
|
return cssClasses.filter(css => css).join(' ');
|
|
689
689
|
};
|
|
690
690
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
691
691
|
};
|
|
692
692
|
|
|
693
|
-
var css_248z$
|
|
694
|
-
var styles$
|
|
695
|
-
styleInject(css_248z$
|
|
693
|
+
var css_248z$C = ".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";
|
|
694
|
+
var styles$C = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
695
|
+
styleInject(css_248z$C);
|
|
696
696
|
|
|
697
697
|
const CardImage = (props) => {
|
|
698
698
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
699
699
|
const getCssClasses = () => {
|
|
700
700
|
const cssClasses = [];
|
|
701
|
-
cssClasses.push(styles$
|
|
701
|
+
cssClasses.push(styles$C.cardImage);
|
|
702
702
|
className && cssClasses.push(className);
|
|
703
703
|
return cssClasses.filter(css => css).join(' ');
|
|
704
704
|
};
|
|
705
705
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
706
706
|
};
|
|
707
707
|
|
|
708
|
-
var css_248z$
|
|
709
|
-
var styles$
|
|
710
|
-
styleInject(css_248z$
|
|
708
|
+
var css_248z$B = ".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.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 .Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG:hover {\n cursor: not-allowed; }\n";
|
|
709
|
+
var styles$B = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
710
|
+
styleInject(css_248z$B);
|
|
711
711
|
|
|
712
712
|
const Checkbox = (props) => {
|
|
713
713
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -734,6 +734,12 @@ const Checkbox = (props) => {
|
|
|
734
734
|
className && cssClasses.push(className);
|
|
735
735
|
return cssClasses.filter(css => css).join(' ');
|
|
736
736
|
};
|
|
737
|
+
const getCssClassesLabel = () => {
|
|
738
|
+
const cssClasses = [];
|
|
739
|
+
cssClasses.push(styles$B.checkboxLabel);
|
|
740
|
+
disabled && cssClasses.push(styles$B['disabled']);
|
|
741
|
+
return cssClasses.filter(css => css).join(' ');
|
|
742
|
+
};
|
|
737
743
|
const getIcon = () => {
|
|
738
744
|
return isChecked ? icons.selected : icons.default;
|
|
739
745
|
};
|
|
@@ -744,24 +750,24 @@ const Checkbox = (props) => {
|
|
|
744
750
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
745
751
|
}
|
|
746
752
|
};
|
|
747
|
-
return (React.createElement("div", { className: styles$
|
|
753
|
+
return (React.createElement("div", { className: styles$B.checkboxContainer },
|
|
748
754
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
749
|
-
React.createElement("label", { onClick: handleClick, className:
|
|
755
|
+
React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
750
756
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
751
757
|
};
|
|
752
758
|
|
|
753
|
-
var css_248z$
|
|
754
|
-
var styles$
|
|
755
|
-
styleInject(css_248z$
|
|
759
|
+
var css_248z$A = ".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 .Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow); }\n";
|
|
760
|
+
var styles$A = {"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"};
|
|
761
|
+
styleInject(css_248z$A);
|
|
756
762
|
|
|
757
763
|
const Chip = (props) => {
|
|
758
764
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
759
765
|
const getCssClass = () => {
|
|
760
766
|
const cssClasses = [];
|
|
761
|
-
cssClasses.push(styles$
|
|
762
|
-
cssClasses.push(styles$
|
|
763
|
-
shadow && cssClasses.push(styles$
|
|
764
|
-
onClick && cssClasses.push(styles$
|
|
767
|
+
cssClasses.push(styles$A.chip);
|
|
768
|
+
cssClasses.push(styles$A[color]);
|
|
769
|
+
shadow && cssClasses.push(styles$A['shadow']);
|
|
770
|
+
onClick && cssClasses.push(styles$A['clickable']);
|
|
765
771
|
className && cssClasses.push(className);
|
|
766
772
|
return cssClasses.filter(r => r).join(' ');
|
|
767
773
|
};
|
|
@@ -771,18 +777,18 @@ const Chip = (props) => {
|
|
|
771
777
|
};
|
|
772
778
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
773
779
|
React.createElement("div", null, children),
|
|
774
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
780
|
+
isDeletable && (React.createElement("div", { className: styles$A.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
775
781
|
};
|
|
776
782
|
|
|
777
|
-
var css_248z$
|
|
778
|
-
var styles$
|
|
779
|
-
styleInject(css_248z$
|
|
783
|
+
var css_248z$z = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem; }\n";
|
|
784
|
+
var styles$z = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
785
|
+
styleInject(css_248z$z);
|
|
780
786
|
|
|
781
787
|
const FormLabel = (_a) => {
|
|
782
788
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
783
789
|
const getCssClasses = () => {
|
|
784
790
|
const cssClasses = [];
|
|
785
|
-
cssClasses.push(styles$
|
|
791
|
+
cssClasses.push(styles$z.formLabel);
|
|
786
792
|
className && cssClasses.push(className);
|
|
787
793
|
return cssClasses.filter(css => css).join(' ');
|
|
788
794
|
};
|
|
@@ -819,9 +825,9 @@ const FileInput = (props) => {
|
|
|
819
825
|
React.createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
|
|
820
826
|
};
|
|
821
827
|
|
|
822
|
-
var css_248z$
|
|
823
|
-
var styles$
|
|
824
|
-
styleInject(css_248z$
|
|
828
|
+
var css_248z$y = ".Select-module_selectContainer__DHFDZ {\n position: relative; }\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 #00000013;\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 .Select-module_select__Fbn38:hover {\n cursor: pointer; }\n .Select-module_select__Fbn38:focus {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px #00000013, 0 0 0 0.25rem #0d6efd40; }\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";
|
|
829
|
+
var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
830
|
+
styleInject(css_248z$y);
|
|
825
831
|
|
|
826
832
|
const Select = (props) => {
|
|
827
833
|
var _a, _b, _c;
|
|
@@ -834,7 +840,7 @@ const Select = (props) => {
|
|
|
834
840
|
const getCssClass = () => {
|
|
835
841
|
const cssClasses = [];
|
|
836
842
|
className && cssClasses.push(className);
|
|
837
|
-
cssClasses.push(styles$
|
|
843
|
+
cssClasses.push(styles$y.select);
|
|
838
844
|
return cssClasses.filter(r => r).join(' ');
|
|
839
845
|
};
|
|
840
846
|
useEffect(() => {
|
|
@@ -952,7 +958,7 @@ const Select = (props) => {
|
|
|
952
958
|
}
|
|
953
959
|
}
|
|
954
960
|
};
|
|
955
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
961
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$y.selectContainer },
|
|
956
962
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
957
963
|
!multiple && renderSingleViewModel(),
|
|
958
964
|
multiple && renderMultipleViewModel(),
|
|
@@ -960,7 +966,7 @@ const Select = (props) => {
|
|
|
960
966
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
961
967
|
isShow &&
|
|
962
968
|
createPortal(React.createElement(React.Fragment, null,
|
|
963
|
-
React.createElement("div", { className: styles$
|
|
969
|
+
React.createElement("div", { className: styles$y.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
|
|
964
970
|
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) },
|
|
965
971
|
multiple &&
|
|
966
972
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -968,32 +974,33 @@ const Select = (props) => {
|
|
|
968
974
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
969
975
|
};
|
|
970
976
|
|
|
971
|
-
var css_248z$
|
|
972
|
-
var styles$
|
|
973
|
-
styleInject(css_248z$
|
|
977
|
+
var css_248z$x = ".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 #00000013;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da; }\n .Textarea-module_textarea__L5zqa:focus {\n outline: none !important;\n border-color: var(--primary); }\n .Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem #dc354540; }\n";
|
|
978
|
+
var styles$x = {"textarea":"Textarea-module_textarea__L5zqa","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
979
|
+
styleInject(css_248z$x);
|
|
974
980
|
|
|
975
981
|
const Textarea = (props) => {
|
|
976
|
-
const { className } = props, rest = __rest(props, ["className"]);
|
|
982
|
+
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
977
983
|
const getCssClass = () => {
|
|
978
984
|
const cssClasses = [];
|
|
979
|
-
cssClasses.push(styles$
|
|
985
|
+
cssClasses.push(styles$x.textarea);
|
|
980
986
|
className && cssClasses.push(className);
|
|
987
|
+
error && cssClasses.push(styles$x['isInvalid']);
|
|
981
988
|
return cssClasses.filter(r => r).join(' ');
|
|
982
989
|
};
|
|
983
990
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
984
991
|
};
|
|
985
992
|
|
|
986
|
-
var css_248z$
|
|
987
|
-
var styles$
|
|
988
|
-
styleInject(css_248z$
|
|
993
|
+
var css_248z$w = ".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 .FormInput-module_formInput__VXZip:focus {\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 .FormInput-module_formInput__VXZip.FormInput-module_isInvalid__vQDuz {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem #dc354540; }\n";
|
|
994
|
+
var styles$w = {"formInput":"FormInput-module_formInput__VXZip","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
995
|
+
styleInject(css_248z$w);
|
|
989
996
|
|
|
990
997
|
const FormInput = (props) => {
|
|
991
|
-
const { value, name, type, placeholder, className
|
|
998
|
+
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
992
999
|
const getCssClasses = () => {
|
|
993
1000
|
const cssClasses = [];
|
|
994
|
-
cssClasses.push(styles$
|
|
1001
|
+
cssClasses.push(styles$w.formInput);
|
|
995
1002
|
className && cssClasses.push(className);
|
|
996
|
-
!isValid && cssClasses.push('
|
|
1003
|
+
!isValid && cssClasses.push(styles$w['isInvalid']);
|
|
997
1004
|
return cssClasses.filter(css => css).join(' ');
|
|
998
1005
|
};
|
|
999
1006
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1018,7 +1025,7 @@ const FormInput = (props) => {
|
|
|
1018
1025
|
type === 'file' &&
|
|
1019
1026
|
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"),
|
|
1020
1027
|
type === 'textarea' &&
|
|
1021
|
-
React.createElement(Textarea, { id: name, name: name, className: className
|
|
1028
|
+
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 === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
|
|
1022
1029
|
type === 'select' &&
|
|
1023
1030
|
React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name),
|
|
1024
1031
|
// onKeyDown={e => onKeyDown(e)}
|
|
@@ -1043,8 +1050,12 @@ const FormHint = (props) => {
|
|
|
1043
1050
|
return (React.createElement("small", { className: getCssClasses() }, children));
|
|
1044
1051
|
};
|
|
1045
1052
|
|
|
1053
|
+
var css_248z$v = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545; }\n";
|
|
1054
|
+
var styles$v = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1055
|
+
styleInject(css_248z$v);
|
|
1056
|
+
|
|
1046
1057
|
const FormError = (props) => {
|
|
1047
|
-
const { className =
|
|
1058
|
+
const { className = styles$v.isInvalid, errors = [] } = props;
|
|
1048
1059
|
return (React.createElement(Fragment, null, errors &&
|
|
1049
1060
|
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
1050
1061
|
};
|
|
@@ -1342,13 +1353,13 @@ const DateSelect = (props) => {
|
|
|
1342
1353
|
return (React.createElement("div", { className: getCssClasses() },
|
|
1343
1354
|
React.createElement(FormGroup, { className: "col" },
|
|
1344
1355
|
React.createElement(FormLabel, null, "Year"),
|
|
1345
|
-
React.createElement(YearSelect, {
|
|
1356
|
+
React.createElement(YearSelect, { value: currDate.getFullYear(), disabled: disabled, from: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.from, to: yearConfig === null || yearConfig === void 0 ? void 0 : yearConfig.to, onChange: e => handleOnChange(e, DATEMODE.YEAR) })),
|
|
1346
1357
|
React.createElement(FormGroup, { className: "col" },
|
|
1347
1358
|
React.createElement(FormLabel, null, "Month"),
|
|
1348
|
-
React.createElement(MonthSelect, {
|
|
1359
|
+
React.createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: e => handleOnChange(e, DATEMODE.MONTH) })),
|
|
1349
1360
|
React.createElement(FormGroup, { className: "col" },
|
|
1350
1361
|
React.createElement(FormLabel, null, "Day"),
|
|
1351
|
-
React.createElement(DaySelect, {
|
|
1362
|
+
React.createElement(DaySelect, { day: currDate.getDate(), month: currDate.getMonth(), year: currDate.getFullYear(), disabled: disabled, onChange: e => handleOnChange(e, DATEMODE.DAY) }))));
|
|
1352
1363
|
};
|
|
1353
1364
|
/*
|
|
1354
1365
|
* result = { year, month, day, dayOfWeek, weekNumber }
|
|
@@ -1844,7 +1855,6 @@ const NumberSelect = (props) => {
|
|
|
1844
1855
|
}, [from, to]);
|
|
1845
1856
|
const getCssClasses = () => {
|
|
1846
1857
|
const cssClasses = [];
|
|
1847
|
-
cssClasses.push('form-control');
|
|
1848
1858
|
className && cssClasses.push(className);
|
|
1849
1859
|
return cssClasses.filter(css => css).join(' ');
|
|
1850
1860
|
};
|
|
@@ -2203,7 +2213,7 @@ const Stepper = (props) => {
|
|
|
2203
2213
|
React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2204
2214
|
};
|
|
2205
2215
|
|
|
2206
|
-
var css_248z$8 = ".Typography-module_typography__sw-td {\n text-overflow: ellipsis;\n overflow: hidden !important; }\n";
|
|
2216
|
+
var css_248z$8 = ".Typography-module_typography__sw-td {\n text-overflow: ellipsis;\n overflow: hidden !important;\n font-family: var(--fontFamily); }\n\nh1 {\n font-size: 2.5rem; }\n\nh2 {\n font-size: 2rem; }\n\nh3 {\n font-size: 1.75rem; }\n\nh4 {\n font-size: 1.5rem; }\n\nh5 {\n font-size: 1.25rem; }\n\nh6 {\n font-size: 1rem; }\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";
|
|
2207
2217
|
var styles$8 = {"typography":"Typography-module_typography__sw-td"};
|
|
2208
2218
|
styleInject(css_248z$8);
|
|
2209
2219
|
|
|
@@ -2212,6 +2222,7 @@ const Wrapper = (props) => {
|
|
|
2212
2222
|
const getCssClasses = () => {
|
|
2213
2223
|
const cssClasses = [];
|
|
2214
2224
|
cssClasses.push(styles$8.typography);
|
|
2225
|
+
cssClasses.push(styles$8.as);
|
|
2215
2226
|
className && cssClasses.push(className);
|
|
2216
2227
|
return cssClasses.filter(css => css).join(' ');
|
|
2217
2228
|
};
|
|
@@ -2534,19 +2545,19 @@ const TimeSelect = (props) => {
|
|
|
2534
2545
|
showHours &&
|
|
2535
2546
|
React.createElement(FormGroup, { className: "col" },
|
|
2536
2547
|
React.createElement(FormLabel, null, "Hours"),
|
|
2537
|
-
React.createElement(HourSelect, {
|
|
2548
|
+
React.createElement(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.HOUR) })),
|
|
2538
2549
|
showMinutes &&
|
|
2539
2550
|
React.createElement(FormGroup, { className: "col" },
|
|
2540
2551
|
React.createElement(FormLabel, null, "Minutes"),
|
|
2541
|
-
React.createElement(MinuteSelect, {
|
|
2552
|
+
React.createElement(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MINUTE) })),
|
|
2542
2553
|
showSeconds &&
|
|
2543
2554
|
React.createElement(FormGroup, { className: "col" },
|
|
2544
2555
|
React.createElement(FormLabel, null, "Seconds"),
|
|
2545
|
-
React.createElement(SecondSelect, {
|
|
2556
|
+
React.createElement(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.SECONDS) })),
|
|
2546
2557
|
showMilliSeconds &&
|
|
2547
2558
|
React.createElement(FormGroup, { className: "col" },
|
|
2548
2559
|
React.createElement(FormLabel, null, "Milliseconds"),
|
|
2549
|
-
React.createElement(MilliSecondSelect, {
|
|
2560
|
+
React.createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, TIMEMODE.MILLISECONDS) }))));
|
|
2550
2561
|
};
|
|
2551
2562
|
|
|
2552
2563
|
var css_248z$1 = ".TreeView-module_treeView__VVj-4 {\n list-style-type: none;\n margin-bottom: 0;\n padding-left: 0px !important; }\n .TreeView-module_treeView__VVj-4 ul {\n padding-left: 48px !important; }\n";
|