react-asc 20.0.0 → 21.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Button/Button.d.ts +1 -0
- package/components/Grid/Row/Row.d.ts +4 -1
- package/components/Select/Select.d.ts +1 -0
- package/index.es.js +216 -198
- package/index.js +216 -198
- package/package.json +1 -3
- package/react-asc.scss +103 -3
- package/readme.md +3 -5
package/index.js
CHANGED
|
@@ -95,93 +95,93 @@ function styleInject(css, ref) {
|
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
var css_248z$
|
|
99
|
-
var styles$
|
|
100
|
-
styleInject(css_248z$
|
|
98
|
+
var css_248z$10 = ".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";
|
|
99
|
+
var styles$10 = {"alert":"Alert-module_alert__b4tbk","shadow":"Alert-module_shadow__5bz-7","contained":"Alert-module_contained__EM0x6","primary":"Alert-module_primary__q4pNj","accent":"Alert-module_accent__a2WIl","secondary":"Alert-module_secondary__syXKX","light":"Alert-module_light__VKCXF","dark":"Alert-module_dark__3c-Hm","outline":"Alert-module_outline__T2262"};
|
|
100
|
+
styleInject(css_248z$10);
|
|
101
101
|
|
|
102
102
|
const Alert = (props) => {
|
|
103
103
|
const { children, className, color = exports.COLOR.primary, variant = exports.VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
104
104
|
const getCssClasses = () => {
|
|
105
105
|
const cssClasses = [];
|
|
106
|
-
cssClasses.push(styles$
|
|
106
|
+
cssClasses.push(styles$10.alert);
|
|
107
107
|
if (variant === exports.VARIANT.contained) {
|
|
108
|
-
cssClasses.push(styles$
|
|
109
|
-
cssClasses.push(styles$
|
|
108
|
+
cssClasses.push(styles$10.contained);
|
|
109
|
+
cssClasses.push(styles$10[color]);
|
|
110
110
|
}
|
|
111
111
|
if (variant === exports.VARIANT.outline) {
|
|
112
|
-
cssClasses.push(styles$
|
|
113
|
-
cssClasses.push(styles$
|
|
112
|
+
cssClasses.push(styles$10.outline);
|
|
113
|
+
cssClasses.push(styles$10[color]);
|
|
114
114
|
}
|
|
115
|
-
shadow && cssClasses.push(styles$
|
|
115
|
+
shadow && cssClasses.push(styles$10['shadow']);
|
|
116
116
|
className && cssClasses.push(className);
|
|
117
117
|
return cssClasses.filter(r => r).join(' ');
|
|
118
118
|
};
|
|
119
119
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
120
120
|
};
|
|
121
121
|
|
|
122
|
-
var css_248z
|
|
123
|
-
var styles
|
|
124
|
-
styleInject(css_248z
|
|
122
|
+
var css_248z$$ = ".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";
|
|
123
|
+
var styles$$ = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module_primary__xMqXD","secondary":"AppBar-module_secondary__8MkLA","accent":"AppBar-module_accent__vHbkp","light":"AppBar-module_light__HGy3y","dark":"AppBar-module_dark__ILq96","shadow":"AppBar-module_shadow__gQN8s"};
|
|
124
|
+
styleInject(css_248z$$);
|
|
125
125
|
|
|
126
126
|
const AppBar = (props) => {
|
|
127
127
|
const { children, className, color = exports.COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
128
128
|
const getCssClasses = () => {
|
|
129
129
|
const cssClasses = [];
|
|
130
|
-
cssClasses.push(styles
|
|
131
|
-
cssClasses.push(styles
|
|
132
|
-
shadow && cssClasses.push(styles
|
|
130
|
+
cssClasses.push(styles$$[color]);
|
|
131
|
+
cssClasses.push(styles$$.appbar);
|
|
132
|
+
shadow && cssClasses.push(styles$$['shadow']);
|
|
133
133
|
className && cssClasses.push(className);
|
|
134
134
|
return cssClasses.filter(r => r).join(' ');
|
|
135
135
|
};
|
|
136
136
|
return (React__default["default"].createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
137
137
|
};
|
|
138
138
|
|
|
139
|
-
var css_248z$
|
|
140
|
-
var styles$
|
|
141
|
-
styleInject(css_248z$
|
|
139
|
+
var css_248z$_ = ".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";
|
|
140
|
+
var styles$_ = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
141
|
+
styleInject(css_248z$_);
|
|
142
142
|
|
|
143
143
|
const AppBarTitle = (props) => {
|
|
144
144
|
const { children, className, onClick } = props;
|
|
145
145
|
const getCssClass = () => {
|
|
146
146
|
const cssClasses = [];
|
|
147
|
-
cssClasses.push(styles$
|
|
147
|
+
cssClasses.push(styles$_.appbarTitle);
|
|
148
148
|
className && cssClasses.push(className);
|
|
149
149
|
return cssClasses.filter(r => r).join(' ');
|
|
150
150
|
};
|
|
151
151
|
return (React__default["default"].createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
152
152
|
};
|
|
153
153
|
|
|
154
|
-
var css_248z$
|
|
155
|
-
var styles$
|
|
156
|
-
styleInject(css_248z$
|
|
154
|
+
var css_248z$Z = ".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";
|
|
155
|
+
var styles$Z = {"icon":"Icon-module_icon__lFKCA","primary":"Icon-module_primary__3fID-","accent":"Icon-module_accent__aZXGb","secondary":"Icon-module_secondary__HKKop","light":"Icon-module_light__-ApMm","dark":"Icon-module_dark__DpCIK"};
|
|
156
|
+
styleInject(css_248z$Z);
|
|
157
157
|
|
|
158
158
|
const Icon = (props) => {
|
|
159
159
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
160
160
|
const getCssClasses = () => {
|
|
161
161
|
const cssClasses = [];
|
|
162
|
-
cssClasses.push(styles$
|
|
163
|
-
iconColor && cssClasses.push(styles$
|
|
162
|
+
cssClasses.push(styles$Z.icon);
|
|
163
|
+
iconColor && cssClasses.push(styles$Z[iconColor]);
|
|
164
164
|
className && cssClasses.push(className);
|
|
165
165
|
return cssClasses.filter(css => css).join(' ');
|
|
166
166
|
};
|
|
167
167
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
168
168
|
};
|
|
169
169
|
|
|
170
|
-
var css_248z$
|
|
171
|
-
var styles$
|
|
172
|
-
styleInject(css_248z$
|
|
170
|
+
var css_248z$Y = ".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:not(.IconButton-module_iconButton__rpCPQ.IconButton-module_disabled__QB0ZV) {\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";
|
|
171
|
+
var styles$Y = {"iconButton":"IconButton-module_iconButton__rpCPQ","shadow":"IconButton-module_shadow__Uw0RK","md":"IconButton-module_md__XnuSk","lg":"IconButton-module_lg__arEvo","text":"IconButton-module_text__Ualag","active":"IconButton-module_active__VIqU9","primary":"IconButton-module_primary__vbo-G","secondary":"IconButton-module_secondary__AiNAY","accent":"IconButton-module_accent__QRzM2","light":"IconButton-module_light__YNEiO","dark":"IconButton-module_dark__gnbUH","disabled":"IconButton-module_disabled__QB0ZV","contained":"IconButton-module_contained__k7vGA"};
|
|
172
|
+
styleInject(css_248z$Y);
|
|
173
173
|
|
|
174
174
|
const IconButton = (props) => {
|
|
175
175
|
const { children, icon, variant = exports.VARIANT.text, color = exports.COLOR.dark, size = exports.SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
176
176
|
const getCssClasses = () => {
|
|
177
177
|
const cssClasses = [];
|
|
178
|
-
cssClasses.push(styles$
|
|
179
|
-
cssClasses.push(styles$
|
|
180
|
-
cssClasses.push(styles$
|
|
181
|
-
cssClasses.push(styles$
|
|
182
|
-
isActive && cssClasses.push(styles$
|
|
183
|
-
disabled && cssClasses.push(styles$
|
|
184
|
-
shadow && cssClasses.push(styles$
|
|
178
|
+
cssClasses.push(styles$Y[color]);
|
|
179
|
+
cssClasses.push(styles$Y[variant]);
|
|
180
|
+
cssClasses.push(styles$Y[size]);
|
|
181
|
+
cssClasses.push(styles$Y.iconButton);
|
|
182
|
+
isActive && cssClasses.push(styles$Y.active);
|
|
183
|
+
disabled && cssClasses.push(styles$Y.disabled);
|
|
184
|
+
shadow && cssClasses.push(styles$Y.shadow);
|
|
185
185
|
className && cssClasses.push(className);
|
|
186
186
|
return cssClasses.filter(css => css).join(' ');
|
|
187
187
|
};
|
|
@@ -290,9 +290,9 @@ function useDebounce(callback, timeout, deps) {
|
|
|
290
290
|
}, deps);
|
|
291
291
|
}
|
|
292
292
|
|
|
293
|
-
var css_248z$
|
|
294
|
-
var styles$
|
|
295
|
-
styleInject(css_248z$
|
|
293
|
+
var css_248z$X = ".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 .Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n opacity: 0; }\n";
|
|
294
|
+
var styles$X = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
295
|
+
styleInject(css_248z$X);
|
|
296
296
|
|
|
297
297
|
const Backdrop = (props) => {
|
|
298
298
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -302,8 +302,8 @@ const Backdrop = (props) => {
|
|
|
302
302
|
};
|
|
303
303
|
const getCssClasses = () => {
|
|
304
304
|
const cssClasses = [];
|
|
305
|
-
cssClasses.push(styles$
|
|
306
|
-
isTransparent && cssClasses.push(
|
|
305
|
+
cssClasses.push(styles$X.backdrop);
|
|
306
|
+
isTransparent && cssClasses.push(styles$X['isTransparent']);
|
|
307
307
|
return cssClasses.filter(css => css).join(' ');
|
|
308
308
|
};
|
|
309
309
|
const getStyles = () => {
|
|
@@ -313,34 +313,34 @@ const Backdrop = (props) => {
|
|
|
313
313
|
return (reactDom.createPortal(React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
|
|
314
314
|
};
|
|
315
315
|
|
|
316
|
-
var css_248z$
|
|
317
|
-
var styles$
|
|
318
|
-
styleInject(css_248z$
|
|
316
|
+
var css_248z$W = ".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";
|
|
317
|
+
var styles$W = {"list":"List-module_list__gpZ41"};
|
|
318
|
+
styleInject(css_248z$W);
|
|
319
319
|
|
|
320
320
|
const List = (props) => {
|
|
321
321
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
322
322
|
const getCssClasses = () => {
|
|
323
323
|
const cssClasses = [];
|
|
324
|
-
isFlush && cssClasses.push(styles$
|
|
325
|
-
cssClasses.push(styles$
|
|
324
|
+
isFlush && cssClasses.push(styles$W.flush);
|
|
325
|
+
cssClasses.push(styles$W.list);
|
|
326
326
|
className && cssClasses.push(className);
|
|
327
327
|
return cssClasses.filter(css => css).join(' ');
|
|
328
328
|
};
|
|
329
329
|
return (React__default["default"].createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
330
330
|
};
|
|
331
331
|
|
|
332
|
-
var css_248z$
|
|
333
|
-
var styles$
|
|
334
|
-
styleInject(css_248z$
|
|
332
|
+
var css_248z$V = ".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";
|
|
333
|
+
var styles$V = {"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"};
|
|
334
|
+
styleInject(css_248z$V);
|
|
335
335
|
|
|
336
336
|
const ListItem = (props) => {
|
|
337
337
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
338
338
|
const getCssClasses = () => {
|
|
339
339
|
const cssClasses = [];
|
|
340
|
-
cssClasses.push(styles$
|
|
341
|
-
color && cssClasses.push(styles$
|
|
342
|
-
active && cssClasses.push(styles$
|
|
343
|
-
disabled && cssClasses.push(styles$
|
|
340
|
+
cssClasses.push(styles$V.listItem);
|
|
341
|
+
color && cssClasses.push(styles$V[color]);
|
|
342
|
+
active && cssClasses.push(styles$V['active']);
|
|
343
|
+
disabled && cssClasses.push(styles$V['disabled']);
|
|
344
344
|
className && cssClasses.push(className);
|
|
345
345
|
return cssClasses.filter(css => css).join(' ');
|
|
346
346
|
};
|
|
@@ -350,42 +350,42 @@ const ListItem = (props) => {
|
|
|
350
350
|
return (React__default["default"].createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
351
351
|
};
|
|
352
352
|
|
|
353
|
-
var css_248z$
|
|
354
|
-
var styles$
|
|
355
|
-
styleInject(css_248z$
|
|
353
|
+
var css_248z$U = ".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";
|
|
354
|
+
var styles$U = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
355
|
+
styleInject(css_248z$U);
|
|
356
356
|
|
|
357
357
|
const ListItemAvatar = (_a) => {
|
|
358
358
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
359
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
359
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$U.avatar }, rest), avatar));
|
|
360
360
|
};
|
|
361
361
|
|
|
362
|
-
var css_248z$
|
|
363
|
-
var styles$
|
|
364
|
-
styleInject(css_248z$
|
|
362
|
+
var css_248z$T = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px; }\n .ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px; }\n";
|
|
363
|
+
var styles$T = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
364
|
+
styleInject(css_248z$T);
|
|
365
365
|
|
|
366
366
|
const ListItemIcon = (_a) => {
|
|
367
367
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
368
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
368
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$T.icon }, rest), icon));
|
|
369
369
|
};
|
|
370
370
|
|
|
371
|
-
var css_248z$
|
|
372
|
-
var styles$
|
|
373
|
-
styleInject(css_248z$
|
|
371
|
+
var css_248z$S = ".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";
|
|
372
|
+
var styles$S = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
373
|
+
styleInject(css_248z$S);
|
|
374
374
|
|
|
375
375
|
const ListItemAction = (_a) => {
|
|
376
376
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
377
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
377
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$S.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
378
378
|
};
|
|
379
379
|
|
|
380
|
-
var css_248z$
|
|
381
|
-
var styles$
|
|
382
|
-
styleInject(css_248z$
|
|
380
|
+
var css_248z$R = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1; }\n";
|
|
381
|
+
var styles$R = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
382
|
+
styleInject(css_248z$R);
|
|
383
383
|
|
|
384
384
|
const ListItemText = (_a) => {
|
|
385
385
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
386
386
|
const getCssClasses = () => {
|
|
387
387
|
const cssClasses = [];
|
|
388
|
-
cssClasses.push(styles$
|
|
388
|
+
cssClasses.push(styles$R.listItemText);
|
|
389
389
|
return cssClasses.filter(css => css).join(' ');
|
|
390
390
|
};
|
|
391
391
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -396,9 +396,9 @@ const ListItemText = (_a) => {
|
|
|
396
396
|
const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
|
|
397
397
|
const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
398
398
|
|
|
399
|
-
var css_248z$
|
|
400
|
-
var styles$
|
|
401
|
-
styleInject(css_248z$
|
|
399
|
+
var css_248z$Q = ".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: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 #00000013, 0 0 0 0.25rem #0d6efd40; }\n .AutoComplete-module_select__NNYOi:disabled, .AutoComplete-module_select__NNYOi:read-only {\n background-color: #e9ecef; }\n .AutoComplete-module_select__NNYOi:disabled:hover {\n cursor: not-allowed; }\n .AutoComplete-module_select__NNYOi:read-only:hover {\n cursor: inherit; }\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";
|
|
400
|
+
var styles$Q = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
401
|
+
styleInject(css_248z$Q);
|
|
402
402
|
|
|
403
403
|
// preset value
|
|
404
404
|
// enter -> delay? -> show results
|
|
@@ -454,7 +454,7 @@ const AutoComplete = (props) => {
|
|
|
454
454
|
const getCssClass = () => {
|
|
455
455
|
const cssClasses = [];
|
|
456
456
|
className && cssClasses.push(className);
|
|
457
|
-
cssClasses.push(styles$
|
|
457
|
+
cssClasses.push(styles$Q.select);
|
|
458
458
|
return cssClasses.filter(r => r).join(' ');
|
|
459
459
|
};
|
|
460
460
|
const show = () => setIsShow(true);
|
|
@@ -478,35 +478,35 @@ const AutoComplete = (props) => {
|
|
|
478
478
|
setModel('');
|
|
479
479
|
setSearchText('');
|
|
480
480
|
};
|
|
481
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
481
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$Q.selectContainer },
|
|
482
482
|
React__default["default"].createElement("div", { className: "d-flex" },
|
|
483
483
|
React__default["default"].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
484
484
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
485
485
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
486
486
|
isShow &&
|
|
487
487
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
488
|
-
React__default["default"].createElement("div", { className: styles$
|
|
488
|
+
React__default["default"].createElement("div", { className: styles$Q.selectMenu },
|
|
489
489
|
React__default["default"].createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
490
490
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
491
491
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
492
492
|
};
|
|
493
493
|
|
|
494
|
-
var css_248z$
|
|
495
|
-
var styles$
|
|
496
|
-
styleInject(css_248z$
|
|
494
|
+
var css_248z$P = ".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";
|
|
495
|
+
var styles$P = {"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"};
|
|
496
|
+
styleInject(css_248z$P);
|
|
497
497
|
|
|
498
498
|
const Badge = (props) => {
|
|
499
499
|
const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
500
500
|
const getCssClassesBadgeContainer = () => {
|
|
501
501
|
const cssClasses = [];
|
|
502
|
-
cssClasses.push(styles$
|
|
502
|
+
cssClasses.push(styles$P.badgeContainer);
|
|
503
503
|
className && cssClasses.push(className);
|
|
504
504
|
return cssClasses.filter(css => css).join(' ');
|
|
505
505
|
};
|
|
506
506
|
const getCssClassesBadge = () => {
|
|
507
507
|
const cssClasses = [];
|
|
508
|
-
cssClasses.push(styles$
|
|
509
|
-
cssClasses.push(styles$
|
|
508
|
+
cssClasses.push(styles$P.badge);
|
|
509
|
+
cssClasses.push(styles$P[color]);
|
|
510
510
|
return cssClasses.filter(css => css).join(' ');
|
|
511
511
|
};
|
|
512
512
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -514,26 +514,26 @@ const Badge = (props) => {
|
|
|
514
514
|
React__default["default"].createElement("span", { className: getCssClassesBadge() }, content)));
|
|
515
515
|
};
|
|
516
516
|
|
|
517
|
-
var css_248z$
|
|
518
|
-
var styles$
|
|
519
|
-
styleInject(css_248z$
|
|
517
|
+
var css_248z$O = ".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,\r 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.Button-module_block__JIazf {\n width: 100%; }\n .Button-module_button__qeIer:hover {\n cursor: pointer; }\n .Button-module_button__qeIer:focus:not(.Button-module_button__qeIer.Button-module_disabled__jiOqa) {\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";
|
|
518
|
+
var styles$O = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","disabled":"Button-module_disabled__jiOqa","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"};
|
|
519
|
+
styleInject(css_248z$O);
|
|
520
520
|
|
|
521
521
|
const Button = (props) => {
|
|
522
|
-
const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow"]);
|
|
522
|
+
const { children, variant = exports.VARIANT.contained, color = exports.COLOR.primary, isRounded, isActive, className, startIcon, endIcon, shadow = true, block } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon", "shadow", "block"]);
|
|
523
523
|
const getCssClasses = () => {
|
|
524
524
|
const cssClasses = [];
|
|
525
|
-
cssClasses.push(styles$
|
|
525
|
+
cssClasses.push(styles$O.button);
|
|
526
526
|
if (variant !== 'outline' && variant !== 'text') {
|
|
527
|
-
cssClasses.push(styles$
|
|
528
|
-
cssClasses.push(styles$
|
|
527
|
+
cssClasses.push(styles$O.btnContained);
|
|
528
|
+
cssClasses.push(styles$O[color]);
|
|
529
529
|
}
|
|
530
530
|
if (variant === 'outline') {
|
|
531
|
-
cssClasses.push(styles$
|
|
532
|
-
cssClasses.push(styles$
|
|
531
|
+
cssClasses.push(styles$O.btnOutline);
|
|
532
|
+
cssClasses.push(styles$O[color]);
|
|
533
533
|
}
|
|
534
534
|
if (variant === 'text') {
|
|
535
|
-
cssClasses.push(styles$
|
|
536
|
-
cssClasses.push(styles$
|
|
535
|
+
cssClasses.push(styles$O.btnText);
|
|
536
|
+
cssClasses.push(styles$O[color]);
|
|
537
537
|
}
|
|
538
538
|
if (isRounded && variant !== 'text') {
|
|
539
539
|
cssClasses.push(`rounded-pill`);
|
|
@@ -541,43 +541,44 @@ const Button = (props) => {
|
|
|
541
541
|
if (isActive) {
|
|
542
542
|
cssClasses.push('active');
|
|
543
543
|
}
|
|
544
|
-
shadow && cssClasses.push(styles$
|
|
544
|
+
shadow && cssClasses.push(styles$O.shadow);
|
|
545
|
+
block && cssClasses.push(styles$O.block);
|
|
545
546
|
className && cssClasses.push(className);
|
|
546
547
|
return cssClasses.filter(css => css).join(' ');
|
|
547
548
|
};
|
|
548
549
|
return (React__default["default"].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
549
550
|
React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
|
|
550
551
|
startIcon &&
|
|
551
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
552
|
+
React__default["default"].createElement(Icon, { className: styles$O.startIcon }, startIcon),
|
|
552
553
|
children,
|
|
553
554
|
endIcon &&
|
|
554
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
555
|
+
React__default["default"].createElement(Icon, { className: styles$O.endIcon }, endIcon))));
|
|
555
556
|
};
|
|
556
557
|
|
|
557
|
-
var css_248z$
|
|
558
|
-
var styles$
|
|
559
|
-
styleInject(css_248z$
|
|
558
|
+
var css_248z$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";
|
|
559
|
+
var styles$N = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
560
|
+
styleInject(css_248z$N);
|
|
560
561
|
|
|
561
562
|
const ButtonGroup = (props) => {
|
|
562
563
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
563
564
|
const getCssClasses = () => {
|
|
564
565
|
const cssClasses = [];
|
|
565
|
-
cssClasses.push(styles$
|
|
566
|
+
cssClasses.push(styles$N.buttonGroup);
|
|
566
567
|
className && cssClasses.push(className);
|
|
567
568
|
return cssClasses.filter(css => css).join(' ');
|
|
568
569
|
};
|
|
569
570
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
570
571
|
};
|
|
571
572
|
|
|
572
|
-
var css_248z$
|
|
573
|
-
var styles$
|
|
574
|
-
styleInject(css_248z$
|
|
573
|
+
var css_248z$M = ".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";
|
|
574
|
+
var styles$M = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
575
|
+
styleInject(css_248z$M);
|
|
575
576
|
|
|
576
577
|
const Breadcrumb = (props) => {
|
|
577
578
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
578
579
|
const getCssClasses = () => {
|
|
579
580
|
const cssClasses = [];
|
|
580
|
-
cssClasses.push(styles$
|
|
581
|
+
cssClasses.push(styles$M.breadcrumb);
|
|
581
582
|
className && cssClasses.push(className);
|
|
582
583
|
return cssClasses.filter(css => css).join(' ');
|
|
583
584
|
};
|
|
@@ -587,15 +588,15 @@ const Breadcrumb = (props) => {
|
|
|
587
588
|
|
|
588
589
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
589
590
|
|
|
590
|
-
var css_248z$
|
|
591
|
-
var styles$
|
|
592
|
-
styleInject(css_248z$
|
|
591
|
+
var css_248z$L = ".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";
|
|
592
|
+
var styles$L = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
593
|
+
styleInject(css_248z$L);
|
|
593
594
|
|
|
594
595
|
const BreadcrumbItem = (props) => {
|
|
595
596
|
const { children, className, isActive, onClick } = props;
|
|
596
597
|
const getCssClasses = () => {
|
|
597
598
|
const cssClasses = [];
|
|
598
|
-
cssClasses.push(styles$
|
|
599
|
+
cssClasses.push(styles$L.breadcrumbItem);
|
|
599
600
|
className && cssClasses.push(className);
|
|
600
601
|
isActive && cssClasses.push('active');
|
|
601
602
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -607,115 +608,115 @@ const BreadcrumbItem = (props) => {
|
|
|
607
608
|
React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React__default["default"].createElement("a", null, label) }, children)));
|
|
608
609
|
};
|
|
609
610
|
|
|
610
|
-
var css_248z$
|
|
611
|
-
var styles$
|
|
612
|
-
styleInject(css_248z$
|
|
611
|
+
var css_248z$K = ".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";
|
|
612
|
+
var styles$K = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
613
|
+
styleInject(css_248z$K);
|
|
613
614
|
|
|
614
615
|
const Card = (props) => {
|
|
615
616
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
616
617
|
const getCssClasses = () => {
|
|
617
618
|
const cssClasses = [];
|
|
618
|
-
cssClasses.push(styles$
|
|
619
|
-
shadow && cssClasses.push(styles$
|
|
619
|
+
cssClasses.push(styles$K.card);
|
|
620
|
+
shadow && cssClasses.push(styles$K.shadow);
|
|
620
621
|
className && cssClasses.push(className);
|
|
621
622
|
return cssClasses.filter(css => css).join(' ');
|
|
622
623
|
};
|
|
623
624
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
624
625
|
};
|
|
625
626
|
|
|
626
|
-
var css_248z$
|
|
627
|
-
var styles$
|
|
628
|
-
styleInject(css_248z$
|
|
627
|
+
var css_248z$J = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem; }\n";
|
|
628
|
+
var styles$J = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
629
|
+
styleInject(css_248z$J);
|
|
629
630
|
|
|
630
631
|
const CardBody = (props) => {
|
|
631
632
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
632
633
|
const getCssClasses = () => {
|
|
633
634
|
const cssClasses = [];
|
|
634
|
-
cssClasses.push(styles$
|
|
635
|
+
cssClasses.push(styles$J.cardBody);
|
|
635
636
|
className && cssClasses.push(className);
|
|
636
637
|
return cssClasses.filter(css => css).join(' ');
|
|
637
638
|
};
|
|
638
639
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
639
640
|
};
|
|
640
641
|
|
|
641
|
-
var css_248z$
|
|
642
|
-
var styles$
|
|
643
|
-
styleInject(css_248z$
|
|
642
|
+
var css_248z$I = ".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";
|
|
643
|
+
var styles$I = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
644
|
+
styleInject(css_248z$I);
|
|
644
645
|
|
|
645
646
|
const CardFooter = (props) => {
|
|
646
647
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
647
648
|
const getCssClasses = () => {
|
|
648
649
|
const cssClasses = [];
|
|
649
|
-
cssClasses.push(styles$
|
|
650
|
+
cssClasses.push(styles$I.cardFooter);
|
|
650
651
|
className && cssClasses.push(className);
|
|
651
652
|
return cssClasses.filter(css => css).join(' ');
|
|
652
653
|
};
|
|
653
654
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
654
655
|
};
|
|
655
656
|
|
|
656
|
-
var css_248z$
|
|
657
|
-
var styles$
|
|
658
|
-
styleInject(css_248z$
|
|
657
|
+
var css_248z$H = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important; }\n";
|
|
658
|
+
var styles$H = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
659
|
+
styleInject(css_248z$H);
|
|
659
660
|
|
|
660
661
|
const CardSubtitle = (props) => {
|
|
661
662
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
662
663
|
const getCssClasses = () => {
|
|
663
664
|
const cssClasses = [];
|
|
664
|
-
cssClasses.push(styles$
|
|
665
|
+
cssClasses.push(styles$H.cardSubtitle);
|
|
665
666
|
className && cssClasses.push(className);
|
|
666
667
|
return cssClasses.filter(css => css).join(' ');
|
|
667
668
|
};
|
|
668
669
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
669
670
|
};
|
|
670
671
|
|
|
671
|
-
var css_248z$
|
|
672
|
-
var styles$
|
|
673
|
-
styleInject(css_248z$
|
|
672
|
+
var css_248z$G = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0; }\n";
|
|
673
|
+
var styles$G = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
674
|
+
styleInject(css_248z$G);
|
|
674
675
|
|
|
675
676
|
const CardText = (props) => {
|
|
676
677
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
677
678
|
const getCssClasses = () => {
|
|
678
679
|
const cssClasses = [];
|
|
679
|
-
cssClasses.push(styles$
|
|
680
|
+
cssClasses.push(styles$G.cardText);
|
|
680
681
|
className && cssClasses.push(className);
|
|
681
682
|
return cssClasses.filter(css => css).join(' ');
|
|
682
683
|
};
|
|
683
684
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
684
685
|
};
|
|
685
686
|
|
|
686
|
-
var css_248z$
|
|
687
|
-
var styles$
|
|
688
|
-
styleInject(css_248z$
|
|
687
|
+
var css_248z$F = ".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";
|
|
688
|
+
var styles$F = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
689
|
+
styleInject(css_248z$F);
|
|
689
690
|
|
|
690
691
|
const CardTitle = (props) => {
|
|
691
692
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
692
693
|
const getCssClasses = () => {
|
|
693
694
|
const cssClasses = [];
|
|
694
|
-
cssClasses.push(styles$
|
|
695
|
+
cssClasses.push(styles$F.cardTitle);
|
|
695
696
|
className && cssClasses.push(className);
|
|
696
697
|
return cssClasses.filter(css => css).join(' ');
|
|
697
698
|
};
|
|
698
699
|
return (React__default["default"].createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
699
700
|
};
|
|
700
701
|
|
|
701
|
-
var css_248z$
|
|
702
|
-
var styles$
|
|
703
|
-
styleInject(css_248z$
|
|
702
|
+
var css_248z$E = ".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";
|
|
703
|
+
var styles$E = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
704
|
+
styleInject(css_248z$E);
|
|
704
705
|
|
|
705
706
|
const CardImage = (props) => {
|
|
706
707
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
707
708
|
const getCssClasses = () => {
|
|
708
709
|
const cssClasses = [];
|
|
709
|
-
cssClasses.push(styles$
|
|
710
|
+
cssClasses.push(styles$E.cardImage);
|
|
710
711
|
className && cssClasses.push(className);
|
|
711
712
|
return cssClasses.filter(css => css).join(' ');
|
|
712
713
|
};
|
|
713
714
|
return (React__default["default"].createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
714
715
|
};
|
|
715
716
|
|
|
716
|
-
var css_248z$
|
|
717
|
-
var styles$
|
|
718
|
-
styleInject(css_248z$
|
|
717
|
+
var css_248z$D = ".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";
|
|
718
|
+
var styles$D = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
719
|
+
styleInject(css_248z$D);
|
|
719
720
|
|
|
720
721
|
const Checkbox = (props) => {
|
|
721
722
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -744,8 +745,8 @@ const Checkbox = (props) => {
|
|
|
744
745
|
};
|
|
745
746
|
const getCssClassesLabel = () => {
|
|
746
747
|
const cssClasses = [];
|
|
747
|
-
cssClasses.push(styles$
|
|
748
|
-
disabled && cssClasses.push(styles$
|
|
748
|
+
cssClasses.push(styles$D.checkboxLabel);
|
|
749
|
+
disabled && cssClasses.push(styles$D['disabled']);
|
|
749
750
|
return cssClasses.filter(css => css).join(' ');
|
|
750
751
|
};
|
|
751
752
|
const getIcon = () => {
|
|
@@ -758,24 +759,24 @@ const Checkbox = (props) => {
|
|
|
758
759
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
759
760
|
}
|
|
760
761
|
};
|
|
761
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
762
|
+
return (React__default["default"].createElement("div", { className: styles$D.checkboxContainer },
|
|
762
763
|
React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
763
764
|
React__default["default"].createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
764
765
|
React__default["default"].createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
765
766
|
};
|
|
766
767
|
|
|
767
|
-
var css_248z$
|
|
768
|
-
var styles$
|
|
769
|
-
styleInject(css_248z$
|
|
768
|
+
var css_248z$C = ".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";
|
|
769
|
+
var styles$C = {"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"};
|
|
770
|
+
styleInject(css_248z$C);
|
|
770
771
|
|
|
771
772
|
const Chip = (props) => {
|
|
772
773
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React__default["default"].createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
773
774
|
const getCssClass = () => {
|
|
774
775
|
const cssClasses = [];
|
|
775
|
-
cssClasses.push(styles$
|
|
776
|
-
cssClasses.push(styles$
|
|
777
|
-
shadow && cssClasses.push(styles$
|
|
778
|
-
onClick && cssClasses.push(styles$
|
|
776
|
+
cssClasses.push(styles$C.chip);
|
|
777
|
+
cssClasses.push(styles$C[color]);
|
|
778
|
+
shadow && cssClasses.push(styles$C['shadow']);
|
|
779
|
+
onClick && cssClasses.push(styles$C['clickable']);
|
|
779
780
|
className && cssClasses.push(className);
|
|
780
781
|
return cssClasses.filter(r => r).join(' ');
|
|
781
782
|
};
|
|
@@ -785,7 +786,50 @@ const Chip = (props) => {
|
|
|
785
786
|
};
|
|
786
787
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
787
788
|
React__default["default"].createElement("div", null, children),
|
|
788
|
-
isDeletable && (React__default["default"].createElement("div", { className: styles$
|
|
789
|
+
isDeletable && (React__default["default"].createElement("div", { className: styles$C.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
790
|
+
};
|
|
791
|
+
|
|
792
|
+
var css_248z$B = ".Column-module_column__fcTgl {\n flex: 1 0 0%; }\n";
|
|
793
|
+
var styles$B = {"column":"Column-module_column__fcTgl"};
|
|
794
|
+
styleInject(css_248z$B);
|
|
795
|
+
|
|
796
|
+
const Column = (props) => {
|
|
797
|
+
const { children, className } = props,
|
|
798
|
+
// xs,
|
|
799
|
+
// sm,
|
|
800
|
+
// md,
|
|
801
|
+
// lg,
|
|
802
|
+
// xl,
|
|
803
|
+
rest = __rest(props, ["children", "className"]);
|
|
804
|
+
const getCssClasses = () => {
|
|
805
|
+
const cssClasses = [];
|
|
806
|
+
// !xs && !sm && !md && !lg && !xl && cssClasses.push('col');
|
|
807
|
+
// if (xs) cssClasses.push(`col-${xs.toString()}`);
|
|
808
|
+
// if (sm) cssClasses.push(`col-sm-${sm.toString()}`);
|
|
809
|
+
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
810
|
+
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
811
|
+
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
812
|
+
cssClasses.push(styles$B.column);
|
|
813
|
+
className && cssClasses.push(className);
|
|
814
|
+
return cssClasses.filter(css => css).join(' ');
|
|
815
|
+
};
|
|
816
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
817
|
+
};
|
|
818
|
+
|
|
819
|
+
var css_248z$A = ".Row-module_row__bTIWp {\n display: flex;\n gap: 15px;\n flex-wrap: wrap; }\n .Row-module_row__bTIWp > * {\n flex-shrink: 0;\n width: 100%;\n min-width: 0;\n max-width: 100%; }\n";
|
|
820
|
+
var styles$A = {"row":"Row-module_row__bTIWp"};
|
|
821
|
+
styleInject(css_248z$A);
|
|
822
|
+
|
|
823
|
+
const Row = (_a) => {
|
|
824
|
+
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
825
|
+
const getCssClasses = () => {
|
|
826
|
+
const cssClasses = [];
|
|
827
|
+
cssClasses.push(styles$A.row);
|
|
828
|
+
className && cssClasses.push(className);
|
|
829
|
+
direction && cssClasses.push(`flex-${direction}`);
|
|
830
|
+
return cssClasses.filter(css => css).join(' ');
|
|
831
|
+
};
|
|
832
|
+
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
789
833
|
};
|
|
790
834
|
|
|
791
835
|
var css_248z$z = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem; }\n";
|
|
@@ -833,13 +877,13 @@ const FileInput = (props) => {
|
|
|
833
877
|
React__default["default"].createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
|
|
834
878
|
};
|
|
835
879
|
|
|
836
|
-
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";
|
|
837
|
-
var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
880
|
+
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: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 #00000013, 0 0 0 0.25rem #0d6efd40; }\n .Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n background-color: #e9ecef; }\n .Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n cursor: not-allowed; }\n .Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n cursor: inherit; }\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";
|
|
881
|
+
var styles$y = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
838
882
|
styleInject(css_248z$y);
|
|
839
883
|
|
|
840
884
|
const Select = (props) => {
|
|
841
885
|
var _a, _b, _c;
|
|
842
|
-
const { id, className, options = [], value, multiple, multipleMaxCountItems = 5, onChange, onKeyDown } = props;
|
|
886
|
+
const { id, className, options = [], value, multiple, multipleMaxCountItems = 5, disabled, readOnly, onChange, onKeyDown } = props;
|
|
843
887
|
const [model, setModel] = React.useState('');
|
|
844
888
|
const [hoverIndex, setHoverIndex] = React.useState(null);
|
|
845
889
|
const [isShow, setIsShow] = React.useState(false);
|
|
@@ -848,6 +892,8 @@ const Select = (props) => {
|
|
|
848
892
|
const getCssClass = () => {
|
|
849
893
|
const cssClasses = [];
|
|
850
894
|
className && cssClasses.push(className);
|
|
895
|
+
disabled && cssClasses.push(styles$y['disabled']);
|
|
896
|
+
readOnly && cssClasses.push(styles$y['readOnly']);
|
|
851
897
|
cssClasses.push(styles$y.select);
|
|
852
898
|
return cssClasses.filter(r => r).join(' ');
|
|
853
899
|
};
|
|
@@ -908,7 +954,11 @@ const Select = (props) => {
|
|
|
908
954
|
}
|
|
909
955
|
writeValue(newValue);
|
|
910
956
|
};
|
|
911
|
-
const show = () =>
|
|
957
|
+
const show = () => {
|
|
958
|
+
if (!disabled && !readOnly) {
|
|
959
|
+
setIsShow(true);
|
|
960
|
+
}
|
|
961
|
+
};
|
|
912
962
|
const hide = () => setIsShow(false);
|
|
913
963
|
const isActive = (option) => {
|
|
914
964
|
return selectedOptions.indexOf(option) >= 0 || hoverIndex === options.indexOf(option);
|
|
@@ -982,8 +1032,8 @@ const Select = (props) => {
|
|
|
982
1032
|
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
983
1033
|
};
|
|
984
1034
|
|
|
985
|
-
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";
|
|
986
|
-
var styles$x = {"textarea":"Textarea-module_textarea__L5zqa","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1035
|
+
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:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\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";
|
|
1036
|
+
var styles$x = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
987
1037
|
styleInject(css_248z$x);
|
|
988
1038
|
|
|
989
1039
|
const Textarea = (props) => {
|
|
@@ -998,8 +1048,8 @@ const Textarea = (props) => {
|
|
|
998
1048
|
return (React__default["default"].createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
999
1049
|
};
|
|
1000
1050
|
|
|
1001
|
-
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";
|
|
1002
|
-
var styles$w = {"formInput":"FormInput-module_formInput__VXZip","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1051
|
+
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: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 .FormInput-module_formInput__VXZip.FormInput-module_isInvalid__vQDuz {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem #dc354540; }\n";
|
|
1052
|
+
var styles$w = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1003
1053
|
styleInject(css_248z$w);
|
|
1004
1054
|
|
|
1005
1055
|
const FormInput = (props) => {
|
|
@@ -1358,14 +1408,14 @@ const DateSelect = (props) => {
|
|
|
1358
1408
|
setCurrDate(newDate);
|
|
1359
1409
|
onChange && onChange(newDate);
|
|
1360
1410
|
};
|
|
1361
|
-
return (React__default["default"].createElement(
|
|
1362
|
-
React__default["default"].createElement(
|
|
1411
|
+
return (React__default["default"].createElement(Row, { className: getCssClasses() },
|
|
1412
|
+
React__default["default"].createElement(Column, null,
|
|
1363
1413
|
React__default["default"].createElement(FormLabel, null, "Year"),
|
|
1364
1414
|
React__default["default"].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, exports.DATEMODE.YEAR) })),
|
|
1365
|
-
React__default["default"].createElement(
|
|
1415
|
+
React__default["default"].createElement(Column, null,
|
|
1366
1416
|
React__default["default"].createElement(FormLabel, null, "Month"),
|
|
1367
1417
|
React__default["default"].createElement(MonthSelect, { value: currDate.getMonth(), disabled: disabled, onChange: e => handleOnChange(e, exports.DATEMODE.MONTH) })),
|
|
1368
|
-
React__default["default"].createElement(
|
|
1418
|
+
React__default["default"].createElement(Column, null,
|
|
1369
1419
|
React__default["default"].createElement(FormLabel, null, "Day"),
|
|
1370
1420
|
React__default["default"].createElement(DaySelect, { day: currDate.getDate(), month: currDate.getMonth(), year: currDate.getFullYear(), disabled: disabled, onChange: e => handleOnChange(e, exports.DATEMODE.DAY) }))));
|
|
1371
1421
|
};
|
|
@@ -1593,38 +1643,6 @@ const FloatingActionButton = (props) => {
|
|
|
1593
1643
|
return (React__default["default"].createElement(IconButton, { className: getCssClasses(), color: color, size: size, isActive: isActive, disabled: disabled, icon: icon, variant: exports.VARIANT.contained, onClick: handleClick }));
|
|
1594
1644
|
};
|
|
1595
1645
|
|
|
1596
|
-
const Column = (props) => {
|
|
1597
|
-
const { children, className, xs, sm, md, lg, xl } = props, rest = __rest(props, ["children", "className", "xs", "sm", "md", "lg", "xl"]);
|
|
1598
|
-
const getCssClasses = () => {
|
|
1599
|
-
const cssClasses = [];
|
|
1600
|
-
!xs && !sm && !md && !lg && !xl && cssClasses.push('col');
|
|
1601
|
-
if (xs)
|
|
1602
|
-
cssClasses.push(`col-${xs.toString()}`);
|
|
1603
|
-
if (sm)
|
|
1604
|
-
cssClasses.push(`col-sm-${sm.toString()}`);
|
|
1605
|
-
if (md)
|
|
1606
|
-
cssClasses.push(`col-md-${md.toString()}`);
|
|
1607
|
-
if (lg)
|
|
1608
|
-
cssClasses.push(`col-lg-${lg.toString()}`);
|
|
1609
|
-
if (xl)
|
|
1610
|
-
cssClasses.push(`col-xl-${xl.toString()}`);
|
|
1611
|
-
className && cssClasses.push(className);
|
|
1612
|
-
return cssClasses.filter(css => css).join(' ');
|
|
1613
|
-
};
|
|
1614
|
-
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
1615
|
-
};
|
|
1616
|
-
|
|
1617
|
-
const Row = (props) => {
|
|
1618
|
-
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
1619
|
-
const getCssClasses = () => {
|
|
1620
|
-
const cssClasses = [];
|
|
1621
|
-
cssClasses.push('row');
|
|
1622
|
-
className && cssClasses.push(className);
|
|
1623
|
-
return cssClasses.filter(css => css).join(' ');
|
|
1624
|
-
};
|
|
1625
|
-
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
1626
|
-
};
|
|
1627
|
-
|
|
1628
1646
|
var css_248z$l = ".Link-module_link__YlJQl {\n color: var(--primary);\n text-decoration: underline; }\n .Link-module_link__YlJQl:hover {\n color: var(--primary-dark); }\n";
|
|
1629
1647
|
var styles$l = {"link":"Link-module_link__YlJQl"};
|
|
1630
1648
|
styleInject(css_248z$l);
|
|
@@ -2221,7 +2239,7 @@ const Stepper = (props) => {
|
|
|
2221
2239
|
React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2222
2240
|
};
|
|
2223
2241
|
|
|
2224
|
-
var css_248z$8 = ".Typography-module_typography__sw-td {\n text-overflow: ellipsis;\n
|
|
2242
|
+
var css_248z$8 = ".Typography-module_typography__sw-td {\n text-overflow: ellipsis;\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";
|
|
2225
2243
|
var styles$8 = {"typography":"Typography-module_typography__sw-td"};
|
|
2226
2244
|
styleInject(css_248z$8);
|
|
2227
2245
|
|
|
@@ -2549,21 +2567,21 @@ const TimeSelect = (props) => {
|
|
|
2549
2567
|
setCurrDate(newDate);
|
|
2550
2568
|
onChange && onChange(newDate);
|
|
2551
2569
|
};
|
|
2552
|
-
return (React__default["default"].createElement(
|
|
2570
|
+
return (React__default["default"].createElement(Row, { className: getCssClasses() },
|
|
2553
2571
|
showHours &&
|
|
2554
|
-
React__default["default"].createElement(
|
|
2572
|
+
React__default["default"].createElement(Column, null,
|
|
2555
2573
|
React__default["default"].createElement(FormLabel, null, "Hours"),
|
|
2556
2574
|
React__default["default"].createElement(HourSelect, { value: currDate.getHours(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.HOUR) })),
|
|
2557
2575
|
showMinutes &&
|
|
2558
|
-
React__default["default"].createElement(
|
|
2576
|
+
React__default["default"].createElement(Column, null,
|
|
2559
2577
|
React__default["default"].createElement(FormLabel, null, "Minutes"),
|
|
2560
2578
|
React__default["default"].createElement(MinuteSelect, { value: currDate.getMinutes(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.MINUTE) })),
|
|
2561
2579
|
showSeconds &&
|
|
2562
|
-
React__default["default"].createElement(
|
|
2580
|
+
React__default["default"].createElement(Column, null,
|
|
2563
2581
|
React__default["default"].createElement(FormLabel, null, "Seconds"),
|
|
2564
2582
|
React__default["default"].createElement(SecondSelect, { value: currDate.getSeconds(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.SECONDS) })),
|
|
2565
2583
|
showMilliSeconds &&
|
|
2566
|
-
React__default["default"].createElement(
|
|
2584
|
+
React__default["default"].createElement(Column, null,
|
|
2567
2585
|
React__default["default"].createElement(FormLabel, null, "Milliseconds"),
|
|
2568
2586
|
React__default["default"].createElement(MilliSecondSelect, { value: currDate.getMilliseconds(), disabled: disabled, onChange: e => handleOnChange(e, exports.TIMEMODE.MILLISECONDS) }))));
|
|
2569
2587
|
};
|