@hexure/ui 1.6.7 → 1.6.9
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 +48 -24
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/DatePicker/DatePicker.d.ts +5 -0
- package/dist/cjs/types/components/Input/Input.d.ts +4 -0
- package/dist/cjs/types/components/Modal/Modal.d.ts +8 -1
- package/dist/cjs/types/components/MultiSelect/MultiSelect.d.ts +4 -0
- package/dist/cjs/types/components/Select/Select.d.ts +2 -4
- package/dist/esm/index.js +48 -24
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/DatePicker/DatePicker.d.ts +5 -0
- package/dist/esm/types/components/Input/Input.d.ts +4 -0
- package/dist/esm/types/components/Modal/Modal.d.ts +8 -1
- package/dist/esm/types/components/MultiSelect/MultiSelect.d.ts +4 -0
- package/dist/esm/types/components/Select/Select.d.ts +2 -4
- package/dist/index.d.ts +27 -5
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2207,7 +2207,7 @@ var Selected = styled.span(templateObject_4$8 || (templateObject_4$8 = __makeTem
|
|
|
2207
2207
|
var Clear = styled.span(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"], ["\n font-size: 14px;\n font-weight: 400;\n font-family: ", ";\n color: ", ";\n line-height: 1;\n cursor: pointer;\n padding-left: 10px;\n margin-left: 10px;\n border-left: 1px solid #ccc;\n"])), FontStyles.DEFAULT, Colors.PRIMARY.Hex);
|
|
2208
2208
|
var Actions = styled.div(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n column-gap: 10px;\n"])));
|
|
2209
2209
|
var Error$1 = styled.div(templateObject_7$2 || (templateObject_7$2 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n background: rgba(", ", 0.1);\n border-radius: 4px;\n padding: 6px 8px;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n margin-left: 30px;\n"])), Colors.RED.Rgb);
|
|
2210
|
-
var ErrorMsg = styled.span(templateObject_8$
|
|
2210
|
+
var ErrorMsg = styled.span(templateObject_8$2 || (templateObject_8$2 = __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);
|
|
2211
2211
|
var BulkActionBar = function (_a) {
|
|
2212
2212
|
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"]);
|
|
2213
2213
|
return (React.createElement(Wrapper$d, __assign({}, accessibleProps),
|
|
@@ -2222,7 +2222,7 @@ var BulkActionBar = function (_a) {
|
|
|
2222
2222
|
React.createElement(Icon, { color: Colors.RED.Hex, path: js.mdiInformationOutline, size: '20px' }),
|
|
2223
2223
|
React.createElement(ErrorMsg, null, errorMsg))) : null));
|
|
2224
2224
|
};
|
|
2225
|
-
var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$
|
|
2225
|
+
var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$2;
|
|
2226
2226
|
|
|
2227
2227
|
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);
|
|
2228
2228
|
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"])));
|
|
@@ -2593,12 +2593,15 @@ var dayjs_min = {exports: {}};
|
|
|
2593
2593
|
var dayjs_minExports = dayjs_min.exports;
|
|
2594
2594
|
var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
|
|
2595
2595
|
|
|
2596
|
-
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) {
|
|
2596
|
+
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 width: ", ";\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 width: ", ";\n"])), function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); }, function (props) { return (props.$invalid ? Colors.RED.Hex : '#cccccc'); }, function (_a) {
|
|
2597
2597
|
var $style = _a.$style;
|
|
2598
2598
|
return ($style === null || $style === void 0 ? void 0 : $style.borderRadius) || '4px';
|
|
2599
2599
|
}, function (_a) {
|
|
2600
2600
|
var $style = _a.$style;
|
|
2601
2601
|
return ($style === null || $style === void 0 ? void 0 : $style.flexGrow) || 0;
|
|
2602
|
+
}, function (_a) {
|
|
2603
|
+
var $style = _a.$style;
|
|
2604
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2602
2605
|
});
|
|
2603
2606
|
var Trigger$1 = styled.select(templateObject_2$e || (templateObject_2$e = __makeTemplateObject(["\n appearance: none;\n box-shadow: none;\n outline: none;\n border: none;\n color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 2.9em;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 30px 0px 10px;\n box-sizing: border-box;\n position: relative;\n z-index: 2;\n"], ["\n appearance: none;\n box-shadow: none;\n outline: none;\n border: none;\n color: ", ";\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 2.9em;\n background-color: transparent;\n background-image: none;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 30px 0px 10px;\n box-sizing: border-box;\n position: relative;\n z-index: 2;\n"])), Colors.BLACK.Hex, FontSizes.DEFAULT, FontStyles.DEFAULT);
|
|
2604
2607
|
var IconWrapper$2 = styled(Icon)(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n position: absolute;\n right: 9px;\n z-index: 1;\n"], ["\n position: absolute;\n right: 9px;\n z-index: 1;\n"])));
|
|
@@ -2621,10 +2624,13 @@ var Select = function (_a) {
|
|
|
2621
2624
|
};
|
|
2622
2625
|
var templateObject_1$g, templateObject_2$e, templateObject_3$c;
|
|
2623
2626
|
|
|
2624
|
-
var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])))
|
|
2625
|
-
var
|
|
2627
|
+
var DatePickerWrapper = styled.div(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n display: flex;\n width: ", ";\n"], ["\n display: flex;\n width: ", ";\n"])), function (_a) {
|
|
2628
|
+
var $style = _a.$style;
|
|
2629
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2630
|
+
});
|
|
2631
|
+
var Middle = styled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n margin: 0px -1px;\n flex-grow: 1;\n"], ["\n margin: 0px -1px;\n flex-grow: 1;\n"])));
|
|
2626
2632
|
var DatePicker = function (_a) {
|
|
2627
|
-
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;
|
|
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, style = _a.style;
|
|
2628
2634
|
var dMaxDate = maxDate ? dayjs(maxDate) : dayjs();
|
|
2629
2635
|
var dMinDate = minDate ? dayjs(minDate) : dMaxDate.subtract(100, 'year');
|
|
2630
2636
|
var _f = React.useState(dayjs(date)), dDate = _f[0], setDate = _f[1];
|
|
@@ -2676,11 +2682,11 @@ var DatePicker = function (_a) {
|
|
|
2676
2682
|
setDate(new_date);
|
|
2677
2683
|
};
|
|
2678
2684
|
return (React.createElement(React.Fragment, null,
|
|
2679
|
-
React.createElement(DatePickerWrapper,
|
|
2680
|
-
React.createElement(Select, { invalid: invalid, onChange: handleMonthChange, options: months, readOnly: readOnly, style: { borderRadius: '4px 0px 0px 4px' }, value: dDate.format('M') }),
|
|
2685
|
+
React.createElement(DatePickerWrapper, { "$style": style },
|
|
2686
|
+
React.createElement(Select, { invalid: invalid, onChange: handleMonthChange, options: months, readOnly: readOnly, style: { borderRadius: '4px 0px 0px 4px', flexGrow: 3 }, value: dDate.format('M') }),
|
|
2681
2687
|
React.createElement(Middle, null,
|
|
2682
2688
|
React.createElement(Select, { invalid: invalid, onChange: handleDayChange, options: dayOptions, readOnly: readOnly, style: { borderRadius: '0px' }, value: dDate.format('D') })),
|
|
2683
|
-
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px' }, value: dDate.format('YYYY') }))));
|
|
2689
|
+
React.createElement(Select, { invalid: invalid, onChange: handleYearChange, options: years, readOnly: readOnly, style: { borderRadius: '0px 4px 4px 0px', flexGrow: 2 }, value: dDate.format('YYYY') }))));
|
|
2684
2690
|
};
|
|
2685
2691
|
var templateObject_1$f, templateObject_2$d;
|
|
2686
2692
|
|
|
@@ -2780,7 +2786,7 @@ var CopyWrapper = styled.div(templateObject_5$3 || (templateObject_5$3 = __makeT
|
|
|
2780
2786
|
});
|
|
2781
2787
|
var IconWrapper$1 = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n cursor: pointer;\n"], ["\n cursor: pointer;\n"])));
|
|
2782
2788
|
var ProgressBar = styled.div(templateObject_7$1 || (templateObject_7$1 = __makeTemplateObject(["\n width: 100px;\n height: 14px;\n border-radius: 4px;\n background: #f5f5f5;\n overflow-x: hidden;\n"], ["\n width: 100px;\n height: 14px;\n border-radius: 4px;\n background: #f5f5f5;\n overflow-x: hidden;\n"])));
|
|
2783
|
-
var Progress = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"], ["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"])), function (_a) {
|
|
2789
|
+
var Progress = styled.div(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"], ["\n width: ", ";\n height: 100%;\n border-radius: 4px 0px 0px 4px;\n background: ", ";\n"])), function (_a) {
|
|
2784
2790
|
var $width = _a.$width;
|
|
2785
2791
|
return "".concat($width, "%");
|
|
2786
2792
|
}, Colors.GREEN.Hex);
|
|
@@ -2855,7 +2861,7 @@ var FileUpload = function (_a) {
|
|
|
2855
2861
|
React.createElement(Copy, { align: 'center', children: 'Drag & drop files here or click to choose', type: 'bold' }),
|
|
2856
2862
|
React.createElement(Copy, { align: 'center', children: "".concat(maxFileSize, " MB max file size"), color: 'GRAY' }))))));
|
|
2857
2863
|
};
|
|
2858
|
-
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8;
|
|
2864
|
+
var templateObject_1$c, templateObject_2$a, templateObject_3$9, templateObject_4$5, templateObject_5$3, templateObject_6$1, templateObject_7$1, templateObject_8$1;
|
|
2859
2865
|
|
|
2860
2866
|
var formatAsPhone = function (number) {
|
|
2861
2867
|
var formatted_value = "".concat(number).replace(/[^0-9.]/g, '');
|
|
@@ -2886,10 +2892,16 @@ var formatAsSsn = function (number) {
|
|
|
2886
2892
|
|
|
2887
2893
|
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); });
|
|
2888
2894
|
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);
|
|
2889
|
-
var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])))
|
|
2890
|
-
var
|
|
2895
|
+
var StyledWrapper = styled.div(templateObject_3$8 || (templateObject_3$8 = __makeTemplateObject(["\n display: flex;\n width: ", ";\n"], ["\n display: flex;\n width: ", ";\n"])), function (_a) {
|
|
2896
|
+
var $style = _a.$style;
|
|
2897
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2898
|
+
});
|
|
2899
|
+
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: ", ";\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: ", ";\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 (_a) {
|
|
2900
|
+
var $style = _a.$style;
|
|
2901
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
2902
|
+
}, function (props) { return (props.$readOnly ? '#cccccc' : Colors.PRIMARY.Hex); });
|
|
2891
2903
|
var Input$1 = function (_a) {
|
|
2892
|
-
var format = _a.format, suffix = _a.suffix, height = _a.height, invalid = _a.invalid, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, placeholder = _a.placeholder, readOnly = _a.readOnly, step = _a.step, _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "type", "value"]);
|
|
2904
|
+
var format = _a.format, suffix = _a.suffix, height = _a.height, invalid = _a.invalid, max = _a.max, maxLength = _a.maxLength, min = _a.min, onBlur = _a.onBlur, onChange = _a.onChange, onKeyDown = _a.onKeyDown, placeholder = _a.placeholder, readOnly = _a.readOnly, step = _a.step, style = _a.style, _b = _a.type, type = _b === void 0 ? 'text' : _b, _c = _a.value, value = _c === void 0 ? '' : _c, accessibleProps = __rest(_a, ["format", "suffix", "height", "invalid", "max", "maxLength", "min", "onBlur", "onChange", "onKeyDown", "placeholder", "readOnly", "step", "style", "type", "value"]);
|
|
2893
2905
|
var handleInputChange = function (e) {
|
|
2894
2906
|
if (format === 'currency' || format === 'currency_decimal') {
|
|
2895
2907
|
e.target.value = e.target.value.replace(/[^0-9.]/g, '');
|
|
@@ -2928,7 +2940,7 @@ var Input$1 = function (_a) {
|
|
|
2928
2940
|
if (format === 'ssn' && type !== 'password') {
|
|
2929
2941
|
formatted_value = formatAsSsn(value);
|
|
2930
2942
|
}
|
|
2931
|
-
return type === 'textarea' ? (React.createElement(StyledTextarea, __assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper,
|
|
2943
|
+
return type === 'textarea' ? (React.createElement(StyledTextarea, __assign({ "$height": height, "$invalid": invalid, "$readOnly": readOnly, "$style": style, maxLength: maxLength, onBlur: onBlur, onChange: handleTextareaChange, placeholder: placeholder, value: value }, accessibleProps))) : (React.createElement(StyledWrapper, { "$style": style },
|
|
2932
2944
|
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)),
|
|
2933
2945
|
suffix && React.createElement(StyledSuffix, null, suffix)));
|
|
2934
2946
|
};
|
|
@@ -2985,13 +2997,17 @@ var Logo = function (_a) {
|
|
|
2985
2997
|
|
|
2986
2998
|
var Wrapper$7 = styled.div(templateObject_1$9 || (templateObject_1$9 = __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"], ["\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"])));
|
|
2987
2999
|
var Container$1 = styled.dialog(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n max-width: ", ";\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: 0px;\n box-sizing: border-box;\n"], ["\n max-width: ", ";\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: 0px;\n box-sizing: border-box;\n"])), function (props) { return props.$maxWidth || '90vw'; });
|
|
2988
|
-
var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #
|
|
3000
|
+
var Header$1 = styled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"], ["\n position: sticky;\n top: 0;\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n background: #ffffff;\n box-sizing: border-box;\n"])));
|
|
2989
3001
|
var Close = styled.div(templateObject_4$3 || (templateObject_4$3 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n padding-left: 20px;\n cursor: pointer;\n"])));
|
|
2990
3002
|
var CloseMsg = styled.span(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"], ["\n font-size: ", ";\n font-weight: 400;\n font-family: ", ";\n line-height: 1em;\n color: ", ";\n"])), FontSizes.SMALL, FontStyles.DEFAULT, Colors.MEDIUM_GRAY.Hex);
|
|
2991
|
-
var
|
|
2992
|
-
var
|
|
3003
|
+
var Steps = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n background: #f5f5f5;\n display: flex;\n gap: 30px;\n align-items: center;\n"], ["\n padding: 20px;\n border-bottom: 1px solid #e7e6e6;\n background: #f5f5f5;\n display: flex;\n gap: 30px;\n align-items: center;\n"])));
|
|
3004
|
+
var Step = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 8px;\n"], ["\n display: flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
3005
|
+
var StepIndicator = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n width: 30px;\n height: 30px;\n border-radius: 15px;\n background: ", ";\n color: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"], ["\n width: 30px;\n height: 30px;\n border-radius: 15px;\n background: ", ";\n color: ", ";\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n"])), function (props) { return (props.$active ? Colors.PRIMARY.Hex : Colors.LIGHT_GRAY.Hex); }, function (props) { return (props.$active ? '#fff' : Colors.MEDIUM_GRAY.Hex); });
|
|
3006
|
+
var StepLabel = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: #000;\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n"], ["\n color: #000;\n font-family: 'Roboto', Helvetica, Arial, sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n"])));
|
|
3007
|
+
var ContentWrapper = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"], ["\n overflow-x: hidden;\n overflow-y: auto;\n background: #ffffff;\n max-height: calc(100vh - 260px);\n box-sizing: border-box;\n"])));
|
|
3008
|
+
var ButtonBar = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"], ["\n position: sticky;\n bottom: 0;\n background: #ffffff;\n padding: 20px;\n border-top: 1px solid #e7e6e6;\n display: flex;\n align-items: center;\n justify-self: flex-end;\n box-sizing: border-box;\n"])));
|
|
2993
3009
|
var Modal = function (_a) {
|
|
2994
|
-
var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "primaryButton", "secondaryButton", "tertiaryButton"]);
|
|
3010
|
+
var children = _a.children, title = _a.title, onClose = _a.onClose, maxWidth = _a.maxWidth, steps = _a.steps, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, tertiaryButton = _a.tertiaryButton, accessibleProps = __rest(_a, ["children", "title", "onClose", "maxWidth", "steps", "primaryButton", "secondaryButton", "tertiaryButton"]);
|
|
2995
3011
|
React.useEffect(function () {
|
|
2996
3012
|
document.onkeydown = function (e) {
|
|
2997
3013
|
if (e.key === 'Escape') {
|
|
@@ -3009,6 +3025,11 @@ var Modal = function (_a) {
|
|
|
3009
3025
|
React.createElement(Close, { onClick: onClose },
|
|
3010
3026
|
React.createElement(CloseMsg, null, "(Esc)"),
|
|
3011
3027
|
React.createElement(Icon, { color: Colors.BLACK.Hex, path: js.mdiClose, size: '24px' }))),
|
|
3028
|
+
steps ? (React.createElement(Steps, null, steps.map(function (step, i) {
|
|
3029
|
+
return (React.createElement(Step, { key: i },
|
|
3030
|
+
step.complete ? (React.createElement(Icon, { color: Colors.PRIMARY.Hex, path: js.mdiCheckboxMarkedCircleOutline, size: '32px' })) : (React.createElement(StepIndicator, { "$active": step.active }, i + 1)),
|
|
3031
|
+
React.createElement(StepLabel, null, step.label)));
|
|
3032
|
+
}))) : null,
|
|
3012
3033
|
React.createElement(ContentWrapper, null, children),
|
|
3013
3034
|
primaryButton || secondaryButton || tertiaryButton ? (React.createElement(ButtonBar, null,
|
|
3014
3035
|
tertiaryButton ? React.createElement(Button, __assign({}, tertiaryButton, { format: 'secondary' })) : null,
|
|
@@ -3021,7 +3042,7 @@ var Modal = function (_a) {
|
|
|
3021
3042
|
secondaryButton ? React.createElement(Button, __assign({}, secondaryButton, { format: 'secondary' })) : null,
|
|
3022
3043
|
primaryButton ? (React.createElement(Button, __assign({}, primaryButton, { format: 'primary', margin: '0px 0px 0px 10px' }))) : null)) : null)) : null)));
|
|
3023
3044
|
};
|
|
3024
|
-
var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7;
|
|
3045
|
+
var templateObject_1$9, templateObject_2$8, templateObject_3$7, templateObject_4$3, templateObject_5$2, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
3025
3046
|
|
|
3026
3047
|
var Wrapper$6 = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n background: #fff;\n border-radius: 8px;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: ", ";\n padding: 10px;\n width: 200px;\n"], ["\n background: #fff;\n border-radius: 8px;\n box-shadow: 0px 10px 30px -15px rgba(0, 0, 0, 0.2);\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: ", ";\n padding: 10px;\n width: 200px;\n"])), function (props) { return props.$maxHeight || '312px'; });
|
|
3027
3048
|
var MenuItem = styled.div(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n }\n"], ["\n align-items: center;\n border-radius: 8px;\n border: 1px solid transparent;\n display: flex;\n gap: 8px;\n height: 38px;\n padding: 8px;\n &:hover {\n background: rgba(1, 147, 215, 0.1);\n cursor: pointer;\n }\n"])));
|
|
@@ -3036,8 +3057,11 @@ var MoreMenu = function (_a) {
|
|
|
3036
3057
|
};
|
|
3037
3058
|
var templateObject_1$8, templateObject_2$7, templateObject_3$6;
|
|
3038
3059
|
|
|
3039
|
-
var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])))
|
|
3040
|
-
var
|
|
3060
|
+
var Wrapper$5 = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n position: relative;\n width: ", ";\n"], ["\n position: relative;\n width: ", ";\n"])), function (_a) {
|
|
3061
|
+
var $style = _a.$style;
|
|
3062
|
+
return ($style === null || $style === void 0 ? void 0 : $style.width) || 'auto';
|
|
3063
|
+
});
|
|
3064
|
+
var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"], ["\n box-sizing: border-box;\n border-radius: ", ";\n height: 40px;\n padding: 0 10px;\n position: relative;\n cursor: pointer;\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n background-color: ", ";\n background-image: none;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: space-between;\n z-index: 1;\n"])), function (props) { return (props.$showOptions ? '4px 4px 0px 0px' : '4px'); }, function (props) {
|
|
3041
3065
|
if (props.$invalid) {
|
|
3042
3066
|
return Colors.RED.Hex;
|
|
3043
3067
|
}
|
|
@@ -3052,10 +3076,10 @@ var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplat
|
|
|
3052
3076
|
var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n background: #fff;\n box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\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 max-height: 220px;\n overflow: auto;\n"], ["\n background: #fff;\n box-shadow: 0px 5px 30px -15px rgba(0, 0, 0, 0.2);\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 max-height: 220px;\n overflow: auto;\n"])), Colors.PRIMARY.Hex);
|
|
3053
3077
|
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"])));
|
|
3054
3078
|
var MultiSelect = function (_a) {
|
|
3055
|
-
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"]);
|
|
3079
|
+
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, style = _a.style, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll", "style"]);
|
|
3056
3080
|
var _e = React.useState(false), showOptions = _e[0], setShowOptions = _e[1];
|
|
3057
3081
|
var selected_options = options.filter(function (o) { return selected.includes(o.value); });
|
|
3058
|
-
return (React.createElement(Wrapper$5,
|
|
3082
|
+
return (React.createElement(Wrapper$5, { "$style": style },
|
|
3059
3083
|
React.createElement(Trigger, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
|
|
3060
3084
|
React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
|
|
3061
3085
|
? selected_options.map(function (o) { return o.label || o.value; }).join(', ')
|