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.es.js
CHANGED
|
@@ -87,93 +87,93 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
var styles$
|
|
92
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$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}";
|
|
91
|
+
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"};
|
|
92
|
+
styleInject(css_248z$13);
|
|
93
93
|
|
|
94
94
|
const Alert = (props) => {
|
|
95
95
|
const { children, className, color = COLOR.primary, variant = VARIANT.contained, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "variant", "shadow"]);
|
|
96
96
|
const getCssClasses = () => {
|
|
97
97
|
const cssClasses = [];
|
|
98
|
-
cssClasses.push(styles$
|
|
98
|
+
cssClasses.push(styles$13.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$13.contained);
|
|
101
|
+
cssClasses.push(styles$13[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$13.outline);
|
|
105
|
+
cssClasses.push(styles$13[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$13['shadow']);
|
|
108
108
|
className && cssClasses.push(className);
|
|
109
109
|
return cssClasses.filter(r => r).join(' ');
|
|
110
110
|
};
|
|
111
111
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
112
112
|
};
|
|
113
113
|
|
|
114
|
-
var css_248z$
|
|
115
|
-
var styles$
|
|
116
|
-
styleInject(css_248z$
|
|
114
|
+
var css_248z$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}";
|
|
115
|
+
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"};
|
|
116
|
+
styleInject(css_248z$12);
|
|
117
117
|
|
|
118
118
|
const AppBar = (props) => {
|
|
119
119
|
const { children, className, color = COLOR.primary, shadow = true } = props, rest = __rest(props, ["children", "className", "color", "shadow"]);
|
|
120
120
|
const getCssClasses = () => {
|
|
121
121
|
const cssClasses = [];
|
|
122
|
-
cssClasses.push(styles$
|
|
123
|
-
cssClasses.push(styles$
|
|
124
|
-
shadow && cssClasses.push(styles$
|
|
122
|
+
cssClasses.push(styles$12[color]);
|
|
123
|
+
cssClasses.push(styles$12.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$12['shadow']);
|
|
125
125
|
className && cssClasses.push(className);
|
|
126
126
|
return cssClasses.filter(r => r).join(' ');
|
|
127
127
|
};
|
|
128
128
|
return (React.createElement("nav", Object.assign({ className: getCssClasses() }, rest), children));
|
|
129
129
|
};
|
|
130
130
|
|
|
131
|
-
var css_248z$
|
|
132
|
-
var styles$
|
|
133
|
-
styleInject(css_248z$
|
|
131
|
+
var css_248z$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}";
|
|
132
|
+
var styles$11 = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$11);
|
|
134
134
|
|
|
135
135
|
const AppBarTitle = (props) => {
|
|
136
136
|
const { children, className, onClick } = props;
|
|
137
137
|
const getCssClass = () => {
|
|
138
138
|
const cssClasses = [];
|
|
139
|
-
cssClasses.push(styles$
|
|
139
|
+
cssClasses.push(styles$11.appbarTitle);
|
|
140
140
|
className && cssClasses.push(className);
|
|
141
141
|
return cssClasses.filter(r => r).join(' ');
|
|
142
142
|
};
|
|
143
143
|
return (React.createElement("div", { className: getCssClass(), onClick: onClick }, children));
|
|
144
144
|
};
|
|
145
145
|
|
|
146
|
-
var css_248z$
|
|
147
|
-
var styles$
|
|
148
|
-
styleInject(css_248z$
|
|
146
|
+
var css_248z$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}";
|
|
147
|
+
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"};
|
|
148
|
+
styleInject(css_248z$10);
|
|
149
149
|
|
|
150
150
|
const Icon = (props) => {
|
|
151
151
|
const { children, iconColor, className } = props, rest = __rest(props, ["children", "iconColor", "className"]);
|
|
152
152
|
const getCssClasses = () => {
|
|
153
153
|
const cssClasses = [];
|
|
154
|
-
cssClasses.push(styles$
|
|
155
|
-
iconColor && cssClasses.push(styles$
|
|
154
|
+
cssClasses.push(styles$10.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$10[iconColor]);
|
|
156
156
|
className && cssClasses.push(className);
|
|
157
157
|
return cssClasses.filter(css => css).join(' ');
|
|
158
158
|
};
|
|
159
159
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
160
160
|
};
|
|
161
161
|
|
|
162
|
-
var css_248z
|
|
163
|
-
var styles
|
|
164
|
-
styleInject(css_248z
|
|
162
|
+
var css_248z$$ = ".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}";
|
|
163
|
+
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"};
|
|
164
|
+
styleInject(css_248z$$);
|
|
165
165
|
|
|
166
166
|
const IconButton = (props) => {
|
|
167
167
|
const { children, icon, variant = VARIANT.text, color = COLOR.dark, size = SIZE.md, isActive, disabled, className, shadow } = props, rest = __rest(props, ["children", "icon", "variant", "color", "size", "isActive", "disabled", "className", "shadow"]);
|
|
168
168
|
const getCssClasses = () => {
|
|
169
169
|
const cssClasses = [];
|
|
170
|
-
cssClasses.push(styles
|
|
171
|
-
cssClasses.push(styles
|
|
172
|
-
cssClasses.push(styles
|
|
173
|
-
cssClasses.push(styles
|
|
174
|
-
isActive && cssClasses.push(styles
|
|
175
|
-
disabled && cssClasses.push(styles
|
|
176
|
-
shadow && cssClasses.push(styles
|
|
170
|
+
cssClasses.push(styles$$[color]);
|
|
171
|
+
cssClasses.push(styles$$[variant]);
|
|
172
|
+
cssClasses.push(styles$$[size]);
|
|
173
|
+
cssClasses.push(styles$$.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$$.active);
|
|
175
|
+
disabled && cssClasses.push(styles$$.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$$.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -320,9 +320,9 @@ const Portal = ({ children, target = document.body, className }) => {
|
|
|
320
320
|
return createPortal(children, containerEl);
|
|
321
321
|
};
|
|
322
322
|
|
|
323
|
-
var css_248z$
|
|
324
|
-
var styles$
|
|
325
|
-
styleInject(css_248z$
|
|
323
|
+
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}";
|
|
324
|
+
var styles$_ = {"backdrop":"Backdrop-module_backdrop__IRMoL","isTransparent":"Backdrop-module_isTransparent__F5nA5"};
|
|
325
|
+
styleInject(css_248z$_);
|
|
326
326
|
|
|
327
327
|
const Backdrop = (props) => {
|
|
328
328
|
const { target = document.body, isTransparent = false, onClick, style } = props, rest = __rest(props, ["target", "isTransparent", "onClick", "style"]);
|
|
@@ -332,8 +332,8 @@ const Backdrop = (props) => {
|
|
|
332
332
|
};
|
|
333
333
|
const getCssClasses = () => {
|
|
334
334
|
const cssClasses = [];
|
|
335
|
-
cssClasses.push(styles$
|
|
336
|
-
isTransparent && cssClasses.push(styles$
|
|
335
|
+
cssClasses.push(styles$_.backdrop);
|
|
336
|
+
isTransparent && cssClasses.push(styles$_['isTransparent']);
|
|
337
337
|
return cssClasses.filter(css => css).join(' ');
|
|
338
338
|
};
|
|
339
339
|
const getStyles = () => {
|
|
@@ -343,34 +343,34 @@ const Backdrop = (props) => {
|
|
|
343
343
|
React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest))));
|
|
344
344
|
};
|
|
345
345
|
|
|
346
|
-
var css_248z
|
|
347
|
-
var styles
|
|
348
|
-
styleInject(css_248z
|
|
346
|
+
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}";
|
|
347
|
+
var styles$Z = {"list":"List-module_list__gpZ41"};
|
|
348
|
+
styleInject(css_248z$Z);
|
|
349
349
|
|
|
350
350
|
const List = (props) => {
|
|
351
351
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
352
352
|
const getCssClasses = () => {
|
|
353
353
|
const cssClasses = [];
|
|
354
|
-
isFlush && cssClasses.push(styles
|
|
355
|
-
cssClasses.push(styles
|
|
354
|
+
isFlush && cssClasses.push(styles$Z.flush);
|
|
355
|
+
cssClasses.push(styles$Z.list);
|
|
356
356
|
className && cssClasses.push(className);
|
|
357
357
|
return cssClasses.filter(css => css).join(' ');
|
|
358
358
|
};
|
|
359
359
|
return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
360
360
|
};
|
|
361
361
|
|
|
362
|
-
var css_248z$
|
|
363
|
-
var styles$
|
|
364
|
-
styleInject(css_248z$
|
|
362
|
+
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}";
|
|
363
|
+
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"};
|
|
364
|
+
styleInject(css_248z$Y);
|
|
365
365
|
|
|
366
366
|
const ListItem = (props) => {
|
|
367
367
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
368
368
|
const getCssClasses = () => {
|
|
369
369
|
const cssClasses = [];
|
|
370
|
-
cssClasses.push(styles$
|
|
371
|
-
color && cssClasses.push(styles$
|
|
372
|
-
active && cssClasses.push(styles$
|
|
373
|
-
disabled && cssClasses.push(styles$
|
|
370
|
+
cssClasses.push(styles$Y.listItem);
|
|
371
|
+
color && cssClasses.push(styles$Y[color]);
|
|
372
|
+
active && cssClasses.push(styles$Y['active']);
|
|
373
|
+
disabled && cssClasses.push(styles$Y['disabled']);
|
|
374
374
|
className && cssClasses.push(className);
|
|
375
375
|
return cssClasses.filter(css => css).join(' ');
|
|
376
376
|
};
|
|
@@ -380,42 +380,42 @@ const ListItem = (props) => {
|
|
|
380
380
|
return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
381
381
|
};
|
|
382
382
|
|
|
383
|
-
var css_248z$
|
|
384
|
-
var styles$
|
|
385
|
-
styleInject(css_248z$
|
|
383
|
+
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}";
|
|
384
|
+
var styles$X = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
385
|
+
styleInject(css_248z$X);
|
|
386
386
|
|
|
387
387
|
const ListItemAvatar = (_a) => {
|
|
388
388
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
389
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
389
|
+
return (React.createElement("div", Object.assign({ className: styles$X.avatar }, rest), avatar));
|
|
390
390
|
};
|
|
391
391
|
|
|
392
|
-
var css_248z$
|
|
393
|
-
var styles$
|
|
394
|
-
styleInject(css_248z$
|
|
392
|
+
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}";
|
|
393
|
+
var styles$W = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
394
|
+
styleInject(css_248z$W);
|
|
395
395
|
|
|
396
396
|
const ListItemIcon = (_a) => {
|
|
397
397
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
398
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
398
|
+
return (React.createElement("div", Object.assign({ className: styles$W.icon }, rest), icon));
|
|
399
399
|
};
|
|
400
400
|
|
|
401
|
-
var css_248z$
|
|
402
|
-
var styles$
|
|
403
|
-
styleInject(css_248z$
|
|
401
|
+
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}";
|
|
402
|
+
var styles$V = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
403
|
+
styleInject(css_248z$V);
|
|
404
404
|
|
|
405
405
|
const ListItemAction = (_a) => {
|
|
406
406
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
407
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
407
|
+
return (React.createElement("div", Object.assign({ className: styles$V.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
408
408
|
};
|
|
409
409
|
|
|
410
|
-
var css_248z$
|
|
411
|
-
var styles$
|
|
412
|
-
styleInject(css_248z$
|
|
410
|
+
var css_248z$U = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1;\n}";
|
|
411
|
+
var styles$U = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
412
|
+
styleInject(css_248z$U);
|
|
413
413
|
|
|
414
414
|
const ListItemText = (_a) => {
|
|
415
415
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
416
416
|
const getCssClasses = () => {
|
|
417
417
|
const cssClasses = [];
|
|
418
|
-
cssClasses.push(styles$
|
|
418
|
+
cssClasses.push(styles$U.listItemText);
|
|
419
419
|
return cssClasses.filter(css => css).join(' ');
|
|
420
420
|
};
|
|
421
421
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -426,9 +426,9 @@ const ListItemText = (_a) => {
|
|
|
426
426
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
427
427
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
428
428
|
|
|
429
|
-
var css_248z$
|
|
430
|
-
var styles$
|
|
431
|
-
styleInject(css_248z$
|
|
429
|
+
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}";
|
|
430
|
+
var styles$T = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","disabled":"AutoComplete-module_disabled__CbGP4","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
431
|
+
styleInject(css_248z$T);
|
|
432
432
|
|
|
433
433
|
// preset value
|
|
434
434
|
// enter -> delay? -> show results
|
|
@@ -451,7 +451,9 @@ const AutoComplete = (props) => {
|
|
|
451
451
|
useEffect(() => {
|
|
452
452
|
setOptions(options);
|
|
453
453
|
}, [options]);
|
|
454
|
-
useDebounce(() => {
|
|
454
|
+
useDebounce(() => {
|
|
455
|
+
onChange && onChange(searchText);
|
|
456
|
+
}, debounce, [searchText]);
|
|
455
457
|
useEffect(() => {
|
|
456
458
|
if (isShow === true) {
|
|
457
459
|
document.body.classList.add('modal-open');
|
|
@@ -474,7 +476,7 @@ const AutoComplete = (props) => {
|
|
|
474
476
|
const getCssClass = () => {
|
|
475
477
|
const cssClasses = [];
|
|
476
478
|
className && cssClasses.push(className);
|
|
477
|
-
cssClasses.push(styles$
|
|
479
|
+
cssClasses.push(styles$T.select);
|
|
478
480
|
return cssClasses.filter(r => r).join(' ');
|
|
479
481
|
};
|
|
480
482
|
const show = () => setIsShow(true);
|
|
@@ -498,28 +500,28 @@ const AutoComplete = (props) => {
|
|
|
498
500
|
setModel('');
|
|
499
501
|
setSearchText('');
|
|
500
502
|
};
|
|
501
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
503
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$T.selectContainer },
|
|
502
504
|
React.createElement("div", { className: "d-flex" },
|
|
503
505
|
React.createElement("input", { type: "text", className: getCssClass(), id: id, name: name, tabIndex: 0, readOnly: readOnly, disabled: disabled, onChange: handleOnChange, onFocus: handleOnFocus, placeholder: placeholder, value: model }),
|
|
504
506
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
505
507
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
506
508
|
isShow &&
|
|
507
509
|
React.createElement(React.Fragment, null,
|
|
508
|
-
React.createElement("div", { className: styles$
|
|
510
|
+
React.createElement("div", { className: styles$T.selectMenu },
|
|
509
511
|
React.createElement(List, null, _options && _options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
510
512
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
511
513
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
512
514
|
};
|
|
513
515
|
|
|
514
|
-
var css_248z$
|
|
515
|
-
var styles$
|
|
516
|
-
styleInject(css_248z$
|
|
516
|
+
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}";
|
|
517
|
+
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"};
|
|
518
|
+
styleInject(css_248z$S);
|
|
517
519
|
|
|
518
520
|
const Badge = (props) => {
|
|
519
521
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
520
522
|
const [cssClassName] = useCssClasses([
|
|
521
|
-
styles$
|
|
522
|
-
styles$
|
|
523
|
+
styles$S.badge,
|
|
524
|
+
styles$S[color],
|
|
523
525
|
className
|
|
524
526
|
]);
|
|
525
527
|
return (React.createElement(BadgeContainer, null,
|
|
@@ -529,15 +531,15 @@ const Badge = (props) => {
|
|
|
529
531
|
const BadgeContainer = (props) => {
|
|
530
532
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
531
533
|
const [cssClassName] = useCssClasses([
|
|
532
|
-
styles$
|
|
534
|
+
styles$S.badgeContainer,
|
|
533
535
|
className,
|
|
534
536
|
]);
|
|
535
537
|
return (React.createElement("div", Object.assign({ className: cssClassName }, rest), children));
|
|
536
538
|
};
|
|
537
539
|
|
|
538
|
-
var css_248z$
|
|
539
|
-
var styles$
|
|
540
|
-
styleInject(css_248z$
|
|
540
|
+
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}";
|
|
541
|
+
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"};
|
|
542
|
+
styleInject(css_248z$R);
|
|
541
543
|
|
|
542
544
|
const ButtonContext = createContext({
|
|
543
545
|
color: null
|
|
@@ -549,19 +551,19 @@ const Button = (props) => {
|
|
|
549
551
|
const buttonContext = useButtonContext();
|
|
550
552
|
const getCssClasses = () => {
|
|
551
553
|
const cssClasses = [];
|
|
552
|
-
cssClasses.push(styles$
|
|
554
|
+
cssClasses.push(styles$R.button);
|
|
553
555
|
const buttonColor = buttonContext.color || color;
|
|
554
556
|
if (variant !== 'outline' && variant !== 'text') {
|
|
555
|
-
cssClasses.push(styles$
|
|
556
|
-
cssClasses.push(styles$
|
|
557
|
+
cssClasses.push(styles$R.btnContained);
|
|
558
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
557
559
|
}
|
|
558
560
|
if (variant === 'outline') {
|
|
559
|
-
cssClasses.push(styles$
|
|
560
|
-
cssClasses.push(styles$
|
|
561
|
+
cssClasses.push(styles$R.btnOutline);
|
|
562
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
561
563
|
}
|
|
562
564
|
if (variant === 'text') {
|
|
563
|
-
cssClasses.push(styles$
|
|
564
|
-
cssClasses.push(styles$
|
|
565
|
+
cssClasses.push(styles$R.btnText);
|
|
566
|
+
cssClasses.push(styles$R[buttonColor]);
|
|
565
567
|
}
|
|
566
568
|
if (isRounded && variant !== 'text') {
|
|
567
569
|
cssClasses.push(`rounded-pill`);
|
|
@@ -569,29 +571,29 @@ const Button = (props) => {
|
|
|
569
571
|
if (isActive) {
|
|
570
572
|
cssClasses.push('active');
|
|
571
573
|
}
|
|
572
|
-
shadow && cssClasses.push(styles$
|
|
573
|
-
block && cssClasses.push(styles$
|
|
574
|
+
shadow && cssClasses.push(styles$R.shadow);
|
|
575
|
+
block && cssClasses.push(styles$R.block);
|
|
574
576
|
className && cssClasses.push(className);
|
|
575
577
|
return cssClasses.filter(css => css).join(' ');
|
|
576
578
|
};
|
|
577
579
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
578
580
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
579
581
|
startIcon &&
|
|
580
|
-
React.createElement(Icon, { className: styles$
|
|
582
|
+
React.createElement(Icon, { className: styles$R.startIcon }, startIcon),
|
|
581
583
|
children,
|
|
582
584
|
endIcon &&
|
|
583
|
-
React.createElement(Icon, { className: styles$
|
|
585
|
+
React.createElement(Icon, { className: styles$R.endIcon }, endIcon))));
|
|
584
586
|
};
|
|
585
587
|
|
|
586
|
-
var css_248z$
|
|
587
|
-
var styles$
|
|
588
|
-
styleInject(css_248z$
|
|
588
|
+
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}";
|
|
589
|
+
var styles$Q = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
590
|
+
styleInject(css_248z$Q);
|
|
589
591
|
|
|
590
592
|
const ButtonGroup = (props) => {
|
|
591
593
|
const { children, className, color } = props, rest = __rest(props, ["children", "className", "color"]);
|
|
592
594
|
const getCssClasses = () => {
|
|
593
595
|
const cssClasses = [];
|
|
594
|
-
cssClasses.push(styles$
|
|
596
|
+
cssClasses.push(styles$Q.buttonGroup);
|
|
595
597
|
className && cssClasses.push(className);
|
|
596
598
|
return cssClasses.filter(css => css).join(' ');
|
|
597
599
|
};
|
|
@@ -599,15 +601,15 @@ const ButtonGroup = (props) => {
|
|
|
599
601
|
React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children)));
|
|
600
602
|
};
|
|
601
603
|
|
|
602
|
-
var css_248z$
|
|
603
|
-
var styles$
|
|
604
|
-
styleInject(css_248z$
|
|
604
|
+
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}";
|
|
605
|
+
var styles$P = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
606
|
+
styleInject(css_248z$P);
|
|
605
607
|
|
|
606
608
|
const Breadcrumb = (props) => {
|
|
607
609
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
608
610
|
const getCssClasses = () => {
|
|
609
611
|
const cssClasses = [];
|
|
610
|
-
cssClasses.push(styles$
|
|
612
|
+
cssClasses.push(styles$P.breadcrumb);
|
|
611
613
|
className && cssClasses.push(className);
|
|
612
614
|
return cssClasses.filter(css => css).join(' ');
|
|
613
615
|
};
|
|
@@ -617,15 +619,15 @@ const Breadcrumb = (props) => {
|
|
|
617
619
|
|
|
618
620
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
619
621
|
|
|
620
|
-
var css_248z$
|
|
621
|
-
var styles$
|
|
622
|
-
styleInject(css_248z$
|
|
622
|
+
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}";
|
|
623
|
+
var styles$O = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
624
|
+
styleInject(css_248z$O);
|
|
623
625
|
|
|
624
626
|
const BreadcrumbItem = (props) => {
|
|
625
627
|
const { children, className, isActive, onClick } = props;
|
|
626
628
|
const getCssClasses = () => {
|
|
627
629
|
const cssClasses = [];
|
|
628
|
-
cssClasses.push(styles$
|
|
630
|
+
cssClasses.push(styles$O.breadcrumbItem);
|
|
629
631
|
className && cssClasses.push(className);
|
|
630
632
|
isActive && cssClasses.push('active');
|
|
631
633
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -637,115 +639,115 @@ const BreadcrumbItem = (props) => {
|
|
|
637
639
|
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
638
640
|
};
|
|
639
641
|
|
|
640
|
-
var css_248z$
|
|
641
|
-
var styles$
|
|
642
|
-
styleInject(css_248z$
|
|
642
|
+
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}";
|
|
643
|
+
var styles$N = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
644
|
+
styleInject(css_248z$N);
|
|
643
645
|
|
|
644
646
|
const Card = (props) => {
|
|
645
647
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
646
648
|
const getCssClasses = () => {
|
|
647
649
|
const cssClasses = [];
|
|
648
|
-
cssClasses.push(styles$
|
|
649
|
-
shadow && cssClasses.push(styles$
|
|
650
|
+
cssClasses.push(styles$N.card);
|
|
651
|
+
shadow && cssClasses.push(styles$N.shadow);
|
|
650
652
|
className && cssClasses.push(className);
|
|
651
653
|
return cssClasses.filter(css => css).join(' ');
|
|
652
654
|
};
|
|
653
655
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
654
656
|
};
|
|
655
657
|
|
|
656
|
-
var css_248z$
|
|
657
|
-
var styles$
|
|
658
|
-
styleInject(css_248z$
|
|
658
|
+
var css_248z$M = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem;\n}";
|
|
659
|
+
var styles$M = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
660
|
+
styleInject(css_248z$M);
|
|
659
661
|
|
|
660
662
|
const CardBody = (props) => {
|
|
661
663
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
662
664
|
const getCssClasses = () => {
|
|
663
665
|
const cssClasses = [];
|
|
664
|
-
cssClasses.push(styles$
|
|
666
|
+
cssClasses.push(styles$M.cardBody);
|
|
665
667
|
className && cssClasses.push(className);
|
|
666
668
|
return cssClasses.filter(css => css).join(' ');
|
|
667
669
|
};
|
|
668
670
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
669
671
|
};
|
|
670
672
|
|
|
671
|
-
var css_248z$
|
|
672
|
-
var styles$
|
|
673
|
-
styleInject(css_248z$
|
|
673
|
+
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}";
|
|
674
|
+
var styles$L = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
675
|
+
styleInject(css_248z$L);
|
|
674
676
|
|
|
675
677
|
const CardFooter = (props) => {
|
|
676
678
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
677
679
|
const getCssClasses = () => {
|
|
678
680
|
const cssClasses = [];
|
|
679
|
-
cssClasses.push(styles$
|
|
681
|
+
cssClasses.push(styles$L.cardFooter);
|
|
680
682
|
className && cssClasses.push(className);
|
|
681
683
|
return cssClasses.filter(css => css).join(' ');
|
|
682
684
|
};
|
|
683
685
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
684
686
|
};
|
|
685
687
|
|
|
686
|
-
var css_248z$
|
|
687
|
-
var styles$
|
|
688
|
-
styleInject(css_248z$
|
|
688
|
+
var css_248z$K = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important;\n}";
|
|
689
|
+
var styles$K = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
690
|
+
styleInject(css_248z$K);
|
|
689
691
|
|
|
690
692
|
const CardSubtitle = (props) => {
|
|
691
693
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
692
694
|
const getCssClasses = () => {
|
|
693
695
|
const cssClasses = [];
|
|
694
|
-
cssClasses.push(styles$
|
|
696
|
+
cssClasses.push(styles$K.cardSubtitle);
|
|
695
697
|
className && cssClasses.push(className);
|
|
696
698
|
return cssClasses.filter(css => css).join(' ');
|
|
697
699
|
};
|
|
698
700
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
699
701
|
};
|
|
700
702
|
|
|
701
|
-
var css_248z$
|
|
702
|
-
var styles$
|
|
703
|
-
styleInject(css_248z$
|
|
703
|
+
var css_248z$J = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0;\n}";
|
|
704
|
+
var styles$J = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
705
|
+
styleInject(css_248z$J);
|
|
704
706
|
|
|
705
707
|
const CardText = (props) => {
|
|
706
708
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
707
709
|
const getCssClasses = () => {
|
|
708
710
|
const cssClasses = [];
|
|
709
|
-
cssClasses.push(styles$
|
|
711
|
+
cssClasses.push(styles$J.cardText);
|
|
710
712
|
className && cssClasses.push(className);
|
|
711
713
|
return cssClasses.filter(css => css).join(' ');
|
|
712
714
|
};
|
|
713
715
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
714
716
|
};
|
|
715
717
|
|
|
716
|
-
var css_248z$
|
|
717
|
-
var styles$
|
|
718
|
-
styleInject(css_248z$
|
|
718
|
+
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}";
|
|
719
|
+
var styles$I = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
720
|
+
styleInject(css_248z$I);
|
|
719
721
|
|
|
720
722
|
const CardTitle = (props) => {
|
|
721
723
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
722
724
|
const getCssClasses = () => {
|
|
723
725
|
const cssClasses = [];
|
|
724
|
-
cssClasses.push(styles$
|
|
726
|
+
cssClasses.push(styles$I.cardTitle);
|
|
725
727
|
className && cssClasses.push(className);
|
|
726
728
|
return cssClasses.filter(css => css).join(' ');
|
|
727
729
|
};
|
|
728
730
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
729
731
|
};
|
|
730
732
|
|
|
731
|
-
var css_248z$
|
|
732
|
-
var styles$
|
|
733
|
-
styleInject(css_248z$
|
|
733
|
+
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}";
|
|
734
|
+
var styles$H = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
735
|
+
styleInject(css_248z$H);
|
|
734
736
|
|
|
735
737
|
const CardImage = (props) => {
|
|
736
738
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
737
739
|
const getCssClasses = () => {
|
|
738
740
|
const cssClasses = [];
|
|
739
|
-
cssClasses.push(styles$
|
|
741
|
+
cssClasses.push(styles$H.cardImage);
|
|
740
742
|
className && cssClasses.push(className);
|
|
741
743
|
return cssClasses.filter(css => css).join(' ');
|
|
742
744
|
};
|
|
743
745
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
744
746
|
};
|
|
745
747
|
|
|
746
|
-
var css_248z$
|
|
747
|
-
var styles$
|
|
748
|
-
styleInject(css_248z$
|
|
748
|
+
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}";
|
|
749
|
+
var styles$G = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
750
|
+
styleInject(css_248z$G);
|
|
749
751
|
|
|
750
752
|
const Checkbox = (props) => {
|
|
751
753
|
const { id, checked, className, label, name, value = 'off', disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -774,8 +776,8 @@ const Checkbox = (props) => {
|
|
|
774
776
|
};
|
|
775
777
|
const getCssClassesLabel = () => {
|
|
776
778
|
const cssClasses = [];
|
|
777
|
-
cssClasses.push(styles$
|
|
778
|
-
disabled && cssClasses.push(styles$
|
|
779
|
+
cssClasses.push(styles$G.checkboxLabel);
|
|
780
|
+
disabled && cssClasses.push(styles$G['disabled']);
|
|
779
781
|
return cssClasses.filter(css => css).join(' ');
|
|
780
782
|
};
|
|
781
783
|
const getIcon = () => {
|
|
@@ -788,24 +790,24 @@ const Checkbox = (props) => {
|
|
|
788
790
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
789
791
|
}
|
|
790
792
|
};
|
|
791
|
-
return (React.createElement("div", { className: styles$
|
|
793
|
+
return (React.createElement("div", { className: styles$G.checkboxContainer },
|
|
792
794
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
793
795
|
React.createElement("label", { onClick: handleClick, className: getCssClassesLabel() }, label),
|
|
794
796
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
795
797
|
};
|
|
796
798
|
|
|
797
|
-
var css_248z$
|
|
798
|
-
var styles$
|
|
799
|
-
styleInject(css_248z$
|
|
799
|
+
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}";
|
|
800
|
+
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"};
|
|
801
|
+
styleInject(css_248z$F);
|
|
800
802
|
|
|
801
803
|
const Chip = (props) => {
|
|
802
804
|
const { children, color = 'secondary', className, shadow, onClick, isDeletable, onDelete, deleteIcon = React.createElement(TimesCircleSolidIcon, null), style } = props, rest = __rest(props, ["children", "color", "className", "shadow", "onClick", "isDeletable", "onDelete", "deleteIcon", "style"]);
|
|
803
805
|
const getCssClass = () => {
|
|
804
806
|
const cssClasses = [];
|
|
805
|
-
cssClasses.push(styles$
|
|
806
|
-
cssClasses.push(styles$
|
|
807
|
-
shadow && cssClasses.push(styles$
|
|
808
|
-
onClick && cssClasses.push(styles$
|
|
807
|
+
cssClasses.push(styles$F.chip);
|
|
808
|
+
cssClasses.push(styles$F[color]);
|
|
809
|
+
shadow && cssClasses.push(styles$F['shadow']);
|
|
810
|
+
onClick && cssClasses.push(styles$F['clickable']);
|
|
809
811
|
className && cssClasses.push(className);
|
|
810
812
|
return cssClasses.filter(r => r).join(' ');
|
|
811
813
|
};
|
|
@@ -815,7 +817,7 @@ const Chip = (props) => {
|
|
|
815
817
|
};
|
|
816
818
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
817
819
|
React.createElement("span", null, children),
|
|
818
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
820
|
+
isDeletable && (React.createElement("div", { className: styles$F.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
819
821
|
};
|
|
820
822
|
|
|
821
823
|
const CssTransition = (props) => {
|
|
@@ -893,9 +895,9 @@ const CssTransition = (props) => {
|
|
|
893
895
|
React.createElement("div", { ref: transitionConainter, className: getCssClasses() }, children)));
|
|
894
896
|
};
|
|
895
897
|
|
|
896
|
-
var css_248z$
|
|
897
|
-
var styles$
|
|
898
|
-
styleInject(css_248z$
|
|
898
|
+
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}";
|
|
899
|
+
var styles$E = {"column":"Column-module_column__fcTgl"};
|
|
900
|
+
styleInject(css_248z$E);
|
|
899
901
|
|
|
900
902
|
const Column = (props) => {
|
|
901
903
|
const { children, className } = props,
|
|
@@ -913,22 +915,22 @@ const Column = (props) => {
|
|
|
913
915
|
// if (md) cssClasses.push(`col-md-${md.toString()}`);
|
|
914
916
|
// if (lg) cssClasses.push(`col-lg-${lg.toString()}`);
|
|
915
917
|
// if (xl) cssClasses.push(`col-xl-${xl.toString()}`);
|
|
916
|
-
cssClasses.push(styles$
|
|
918
|
+
cssClasses.push(styles$E.column);
|
|
917
919
|
className && cssClasses.push(className);
|
|
918
920
|
return cssClasses.filter(css => css).join(' ');
|
|
919
921
|
};
|
|
920
922
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
921
923
|
};
|
|
922
924
|
|
|
923
|
-
var css_248z$
|
|
924
|
-
var styles$
|
|
925
|
-
styleInject(css_248z$
|
|
925
|
+
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}";
|
|
926
|
+
var styles$D = {"row":"Row-module_row__bTIWp"};
|
|
927
|
+
styleInject(css_248z$D);
|
|
926
928
|
|
|
927
929
|
const Row = (_a) => {
|
|
928
930
|
var { children, direction = 'row', className } = _a, rest = __rest(_a, ["children", "direction", "className"]);
|
|
929
931
|
const getCssClasses = () => {
|
|
930
932
|
const cssClasses = [];
|
|
931
|
-
cssClasses.push(styles$
|
|
933
|
+
cssClasses.push(styles$D.row);
|
|
932
934
|
className && cssClasses.push(className);
|
|
933
935
|
direction && cssClasses.push(`flex-${direction}`);
|
|
934
936
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -936,15 +938,15 @@ const Row = (_a) => {
|
|
|
936
938
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
937
939
|
};
|
|
938
940
|
|
|
939
|
-
var css_248z$
|
|
940
|
-
var styles$
|
|
941
|
-
styleInject(css_248z$
|
|
941
|
+
var css_248z$C = ".FormLabel-module_formLabel__TXcHc {\n display: inline-block;\n margin-bottom: 0.5rem;\n}";
|
|
942
|
+
var styles$C = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
943
|
+
styleInject(css_248z$C);
|
|
942
944
|
|
|
943
945
|
const FormLabel = (_a) => {
|
|
944
946
|
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
945
947
|
const getCssClasses = () => {
|
|
946
948
|
const cssClasses = [];
|
|
947
|
-
cssClasses.push(styles$
|
|
949
|
+
cssClasses.push(styles$C.formLabel);
|
|
948
950
|
className && cssClasses.push(className);
|
|
949
951
|
return cssClasses.filter(css => css).join(' ');
|
|
950
952
|
};
|
|
@@ -981,9 +983,9 @@ const FileInput = (props) => {
|
|
|
981
983
|
React.createElement("input", Object.assign({ type: "file", ref: inputFileElement, className: getCssClasses(), id: id, name: name, multiple: multiple, accept: accept, disabled: disabled, readOnly: readOnly, hidden: true, onChange: handleOnChange, value: model }, rest))));
|
|
982
984
|
};
|
|
983
985
|
|
|
984
|
-
var css_248z$
|
|
985
|
-
var styles$
|
|
986
|
-
styleInject(css_248z$
|
|
986
|
+
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}";
|
|
987
|
+
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"};
|
|
988
|
+
styleInject(css_248z$B);
|
|
987
989
|
|
|
988
990
|
const Select = (props) => {
|
|
989
991
|
var _a, _b, _c;
|
|
@@ -996,9 +998,9 @@ const Select = (props) => {
|
|
|
996
998
|
const getCssClass = () => {
|
|
997
999
|
const cssClasses = [];
|
|
998
1000
|
className && cssClasses.push(className);
|
|
999
|
-
disabled && cssClasses.push(styles$
|
|
1000
|
-
readOnly && cssClasses.push(styles$
|
|
1001
|
-
cssClasses.push(styles$
|
|
1001
|
+
disabled && cssClasses.push(styles$B['disabled']);
|
|
1002
|
+
readOnly && cssClasses.push(styles$B['readOnly']);
|
|
1003
|
+
cssClasses.push(styles$B.select);
|
|
1002
1004
|
return cssClasses.filter(r => r).join(' ');
|
|
1003
1005
|
};
|
|
1004
1006
|
useEffect(() => {
|
|
@@ -1120,16 +1122,16 @@ const Select = (props) => {
|
|
|
1120
1122
|
}
|
|
1121
1123
|
}
|
|
1122
1124
|
};
|
|
1123
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
1125
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$B.selectContainer },
|
|
1124
1126
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
1125
1127
|
!multiple && renderSingleViewModel(),
|
|
1126
1128
|
multiple &&
|
|
1127
|
-
React.createElement("div", { className: styles$
|
|
1128
|
-
React.createElement(Icon, { className: "ml-
|
|
1129
|
+
React.createElement("div", { className: styles$B.chipContainer }, renderMultipleViewModel()),
|
|
1130
|
+
React.createElement(Icon, { className: "ml-auto" },
|
|
1129
1131
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
1130
1132
|
isShow &&
|
|
1131
1133
|
React.createElement(Portal, { className: 'backdrop-root' },
|
|
1132
|
-
React.createElement("div", { className: styles$
|
|
1134
|
+
React.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 } },
|
|
1133
1135
|
React.createElement(List, null, options && options.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), active: isActive(option) },
|
|
1134
1136
|
multiple &&
|
|
1135
1137
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -1137,33 +1139,33 @@ const Select = (props) => {
|
|
|
1137
1139
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() }))));
|
|
1138
1140
|
};
|
|
1139
1141
|
|
|
1140
|
-
var css_248z$
|
|
1141
|
-
var styles$
|
|
1142
|
-
styleInject(css_248z$
|
|
1142
|
+
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}";
|
|
1143
|
+
var styles$A = {"textarea":"Textarea-module_textarea__L5zqa","disabled":"Textarea-module_disabled__OqqOF","isInvalid":"Textarea-module_isInvalid__JI01W"};
|
|
1144
|
+
styleInject(css_248z$A);
|
|
1143
1145
|
|
|
1144
1146
|
const Textarea = (props) => {
|
|
1145
1147
|
const { className, error } = props, rest = __rest(props, ["className", "error"]);
|
|
1146
1148
|
const getCssClass = () => {
|
|
1147
1149
|
const cssClasses = [];
|
|
1148
|
-
cssClasses.push(styles$
|
|
1150
|
+
cssClasses.push(styles$A.textarea);
|
|
1149
1151
|
className && cssClasses.push(className);
|
|
1150
|
-
error && cssClasses.push(styles$
|
|
1152
|
+
error && cssClasses.push(styles$A['isInvalid']);
|
|
1151
1153
|
return cssClasses.filter(r => r).join(' ');
|
|
1152
1154
|
};
|
|
1153
1155
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
1154
1156
|
};
|
|
1155
1157
|
|
|
1156
|
-
var css_248z$
|
|
1157
|
-
var styles$
|
|
1158
|
-
styleInject(css_248z$
|
|
1158
|
+
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}";
|
|
1159
|
+
var styles$z = {"formInput":"FormInput-module_formInput__VXZip","disabled":"FormInput-module_disabled__EjdD9","isInvalid":"FormInput-module_isInvalid__vQDuz"};
|
|
1160
|
+
styleInject(css_248z$z);
|
|
1159
1161
|
|
|
1160
1162
|
const FormInput = (props) => {
|
|
1161
1163
|
const { value, name, type, placeholder, className, isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
1162
1164
|
const getCssClasses = () => {
|
|
1163
1165
|
const cssClasses = [];
|
|
1164
|
-
cssClasses.push(styles$
|
|
1166
|
+
cssClasses.push(styles$z.formInput);
|
|
1165
1167
|
className && cssClasses.push(className);
|
|
1166
|
-
!isValid && cssClasses.push(styles$
|
|
1168
|
+
!isValid && cssClasses.push(styles$z['isInvalid']);
|
|
1167
1169
|
return cssClasses.filter(css => css).join(' ');
|
|
1168
1170
|
};
|
|
1169
1171
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -1211,12 +1213,12 @@ const FormHint = (props) => {
|
|
|
1211
1213
|
return (React.createElement("small", { className: getCssClasses() }, children));
|
|
1212
1214
|
};
|
|
1213
1215
|
|
|
1214
|
-
var css_248z$
|
|
1215
|
-
var styles$
|
|
1216
|
-
styleInject(css_248z$
|
|
1216
|
+
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}";
|
|
1217
|
+
var styles$y = {"isInvalid":"FormError-module_isInvalid__tO1Sw"};
|
|
1218
|
+
styleInject(css_248z$y);
|
|
1217
1219
|
|
|
1218
1220
|
const FormError = (props) => {
|
|
1219
|
-
const { className = styles$
|
|
1221
|
+
const { className = styles$y.isInvalid, errors = [] } = props;
|
|
1220
1222
|
return (React.createElement(Fragment, null, errors &&
|
|
1221
1223
|
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
1222
1224
|
};
|
|
@@ -1547,16 +1549,16 @@ const DateSelect = (props) => {
|
|
|
1547
1549
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1548
1550
|
// };
|
|
1549
1551
|
|
|
1550
|
-
var css_248z$
|
|
1551
|
-
var styles$
|
|
1552
|
-
styleInject(css_248z$
|
|
1552
|
+
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}";
|
|
1553
|
+
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"};
|
|
1554
|
+
styleInject(css_248z$x);
|
|
1553
1555
|
|
|
1554
1556
|
const Drawer = (props) => {
|
|
1555
1557
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1556
1558
|
useEffect(() => {
|
|
1557
|
-
document.body.classList.add(styles$
|
|
1559
|
+
document.body.classList.add(styles$x.drawerOpen);
|
|
1558
1560
|
return () => {
|
|
1559
|
-
document.body.classList.remove(styles$
|
|
1561
|
+
document.body.classList.remove(styles$x.drawerOpen);
|
|
1560
1562
|
};
|
|
1561
1563
|
}, []);
|
|
1562
1564
|
const handleClickBackdrop = () => {
|
|
@@ -1570,10 +1572,10 @@ const DrawerContent = (props) => {
|
|
|
1570
1572
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1571
1573
|
const getCssClasses = () => {
|
|
1572
1574
|
const cssClasses = [];
|
|
1573
|
-
cssClasses.push(styles$
|
|
1574
|
-
shadow && cssClasses.push(styles$
|
|
1575
|
-
!!permanent && cssClasses.push(styles$
|
|
1576
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1575
|
+
cssClasses.push(styles$x.drawer);
|
|
1576
|
+
shadow && cssClasses.push(styles$x.shadow);
|
|
1577
|
+
!!permanent && cssClasses.push(styles$x['permanent']);
|
|
1578
|
+
position === 'left' ? cssClasses.push(styles$x['left']) : cssClasses.push(styles$x['right']);
|
|
1577
1579
|
className && cssClasses.push(className);
|
|
1578
1580
|
return cssClasses.filter(css => css).join(' ');
|
|
1579
1581
|
};
|
|
@@ -1587,9 +1589,9 @@ const DrawerContent = (props) => {
|
|
|
1587
1589
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1588
1590
|
};
|
|
1589
1591
|
|
|
1590
|
-
var css_248z$
|
|
1591
|
-
var styles$
|
|
1592
|
-
styleInject(css_248z$
|
|
1592
|
+
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}";
|
|
1593
|
+
var styles$w = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1594
|
+
styleInject(css_248z$w);
|
|
1593
1595
|
|
|
1594
1596
|
const MenuBody = (props) => {
|
|
1595
1597
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
@@ -1620,8 +1622,8 @@ const MenuBody = (props) => {
|
|
|
1620
1622
|
}, [menuBodyRef]);
|
|
1621
1623
|
const getCssClasses = () => {
|
|
1622
1624
|
const cssClasses = [];
|
|
1623
|
-
cssClasses.push(styles$
|
|
1624
|
-
shadow && cssClasses.push(styles$
|
|
1625
|
+
cssClasses.push(styles$w.menuBody);
|
|
1626
|
+
shadow && cssClasses.push(styles$w.shadow);
|
|
1625
1627
|
className && cssClasses.push(className);
|
|
1626
1628
|
return cssClasses.filter(css => css).join(' ');
|
|
1627
1629
|
};
|
|
@@ -1629,21 +1631,17 @@ const MenuBody = (props) => {
|
|
|
1629
1631
|
onClickBackdrop && onClickBackdrop();
|
|
1630
1632
|
};
|
|
1631
1633
|
return (React.createElement(Portal, { className: 'menu-root' },
|
|
1632
|
-
React.createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1634
|
+
React.createElement("div", { ref: menuBodyRef, className: getCssClasses() },
|
|
1635
|
+
React.createElement(List, null, children)),
|
|
1633
1636
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })));
|
|
1634
1637
|
};
|
|
1635
1638
|
|
|
1636
|
-
var css_248z$x = ".Menu-module_menu__p8QL- {\n display: flex;\n}";
|
|
1637
|
-
var styles$x = {"menu":"Menu-module_menu__p8QL-"};
|
|
1638
|
-
styleInject(css_248z$x);
|
|
1639
|
-
|
|
1640
1639
|
const Menu = (props) => {
|
|
1641
1640
|
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
1642
1641
|
const menuContainer = useRef(null);
|
|
1643
1642
|
const toggleContainerRef = useRef(null);
|
|
1644
1643
|
const getCssClasses = () => {
|
|
1645
1644
|
const cssClasses = [];
|
|
1646
|
-
cssClasses.push(styles$x.menu);
|
|
1647
1645
|
className && cssClasses.push(className);
|
|
1648
1646
|
return cssClasses.filter(css => css).join(' ');
|
|
1649
1647
|
};
|
|
@@ -1656,26 +1654,17 @@ const Menu = (props) => {
|
|
|
1656
1654
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1657
1655
|
};
|
|
1658
1656
|
|
|
1659
|
-
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}";
|
|
1660
|
-
var styles$w = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1661
|
-
styleInject(css_248z$w);
|
|
1662
|
-
|
|
1663
1657
|
const MenuItem = (props) => {
|
|
1664
|
-
const { children, onClick
|
|
1658
|
+
const { children, onClick } = props, rest = __rest(props, ["children", "onClick"]);
|
|
1665
1659
|
const getCssClasses = () => {
|
|
1666
1660
|
const cssClasses = [];
|
|
1667
|
-
cssClasses.push(styles$w.menuItem);
|
|
1668
|
-
if (type === 'header') {
|
|
1669
|
-
cssClasses.push(styles$w.menuItemHeader);
|
|
1670
|
-
}
|
|
1671
1661
|
return cssClasses.filter(css => css).join(' ');
|
|
1672
1662
|
};
|
|
1673
1663
|
const handleClick = (e) => {
|
|
1674
1664
|
e.stopPropagation();
|
|
1675
1665
|
onClick && onClick(e);
|
|
1676
1666
|
};
|
|
1677
|
-
return (React.createElement(
|
|
1678
|
-
React.createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
|
|
1667
|
+
return (React.createElement(ListItem, Object.assign({ className: getCssClasses(), onClick: handleClick }, rest), children));
|
|
1679
1668
|
};
|
|
1680
1669
|
|
|
1681
1670
|
const MenuToggle = ({ children }) => {
|
|
@@ -1875,7 +1864,6 @@ const Modal = (props) => {
|
|
|
1875
1864
|
};
|
|
1876
1865
|
}, []);
|
|
1877
1866
|
const handleClickBackdrop = () => {
|
|
1878
|
-
console.warn('backdrop clicked');
|
|
1879
1867
|
onBackdropClick && onBackdropClick();
|
|
1880
1868
|
};
|
|
1881
1869
|
return (React.createElement(React.Fragment, null,
|
|
@@ -1905,7 +1893,7 @@ var MODALBUTTONTYPE;
|
|
|
1905
1893
|
MODALBUTTONTYPE["DEFAULT"] = "DEFAULT";
|
|
1906
1894
|
})(MODALBUTTONTYPE || (MODALBUTTONTYPE = {}));
|
|
1907
1895
|
|
|
1908
|
-
const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackdropClick, isDismissable = false, buttons = [
|
|
1896
|
+
const GlobalModal = ({ title, description, formControls, onOk, onChange, onCancel, onBackdropClick, isDismissable = false, buttons = [
|
|
1909
1897
|
{ label: 'Cancel', type: MODALBUTTONTYPE.CANCEL, color: COLOR.secondary, variant: VARIANT.text, shadow: false },
|
|
1910
1898
|
{ label: 'Ok', type: MODALBUTTONTYPE.OK, variant: VARIANT.contained, focus: true },
|
|
1911
1899
|
], size = SIZE.md, fullScreen = false }) => {
|
|
@@ -1950,11 +1938,28 @@ const GlobalModal = ({ title, description, formControls, onOk, onCancel, onBackd
|
|
|
1950
1938
|
description && React.createElement("div", null, description),
|
|
1951
1939
|
modalType === MODALTYPE.FORM &&
|
|
1952
1940
|
React.createElement(Fragment, null,
|
|
1953
|
-
React.createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit }))));
|
|
1941
|
+
React.createElement(Form, { ref: myForm, controls: myControls, validateOnBlur: true, onSubmit: onSubmit, onChange: onChange }))));
|
|
1954
1942
|
};
|
|
1955
1943
|
|
|
1956
1944
|
class ModalService {
|
|
1957
1945
|
show(title, description, options) {
|
|
1946
|
+
return new Promise((resolve, reject) => {
|
|
1947
|
+
if (!this.container) {
|
|
1948
|
+
this.container = document.createElement('div');
|
|
1949
|
+
document.body.appendChild(this.container);
|
|
1950
|
+
const handleOk = () => {
|
|
1951
|
+
resolve();
|
|
1952
|
+
this.hide();
|
|
1953
|
+
};
|
|
1954
|
+
const handleCancel = () => {
|
|
1955
|
+
reject();
|
|
1956
|
+
this.hide();
|
|
1957
|
+
};
|
|
1958
|
+
render(React.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);
|
|
1959
|
+
}
|
|
1960
|
+
});
|
|
1961
|
+
}
|
|
1962
|
+
showForm(title, options) {
|
|
1958
1963
|
return new Promise((resolve, reject) => {
|
|
1959
1964
|
if (!this.container) {
|
|
1960
1965
|
this.container = document.createElement('div');
|
|
@@ -1963,11 +1968,15 @@ class ModalService {
|
|
|
1963
1968
|
resolve(values);
|
|
1964
1969
|
this.hide();
|
|
1965
1970
|
};
|
|
1971
|
+
// TODO - for AutoComplete
|
|
1972
|
+
const handleOnChange = (values) => {
|
|
1973
|
+
console.info(values);
|
|
1974
|
+
};
|
|
1966
1975
|
const handleCancel = () => {
|
|
1967
1976
|
reject();
|
|
1968
1977
|
this.hide();
|
|
1969
1978
|
};
|
|
1970
|
-
render(React.createElement(GlobalModal, { fullScreen: options && options.fullScreen, size: options && options.size, title: title,
|
|
1979
|
+
render(React.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);
|
|
1971
1980
|
}
|
|
1972
1981
|
});
|
|
1973
1982
|
}
|
|
@@ -2086,7 +2095,7 @@ const ProgressBar = (props) => {
|
|
|
2086
2095
|
}
|
|
2087
2096
|
return `${width}%`;
|
|
2088
2097
|
};
|
|
2089
|
-
return (React.createElement(Tooltip, { text: model === null || model === void 0 ? void 0 : model.toString() },
|
|
2098
|
+
return (React.createElement(Tooltip, { text: !indeterminate ? model === null || model === void 0 ? void 0 : model.toString() : '' },
|
|
2090
2099
|
React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
2091
2100
|
React.createElement("div", { className: getCssClassesBar(), style: { 'width': getStyle() }, role: "progressbar" }))));
|
|
2092
2101
|
};
|
|
@@ -2892,4 +2901,4 @@ const TreeItem = (props) => {
|
|
|
2892
2901
|
children && _isExpanded ? React.createElement("ul", null, children) : null));
|
|
2893
2902
|
};
|
|
2894
2903
|
|
|
2895
|
-
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|
|
2904
|
+
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, COLOR, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Column, ConditionalWrapper, CssTransition, DATEMODE, DateSelect, DaySelect, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TreeItem, TreeView, Typography, VARIANT, YearSelect, loadingIndicatorService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, useWindowSize };
|