react-asc 19.0.1 → 19.0.5
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/AutoComplete/AutoComplete.d.ts +0 -1
- package/components/Badge/Badge.d.ts +1 -1
- package/components/Breadcrumb/BreadcrumbItem.d.ts +2 -5
- package/components/ButtonGroup/ButtonGroup.d.ts +1 -3
- package/components/Card/CardBody.d.ts +1 -4
- package/components/Card/CardFooter.d.ts +1 -4
- package/components/Card/CardImage.d.ts +1 -4
- package/components/Card/CardSubtitle.d.ts +1 -4
- package/components/Card/CardText.d.ts +1 -4
- package/components/Chip/Chip.d.ts +1 -1
- package/components/ConditionalWrapper/ConditionalWrapper.d.ts +3 -3
- package/components/FloatingActionButton/FloatingActionButton.d.ts +1 -1
- package/components/Form/Form.d.ts +1 -1
- package/components/Form/FormHint/FormHint.d.ts +1 -4
- package/components/Form/FormInput/FormInput.d.ts +3 -3
- package/components/Form/FormLabel/FormLabel.d.ts +2 -4
- package/components/Form/form.interfaces.d.ts +1 -1
- package/components/Form/form.models.d.ts +2 -2
- package/components/Form/validators/IsEmptyValidator.d.ts +1 -1
- package/components/Form/validators/IsEqualValidator.d.ts +1 -1
- package/components/List/list.models.d.ts +2 -2
- package/components/LoadingIndicator/LoadingIndicator.d.ts +0 -2
- package/components/LoadingIndicator/loading-indicator.service.d.ts +2 -4
- package/components/Menu/Menu.d.ts +0 -1
- package/components/Menu/MenuBody.d.ts +1 -1
- package/components/Modal/Modal.d.ts +2 -2
- package/components/Modal/ModalHeader.d.ts +3 -4
- package/components/Select/Select.d.ts +2 -2
- package/components/SpeedDial/SpeedDialActions.d.ts +2 -6
- package/components/Stepper/Step/Step.d.ts +5 -2
- package/components/Tabs/Tab.d.ts +5 -2
- package/components/Tabs/TabIndicator.d.ts +2 -2
- package/components/Tabs/TabPanel.d.ts +0 -1
- package/components/TreeView/TreeItem.d.ts +6 -5
- package/hooks/useConstructor.d.ts +1 -1
- package/hooks/useDebounce.d.ts +2 -1
- package/index.es.js +347 -332
- package/index.js +347 -332
- package/package.json +1 -1
package/index.es.js
CHANGED
|
@@ -87,93 +87,93 @@ function styleInject(css, ref) {
|
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
var css_248z$
|
|
91
|
-
var styles$
|
|
92
|
-
styleInject(css_248z$
|
|
90
|
+
var css_248z$X = ".Alert-module_alert__b4tbk {\n border-radius: var(--borderRadius);\n padding: 6px 16px; }\n\n.Alert-module_contained__EM0x6.Alert-module_primary__q4pNj {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n\n.Alert-module_contained__EM0x6.Alert-module_accent__a2WIl {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n\n.Alert-module_contained__EM0x6.Alert-module_secondary__syXKX {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n\n.Alert-module_contained__EM0x6.Alert-module_light__VKCXF {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n\n.Alert-module_contained__EM0x6.Alert-module_dark__3c-Hm {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n\n.Alert-module_outline__T2262.Alert-module_primary__q4pNj {\n color: var(--primary) !important;\n border: 1px solid var(--primary) !important; }\n\n.Alert-module_outline__T2262.Alert-module_secondary__syXKX {\n color: var(--secondary) !important;\n border: 1px solid var(--secondary) !important; }\n\n.Alert-module_outline__T2262.Alert-module_accent__a2WIl {\n color: var(--accent) !important;\n border: 1px solid var(--accent) !important; }\n\n.Alert-module_outline__T2262.Alert-module_light__VKCXF {\n color: var(--light-contrast-text) !important;\n border: 1px solid var(--light) !important; }\n\n.Alert-module_outline__T2262.Alert-module_dark__3c-Hm {\n color: var(--dark) !important;\n border: 1px solid var(--dark) !important; }\n";
|
|
91
|
+
var styles$X = {"alert":"Alert-module_alert__b4tbk","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$X);
|
|
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$X.alert);
|
|
99
99
|
if (variant === VARIANT.contained) {
|
|
100
|
-
cssClasses.push(styles$
|
|
101
|
-
cssClasses.push(styles$
|
|
100
|
+
cssClasses.push(styles$X.contained);
|
|
101
|
+
cssClasses.push(styles$X[color]);
|
|
102
102
|
}
|
|
103
103
|
if (variant === VARIANT.outline) {
|
|
104
|
-
cssClasses.push(styles$
|
|
105
|
-
cssClasses.push(styles$
|
|
104
|
+
cssClasses.push(styles$X.outline);
|
|
105
|
+
cssClasses.push(styles$X[color]);
|
|
106
106
|
}
|
|
107
|
-
shadow && cssClasses.push(styles$
|
|
107
|
+
shadow && cssClasses.push(styles$X['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$W = ".AppBar-module_appbar__Neyh3 {\n padding: 0.5rem 1rem;\n display: flex;\n z-index: 1000;\n min-height: 64px;\n flex-shrink: 0; }\n .AppBar-module_appbar__Neyh3.AppBar-module_primary__xMqXD {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_secondary__8MkLA {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .AppBar-module_appbar__Neyh3.AppBar-module_accent__vHbkp {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .AppBar-module_appbar__Neyh3.AppBar-module_light__HGy3y {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .AppBar-module_appbar__Neyh3.AppBar-module_dark__ILq96 {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .AppBar-module_appbar__Neyh3.AppBar-module_shadow__gQN8s {\n box-shadow: var(--shadow); }\n";
|
|
115
|
+
var styles$W = {"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$W);
|
|
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$W[color]);
|
|
123
|
+
cssClasses.push(styles$W.appbar);
|
|
124
|
+
shadow && cssClasses.push(styles$W['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$V = ".AppBarTitle-module_appbarTitle__RsFg5 {\n align-items: center;\n padding-top: 0.3125rem;\n padding-bottom: 0.3125rem;\n font-size: 1.25rem;\n line-height: 1.8;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden !important;\n display: inline-block; }\n .AppBarTitle-module_appbarTitle__RsFg5:hover {\n cursor: pointer; }\n";
|
|
132
|
+
var styles$V = {"appbarTitle":"AppBarTitle-module_appbarTitle__RsFg5"};
|
|
133
|
+
styleInject(css_248z$V);
|
|
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$V.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$U = ".Icon-module_icon__lFKCA {\n align-items: center;\n justify-content: center;\n display: flex;\n width: 20px;\n height: 20px; }\n .Icon-module_icon__lFKCA svg {\n width: inherit;\n height: inherit; }\n .Icon-module_icon__lFKCA.Icon-module_primary__3fID- {\n color: var(--primary); }\n .Icon-module_icon__lFKCA.Icon-module_accent__aZXGb {\n color: var(--accent); }\n .Icon-module_icon__lFKCA.Icon-module_secondary__HKKop {\n color: var(--secondary); }\n .Icon-module_icon__lFKCA.Icon-module_light__-ApMm {\n color: var(--light); }\n .Icon-module_icon__lFKCA.Icon-module_dark__DpCIK {\n color: var(--dark); }\n";
|
|
147
|
+
var styles$U = {"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$U);
|
|
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$U.icon);
|
|
155
|
+
iconColor && cssClasses.push(styles$U[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$T = ".IconButton-module_iconButton__rpCPQ {\n border-radius: 100%;\n padding: 0px;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n min-width: auto;\n box-shadow: none;\n font-weight: 400;\n text-align: center;\n vertical-align: middle;\n -webkit-user-select: none;\n user-select: none;\n background-color: transparent;\n font-size: 1rem;\n line-height: 1.5;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: none; }\n .IconButton-module_iconButton__rpCPQ:hover {\n cursor: pointer; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_shadow__Uw0RK {\n box-shadow: var(--shadow); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_md__XnuSk {\n width: 48px;\n height: 48px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_lg__arEvo {\n width: 56px;\n height: 56px; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag {\n padding: 0;\n background: transparent;\n color: inherit; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G {\n color: var(--primary); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n color: var(--primary-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY {\n color: var(--secondary); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n color: var(--secondary-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2 {\n color: var(--accent); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n color: var(--accent-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO {\n color: var(--light); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n color: var(--light-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH {\n color: var(--dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n color: var(--dark-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_text__Ualag.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none; }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_active__VIqU9 {\n background-color: rgba(0, 0, 0, 0.04); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G {\n background-color: var(--primary);\n color: var(--white); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_primary__vbo-G.IconButton-module_active__VIqU9 {\n background-color: var(--primary-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY {\n background-color: var(--secondary);\n color: var(--white); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_secondary__AiNAY.IconButton-module_active__VIqU9 {\n background-color: var(--secondary-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2 {\n background-color: var(--accent);\n color: var(--white); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_accent__QRzM2.IconButton-module_active__VIqU9 {\n background-color: var(--accent-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO {\n background-color: var(--light);\n color: var(--dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_light__YNEiO.IconButton-module_active__VIqU9 {\n background-color: var(--light-dark); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH {\n background-color: var(--dark);\n color: var(--white); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH:hover, .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_dark__gnbUH.IconButton-module_active__VIqU9 {\n background-color: var(--dark-light); }\n .IconButton-module_iconButton__rpCPQ.IconButton-module_contained__k7vGA.IconButton-module_disabled__QB0ZV {\n color: rgba(0, 0, 0, 0.26);\n background-color: transparent;\n cursor: default;\n pointer-events: none; }\n";
|
|
163
|
+
var styles$T = {"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$T);
|
|
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$T[color]);
|
|
171
|
+
cssClasses.push(styles$T[variant]);
|
|
172
|
+
cssClasses.push(styles$T[size]);
|
|
173
|
+
cssClasses.push(styles$T.iconButton);
|
|
174
|
+
isActive && cssClasses.push(styles$T.active);
|
|
175
|
+
disabled && cssClasses.push(styles$T.disabled);
|
|
176
|
+
shadow && cssClasses.push(styles$T.shadow);
|
|
177
177
|
className && cssClasses.push(className);
|
|
178
178
|
return cssClasses.filter(css => css).join(' ');
|
|
179
179
|
};
|
|
@@ -249,6 +249,7 @@ function useHover() {
|
|
|
249
249
|
const handleMouseOver = () => setValue(true);
|
|
250
250
|
const handleMouseOut = () => setValue(false);
|
|
251
251
|
useEffect(() => {
|
|
252
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
252
253
|
const node = ref.current;
|
|
253
254
|
if (node) {
|
|
254
255
|
node.addEventListener("mouseover", handleMouseOver);
|
|
@@ -264,7 +265,7 @@ function useHover() {
|
|
|
264
265
|
return [ref, value];
|
|
265
266
|
}
|
|
266
267
|
|
|
267
|
-
const useConstructor = (callBack
|
|
268
|
+
const useConstructor = (callBack) => {
|
|
268
269
|
const [hasBeenCalled, setHasBeenCalled] = useState(false);
|
|
269
270
|
if (hasBeenCalled)
|
|
270
271
|
return;
|
|
@@ -302,34 +303,34 @@ const Backdrop = (props) => {
|
|
|
302
303
|
return (createPortal(React.createElement("div", Object.assign({ className: getCssClasses(), onClick: handleClick, style: getStyles() }, rest)), target));
|
|
303
304
|
};
|
|
304
305
|
|
|
305
|
-
var css_248z$
|
|
306
|
-
var styles$
|
|
307
|
-
styleInject(css_248z$
|
|
306
|
+
var css_248z$S = ".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";
|
|
307
|
+
var styles$S = {"list":"List-module_list__gpZ41"};
|
|
308
|
+
styleInject(css_248z$S);
|
|
308
309
|
|
|
309
310
|
const List = (props) => {
|
|
310
311
|
const { children, className, isFlush } = props, rest = __rest(props, ["children", "className", "isFlush"]);
|
|
311
312
|
const getCssClasses = () => {
|
|
312
313
|
const cssClasses = [];
|
|
313
|
-
isFlush && cssClasses.push(styles$
|
|
314
|
-
cssClasses.push(styles$
|
|
314
|
+
isFlush && cssClasses.push(styles$S.flush);
|
|
315
|
+
cssClasses.push(styles$S.list);
|
|
315
316
|
className && cssClasses.push(className);
|
|
316
317
|
return cssClasses.filter(css => css).join(' ');
|
|
317
318
|
};
|
|
318
319
|
return (React.createElement("ul", Object.assign({ className: getCssClasses() }, rest), children));
|
|
319
320
|
};
|
|
320
321
|
|
|
321
|
-
var css_248z$
|
|
322
|
-
var styles$
|
|
323
|
-
styleInject(css_248z$
|
|
322
|
+
var css_248z$R = ".ListItem-module_listItem__Pk1AP {\n display: flex;\n align-items: center;\n position: relative;\n padding: 0.75rem 1.25rem;\n min-width: 100%;\n color: var(--bodyColor);\n text-align: inherit;\n transition: background 0.5s ease; }\n .ListItem-module_listItem__Pk1AP:hover, .ListItem-module_listItem__Pk1AP.ListItem-module_active__zm2q8 {\n cursor: pointer;\n z-index: 1;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.04);\n color: var(--primary); }\n .ListItem-module_listItem__Pk1AP + .ListItem-module_listItem__Pk1AP {\n border-top-width: 0; }\n .ListItem-module_listItem__Pk1AP.ListItem-module_primary__F6Qja {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_accent__pg3Ha {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_secondary__d0drD {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_light__37kby {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_dark__ZxQTF {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl {\n color: rgba(0, 0, 0, 0.26); }\n .ListItem-module_listItem__Pk1AP.ListItem-module_disabled__DQLKl:hover {\n cursor: not-allowed;\n background-color: inherit; }\n";
|
|
323
|
+
var styles$R = {"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"};
|
|
324
|
+
styleInject(css_248z$R);
|
|
324
325
|
|
|
325
326
|
const ListItem = (props) => {
|
|
326
327
|
const { children, color, active, className, disabled, onClick } = props, rest = __rest(props, ["children", "color", "active", "className", "disabled", "onClick"]);
|
|
327
328
|
const getCssClasses = () => {
|
|
328
329
|
const cssClasses = [];
|
|
329
|
-
cssClasses.push(styles$
|
|
330
|
-
color && cssClasses.push(styles$
|
|
331
|
-
active && cssClasses.push(styles$
|
|
332
|
-
disabled && cssClasses.push(styles$
|
|
330
|
+
cssClasses.push(styles$R.listItem);
|
|
331
|
+
color && cssClasses.push(styles$R[color]);
|
|
332
|
+
active && cssClasses.push(styles$R['active']);
|
|
333
|
+
disabled && cssClasses.push(styles$R['disabled']);
|
|
333
334
|
className && cssClasses.push(className);
|
|
334
335
|
return cssClasses.filter(css => css).join(' ');
|
|
335
336
|
};
|
|
@@ -339,42 +340,42 @@ const ListItem = (props) => {
|
|
|
339
340
|
return (React.createElement("li", Object.assign({ onClick: handleClick, className: getCssClasses() }, rest), children));
|
|
340
341
|
};
|
|
341
342
|
|
|
342
|
-
var css_248z$
|
|
343
|
-
var styles$
|
|
344
|
-
styleInject(css_248z$
|
|
343
|
+
var css_248z$Q = ".ListItemAvatar-module_avatar__sVWfR {\n margin-right: 16px; }\n .ListItemAvatar-module_avatar__sVWfR svg, .ListItemAvatar-module_avatar__sVWfR img {\n width: 24px;\n height: 24px; }\n .ListItemAvatar-module_avatar__sVWfR img {\n border-radius: 50%; }\n";
|
|
344
|
+
var styles$Q = {"avatar":"ListItemAvatar-module_avatar__sVWfR"};
|
|
345
|
+
styleInject(css_248z$Q);
|
|
345
346
|
|
|
346
347
|
const ListItemAvatar = (_a) => {
|
|
347
348
|
var { avatar } = _a, rest = __rest(_a, ["avatar"]);
|
|
348
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
349
|
+
return (React.createElement("div", Object.assign({ className: styles$Q.avatar }, rest), avatar));
|
|
349
350
|
};
|
|
350
351
|
|
|
351
|
-
var css_248z$
|
|
352
|
-
var styles$
|
|
353
|
-
styleInject(css_248z$
|
|
352
|
+
var css_248z$P = ".ListItemIcon-module_icon__cCvEv {\n margin-right: 32px; }\n .ListItemIcon-module_icon__cCvEv svg {\n width: 24px;\n height: 24px; }\n";
|
|
353
|
+
var styles$P = {"icon":"ListItemIcon-module_icon__cCvEv"};
|
|
354
|
+
styleInject(css_248z$P);
|
|
354
355
|
|
|
355
356
|
const ListItemIcon = (_a) => {
|
|
356
357
|
var { icon } = _a, rest = __rest(_a, ["icon"]);
|
|
357
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
358
|
+
return (React.createElement("div", Object.assign({ className: styles$P.icon }, rest), icon));
|
|
358
359
|
};
|
|
359
360
|
|
|
360
|
-
var css_248z$
|
|
361
|
-
var styles$
|
|
362
|
-
styleInject(css_248z$
|
|
361
|
+
var css_248z$O = ".ListItemAction-module_listItemAction__gAQRj {\n display: flex;\n justify-content: center;\n min-width: 40px; }\n .ListItemAction-module_listItemAction__gAQRj svg {\n width: 20px;\n height: 20px; }\n";
|
|
362
|
+
var styles$O = {"listItemAction":"ListItemAction-module_listItemAction__gAQRj"};
|
|
363
|
+
styleInject(css_248z$O);
|
|
363
364
|
|
|
364
365
|
const ListItemAction = (_a) => {
|
|
365
366
|
var { children, onClick } = _a, rest = __rest(_a, ["children", "onClick"]);
|
|
366
|
-
return (React.createElement("div", Object.assign({ className: styles$
|
|
367
|
+
return (React.createElement("div", Object.assign({ className: styles$O.listItemAction, onClick: e => onClick && onClick(e) }, rest), children));
|
|
367
368
|
};
|
|
368
369
|
|
|
369
|
-
var css_248z$
|
|
370
|
-
var styles$
|
|
371
|
-
styleInject(css_248z$
|
|
370
|
+
var css_248z$N = ".ListItemTextIcon-module_listItemText__xCBLW {\n flex: 1; }\n";
|
|
371
|
+
var styles$N = {"listItemText":"ListItemTextIcon-module_listItemText__xCBLW"};
|
|
372
|
+
styleInject(css_248z$N);
|
|
372
373
|
|
|
373
374
|
const ListItemText = (_a) => {
|
|
374
375
|
var { primary, secondary } = _a, rest = __rest(_a, ["primary", "secondary"]);
|
|
375
376
|
const getCssClasses = () => {
|
|
376
377
|
const cssClasses = [];
|
|
377
|
-
cssClasses.push(styles$
|
|
378
|
+
cssClasses.push(styles$N.listItemText);
|
|
378
379
|
return cssClasses.filter(css => css).join(' ');
|
|
379
380
|
};
|
|
380
381
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -385,9 +386,9 @@ const ListItemText = (_a) => {
|
|
|
385
386
|
const ListItemTextPrimary = ({ children }) => (React.createElement("div", { className: "list-item-text-primary" }, children));
|
|
386
387
|
const ListItemTextSecondary = ({ children }) => (React.createElement("div", { className: "list-item-text-secondary text-muted", style: { fontSize: '0.875rem' } }, children));
|
|
387
388
|
|
|
388
|
-
var css_248z$
|
|
389
|
-
var styles$
|
|
390
|
-
styleInject(css_248z$
|
|
389
|
+
var css_248z$M = ".AutoComplete-module_selectContainer__1kA85 {\n position: relative; }\n\n.AutoComplete-module_select__NNYOi {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .AutoComplete-module_select__NNYOi:hover {\n cursor: pointer; }\n\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";
|
|
390
|
+
var styles$M = {"selectContainer":"AutoComplete-module_selectContainer__1kA85","select":"AutoComplete-module_select__NNYOi","selectMenu":"AutoComplete-module_selectMenu__Gu81L"};
|
|
391
|
+
styleInject(css_248z$M);
|
|
391
392
|
|
|
392
393
|
// preset value
|
|
393
394
|
// enter -> delay? -> show results
|
|
@@ -443,7 +444,7 @@ const AutoComplete = (props) => {
|
|
|
443
444
|
const getCssClass = () => {
|
|
444
445
|
const cssClasses = [];
|
|
445
446
|
className && cssClasses.push(className);
|
|
446
|
-
cssClasses.push(styles$
|
|
447
|
+
cssClasses.push(styles$M.select);
|
|
447
448
|
return cssClasses.filter(r => r).join(' ');
|
|
448
449
|
};
|
|
449
450
|
const show = () => setIsShow(true);
|
|
@@ -467,35 +468,35 @@ const AutoComplete = (props) => {
|
|
|
467
468
|
setModel('');
|
|
468
469
|
setSearchText('');
|
|
469
470
|
};
|
|
470
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
471
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$M.selectContainer },
|
|
471
472
|
React.createElement("div", { className: "d-flex" },
|
|
472
473
|
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 }),
|
|
473
474
|
showClearButton && (model === null || model === void 0 ? void 0 : model.length) > 0 &&
|
|
474
475
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), onClick: handleClickReset })),
|
|
475
476
|
isShow &&
|
|
476
477
|
React.createElement(React.Fragment, null,
|
|
477
|
-
React.createElement("div", { className: styles$
|
|
478
|
+
React.createElement("div", { className: styles$M.selectMenu },
|
|
478
479
|
React.createElement(List, null, optionsTemp && optionsTemp.map((option, index) => React.createElement(ListItem, { id: `list-item-${index}`, key: option.value, onClick: () => handleOnClick(option), disabled: !option.value },
|
|
479
480
|
React.createElement(ListItemText, { primary: option.label ? option.label : option.value }))))),
|
|
480
481
|
React.createElement(Backdrop, { isTransparent: true, onClick: () => hide() }))));
|
|
481
482
|
};
|
|
482
483
|
|
|
483
|
-
var css_248z$
|
|
484
|
-
var styles$
|
|
485
|
-
styleInject(css_248z$
|
|
484
|
+
var css_248z$L = ".Badge-module_badgeContainer__3nZBs {\n display: inline-flex;\n position: relative;\n flex-shrink: 0;\n vertical-align: middle; }\n\n.Badge-module_badge__9ImR0 {\n top: 0;\n right: 0;\n transform: scale(1) translate(50%, -50%);\n transform-origin: 100% 0%;\n height: 20px;\n display: flex;\n padding: 0 6px;\n z-index: 1;\n position: absolute;\n flex-wrap: wrap;\n font-size: 0.75rem;\n min-width: 20px;\n align-items: center;\n font-weight: 500;\n line-height: 1;\n align-content: center;\n flex-direction: row;\n justify-content: center;\n border-radius: 10px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n .Badge-module_badge__9ImR0.Badge-module_primary__41U-t {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Badge-module_badge__9ImR0.Badge-module_accent__OQy2- {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Badge-module_badge__9ImR0.Badge-module_secondary__a9Jfh {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Badge-module_badge__9ImR0.Badge-module_light__4QvQ5 {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Badge-module_badge__9ImR0.Badge-module_dark__g1yUJ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n";
|
|
485
|
+
var styles$L = {"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"};
|
|
486
|
+
styleInject(css_248z$L);
|
|
486
487
|
|
|
487
488
|
const Badge = (props) => {
|
|
488
489
|
const { children, content, className, color = COLOR.primary } = props, rest = __rest(props, ["children", "content", "className", "color"]);
|
|
489
490
|
const getCssClassesBadgeContainer = () => {
|
|
490
491
|
const cssClasses = [];
|
|
491
|
-
cssClasses.push(styles$
|
|
492
|
+
cssClasses.push(styles$L.badgeContainer);
|
|
492
493
|
className && cssClasses.push(className);
|
|
493
494
|
return cssClasses.filter(css => css).join(' ');
|
|
494
495
|
};
|
|
495
496
|
const getCssClassesBadge = () => {
|
|
496
497
|
const cssClasses = [];
|
|
497
|
-
cssClasses.push(styles$
|
|
498
|
-
cssClasses.push(styles$
|
|
498
|
+
cssClasses.push(styles$L.badge);
|
|
499
|
+
cssClasses.push(styles$L[color]);
|
|
499
500
|
return cssClasses.filter(css => css).join(' ');
|
|
500
501
|
};
|
|
501
502
|
return (React.createElement("div", Object.assign({ className: getCssClassesBadgeContainer() }, rest),
|
|
@@ -503,26 +504,26 @@ const Badge = (props) => {
|
|
|
503
504
|
React.createElement("span", { className: getCssClassesBadge() }, content)));
|
|
504
505
|
};
|
|
505
506
|
|
|
506
|
-
var css_248z$
|
|
507
|
-
var styles$
|
|
508
|
-
styleInject(css_248z$
|
|
507
|
+
var css_248z$K = ".Button-module_button__qeIer {\n text-transform: uppercase !important;\n flex-shrink: 0;\n background-color: transparent;\n display: inline-block;\n font-weight: 400;\n line-height: 1.5;\n text-align: center;\n text-decoration: none;\n vertical-align: middle;\n user-select: none;\n border: 1px solid transparent;\n padding: 0.375rem 0.75rem;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n min-width: 64px;\n font-size: 0.875rem;\n border-radius: var(--borderRadius);\n box-shadow: var(--shadow); }\n\n.Button-module_btnContained__16y5l.Button-module_primary__EUyOu {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Button-module_btnContained__16y5l.Button-module_primary__EUyOu:hover {\n background-color: var(--primary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_accent__opVgQ {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Button-module_btnContained__16y5l.Button-module_accent__opVgQ:hover {\n background-color: var(--accent-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_secondary__zKoGk {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Button-module_btnContained__16y5l.Button-module_secondary__zKoGk:hover {\n background-color: var(--secondary-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_light__LXeZy {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Button-module_btnContained__16y5l.Button-module_light__LXeZy:hover {\n background-color: var(--light-dark); }\n\n.Button-module_btnContained__16y5l.Button-module_dark__5oFOT {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Button-module_btnContained__16y5l.Button-module_dark__5oFOT:hover {\n background-color: var(--dark-dark); }\n\n.Button-module_btnContained__16y5l:disabled:hover {\n cursor: not-allowed; }\n\n.Button-module_btnText__N5Gys {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu {\n color: var(--primary) !important; }\n .Button-module_btnText__N5Gys.Button-module_primary__EUyOu:hover {\n text-decoration: none;\n background: var(--primary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk {\n color: var(--secondary) !important; }\n .Button-module_btnText__N5Gys.Button-module_secondary__zKoGk:hover {\n text-decoration: none;\n background: var(--secondary-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ {\n color: var(--accent) !important; }\n .Button-module_btnText__N5Gys.Button-module_accent__opVgQ:hover {\n text-decoration: none;\n background: var(--accent-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important; }\n .Button-module_btnText__N5Gys.Button-module_light__LXeZy:hover {\n text-decoration: none;\n background: var(--light-highlight) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT {\n color: var(--dark) !important; }\n .Button-module_btnText__N5Gys.Button-module_dark__5oFOT:hover {\n text-decoration: none;\n background: var(--dark-highlight) !important; }\n\n.Button-module_btnOutline__CCFPI {\n box-shadow: none;\n text-decoration: none; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu {\n color: var(--primary) !important;\n border-color: var(--primary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_primary__EUyOu:hover {\n background: var(--primary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk {\n color: var(--secondary) !important;\n border-color: var(--secondary) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_secondary__zKoGk:hover {\n background: var(--secondary-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ {\n color: var(--accent) !important;\n border-color: var(--accent) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_accent__opVgQ:hover {\n background: var(--accent-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy {\n color: var(--light-contrast-text) !important;\n border-color: var(--light) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_light__LXeZy:hover {\n background: var(--light-highlight) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT {\n color: var(--dark) !important;\n border-color: var(--dark) !important; }\n .Button-module_btnOutline__CCFPI.Button-module_dark__5oFOT:hover {\n background: var(--dark-highlight) !important; }\n\n.Button-module_startIcon__Eylwr {\n display: inherit;\n margin-left: -4px;\n margin-right: 8px; }\n .Button-module_startIcon__Eylwr svg {\n width: 18px;\n height: 18px; }\n\n.Button-module_endIcon__pCffL {\n display: inherit;\n margin-left: 8px; }\n .Button-module_endIcon__pCffL svg {\n width: 18px;\n height: 18px; }\n";
|
|
508
|
+
var styles$K = {"button":"Button-module_button__qeIer","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"};
|
|
509
|
+
styleInject(css_248z$K);
|
|
509
510
|
|
|
510
511
|
const Button = (props) => {
|
|
511
512
|
const { children, variant = VARIANT.contained, color = COLOR.primary, isRounded, isActive, className, startIcon, endIcon } = props, rest = __rest(props, ["children", "variant", "color", "isRounded", "isActive", "className", "startIcon", "endIcon"]);
|
|
512
513
|
const getCssClasses = () => {
|
|
513
514
|
const cssClasses = [];
|
|
514
|
-
cssClasses.push(styles$
|
|
515
|
+
cssClasses.push(styles$K.button);
|
|
515
516
|
if (variant !== 'outline' && variant !== 'text') {
|
|
516
|
-
cssClasses.push(styles$
|
|
517
|
-
cssClasses.push(styles$
|
|
517
|
+
cssClasses.push(styles$K.btnContained);
|
|
518
|
+
cssClasses.push(styles$K[color]);
|
|
518
519
|
}
|
|
519
520
|
if (variant === 'outline') {
|
|
520
|
-
cssClasses.push(styles$
|
|
521
|
-
cssClasses.push(styles$
|
|
521
|
+
cssClasses.push(styles$K.btnOutline);
|
|
522
|
+
cssClasses.push(styles$K[color]);
|
|
522
523
|
}
|
|
523
524
|
if (variant === 'text') {
|
|
524
|
-
cssClasses.push(styles$
|
|
525
|
-
cssClasses.push(styles$
|
|
525
|
+
cssClasses.push(styles$K.btnText);
|
|
526
|
+
cssClasses.push(styles$K[color]);
|
|
526
527
|
}
|
|
527
528
|
if (isRounded && variant !== 'text') {
|
|
528
529
|
cssClasses.push(`rounded-pill`);
|
|
@@ -536,36 +537,36 @@ const Button = (props) => {
|
|
|
536
537
|
return (React.createElement("button", Object.assign({ type: "button", className: getCssClasses() }, rest),
|
|
537
538
|
React.createElement("span", { className: "d-flex justify-content-center" },
|
|
538
539
|
startIcon &&
|
|
539
|
-
React.createElement(Icon, { className: styles$
|
|
540
|
+
React.createElement(Icon, { className: styles$K.startIcon }, startIcon),
|
|
540
541
|
children,
|
|
541
542
|
endIcon &&
|
|
542
|
-
React.createElement(Icon, { className: styles$
|
|
543
|
+
React.createElement(Icon, { className: styles$K.endIcon }, endIcon))));
|
|
543
544
|
};
|
|
544
545
|
|
|
545
|
-
var css_248z$
|
|
546
|
-
var styles$
|
|
547
|
-
styleInject(css_248z$
|
|
546
|
+
var css_248z$J = ".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";
|
|
547
|
+
var styles$J = {"buttonGroup":"ButtonGroup-module_buttonGroup__w6iB-"};
|
|
548
|
+
styleInject(css_248z$J);
|
|
548
549
|
|
|
549
550
|
const ButtonGroup = (props) => {
|
|
550
551
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
551
552
|
const getCssClasses = () => {
|
|
552
553
|
const cssClasses = [];
|
|
553
|
-
cssClasses.push(styles$
|
|
554
|
+
cssClasses.push(styles$J.buttonGroup);
|
|
554
555
|
className && cssClasses.push(className);
|
|
555
556
|
return cssClasses.filter(css => css).join(' ');
|
|
556
557
|
};
|
|
557
558
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
558
559
|
};
|
|
559
560
|
|
|
560
|
-
var css_248z$
|
|
561
|
-
var styles$
|
|
562
|
-
styleInject(css_248z$
|
|
561
|
+
var css_248z$I = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n margin-bottom: 0;\n list-style: none;\n margin-bottom: 1rem; }\n";
|
|
562
|
+
var styles$I = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
563
|
+
styleInject(css_248z$I);
|
|
563
564
|
|
|
564
565
|
const Breadcrumb = (props) => {
|
|
565
566
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
566
567
|
const getCssClasses = () => {
|
|
567
568
|
const cssClasses = [];
|
|
568
|
-
cssClasses.push(styles$
|
|
569
|
+
cssClasses.push(styles$I.breadcrumb);
|
|
569
570
|
className && cssClasses.push(className);
|
|
570
571
|
return cssClasses.filter(css => css).join(' ');
|
|
571
572
|
};
|
|
@@ -575,15 +576,15 @@ const Breadcrumb = (props) => {
|
|
|
575
576
|
|
|
576
577
|
const ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
|
|
577
578
|
|
|
578
|
-
var css_248z$
|
|
579
|
-
var styles$
|
|
580
|
-
styleInject(css_248z$
|
|
579
|
+
var css_248z$H = ".BreadcrumbItem-module_breadcrumbItem__zsUq- {\n display: flex;\n align-items: center; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq- {\n padding-left: 0.5rem; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- + .BreadcrumbItem-module_breadcrumbItem__zsUq-::before {\n float: left;\n padding-right: 0.5rem;\n color: #6c757d;\n content: \"/\"; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq- a:not([href]):not([class]) {\n color: var(--primary); }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-:hover {\n cursor: pointer; }\n .BreadcrumbItem-module_breadcrumbItem__zsUq-.BreadcrumbItem-module_active__Kn1dA:hover {\n cursor: unset; }\n";
|
|
580
|
+
var styles$H = {"breadcrumbItem":"BreadcrumbItem-module_breadcrumbItem__zsUq-","active":"BreadcrumbItem-module_active__Kn1dA"};
|
|
581
|
+
styleInject(css_248z$H);
|
|
581
582
|
|
|
582
583
|
const BreadcrumbItem = (props) => {
|
|
583
584
|
const { children, className, isActive, onClick } = props;
|
|
584
585
|
const getCssClasses = () => {
|
|
585
586
|
const cssClasses = [];
|
|
586
|
-
cssClasses.push(styles$
|
|
587
|
+
cssClasses.push(styles$H.breadcrumbItem);
|
|
587
588
|
className && cssClasses.push(className);
|
|
588
589
|
isActive && cssClasses.push('active');
|
|
589
590
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -592,120 +593,118 @@ const BreadcrumbItem = (props) => {
|
|
|
592
593
|
onClick && onClick(event);
|
|
593
594
|
};
|
|
594
595
|
return (React.createElement("li", { className: getCssClasses(), onClick: handleClick },
|
|
595
|
-
React.createElement(ConditionalWrapper, { condition: !isActive,
|
|
596
|
-
// eslint-disable-next-line jsx-a11y/anchor-is-valid
|
|
597
|
-
wrapper: label => React.createElement("a", null, label) }, children)));
|
|
596
|
+
React.createElement(ConditionalWrapper, { condition: !isActive, wrapper: label => React.createElement("a", null, label) }, children)));
|
|
598
597
|
};
|
|
599
598
|
|
|
600
|
-
var css_248z$
|
|
601
|
-
var styles$
|
|
602
|
-
styleInject(css_248z$
|
|
599
|
+
var css_248z$G = ".Card-module_card__TQdQq {\n background: var(--white);\n border-radius: var(--borderRadius); }\n .Card-module_card__TQdQq.Card-module_shadow__NxDVz {\n box-shadow: var(--shadow); }\n";
|
|
600
|
+
var styles$G = {"card":"Card-module_card__TQdQq","shadow":"Card-module_shadow__NxDVz"};
|
|
601
|
+
styleInject(css_248z$G);
|
|
603
602
|
|
|
604
603
|
const Card = (props) => {
|
|
605
604
|
const { children, className, shadow = true } = props, rest = __rest(props, ["children", "className", "shadow"]);
|
|
606
605
|
const getCssClasses = () => {
|
|
607
606
|
const cssClasses = [];
|
|
608
|
-
cssClasses.push(styles$
|
|
609
|
-
shadow && cssClasses.push(styles$
|
|
607
|
+
cssClasses.push(styles$G.card);
|
|
608
|
+
shadow && cssClasses.push(styles$G.shadow);
|
|
610
609
|
className && cssClasses.push(className);
|
|
611
610
|
return cssClasses.filter(css => css).join(' ');
|
|
612
611
|
};
|
|
613
612
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
614
613
|
};
|
|
615
614
|
|
|
616
|
-
var css_248z$
|
|
617
|
-
var styles$
|
|
618
|
-
styleInject(css_248z$
|
|
615
|
+
var css_248z$F = ".CardBody-module_cardBody__X52VY {\n flex: 1 1 auto;\n min-height: 1px;\n padding: 1.25rem; }\n";
|
|
616
|
+
var styles$F = {"cardBody":"CardBody-module_cardBody__X52VY"};
|
|
617
|
+
styleInject(css_248z$F);
|
|
619
618
|
|
|
620
619
|
const CardBody = (props) => {
|
|
621
620
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
622
621
|
const getCssClasses = () => {
|
|
623
622
|
const cssClasses = [];
|
|
624
|
-
cssClasses.push(styles$
|
|
623
|
+
cssClasses.push(styles$F.cardBody);
|
|
625
624
|
className && cssClasses.push(className);
|
|
626
625
|
return cssClasses.filter(css => css).join(' ');
|
|
627
626
|
};
|
|
628
627
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
629
628
|
};
|
|
630
629
|
|
|
631
|
-
var css_248z$
|
|
632
|
-
var styles$
|
|
633
|
-
styleInject(css_248z$
|
|
630
|
+
var css_248z$E = ".CardFooter-module_cardFooter__BpOTG {\n padding: 0.75rem 1.25rem;\n background-color: rgba(0, 0, 0, 0.03);\n border-top: 1px solid rgba(0, 0, 0, 0.125); }\n .CardFooter-module_cardFooter__BpOTG:last-child {\n border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); }\n";
|
|
631
|
+
var styles$E = {"cardFooter":"CardFooter-module_cardFooter__BpOTG"};
|
|
632
|
+
styleInject(css_248z$E);
|
|
634
633
|
|
|
635
634
|
const CardFooter = (props) => {
|
|
636
635
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
637
636
|
const getCssClasses = () => {
|
|
638
637
|
const cssClasses = [];
|
|
639
|
-
cssClasses.push(styles$
|
|
638
|
+
cssClasses.push(styles$E.cardFooter);
|
|
640
639
|
className && cssClasses.push(className);
|
|
641
640
|
return cssClasses.filter(css => css).join(' ');
|
|
642
641
|
};
|
|
643
642
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
644
643
|
};
|
|
645
644
|
|
|
646
|
-
var css_248z$
|
|
647
|
-
var styles$
|
|
648
|
-
styleInject(css_248z$
|
|
645
|
+
var css_248z$D = ".CardSubtitle-module_cardSubtitle__YdoRM {\n color: #6c757d !important; }\n";
|
|
646
|
+
var styles$D = {"cardSubtitle":"CardSubtitle-module_cardSubtitle__YdoRM"};
|
|
647
|
+
styleInject(css_248z$D);
|
|
649
648
|
|
|
650
649
|
const CardSubtitle = (props) => {
|
|
651
650
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
652
651
|
const getCssClasses = () => {
|
|
653
652
|
const cssClasses = [];
|
|
654
|
-
cssClasses.push(styles$
|
|
653
|
+
cssClasses.push(styles$D.cardSubtitle);
|
|
655
654
|
className && cssClasses.push(className);
|
|
656
655
|
return cssClasses.filter(css => css).join(' ');
|
|
657
656
|
};
|
|
658
657
|
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
659
658
|
};
|
|
660
659
|
|
|
661
|
-
var css_248z$
|
|
662
|
-
var styles$
|
|
663
|
-
styleInject(css_248z$
|
|
660
|
+
var css_248z$C = ".CardText-module_cardText__UtYd9:last-child {\n margin-bottom: 0; }\n";
|
|
661
|
+
var styles$C = {"cardText":"CardText-module_cardText__UtYd9"};
|
|
662
|
+
styleInject(css_248z$C);
|
|
664
663
|
|
|
665
664
|
const CardText = (props) => {
|
|
666
665
|
const { children, className } = props, rest = __rest(props, ["children", "className"]);
|
|
667
666
|
const getCssClasses = () => {
|
|
668
667
|
const cssClasses = [];
|
|
669
|
-
cssClasses.push(styles$
|
|
668
|
+
cssClasses.push(styles$C.cardText);
|
|
670
669
|
className && cssClasses.push(className);
|
|
671
670
|
return cssClasses.filter(css => css).join(' ');
|
|
672
671
|
};
|
|
673
|
-
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest),
|
|
672
|
+
return (React.createElement("p", Object.assign({ className: getCssClasses() }, rest), children));
|
|
674
673
|
};
|
|
675
674
|
|
|
676
|
-
var css_248z$
|
|
677
|
-
var styles$
|
|
678
|
-
styleInject(css_248z$
|
|
675
|
+
var css_248z$B = ".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";
|
|
676
|
+
var styles$B = {"cardTitle":"CardTitle-module_cardTitle__aiPSE"};
|
|
677
|
+
styleInject(css_248z$B);
|
|
679
678
|
|
|
680
679
|
const CardTitle = (props) => {
|
|
681
680
|
const { children, className, as: As = 'div' } = props, rest = __rest(props, ["children", "className", "as"]);
|
|
682
681
|
const getCssClasses = () => {
|
|
683
682
|
const cssClasses = [];
|
|
684
|
-
cssClasses.push(styles$
|
|
683
|
+
cssClasses.push(styles$B.cardTitle);
|
|
685
684
|
className && cssClasses.push(className);
|
|
686
685
|
return cssClasses.filter(css => css).join(' ');
|
|
687
686
|
};
|
|
688
687
|
return (React.createElement(As, Object.assign({ className: getCssClasses() }, rest), children));
|
|
689
688
|
};
|
|
690
689
|
|
|
691
|
-
var css_248z$
|
|
692
|
-
var styles$
|
|
693
|
-
styleInject(css_248z$
|
|
690
|
+
var css_248z$A = ".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";
|
|
691
|
+
var styles$A = {"cardImage":"CardImage-module_cardImage__Z6JWW"};
|
|
692
|
+
styleInject(css_248z$A);
|
|
694
693
|
|
|
695
694
|
const CardImage = (props) => {
|
|
696
695
|
const { src, alt, className } = props, rest = __rest(props, ["src", "alt", "className"]);
|
|
697
696
|
const getCssClasses = () => {
|
|
698
697
|
const cssClasses = [];
|
|
699
|
-
cssClasses.push(styles$
|
|
698
|
+
cssClasses.push(styles$A.cardImage);
|
|
700
699
|
className && cssClasses.push(className);
|
|
701
700
|
return cssClasses.filter(css => css).join(' ');
|
|
702
701
|
};
|
|
703
702
|
return (React.createElement("img", Object.assign({ className: getCssClasses(), src: src, alt: alt }, rest)));
|
|
704
703
|
};
|
|
705
704
|
|
|
706
|
-
var css_248z$
|
|
707
|
-
var styles$
|
|
708
|
-
styleInject(css_248z$
|
|
705
|
+
var css_248z$z = ".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 .Checkbox-module_checkboxContainer__x2GCi label {\n margin-bottom: 0;\n margin-left: 0; }\n .Checkbox-module_checkboxContainer__x2GCi label: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";
|
|
706
|
+
var styles$z = {"checkboxContainer":"Checkbox-module_checkboxContainer__x2GCi","checkboxLabel":"Checkbox-module_checkboxLabel__nPY4k","disabled":"Checkbox-module_disabled__wnFIG"};
|
|
707
|
+
styleInject(css_248z$z);
|
|
709
708
|
|
|
710
709
|
const Checkbox = (props) => {
|
|
711
710
|
const { id, checked, className, label, name, value = "off", disabled, readOnly } = props, rest = __rest(props, ["id", "checked", "className", "label", "name", "value", "disabled", "readOnly"]);
|
|
@@ -742,24 +741,24 @@ const Checkbox = (props) => {
|
|
|
742
741
|
(_a = checkboxElement === null || checkboxElement === void 0 ? void 0 : checkboxElement.current) === null || _a === void 0 ? void 0 : _a.click();
|
|
743
742
|
}
|
|
744
743
|
};
|
|
745
|
-
return (React.createElement("div", { className: styles$
|
|
744
|
+
return (React.createElement("div", { className: styles$z.checkboxContainer },
|
|
746
745
|
React.createElement(IconButton, { className: getCssClasses(), onClick: handleClick, icon: getIcon(), disabled: disabled || readOnly }),
|
|
747
|
-
React.createElement("label", { onClick: handleClick, className: styles$
|
|
746
|
+
React.createElement("label", { onClick: handleClick, className: styles$z.checkboxLabel + ' ' + (disabled ? styles$z['disabled'] : undefined) }, label),
|
|
748
747
|
React.createElement("input", Object.assign({ type: "checkbox", ref: checkboxElement, id: id, name: name, checked: isChecked, disabled: disabled, readOnly: readOnly, hidden: true, value: value }, rest))));
|
|
749
748
|
};
|
|
750
749
|
|
|
751
|
-
var css_248z$
|
|
752
|
-
var styles$
|
|
753
|
-
styleInject(css_248z$
|
|
750
|
+
var css_248z$y = ".Chip-module_chip__dZ5qz {\n display: inline-flex;\n align-items: center;\n padding: 0.5rem;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n font-size: 75%;\n font-weight: 700;\n border-radius: 10rem;\n line-height: 1; }\n .Chip-module_chip__dZ5qz svg {\n width: 18px;\n height: 18px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx {\n margin-left: 5px; }\n .Chip-module_chip__dZ5qz .Chip-module_deleteIcon__--rUx:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_primary__YVDi9 {\n background: var(--primary);\n color: var(--primary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_secondary__-e4xP {\n background: var(--secondary);\n color: var(--secondary-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_accent__ZCTwu {\n background: var(--accent);\n color: var(--accent-contrast-text); }\n .Chip-module_chip__dZ5qz.Chip-module_light__vKs7O {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Chip-module_chip__dZ5qz.Chip-module_dark__G-FLQ {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover {\n cursor: pointer; }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_primary__YVDi9 {\n background: var(--primary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_secondary__-e4xP {\n background: var(--secondary-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_clickable__qAqVH:hover.Chip-module_accent__ZCTwu {\n background: var(--accent-dark); }\n .Chip-module_chip__dZ5qz.Chip-module_shadow__v11NF {\n box-shadow: var(--shadow); }\n";
|
|
751
|
+
var styles$y = {"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"};
|
|
752
|
+
styleInject(css_248z$y);
|
|
754
753
|
|
|
755
754
|
const Chip = (props) => {
|
|
756
755
|
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"]);
|
|
757
756
|
const getCssClass = () => {
|
|
758
757
|
const cssClasses = [];
|
|
759
|
-
cssClasses.push(styles$
|
|
760
|
-
cssClasses.push(styles$
|
|
761
|
-
shadow && cssClasses.push(styles$
|
|
762
|
-
onClick && cssClasses.push(styles$
|
|
758
|
+
cssClasses.push(styles$y.chip);
|
|
759
|
+
cssClasses.push(styles$y[color]);
|
|
760
|
+
shadow && cssClasses.push(styles$y['shadow']);
|
|
761
|
+
onClick && cssClasses.push(styles$y['clickable']);
|
|
763
762
|
className && cssClasses.push(className);
|
|
764
763
|
return cssClasses.filter(r => r).join(' ');
|
|
765
764
|
};
|
|
@@ -769,18 +768,18 @@ const Chip = (props) => {
|
|
|
769
768
|
};
|
|
770
769
|
return (React.createElement("div", Object.assign({ className: getCssClass() }, rest, { style: style }),
|
|
771
770
|
React.createElement("div", null, children),
|
|
772
|
-
isDeletable && (React.createElement("div", { className: styles$
|
|
771
|
+
isDeletable && (React.createElement("div", { className: styles$y.deleteIcon, onClick: e => handleClickOnDelete(e) }, deleteIcon))));
|
|
773
772
|
};
|
|
774
773
|
|
|
775
|
-
var css_248z$
|
|
776
|
-
var styles$
|
|
777
|
-
styleInject(css_248z$
|
|
774
|
+
var css_248z$x = ".FormLabel-module_formLabel__TXcHc {\n margin-bottom: .5rem; }\n";
|
|
775
|
+
var styles$x = {"formLabel":"FormLabel-module_formLabel__TXcHc"};
|
|
776
|
+
styleInject(css_248z$x);
|
|
778
777
|
|
|
779
|
-
const FormLabel = (
|
|
780
|
-
|
|
778
|
+
const FormLabel = (_a) => {
|
|
779
|
+
var { children, className, htmlFor } = _a, rest = __rest(_a, ["children", "className", "htmlFor"]);
|
|
781
780
|
const getCssClasses = () => {
|
|
782
781
|
const cssClasses = [];
|
|
783
|
-
cssClasses.push(styles$
|
|
782
|
+
cssClasses.push(styles$x.formLabel);
|
|
784
783
|
className && cssClasses.push(className);
|
|
785
784
|
return cssClasses.filter(css => css).join(' ');
|
|
786
785
|
};
|
|
@@ -793,7 +792,7 @@ const FormGroup = (props) => {
|
|
|
793
792
|
};
|
|
794
793
|
|
|
795
794
|
const FileInput = (props) => {
|
|
796
|
-
const { id,
|
|
795
|
+
const { id, className, children, name, multiple = false, accept, disabled, onChange, readOnly, value, deletable = false } = props, rest = __rest(props, ["id", "className", "children", "name", "multiple", "accept", "disabled", "onChange", "readOnly", "value", "deletable"]);
|
|
797
796
|
const inputFileElement = useRef(null);
|
|
798
797
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
799
798
|
const [model, setModel] = useState(value);
|
|
@@ -808,8 +807,7 @@ const FileInput = (props) => {
|
|
|
808
807
|
setFileList(values);
|
|
809
808
|
onChange && onChange(event);
|
|
810
809
|
};
|
|
811
|
-
const handleOnDelete = (
|
|
812
|
-
// TODO - setModel
|
|
810
|
+
const handleOnDelete = () => {
|
|
813
811
|
alert('coming soon');
|
|
814
812
|
};
|
|
815
813
|
return (React.createElement("div", { className: "d-flex align-items-start" },
|
|
@@ -818,9 +816,9 @@ const FileInput = (props) => {
|
|
|
818
816
|
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))));
|
|
819
817
|
};
|
|
820
818
|
|
|
821
|
-
var css_248z$
|
|
822
|
-
var styles$
|
|
823
|
-
styleInject(css_248z$
|
|
819
|
+
var css_248z$w = ".Select-module_selectContainer__DHFDZ {\n position: relative; }\n\n.Select-module_select__Fbn38 {\n min-height: calc(1.5em + 0.75rem + 2px);\n height: auto;\n display: flex; }\n .Select-module_select__Fbn38:hover {\n cursor: pointer; }\n\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";
|
|
820
|
+
var styles$w = {"selectContainer":"Select-module_selectContainer__DHFDZ","select":"Select-module_select__Fbn38","selectMenu":"Select-module_selectMenu__8y4kQ"};
|
|
821
|
+
styleInject(css_248z$w);
|
|
824
822
|
|
|
825
823
|
const Select = (props) => {
|
|
826
824
|
var _a, _b, _c;
|
|
@@ -833,11 +831,11 @@ const Select = (props) => {
|
|
|
833
831
|
const getCssClass = () => {
|
|
834
832
|
const cssClasses = [];
|
|
835
833
|
className && cssClasses.push(className);
|
|
836
|
-
cssClasses.push(styles$
|
|
834
|
+
cssClasses.push(styles$w.select);
|
|
837
835
|
return cssClasses.filter(r => r).join(' ');
|
|
838
836
|
};
|
|
839
837
|
useEffect(() => {
|
|
840
|
-
const newValue =
|
|
838
|
+
const newValue = value ? value : '';
|
|
841
839
|
writeValue(newValue);
|
|
842
840
|
if (newValue) {
|
|
843
841
|
const option = options.find(o => o.value === newValue);
|
|
@@ -909,7 +907,7 @@ const Select = (props) => {
|
|
|
909
907
|
let result = null;
|
|
910
908
|
if (selectedOptions.length <= multipleMaxCountItems && selectedOptions.length > 0) {
|
|
911
909
|
result = selectedOptions
|
|
912
|
-
.map(
|
|
910
|
+
.map(option => React.createElement(Chip, { key: option.value, className: "mr-2", color: COLOR.primary, isDeletable: true, onDelete: (e) => handleOnDelete(e, option) }, option.label));
|
|
913
911
|
}
|
|
914
912
|
else {
|
|
915
913
|
result = React.createElement("span", null,
|
|
@@ -951,7 +949,7 @@ const Select = (props) => {
|
|
|
951
949
|
}
|
|
952
950
|
}
|
|
953
951
|
};
|
|
954
|
-
return (React.createElement("div", { ref: selectConainter, className: styles$
|
|
952
|
+
return (React.createElement("div", { ref: selectConainter, className: styles$w.selectContainer },
|
|
955
953
|
React.createElement("div", { id: id, className: getCssClass(), onClick: () => show(), tabIndex: 0, onKeyDown: e => handleOnKeyDown(e) },
|
|
956
954
|
!multiple && renderSingleViewModel(),
|
|
957
955
|
multiple && renderMultipleViewModel(),
|
|
@@ -959,7 +957,7 @@ const Select = (props) => {
|
|
|
959
957
|
React.createElement(ChevronDownSolidIcon, null))),
|
|
960
958
|
isShow &&
|
|
961
959
|
createPortal(React.createElement(React.Fragment, null,
|
|
962
|
-
React.createElement("div", { className: styles$
|
|
960
|
+
React.createElement("div", { className: styles$w.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 } },
|
|
963
961
|
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) },
|
|
964
962
|
multiple &&
|
|
965
963
|
React.createElement(Checkbox, { checked: isActive(option), onChange: () => handleOnClick(option) }),
|
|
@@ -967,37 +965,39 @@ const Select = (props) => {
|
|
|
967
965
|
React.createElement(Backdrop, { style: { zIndex: 1111 }, isTransparent: true, onClick: () => hide() })), document.body)));
|
|
968
966
|
};
|
|
969
967
|
|
|
970
|
-
var css_248z$
|
|
971
|
-
var styles$
|
|
972
|
-
styleInject(css_248z$
|
|
968
|
+
var css_248z$v = "textarea {\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 transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n resize: vertical; }\n textarea:focus {\n outline: none !important;\n border-color: var(--primary); }\n";
|
|
969
|
+
var styles$v = {};
|
|
970
|
+
styleInject(css_248z$v);
|
|
973
971
|
|
|
974
972
|
const Textarea = (props) => {
|
|
975
973
|
const { className } = props, rest = __rest(props, ["className"]);
|
|
976
974
|
const getCssClass = () => {
|
|
977
975
|
const cssClasses = [];
|
|
978
|
-
cssClasses.push(styles$
|
|
976
|
+
cssClasses.push(styles$v.textarea);
|
|
979
977
|
className && cssClasses.push(className);
|
|
980
978
|
return cssClasses.filter(r => r).join(' ');
|
|
981
979
|
};
|
|
982
980
|
return (React.createElement("textarea", Object.assign({ className: getCssClass() }, rest)));
|
|
983
981
|
};
|
|
984
982
|
|
|
985
|
-
var css_248z$
|
|
986
|
-
var styles$
|
|
987
|
-
styleInject(css_248z$
|
|
983
|
+
var css_248z$u = ".FormInput-module_formInput__VXZip {\n display: block;\n width: 100%;\n padding: 0.375rem 0.75rem;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #212529;\n background-color: #fff;\n background-clip: padding-box;\n border: 1px solid #ced4da;\n -webkit-appearance: none;\n appearance: none;\n border-radius: 0.25rem;\n box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n .FormInput-module_formInput__VXZip:focus {\n color: #212529;\n background-color: #fff;\n border-color: #86b7fe;\n outline: 0;\n box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); }\n";
|
|
984
|
+
var styles$u = {"formInput":"FormInput-module_formInput__VXZip"};
|
|
985
|
+
styleInject(css_248z$u);
|
|
988
986
|
|
|
989
987
|
const FormInput = (props) => {
|
|
990
988
|
const { value, name, type, placeholder, className = 'form-control', isValid = true, options = [], textareaOptions, selectOptions, autoCompleteOptions, autoFocus, label, disabled = false, readonly = false, onInput, onChange, onBlur, onKeyDown } = props;
|
|
991
989
|
const getCssClasses = () => {
|
|
992
990
|
const cssClasses = [];
|
|
993
|
-
cssClasses.push(styles$
|
|
991
|
+
cssClasses.push(styles$u.formInput);
|
|
994
992
|
className && cssClasses.push(className);
|
|
995
993
|
!isValid && cssClasses.push('is-invalid');
|
|
996
994
|
return cssClasses.filter(css => css).join(' ');
|
|
997
995
|
};
|
|
996
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
998
997
|
const handleOnInput = (value, type, name) => {
|
|
999
998
|
onInput && onInput({ value, type, name });
|
|
1000
999
|
};
|
|
1000
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1001
1001
|
const handleOnChange = (value, type, name) => {
|
|
1002
1002
|
onChange && onChange({ value, type, name });
|
|
1003
1003
|
};
|
|
@@ -1017,15 +1017,15 @@ const FormInput = (props) => {
|
|
|
1017
1017
|
type === 'textarea' &&
|
|
1018
1018
|
React.createElement(Textarea, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, autoFocus: autoFocus, onInput: e => handleOnInput(e.target.value, type, name), onChange: e => handleOnChange(e.target.value, type, name), placeholder: placeholder, rows: textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.rows, style: (textareaOptions === null || textareaOptions === void 0 ? void 0 : textareaOptions.resize) !== false ? undefined : { resize: 'none' } }),
|
|
1019
1019
|
type === 'select' &&
|
|
1020
|
-
React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name),
|
|
1020
|
+
React.createElement(Select, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, multiple: selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.multiple, onChange: e => handleOnChange(e, type, name),
|
|
1021
|
+
// onKeyDown={e => onKeyDown(e)}
|
|
1022
|
+
options: options }),
|
|
1021
1023
|
type === 'autocomplete' &&
|
|
1022
|
-
React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name),
|
|
1024
|
+
React.createElement(AutoComplete, { id: name, name: name, className: className + (!isValid ? ' is-invalid' : ''), value: value, openOnFocus: autoCompleteOptions === null || autoCompleteOptions === void 0 ? void 0 : autoCompleteOptions.openOnFocus, onChange: e => handleOnChange(e, type, name), options: options }),
|
|
1023
1025
|
type === 'checkbox' &&
|
|
1024
|
-
React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''),
|
|
1025
|
-
// onChange={e => handleOnChange((e?.target as HTMLInputElement).checked, type, name as string)}
|
|
1026
|
-
checked: value === 'true' ? true : false }),
|
|
1026
|
+
React.createElement(Checkbox, { id: name, name: name, label: label, className: (!isValid ? ' is-invalid' : ''), onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).checked, type, name), checked: value === 'true' ? true : false }),
|
|
1027
1027
|
type === 'radio' &&
|
|
1028
|
-
React.createElement(Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
|
|
1028
|
+
React.createElement(React.Fragment, null, options.map((option) => React.createElement("div", { className: "form-check", key: option.id },
|
|
1029
1029
|
React.createElement("input", { id: option.id ? option.id : option.value, name: name, type: "radio", className: "form-check-input", onChange: e => handleOnChange((e === null || e === void 0 ? void 0 : e.target).value, type, name), value: option.value, checked: value === option.value, onKeyDown: onKeyDown }),
|
|
1030
1030
|
React.createElement("label", { className: "form-check-label", htmlFor: option.id }, option.label))))));
|
|
1031
1031
|
};
|
|
@@ -1046,7 +1046,7 @@ const FormError = (props) => {
|
|
|
1046
1046
|
React.createElement("div", { className: className }, errors.map(e => React.createElement("div", { key: e.validator }, e.message)))));
|
|
1047
1047
|
};
|
|
1048
1048
|
|
|
1049
|
-
const IsEmptyValidator = (value) => value === '' || value === null || value === undefined;
|
|
1049
|
+
const IsEmptyValidator = (value) => value.trim() === '' || value === null || value === undefined;
|
|
1050
1050
|
|
|
1051
1051
|
const EmailValidator = (value) => {
|
|
1052
1052
|
const isInvalidEmailFormat = value.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i) === null;
|
|
@@ -1076,7 +1076,7 @@ class Form extends Component {
|
|
|
1076
1076
|
const values = keys.reduce((obj, f) => {
|
|
1077
1077
|
const control = this.getControl(f);
|
|
1078
1078
|
// TODO - refactor
|
|
1079
|
-
const newValue = ((control.type === 'date' || control.type === 'datetime-local') && control.value && isValidDate(control.value)) ? new Date(control.value).toISOString() : control.value;
|
|
1079
|
+
const newValue = ((control.type === 'date' || control.type === 'datetime-local') && control.value && isValidDate((control.value))) ? new Date((control.value)).toISOString() : control.value;
|
|
1080
1080
|
return (Object.assign(Object.assign({}, obj), { [f]: newValue }));
|
|
1081
1081
|
}, {});
|
|
1082
1082
|
if (this.state.isValid && this.state.isSubmitted) {
|
|
@@ -1230,7 +1230,9 @@ function isValidDate(dateObject) {
|
|
|
1230
1230
|
}
|
|
1231
1231
|
|
|
1232
1232
|
class FormControl {
|
|
1233
|
-
constructor(
|
|
1233
|
+
constructor(
|
|
1234
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1235
|
+
value, validators = [], type, config) {
|
|
1234
1236
|
this.value = value;
|
|
1235
1237
|
this.validators = validators;
|
|
1236
1238
|
this.type = type;
|
|
@@ -1247,7 +1249,7 @@ const DaySelect = (props) => {
|
|
|
1247
1249
|
init();
|
|
1248
1250
|
}, [month, year]);
|
|
1249
1251
|
const init = () => {
|
|
1250
|
-
|
|
1252
|
+
const daysInMonth = new Date(year, month + 1, 0).getDate();
|
|
1251
1253
|
const newDays = [];
|
|
1252
1254
|
for (let i = 1; i <= daysInMonth; i++) {
|
|
1253
1255
|
newDays.push({ value: i.toString(), label: i.toString() });
|
|
@@ -1356,16 +1358,16 @@ const DateSelect = (props) => {
|
|
|
1356
1358
|
// return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
|
1357
1359
|
// };
|
|
1358
1360
|
|
|
1359
|
-
var css_248z$
|
|
1360
|
-
var styles$
|
|
1361
|
-
styleInject(css_248z$
|
|
1361
|
+
var css_248z$t = ".Drawer-module_drawer__kdQCk {\n height: 100%;\n z-index: 1101;\n bottom: 0;\n position: fixed;\n background: white;\n min-width: 280px;\n overflow-y: auto; }\n .Drawer-module_drawer__kdQCk.Drawer-module_permanent__c-y8y {\n position: inherit;\n z-index: 0; }\n .Drawer-module_drawer__kdQCk.Drawer-module_left__loQVO {\n order: 0; }\n .Drawer-module_drawer__kdQCk.Drawer-module_right__sJ3mZ {\n order: 2; }\n .Drawer-module_drawer__kdQCk.Drawer-module_shadow__Myo3n {\n box-shadow: var(--shadow); }\n\n.Drawer-module_drawerOpen__07ptP {\n overflow: hidden; }\n";
|
|
1362
|
+
var styles$t = {"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"};
|
|
1363
|
+
styleInject(css_248z$t);
|
|
1362
1364
|
|
|
1363
1365
|
const Drawer = (props) => {
|
|
1364
1366
|
const { children, className, position = 'left', permanent = false, target = document.body, shadow = true, onClickBackdrop } = props, rest = __rest(props, ["children", "className", "position", "permanent", "target", "shadow", "onClickBackdrop"]);
|
|
1365
1367
|
useEffect(() => {
|
|
1366
|
-
document.body.classList.add(styles$
|
|
1368
|
+
document.body.classList.add(styles$t.drawerOpen);
|
|
1367
1369
|
return () => {
|
|
1368
|
-
document.body.classList.remove(styles$
|
|
1370
|
+
document.body.classList.remove(styles$t.drawerOpen);
|
|
1369
1371
|
};
|
|
1370
1372
|
}, []);
|
|
1371
1373
|
const handleClickBackdrop = () => {
|
|
@@ -1379,10 +1381,10 @@ const DrawerContent = (props) => {
|
|
|
1379
1381
|
const { children, className, position = 'left', permanent = false, shadow } = props, rest = __rest(props, ["children", "className", "position", "permanent", "shadow"]);
|
|
1380
1382
|
const getCssClasses = () => {
|
|
1381
1383
|
const cssClasses = [];
|
|
1382
|
-
cssClasses.push(styles$
|
|
1383
|
-
shadow && cssClasses.push(styles$
|
|
1384
|
-
!!permanent && cssClasses.push(styles$
|
|
1385
|
-
position === 'left' ? cssClasses.push(styles$
|
|
1384
|
+
cssClasses.push(styles$t.drawer);
|
|
1385
|
+
shadow && cssClasses.push(styles$t.shadow);
|
|
1386
|
+
!!permanent && cssClasses.push(styles$t['permanent']);
|
|
1387
|
+
position === 'left' ? cssClasses.push(styles$t['left']) : cssClasses.push(styles$t['right']);
|
|
1386
1388
|
className && cssClasses.push(className);
|
|
1387
1389
|
return cssClasses.filter(css => css).join(' ');
|
|
1388
1390
|
};
|
|
@@ -1396,22 +1398,23 @@ const DrawerContent = (props) => {
|
|
|
1396
1398
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), style: getStyles() }, rest), children));
|
|
1397
1399
|
};
|
|
1398
1400
|
|
|
1399
|
-
var css_248z$
|
|
1400
|
-
var styles$
|
|
1401
|
-
styleInject(css_248z$
|
|
1401
|
+
var css_248z$s = ".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: 8px 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 .MenuBody-module_menuBody__u4FIQ.MenuBody-module_shadow__OBp-f {\n box-shadow: var(--shadow); }\n";
|
|
1402
|
+
var styles$s = {"menuBody":"MenuBody-module_menuBody__u4FIQ","shadow":"MenuBody-module_shadow__OBp-f"};
|
|
1403
|
+
styleInject(css_248z$s);
|
|
1402
1404
|
|
|
1403
1405
|
const MenuBody = (props) => {
|
|
1404
1406
|
const { parentRef, children, className, shadow = true, menuPosition = 'left', onClickBackdrop } = props;
|
|
1405
1407
|
const menuBodyRef = useRef(null);
|
|
1406
1408
|
useEffect(() => {
|
|
1407
|
-
if (menuBodyRef) {
|
|
1409
|
+
if (menuBodyRef && parentRef.current && menuBodyRef.current) {
|
|
1408
1410
|
createPopper(parentRef.current, menuBodyRef.current, {
|
|
1409
1411
|
placement: `${menuPosition}-start`,
|
|
1410
1412
|
modifiers: [
|
|
1411
1413
|
{
|
|
1412
1414
|
name: 'offset',
|
|
1413
1415
|
options: {
|
|
1414
|
-
|
|
1416
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1417
|
+
offset: ({ placement, popper }) => {
|
|
1415
1418
|
if (placement === 'left-start') {
|
|
1416
1419
|
return [0, -popper.width]; // y, x
|
|
1417
1420
|
}
|
|
@@ -1428,8 +1431,8 @@ const MenuBody = (props) => {
|
|
|
1428
1431
|
}, [menuBodyRef]);
|
|
1429
1432
|
const getCssClasses = () => {
|
|
1430
1433
|
const cssClasses = [];
|
|
1431
|
-
cssClasses.push(styles$
|
|
1432
|
-
shadow && cssClasses.push(styles$
|
|
1434
|
+
cssClasses.push(styles$s.menuBody);
|
|
1435
|
+
shadow && cssClasses.push(styles$s.shadow);
|
|
1433
1436
|
className && cssClasses.push(className);
|
|
1434
1437
|
return cssClasses.filter(css => css).join(' ');
|
|
1435
1438
|
};
|
|
@@ -1441,17 +1444,17 @@ const MenuBody = (props) => {
|
|
|
1441
1444
|
React.createElement(Backdrop, { isTransparent: true, onClick: handleClickBackdrop })), document.body));
|
|
1442
1445
|
};
|
|
1443
1446
|
|
|
1444
|
-
var css_248z$
|
|
1445
|
-
var styles$
|
|
1446
|
-
styleInject(css_248z$
|
|
1447
|
+
var css_248z$r = ".Menu-module_menu__p8QL- {\n display: flex; }\n";
|
|
1448
|
+
var styles$r = {"menu":"Menu-module_menu__p8QL-"};
|
|
1449
|
+
styleInject(css_248z$r);
|
|
1447
1450
|
|
|
1448
1451
|
const Menu = (props) => {
|
|
1449
|
-
const { toggle, children, className, open, menuPosition, onClickBackdrop
|
|
1452
|
+
const { toggle, children, className, open, menuPosition, onClickBackdrop } = props, rest = __rest(props, ["toggle", "children", "className", "open", "menuPosition", "onClickBackdrop"]);
|
|
1450
1453
|
const menuContainer = useRef(null);
|
|
1451
1454
|
const toggleContainerRef = useRef(null);
|
|
1452
1455
|
const getCssClasses = () => {
|
|
1453
1456
|
const cssClasses = [];
|
|
1454
|
-
cssClasses.push(styles$
|
|
1457
|
+
cssClasses.push(styles$r.menu);
|
|
1455
1458
|
className && cssClasses.push(className);
|
|
1456
1459
|
return cssClasses.filter(css => css).join(' ');
|
|
1457
1460
|
};
|
|
@@ -1464,17 +1467,17 @@ const Menu = (props) => {
|
|
|
1464
1467
|
React.createElement(MenuBody, { parentRef: toggleContainerRef, menuPosition: menuPosition, onClickBackdrop: handleClickBackdrop }, children)));
|
|
1465
1468
|
};
|
|
1466
1469
|
|
|
1467
|
-
var css_248z$
|
|
1468
|
-
var styles$
|
|
1469
|
-
styleInject(css_248z$
|
|
1470
|
+
var css_248z$q = ".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 .MenuItem-module_menuItem__MeBxN.MenuItem-module_menuItemHeader__2l732 {\n margin-bottom: 0;\n font-size: 0.875rem; }\n .MenuItem-module_menuItem__MeBxN:hover {\n cursor: pointer;\n color: #1e2125;\n background-color: rgba(0, 0, 0, 0.04); }\n";
|
|
1471
|
+
var styles$q = {"menuItem":"MenuItem-module_menuItem__MeBxN","menuItemHeader":"MenuItem-module_menuItemHeader__2l732"};
|
|
1472
|
+
styleInject(css_248z$q);
|
|
1470
1473
|
|
|
1471
1474
|
const MenuItem = (props) => {
|
|
1472
1475
|
const { children, onClick, type = 'item' } = props;
|
|
1473
1476
|
const getCssClasses = () => {
|
|
1474
1477
|
const cssClasses = [];
|
|
1475
|
-
cssClasses.push(styles$
|
|
1478
|
+
cssClasses.push(styles$q.menuItem);
|
|
1476
1479
|
if (type === 'header') {
|
|
1477
|
-
cssClasses.push(styles$
|
|
1480
|
+
cssClasses.push(styles$q.menuItemHeader);
|
|
1478
1481
|
}
|
|
1479
1482
|
return cssClasses.filter(css => css).join(' ');
|
|
1480
1483
|
};
|
|
@@ -1482,9 +1485,7 @@ const MenuItem = (props) => {
|
|
|
1482
1485
|
e.stopPropagation();
|
|
1483
1486
|
onClick && onClick(e);
|
|
1484
1487
|
};
|
|
1485
|
-
return (React.createElement(ConditionalWrapper, { condition: true, wrapper: children => ((type === 'item' ? (
|
|
1486
|
-
// eslint-disable-next-line jsx-a11y/anchor-is-valid
|
|
1487
|
-
React.createElement("a", { className: getCssClasses(), onClick: handleClick }, children)) :
|
|
1488
|
+
return (React.createElement(ConditionalWrapper, { condition: true, wrapper: children => ((type === 'item' ? (React.createElement("a", { className: getCssClasses(), onClick: handleClick }, children)) :
|
|
1488
1489
|
React.createElement("div", { className: getCssClasses(), onClick: handleClick }, children))) }, children));
|
|
1489
1490
|
};
|
|
1490
1491
|
|
|
@@ -1492,23 +1493,23 @@ const MenuToggle = ({ children }) => {
|
|
|
1492
1493
|
return (React.createElement(Fragment, null, children));
|
|
1493
1494
|
};
|
|
1494
1495
|
|
|
1495
|
-
var css_248z$
|
|
1496
|
-
var styles$
|
|
1497
|
-
styleInject(css_248z$
|
|
1496
|
+
var css_248z$p = ".MenuDivider-module_menuItemDivider__oRP-j {\n height: 0;\n margin: 0.5rem 0;\n overflow: hidden;\n border-top: 1px solid #e9ecef; }\n";
|
|
1497
|
+
var styles$p = {"menuItemDivider":"MenuDivider-module_menuItemDivider__oRP-j"};
|
|
1498
|
+
styleInject(css_248z$p);
|
|
1498
1499
|
|
|
1499
|
-
const MenuDivider = () => React.createElement("div", { className: styles$
|
|
1500
|
+
const MenuDivider = () => React.createElement("div", { className: styles$p.menuItemDivider });
|
|
1500
1501
|
|
|
1501
|
-
var css_248z$
|
|
1502
|
-
var styles$
|
|
1503
|
-
styleInject(css_248z$
|
|
1502
|
+
var css_248z$o = ".ExpansionPanelContent-module_expansionPanelContent__aXNfH {\n padding: 8px 16px 16px; }\n";
|
|
1503
|
+
var styles$o = {"expansionPanelContent":"ExpansionPanelContent-module_expansionPanelContent__aXNfH"};
|
|
1504
|
+
styleInject(css_248z$o);
|
|
1504
1505
|
|
|
1505
1506
|
const ExpansionPanelContent = ({ children }) => {
|
|
1506
|
-
return (React.createElement("div", { className: styles$
|
|
1507
|
+
return (React.createElement("div", { className: styles$o.expansionPanelContent }, children));
|
|
1507
1508
|
};
|
|
1508
1509
|
|
|
1509
|
-
var css_248z$
|
|
1510
|
-
var styles$
|
|
1511
|
-
styleInject(css_248z$
|
|
1510
|
+
var css_248z$n = ".ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n min-height: 48px; }\n .ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq:hover {\n cursor: pointer;\n background-color: var(--highlight); }\n";
|
|
1511
|
+
var styles$n = {"expansionPanelHeader":"ExpansionPanelHeader-module_expansionPanelHeader__Wy6Pq"};
|
|
1512
|
+
styleInject(css_248z$n);
|
|
1512
1513
|
|
|
1513
1514
|
const ExpansionPanelHeader = (props) => {
|
|
1514
1515
|
const { children, isExpanded, onClick } = props;
|
|
@@ -1516,15 +1517,15 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1516
1517
|
e.stopPropagation();
|
|
1517
1518
|
onClick && onClick(e);
|
|
1518
1519
|
};
|
|
1519
|
-
return (React.createElement("div", { className: styles$
|
|
1520
|
+
return (React.createElement("div", { className: styles$n.expansionPanelHeader, onClick: handleClick },
|
|
1520
1521
|
children,
|
|
1521
1522
|
React.createElement("span", { className: "ml-auto text-muted" },
|
|
1522
1523
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1523
1524
|
};
|
|
1524
1525
|
|
|
1525
|
-
var css_248z$
|
|
1526
|
-
var styles$
|
|
1527
|
-
styleInject(css_248z$
|
|
1526
|
+
var css_248z$m = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);\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 .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph {\n margin: 16px 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0; }\n";
|
|
1527
|
+
var styles$m = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1528
|
+
styleInject(css_248z$m);
|
|
1528
1529
|
|
|
1529
1530
|
const ExpansionPanel = (props) => {
|
|
1530
1531
|
const { header, children, isExpanded = false, onChange } = props;
|
|
@@ -1534,9 +1535,9 @@ const ExpansionPanel = (props) => {
|
|
|
1534
1535
|
}, [isExpanded]);
|
|
1535
1536
|
const getCssClasses = () => {
|
|
1536
1537
|
const cssClasses = [];
|
|
1537
|
-
cssClasses.push(styles$
|
|
1538
|
+
cssClasses.push(styles$m.expansionPanel);
|
|
1538
1539
|
if (_isExpanded) {
|
|
1539
|
-
cssClasses.push(styles$
|
|
1540
|
+
cssClasses.push(styles$m.isExpanded);
|
|
1540
1541
|
}
|
|
1541
1542
|
return cssClasses.filter(css => css).join(' ');
|
|
1542
1543
|
};
|
|
@@ -1550,16 +1551,16 @@ const ExpansionPanel = (props) => {
|
|
|
1550
1551
|
React.createElement(ExpansionPanelContent, null, children)));
|
|
1551
1552
|
};
|
|
1552
1553
|
|
|
1553
|
-
var css_248z$
|
|
1554
|
-
var styles$
|
|
1555
|
-
styleInject(css_248z$
|
|
1554
|
+
var css_248z$l = ".FloatingActionButton-module_fab__Rw3kd {\n box-shadow: var(--shadow); }\n .FloatingActionButton-module_fab__Rw3kd.FloatingActionButton-module_fixed__XQOkG {\n position: fixed;\n bottom: 16px;\n right: 16px;\n z-index: 1000; }\n";
|
|
1555
|
+
var styles$l = {"fab":"FloatingActionButton-module_fab__Rw3kd","fixed":"FloatingActionButton-module_fixed__XQOkG"};
|
|
1556
|
+
styleInject(css_248z$l);
|
|
1556
1557
|
|
|
1557
1558
|
const FloatingActionButton = (props) => {
|
|
1558
1559
|
const { className, icon, color = COLOR.primary, fixed, size = SIZE.lg, isActive, disabled, onClick } = props;
|
|
1559
1560
|
const getCssClasses = () => {
|
|
1560
1561
|
const cssClasses = [];
|
|
1561
|
-
cssClasses.push(styles$
|
|
1562
|
-
fixed && cssClasses.push(styles$
|
|
1562
|
+
cssClasses.push(styles$l.fab);
|
|
1563
|
+
fixed && cssClasses.push(styles$l['fixed']);
|
|
1563
1564
|
className && cssClasses.push(className);
|
|
1564
1565
|
return cssClasses.filter(css => css).join(' ');
|
|
1565
1566
|
};
|
|
@@ -1602,11 +1603,16 @@ const Row = (props) => {
|
|
|
1602
1603
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest), children));
|
|
1603
1604
|
};
|
|
1604
1605
|
|
|
1606
|
+
var css_248z$k = ".Link-module_link__YlJQl {\n color: var(--primary);\n text-decoration: underline; }\n .Link-module_link__YlJQl:hover {\n color: var(--primary-dark); }\n";
|
|
1607
|
+
var styles$k = {"link":"Link-module_link__YlJQl"};
|
|
1608
|
+
styleInject(css_248z$k);
|
|
1609
|
+
|
|
1605
1610
|
const Link = (props) => {
|
|
1606
1611
|
const { href = '#', className, target, children } = props, rest = __rest(props, ["href", "className", "target", "children"]);
|
|
1607
1612
|
const [status, setStatus] = useState(STATUS.NORMAL);
|
|
1608
1613
|
const getCssClasses = () => {
|
|
1609
1614
|
const cssClasses = [];
|
|
1615
|
+
cssClasses.push(styles$k.link);
|
|
1610
1616
|
className && cssClasses.push(className);
|
|
1611
1617
|
status !== STATUS.NORMAL && cssClasses.push(status);
|
|
1612
1618
|
return cssClasses.filter(css => css).join(' ');
|
|
@@ -1620,15 +1626,15 @@ const Link = (props) => {
|
|
|
1620
1626
|
return (React.createElement("a", Object.assign({ className: getCssClasses(), href: href, target: target, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest), children));
|
|
1621
1627
|
};
|
|
1622
1628
|
|
|
1623
|
-
var css_248z$
|
|
1624
|
-
var styles$
|
|
1625
|
-
styleInject(css_248z$
|
|
1629
|
+
var css_248z$j = ".LoadingIndicator-module_loadingIndicatorContainer__GS9OG {\n position: fixed;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%; }\n\n.LoadingIndicator-module_loadingIndicator__EC9sx {\n animation-name: LoadingIndicator-module_spinAnimation__LeY4Z;\n animation-duration: 5000ms;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n width: 24px;\n height: 24px; }\n\n@keyframes LoadingIndicator-module_spinAnimation__LeY4Z {\n from {\n transform: rotate(0deg); }\n to {\n transform: rotate(360deg); } }\n";
|
|
1630
|
+
var styles$j = {"loadingIndicatorContainer":"LoadingIndicator-module_loadingIndicatorContainer__GS9OG","loadingIndicator":"LoadingIndicator-module_loadingIndicator__EC9sx","spinAnimation":"LoadingIndicator-module_spinAnimation__LeY4Z"};
|
|
1631
|
+
styleInject(css_248z$j);
|
|
1626
1632
|
|
|
1627
1633
|
const LoadingIndicator = (_a) => {
|
|
1628
1634
|
var rest = __rest(_a, []);
|
|
1629
1635
|
const getCssClasses = () => {
|
|
1630
1636
|
const cssClasses = [];
|
|
1631
|
-
cssClasses.push(styles$
|
|
1637
|
+
cssClasses.push(styles$j.loadingIndicator);
|
|
1632
1638
|
return cssClasses.filter(css => css).join(' ');
|
|
1633
1639
|
};
|
|
1634
1640
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
@@ -1638,7 +1644,7 @@ const LoadingIndicator = (_a) => {
|
|
|
1638
1644
|
const LoadingIndicatorContainer = ({ children }) => {
|
|
1639
1645
|
const getCssClasses = () => {
|
|
1640
1646
|
const cssClasses = [];
|
|
1641
|
-
cssClasses.push(styles$
|
|
1647
|
+
cssClasses.push(styles$j.loadingIndicatorContainer);
|
|
1642
1648
|
return cssClasses.filter(css => css).join(' ');
|
|
1643
1649
|
};
|
|
1644
1650
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
@@ -1646,38 +1652,36 @@ const LoadingIndicatorContainer = ({ children }) => {
|
|
|
1646
1652
|
|
|
1647
1653
|
class LoadingIndicatorService {
|
|
1648
1654
|
show() {
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
React.createElement(LoadingIndicator, null)), this.container);
|
|
1658
|
-
});
|
|
1655
|
+
if (this.container) {
|
|
1656
|
+
this.hide();
|
|
1657
|
+
}
|
|
1658
|
+
this.container = document.createElement('div');
|
|
1659
|
+
this.container.classList.add('snackbar-container');
|
|
1660
|
+
document.body.appendChild(this.container);
|
|
1661
|
+
render(React.createElement(LoadingIndicatorContainer, null,
|
|
1662
|
+
React.createElement(LoadingIndicator, null)), this.container);
|
|
1659
1663
|
}
|
|
1660
1664
|
hide() {
|
|
1661
1665
|
if (this.container) {
|
|
1662
1666
|
unmountComponentAtNode(this.container);
|
|
1663
1667
|
document.body.removeChild(this.container);
|
|
1664
|
-
this.container =
|
|
1665
|
-
clearTimeout(this.handler);
|
|
1668
|
+
this.container = undefined;
|
|
1669
|
+
this.handler && clearTimeout(this.handler);
|
|
1666
1670
|
}
|
|
1667
1671
|
}
|
|
1668
1672
|
}
|
|
1669
1673
|
const loadingIndicatorService = new LoadingIndicatorService();
|
|
1670
1674
|
|
|
1671
|
-
var css_248z$
|
|
1672
|
-
var styles$
|
|
1673
|
-
styleInject(css_248z$
|
|
1675
|
+
var css_248z$i = ".ModalHeader-module_modalHeader__tw-u- {\n border-bottom: none;\n align-items: center; }\n";
|
|
1676
|
+
var styles$i = {"modalHeader":"ModalHeader-module_modalHeader__tw-u-"};
|
|
1677
|
+
styleInject(css_248z$i);
|
|
1674
1678
|
|
|
1675
1679
|
const ModalHeader = (props) => {
|
|
1676
|
-
const { children, isDismissable = false, onClose } = props;
|
|
1680
|
+
const { children, isDismissable = false, onClose } = props, rest = __rest(props, ["children", "isDismissable", "onClose"]);
|
|
1677
1681
|
const handleClick = () => {
|
|
1678
1682
|
onClose && onClose();
|
|
1679
1683
|
};
|
|
1680
|
-
return (React.createElement("div", { className: "modal-header " + styles$
|
|
1684
|
+
return (React.createElement("div", Object.assign({ className: "modal-header " + styles$i.modalHeader }, rest),
|
|
1681
1685
|
React.createElement("h5", { className: "modal-title" }, children),
|
|
1682
1686
|
isDismissable &&
|
|
1683
1687
|
React.createElement(IconButton, { icon: React.createElement(TimesSolidIcon, null), variant: VARIANT.text, onClick: handleClick })));
|
|
@@ -1685,24 +1689,24 @@ const ModalHeader = (props) => {
|
|
|
1685
1689
|
|
|
1686
1690
|
const ModalBody = ({ children }) => (React.createElement("div", { className: "modal-body" }, children));
|
|
1687
1691
|
|
|
1688
|
-
var css_248z$
|
|
1689
|
-
var styles$
|
|
1690
|
-
styleInject(css_248z$
|
|
1692
|
+
var css_248z$h = ".Modal-module_modal__HMxWV {\n z-index: 1111 !important;\n border-radius: var(--borderRadius); }\n .Modal-module_modal__HMxWV.Modal-module_fullscreen__iepGa {\n width: 100% !important;\n height: 100% !important;\n max-height: 100% !important;\n margin: 0;\n padding: 0; }\n .Modal-module_modal__HMxWV.Modal-module_fullscreen__iepGa .Modal-module_modalContent__9wAwB {\n height: auto;\n min-height: 100%;\n max-height: 100%;\n border-radius: 0;\n overflow: auto; }\n @media (min-width: 320px) {\n .Modal-module_modal__HMxWV.Modal-module_fullscreen__iepGa {\n max-width: 100% !important; } }\n .Modal-module_modal__HMxWV .Modal-module_sm__CsR6U {\n max-width: 300px; }\n .Modal-module_modal__HMxWV .Modal-module_md__lNggx {\n max-width: 500px; }\n .Modal-module_modal__HMxWV .Modal-module_lg__6dtT2 {\n max-width: 1140px; }\n @media (min-width: 576px) {\n .Modal-module_modal__HMxWV .Modal-module_modal-dialog__U2wGf {\n max-width: 600px; } }\n";
|
|
1693
|
+
var styles$h = {"modal":"Modal-module_modal__HMxWV","fullscreen":"Modal-module_fullscreen__iepGa","modalContent":"Modal-module_modalContent__9wAwB","sm":"Modal-module_sm__CsR6U","md":"Modal-module_md__lNggx","lg":"Modal-module_lg__6dtT2","modal-dialog":"Modal-module_modal-dialog__U2wGf"};
|
|
1694
|
+
styleInject(css_248z$h);
|
|
1691
1695
|
|
|
1692
|
-
var css_248z$
|
|
1693
|
-
var styles$
|
|
1694
|
-
styleInject(css_248z$
|
|
1696
|
+
var css_248z$g = ".ModalFooter-module_modalFooter__SNm-f {\n border-top: none; }\n";
|
|
1697
|
+
var styles$g = {"modalFooter":"ModalFooter-module_modalFooter__SNm-f"};
|
|
1698
|
+
styleInject(css_248z$g);
|
|
1695
1699
|
|
|
1696
|
-
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$
|
|
1700
|
+
const ModalFooter = ({ children }) => (React.createElement("div", { className: "modal-footer " + styles$g.modalFooter }, children));
|
|
1697
1701
|
|
|
1698
1702
|
const Modal = (props) => {
|
|
1699
1703
|
const { className, size, fullScreen, children, header, footer, onHeaderCloseClick, onBackdropClick, isDismissable = false } = props;
|
|
1700
1704
|
const getCssClass = () => {
|
|
1701
1705
|
const cssClasses = [];
|
|
1702
1706
|
cssClasses.push('modal-dialog modal-dialog-centered');
|
|
1703
|
-
cssClasses.push(styles$
|
|
1704
|
-
!!fullScreen && cssClasses.push(styles$
|
|
1705
|
-
size && cssClasses.push(styles$
|
|
1707
|
+
cssClasses.push(styles$h.modal);
|
|
1708
|
+
!!fullScreen && cssClasses.push(styles$h['fullscreen']);
|
|
1709
|
+
size && cssClasses.push(styles$h[size]);
|
|
1706
1710
|
className && cssClasses.push(className);
|
|
1707
1711
|
return cssClasses.filter(r => r).join(' ');
|
|
1708
1712
|
};
|
|
@@ -1716,9 +1720,9 @@ const Modal = (props) => {
|
|
|
1716
1720
|
onBackdropClick && onBackdropClick();
|
|
1717
1721
|
};
|
|
1718
1722
|
return (React.createElement(Fragment, null,
|
|
1719
|
-
React.createElement("div", { className: "modal show " + styles$
|
|
1723
|
+
React.createElement("div", { className: "modal show " + styles$h.modal, style: { display: 'block' } },
|
|
1720
1724
|
React.createElement("div", { className: getCssClass() },
|
|
1721
|
-
React.createElement("div", { className: 'modal-content ' + (
|
|
1725
|
+
React.createElement("div", { className: 'modal-content ' + (fullScreen ? styles$h['modalContent'] : undefined) },
|
|
1722
1726
|
header &&
|
|
1723
1727
|
React.createElement(ModalHeader, { isDismissable: isDismissable, onClose: () => onHeaderCloseClick && onHeaderCloseClick() }, header),
|
|
1724
1728
|
React.createElement(ModalBody, null, children),
|
|
@@ -1921,25 +1925,25 @@ const Sidebar = (props) => {
|
|
|
1921
1925
|
!item.isCollapsed && item.items && item.items.length > 0 && (React.createElement(List, { className: "list-level-1", key: `${item.id}-sub` }, item.items.map(subItem => (React.createElement(ListItem, { className: "list-item-level-1", active: isMenuItemActive(subItem.path), key: subItem.id, onClick: (e) => handleClickSubItem(item.path, subItem.path, e) }, subItem.label)))))))))));
|
|
1922
1926
|
};
|
|
1923
1927
|
|
|
1924
|
-
var css_248z$
|
|
1925
|
-
var styles$
|
|
1926
|
-
styleInject(css_248z$
|
|
1928
|
+
var css_248z$f = ".Snackbar-module_snackbar__O5T2b {\n display: flex;\n align-items: center;\n min-width: 288px;\n padding: 6px 16px;\n transform-origin: center;\n min-height: 52px;\n animation: Snackbar-module_bounceIn__E47iD 0.4s ease;\n z-index: 1001;\n position: fixed;\n left: 50%;\n transform: translateX(-50%);\n bottom: 2%;\n border-radius: var(--borderRadius); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_primary__ZBOTN {\n color: var(--primary-contrast-text);\n background-color: var(--primary); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_accent__0MnFy {\n color: var(--accent-contrast-text);\n background-color: var(--accent); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_secondary__s8-ez {\n color: var(--secondary-contrast-text);\n background-color: var(--secondary); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_light__Vrd7o {\n color: var(--light-contrast-text);\n background-color: var(--light); }\n .Snackbar-module_snackbar__O5T2b.Snackbar-module_dark__U-5io {\n color: var(--dark-contrast-text);\n background-color: var(--dark); }\n\n.Snackbar-module_text__G5r5D {\n width: 100%;\n padding: 8px 0; }\n\n.Snackbar-module_action__vus2Y {\n margin-left: auto; }\n .Snackbar-module_action__vus2Y:hover {\n cursor: pointer; }\n\n@keyframes Snackbar-module_bounceIn__E47iD {\n 0% {\n opacity: 0; }\n 50% {\n opacity: 0.9; }\n 80% {\n opacity: 1; }\n 100% {\n opacity: 1; } }\n";
|
|
1929
|
+
var styles$f = {"snackbar":"Snackbar-module_snackbar__O5T2b","bounceIn":"Snackbar-module_bounceIn__E47iD","primary":"Snackbar-module_primary__ZBOTN","accent":"Snackbar-module_accent__0MnFy","secondary":"Snackbar-module_secondary__s8-ez","light":"Snackbar-module_light__Vrd7o","dark":"Snackbar-module_dark__U-5io","text":"Snackbar-module_text__G5r5D","action":"Snackbar-module_action__vus2Y"};
|
|
1930
|
+
styleInject(css_248z$f);
|
|
1927
1931
|
|
|
1928
1932
|
const Snackbar = (props) => {
|
|
1929
1933
|
const { children, color = COLOR.dark, actionText = 'ok', onOk } = props, rest = __rest(props, ["children", "color", "actionText", "onOk"]);
|
|
1930
1934
|
const getCssClasses = () => {
|
|
1931
1935
|
const cssClasses = [];
|
|
1932
|
-
cssClasses.push(styles$
|
|
1936
|
+
cssClasses.push(styles$f.snackbar);
|
|
1933
1937
|
cssClasses.push(`shadow-lg`);
|
|
1934
|
-
cssClasses.push(styles$
|
|
1938
|
+
cssClasses.push(styles$f[color]);
|
|
1935
1939
|
return cssClasses.filter(css => css).join(' ');
|
|
1936
1940
|
};
|
|
1937
1941
|
const handleClickAction = (e) => {
|
|
1938
1942
|
onOk && onOk(e);
|
|
1939
1943
|
};
|
|
1940
1944
|
return (React.createElement("div", Object.assign({ className: getCssClasses() }, rest),
|
|
1941
|
-
React.createElement("div", { className: styles$
|
|
1942
|
-
React.createElement("div", { className: styles$
|
|
1945
|
+
React.createElement("div", { className: styles$f.text }, children),
|
|
1946
|
+
React.createElement("div", { className: styles$f.action + " text-accent", onClick: handleClickAction },
|
|
1943
1947
|
React.createElement("span", null, actionText))));
|
|
1944
1948
|
};
|
|
1945
1949
|
|
|
@@ -1947,7 +1951,7 @@ class SnackbarService {
|
|
|
1947
1951
|
show(message, options) {
|
|
1948
1952
|
const defaultOptions = { timeout: 3000, actionText: 'ok', color: COLOR.dark, target: document.body };
|
|
1949
1953
|
const mergedOptions = Object.assign(defaultOptions, options);
|
|
1950
|
-
return new Promise((resolve
|
|
1954
|
+
return new Promise((resolve) => {
|
|
1951
1955
|
if (this.container) {
|
|
1952
1956
|
this.hide();
|
|
1953
1957
|
}
|
|
@@ -1970,36 +1974,36 @@ class SnackbarService {
|
|
|
1970
1974
|
if (this.container) {
|
|
1971
1975
|
unmountComponentAtNode(this.container);
|
|
1972
1976
|
document.body.removeChild(this.container);
|
|
1973
|
-
this.container =
|
|
1974
|
-
clearTimeout(this.handler);
|
|
1977
|
+
this.container = undefined;
|
|
1978
|
+
this.handler && clearTimeout(this.handler);
|
|
1975
1979
|
}
|
|
1976
1980
|
}
|
|
1977
1981
|
}
|
|
1978
1982
|
const snackbarService = new SnackbarService();
|
|
1979
1983
|
|
|
1980
|
-
var css_248z$
|
|
1981
|
-
var styles$
|
|
1982
|
-
styleInject(css_248z$
|
|
1984
|
+
var css_248z$e = ".SpeedDialActions-module_speedDialActions__cY2i3 {\n margin-bottom: -32px;\n flex-direction: column-reverse;\n padding-bottom: 48px;\n display: flex;\n pointer-events: auto; }\n";
|
|
1985
|
+
var styles$e = {"speedDialActions":"SpeedDialActions-module_speedDialActions__cY2i3"};
|
|
1986
|
+
styleInject(css_248z$e);
|
|
1983
1987
|
|
|
1984
1988
|
const SpeedDialActions = (props) => {
|
|
1985
1989
|
const { children } = props;
|
|
1986
1990
|
const getCssClasses = () => {
|
|
1987
1991
|
const cssClasses = [];
|
|
1988
|
-
cssClasses.push(styles$
|
|
1992
|
+
cssClasses.push(styles$e.speedDialActions);
|
|
1989
1993
|
return cssClasses.filter(css => css).join(' ');
|
|
1990
1994
|
};
|
|
1991
1995
|
return (React.createElement("div", { className: getCssClasses() }, children));
|
|
1992
1996
|
};
|
|
1993
1997
|
|
|
1994
|
-
var css_248z$
|
|
1995
|
-
var styles$
|
|
1996
|
-
styleInject(css_248z$
|
|
1998
|
+
var css_248z$d = ".SpeedDial-module_speedDial__W3VN2 {\n position: absolute;\n flex-direction: column-reverse;\n display: flex;\n z-index: 1050;\n align-items: center;\n right: 16px;\n bottom: 16px;\n transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n";
|
|
1999
|
+
var styles$d = {"speedDial":"SpeedDial-module_speedDial__W3VN2"};
|
|
2000
|
+
styleInject(css_248z$d);
|
|
1997
2001
|
|
|
1998
2002
|
const SpeedDial = (props) => {
|
|
1999
2003
|
const { children, className, open, onOpen, onClose } = props, rest = __rest(props, ["children", "className", "open", "onOpen", "onClose"]);
|
|
2000
2004
|
const getCssClasses = () => {
|
|
2001
2005
|
const cssClasses = [];
|
|
2002
|
-
cssClasses.push(styles$
|
|
2006
|
+
cssClasses.push(styles$d.speedDial);
|
|
2003
2007
|
className && cssClasses.push(className);
|
|
2004
2008
|
return cssClasses.filter(css => css).join(' ');
|
|
2005
2009
|
};
|
|
@@ -2016,15 +2020,15 @@ const SpeedDial = (props) => {
|
|
|
2016
2020
|
React.createElement(SpeedDialActions, null, children)));
|
|
2017
2021
|
};
|
|
2018
2022
|
|
|
2019
|
-
var css_248z$
|
|
2020
|
-
var styles$
|
|
2021
|
-
styleInject(css_248z$
|
|
2023
|
+
var css_248z$c = ".SpeedDialAction-module_speedDialAction__kJLpz + .SpeedDialAction-module_speedDialAction__kJLpz {\n margin-bottom: 10px; }\n";
|
|
2024
|
+
var styles$c = {"speedDialAction":"SpeedDialAction-module_speedDialAction__kJLpz"};
|
|
2025
|
+
styleInject(css_248z$c);
|
|
2022
2026
|
|
|
2023
2027
|
const SpeedDialAction = (props) => {
|
|
2024
2028
|
const { icon, color = COLOR.light, onClick, className } = props;
|
|
2025
2029
|
const getCssClasses = () => {
|
|
2026
2030
|
const cssClasses = [];
|
|
2027
|
-
cssClasses.push(styles$
|
|
2031
|
+
cssClasses.push(styles$c.speedDialAction);
|
|
2028
2032
|
className && cssClasses.push(className);
|
|
2029
2033
|
return cssClasses.filter(css => css).join(' ');
|
|
2030
2034
|
};
|
|
@@ -2041,15 +2045,15 @@ const SpeedDialIcon = (props) => {
|
|
|
2041
2045
|
return (React.createElement(Icon, Object.assign({ className: getCssClasses() }, rest), children));
|
|
2042
2046
|
};
|
|
2043
2047
|
|
|
2044
|
-
var css_248z$
|
|
2045
|
-
var styles$
|
|
2046
|
-
styleInject(css_248z$
|
|
2048
|
+
var css_248z$b = ".StepperActions-module_stepperActions__hBUkh {\n display: flex; }\n";
|
|
2049
|
+
var styles$b = {"stepperActions":"StepperActions-module_stepperActions__hBUkh"};
|
|
2050
|
+
styleInject(css_248z$b);
|
|
2047
2051
|
|
|
2048
2052
|
const StepperActions = (props) => {
|
|
2049
2053
|
const { className, isCompleted, isFirstStep, isStepOptional, onBack, onSkip, onNext, onReset } = props;
|
|
2050
2054
|
const getCssClasses = () => {
|
|
2051
2055
|
const cssClasses = [];
|
|
2052
|
-
cssClasses.push(styles$
|
|
2056
|
+
cssClasses.push(styles$b.stepperActions);
|
|
2053
2057
|
className && cssClasses.push(className);
|
|
2054
2058
|
return cssClasses.filter(css => css).join(' ');
|
|
2055
2059
|
};
|
|
@@ -2066,31 +2070,31 @@ const StepPanel = (props) => {
|
|
|
2066
2070
|
return (React.createElement("div", { className: "steppanel" }, children));
|
|
2067
2071
|
};
|
|
2068
2072
|
|
|
2069
|
-
var css_248z$
|
|
2070
|
-
var styles$
|
|
2071
|
-
styleInject(css_248z$
|
|
2073
|
+
var css_248z$a = ".StepConnector-module_stepConnector__A7A-7 {\n flex: 1 1 auto;\n flex-shrink: 0;\n min-width: 20px; }\n\n.StepConnector-module_stepConnectorLine__8rQxv {\n display: block;\n border-color: var(--secondary);\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n .StepConnector-module_stepConnectorLine__8rQxv.StepConnector-module_isActive__TUIKV {\n border-color: var(--primary); }\n\n.StepConnector-module_stepConnectorLineHorizontal__i09K0 {\n border-top-style: solid;\n border-top-width: 1px; }\n";
|
|
2074
|
+
var styles$a = {"stepConnector":"StepConnector-module_stepConnector__A7A-7","stepConnectorLine":"StepConnector-module_stepConnectorLine__8rQxv","isActive":"StepConnector-module_isActive__TUIKV","stepConnectorLineHorizontal":"StepConnector-module_stepConnectorLineHorizontal__i09K0"};
|
|
2075
|
+
styleInject(css_248z$a);
|
|
2072
2076
|
|
|
2073
2077
|
const StepConnector = (props) => {
|
|
2074
2078
|
const { isActive, isHorizontal = true } = props;
|
|
2075
2079
|
const getCssClassesConnector = () => {
|
|
2076
2080
|
const cssClasses = [];
|
|
2077
|
-
cssClasses.push(styles$
|
|
2081
|
+
cssClasses.push(styles$a.stepConnector);
|
|
2078
2082
|
return cssClasses.filter(css => css).join(' ');
|
|
2079
2083
|
};
|
|
2080
2084
|
const getCssClassesLine = () => {
|
|
2081
2085
|
const cssClasses = [];
|
|
2082
|
-
cssClasses.push(styles$
|
|
2083
|
-
isActive && cssClasses.push(styles$
|
|
2084
|
-
isHorizontal && cssClasses.push(styles$
|
|
2086
|
+
cssClasses.push(styles$a.stepConnectorLine);
|
|
2087
|
+
isActive && cssClasses.push(styles$a['isActive']);
|
|
2088
|
+
isHorizontal && cssClasses.push(styles$a.stepConnectorLineHorizontal);
|
|
2085
2089
|
return cssClasses.filter(css => css).join(' ');
|
|
2086
2090
|
};
|
|
2087
2091
|
return (React.createElement("div", { className: getCssClassesConnector() },
|
|
2088
2092
|
React.createElement("div", { className: getCssClassesLine() })));
|
|
2089
2093
|
};
|
|
2090
2094
|
|
|
2091
|
-
var css_248z$
|
|
2092
|
-
var styles$
|
|
2093
|
-
styleInject(css_248z$
|
|
2095
|
+
var css_248z$9 = ".Stepper-module_stepper__V6odG {\n display: flex;\n align-items: center;\n flex-direction: row;\n margin-bottom: 10px; }\n .Stepper-module_stepper__V6odG.Stepper-module_isHorizontal__Q-3Wu {\n overflow-x: auto; }\n";
|
|
2096
|
+
var styles$9 = {"stepper":"Stepper-module_stepper__V6odG","isHorizontal":"Stepper-module_isHorizontal__Q-3Wu"};
|
|
2097
|
+
styleInject(css_248z$9);
|
|
2094
2098
|
|
|
2095
2099
|
const Stepper = (props) => {
|
|
2096
2100
|
const { children, isLinear = true, showLabel = true, showProgressCheckIcon = false, value, isHorizontal = true, onChange, onFinish } = props;
|
|
@@ -2125,7 +2129,7 @@ const Stepper = (props) => {
|
|
|
2125
2129
|
isDisabled: isLinear && (activeIndex + 1 < index),
|
|
2126
2130
|
showLabel: showLabel,
|
|
2127
2131
|
showProgressCheckIcon: showProgressCheckIcon,
|
|
2128
|
-
onClick: (
|
|
2132
|
+
onClick: (e) => handleClickStep(e.event, e.value, index)
|
|
2129
2133
|
});
|
|
2130
2134
|
};
|
|
2131
2135
|
const isStepOptional = (index) => {
|
|
@@ -2178,8 +2182,8 @@ const Stepper = (props) => {
|
|
|
2178
2182
|
};
|
|
2179
2183
|
const getCssClasses = () => {
|
|
2180
2184
|
const cssClasses = [];
|
|
2181
|
-
cssClasses.push(styles$
|
|
2182
|
-
isHorizontal && cssClasses.push(styles$
|
|
2185
|
+
cssClasses.push(styles$9.stepper);
|
|
2186
|
+
isHorizontal && cssClasses.push(styles$9['isHorizontal']);
|
|
2183
2187
|
return cssClasses.filter(css => css).join(' ');
|
|
2184
2188
|
};
|
|
2185
2189
|
return (React.createElement(React.Fragment, null, steps &&
|
|
@@ -2192,15 +2196,15 @@ const Stepper = (props) => {
|
|
|
2192
2196
|
React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2193
2197
|
};
|
|
2194
2198
|
|
|
2195
|
-
var css_248z$
|
|
2196
|
-
var styles$
|
|
2197
|
-
styleInject(css_248z$
|
|
2199
|
+
var css_248z$8 = ".Typography-module_typography__sw-td {\n text-overflow: ellipsis;\n overflow: hidden !important; }\n";
|
|
2200
|
+
var styles$8 = {"typography":"Typography-module_typography__sw-td"};
|
|
2201
|
+
styleInject(css_248z$8);
|
|
2198
2202
|
|
|
2199
2203
|
const Wrapper = (props) => {
|
|
2200
2204
|
const { as = 'span', children, className } = props, rest = __rest(props, ["as", "children", "className"]);
|
|
2201
2205
|
const getCssClasses = () => {
|
|
2202
2206
|
const cssClasses = [];
|
|
2203
|
-
cssClasses.push(styles$
|
|
2207
|
+
cssClasses.push(styles$8.typography);
|
|
2204
2208
|
className && cssClasses.push(className);
|
|
2205
2209
|
return cssClasses.filter(css => css).join(' ');
|
|
2206
2210
|
};
|
|
@@ -2211,38 +2215,45 @@ const Typography = (_a) => {
|
|
|
2211
2215
|
return (React.createElement(Wrapper, Object.assign({ as: as }, rest), children));
|
|
2212
2216
|
};
|
|
2213
2217
|
|
|
2214
|
-
var css_248z$
|
|
2215
|
-
var styles$
|
|
2216
|
-
styleInject(css_248z$
|
|
2218
|
+
var css_248z$7 = ".Step-module_stepWrapper__IQwq1 {\n display: flex;\n align-items: center;\n padding-left: 8px;\n padding-right: 8px;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n .Step-module_stepWrapper__IQwq1.Step-module_hasLabel__LZNvd:not(.Step-module_disabled__JnxUP):hover {\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04);\n border-radius: var(--borderRadius); }\n\n.Step-module_step__k42go {\n width: 40px;\n height: 40px;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; }\n .Step-module_step__k42go:not(.Step-module_hasLabel__LZNvd):not(.Step-module_disabled__JnxUP):hover {\n border-radius: 100%;\n cursor: pointer;\n background-color: rgba(0, 0, 0, 0.04); }\n .Step-module_step__k42go.Step-module_hasLabel__LZNvd svg {\n width: 18px !important;\n height: 18px !important; }\n\n.Step-module_stepIconCircle__hnxIV svg {\n width: 24px;\n height: 24px; }\n\n.Step-module_stepValue__B0-xv {\n position: absolute;\n color: var(--secondary-contrast-text); }\n .Step-module_stepValue__B0-xv .Step-module_isActive__3GGcl {\n color: var(--primary-contrast-text); }\n";
|
|
2219
|
+
var styles$7 = {"stepWrapper":"Step-module_stepWrapper__IQwq1","hasLabel":"Step-module_hasLabel__LZNvd","disabled":"Step-module_disabled__JnxUP","step":"Step-module_step__k42go","stepIconCircle":"Step-module_stepIconCircle__hnxIV","stepValue":"Step-module_stepValue__B0-xv","isActive":"Step-module_isActive__3GGcl"};
|
|
2220
|
+
styleInject(css_248z$7);
|
|
2217
2221
|
|
|
2218
2222
|
const Step = (props) => {
|
|
2219
2223
|
const { className, label, showLabel, index, value, isActive, isDone, isDisabled, showProgressCheckIcon, onClick } = props;
|
|
2220
2224
|
const [hoverRef, isHovered] = useHover();
|
|
2221
|
-
const handleClick = (
|
|
2225
|
+
const handleClick = (event) => {
|
|
2222
2226
|
if (!isDisabled) {
|
|
2223
|
-
onClick && onClick(
|
|
2227
|
+
onClick && onClick({ event, value });
|
|
2224
2228
|
}
|
|
2225
2229
|
};
|
|
2226
2230
|
const getCssClasses = () => {
|
|
2227
2231
|
const cssClasses = [];
|
|
2228
|
-
cssClasses.push(styles$
|
|
2229
|
-
label && showLabel && cssClasses.push(styles$
|
|
2230
|
-
isDisabled && cssClasses.push(styles$
|
|
2232
|
+
cssClasses.push(styles$7.stepWrapper);
|
|
2233
|
+
label && showLabel && cssClasses.push(styles$7['hasLabel']);
|
|
2234
|
+
isDisabled && cssClasses.push(styles$7['disabled']);
|
|
2231
2235
|
className && cssClasses.push(className);
|
|
2232
2236
|
return cssClasses.filter(css => css).join(' ');
|
|
2233
2237
|
};
|
|
2234
2238
|
const getCssClassesStep = () => {
|
|
2235
2239
|
const cssClasses = [];
|
|
2236
|
-
cssClasses.push(styles$
|
|
2237
|
-
label && showLabel && cssClasses.push(styles$
|
|
2238
|
-
isDisabled && cssClasses.push(styles$
|
|
2240
|
+
cssClasses.push(styles$7.step);
|
|
2241
|
+
label && showLabel && cssClasses.push(styles$7['hasLabel']);
|
|
2242
|
+
isDisabled && cssClasses.push(styles$7['disabled']);
|
|
2243
|
+
return cssClasses.filter(css => css).join(' ');
|
|
2244
|
+
};
|
|
2245
|
+
const getCssClassesStepValue = () => {
|
|
2246
|
+
const cssClasses = [];
|
|
2247
|
+
cssClasses.push(styles$7.stepValue);
|
|
2248
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
2249
|
+
isActive && cssClasses.push(styles$7.stepValue['isActive']);
|
|
2239
2250
|
return cssClasses.filter(css => css).join(' ');
|
|
2240
2251
|
};
|
|
2241
2252
|
return (React.createElement("div", { ref: hoverRef, className: getCssClasses(), onClick: handleClick },
|
|
2242
2253
|
React.createElement("div", { className: getCssClassesStep() },
|
|
2243
|
-
React.createElement(Icon, { className: styles$
|
|
2254
|
+
React.createElement(Icon, { className: styles$7.stepIconCircle, iconColor: (isHovered || isActive) && !isDisabled ? COLOR.primary : COLOR.secondary },
|
|
2244
2255
|
React.createElement(CircleSolidIcon, null)),
|
|
2245
|
-
React.createElement("div", { className:
|
|
2256
|
+
React.createElement("div", { className: getCssClassesStepValue() }, showProgressCheckIcon && isActive && isDone ?
|
|
2246
2257
|
React.createElement(Icon, null,
|
|
2247
2258
|
React.createElement(CheckSolidIcon, null))
|
|
2248
2259
|
:
|
|
@@ -2251,18 +2262,22 @@ const Step = (props) => {
|
|
|
2251
2262
|
React.createElement(Typography, { className: "flex-shrink-0" }, label)));
|
|
2252
2263
|
};
|
|
2253
2264
|
|
|
2265
|
+
var css_248z$6 = ".Table-module_table__DHKNv {\n --bs-table-bg: transparent;\n --bs-table-accent-bg: transparent;\n --bs-table-striped-color: #212529;\n --bs-table-striped-bg: rgba(0, 0, 0, 0.05);\n --bs-table-active-color: #212529;\n --bs-table-active-bg: rgba(0, 0, 0, 0.1);\n --bs-table-hover-color: #212529;\n --bs-table-hover-bg: rgba(0, 0, 0, 0.075);\n width: 100%;\n margin-bottom: 1rem;\n color: #212529;\n vertical-align: top;\n border-color: #dee2e6; }\n .Table-module_table__DHKNv thead {\n vertical-align: bottom; }\n .Table-module_table__DHKNv > :not(caption) > * > * {\n padding: 0.5rem 0.5rem;\n background-color: var(--bs-table-bg);\n border-bottom-width: 1px;\n box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg); }\n .Table-module_table__DHKNv > :not(:first-child) {\n border-top: 2px solid currentColor; }\n\n.Table-module_bordered__1Kp1p > :not(caption) > * > * {\n border-width: 0 1px; }\n\n.Table-module_bordered__1Kp1p > :not(caption) > * {\n border-width: 1px 0; }\n\n.Table-module_striped__jmxgE > tbody > tr:nth-of-type(odd) > * {\n --bs-table-accent-bg: var(--bs-table-striped-bg);\n color: var(--bs-table-striped-color); }\n\n.Table-module_hover__P6r3y > tbody > tr:hover > * {\n --bs-table-accent-bg: var(--bs-table-hover-bg);\n color: var(--bs-table-hover-color); }\n\n.Table-module_tableResponsive__ykttB {\n overflow-x: auto; }\n";
|
|
2266
|
+
var styles$6 = {"table":"Table-module_table__DHKNv","bordered":"Table-module_bordered__1Kp1p","striped":"Table-module_striped__jmxgE","hover":"Table-module_hover__P6r3y","tableResponsive":"Table-module_tableResponsive__ykttB"};
|
|
2267
|
+
styleInject(css_248z$6);
|
|
2268
|
+
|
|
2254
2269
|
const Table = (props) => {
|
|
2255
2270
|
const { children, className, bordered, striped, hover, responsive = false } = props;
|
|
2256
2271
|
const getCssClasses = () => {
|
|
2257
2272
|
const cssClasses = [];
|
|
2258
|
-
cssClasses.push(
|
|
2259
|
-
bordered && cssClasses.push('
|
|
2260
|
-
striped && cssClasses.push('
|
|
2261
|
-
hover && cssClasses.push('
|
|
2273
|
+
cssClasses.push(styles$6.table);
|
|
2274
|
+
bordered && cssClasses.push(styles$6['bordered']);
|
|
2275
|
+
striped && cssClasses.push(styles$6['striped']);
|
|
2276
|
+
hover && cssClasses.push(styles$6['hover']);
|
|
2262
2277
|
className && cssClasses.push(className);
|
|
2263
2278
|
return cssClasses.filter(css => css).join(' ');
|
|
2264
2279
|
};
|
|
2265
|
-
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className:
|
|
2280
|
+
return (React.createElement(ConditionalWrapper, { condition: responsive, wrapper: children => React.createElement("div", { className: styles$6.tableResponsive }, children) },
|
|
2266
2281
|
React.createElement("table", { className: getCssClasses() }, children)));
|
|
2267
2282
|
};
|
|
2268
2283
|
|
|
@@ -2315,10 +2330,10 @@ const Tabs = (props) => {
|
|
|
2315
2330
|
key: child.props.value,
|
|
2316
2331
|
isActive: child.props.value === selectedValue,
|
|
2317
2332
|
fixed: fixed,
|
|
2318
|
-
onClick: (
|
|
2333
|
+
onClick: (e) => handleClickTab(e.event, e.value, index),
|
|
2319
2334
|
});
|
|
2320
2335
|
};
|
|
2321
|
-
return (React.createElement(Fragment, null,
|
|
2336
|
+
return (React.createElement(React.Fragment, null,
|
|
2322
2337
|
React.createElement("div", { className: getCssClasses() },
|
|
2323
2338
|
children && React.Children.toArray(children).map((child, index) => renderTabs(child, index)),
|
|
2324
2339
|
children &&
|
|
@@ -2340,11 +2355,11 @@ const Tab = (props) => {
|
|
|
2340
2355
|
className && cssClasses.push(className);
|
|
2341
2356
|
return cssClasses.filter(css => css).join(' ');
|
|
2342
2357
|
};
|
|
2343
|
-
return (React.createElement(Button, { className: getCssClasses(), onClick: (event) => onClick && onClick(event, value), isActive: isActive, disabled: disabled }, label));
|
|
2358
|
+
return (React.createElement(Button, { className: getCssClasses(), onClick: (event) => onClick && onClick({ event, value }), isActive: isActive, disabled: disabled }, label));
|
|
2344
2359
|
};
|
|
2345
2360
|
|
|
2346
2361
|
const TabPanel = (props) => {
|
|
2347
|
-
const { children,
|
|
2362
|
+
const { children, value, index } = props, rest = __rest(props, ["children", "value", "index"]);
|
|
2348
2363
|
return (React.createElement("div", Object.assign({ role: "tabpanel", hidden: value !== index, id: `tabpanel-${index}`, "aria-labelledby": `wrapped-tab-${index}` }, rest), value === index && children));
|
|
2349
2364
|
};
|
|
2350
2365
|
|
|
@@ -2547,7 +2562,7 @@ var styles = {"treeItem":"TreeItem-module_treeItem__Mxsjr"};
|
|
|
2547
2562
|
styleInject(css_248z);
|
|
2548
2563
|
|
|
2549
2564
|
const TreeItem = (props) => {
|
|
2550
|
-
const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand,
|
|
2565
|
+
const { nodeId, label, children, className, isExpanded, isSelected, isSelectable, onToggleExpand, onItemSelect } = props;
|
|
2551
2566
|
const [_isExpanded, setIsExpanded] = useState(false);
|
|
2552
2567
|
const [_isSelected, setIsSelected] = useState(false);
|
|
2553
2568
|
const getCssClasses = () => {
|
|
@@ -2570,7 +2585,7 @@ const TreeItem = (props) => {
|
|
|
2570
2585
|
};
|
|
2571
2586
|
const handleOnSelect = (nodeId) => {
|
|
2572
2587
|
setIsSelected(!_isSelected);
|
|
2573
|
-
|
|
2588
|
+
onItemSelect && onItemSelect({ id: nodeId, isSelected: !_isSelected });
|
|
2574
2589
|
};
|
|
2575
2590
|
return (React.createElement("li", { className: getCssClasses(), style: { paddingLeft: `${(48 * (children ? 0 : 1))}px` } },
|
|
2576
2591
|
React.createElement("div", { className: "d-flex align-items-center" },
|