@cerebruminc/cerebellum 13.3.0 → 13.4.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/lib/cjs/Form.cjs +2 -2
- package/lib/cjs/{FormikContainer-d27ecf3e.js → FormikContainer-ed00a147.js} +2 -2
- package/lib/cjs/{FormikContainer-d27ecf3e.js.map → FormikContainer-ed00a147.js.map} +1 -1
- package/lib/cjs/{ImagePicker-be368538.js → ImagePicker-454ad23d.js} +30 -18
- package/lib/cjs/{ImagePicker-be368538.js.map → ImagePicker-454ad23d.js.map} +1 -1
- package/lib/cjs/ImagePicker.cjs +3 -1
- package/lib/cjs/ImagePicker.cjs.map +1 -1
- package/lib/cjs/index.cjs +2 -2
- package/lib/esm/Form.js +2 -2
- package/lib/esm/{FormikContainer-68671cc3.js → FormikContainer-972cb7b5.js} +2 -2
- package/lib/esm/{FormikContainer-68671cc3.js.map → FormikContainer-972cb7b5.js.map} +1 -1
- package/lib/esm/{ImagePicker-c05f7f8d.js → ImagePicker-5b68b937.js} +31 -19
- package/lib/esm/{ImagePicker-c05f7f8d.js.map → ImagePicker-5b68b937.js.map} +1 -1
- package/lib/esm/ImagePicker.js +3 -1
- package/lib/esm/ImagePicker.js.map +1 -1
- package/lib/esm/index.js +2 -2
- package/lib/types/src/components/ImagePicker/ImagePickerStyles.d.ts +1 -0
- package/lib/types/src/components/ImagePicker/types.d.ts +5 -1
- package/package.json +1 -1
package/lib/cjs/Form.cjs
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var FormWrapper = require('./FormStyles-0c0f28e0.js');
|
|
6
|
-
var FormikContainer = require('./FormikContainer-
|
|
6
|
+
var FormikContainer = require('./FormikContainer-ed00a147.js');
|
|
7
7
|
var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
|
|
8
8
|
require('./_tslib-955e611e.js');
|
|
9
9
|
require('styled-components');
|
|
@@ -106,7 +106,7 @@ require('./DescriptiveDropdownInput-0b5f7b1f.js');
|
|
|
106
106
|
require('./EmailInput-ee2e8ac8.js');
|
|
107
107
|
require('./InlineEmailInput-78e3cce8.js');
|
|
108
108
|
require('./Email.cjs');
|
|
109
|
-
require('./ImagePicker-
|
|
109
|
+
require('./ImagePicker-454ad23d.js');
|
|
110
110
|
require('./Delete-32a19298.js');
|
|
111
111
|
require('./Edit.cjs');
|
|
112
112
|
require('./Toast-0d6d285e.js');
|
|
@@ -42,7 +42,7 @@ var SwitchTypeEnum = require('./SwitchTypeEnum.cjs');
|
|
|
42
42
|
var DescriptiveDropdownInput = require('./DescriptiveDropdownInput-0b5f7b1f.js');
|
|
43
43
|
var EmailInput = require('./EmailInput-ee2e8ac8.js');
|
|
44
44
|
var InlineEmailInput = require('./InlineEmailInput-78e3cce8.js');
|
|
45
|
-
var ImagePicker = require('./ImagePicker-
|
|
45
|
+
var ImagePicker = require('./ImagePicker-454ad23d.js');
|
|
46
46
|
var MultiSelect = require('./MultiSelect-062af0bf.js');
|
|
47
47
|
var InlineInput = require('./InlineInput-ffaab44c.js');
|
|
48
48
|
var Input = require('./Input-9cf5b719.js');
|
|
@@ -1295,4 +1295,4 @@ FormikContainer.defaultProps = {
|
|
|
1295
1295
|
};
|
|
1296
1296
|
|
|
1297
1297
|
exports.FormikContainer = FormikContainer;
|
|
1298
|
-
//# sourceMappingURL=FormikContainer-
|
|
1298
|
+
//# sourceMappingURL=FormikContainer-ed00a147.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormikContainer-
|
|
1
|
+
{"version":3,"file":"FormikContainer-ed00a147.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -22,6 +22,8 @@ var ButtonVariantEnum = require('./ButtonVariantEnum.cjs');
|
|
|
22
22
|
var IconButton = require('./IconButton-99b9f2dd.js');
|
|
23
23
|
var helpers = require('./helpers-b07f14f3.js');
|
|
24
24
|
var BodyLEmphasis = require('./BodyLEmphasis.cjs');
|
|
25
|
+
var Loading = require('./Loading.cjs');
|
|
26
|
+
require('./Scroller.cjs');
|
|
25
27
|
var focusAfter = require('./focusAfter.cjs');
|
|
26
28
|
|
|
27
29
|
var Base = styled.styled.div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n width: ", "px;\n"], ["\n position: relative;\n width: ", "px;\n"])), function (_a) {
|
|
@@ -61,15 +63,25 @@ var ImageInput = styled.styled.input(templateObject_3 || (templateObject_3 = _ts
|
|
|
61
63
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
62
64
|
return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size) - 2;
|
|
63
65
|
});
|
|
64
|
-
var
|
|
66
|
+
var ImageInputLoading = styled.styled.div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n border-radius: ", "px;\n display: block;\n position: relative;\n height: ", "px;\n width: ", "px;\n z-index: -1;\n ", "\n"], ["\n border-radius: ", "px;\n display: block;\n position: relative;\n height: ", "px;\n width: ", "px;\n z-index: -1;\n ", "\n"])), function (_a) {
|
|
67
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
68
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) || theme.imagePicker.borderRadius;
|
|
69
|
+
}, function (_a) {
|
|
70
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
71
|
+
return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.height) || theme.imagePicker.size) - 2;
|
|
72
|
+
}, function (_a) {
|
|
73
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
74
|
+
return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size) - 2;
|
|
75
|
+
}, Loading.loadingPseudo({}));
|
|
76
|
+
var CenterImage = styled.styled.div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n ", ";\n border-radius: ", "px;\n display: flex;\n overflow: hidden;\n padding: ", "px;\n pointer-events: none;\n"], ["\n ", ";\n border-radius: ", "px;\n display: flex;\n overflow: hidden;\n padding: ", "px;\n pointer-events: none;\n"])), focusAfter.absoluteFill({}), function (_a) {
|
|
65
77
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
66
78
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) || theme.imagePicker.borderRadius - 1;
|
|
67
79
|
}, function (_a) {
|
|
68
80
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
69
81
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.imagePadding) || theme.imagePicker.imagePadding;
|
|
70
82
|
});
|
|
71
|
-
var LoadedImage = styled.styled.img(
|
|
72
|
-
var PlaceholderCircle = styled.styled.div(
|
|
83
|
+
var LoadedImage = styled.styled.img(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n margin: auto;\n max-height: 100%;\n max-width: 100%;\n"], ["\n margin: auto;\n max-height: 100%;\n max-width: 100%;\n"])));
|
|
84
|
+
var PlaceholderCircle = styled.styled.div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n display: flex;\n height: ", "px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", "px;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n display: flex;\n height: ", "px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", "px;\n"])), function (_a) {
|
|
73
85
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
74
86
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.placeholderCircleColor) || theme.imagePicker.placeholderCircleColor;
|
|
75
87
|
}, function (_a) {
|
|
@@ -79,14 +91,14 @@ var PlaceholderCircle = styled.styled.div(templateObject_6 || (templateObject_6
|
|
|
79
91
|
var $shortestDimension = _a.$shortestDimension, theme = _a.theme;
|
|
80
92
|
return ($shortestDimension || theme.imagePicker.size) / 2;
|
|
81
93
|
});
|
|
82
|
-
var PlaceholderInitials = styled.styled(BodyLEmphasis.HeadingH2)(
|
|
94
|
+
var PlaceholderInitials = styled.styled(BodyLEmphasis.HeadingH2)(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n color: ", ";\n font-size: ", "px;\n margin: auto;\n position: relative;\n text-align: center;\n top: 1px;\n"], ["\n color: ", ";\n font-size: ", "px;\n margin: auto;\n position: relative;\n text-align: center;\n top: 1px;\n"])), function (_a) {
|
|
83
95
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
84
96
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.placeholderTextColor) || theme.imagePicker.placeholderTextColor;
|
|
85
97
|
}, function (_a) {
|
|
86
98
|
var $shortestDimension = _a.$shortestDimension, theme = _a.theme;
|
|
87
99
|
return ($shortestDimension || theme.imagePicker.size) / 6;
|
|
88
100
|
});
|
|
89
|
-
var EditIconBox = styled.styled.div(
|
|
101
|
+
var EditIconBox = styled.styled.div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n bottom: -6px;\n padding: 9px;\n position: absolute;\n height: ", "px;\n right: -6px;\n width: ", "px;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n bottom: -6px;\n padding: 9px;\n position: absolute;\n height: ", "px;\n right: -6px;\n width: ", "px;\n"])), function (_a) {
|
|
90
102
|
var $bgColor = _a.$bgColor;
|
|
91
103
|
return $bgColor;
|
|
92
104
|
}, function (_a) {
|
|
@@ -96,36 +108,36 @@ var EditIconBox = styled.styled.div(templateObject_8 || (templateObject_8 = _tsl
|
|
|
96
108
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
97
109
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.iconSize) || theme.imagePicker.iconSize;
|
|
98
110
|
});
|
|
99
|
-
var DeleteIconBox = styled.styled.div(
|
|
111
|
+
var DeleteIconBox = styled.styled.div(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n bottom: -6px;\n position: absolute;\n height: ", "px;\n right: -6px;\n width: ", "px;\n z-index: 2;\n"], ["\n bottom: -6px;\n position: absolute;\n height: ", "px;\n right: -6px;\n width: ", "px;\n z-index: 2;\n"])), function (_a) {
|
|
100
112
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
101
113
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.iconSize) || theme.imagePicker.iconSize;
|
|
102
114
|
}, function (_a) {
|
|
103
115
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
104
116
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.iconSize) || theme.imagePicker.iconSize;
|
|
105
117
|
});
|
|
106
|
-
var CenterGrid = styled.styled.div(
|
|
118
|
+
var CenterGrid = styled.styled.div(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-flow: column nowrap;\n gap: ", "%;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-flow: column nowrap;\n gap: ", "%;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n"])), function (_a) {
|
|
107
119
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
108
120
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.actionButtonGap) || theme.imagePicker.actionButtonGap;
|
|
109
121
|
});
|
|
110
|
-
var PlaceholderIconBox = styled.styled.div(
|
|
122
|
+
var PlaceholderIconBox = styled.styled.div(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n display: flex;\n pointer-events: none;\n height: ", "px;\n width: ", "px;\n"], ["\n display: flex;\n pointer-events: none;\n height: ", "px;\n width: ", "px;\n"])), function (_a) {
|
|
111
123
|
var $themeOverride = _a.$themeOverride, $shortestDimension = _a.$shortestDimension;
|
|
112
124
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.placeholderIconHeight) || $shortestDimension * 0.58;
|
|
113
125
|
}, function (_a) {
|
|
114
126
|
var $themeOverride = _a.$themeOverride, $shortestDimension = _a.$shortestDimension;
|
|
115
127
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.placeholderIconWidth) || $shortestDimension * 0.58;
|
|
116
128
|
});
|
|
117
|
-
var ActionTextBox = styled.styled.div(
|
|
118
|
-
var FakeTextLink = styled.styled.span(
|
|
129
|
+
var ActionTextBox = styled.styled.div(templateObject_13 || (templateObject_13 = _tslib.__makeTemplateObject(["\n display: grid;\n place-items: center;\n pointer-events: none;\n"], ["\n display: grid;\n place-items: center;\n pointer-events: none;\n"])));
|
|
130
|
+
var FakeTextLink = styled.styled.span(templateObject_14 || (templateObject_14 = _tslib.__makeTemplateObject(["\n border-bottom: 1px solid ", ";\n color: ", ";\n padding-bottom: 4px;\n"], ["\n border-bottom: 1px solid ", ";\n color: ", ";\n padding-bottom: 4px;\n"])), function (_a) {
|
|
119
131
|
var $themeOverride = _a.$themeOverride;
|
|
120
132
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.actionTextColor) || colors.colors.BLUE_100;
|
|
121
133
|
}, function (_a) {
|
|
122
134
|
var $themeOverride = _a.$themeOverride;
|
|
123
135
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.actionTextColor) || colors.colors.BLUE_100;
|
|
124
136
|
});
|
|
125
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
137
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
|
|
126
138
|
|
|
127
139
|
var ImagePicker = function (_a) {
|
|
128
|
-
var _b = _a.actionButtonVariant, actionButtonVariant = _b === void 0 ? ButtonVariantEnum.ButtonVariantEnum.Text : _b, actionText = _a.actionText, deleteButton = _a.deleteButton, disabled = _a.disabled, _c = _a.editButtonColorFamily, editButtonColorFamily = _c === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Blue : _c, editButtonColorFamilyOverride = _a.editButtonColorFamilyOverride, _d = _a.deleteButtonColorFamily, deleteButtonColorFamily = _d === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Red : _d, deleteButtonColorFamilyOverride = _a.deleteButtonColorFamilyOverride, helperText = _a.helperText, hideIcon = _a.hideIcon, imageLabel = _a.imageLabel, inline = _a.inline, PlaceholderIcon = _a.PlaceholderIcon, placeholderImageUrl = _a.placeholderImageUrl, _e = _a.placeholderInitials, placeholderInitials = _e === void 0 ? "" : _e, name = _a.name, onChange = _a.onChange, onDeleteButtonClick = _a.onDeleteButtonClick, required = _a.required, _f = _a.showValidationMessage, showValidationMessage = _f === void 0 ? false : _f, sizeLimitKB = _a.sizeLimitKB, themeOverride = _a.themeOverride, validationMessage = _a.validationMessage;
|
|
140
|
+
var _b = _a.actionButtonVariant, actionButtonVariant = _b === void 0 ? ButtonVariantEnum.ButtonVariantEnum.Text : _b, actionText = _a.actionText, deleteButton = _a.deleteButton, disabled = _a.disabled, _c = _a.editButtonColorFamily, editButtonColorFamily = _c === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Blue : _c, editButtonColorFamilyOverride = _a.editButtonColorFamilyOverride, _d = _a.deleteButtonColorFamily, deleteButtonColorFamily = _d === void 0 ? ButtonColorFamilyEnum.ButtonColorFamilyEnum.Red : _d, deleteButtonColorFamilyOverride = _a.deleteButtonColorFamilyOverride, helperText = _a.helperText, hideIcon = _a.hideIcon, imageLabel = _a.imageLabel, inline = _a.inline, PlaceholderIcon = _a.PlaceholderIcon, placeholderImageUrl = _a.placeholderImageUrl, _e = _a.placeholderInitials, placeholderInitials = _e === void 0 ? "" : _e, name = _a.name, onChange = _a.onChange, onDeleteButtonClick = _a.onDeleteButtonClick, required = _a.required, _f = _a.showValidationMessage, showValidationMessage = _f === void 0 ? false : _f, sizeLimitKB = _a.sizeLimitKB, themeOverride = _a.themeOverride, validationMessage = _a.validationMessage, innerRef = _a.innerRef, loading = _a.loading;
|
|
129
141
|
var theme = styled.useTheme();
|
|
130
142
|
var colorFamilies = theme.colorFamilies;
|
|
131
143
|
var disabledColor = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor) || theme.imagePicker.disabledColor;
|
|
@@ -212,7 +224,7 @@ var ImagePicker = function (_a) {
|
|
|
212
224
|
}
|
|
213
225
|
}, [inputGroupMeasure.width, showValidationMessage, imageLabel, validationMessage]);
|
|
214
226
|
// Clear input
|
|
215
|
-
var inputRef = React.useRef(null);
|
|
227
|
+
var inputRef = innerRef || React.useRef(null);
|
|
216
228
|
var clearInput = function () {
|
|
217
229
|
if (inputRef.current) {
|
|
218
230
|
inputRef.current.value = "";
|
|
@@ -233,10 +245,10 @@ var ImagePicker = function (_a) {
|
|
|
233
245
|
labelColor: labelColor,
|
|
234
246
|
htmlFor: "".concat(imageLabel, "_imagePicker"),
|
|
235
247
|
removePaddingRight: required,
|
|
236
|
-
}), required && (jsxRuntime.jsx(Inputs.Asterisk, _tslib.__assign({ "aria-label": "Required", "$asteriskColor": asteriskColor }, { children: "*" }), void 0))] }), void 0)), jsxRuntime.jsxs(PickerBox, _tslib.__assign({ "$disabled": disabled, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride }, { children: [jsxRuntime.jsx(ImageInput, _tslib.__assign({ ref: inputRef }, (imageLabel ? { id: "".concat(imageLabel, "_imagePicker") } : {}), { accept: "image/*", disabled: disabled, onChange: function (event) {
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
248
|
+
}), required && (jsxRuntime.jsx(Inputs.Asterisk, _tslib.__assign({ "aria-label": "Required", "$asteriskColor": asteriskColor }, { children: "*" }), void 0))] }), void 0)), jsxRuntime.jsxs(PickerBox, _tslib.__assign({ "$disabled": disabled, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride }, { children: [loading ? (jsxRuntime.jsx(ImageInputLoading, { "$themeOverride": themeOverride }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ImageInput, _tslib.__assign({ ref: inputRef }, (imageLabel ? { id: "".concat(imageLabel, "_imagePicker") } : {}), { accept: "image/*", disabled: disabled, onChange: function (event) {
|
|
249
|
+
readURI(event);
|
|
250
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
251
|
+
}, name: name, required: required, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride, type: "file" }), void 0), tempFile ? (jsxRuntime.jsx(CenterImage, _tslib.__assign({ "$themeOverride": themeOverride }, { children: jsxRuntime.jsx(LoadedImage, { src: tempFile }, void 0) }), void 0)) : placeholder ? (jsxRuntime.jsx(CenterImage, _tslib.__assign({ "$themeOverride": themeOverride }, { children: jsxRuntime.jsx(LoadedImage, { src: placeholder, "data-testid": "placeholderImage" }, void 0) }), void 0)) : placeholderInitials ? (jsxRuntime.jsx(PlaceholderCircle, _tslib.__assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: jsxRuntime.jsx(PlaceholderInitials, _tslib.__assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: formattedInitials }), void 0) }), void 0)) : PlaceholderIcon || actionText ? (jsxRuntime.jsxs(CenterGrid, _tslib.__assign({ "$themeOverride": themeOverride }, { children: [jsxRuntime.jsx(PlaceholderIconBox, _tslib.__assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: PlaceholderIcon && jsxRuntime.jsx(PlaceholderIcon, {}, void 0) }), void 0), actionText && (jsxRuntime.jsx(ActionTextBox, { children: actionButtonVariant === ButtonVariantEnum.ButtonVariantEnum.Text ? (jsxRuntime.jsx(FakeTextLink, _tslib.__assign({ "$themeOverride": themeOverride }, { children: actionText }), void 0)) : (jsxRuntime.jsx(SingleButton.SingleButton, { variant: actionButtonVariant, text: actionText, onClick: isEmptyObject.noop, clickable: false }, void 0)) }, void 0))] }), void 0)) : null] }, void 0)), !hideIcon && !deleteButton && (jsxRuntime.jsx(EditIconBox, _tslib.__assign({ "$themeOverride": themeOverride, "$bgColor": editIconColorGroup.light }, { children: jsxRuntime.jsx(Edit.Edit, { title: "editIcon", fill: editIconColorGroup.main }, void 0) }), void 0)), deleteButton && (jsxRuntime.jsx(DeleteIconBox, _tslib.__assign({ "$themeOverride": themeOverride }, { children: jsxRuntime.jsx(IconButton.IconButton, { Icon: Delete.Trash, colorFamily: deleteButtonColorFamily, colorFamilyOverride: deleteButtonColorFamilyOverride, preventClick: disabled, size: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.iconSize) || theme.imagePicker.iconSize, themeOverride: { backgroundColor: deleteIconColorGroup.light }, onClick: clearInput }, void 0) }), void 0))] }), void 0), !inline && validationMessage && (jsxRuntime.jsx(Inputs.ValidationText, _tslib.__assign({ ref: validationRef, "$showValidationMessage": showValidationMessage, "$disabled": disabled, "$failColor": failColor, "$disabledColor": disabledColor, "$designSwitch": designSwitch || !imageLabel }, { children: validationMessage }), void 0)), helperTextVisible && helperText && !inline && (jsxRuntime.jsx(Inputs.HelperText, _tslib.__assign({ "$disabled": disabled, "$helperTextColor": helperTextColor, "$disabledColor": disabledColor }, { children: helperText }), void 0))] }), void 0));
|
|
240
252
|
};
|
|
241
253
|
ImagePicker.defaultProps = {
|
|
242
254
|
editButtonColorFamily: ButtonColorFamilyEnum.ButtonColorFamilyEnum.Blue,
|
|
@@ -244,4 +256,4 @@ ImagePicker.defaultProps = {
|
|
|
244
256
|
};
|
|
245
257
|
|
|
246
258
|
exports.ImagePicker = ImagePicker;
|
|
247
|
-
//# sourceMappingURL=ImagePicker-
|
|
259
|
+
//# sourceMappingURL=ImagePicker-454ad23d.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePicker-
|
|
1
|
+
{"version":3,"file":"ImagePicker-454ad23d.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/lib/cjs/ImagePicker.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var ImagePicker = require('./ImagePicker-
|
|
5
|
+
var ImagePicker = require('./ImagePicker-454ad23d.js');
|
|
6
6
|
require('./_tslib-955e611e.js');
|
|
7
7
|
require('react/jsx-runtime');
|
|
8
8
|
require('react');
|
|
@@ -45,6 +45,8 @@ require('./SingleButton-6f14308b.js');
|
|
|
45
45
|
require('./IconButton-99b9f2dd.js');
|
|
46
46
|
require('./focusAfter.cjs');
|
|
47
47
|
require('./helpers-b07f14f3.js');
|
|
48
|
+
require('./Loading.cjs');
|
|
49
|
+
require('./Scroller.cjs');
|
|
48
50
|
|
|
49
51
|
|
|
50
52
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePicker.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImagePicker.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/lib/cjs/index.cjs
CHANGED
|
@@ -46,13 +46,13 @@ var helpers = require('./helpers-b07f14f3.js');
|
|
|
46
46
|
var DrawerDivider = require('./DrawerDivider-8f1e423f.js');
|
|
47
47
|
var EmailInput = require('./EmailInput-ee2e8ac8.js');
|
|
48
48
|
var Footer = require('./Footer.cjs');
|
|
49
|
-
var FormikContainer = require('./FormikContainer-
|
|
49
|
+
var FormikContainer = require('./FormikContainer-ed00a147.js');
|
|
50
50
|
var FormFieldTypeEnum = require('./FormFieldTypeEnum.cjs');
|
|
51
51
|
var FiltersBar = require('./FiltersBar-1c53d614.js');
|
|
52
52
|
var HorizontalTabMenu = require('./HorizontalTabMenu-55955f88.js');
|
|
53
53
|
var IconButton = require('./IconButton-99b9f2dd.js');
|
|
54
54
|
var IconTile = require('./IconTile-64cb919a.js');
|
|
55
|
-
var ImagePicker = require('./ImagePicker-
|
|
55
|
+
var ImagePicker = require('./ImagePicker-454ad23d.js');
|
|
56
56
|
var InlineCreditCardInput = require('./InlineCreditCardInput-673b3096.js');
|
|
57
57
|
var InlineCurrencyInput = require('./InlineCurrencyInput-1680f1a4.js');
|
|
58
58
|
var InlineEmailInput = require('./InlineEmailInput-78e3cce8.js');
|
package/lib/esm/Form.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { F as FormWrapper } from './FormStyles-bf01f03c.js';
|
|
2
|
-
export { F as Form } from './FormikContainer-
|
|
2
|
+
export { F as Form } from './FormikContainer-972cb7b5.js';
|
|
3
3
|
export { FormFieldTypeEnum, RemovableFieldTypeEnum, isAddress, isCheckbox, isCheckboxGroup, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode } from './FormFieldTypeEnum.js';
|
|
4
4
|
import './_tslib-1a4c929e.js';
|
|
5
5
|
import 'styled-components';
|
|
@@ -102,7 +102,7 @@ import './DescriptiveDropdownInput-1c8009a6.js';
|
|
|
102
102
|
import './EmailInput-3d43f7fe.js';
|
|
103
103
|
import './InlineEmailInput-b6c8b8b2.js';
|
|
104
104
|
import './Email.js';
|
|
105
|
-
import './ImagePicker-
|
|
105
|
+
import './ImagePicker-5b68b937.js';
|
|
106
106
|
import './Delete-717a8dd0.js';
|
|
107
107
|
import './Edit.js';
|
|
108
108
|
import './Toast-40d9f007.js';
|
|
@@ -40,7 +40,7 @@ import { SwitchTypeEnum } from './SwitchTypeEnum.js';
|
|
|
40
40
|
import { D as DescriptiveDropdownInput } from './DescriptiveDropdownInput-1c8009a6.js';
|
|
41
41
|
import { E as EmailInput } from './EmailInput-3d43f7fe.js';
|
|
42
42
|
import { I as InlineEmailInput } from './InlineEmailInput-b6c8b8b2.js';
|
|
43
|
-
import { I as ImagePicker } from './ImagePicker-
|
|
43
|
+
import { I as ImagePicker } from './ImagePicker-5b68b937.js';
|
|
44
44
|
import { M as MultiSelect } from './MultiSelect-fabde188.js';
|
|
45
45
|
import { I as InlineInput } from './InlineInput-6e99d8b3.js';
|
|
46
46
|
import { I as Input } from './Input-b6886dba.js';
|
|
@@ -1293,4 +1293,4 @@ FormikContainer.defaultProps = {
|
|
|
1293
1293
|
};
|
|
1294
1294
|
|
|
1295
1295
|
export { FormikContainer as F };
|
|
1296
|
-
//# sourceMappingURL=FormikContainer-
|
|
1296
|
+
//# sourceMappingURL=FormikContainer-972cb7b5.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormikContainer-
|
|
1
|
+
{"version":3,"file":"FormikContainer-972cb7b5.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { a as __makeTemplateObject, _ as __assign } from './_tslib-1a4c929e.js';
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { useState, useRef, useEffect } from 'react';
|
|
4
4
|
import { styled, useTheme } from 'styled-components';
|
|
5
5
|
import { colors } from './colors.js';
|
|
@@ -20,6 +20,8 @@ import { ButtonVariantEnum } from './ButtonVariantEnum.js';
|
|
|
20
20
|
import { I as IconButton } from './IconButton-3083ac19.js';
|
|
21
21
|
import { A as ASTERISK_OFFSET_SPACE } from './helpers-e2f33583.js';
|
|
22
22
|
import { HeadingH2 } from './BodyLEmphasis.js';
|
|
23
|
+
import { loadingPseudo } from './Loading.js';
|
|
24
|
+
import './Scroller.js';
|
|
23
25
|
import { focusAfter, absoluteFill } from './focusAfter.js';
|
|
24
26
|
|
|
25
27
|
var Base = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: ", "px;\n"], ["\n position: relative;\n width: ", "px;\n"])), function (_a) {
|
|
@@ -59,15 +61,25 @@ var ImageInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemp
|
|
|
59
61
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
60
62
|
return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size) - 2;
|
|
61
63
|
});
|
|
62
|
-
var
|
|
64
|
+
var ImageInputLoading = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n border-radius: ", "px;\n display: block;\n position: relative;\n height: ", "px;\n width: ", "px;\n z-index: -1;\n ", "\n"], ["\n border-radius: ", "px;\n display: block;\n position: relative;\n height: ", "px;\n width: ", "px;\n z-index: -1;\n ", "\n"])), function (_a) {
|
|
65
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
66
|
+
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) || theme.imagePicker.borderRadius;
|
|
67
|
+
}, function (_a) {
|
|
68
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
69
|
+
return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.height) || theme.imagePicker.size) - 2;
|
|
70
|
+
}, function (_a) {
|
|
71
|
+
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
72
|
+
return (($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.width) || theme.imagePicker.size) - 2;
|
|
73
|
+
}, loadingPseudo({}));
|
|
74
|
+
var CenterImage = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", ";\n border-radius: ", "px;\n display: flex;\n overflow: hidden;\n padding: ", "px;\n pointer-events: none;\n"], ["\n ", ";\n border-radius: ", "px;\n display: flex;\n overflow: hidden;\n padding: ", "px;\n pointer-events: none;\n"])), absoluteFill({}), function (_a) {
|
|
63
75
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
64
76
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.borderRadius) || theme.imagePicker.borderRadius - 1;
|
|
65
77
|
}, function (_a) {
|
|
66
78
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
67
79
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.imagePadding) || theme.imagePicker.imagePadding;
|
|
68
80
|
});
|
|
69
|
-
var LoadedImage = styled.img(
|
|
70
|
-
var PlaceholderCircle = styled.div(
|
|
81
|
+
var LoadedImage = styled.img(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n margin: auto;\n max-height: 100%;\n max-width: 100%;\n"], ["\n margin: auto;\n max-height: 100%;\n max-width: 100%;\n"])));
|
|
82
|
+
var PlaceholderCircle = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n display: flex;\n height: ", "px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", "px;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n display: flex;\n height: ", "px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: ", "px;\n"])), function (_a) {
|
|
71
83
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
72
84
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.placeholderCircleColor) || theme.imagePicker.placeholderCircleColor;
|
|
73
85
|
}, function (_a) {
|
|
@@ -77,14 +89,14 @@ var PlaceholderCircle = styled.div(templateObject_6 || (templateObject_6 = __mak
|
|
|
77
89
|
var $shortestDimension = _a.$shortestDimension, theme = _a.theme;
|
|
78
90
|
return ($shortestDimension || theme.imagePicker.size) / 2;
|
|
79
91
|
});
|
|
80
|
-
var PlaceholderInitials = styled(HeadingH2)(
|
|
92
|
+
var PlaceholderInitials = styled(HeadingH2)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n font-size: ", "px;\n margin: auto;\n position: relative;\n text-align: center;\n top: 1px;\n"], ["\n color: ", ";\n font-size: ", "px;\n margin: auto;\n position: relative;\n text-align: center;\n top: 1px;\n"])), function (_a) {
|
|
81
93
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
82
94
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.placeholderTextColor) || theme.imagePicker.placeholderTextColor;
|
|
83
95
|
}, function (_a) {
|
|
84
96
|
var $shortestDimension = _a.$shortestDimension, theme = _a.theme;
|
|
85
97
|
return ($shortestDimension || theme.imagePicker.size) / 6;
|
|
86
98
|
});
|
|
87
|
-
var EditIconBox = styled.div(
|
|
99
|
+
var EditIconBox = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 50%;\n bottom: -6px;\n padding: 9px;\n position: absolute;\n height: ", "px;\n right: -6px;\n width: ", "px;\n"], ["\n background-color: ", ";\n border-radius: 50%;\n bottom: -6px;\n padding: 9px;\n position: absolute;\n height: ", "px;\n right: -6px;\n width: ", "px;\n"])), function (_a) {
|
|
88
100
|
var $bgColor = _a.$bgColor;
|
|
89
101
|
return $bgColor;
|
|
90
102
|
}, function (_a) {
|
|
@@ -94,36 +106,36 @@ var EditIconBox = styled.div(templateObject_8 || (templateObject_8 = __makeTempl
|
|
|
94
106
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
95
107
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.iconSize) || theme.imagePicker.iconSize;
|
|
96
108
|
});
|
|
97
|
-
var DeleteIconBox = styled.div(
|
|
109
|
+
var DeleteIconBox = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n bottom: -6px;\n position: absolute;\n height: ", "px;\n right: -6px;\n width: ", "px;\n z-index: 2;\n"], ["\n bottom: -6px;\n position: absolute;\n height: ", "px;\n right: -6px;\n width: ", "px;\n z-index: 2;\n"])), function (_a) {
|
|
98
110
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
99
111
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.iconSize) || theme.imagePicker.iconSize;
|
|
100
112
|
}, function (_a) {
|
|
101
113
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
102
114
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.iconSize) || theme.imagePicker.iconSize;
|
|
103
115
|
});
|
|
104
|
-
var CenterGrid = styled.div(
|
|
116
|
+
var CenterGrid = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-flow: column nowrap;\n gap: ", "%;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n"], ["\n align-items: center;\n display: flex;\n flex-flow: column nowrap;\n gap: ", "%;\n height: 100%;\n justify-content: center;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n"])), function (_a) {
|
|
105
117
|
var $themeOverride = _a.$themeOverride, theme = _a.theme;
|
|
106
118
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.actionButtonGap) || theme.imagePicker.actionButtonGap;
|
|
107
119
|
});
|
|
108
|
-
var PlaceholderIconBox = styled.div(
|
|
120
|
+
var PlaceholderIconBox = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n pointer-events: none;\n height: ", "px;\n width: ", "px;\n"], ["\n display: flex;\n pointer-events: none;\n height: ", "px;\n width: ", "px;\n"])), function (_a) {
|
|
109
121
|
var $themeOverride = _a.$themeOverride, $shortestDimension = _a.$shortestDimension;
|
|
110
122
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.placeholderIconHeight) || $shortestDimension * 0.58;
|
|
111
123
|
}, function (_a) {
|
|
112
124
|
var $themeOverride = _a.$themeOverride, $shortestDimension = _a.$shortestDimension;
|
|
113
125
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.placeholderIconWidth) || $shortestDimension * 0.58;
|
|
114
126
|
});
|
|
115
|
-
var ActionTextBox = styled.div(
|
|
116
|
-
var FakeTextLink = styled.span(
|
|
127
|
+
var ActionTextBox = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: grid;\n place-items: center;\n pointer-events: none;\n"], ["\n display: grid;\n place-items: center;\n pointer-events: none;\n"])));
|
|
128
|
+
var FakeTextLink = styled.span(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n color: ", ";\n padding-bottom: 4px;\n"], ["\n border-bottom: 1px solid ", ";\n color: ", ";\n padding-bottom: 4px;\n"])), function (_a) {
|
|
117
129
|
var $themeOverride = _a.$themeOverride;
|
|
118
130
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.actionTextColor) || colors.BLUE_100;
|
|
119
131
|
}, function (_a) {
|
|
120
132
|
var $themeOverride = _a.$themeOverride;
|
|
121
133
|
return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.actionTextColor) || colors.BLUE_100;
|
|
122
134
|
});
|
|
123
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
|
|
135
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
|
|
124
136
|
|
|
125
137
|
var ImagePicker = function (_a) {
|
|
126
|
-
var _b = _a.actionButtonVariant, actionButtonVariant = _b === void 0 ? ButtonVariantEnum.Text : _b, actionText = _a.actionText, deleteButton = _a.deleteButton, disabled = _a.disabled, _c = _a.editButtonColorFamily, editButtonColorFamily = _c === void 0 ? ButtonColorFamilyEnum.Blue : _c, editButtonColorFamilyOverride = _a.editButtonColorFamilyOverride, _d = _a.deleteButtonColorFamily, deleteButtonColorFamily = _d === void 0 ? ButtonColorFamilyEnum.Red : _d, deleteButtonColorFamilyOverride = _a.deleteButtonColorFamilyOverride, helperText = _a.helperText, hideIcon = _a.hideIcon, imageLabel = _a.imageLabel, inline = _a.inline, PlaceholderIcon = _a.PlaceholderIcon, placeholderImageUrl = _a.placeholderImageUrl, _e = _a.placeholderInitials, placeholderInitials = _e === void 0 ? "" : _e, name = _a.name, onChange = _a.onChange, onDeleteButtonClick = _a.onDeleteButtonClick, required = _a.required, _f = _a.showValidationMessage, showValidationMessage = _f === void 0 ? false : _f, sizeLimitKB = _a.sizeLimitKB, themeOverride = _a.themeOverride, validationMessage = _a.validationMessage;
|
|
138
|
+
var _b = _a.actionButtonVariant, actionButtonVariant = _b === void 0 ? ButtonVariantEnum.Text : _b, actionText = _a.actionText, deleteButton = _a.deleteButton, disabled = _a.disabled, _c = _a.editButtonColorFamily, editButtonColorFamily = _c === void 0 ? ButtonColorFamilyEnum.Blue : _c, editButtonColorFamilyOverride = _a.editButtonColorFamilyOverride, _d = _a.deleteButtonColorFamily, deleteButtonColorFamily = _d === void 0 ? ButtonColorFamilyEnum.Red : _d, deleteButtonColorFamilyOverride = _a.deleteButtonColorFamilyOverride, helperText = _a.helperText, hideIcon = _a.hideIcon, imageLabel = _a.imageLabel, inline = _a.inline, PlaceholderIcon = _a.PlaceholderIcon, placeholderImageUrl = _a.placeholderImageUrl, _e = _a.placeholderInitials, placeholderInitials = _e === void 0 ? "" : _e, name = _a.name, onChange = _a.onChange, onDeleteButtonClick = _a.onDeleteButtonClick, required = _a.required, _f = _a.showValidationMessage, showValidationMessage = _f === void 0 ? false : _f, sizeLimitKB = _a.sizeLimitKB, themeOverride = _a.themeOverride, validationMessage = _a.validationMessage, innerRef = _a.innerRef, loading = _a.loading;
|
|
127
139
|
var theme = useTheme();
|
|
128
140
|
var colorFamilies = theme.colorFamilies;
|
|
129
141
|
var disabledColor = (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.disabledColor) || theme.imagePicker.disabledColor;
|
|
@@ -210,7 +222,7 @@ var ImagePicker = function (_a) {
|
|
|
210
222
|
}
|
|
211
223
|
}, [inputGroupMeasure.width, showValidationMessage, imageLabel, validationMessage]);
|
|
212
224
|
// Clear input
|
|
213
|
-
var inputRef = useRef(null);
|
|
225
|
+
var inputRef = innerRef || useRef(null);
|
|
214
226
|
var clearInput = function () {
|
|
215
227
|
if (inputRef.current) {
|
|
216
228
|
inputRef.current.value = "";
|
|
@@ -231,10 +243,10 @@ var ImagePicker = function (_a) {
|
|
|
231
243
|
labelColor: labelColor,
|
|
232
244
|
htmlFor: "".concat(imageLabel, "_imagePicker"),
|
|
233
245
|
removePaddingRight: required,
|
|
234
|
-
}), required && (jsx(Asterisk, __assign({ "aria-label": "Required", "$asteriskColor": asteriskColor }, { children: "*" }), void 0))] }), void 0)), jsxs(PickerBox, __assign({ "$disabled": disabled, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride }, { children: [jsx(ImageInput, __assign({ ref: inputRef }, (imageLabel ? { id: "".concat(imageLabel, "_imagePicker") } : {}), { accept: "image/*", disabled: disabled, onChange: function (event) {
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
246
|
+
}), required && (jsx(Asterisk, __assign({ "aria-label": "Required", "$asteriskColor": asteriskColor }, { children: "*" }), void 0))] }), void 0)), jsxs(PickerBox, __assign({ "$disabled": disabled, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride }, { children: [loading ? (jsx(ImageInputLoading, { "$themeOverride": themeOverride }, void 0)) : (jsxs(Fragment, { children: [jsx(ImageInput, __assign({ ref: inputRef }, (imageLabel ? { id: "".concat(imageLabel, "_imagePicker") } : {}), { accept: "image/*", disabled: disabled, onChange: function (event) {
|
|
247
|
+
readURI(event);
|
|
248
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event);
|
|
249
|
+
}, name: name, required: required, "$showValidationMessage": showValidationMessage, "$themeOverride": themeOverride, type: "file" }), void 0), tempFile ? (jsx(CenterImage, __assign({ "$themeOverride": themeOverride }, { children: jsx(LoadedImage, { src: tempFile }, void 0) }), void 0)) : placeholder ? (jsx(CenterImage, __assign({ "$themeOverride": themeOverride }, { children: jsx(LoadedImage, { src: placeholder, "data-testid": "placeholderImage" }, void 0) }), void 0)) : placeholderInitials ? (jsx(PlaceholderCircle, __assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: jsx(PlaceholderInitials, __assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: formattedInitials }), void 0) }), void 0)) : PlaceholderIcon || actionText ? (jsxs(CenterGrid, __assign({ "$themeOverride": themeOverride }, { children: [jsx(PlaceholderIconBox, __assign({ "$themeOverride": themeOverride, "$shortestDimension": shortestDimension }, { children: PlaceholderIcon && jsx(PlaceholderIcon, {}, void 0) }), void 0), actionText && (jsx(ActionTextBox, { children: actionButtonVariant === ButtonVariantEnum.Text ? (jsx(FakeTextLink, __assign({ "$themeOverride": themeOverride }, { children: actionText }), void 0)) : (jsx(SingleButton, { variant: actionButtonVariant, text: actionText, onClick: noop, clickable: false }, void 0)) }, void 0))] }), void 0)) : null] }, void 0)), !hideIcon && !deleteButton && (jsx(EditIconBox, __assign({ "$themeOverride": themeOverride, "$bgColor": editIconColorGroup.light }, { children: jsx(Edit, { title: "editIcon", fill: editIconColorGroup.main }, void 0) }), void 0)), deleteButton && (jsx(DeleteIconBox, __assign({ "$themeOverride": themeOverride }, { children: jsx(IconButton, { Icon: Trash, colorFamily: deleteButtonColorFamily, colorFamilyOverride: deleteButtonColorFamilyOverride, preventClick: disabled, size: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.iconSize) || theme.imagePicker.iconSize, themeOverride: { backgroundColor: deleteIconColorGroup.light }, onClick: clearInput }, void 0) }), void 0))] }), void 0), !inline && validationMessage && (jsx(ValidationText, __assign({ ref: validationRef, "$showValidationMessage": showValidationMessage, "$disabled": disabled, "$failColor": failColor, "$disabledColor": disabledColor, "$designSwitch": designSwitch || !imageLabel }, { children: validationMessage }), void 0)), helperTextVisible && helperText && !inline && (jsx(HelperText, __assign({ "$disabled": disabled, "$helperTextColor": helperTextColor, "$disabledColor": disabledColor }, { children: helperText }), void 0))] }), void 0));
|
|
238
250
|
};
|
|
239
251
|
ImagePicker.defaultProps = {
|
|
240
252
|
editButtonColorFamily: ButtonColorFamilyEnum.Blue,
|
|
@@ -242,4 +254,4 @@ ImagePicker.defaultProps = {
|
|
|
242
254
|
};
|
|
243
255
|
|
|
244
256
|
export { ImagePicker as I };
|
|
245
|
-
//# sourceMappingURL=ImagePicker-
|
|
257
|
+
//# sourceMappingURL=ImagePicker-5b68b937.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePicker-
|
|
1
|
+
{"version":3,"file":"ImagePicker-5b68b937.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/lib/esm/ImagePicker.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { I as ImagePicker } from './ImagePicker-
|
|
1
|
+
export { I as ImagePicker } from './ImagePicker-5b68b937.js';
|
|
2
2
|
import './_tslib-1a4c929e.js';
|
|
3
3
|
import 'react/jsx-runtime';
|
|
4
4
|
import 'react';
|
|
@@ -41,4 +41,6 @@ import './SingleButton-4b90fc1f.js';
|
|
|
41
41
|
import './IconButton-3083ac19.js';
|
|
42
42
|
import './focusAfter.js';
|
|
43
43
|
import './helpers-e2f33583.js';
|
|
44
|
+
import './Loading.js';
|
|
45
|
+
import './Scroller.js';
|
|
44
46
|
//# sourceMappingURL=ImagePicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePicker.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ImagePicker.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/lib/esm/index.js
CHANGED
|
@@ -47,13 +47,13 @@ import { A as ASTERISK_OFFSET_SPACE } from './helpers-e2f33583.js';
|
|
|
47
47
|
export { D as DrawerDivider } from './DrawerDivider-5b10a31b.js';
|
|
48
48
|
export { E as EmailInput } from './EmailInput-3d43f7fe.js';
|
|
49
49
|
export { Footer } from './Footer.js';
|
|
50
|
-
export { F as Form } from './FormikContainer-
|
|
50
|
+
export { F as Form } from './FormikContainer-972cb7b5.js';
|
|
51
51
|
export { FormFieldTypeEnum, RemovableFieldTypeEnum, isAddress, isCheckbox, isCheckboxGroup, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode } from './FormFieldTypeEnum.js';
|
|
52
52
|
export { F as FiltersBar } from './FiltersBar-25250ff0.js';
|
|
53
53
|
export { H as HorizontalTabMenu } from './HorizontalTabMenu-7f72f11a.js';
|
|
54
54
|
export { I as IconButton } from './IconButton-3083ac19.js';
|
|
55
55
|
export { I as IconTile } from './IconTile-ccdd2d4e.js';
|
|
56
|
-
export { I as ImagePicker } from './ImagePicker-
|
|
56
|
+
export { I as ImagePicker } from './ImagePicker-5b68b937.js';
|
|
57
57
|
export { I as InlineCreditCardInput, a as applyCreditCardMask } from './InlineCreditCardInput-326e0e7f.js';
|
|
58
58
|
export { I as InlineCurrencyInput, a as applyCurrencyMask } from './InlineCurrencyInput-51a48ddd.js';
|
|
59
59
|
export { I as InlineEmailInput } from './InlineEmailInput-b6c8b8b2.js';
|
|
@@ -3,6 +3,7 @@ import { BaseProps, CenterGridProps, CenterImageProps, DeleteIconBoxProps, EditI
|
|
|
3
3
|
export declare const Base: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BaseProps>>;
|
|
4
4
|
export declare const PickerBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PickerBoxProps>>;
|
|
5
5
|
export declare const ImageInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, ImageInputProps>>;
|
|
6
|
+
export declare const ImageInputLoading: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ImageInputProps>>;
|
|
6
7
|
export declare const CenterImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, CenterImageProps>>;
|
|
7
8
|
export declare const LoadedImage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>;
|
|
8
9
|
export declare const PlaceholderCircle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PlaceholderCircleProps>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeEvent } from "react";
|
|
1
|
+
import { ChangeEvent, RefObject } from "react";
|
|
2
2
|
import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
|
|
3
3
|
import { ColorFamilyType } from "../../sharedTypes/types";
|
|
4
4
|
import { ButtonVariantEnum } from "../Button";
|
|
@@ -50,6 +50,10 @@ export interface ImagePickerType {
|
|
|
50
50
|
themeOverride?: ThemeOverride;
|
|
51
51
|
/** A message for when the input fails validation. Only displays if `showValidationMessage: true` */
|
|
52
52
|
validationMessage?: string;
|
|
53
|
+
/** Used to pass a ref to the ImagePicker component */
|
|
54
|
+
innerRef?: RefObject<HTMLInputElement>;
|
|
55
|
+
/** Displays a loading animation in middle of the component when true */
|
|
56
|
+
loading?: boolean;
|
|
53
57
|
}
|
|
54
58
|
export interface ThemeOverride {
|
|
55
59
|
actionButtonGap?: number;
|