react-asc 23.7.1 → 24.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/Menu/Menu.d.ts +2 -2
- package/components/Menu/MenuBody.d.ts +2 -2
- package/components/Menu/MenuItem.d.ts +3 -8
- package/components/Modal/GlobalModal.d.ts +3 -2
- package/components/Modal/modal.service.d.ts +7 -4
- package/components/index.d.ts +1 -0
- package/hooks/useWindowSize.d.ts +3 -2
- package/index.es.js +231 -222
- package/index.js +231 -221
- package/package.json +1 -1
- package/react-asc.scss +2 -0
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$13 = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px;\n}\n.Alert-module_alert__b4tbk.Alert-module_shadow__5bz-7 {\n box-shadow: var(--shadow);\n}\n\n.Alert-module_contained__EM0x6.Alert-module_primary__q4pNj {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Alert-module_contained__EM0x6.Alert-module_accent__a2WIl {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Alert-module_contained__EM0x6.Alert-module_secondary__syXKX {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Alert-module_contained__EM0x6.Alert-module_light__VKCXF {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Alert-module_contained__EM0x6.Alert-module_dark__3c-Hm {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n\n.Alert-module_outline__T2262.Alert-module_primary__q4pNj {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important;\n}\n.Alert-module_outline__T2262.Alert-module_secondary__syXKX {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important;\n}\n.Alert-module_outline__T2262.Alert-module_accent__a2WIl {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important;\n}\n.Alert-module_outline__T2262.Alert-module_light__VKCXF {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important;\n}\n.Alert-module_outline__T2262.Alert-module_dark__3c-Hm {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important;\n}";
|
|
99
|
+
var styles$13 = {"alert":"Alert-module_alert__b4tbk","shadow":"Alert-module_shadow__5bz-7","contained":"Alert-module_contained__EM0x6","primary":"Alert-module_primary__q4pNj","accent":"Alert-module_accent__a2WIl","secondary":"Alert-module_secondary__syXKX","light":"Alert-module_light__VKCXF","dark":"Alert-module_dark__3c-Hm","outline":"Alert-module_outline__T2262"};
|
|
100
|
+
styleInject(css_248z$13);
|
|
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$13.alert);
|
|
107
107
|
if (variant === exports.VARIANT.contained) {
|
|
108
|
-
cssClasses.push(styles$
|
|
109
|
-
cssClasses.push(styles$
|
|
108
|
+
cssClasses.push(styles$13.contained);
|
|
109
|
+
cssClasses.push(styles$13[color]);
|
|
110
110
|
}
|
|
111
111
|
if (variant === exports.VARIANT.outline) {
|
|
112
|
-
cssClasses.push(styles$
|
|
113
|
-
cssClasses.push(styles$
|
|
112
|
+
cssClasses.push(styles$13.outline);
|
|
113
|
+
cssClasses.push(styles$13[color]);
|
|
114
114
|
}
|
|
115
|
-
shadow && cssClasses.push(styles$
|
|
115
|
+
shadow && cssClasses.push(styles$13['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$12 = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem var(--1);\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0;\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: 0 4px 2px -2px var(--sadowColor);\n}";
|
|
123
|
+
var styles$12 = {"appbar":"AppBar-module_appbar__Neyh3","primary":"AppBar-module_primary__xMqXD","secondary":"AppBar-module_secondary__8MkLA","accent":"AppBar-module_accent__vHbkp","light":"AppBar-module_light__HGy3y","dark":"AppBar-module_dark__ILq96","shadow":"AppBar-module_shadow__gQN8s"};
|
|
124
|
+
styleInject(css_248z$12);
|
|
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$12[color]);
|
|
131
|
+
cssClasses.push(styles$12.appbar);
|
|
132
|
+
shadow && cssClasses.push(styles$12['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$11 = ".AppBarTitle-module_appbarTitle__RsFg5 {\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n font-size: 1.25rem;\n line-height: 1.8;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden !important;\n display: inline-block;\n}\n.AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer;\n}";
|
|
140
|
+
var styles$11 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
141
|
+
styleInject(css_248z$11);
|
|
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$11.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$10 = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px;\n}\n.Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit;\n}\n.Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary);\n}\n.Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent);\n}\n.Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary);\n}\n.Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light);\n}\n.Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark);\n}";
|
|
155
|
+
var styles$10 = {"icon":"Icon-module_icon__lFKCA","primary":"Icon-module_primary__3fID-","accent":"Icon-module_accent__aZXGb","secondary":"Icon-module_secondary__HKKop","light":"Icon-module_light__-ApMm","dark":"Icon-module_dark__DpCIK"};
|
|
156
|
+
styleInject(css_248z$10);
|
|
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$10.icon);
|
|
163
|
+
iconColor && cssClasses.push(styles$10[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$$ = ".IconButton-module_iconButton__rpCPQ {\n border-radius: 100%;\n padding: 0px;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n min-width: auto;\n box-shadow: none;\n font-weight: 400;\n text-align: center;\n vertical-align: middle;\n -webkit-user-select: none;\n user-select: none;\n background-color: transparent;\n font-size: 1rem;\n line-height: 1.5;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: none;\n}\n.IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n color: var(--dark-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n background-color: var(--primary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n background-color: var(--secondary-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n background-color: var(--accent-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n background-color: var(--light-dark);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n background-color: var(--dark-light);\n}\n.IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none;\n}\n.IconButton-module_iconButton__rpCPQ:focus:not(.IconButton-module_iconButton__rpCPQ.IconButton-module_disabled__QB0ZV) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}";
|
|
171
|
+
var styles$$ = {"iconButton":"IconButton-module_iconButton__rpCPQ","shadow":"IconButton-module_shadow__Uw0RK","md":"IconButton-module_md__XnuSk","lg":"IconButton-module_lg__arEvo","text":"IconButton-module_text__Ualag","active":"IconButton-module_active__VIqU9","primary":"IconButton-module_primary__vbo-G","secondary":"IconButton-module_secondary__AiNAY","accent":"IconButton-module_accent__QRzM2","light":"IconButton-module_light__YNEiO","dark":"IconButton-module_dark__gnbUH","disabled":"IconButton-module_disabled__QB0ZV","contained":"IconButton-module_contained__k7vGA"};
|
|
172
|
+
styleInject(css_248z$$);
|
|
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$$[color]);
|
|
179
|
+
cssClasses.push(styles$$[variant]);
|
|
180
|
+
cssClasses.push(styles$$[size]);
|
|
181
|
+
cssClasses.push(styles$$.iconButton);
|
|
182
|
+
isActive && cssClasses.push(styles$$.active);
|
|
183
|
+
disabled && cssClasses.push(styles$$.disabled);
|
|
184
|
+
shadow && cssClasses.push(styles$$.shadow);
|
|
185
185
|
className && cssClasses.push(className);
|
|
186
186
|
return cssClasses.filter(css => css).join(' ');
|
|
187
187
|
};
|
|
@@ -328,9 +328,9 @@ const Portal = ({ children, target = document.body, className }) => {
|
|
|
328
328
|
return reactDom.createPortal(children, containerEl);
|
|
329
329
|
};
|
|
330
330
|
|
|
331
|
-
var css_248z$
|
|
332
|
-
var styles$
|
|
333
|
-
styleInject(css_248z$
|
|
331
|
+
var css_248z$_ = ".Backdrop-module_backdrop__IRMoL {\n height: 100%;\n width: 100%;\n position: absolute;\n opacity: 0.5;\n z-index: 1040;\n top: 0;\n left: 0;\n background-color: #000;\n}\n.Backdrop-module_backdrop__IRMoL.Backdrop-module_isTransparent__F5nA5 {\n opacity: 0;\n}";
|
|
332
|
+
var styles$_ = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
333
|
+
styleInject(css_248z$_);
|
|
334
334
|
|
|
335
335
|
const Backdrop = (props) => {
|
|
336
336
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -340,8 +340,8 @@ const Backdrop = (props) => {
|
|
|
340
340
|
};
|
|
341
341
|
const getCssClasses = () => {
|
|
342
342
|
const cssClasses = [];
|
|
343
|
-
cssClasses.push(styles$
|
|
344
|
-
isTransparent && cssClasses.push(styles$
|
|
343
|
+
cssClasses.push(styles$_.backdrop);
|
|
344
|
+
isTransparent && cssClasses.push(styles$_['isTransparent']);
|
|
345
345
|
return cssClasses.filter(css => css).join(' ');
|
|
346
346
|
};
|
|
347
347
|
const getStyles = () => {
|
|
@@ -351,34 +351,34 @@ const Backdrop = (props) => {
|
|
|
351
351
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
|
|
352
352
|
};
|
|
353
353
|
|
|
354
|
-
var css_248z
|
|
355
|
-
var styles
|
|
356
|
-
styleInject(css_248z
|
|
354
|
+
var css_248z$Z = ".List-module_list__gpZ41 {\n width: 100%;\n display: flex;\n flex-direction: column;\n padding-left: 0;\n margin-bottom: 0;\n margin-top: 0;\n background-color: var(--white);\n}";
|
|
355
|
+
var styles$Z = {"list":"List-module_list__gpZ41"};
|
|
356
|
+
styleInject(css_248z$Z);
|
|
357
357
|
|
|
358
358
|
const List = (props) => {
|
|
359
359
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
360
360
|
const getCssClasses = () => {
|
|
361
361
|
const cssClasses = [];
|
|
362
|
-
isFlush && cssClasses.push(styles
|
|
363
|
-
cssClasses.push(styles
|
|
362
|
+
isFlush && cssClasses.push(styles$Z.flush);
|
|
363
|
+
cssClasses.push(styles$Z.list);
|
|
364
364
|
className && cssClasses.push(className);
|
|
365
365
|
return cssClasses.filter(css => css).join(' ');
|
|
366
366
|
};
|
|
367
367
|
return (React__default["default"].createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
368
368
|
};
|
|
369
369
|
|
|
370
|
-
var css_248z$
|
|
371
|
-
var styles$
|
|
372
|
-
styleInject(css_248z$
|
|
370
|
+
var css_248z$Y = ".ListItem-module_listItem__Pk1AP {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease;\n}\n.ListItem-module_listItem__Pk1AP:hover, .ListItem-module_listItem__Pk1AP.ListItem-module_active__zm2q8 {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0;\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26);\n}\n.ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit;\n}";
|
|
371
|
+
var styles$Y = {"listItem":"ListItem-module_listItem__Pk1AP","active":"ListItem-module_active__zm2q8","primary":"ListItem-module_primary__F6Qja","accent":"ListItem-module_accent__pg3Ha","secondary":"ListItem-module_secondary__d0drD","light":"ListItem-module_light__37kby","dark":"ListItem-module_dark__ZxQTF","disabled":"ListItem-module_disabled__DQLKl"};
|
|
372
|
+
styleInject(css_248z$Y);
|
|
373
373
|
|
|
374
374
|
const ListItem = (props) => {
|
|
375
375
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
376
376
|
const getCssClasses = () => {
|
|
377
377
|
const cssClasses = [];
|
|
378
|
-
cssClasses.push(styles$
|
|
379
|
-
color && cssClasses.push(styles$
|
|
380
|
-
active && cssClasses.push(styles$
|
|
381
|
-
disabled && cssClasses.push(styles$
|
|
378
|
+
cssClasses.push(styles$Y.listItem);
|
|
379
|
+
color && cssClasses.push(styles$Y[color]);
|
|
380
|
+
active && cssClasses.push(styles$Y['active']);
|
|
381
|
+
disabled && cssClasses.push(styles$Y['disabled']);
|
|
382
382
|
className && cssClasses.push(className);
|
|
383
383
|
return cssClasses.filter(css => css).join(' ');
|
|
384
384
|
};
|
|
@@ -388,42 +388,42 @@ const ListItem = (props) => {
|
|
|
388
388
|
return (React__default["default"].createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
389
389
|
};
|
|
390
390
|
|
|
391
|
-
var css_248z$
|
|
392
|
-
var styles$
|
|
393
|
-
styleInject(css_248z$
|
|
391
|
+
var css_248z$X = ".ListItemAvatar-module_avatar__sVWfR {\n display: flex;\n align-items: center;\n margin-right: 16px;\n}\n.ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px;\n}\n.ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%;\n}";
|
|
392
|
+
var styles$X = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
393
|
+
styleInject(css_248z$X);
|
|
394
394
|
|
|
395
395
|
const ListItemAvatar = (_a) => {
|
|
396
396
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
397
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
397
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$X.avatar }, rest), avatar));
|
|
398
398
|
};
|
|
399
399
|
|
|
400
|
-
var css_248z$
|
|
401
|
-
var styles$
|
|
402
|
-
styleInject(css_248z$
|
|
400
|
+
var css_248z$W = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px;\n}\n.ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px;\n}";
|
|
401
|
+
var styles$W = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
402
|
+
styleInject(css_248z$W);
|
|
403
403
|
|
|
404
404
|
const ListItemIcon = (_a) => {
|
|
405
405
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
406
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
406
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$W.icon }, rest), icon));
|
|
407
407
|
};
|
|
408
408
|
|
|
409
|
-
var css_248z$
|
|
410
|
-
var styles$
|
|
411
|
-
styleInject(css_248z$
|
|
409
|
+
var css_248z$V = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px;\n}\n.ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px;\n}";
|
|
410
|
+
var styles$V = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
411
|
+
styleInject(css_248z$V);
|
|
412
412
|
|
|
413
413
|
const ListItemAction = (_a) => {
|
|
414
414
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
415
|
-
return (React__default["default"].createElement("div", Object.assign({ className: styles$
|
|
415
|
+
return (React__default["default"].createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
416
416
|
};
|
|
417
417
|
|
|
418
|
-
var css_248z$
|
|
419
|
-
var styles$
|
|
420
|
-
styleInject(css_248z$
|
|
418
|
+
var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
419
|
+
var styles$U = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
420
|
+
styleInject(css_248z$U);
|
|
421
421
|
|
|
422
422
|
const ListItemText = (_a) => {
|
|
423
423
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
424
424
|
const getCssClasses = () => {
|
|
425
425
|
const cssClasses = [];
|
|
426
|
-
cssClasses.push(styles$
|
|
426
|
+
cssClasses.push(styles$U.listItemText);
|
|
427
427
|
return cssClasses.filter(css => css).join(' ');
|
|
428
428
|
};
|
|
429
429
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -434,9 +434,9 @@ const ListItemText = (_a) => {
|
|
|
434
434
|
const ListItemTextPrimary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-primary" }, children));
|
|
435
435
|
const ListItemTextSecondary = ({ children }) => (React__default["default"].createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
436
436
|
|
|
437
|
-
var css_248z$
|
|
438
|
-
var styles$
|
|
439
|
-
styleInject(css_248z$
|
|
437
|
+
var css_248z$T = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative;\n}\n\n.AutoComplete-module_select__NNYOi {\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n}\n.AutoComplete-module_select__NNYOi:hover {\n cursor: pointer;\n}\n.AutoComplete-module_select__NNYOi:focus:not(.AutoComplete-module_select__NNYOi.AutoComplete-module_disabled__CbGP4) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.AutoComplete-module_select__NNYOi:disabled, .AutoComplete-module_select__NNYOi:read-only {\n background-color: #e9ecef;\n}\n.AutoComplete-module_select__NNYOi:disabled:hover {\n cursor: not-allowed;\n}\n.AutoComplete-module_select__NNYOi:read-only:hover {\n cursor: inherit;\n}\n\n.AutoComplete-module_selectMenu__Gu81L {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 38px;\n z-index: 1050;\n max-height: 280px;\n overflow: auto;\n}";
|
|
438
|
+
var styles$T = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
439
|
+
styleInject(css_248z$T);
|
|
440
440
|
|
|
441
441
|
// preset value
|
|
442
442
|
// enter -> delay? -> show results
|
|
@@ -459,7 +459,9 @@ const AutoComplete = (props) => {
|
|
|
459
459
|
React.useEffect(() => {
|
|
460
460
|
setOptions(options);
|
|
461
461
|
}, [options]);
|
|
462
|
-
useDebounce(() => {
|
|
462
|
+
useDebounce(() => {
|
|
463
|
+
onChange && onChange(searchText);
|
|
464
|
+
}, debounce, [searchText]);
|
|
463
465
|
React.useEffect(() => {
|
|
464
466
|
if (isShow === true) {
|
|
465
467
|
document.body.classList.add('modal-open');
|
|
@@ -482,7 +484,7 @@ const AutoComplete = (props) => {
|
|
|
482
484
|
const getCssClass = () => {
|
|
483
485
|
const cssClasses = [];
|
|
484
486
|
className && cssClasses.push(className);
|
|
485
|
-
cssClasses.push(styles$
|
|
487
|
+
cssClasses.push(styles$T.select);
|
|
486
488
|
return cssClasses.filter(r => r).join(' ');
|
|
487
489
|
};
|
|
488
490
|
const show = () => setIsShow(true);
|
|
@@ -506,28 +508,28 @@ const AutoComplete = (props) => {
|
|
|
506
508
|
setModel('');
|
|
507
509
|
setSearchText('');
|
|
508
510
|
};
|
|
509
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
511
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$T.selectContainer },
|
|
510
512
|
React__default["default"].createElement("div", { className: "d-flex" },
|
|
511
513
|
React__default["default"].createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
512
514
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
513
515
|
React__default["default"].createElement(IconButton, { icon: React__default["default"].createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
514
516
|
isShow &&
|
|
515
517
|
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
516
|
-
React__default["default"].createElement("div", { className: styles$
|
|
518
|
+
React__default["default"].createElement("div", { className: styles$T.selectMenu },
|
|
517
519
|
React__default["default"].createElement(List, null, _options && _options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
518
520
|
React__default["default"].createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
519
521
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
520
522
|
};
|
|
521
523
|
|
|
522
|
-
var css_248z$
|
|
523
|
-
var styles$
|
|
524
|
-
styleInject(css_248z$
|
|
524
|
+
var css_248z$S = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle;\n}\n\n.Badge-module_badge__9ImR0 {\n top: 0;\n right: 0;\n transform: scale(1) translate(50%, -50%);\n transform-origin: 100% 0%;\n height: 20px;\n display: flex;\n padding: 0 6px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n align-items: center;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n border-radius: 10px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n.Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}";
|
|
525
|
+
var styles$S = {"badgeContainer":"Badge-module_badgeContainer__3nZBs","badge":"Badge-module_badge__9ImR0","primary":"Badge-module_primary__41U-t","accent":"Badge-module_accent__OQy2-","secondary":"Badge-module_secondary__a9Jfh","light":"Badge-module_light__4QvQ5","dark":"Badge-module_dark__g1yUJ"};
|
|
526
|
+
styleInject(css_248z$S);
|
|
525
527
|
|
|
526
528
|
const Badge = (props) => {
|
|
527
529
|
const { children, content, className, color = exports.COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
528
530
|
const [cssClassName] = useCssClasses([
|
|
529
|
-
styles$
|
|
530
|
-
styles$
|
|
531
|
+
styles$S.badge,
|
|
532
|
+
styles$S[color],
|
|
531
533
|
className
|
|
532
534
|
]);
|
|
533
535
|
return (React__default["default"].createElement(BadgeContainer, null,
|
|
@@ -537,15 +539,15 @@ const Badge = (props) => {
|
|
|
537
539
|
const BadgeContainer = (props) => {
|
|
538
540
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
539
541
|
const [cssClassName] = useCssClasses([
|
|
540
|
-
styles$
|
|
542
|
+
styles$S.badgeContainer,
|
|
541
543
|
className,
|
|
542
544
|
]);
|
|
543
545
|
return (React__default["default"].createElement("div", Object.assign({ className: cssClassName }, rest), children));
|
|
544
546
|
};
|
|
545
547
|
|
|
546
|
-
var css_248z$
|
|
547
|
-
var styles$
|
|
548
|
-
styleInject(css_248z$
|
|
548
|
+
var css_248z$R = ".Button-module_button__qeIer {\n text-transform: uppercase;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius);\n}\n.Button-module_button__qeIer.Button-module_shadow__6N2nE {\n box-shadow: var(--shadow);\n}\n.Button-module_button__qeIer.Button-module_block__JIazf {\n width: 100%;\n}\n.Button-module_button__qeIer:hover:not(:disabled) {\n cursor: pointer;\n}\n.Button-module_button__qeIer:focus:not(:disabled) {\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary);\n}\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover:not(:disabled) {\n background-color: var(--primary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent);\n}\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover:not(:disabled) {\n background-color: var(--accent-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary);\n}\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background-color: var(--secondary-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover:not(:disabled) {\n background-color: var(--light-dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover:not(:disabled) {\n background-color: var(--dark-dark);\n}\n.Button-module_btnContained__16y5l:disabled {\n color: rgba(0, 0, 0, 0.26);\n box-shadow: none;\n background-color: rgba(0, 0, 0, 0.12);\n}\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed;\n}\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary);\n}\n.Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover:not(:disabled) {\n text-decoration: none;\n background: var(--primary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary);\n}\n.Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover:not(:disabled) {\n text-decoration: none;\n background: var(--secondary-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent);\n}\n.Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover:not(:disabled) {\n text-decoration: none;\n background: var(--accent-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n}\n.Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover:not(:disabled) {\n text-decoration: none;\n background: var(--light-highlight);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark);\n}\n.Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover:not(:disabled) {\n text-decoration: none;\n background: var(--dark-highlight);\n}\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none;\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary);\n border-color: var(--primary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover:not(:disabled) {\n background: var(--primary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary);\n border-color: var(--secondary);\n}\n.Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover:not(:disabled) {\n background: var(--secondary-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent);\n border-color: var(--accent);\n}\n.Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover:not(:disabled) {\n background: var(--accent-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n border-color: var(--light);\n}\n.Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover:not(:disabled) {\n background: var(--light-highlight);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark);\n border-color: var(--dark);\n}\n.Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover:not(:disabled) {\n background: var(--dark-highlight);\n}\n.Button-module_btnOutline__CCFPI:disabled {\n color: rgba(0, 0, 0, 0.26);\n border: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px;\n}\n.Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px;\n}\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px;\n}\n.Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px;\n}";
|
|
549
|
+
var styles$R = {"button":"Button-module_button__qeIer","shadow":"Button-module_shadow__6N2nE","block":"Button-module_block__JIazf","btnContained":"Button-module_btnContained__16y5l","primary":"Button-module_primary__EUyOu","accent":"Button-module_accent__opVgQ","secondary":"Button-module_secondary__zKoGk","light":"Button-module_light__LXeZy","dark":"Button-module_dark__5oFOT","btnText":"Button-module_btnText__N5Gys","btnOutline":"Button-module_btnOutline__CCFPI","startIcon":"Button-module_startIcon__Eylwr","endIcon":"Button-module_endIcon__pCffL"};
|
|
550
|
+
styleInject(css_248z$R);
|
|
549
551
|
|
|
550
552
|
const ButtonContext = React.createContext({
|
|
551
553
|
color: null
|
|
@@ -557,19 +559,19 @@ const Button = (props) => {
|
|
|
557
559
|
const buttonContext = useButtonContext();
|
|
558
560
|
const getCssClasses = () => {
|
|
559
561
|
const cssClasses = [];
|
|
560
|
-
cssClasses.push(styles$
|
|
562
|
+
cssClasses.push(styles$R.button);
|
|
561
563
|
const buttonColor = buttonContext.color || color;
|
|
562
564
|
if (variant !== 'outline' && variant !== 'text') {
|
|
563
|
-
cssClasses.push(styles$
|
|
564
|
-
cssClasses.push(styles$
|
|
565
|
+
cssClasses.push(styles$R.btnContained);
|
|
566
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
565
567
|
}
|
|
566
568
|
if (variant === 'outline') {
|
|
567
|
-
cssClasses.push(styles$
|
|
568
|
-
cssClasses.push(styles$
|
|
569
|
+
cssClasses.push(styles$R.btnOutline);
|
|
570
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
569
571
|
}
|
|
570
572
|
if (variant === 'text') {
|
|
571
|
-
cssClasses.push(styles$
|
|
572
|
-
cssClasses.push(styles$
|
|
573
|
+
cssClasses.push(styles$R.btnText);
|
|
574
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
573
575
|
}
|
|
574
576
|
if (isRounded && variant !== 'text') {
|
|
575
577
|
cssClasses.push(`rounded-pill`);
|
|
@@ -577,29 +579,29 @@ const Button = (props) => {
|
|
|
577
579
|
if (isActive) {
|
|
578
580
|
cssClasses.push('active');
|
|
579
581
|
}
|
|
580
|
-
shadow && cssClasses.push(styles$
|
|
581
|
-
block && cssClasses.push(styles$
|
|
582
|
+
shadow && cssClasses.push(styles$R.shadow);
|
|
583
|
+
block && cssClasses.push(styles$R.block);
|
|
582
584
|
className && cssClasses.push(className);
|
|
583
585
|
return cssClasses.filter(css => css).join(' ');
|
|
584
586
|
};
|
|
585
587
|
return (React__default["default"].createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
586
588
|
React__default["default"].createElement("span", { className: "d-flex justify-content-center" },
|
|
587
589
|
startIcon &&
|
|
588
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
590
|
+
React__default["default"].createElement(Icon, { className: styles$R.startIcon }, startIcon),
|
|
589
591
|
children,
|
|
590
592
|
endIcon &&
|
|
591
|
-
React__default["default"].createElement(Icon, { className: styles$
|
|
593
|
+
React__default["default"].createElement(Icon, { className: styles$R.endIcon }, endIcon))));
|
|
592
594
|
};
|
|
593
595
|
|
|
594
|
-
var css_248z$
|
|
595
|
-
var styles$
|
|
596
|
-
styleInject(css_248z$
|
|
596
|
+
var css_248z$Q = ".ButtonGroup-module_buttonGroup__w6iB- {\n display: inline-flex;\n border-radius: 4px;\n box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.ButtonGroup-module_buttonGroup__w6iB- button:not(:last-of-type) {\n border-right: 1px solid #bdbdbd;\n}";
|
|
597
|
+
var styles$Q = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
598
|
+
styleInject(css_248z$Q);
|
|
597
599
|
|
|
598
600
|
const ButtonGroup = (props) => {
|
|
599
601
|
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
600
602
|
const getCssClasses = () => {
|
|
601
603
|
const cssClasses = [];
|
|
602
|
-
cssClasses.push(styles$
|
|
604
|
+
cssClasses.push(styles$Q.buttonGroup);
|
|
603
605
|
className && cssClasses.push(className);
|
|
604
606
|
return cssClasses.filter(css => css).join(' ');
|
|
605
607
|
};
|
|
@@ -607,15 +609,15 @@ const ButtonGroup = (props) => {
|
|
|
607
609
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
608
610
|
};
|
|
609
611
|
|
|
610
|
-
var css_248z$
|
|
611
|
-
var styles$
|
|
612
|
-
styleInject(css_248z$
|
|
612
|
+
var css_248z$P = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0;\n}";
|
|
613
|
+
var styles$P = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
614
|
+
styleInject(css_248z$P);
|
|
613
615
|
|
|
614
616
|
const Breadcrumb = (props) => {
|
|
615
617
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
616
618
|
const getCssClasses = () => {
|
|
617
619
|
const cssClasses = [];
|
|
618
|
-
cssClasses.push(styles$
|
|
620
|
+
cssClasses.push(styles$P.breadcrumb);
|
|
619
621
|
className && cssClasses.push(className);
|
|
620
622
|
return cssClasses.filter(css => css).join(' ');
|
|
621
623
|
};
|
|
@@ -625,15 +627,15 @@ const Breadcrumb = (props) => {
|
|
|
625
627
|
|
|
626
628
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
627
629
|
|
|
628
|
-
var css_248z$
|
|
629
|
-
var styles$
|
|
630
|
-
styleInject(css_248z$
|
|
630
|
+
var css_248z$O = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\";\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary);\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer;\n}\n.BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset;\n}";
|
|
631
|
+
var styles$O = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
632
|
+
styleInject(css_248z$O);
|
|
631
633
|
|
|
632
634
|
const BreadcrumbItem = (props) => {
|
|
633
635
|
const { children, className, isActive, onClick } = props;
|
|
634
636
|
const getCssClasses = () => {
|
|
635
637
|
const cssClasses = [];
|
|
636
|
-
cssClasses.push(styles$
|
|
638
|
+
cssClasses.push(styles$O.breadcrumbItem);
|
|
637
639
|
className && cssClasses.push(className);
|
|
638
640
|
isActive && cssClasses.push('active');
|
|
639
641
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -645,115 +647,115 @@ const BreadcrumbItem = (props) => {
|
|
|
645
647
|
React__default["default"].createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React__default["default"].createElement("a", null, label) }, children)));
|
|
646
648
|
};
|
|
647
649
|
|
|
648
|
-
var css_248z$
|
|
649
|
-
var styles$
|
|
650
|
-
styleInject(css_248z$
|
|
650
|
+
var css_248z$N = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius);\n}\n.Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow);\n}";
|
|
651
|
+
var styles$N = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
652
|
+
styleInject(css_248z$N);
|
|
651
653
|
|
|
652
654
|
const Card = (props) => {
|
|
653
655
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
654
656
|
const getCssClasses = () => {
|
|
655
657
|
const cssClasses = [];
|
|
656
|
-
cssClasses.push(styles$
|
|
657
|
-
shadow && cssClasses.push(styles$
|
|
658
|
+
cssClasses.push(styles$N.card);
|
|
659
|
+
shadow && cssClasses.push(styles$N.shadow);
|
|
658
660
|
className && cssClasses.push(className);
|
|
659
661
|
return cssClasses.filter(css => css).join(' ');
|
|
660
662
|
};
|
|
661
663
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
662
664
|
};
|
|
663
665
|
|
|
664
|
-
var css_248z$
|
|
665
|
-
var styles$
|
|
666
|
-
styleInject(css_248z$
|
|
666
|
+
var css_248z$M = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
667
|
+
var styles$M = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
668
|
+
styleInject(css_248z$M);
|
|
667
669
|
|
|
668
670
|
const CardBody = (props) => {
|
|
669
671
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
670
672
|
const getCssClasses = () => {
|
|
671
673
|
const cssClasses = [];
|
|
672
|
-
cssClasses.push(styles$
|
|
674
|
+
cssClasses.push(styles$M.cardBody);
|
|
673
675
|
className && cssClasses.push(className);
|
|
674
676
|
return cssClasses.filter(css => css).join(' ');
|
|
675
677
|
};
|
|
676
678
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
677
679
|
};
|
|
678
680
|
|
|
679
|
-
var css_248z$
|
|
680
|
-
var styles$
|
|
681
|
-
styleInject(css_248z$
|
|
681
|
+
var css_248z$L = ".CardFooter-module_cardFooter__BpOTG {\n padding: 0.75rem 1.25rem;\n background-color: rgba(0, 0, 0, 0.03);\n border-top: 1px solid rgba(0, 0, 0, 0.125);\n}\n.CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);\n}";
|
|
682
|
+
var styles$L = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
683
|
+
styleInject(css_248z$L);
|
|
682
684
|
|
|
683
685
|
const CardFooter = (props) => {
|
|
684
686
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
685
687
|
const getCssClasses = () => {
|
|
686
688
|
const cssClasses = [];
|
|
687
|
-
cssClasses.push(styles$
|
|
689
|
+
cssClasses.push(styles$L.cardFooter);
|
|
688
690
|
className && cssClasses.push(className);
|
|
689
691
|
return cssClasses.filter(css => css).join(' ');
|
|
690
692
|
};
|
|
691
693
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
692
694
|
};
|
|
693
695
|
|
|
694
|
-
var css_248z$
|
|
695
|
-
var styles$
|
|
696
|
-
styleInject(css_248z$
|
|
696
|
+
var css_248z$K = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
697
|
+
var styles$K = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
698
|
+
styleInject(css_248z$K);
|
|
697
699
|
|
|
698
700
|
const CardSubtitle = (props) => {
|
|
699
701
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
700
702
|
const getCssClasses = () => {
|
|
701
703
|
const cssClasses = [];
|
|
702
|
-
cssClasses.push(styles$
|
|
704
|
+
cssClasses.push(styles$K.cardSubtitle);
|
|
703
705
|
className && cssClasses.push(className);
|
|
704
706
|
return cssClasses.filter(css => css).join(' ');
|
|
705
707
|
};
|
|
706
708
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
707
709
|
};
|
|
708
710
|
|
|
709
|
-
var css_248z$
|
|
710
|
-
var styles$
|
|
711
|
-
styleInject(css_248z$
|
|
711
|
+
var css_248z$J = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
712
|
+
var styles$J = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
713
|
+
styleInject(css_248z$J);
|
|
712
714
|
|
|
713
715
|
const CardText = (props) => {
|
|
714
716
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
715
717
|
const getCssClasses = () => {
|
|
716
718
|
const cssClasses = [];
|
|
717
|
-
cssClasses.push(styles$
|
|
719
|
+
cssClasses.push(styles$J.cardText);
|
|
718
720
|
className && cssClasses.push(className);
|
|
719
721
|
return cssClasses.filter(css => css).join(' ');
|
|
720
722
|
};
|
|
721
723
|
return (React__default["default"].createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
722
724
|
};
|
|
723
725
|
|
|
724
|
-
var css_248z$
|
|
725
|
-
var styles$
|
|
726
|
-
styleInject(css_248z$
|
|
726
|
+
var css_248z$I = ".CardTitle-module_cardTitle__aiPSE {\n margin-bottom: 0;\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 1.334;\n letter-spacing: 0em;\n}";
|
|
727
|
+
var styles$I = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
728
|
+
styleInject(css_248z$I);
|
|
727
729
|
|
|
728
730
|
const CardTitle = (props) => {
|
|
729
731
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
730
732
|
const getCssClasses = () => {
|
|
731
733
|
const cssClasses = [];
|
|
732
|
-
cssClasses.push(styles$
|
|
734
|
+
cssClasses.push(styles$I.cardTitle);
|
|
733
735
|
className && cssClasses.push(className);
|
|
734
736
|
return cssClasses.filter(css => css).join(' ');
|
|
735
737
|
};
|
|
736
738
|
return (React__default["default"].createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
737
739
|
};
|
|
738
740
|
|
|
739
|
-
var css_248z$
|
|
740
|
-
var styles$
|
|
741
|
-
styleInject(css_248z$
|
|
741
|
+
var css_248z$H = ".CardImage-module_cardImage__Z6JWW {\n flex-shrink: 0;\n width: 100%;\n border-top-left-radius: calc(0.25rem - 1px);\n border-top-right-radius: calc(0.25rem - 1px);\n}";
|
|
742
|
+
var styles$H = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
743
|
+
styleInject(css_248z$H);
|
|
742
744
|
|
|
743
745
|
const CardImage = (props) => {
|
|
744
746
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
745
747
|
const getCssClasses = () => {
|
|
746
748
|
const cssClasses = [];
|
|
747
|
-
cssClasses.push(styles$
|
|
749
|
+
cssClasses.push(styles$H.cardImage);
|
|
748
750
|
className && cssClasses.push(className);
|
|
749
751
|
return cssClasses.filter(css => css).join(' ');
|
|
750
752
|
};
|
|
751
753
|
return (React__default["default"].createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
752
754
|
};
|
|
753
755
|
|
|
754
|
-
var css_248z$
|
|
755
|
-
var styles$
|
|
756
|
-
styleInject(css_248z$
|
|
756
|
+
var css_248z$G = ".Checkbox-module_checkboxContainer__x2GCi {\n display: flex;\n align-items: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n}\n\n.Checkbox-module_checkboxLabel__nPY4k:hover {\n cursor: pointer;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG {\n color: rgba(0, 0, 0, 0.26);\n cursor: not-allowed;\n}\n.Checkbox-module_checkboxLabel__nPY4k.Checkbox-module_disabled__wnFIG:hover {\n cursor: not-allowed;\n}";
|
|
757
|
+
var styles$G = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
758
|
+
styleInject(css_248z$G);
|
|
757
759
|
|
|
758
760
|
const Checkbox = (props) => {
|
|
759
761
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -782,8 +784,8 @@ const Checkbox = (props) => {
|
|
|
782
784
|
};
|
|
783
785
|
const getCssClassesLabel = () => {
|
|
784
786
|
const cssClasses = [];
|
|
785
|
-
cssClasses.push(styles$
|
|
786
|
-
disabled && cssClasses.push(styles$
|
|
787
|
+
cssClasses.push(styles$G.checkboxLabel);
|
|
788
|
+
disabled && cssClasses.push(styles$G['disabled']);
|
|
787
789
|
return cssClasses.filter(css => css).join(' ');
|
|
788
790
|
};
|
|
789
791
|
const getIcon = () => {
|
|
@@ -796,24 +798,24 @@ const Checkbox = (props) => {
|
|
|
796
798
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
797
799
|
}
|
|
798
800
|
};
|
|
799
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
801
|
+
return (React__default["default"].createElement("div", { className: styles$G.checkboxContainer },
|
|
800
802
|
React__default["default"].createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
801
803
|
React__default["default"].createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
802
804
|
React__default["default"].createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
803
805
|
};
|
|
804
806
|
|
|
805
|
-
var css_248z$
|
|
806
|
-
var styles$
|
|
807
|
-
styleInject(css_248z$
|
|
807
|
+
var css_248z$F = ".Chip-module_chip__dZ5qz {\n display: inline-flex;\n align-items: center;\n padding: 0.5rem;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n font-size: 75%;\n font-weight: 700;\n border-radius: 10rem;\n line-height: 1;\n}\n.Chip-module_chip__dZ5qz span {\n margin-bottom: 2px;\n}\n.Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px;\n}\n.Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text);\n}\n.Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light);\n}\n.Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer;\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark);\n}\n.Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow);\n}";
|
|
808
|
+
var styles$F = {"chip":"Chip-module_chip__dZ5qz","deleteIcon":"Chip-module_deleteIcon__--rUx","primary":"Chip-module_primary__YVDi9","secondary":"Chip-module_secondary__-e4xP","accent":"Chip-module_accent__ZCTwu","light":"Chip-module_light__vKs7O","dark":"Chip-module_dark__G-FLQ","clickable":"Chip-module_clickable__qAqVH","shadow":"Chip-module_shadow__v11NF"};
|
|
809
|
+
styleInject(css_248z$F);
|
|
808
810
|
|
|
809
811
|
const Chip = (props) => {
|
|
810
812
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React__default["default"].createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
811
813
|
const getCssClass = () => {
|
|
812
814
|
const cssClasses = [];
|
|
813
|
-
cssClasses.push(styles$
|
|
814
|
-
cssClasses.push(styles$
|
|
815
|
-
shadow && cssClasses.push(styles$
|
|
816
|
-
onClick && cssClasses.push(styles$
|
|
815
|
+
cssClasses.push(styles$F.chip);
|
|
816
|
+
cssClasses.push(styles$F[color]);
|
|
817
|
+
shadow && cssClasses.push(styles$F['shadow']);
|
|
818
|
+
onClick && cssClasses.push(styles$F['clickable']);
|
|
817
819
|
className && cssClasses.push(className);
|
|
818
820
|
return cssClasses.filter(r => r).join(' ');
|
|
819
821
|
};
|
|
@@ -823,7 +825,7 @@ const Chip = (props) => {
|
|
|
823
825
|
};
|
|
824
826
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
825
827
|
React__default["default"].createElement("span", null, children),
|
|
826
|
-
isDeletable && (React__default["default"].createElement("div", { className: styles$
|
|
828
|
+
isDeletable && (React__default["default"].createElement("div", { className: styles$F.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
827
829
|
};
|
|
828
830
|
|
|
829
831
|
const CssTransition = (props) => {
|
|
@@ -901,9 +903,9 @@ const CssTransition = (props) => {
|
|
|
901
903
|
React__default["default"].createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
902
904
|
};
|
|
903
905
|
|
|
904
|
-
var css_248z$
|
|
905
|
-
var styles$
|
|
906
|
-
styleInject(css_248z$
|
|
906
|
+
var css_248z$E = ".Column-module_column__fcTgl {\n flex: 1 0 0%;\n}\n\n@media (max-width: 575.98px) {\n .Column-module_column__fcTgl {\n flex: 1;\n }\n}";
|
|
907
|
+
var styles$E = {"column":"Column-module_column__fcTgl"};
|
|
908
|
+
styleInject(css_248z$E);
|
|
907
909
|
|
|
908
910
|
const Column = (props) => {
|
|
909
911
|
const { children, className } = props,
|
|
@@ -921,22 +923,22 @@ const Column = (props) => {
|
|
|
921
923
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
922
924
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
923
925
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
924
|
-
cssClasses.push(styles$
|
|
926
|
+
cssClasses.push(styles$E.column);
|
|
925
927
|
className && cssClasses.push(className);
|
|
926
928
|
return cssClasses.filter(css => css).join(' ');
|
|
927
929
|
};
|
|
928
930
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
929
931
|
};
|
|
930
932
|
|
|
931
|
-
var css_248z$
|
|
932
|
-
var styles$
|
|
933
|
-
styleInject(css_248z$
|
|
933
|
+
var css_248z$D = ".Row-module_row__bTIWp {\n display: flex;\n gap: 15px;\n flex-wrap: wrap;\n}\n.Row-module_row__bTIWp > * {\n flex-shrink: 0;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n}";
|
|
934
|
+
var styles$D = {"row":"Row-module_row__bTIWp"};
|
|
935
|
+
styleInject(css_248z$D);
|
|
934
936
|
|
|
935
937
|
const Row = (_a) => {
|
|
936
938
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
937
939
|
const getCssClasses = () => {
|
|
938
940
|
const cssClasses = [];
|
|
939
|
-
cssClasses.push(styles$
|
|
941
|
+
cssClasses.push(styles$D.row);
|
|
940
942
|
className && cssClasses.push(className);
|
|
941
943
|
direction && cssClasses.push(`flex-${direction}`);
|
|
942
944
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -944,15 +946,15 @@ const Row = (_a) => {
|
|
|
944
946
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
945
947
|
};
|
|
946
948
|
|
|
947
|
-
var css_248z$
|
|
948
|
-
var styles$
|
|
949
|
-
styleInject(css_248z$
|
|
949
|
+
var css_248z$C = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
950
|
+
var styles$C = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
951
|
+
styleInject(css_248z$C);
|
|
950
952
|
|
|
951
953
|
const FormLabel = (_a) => {
|
|
952
954
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
953
955
|
const getCssClasses = () => {
|
|
954
956
|
const cssClasses = [];
|
|
955
|
-
cssClasses.push(styles$
|
|
957
|
+
cssClasses.push(styles$C.formLabel);
|
|
956
958
|
className && cssClasses.push(className);
|
|
957
959
|
return cssClasses.filter(css => css).join(' ');
|
|
958
960
|
};
|
|
@@ -989,9 +991,9 @@ const FileInput = (props) => {
|
|
|
989
991
|
React__default["default"].createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
|
|
990
992
|
};
|
|
991
993
|
|
|
992
|
-
var css_248z$
|
|
993
|
-
var styles$
|
|
994
|
-
styleInject(css_248z$
|
|
994
|
+
var css_248z$B = ".Select-module_selectContainer__DHFDZ {\n position: relative;\n}\n\n.Select-module_select__Fbn38 {\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n align-items: center;\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex;\n flex-wrap: wrap;\n}\n.Select-module_select__Fbn38 > span {\n flex: 1;\n}\n.Select-module_select__Fbn38:hover {\n cursor: pointer;\n}\n.Select-module_select__Fbn38:focus:not(.Select-module_select__Fbn38.Select-module_disabled__2XXut) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039), 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922);\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut, .Select-module_select__Fbn38.Select-module_readOnly__VoTER {\n background-color: #e9ecef;\n}\n.Select-module_select__Fbn38.Select-module_disabled__2XXut:hover {\n cursor: not-allowed;\n}\n.Select-module_select__Fbn38.Select-module_readOnly__VoTER:hover {\n cursor: inherit;\n}\n\n.Select-module_chipContainer__1poFF {\n gap: 10px;\n flex: 1;\n display: inline-flex;\n flex-wrap: wrap;\n}\n\n.Select-module_selectMenu__8y4kQ {\n background-color: var(--light);\n position: absolute;\n box-shadow: var(--shadow);\n border-radius: var(--borderRadius);\n width: 100%;\n top: 2px;\n z-index: 1112;\n max-height: 280px;\n overflow: auto;\n}";
|
|
995
|
+
var styles$B = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","disabled":"Select-module_disabled__2XXut","readOnly":"Select-module_readOnly__VoTER","chipContainer":"Select-module_chipContainer__1poFF","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
996
|
+
styleInject(css_248z$B);
|
|
995
997
|
|
|
996
998
|
const Select = (props) => {
|
|
997
999
|
var _a, _b, _c;
|
|
@@ -1004,9 +1006,9 @@ const Select = (props) => {
|
|
|
1004
1006
|
const getCssClass = () => {
|
|
1005
1007
|
const cssClasses = [];
|
|
1006
1008
|
className && cssClasses.push(className);
|
|
1007
|
-
disabled && cssClasses.push(styles$
|
|
1008
|
-
readOnly && cssClasses.push(styles$
|
|
1009
|
-
cssClasses.push(styles$
|
|
1009
|
+
disabled && cssClasses.push(styles$B['disabled']);
|
|
1010
|
+
readOnly && cssClasses.push(styles$B['readOnly']);
|
|
1011
|
+
cssClasses.push(styles$B.select);
|
|
1010
1012
|
return cssClasses.filter(r => r).join(' ');
|
|
1011
1013
|
};
|
|
1012
1014
|
React.useEffect(() => {
|
|
@@ -1128,16 +1130,16 @@ const Select = (props) => {
|
|
|
1128
1130
|
}
|
|
1129
1131
|
}
|
|
1130
1132
|
};
|
|
1131
|
-
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$
|
|
1133
|
+
return (React__default["default"].createElement("div", { ref: selectConainter, className: styles$B.selectContainer },
|
|
1132
1134
|
React__default["default"].createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1133
1135
|
!multiple && renderSingleViewModel(),
|
|
1134
1136
|
multiple &&
|
|
1135
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1136
|
-
React__default["default"].createElement(Icon, { className: "ml-
|
|
1137
|
+
React__default["default"].createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
|
|
1138
|
+
React__default["default"].createElement(Icon, { className: "ml-auto" },
|
|
1137
1139
|
React__default["default"].createElement(ChevronDownSolidIcon, null))),
|
|
1138
1140
|
isShow &&
|
|
1139
1141
|
React__default["default"].createElement(Portal, { className: 'backdrop-root' },
|
|
1140
|
-
React__default["default"].createElement("div", { className: styles$
|
|
1142
|
+
React__default["default"].createElement("div", { className: styles$B.selectMenu, style: { left: (_a = selectConainter.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().x, top: (_b = selectConainter.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().y, width: (_c = selectConainter.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width } },
|
|
1141
1143
|
React__default["default"].createElement(List, null, options && options.map((option, index) => React__default["default"].createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
1142
1144
|
multiple &&
|
|
1143
1145
|
React__default["default"].createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1145,33 +1147,33 @@ const Select = (props) => {
|
|
|
1145
1147
|
React__default["default"].createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1146
1148
|
};
|
|
1147
1149
|
|
|
1148
|
-
var css_248z$
|
|
1149
|
-
var styles$
|
|
1150
|
-
styleInject(css_248z$
|
|
1150
|
+
var css_248z$A = ".Textarea-module_textarea__L5zqa {\n min-height: calc(10em + 0.75rem + 2px);\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n background-clip: padding-box;\n border: 2px solid var(--input-border-color);\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n border-radius: var(--borderRadius);\n resize: vertical;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.0745098039);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid #ced4da;\n}\n.Textarea-module_textarea__L5zqa:focus:not(.Textarea-module_textarea__L5zqa.Textarea-module_disabled__OqqOF) {\n outline: none !important;\n border-color: var(--primary);\n}\n.Textarea-module_textarea__L5zqa.Textarea-module_isInvalid__JI01W {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
1151
|
+
var styles$A = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1152
|
+
styleInject(css_248z$A);
|
|
1151
1153
|
|
|
1152
1154
|
const Textarea = (props) => {
|
|
1153
1155
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1154
1156
|
const getCssClass = () => {
|
|
1155
1157
|
const cssClasses = [];
|
|
1156
|
-
cssClasses.push(styles$
|
|
1158
|
+
cssClasses.push(styles$A.textarea);
|
|
1157
1159
|
className && cssClasses.push(className);
|
|
1158
|
-
error && cssClasses.push(styles$
|
|
1160
|
+
error && cssClasses.push(styles$A['isInvalid']);
|
|
1159
1161
|
return cssClasses.filter(r => r).join(' ');
|
|
1160
1162
|
};
|
|
1161
1163
|
return (React__default["default"].createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1162
1164
|
};
|
|
1163
1165
|
|
|
1164
|
-
var css_248z$
|
|
1165
|
-
var styles$
|
|
1166
|
-
styleInject(css_248z$
|
|
1166
|
+
var css_248z$z = ".FormInput-module_formInput__VXZip {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n -webkit-appearance: none;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n}\n.FormInput-module_formInput__VXZip:focus:not(.FormInput-module_formInput__VXZip.FormInput-module_disabled__EjdD9) {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\n}\n.FormInput-module_formInput__VXZip.FormInput-module_isInvalid__vQDuz {\n border-color: #dc3545;\n box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.2509803922);\n}";
|
|
1167
|
+
var styles$z = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1168
|
+
styleInject(css_248z$z);
|
|
1167
1169
|
|
|
1168
1170
|
const FormInput = (props) => {
|
|
1169
1171
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1170
1172
|
const getCssClasses = () => {
|
|
1171
1173
|
const cssClasses = [];
|
|
1172
|
-
cssClasses.push(styles$
|
|
1174
|
+
cssClasses.push(styles$z.formInput);
|
|
1173
1175
|
className && cssClasses.push(className);
|
|
1174
|
-
!isValid && cssClasses.push(styles$
|
|
1176
|
+
!isValid && cssClasses.push(styles$z['isInvalid']);
|
|
1175
1177
|
return cssClasses.filter(css => css).join(' ');
|
|
1176
1178
|
};
|
|
1177
1179
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1219,12 +1221,12 @@ const FormHint = (props) => {
|
|
|
1219
1221
|
return (React__default["default"].createElement("small", { className: getCssClasses() }, children));
|
|
1220
1222
|
};
|
|
1221
1223
|
|
|
1222
|
-
var css_248z$
|
|
1223
|
-
var styles$
|
|
1224
|
-
styleInject(css_248z$
|
|
1224
|
+
var css_248z$y = ".FormError-module_isInvalid__tO1Sw {\n width: 100%;\n margin-top: 0.25rem;\n font-size: 0.875em;\n color: #dc3545;\n}";
|
|
1225
|
+
var styles$y = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1226
|
+
styleInject(css_248z$y);
|
|
1225
1227
|
|
|
1226
1228
|
const FormError = (props) => {
|
|
1227
|
-
const { className = styles$
|
|
1229
|
+
const { className = styles$y.isInvalid, errors = [] } = props;
|
|
1228
1230
|
return (React__default["default"].createElement(React.Fragment, null, errors &&
|
|
1229
1231
|
React__default["default"].createElement("div", { className: className }, errors.map(e => React__default["default"].createElement("div", { key: e.validator }, e.message)))));
|
|
1230
1232
|
};
|
|
@@ -1555,16 +1557,16 @@ const DateSelect = (props) => {
|
|
|
1555
1557
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1556
1558
|
// };
|
|
1557
1559
|
|
|
1558
|
-
var css_248z$
|
|
1559
|
-
var styles$
|
|
1560
|
-
styleInject(css_248z$
|
|
1560
|
+
var css_248z$x = ".Drawer-module_drawer__kdQCk {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 320px;\n overflow-y: auto;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n position: inherit;\n z-index: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n order: 0;\n left: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n order: 2;\n right: 0;\n}\n.Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n box-shadow: var(--shadow);\n}\n\n.Drawer-module_drawerOpen__07ptP {\n overflow: hidden;\n}";
|
|
1561
|
+
var styles$x = {"drawer":"Drawer-module_drawer__kdQCk","permanent":"Drawer-module_permanent__c-y8y","left":"Drawer-module_left__loQVO","right":"Drawer-module_right__sJ3mZ","shadow":"Drawer-module_shadow__Myo3n","drawerOpen":"Drawer-module_drawerOpen__07ptP"};
|
|
1562
|
+
styleInject(css_248z$x);
|
|
1561
1563
|
|
|
1562
1564
|
const Drawer = (props) => {
|
|
1563
1565
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1564
1566
|
React.useEffect(() => {
|
|
1565
|
-
document.body.classList.add(styles$
|
|
1567
|
+
document.body.classList.add(styles$x.drawerOpen);
|
|
1566
1568
|
return () => {
|
|
1567
|
-
document.body.classList.remove(styles$
|
|
1569
|
+
document.body.classList.remove(styles$x.drawerOpen);
|
|
1568
1570
|
};
|
|
1569
1571
|
}, []);
|
|
1570
1572
|
const handleClickBackdrop = () => {
|
|
@@ -1578,10 +1580,10 @@ const DrawerContent = (props) => {
|
|
|
1578
1580
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1579
1581
|
const getCssClasses = () => {
|
|
1580
1582
|
const cssClasses = [];
|
|
1581
|
-
cssClasses.push(styles$
|
|
1582
|
-
shadow && cssClasses.push(styles$
|
|
1583
|
-
!!permanent && cssClasses.push(styles$
|
|
1584
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1583
|
+
cssClasses.push(styles$x.drawer);
|
|
1584
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
1585
|
+
!!permanent && cssClasses.push(styles$x['permanent']);
|
|
1586
|
+
position === 'left' ? cssClasses.push(styles$x['left']) : cssClasses.push(styles$x['right']);
|
|
1585
1587
|
className && cssClasses.push(className);
|
|
1586
1588
|
return cssClasses.filter(css => css).join(' ');
|
|
1587
1589
|
};
|
|
@@ -1595,9 +1597,9 @@ const DrawerContent = (props) => {
|
|
|
1595
1597
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1596
1598
|
};
|
|
1597
1599
|
|
|
1598
|
-
var css_248z$
|
|
1599
|
-
var styles$
|
|
1600
|
-
styleInject(css_248z$
|
|
1600
|
+
var css_248z$w = ".MenuBody-module_menuBody__u4FIQ {\n z-index: 1111;\n margin: 0;\n position: absolute;\n top: 100%;\n left: 0;\n min-width: 10rem;\n padding: 0px;\n font-size: 1rem;\n color: #212529;\n text-align: left;\n list-style: none;\n background-color: #fff;\n background-clip: padding-box;\n border-radius: var(--borderRadius);\n}\n.MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n box-shadow: var(--shadow);\n}";
|
|
1601
|
+
var styles$w = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1602
|
+
styleInject(css_248z$w);
|
|
1601
1603
|
|
|
1602
1604
|
const MenuBody = (props) => {
|
|
1603
1605
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1628,8 +1630,8 @@ const MenuBody = (props) => {
|
|
|
1628
1630
|
}, [menuBodyRef]);
|
|
1629
1631
|
const getCssClasses = () => {
|
|
1630
1632
|
const cssClasses = [];
|
|
1631
|
-
cssClasses.push(styles$
|
|
1632
|
-
shadow && cssClasses.push(styles$
|
|
1633
|
+
cssClasses.push(styles$w.menuBody);
|
|
1634
|
+
shadow && cssClasses.push(styles$w.shadow);
|
|
1633
1635
|
className && cssClasses.push(className);
|
|
1634
1636
|
return cssClasses.filter(css => css).join(' ');
|
|
1635
1637
|
};
|
|
@@ -1637,21 +1639,17 @@ const MenuBody = (props) => {
|
|
|
1637
1639
|
onClickBackdrop && onClickBackdrop();
|
|
1638
1640
|
};
|
|
1639
1641
|
return (React__default["default"].createElement(Portal, { className: 'menu-root' },
|
|
1640
|
-
React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1642
|
+
React__default["default"].createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1643
|
+
React__default["default"].createElement(List, null, children)),
|
|
1641
1644
|
React__default["default"].createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
|
|
1642
1645
|
};
|
|
1643
1646
|
|
|
1644
|
-
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1645
|
-
var styles$x = {"menu":"Menu-module_menu__p8QL-"};
|
|
1646
|
-
styleInject(css_248z$x);
|
|
1647
|
-
|
|
1648
1647
|
const Menu = (props) => {
|
|
1649
1648
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
1650
1649
|
const menuContainer = React.useRef(null);
|
|
1651
1650
|
const toggleContainerRef = React.useRef(null);
|
|
1652
1651
|
const getCssClasses = () => {
|
|
1653
1652
|
const cssClasses = [];
|
|
1654
|
-
cssClasses.push(styles$x.menu);
|
|
1655
1653
|
className && cssClasses.push(className);
|
|
1656
1654
|
return cssClasses.filter(css => css).join(' ');
|
|
1657
1655
|
};
|
|
@@ -1664,26 +1662,17 @@ const Menu = (props) => {
|
|
|
1664
1662
|
React__default["default"].createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1665
1663
|
};
|
|
1666
1664
|
|
|
1667
|
-
var css_248z$w = ".MenuItem-module_menuItem__MeBxN {\n display: flex;\n width: 100%;\n padding: 0.25rem 1.5rem;\n clear: both;\n font-weight: 400;\n color: #212529;\n text-align: inherit;\n text-decoration: none;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n}\n.MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n margin-bottom: 0;\n font-size: 0.875rem;\n}\n.MenuItem-module_menuItem__MeBxN:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04);\n}";
|
|
1668
|
-
var styles$w = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1669
|
-
styleInject(css_248z$w);
|
|
1670
|
-
|
|
1671
1665
|
const MenuItem = (props) => {
|
|
1672
|
-
const { children, onClick
|
|
1666
|
+
const { children, onClick } = props, rest = __rest(props, ["children", "onClick"]);
|
|
1673
1667
|
const getCssClasses = () => {
|
|
1674
1668
|
const cssClasses = [];
|
|
1675
|
-
cssClasses.push(styles$w.menuItem);
|
|
1676
|
-
if (type === 'header') {
|
|
1677
|
-
cssClasses.push(styles$w.menuItemHeader);
|
|
1678
|
-
}
|
|
1679
1669
|
return cssClasses.filter(css => css).join(' ');
|
|
1680
1670
|
};
|
|
1681
1671
|
const handleClick = (e) => {
|
|
1682
1672
|
e.stopPropagation();
|
|
1683
1673
|
onClick && onClick(e);
|
|
1684
1674
|
};
|
|
1685
|
-
return (React__default["default"].createElement(
|
|
1686
|
-
React__default["default"].createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
|
|
1675
|
+
return (React__default["default"].createElement(ListItem, Object.assign({ className: getCssClasses(), onClick: handleClick }, rest), children));
|
|
1687
1676
|
};
|
|
1688
1677
|
|
|
1689
1678
|
const MenuToggle = ({ children }) => {
|
|
@@ -1883,7 +1872,6 @@ const Modal = (props) => {
|
|
|
1883
1872
|
};
|
|
1884
1873
|
}, []);
|
|
1885
1874
|
const handleClickBackdrop = () => {
|
|
1886
|
-
console.warn('backdrop clicked');
|
|
1887
1875
|
onBackdropClick && onBackdropClick();
|
|
1888
1876
|
};
|
|
1889
1877
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -1913,7 +1901,7 @@ exports.MODALBUTTONTYPE = void 0;
|
|
|
1913
1901
|
MODALBUTTONTYPE["DEFAULT"] = "DEFAULT";
|
|
1914
1902
|
})(exports.MODALBUTTONTYPE || (exports.MODALBUTTONTYPE = {}));
|
|
1915
1903
|
|
|
1916
|
-
const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackdropClick, isDismissable = false, buttons = [
|
|
1904
|
+
const GlobalModal = ({ title, description, formControls, onOk, onChange, onCancel, onBackdropClick, isDismissable = false, buttons = [
|
|
1917
1905
|
{ label: 'Cancel', type: exports.MODALBUTTONTYPE.CANCEL, color: exports.COLOR.secondary, variant: exports.VARIANT.text, shadow: false },
|
|
1918
1906
|
{ label: 'Ok', type: exports.MODALBUTTONTYPE.OK, variant: exports.VARIANT.contained, focus: true },
|
|
1919
1907
|
], size = exports.SIZE.md, fullScreen = false }) => {
|
|
@@ -1958,11 +1946,28 @@ const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackd
|
|
|
1958
1946
|
description && React__default["default"].createElement("div", null, description),
|
|
1959
1947
|
modalType === exports.MODALTYPE.FORM &&
|
|
1960
1948
|
React__default["default"].createElement(React.Fragment, null,
|
|
1961
|
-
React__default["default"].createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit }))));
|
|
1949
|
+
React__default["default"].createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit, onChange: onChange }))));
|
|
1962
1950
|
};
|
|
1963
1951
|
|
|
1964
1952
|
class ModalService {
|
|
1965
1953
|
show(title, description, options) {
|
|
1954
|
+
return new Promise((resolve, reject) => {
|
|
1955
|
+
if (!this.container) {
|
|
1956
|
+
this.container = document.createElement('div');
|
|
1957
|
+
document.body.appendChild(this.container);
|
|
1958
|
+
const handleOk = () => {
|
|
1959
|
+
resolve();
|
|
1960
|
+
this.hide();
|
|
1961
|
+
};
|
|
1962
|
+
const handleCancel = () => {
|
|
1963
|
+
reject();
|
|
1964
|
+
this.hide();
|
|
1965
|
+
};
|
|
1966
|
+
reactDom.render(React__default["default"].createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, description: description, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, isDismissable: options && options.isDismissable, buttons: options && options.buttons }), this.container);
|
|
1967
|
+
}
|
|
1968
|
+
});
|
|
1969
|
+
}
|
|
1970
|
+
showForm(title, options) {
|
|
1966
1971
|
return new Promise((resolve, reject) => {
|
|
1967
1972
|
if (!this.container) {
|
|
1968
1973
|
this.container = document.createElement('div');
|
|
@@ -1971,11 +1976,15 @@ class ModalService {
|
|
|
1971
1976
|
resolve(values);
|
|
1972
1977
|
this.hide();
|
|
1973
1978
|
};
|
|
1979
|
+
// TODO - for AutoComplete
|
|
1980
|
+
const handleOnChange = (values) => {
|
|
1981
|
+
console.info(values);
|
|
1982
|
+
};
|
|
1974
1983
|
const handleCancel = () => {
|
|
1975
1984
|
reject();
|
|
1976
1985
|
this.hide();
|
|
1977
1986
|
};
|
|
1978
|
-
reactDom.render(React__default["default"].createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title,
|
|
1987
|
+
reactDom.render(React__default["default"].createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title, formControls: options && options.formControls, onCancel: handleCancel, onBackdropClick: handleCancel, onOk: handleOk, onChange: handleOnChange, isDismissable: options && options.isDismissable, buttons: options && options.buttons }), this.container);
|
|
1979
1988
|
}
|
|
1980
1989
|
});
|
|
1981
1990
|
}
|
|
@@ -2094,7 +2103,7 @@ const ProgressBar = (props) => {
|
|
|
2094
2103
|
}
|
|
2095
2104
|
return `${width}%`;
|
|
2096
2105
|
};
|
|
2097
|
-
return (React__default["default"].createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2106
|
+
return (React__default["default"].createElement(Tooltip, { text: !indeterminate ? model === null || model === void 0 ? void 0 : model.toString() : '' },
|
|
2098
2107
|
React__default["default"].createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2099
2108
|
React__default["default"].createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2100
2109
|
};
|
|
@@ -2979,6 +2988,7 @@ exports.ModalHeader = ModalHeader;
|
|
|
2979
2988
|
exports.MonthSelect = MonthSelect;
|
|
2980
2989
|
exports.NumberSelect = NumberSelect;
|
|
2981
2990
|
exports.PlusSolidIcon = PlusSolidIcon;
|
|
2991
|
+
exports.Portal = Portal;
|
|
2982
2992
|
exports.ProgressBar = ProgressBar;
|
|
2983
2993
|
exports.Row = Row;
|
|
2984
2994
|
exports.STATUS = STATUS;
|