@hexure/ui 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +70 -53
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/esm/index.js +70 -54
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/index.d.ts +11 -1
- package/package.json +90 -90
package/dist/cjs/index.js
CHANGED
|
@@ -2036,7 +2036,7 @@ var FontSizes = {
|
|
|
2036
2036
|
SMALL: '13px',
|
|
2037
2037
|
};
|
|
2038
2038
|
|
|
2039
|
-
var Header$3 = styled.div(templateObject_1$
|
|
2039
|
+
var Header$3 = styled.div(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n background: #f5f5f5;\n border: 1px solid #e5e5e5;\n padding: 14px 20px;\n height: 50px;\n cursor: pointer;\n"])));
|
|
2040
2040
|
var Title$1 = styled.div(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n color: ", ";\n line-height: 1.6em;\n font-family: ", ";\n box-sizing: border-box;\n"])), FontSizes.DEFAULT, Colors.BLACK.Hex, FontStyles.DEFAULT);
|
|
2041
2041
|
var Accordion = function (_a) {
|
|
2042
2042
|
var title = _a.title, children = _a.children, open = _a.open, onClick = _a.onClick, accessibleProps = __rest(_a, ["title", "children", "open", "onClick"]);
|
|
@@ -2046,7 +2046,7 @@ var Accordion = function (_a) {
|
|
|
2046
2046
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: open ? js.mdiChevronUp : js.mdiChevronDown, size: '24px' })),
|
|
2047
2047
|
open ? children : null));
|
|
2048
2048
|
};
|
|
2049
|
-
var templateObject_1$
|
|
2049
|
+
var templateObject_1$p, templateObject_2$m;
|
|
2050
2050
|
|
|
2051
2051
|
var button_type_mapping = {
|
|
2052
2052
|
primary: {
|
|
@@ -2071,7 +2071,7 @@ var button_type_mapping = {
|
|
|
2071
2071
|
badge_content_color: Colors.RED.Hex,
|
|
2072
2072
|
},
|
|
2073
2073
|
};
|
|
2074
|
-
var StyledButton = styled.button(templateObject_1$
|
|
2074
|
+
var StyledButton = styled.button(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"], ["\n height: ", ";\n line-height: 1em;\n border-radius: ", ";\n margin: ", ";\n padding: ", ";\n outline: none;\n background: ", ";\n width: ", ";\n cursor: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n box-sizing: border-box;\n &:hover {\n opacity: ", ";\n }\n"])), function (props) { return (props.$small ? '30px' : '40px'); }, function (props) { return (props.$small ? '15px' : '20px'); }, function (props) { return props.$margin || '0px'; }, function (props) {
|
|
2075
2075
|
if (props.$hasChildren) {
|
|
2076
2076
|
if (props.$small) {
|
|
2077
2077
|
return '0 10px';
|
|
@@ -2110,9 +2110,9 @@ var Button = function (_a) {
|
|
|
2110
2110
|
React.createElement(Icon, { color: format ? button_type_mapping[format].content_color : '#fff', path: icon, size: small ? '20px' : '24px' }))) : null,
|
|
2111
2111
|
badge && !icon ? (React.createElement(Badge$1, { "$format": format, "$small": small }, badge)) : null));
|
|
2112
2112
|
};
|
|
2113
|
-
var templateObject_1$
|
|
2113
|
+
var templateObject_1$o, templateObject_2$l, templateObject_3$i, templateObject_4$9;
|
|
2114
2114
|
|
|
2115
|
-
var StyledComponent = styled.p(templateObject_1$
|
|
2115
|
+
var StyledComponent = styled.p(templateObject_1$n || (templateObject_1$n = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n font-style: ", ";\n text-decoration: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n text-align: ", ";\n box-sizing: border-box;\n"])), function (props) { return Colors[props.$color || 'BLACK'].Hex; }, function (props) { return (props.$type === 'small' ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$type === 'small' ? '1.5em' : '1.6em'); }, function (props) { return (props.$type === 'small' ? '1px' : '0px'); }, function (props) { return (props.$type === 'bold' ? '500' : '400'); }, function (props) { return (props.$type === 'italic' ? 'italic' : 'normal'); }, function (props) {
|
|
2116
2116
|
return ['underline', 'line-through'].includes(props.$type) ? props.$type : 'none';
|
|
2117
2117
|
}, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; }, function (props) { return props.$align || 'left'; });
|
|
2118
2118
|
var Copy = function (_a) {
|
|
@@ -2122,9 +2122,9 @@ var Copy = function (_a) {
|
|
|
2122
2122
|
Copy.defaultProps = {
|
|
2123
2123
|
type: 'default',
|
|
2124
2124
|
};
|
|
2125
|
-
var templateObject_1$
|
|
2125
|
+
var templateObject_1$n;
|
|
2126
2126
|
|
|
2127
|
-
var H1 = styled.h1(templateObject_1$
|
|
2127
|
+
var H1 = styled.h1(templateObject_1$m || (templateObject_1$m = __makeTemplateObject(["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 30px;\n font-weight: ", ";\n line-height: 1.4em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2128
2128
|
var H2 = styled.h2(templateObject_2$k || (templateObject_2$k = __makeTemplateObject(["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 24px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2129
2129
|
var H3 = styled.h3(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"], ["\n color: ", ";\n font-size: 18px;\n font-weight: ", ";\n line-height: 1.33em;\n font-family: 'Roboto Slab', Roboto, Helvetica, Arial, sans-serif;\n margin: ", ";\n padding: ", ";\n box-sizing: border-box;\n"])), Colors.BLACK.Hex, function (props) { return (props.$bold ? '500' : '400'); }, function (props) { return props.$margin || '0px'; }, function (props) { return props.$padding || '0px'; });
|
|
2130
2130
|
var Heading = function (_a) {
|
|
@@ -2145,9 +2145,9 @@ Heading.defaultProps = {
|
|
|
2145
2145
|
bold: false,
|
|
2146
2146
|
type: 'primary',
|
|
2147
2147
|
};
|
|
2148
|
-
var templateObject_1$
|
|
2148
|
+
var templateObject_1$m, templateObject_2$k, templateObject_3$h;
|
|
2149
2149
|
|
|
2150
|
-
var Wrapper$
|
|
2150
|
+
var Wrapper$f = styled.div(templateObject_1$l || (templateObject_1$l = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9999;\n background: rgba(0, 0, 0, 0.8);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n"])));
|
|
2151
2151
|
var Container$3 = styled.dialog(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"], ["\n max-width: 600px;\n width: auto;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n outline: none;\n border: none;\n position: relative;\n padding: 40px;\n text-align: center;\n box-sizing: border-box;\n"])));
|
|
2152
2152
|
var Buttons = styled.div(templateObject_3$g || (templateObject_3$g = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 30px;\n box-sizing: border-box;\n"])));
|
|
2153
2153
|
var ActionDialog = function (_a) {
|
|
@@ -2162,7 +2162,7 @@ var ActionDialog = function (_a) {
|
|
|
2162
2162
|
document.onkeydown = null;
|
|
2163
2163
|
};
|
|
2164
2164
|
}, []);
|
|
2165
|
-
return (React.createElement(Wrapper$
|
|
2165
|
+
return (React.createElement(Wrapper$f, __assign({}, accessibleProps),
|
|
2166
2166
|
React.createElement(Container$3, { open: true },
|
|
2167
2167
|
title ? (React.createElement(Heading, { margin: '0px 0px 20px 0px', type: 'secondary' }, title)) : null,
|
|
2168
2168
|
description ? React.createElement(Copy, { align: 'center' }, description) : null,
|
|
@@ -2170,9 +2170,9 @@ var ActionDialog = function (_a) {
|
|
|
2170
2170
|
secondaryButton ? (React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary', margin: '0px 5px' }))) : null,
|
|
2171
2171
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 5px' })) : null)) : null)));
|
|
2172
2172
|
};
|
|
2173
|
-
var templateObject_1$
|
|
2173
|
+
var templateObject_1$l, templateObject_2$j, templateObject_3$g;
|
|
2174
2174
|
|
|
2175
|
-
var Wrapper$
|
|
2175
|
+
var Wrapper$e = styled.div(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"], ["\n border: 1px solid #f1f1f1;\n border-radius: 4px;\n border-left-width: 4px;\n box-shadow: 0px 4px 12px -6px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: flex-start;\n padding: 20px;\n box-sizing: border-box;\n"])));
|
|
2176
2176
|
var Content$1 = styled.div(templateObject_2$i || (templateObject_2$i = __makeTemplateObject(["\n margin-left: 20px;\n"], ["\n margin-left: 20px;\n"])));
|
|
2177
2177
|
var Action$1 = styled.div(templateObject_3$f || (templateObject_3$f = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n cursor: pointer;\n margin-top: 6px;\n"], ["\n color: ", ";\n font-size: ", ";\n font-family: ", ";\n font-weight: 500;\n cursor: pointer;\n margin-top: 6px;\n"])), Colors.PRIMARY.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
|
|
2178
2178
|
var Alert = function (_a) {
|
|
@@ -2195,7 +2195,7 @@ var Alert = function (_a) {
|
|
|
2195
2195
|
icon: js.mdiCheckboxMarkedCircleOutline,
|
|
2196
2196
|
},
|
|
2197
2197
|
};
|
|
2198
|
-
return (React.createElement(Wrapper$
|
|
2198
|
+
return (React.createElement(Wrapper$e, __assign({}, accessibleProps, { style: { borderLeftColor: type_mapping[type].color } }),
|
|
2199
2199
|
React.createElement("div", { style: { flexShrink: 0 } },
|
|
2200
2200
|
React.createElement(Icon, { color: type_mapping[type].color, path: type_mapping[type].icon, size: '30px' })),
|
|
2201
2201
|
React.createElement(Content$1, null,
|
|
@@ -2203,9 +2203,9 @@ var Alert = function (_a) {
|
|
|
2203
2203
|
description ? React.createElement(Copy, { margin: '6px 0 0 0 !important' }, description) : null,
|
|
2204
2204
|
action ? React.createElement(Action$1, { onClick: action.onClick }, action.label) : null)));
|
|
2205
2205
|
};
|
|
2206
|
-
var templateObject_1$
|
|
2206
|
+
var templateObject_1$k, templateObject_2$i, templateObject_3$f;
|
|
2207
2207
|
|
|
2208
|
-
var Wrapper$
|
|
2208
|
+
var Wrapper$d = styled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"], ["\n border: 1px solid ", ";\n border-radius: 8px;\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n"])), Colors.PRIMARY.Hex);
|
|
2209
2209
|
var Left = styled.div(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n"])));
|
|
2210
2210
|
var Info = styled.div(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n margin-right: 30px;\n"])));
|
|
2211
2211
|
var Selected = styled.span(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n"])), FontStyles.DEFAULT, Colors.BLACK.Hex);
|
|
@@ -2215,7 +2215,7 @@ var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTempl
|
|
|
2215
2215
|
var ErrorMsg = styled.span(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"], ["\n font-size: 14px;\n font-weight: 500;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n margin-left: 8px;\n"])), FontStyles.DEFAULT, Colors.RED.Hex);
|
|
2216
2216
|
var BulkActionBar = function (_a) {
|
|
2217
2217
|
var _b = _a.actions, actions = _b === void 0 ? [] : _b, errorMsg = _a.errorMsg, onClear = _a.onClear, _c = _a.selectedCount, selectedCount = _c === void 0 ? 0 : _c, accessibleProps = __rest(_a, ["actions", "errorMsg", "onClear", "selectedCount"]);
|
|
2218
|
-
return (React.createElement(Wrapper$
|
|
2218
|
+
return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
|
|
2219
2219
|
React.createElement(Left, null,
|
|
2220
2220
|
React.createElement(Info, null,
|
|
2221
2221
|
React.createElement(Selected, null,
|
|
@@ -2227,38 +2227,47 @@ var BulkActionBar = function (_a) {
|
|
|
2227
2227
|
React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
|
|
2228
2228
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2229
2229
|
};
|
|
2230
|
-
var templateObject_1$
|
|
2230
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$1;
|
|
2231
2231
|
|
|
2232
|
-
var Wrapper$
|
|
2233
|
-
var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-size: 20px;\n margin: 0px 0px
|
|
2232
|
+
var Wrapper$c = styled.label(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: flex-start;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"], ["\n padding: 4px 0;\n cursor: ", ";\n display: flex;\n align-items: flex-start;\n font-size: ", ";\n line-height: 1.6em;\n box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
|
|
2233
|
+
var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"], ["\n font-size: 20px;\n margin: 5px 0px 0px 0px;\n line-height: 1.1em;\n box-sizing: border-box;\n"])));
|
|
2234
2234
|
var Label$3 = styled.span(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n"], ["\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 1.6em;\n color: ", ";\n margin-left: 6px;\n box-sizing: border-box;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
|
|
2235
2235
|
var Checkbox = function (_a) {
|
|
2236
2236
|
var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
|
|
2237
|
-
return (React.createElement(Wrapper$
|
|
2237
|
+
return (React.createElement(Wrapper$c, __assign({}, accessibleProps),
|
|
2238
2238
|
React.createElement(Input$2, { checked: checked, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, type: 'checkbox' }),
|
|
2239
2239
|
children ? React.createElement(Label$3, null, children) : null));
|
|
2240
2240
|
};
|
|
2241
|
-
var templateObject_1$
|
|
2241
|
+
var templateObject_1$i, templateObject_2$g, templateObject_3$d;
|
|
2242
2242
|
|
|
2243
|
-
var SelectAll = styled.div(templateObject_1$
|
|
2243
|
+
var SelectAll = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n"], ["\n padding: 8px 12px;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n"])), Colors.LIGHT_GRAY.Hex);
|
|
2244
2244
|
var Options$1 = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n padding: 12px;\n box-sizing: border-box;\n"], ["\n padding: 12px;\n box-sizing: border-box;\n"])));
|
|
2245
2245
|
var Checklist = function (_a) {
|
|
2246
|
-
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options,
|
|
2246
|
+
var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, _b = _a.selected, selected = _b === void 0 ? [] : _b, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
|
|
2247
2247
|
var values = options.map(function (option) { return option.value; });
|
|
2248
|
+
var selected_options = options.filter(function (o) { return selected.includes(o.value); });
|
|
2248
2249
|
var handleToggleAll = function () {
|
|
2249
|
-
if (
|
|
2250
|
-
|
|
2250
|
+
if (selected_options.length === options.length) {
|
|
2251
|
+
triggerChange([]);
|
|
2251
2252
|
}
|
|
2252
2253
|
else {
|
|
2253
|
-
|
|
2254
|
+
triggerChange(options.map(function (option) { return option.value; }));
|
|
2254
2255
|
}
|
|
2255
2256
|
};
|
|
2256
2257
|
var handleChange = function (option) {
|
|
2257
|
-
var
|
|
2258
|
+
var new_selected = selected_options.filter(function (o) { return o.value !== option.value; }).map(function (o) { return o.value; });
|
|
2258
2259
|
if (!selected.includes(option.value)) {
|
|
2259
|
-
|
|
2260
|
+
new_selected.push(option.value);
|
|
2260
2261
|
}
|
|
2261
|
-
onChange
|
|
2262
|
+
// Mimic input event so it's easier to share onChange methods
|
|
2263
|
+
triggerChange(new_selected);
|
|
2264
|
+
};
|
|
2265
|
+
var triggerChange = function (value) {
|
|
2266
|
+
onChange({
|
|
2267
|
+
target: {
|
|
2268
|
+
value: value,
|
|
2269
|
+
},
|
|
2270
|
+
});
|
|
2262
2271
|
};
|
|
2263
2272
|
return (React.createElement(React.Fragment, null,
|
|
2264
2273
|
showSelectAll && values.length ? (React.createElement(SelectAll, null,
|
|
@@ -2269,7 +2278,7 @@ var Checklist = function (_a) {
|
|
|
2269
2278
|
return (React.createElement(Checkbox, __assign({ key: i }, accessibleProps, { checked: checked, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
|
|
2270
2279
|
}))));
|
|
2271
2280
|
};
|
|
2272
|
-
var templateObject_1$
|
|
2281
|
+
var templateObject_1$h, templateObject_2$f;
|
|
2273
2282
|
|
|
2274
2283
|
var dayjs_min = {exports: {}};
|
|
2275
2284
|
|
|
@@ -2589,7 +2598,7 @@ var dayjs_min = {exports: {}};
|
|
|
2589
2598
|
var dayjs_minExports = dayjs_min.exports;
|
|
2590
2599
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
2591
2600
|
|
|
2592
|
-
var Wrapper$
|
|
2601
|
+
var Wrapper$b = styled.div(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n"], ["\n border-radius: 4px;\n height: 40px;\n background-color: ", ";\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n flex-grow: ", ";\n box-sizing: border-box;\n padding: 10px 0px;\n display: flex;\n align-items: center;\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
|
|
2593
2602
|
var $style = _a.$style;
|
|
2594
2603
|
return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
|
|
2595
2604
|
}, function (_a) {
|
|
@@ -2600,7 +2609,7 @@ var Trigger$1 = styled.select(templateObject_2$e || (templateObject_2$e = __make
|
|
|
2600
2609
|
var IconWrapper$2 = styled.span(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n right: 4px;\n height: 22px;\n z-index: 1;\n"], ["\n position: absolute;\n right: 4px;\n height: 22px;\n z-index: 1;\n"])));
|
|
2601
2610
|
var Select = function (_a) {
|
|
2602
2611
|
var options = _a.options, optionGroups = _a.optionGroups, placeholder = _a.placeholder, readOnly = _a.readOnly, invalid = _a.invalid, value = _a.value, onChange = _a.onChange, style = _a.style, accessibleProps = __rest(_a, ["options", "optionGroups", "placeholder", "readOnly", "invalid", "value", "onChange", "style"]);
|
|
2603
|
-
return (React.createElement(Wrapper$
|
|
2612
|
+
return (React.createElement(Wrapper$b, { "$invalid": invalid, "$readOnly": readOnly, "$style": style },
|
|
2604
2613
|
React.createElement(Trigger$1, __assign({ disabled: readOnly, onChange: onChange, placeholder: placeholder, value: value }, accessibleProps),
|
|
2605
2614
|
placeholder ? (React.createElement("option", { disabled: true, value: '' }, placeholder)) : null,
|
|
2606
2615
|
optionGroups &&
|
|
@@ -2616,9 +2625,9 @@ var Select = function (_a) {
|
|
|
2616
2625
|
React.createElement(IconWrapper$2, null,
|
|
2617
2626
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' }))));
|
|
2618
2627
|
};
|
|
2619
|
-
var templateObject_1$
|
|
2628
|
+
var templateObject_1$g, templateObject_2$e, templateObject_3$c;
|
|
2620
2629
|
|
|
2621
|
-
var DatePickerWrapper = styled.div(templateObject_1$
|
|
2630
|
+
var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2622
2631
|
var Middle = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0px -1px;\n"], ["\n margin: 0px -1px;\n"])));
|
|
2623
2632
|
var DatePicker = function (_a) {
|
|
2624
2633
|
var _b = _a.readOnly, readOnly = _b === void 0 ? false : _b, _c = _a.invalid, invalid = _c === void 0 ? false : _c, _d = _a.maxDate, maxDate = _d === void 0 ? null : _d, _e = _a.minDate, minDate = _e === void 0 ? null : _e, date = _a.date, onChange = _a.onChange;
|
|
@@ -2679,9 +2688,9 @@ var DatePicker = function (_a) {
|
|
|
2679
2688
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
2680
2689
|
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px' }, value: dDate.format('YYYY') }))));
|
|
2681
2690
|
};
|
|
2682
|
-
var templateObject_1$
|
|
2691
|
+
var templateObject_1$f, templateObject_2$d;
|
|
2683
2692
|
|
|
2684
|
-
var Scrim$1 = styled.div(templateObject_1$
|
|
2693
|
+
var Scrim$1 = styled.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9998;\n background: ", ";\n"], ["\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 9998;\n background: ", ";\n"])), function (_a) {
|
|
2685
2694
|
var $scrim = _a.$scrim;
|
|
2686
2695
|
return ($scrim === 'dark' ? 'rgba(0,0,0,0.8)' : 'transparent');
|
|
2687
2696
|
});
|
|
@@ -2720,10 +2729,10 @@ var Drawer = function (_a) {
|
|
|
2720
2729
|
primaryButton ? React.createElement(Button, __assign({}, primaryButton, { format: 'primary' })) : null)) : null),
|
|
2721
2730
|
scrim ? React.createElement(Scrim$1, { "$scrim": scrim, onClick: onClose }) : null));
|
|
2722
2731
|
};
|
|
2723
|
-
var templateObject_1$
|
|
2732
|
+
var templateObject_1$e, templateObject_2$c, templateObject_3$b, templateObject_4$7, templateObject_5$5, templateObject_6$3;
|
|
2724
2733
|
|
|
2725
|
-
var Wrapper$
|
|
2726
|
-
var LabelRow = styled.div(templateObject_1$
|
|
2734
|
+
var Wrapper$a = styled.div(function (props) { return (__assign({ margin: '0px 0px 18px 0px' }, props.style)); });
|
|
2735
|
+
var LabelRow = styled.div(templateObject_1$d || (templateObject_1$d = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin: 0 0 4px 0;\n box-sizing: border-box;\n"])));
|
|
2727
2736
|
var Label$2 = styled.label(templateObject_2$b || (templateObject_2$b = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.BLACK.Hex);
|
|
2728
2737
|
var Required = styled.span(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n color: ", ";\n margin-left: 4px;\n"], ["\n color: ", ";\n margin-left: 4px;\n"])), Colors.RED.Hex);
|
|
2729
2738
|
var Action = styled.span(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"], ["\n font-size: ", ";\n font-weight: 500;\n line-height: 1em;\n font-family: ", ";\n color: ", ";\n cursor: pointer;\n"])), FontSizes.DEFAULT, FontStyles.DEFAULT, Colors.PRIMARY.Hex);
|
|
@@ -2731,7 +2740,7 @@ var Description = styled.div(templateObject_5$4 || (templateObject_5$4 = __makeT
|
|
|
2731
2740
|
var Validation = styled.div(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"], ["\n font-size: ", ";\n font-weight: 400;\n line-height: 1.3em;\n font-family: ", ";\n color: ", ";\n margin: 4px 0 0 0;\n box-sizing: border-box;\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.RED.Hex);
|
|
2732
2741
|
var Field = function (_a) {
|
|
2733
2742
|
var action = _a.action, children = _a.children, validationText = _a.validationText, label = _a.label, description = _a.description, required = _a.required, htmlFor = _a.htmlFor, style = _a.style, accessibleProps = __rest(_a, ["action", "children", "validationText", "label", "description", "required", "htmlFor", "style"]);
|
|
2734
|
-
return (React.createElement(Wrapper$
|
|
2743
|
+
return (React.createElement(Wrapper$a, __assign({ style: style }, accessibleProps),
|
|
2735
2744
|
React.createElement(LabelRow, null,
|
|
2736
2745
|
React.createElement(Label$2, { htmlFor: htmlFor },
|
|
2737
2746
|
label,
|
|
@@ -2741,9 +2750,9 @@ var Field = function (_a) {
|
|
|
2741
2750
|
children,
|
|
2742
2751
|
validationText ? React.createElement(Validation, null, validationText) : null));
|
|
2743
2752
|
};
|
|
2744
|
-
var templateObject_1$
|
|
2753
|
+
var templateObject_1$d, templateObject_2$b, templateObject_3$a, templateObject_4$6, templateObject_5$4, templateObject_6$2;
|
|
2745
2754
|
|
|
2746
|
-
var Wrapper$
|
|
2755
|
+
var Wrapper$9 = styled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n display: flex;\n gap: 16px;\n padding: 20px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n border: 1px dashed ", ";\n background-color: ", ";\n"], ["\n display: flex;\n gap: 16px;\n padding: 20px;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n border: 1px dashed ", ";\n background-color: ", ";\n"])), function (_a) {
|
|
2747
2756
|
var $isDragOver = _a.$isDragOver;
|
|
2748
2757
|
return ($isDragOver ? "".concat(Colors.PRIMARY.Hex) : '#ccc');
|
|
2749
2758
|
}, function (_a) {
|
|
@@ -2823,7 +2832,7 @@ var FileUpload = function (_a) {
|
|
|
2823
2832
|
onFileDelete(files[index]);
|
|
2824
2833
|
};
|
|
2825
2834
|
return (React.createElement(React.Fragment, null,
|
|
2826
|
-
React.createElement(Wrapper$
|
|
2835
|
+
React.createElement(Wrapper$9, __assign({ "$isDragOver": dragOver, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop }, accessibleProps),
|
|
2827
2836
|
files.length > 0 && (React.createElement(Files, null, Array.from(files).map(function (singleFile, index) {
|
|
2828
2837
|
var _a;
|
|
2829
2838
|
return (React.createElement(File, { key: index },
|
|
@@ -2840,7 +2849,7 @@ var FileUpload = function (_a) {
|
|
|
2840
2849
|
React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
|
|
2841
2850
|
React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
|
|
2842
2851
|
};
|
|
2843
|
-
var templateObject_1$
|
|
2852
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
|
|
2844
2853
|
|
|
2845
2854
|
var formatAsPhone = function (number) {
|
|
2846
2855
|
var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
|
|
@@ -2869,7 +2878,7 @@ var formatAsSsn = function (number) {
|
|
|
2869
2878
|
return formatted_value;
|
|
2870
2879
|
};
|
|
2871
2880
|
|
|
2872
|
-
var StyledInput = styled.input(templateObject_1$
|
|
2881
|
+
var StyledInput = styled.input(templateObject_1$b || (templateObject_1$b = __makeTemplateObject(["\n background-color: ", ";\n border-radius: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.28em;\n color: ", ";\n position: relative;\n height: auto;\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n margin: 0px;\n text-indent: 0px;\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: ", ";\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.28em;\n color: ", ";\n position: relative;\n height: auto;\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n margin: 0px;\n text-indent: 0px;\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$suffix ? '4px 0px 0px 4px' : '4px'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
|
|
2873
2882
|
var StyledSuffix = styled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n height: auto;\n background: #f5f5f5;\n border-width: 1px 1px 1px 0px;\n border-style: solid;\n border-color: #cccccc;\n border-radius: 0px 4px 4px 0px;\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: ", ";\n color: Colors.BLACK.Hex;\n"], ["\n box-sizing: border-box;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n height: auto;\n background: #f5f5f5;\n border-width: 1px 1px 1px 0px;\n border-style: solid;\n border-color: #cccccc;\n border-radius: 0px 4px 4px 0px;\n font-family: ", ";\n font-style: normal;\n font-weight: 400;\n font-size: ", ";\n color: Colors.BLACK.Hex;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT);
|
|
2874
2883
|
var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
2875
2884
|
var StyledTextarea = styled.textarea(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"], ["\n background-color: ", ";\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1.6em;\n color: ", ";\n position: relative;\n height: ", ";\n padding: 10px;\n opacity: ", ";\n box-shadow: none;\n outline: none;\n padding: 10px,\n margin: 0px,\n text-indent: 0px,\n --webkit-appearance: none;\n box-sizing: border-box;\n display: block;\n width: 100%;\n &:focus {\n border-color: ", ";\n }\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : '#cccccc'); }, FontSizes.DEFAULT, FontStyles.DEFAULT, function (props) { return (props.$invalid && !props.$readOnly ? Colors.RED.Hex : Colors.BLACK.Hex); }, function (props) { return props.$height || '40px'; }, function (props) { return (props.$readOnly ? 0.6 : 1); }, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
|
|
@@ -2917,7 +2926,14 @@ var Input$1 = function (_a) {
|
|
|
2917
2926
|
React.createElement(StyledInput, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$suffix": suffix, max: max, maxLength: maxLength, min: min, onBlur: onBlur, onChange: handleInputChange, onKeyDown: onKeyDown, placeholder: placeholder, step: step, type: type, value: formatted_value }, accessibleProps)),
|
|
2918
2927
|
suffix && React.createElement(StyledSuffix, null, suffix)));
|
|
2919
2928
|
};
|
|
2920
|
-
var templateObject_1$
|
|
2929
|
+
var templateObject_1$b, templateObject_2$9, templateObject_3$8, templateObject_4$4;
|
|
2930
|
+
|
|
2931
|
+
var Wrapper$8 = styled.a(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: 500;\n font-style: normal;\n text-decoration: 'none';\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: 0px;\n padding: 0px;\n box-sizing: border-box;\n cursor: pointer;\n"], ["\n color: ", ";\n font-size: ", ";\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: 500;\n font-style: normal;\n text-decoration: 'none';\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n margin: 0px;\n padding: 0px;\n box-sizing: border-box;\n cursor: pointer;\n"])), Colors.PRIMARY.Hex, function (props) { return (props.$small ? FontSizes.SMALL : FontSizes.DEFAULT); }, function (props) { return (props.$small ? '1.5em' : '1.6em'); }, function (props) { return (props.$small ? '1px' : '0px'); });
|
|
2932
|
+
var Link = function (_a) {
|
|
2933
|
+
var children = _a.children, onClick = _a.onClick, small = _a.small, accessibleProps = __rest(_a, ["children", "onClick", "small"]);
|
|
2934
|
+
return (React.createElement(Wrapper$8, __assign({ "$small": small, onClick: onClick }, accessibleProps), children));
|
|
2935
|
+
};
|
|
2936
|
+
var templateObject_1$a;
|
|
2921
2937
|
|
|
2922
2938
|
var colorMapping = {
|
|
2923
2939
|
black: {
|
|
@@ -3027,20 +3043,20 @@ var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTempl
|
|
|
3027
3043
|
}
|
|
3028
3044
|
}, function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); });
|
|
3029
3045
|
var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 2.9em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"], ["\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n line-height: 2.9em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n"])), Colors.BLACK.Hex, FontStyles.DEFAULT, FontSizes.DEFAULT);
|
|
3030
|
-
var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n background: #fff;\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index:
|
|
3031
|
-
var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index:
|
|
3046
|
+
var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n background: #fff;\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index: 10;\n"], ["\n background: #fff;\n border-color: ", ";\n border-radius: 0px 0px 4px 4px;\n border-style: solid;\n border-top: none;\n border-width: 1px;\n left: 0;\n position: absolute;\n right: 0;\n z-index: 10;\n"])), Colors.PRIMARY.Hex);
|
|
3047
|
+
var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9;\n"], ["\n bottom: 0;\n left: 0;\n position: fixed;\n right: 0;\n top: 0;\n z-index: 9;\n"])));
|
|
3032
3048
|
var MultiSelect = function (_a) {
|
|
3033
|
-
var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c,
|
|
3034
|
-
var
|
|
3049
|
+
var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.selected, selected = _d === void 0 ? [] : _d, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll"]);
|
|
3050
|
+
var _e = React.useState(false), showOptions = _e[0], setShowOptions = _e[1];
|
|
3035
3051
|
var selected_options = options.filter(function (o) { return selected.includes(o.value); });
|
|
3036
3052
|
return (React.createElement(Wrapper$5, null,
|
|
3037
3053
|
React.createElement(Trigger, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
|
|
3038
3054
|
React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
|
|
3039
3055
|
? selected_options.map(function (o) { return o.label || o.value; }).join(', ')
|
|
3040
|
-
: "".concat(
|
|
3041
|
-
React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiChevronDown, size: '22px' })),
|
|
3056
|
+
: "".concat(selected_options.length, " Selected")),
|
|
3057
|
+
React.createElement(Icon, { color: Colors.BLACK.Hex, path: showOptions ? js.mdiChevronUp : js.mdiChevronDown, size: '22px' })),
|
|
3042
3058
|
showOptions ? (React.createElement(Options, null,
|
|
3043
|
-
React.createElement(Checklist, {
|
|
3059
|
+
React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
|
|
3044
3060
|
showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
|
|
3045
3061
|
};
|
|
3046
3062
|
var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$1;
|
|
@@ -3190,6 +3206,7 @@ exports.Field = Field;
|
|
|
3190
3206
|
exports.FileUpload = FileUpload;
|
|
3191
3207
|
exports.Heading = Heading;
|
|
3192
3208
|
exports.Input = Input$1;
|
|
3209
|
+
exports.Link = Link;
|
|
3193
3210
|
exports.Logo = Logo;
|
|
3194
3211
|
exports.Modal = Modal;
|
|
3195
3212
|
exports.MoreMenu = MoreMenu;
|