@dreamcommerce/aurora 2.6.0-4 → 2.6.0-5

package/build/cjs/packages/aurora/src/components/controls/hoc/{control_image_picker → control_xhr_image_picker}/index.js

@@ -5,22 +5,27 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var index = require('../../index.js');
 var index$1 = require('../../../hint/index.js');
-var index$2 = require('../../../image_picker/index.js');
+var index$2 = require('../../../xhr_image_picker/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const ControlImagePicker = ({ label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, labelAdditionalInfo, hasWidthInput, widthInputPostfix, widthInputLabel, widthInputHint }) => {
+const ControlXhrImagePicker = ({ url, label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, labelAdditionalInfo
+// hasWidthInput,
+// widthInputPostfix,
+// widthInputLabel,
+// widthInputHint
+ }) => {
     return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
         (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
             hint && React__default['default'].createElement(index$1['default'], { hint: hint, spacingLeft: true }))),
         React__default['default'].createElement(index['default'].Content, null,
             React__default['default'].createElement(index['default'].Element, null,
-                React__default['default'].createElement(index$2['default'], { id: id, name: name, onChange: onChange, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className }))),
+                React__default['default'].createElement(index$2['default'], { url: url, id: id, name: name, onChange: onChange, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className, errors: errors }))),
         React__default['default'].createElement(index['default'].Errors, null)));
 };
 
-exports.default = ControlImagePicker;
+exports.default = ControlXhrImagePicker;
 //# sourceMappingURL=index.js.map

package/build/{esm/packages/aurora/src/components/controls/hoc/control_image_picker → cjs/packages/aurora/src/components/controls/hoc/control_xhr_image_picker}/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js

@@ -6,9 +6,9 @@ var React = require('react');
 var i18n = require('../../i18n.js');
 var constants = require('./constants.js');
 
-const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef }) => {
+const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors }) => {
     const [file, setFile] = React.useState(initialFile);
-    const [errors, setErrors] = React.useState([]);
+    const [errors, setErrors] = React.useState(initialErrors !== null && initialErrors !== void 0 ? initialErrors : []);
     const [isDragOver, setDragOver] = React.useState(false);
     const [isPreview, setPreview] = React.useState(true);
     React.useEffect(() => {

package/build/cjs/packages/aurora/src/components/image_picker/components/uploaded_image_item.js

@@ -20,11 +20,11 @@ const UploadedImageItem = ({ imageSize, onFileDelete, isValid, file }) => {
     const imageWidth = imageSize && imageSize.width;
     const imageHeight = imageSize && imageSize.height;
     return (React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFile] },
-        React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileNameWrapper] }, isValid && (React__default['default'].createElement("span", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileFullName] },
-            React__default['default'].createElement("span", null, utilities.FileUtils.getShortenFileName(imageName, 10, 5, 1)),
-            React__default['default'].createElement("span", null, `.${imageExtension} (${imageWidth}x${imageHeight}px)`)))),
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileNameWrapper] }, isValid && (React__default['default'].createElement(React__default['default'].Fragment, null,
+            utilities.FileUtils.getShortenFileName(imageName, 10, 5, 1),
+            `.${imageExtension} (${imageWidth}x${imageHeight}px)`))),
         React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileRemoveWrapper] },
-            React__default['default'].createElement("span", { onClick: onFileDelete, className: main_module['default'][css_classes['default'].imagePickerDeleteButton] },
+            React__default['default'].createElement("button", { onClick: onFileDelete, className: main_module['default'][css_classes['default'].imagePickerDeleteButton] },
                 React__default['default'].createElement(icon_delete['default'], { className: main_module['default'][css_classes['default'].imagePickerDeleteIcon] }),
                 React__default['default'].createElement("span", { className: main_module['default'][css_classes['default'].imagePickerDeleteLabel] }, t('Remove'))))));
 };

package/build/cjs/packages/aurora/src/components/image_picker/css_classes.js

@@ -21,8 +21,7 @@ var CSS_CLASSES = {
     imagePickerInput: `${imagePicker}__input`,
     imagePickerSelectedFile: `${imagePicker}__selected-file`,
     imagePickerSelectedFileNameWrapper: `${imagePicker}__selected-file-name-wrapper`,
-    imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`,
-    imagePickerSelectedFileFullName: `${imagePicker}__selected-file-full-name`
+    imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`
 };
 
 exports.default = CSS_CLASSES;

package/build/cjs/packages/aurora/src/components/image_picker/css_classes.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/image_picker/index.js

@@ -21,7 +21,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-const ImagePicker = ({ id, onChange, allowedExtensions = [constants.FILES_EXTENSIONS.WEBP, constants.FILES_EXTENSIONS.JPG, constants.FILES_EXTENSIONS.PNG, constants.FILES_EXTENSIONS.GIF, constants.FILES_EXTENSIONS.SVG], initialFile, name, className = ''
+const ImagePicker = ({ id, onChange, errors: initialErrors, allowedExtensions = [constants.FILES_EXTENSIONS.WEBP, constants.FILES_EXTENSIONS.JPG, constants.FILES_EXTENSIONS.PNG, constants.FILES_EXTENSIONS.GIF, constants.FILES_EXTENSIONS.SVG], initialFile, name, className = ''
 // hasWidthInput,
 // widthInputPostfix = 'px',
 // widthInputLabel,
@@ -30,10 +30,13 @@ const ImagePicker = ({ id, onChange, allowedExtensions = [constants.FILES_EXTENS
     const [t] = useTranslation.useTranslation();
     const inputRef = React.createRef();
     // const [fileFormatIsCorrect, setFileFormatIsCorrect] = useState<boolean>(true);
-    const [imageSize, setImageSize] = React.useState({ width: 0, height: 0 });
+    const [imageSize, setImageSize] = React.useState(undefined);
     // const [widthInputValue, setWidthInputValue] = useState<number | undefined>();
     // const [isInputWidthTooBig, setIsInputWidthTooBig] = useState<boolean>(false);
-    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = use_file_picker.useFilePicker({ initialFile, onChange, allowedExtensions, inputRef });
+    const onImageFileChange = (files) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(files, imageSize);
+    };
+    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = use_file_picker.useFilePicker({ initialFile, onChange: onImageFileChange, allowedExtensions, initialErrors, inputRef });
     const acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
     // const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
     const imagePickerClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePicker], className && className);
@@ -84,16 +87,17 @@ const ImagePicker = ({ id, onChange, allowedExtensions = [constants.FILES_EXTENS
     //     if (!widthInputValue || !imageSize.width) return;
     //     widthInputValue > imageSize.width ? setIsInputWidthTooBig(true) : setIsInputWidthTooBig(false);
     // };
-    const handleOnDropFile = (event) => {
-        onDropFile(event);
-        // getImageWidth(event);
-    };
-    const handleOnFileChange = (event) => {
-        onFileChange(event);
-        // getImageWidth(event);
-    };
+    // const handleOnDropFile = (event: React.DragEvent<HTMLLabelElement>) => {
+    //     onDropFile(event);
+    //     // getImageWidth(event);
+    // };
+    //
+    // const handleOnFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    //     onFileChange(event);
+    //     // getImageWidth(event);
+    // };
     const handleOnFileDelete = () => {
-        setImageSize({ width: 0, height: 0 });
+        setImageSize(undefined);
         onFileDelete();
     };
     // const handleOnWidthInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -112,8 +116,8 @@ const ImagePicker = ({ id, onChange, allowedExtensions = [constants.FILES_EXTENS
                 (isPreview ? (React__default['default'].createElement(React__default['default'].Fragment, null,
                     React__default['default'].createElement(image_preview.ImagePreview, { file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onError: onPreviewError, onLoad: handlePreviewLoaded }),
                     React__default['default'].createElement(uploaded_image_item.UploadedImageItem, { imageSize: imageSize, file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onFileDelete: handleOnFileDelete }))) : (React__default['default'].createElement("div", null, t('No preview')))),
-            React__default['default'].createElement(image_input['default'], { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: handleOnDropFile }),
-            React__default['default'].createElement("input", { onChange: handleOnFileChange, id: id, ref: inputRef, type: "file", name: name, className: main_module['default'][css_classes['default'].imagePickerInput], accept: acceptFiles })),
+            React__default['default'].createElement(image_input['default'], { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile }),
+            React__default['default'].createElement("input", { onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, className: main_module['default'][css_classes['default'].imagePickerInput], accept: acceptFiles })),
         errors && React__default['default'].createElement(errors_list.ErrorsList, { errors: errors })));
 };
 

package/build/cjs/packages/aurora/src/components/image_picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/css/image_picker/main.module.less.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n}\n.main-module_image-picker__description__1v13N p {\n  color: #3c83ec;\n}\n.main-module_image-picker__description__1v13N span {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: #3c83ec;\n  cursor: pointer;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  flex: 1;\n  max-width: 50%;\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-full-name__3fALB {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n";
-var styles = {"image-picker__wrapper":"main-module_image-picker__wrapper__2RK3f","image-picker__wrapper-error":"main-module_image-picker__wrapper-error__kCZeA","image-picker__wrapper-has-file":"main-module_image-picker__wrapper-has-file__2zmRc","image-picker__label":"main-module_image-picker__label__1i_Fq","image-picker__description":"main-module_image-picker__description__1v13N","image-picker__upload-icon":"main-module_image-picker__upload-icon__3sMvN","image-picker__input":"main-module_image-picker__input__3Wu2I","image-picker__delete-button":"main-module_image-picker__delete-button__21_kT","image-picker__delete-label":"main-module_image-picker__delete-label__3v2ot","image-picker__wrong-file-format-icon":"main-module_image-picker__wrong-file-format-icon__X-NL0","image-picker__delete-icon":"main-module_image-picker__delete-icon__30pkO","image-picker__selected-file":"main-module_image-picker__selected-file__3bRqa","image-picker__selected-file-name-wrapper":"main-module_image-picker__selected-file-name-wrapper__37MKd","image-picker__selected-file-remove-wrapper":"main-module_image-picker__selected-file-remove-wrapper__2v4W2","image-picker__selected-file-full-name":"main-module_image-picker__selected-file-full-name__3fALB","image-picker__image-preview-wrapper":"main-module_image-picker__image-preview-wrapper__1jPXU","image-picker__image-preview":"main-module_image-picker__image-preview__12pRu","image-picker__error-text":"main-module_image-picker__error-text__rXAvw"};
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n}\n.main-module_image-picker__description__1v13N p {\n  color: #3c83ec;\n}\n.main-module_image-picker__description__1v13N span {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  color: #3c83ec;\n  cursor: pointer;\n  background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n";
+var styles = {"image-picker__wrapper":"main-module_image-picker__wrapper__2RK3f","image-picker__wrapper-error":"main-module_image-picker__wrapper-error__kCZeA","image-picker__wrapper-has-file":"main-module_image-picker__wrapper-has-file__2zmRc","image-picker__label":"main-module_image-picker__label__1i_Fq","image-picker__description":"main-module_image-picker__description__1v13N","image-picker__upload-icon":"main-module_image-picker__upload-icon__3sMvN","image-picker__input":"main-module_image-picker__input__3Wu2I","image-picker__delete-button":"main-module_image-picker__delete-button__21_kT","image-picker__delete-label":"main-module_image-picker__delete-label__3v2ot","image-picker__wrong-file-format-icon":"main-module_image-picker__wrong-file-format-icon__X-NL0","image-picker__delete-icon":"main-module_image-picker__delete-icon__30pkO","image-picker__selected-file":"main-module_image-picker__selected-file__3bRqa","image-picker__selected-file-name-wrapper":"main-module_image-picker__selected-file-name-wrapper__37MKd","image-picker__selected-file-remove-wrapper":"main-module_image-picker__selected-file-remove-wrapper__2v4W2","image-picker__image-preview-wrapper":"main-module_image-picker__image-preview-wrapper__1jPXU","image-picker__image-preview":"main-module_image-picker__image-preview__12pRu","image-picker__error-text":"main-module_image-picker__error-text__rXAvw"};
 styleInject_es['default'](css_248z);
 
 exports.default = styles;

package/build/cjs/packages/aurora/src/index.js

@@ -27,7 +27,8 @@ var index$m = require('./components/controls/hoc/control_date_picker/index.js');
 var index$B = require('./components/file_picker/index.js');
 var index$n = require('./components/controls/hoc/control_file_picker/index.js');
 var index$C = require('./components/image_picker/index.js');
-var index$o = require('./components/controls/hoc/control_image_picker/index.js');
+var index$M = require('./components/xhr_image_picker/index.js');
+var index$o = require('./components/controls/hoc/control_xhr_image_picker/index.js');
 var index$a = require('./components/controls/hoc/control_input/index.js');
 var index$6 = require('./components/dropdown/hoc/multiselect/index.js');
 var index$g = require('./components/controls/hoc/control_multi_select/index.js');
@@ -78,7 +79,6 @@ var tabs_panel_list = require('./components/tabs/components/tabs_panel_list.js')
 var tabs_wrapper = require('./components/tabs/components/tabs_wrapper.js');
 var index$2 = require('./components/tooltip/index.js');
 var index$J = require('./components/with_loader/index.js');
-var index$M = require('./components/xhr_image_picker/index.js');
 
 
 
@@ -108,7 +108,8 @@ exports.ControlDatepicker = index$m['default'];
 exports.FilePicker = index$B['default'];
 exports.ControlFilePicker = index$n['default'];
 exports.ImagePicker = index$C['default'];
-exports.ControlImagePicker = index$o['default'];
+exports.XhrImagePicker = index$M['default'];
+exports.ControlXhrImagePicker = index$o['default'];
 exports.ControlInput = index$a['default'];
 exports.MultiSelect = index$6['default'];
 exports.ControlMultiSelect = index$g['default'];
@@ -160,5 +161,4 @@ exports.TabsPanelList = tabs_panel_list.TabsPanelList;
 exports.TabsWrapper = tabs_wrapper['default'];
 exports.Tooltip = index$2['default'];
 exports.WithLoader = index$J['default'];
-exports.XhrImagePicker = index$M['default'];
 //# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker/index.d.ts

@@ -0,0 +1,4 @@
+import { IControlXhrImagePicker } from '../../types';
+import React from 'react';
+declare const ControlXhrImagePicker: React.FC<IControlXhrImagePicker>;
+export default ControlXhrImagePicker;

package/build/esm/packages/aurora/src/components/controls/hoc/{control_image_picker → control_xhr_image_picker}/index.js

@@ -1,18 +1,23 @@
 import React from 'react';
 import Control from '../../index.js';
 import Hint from '../../../hint/index.js';
-import ImagePicker from '../../../image_picker/index.js';
+import XhrImagePicker from '../../../xhr_image_picker/index.js';
 
-const ControlImagePicker = ({ label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, labelAdditionalInfo, hasWidthInput, widthInputPostfix, widthInputLabel, widthInputHint }) => {
+const ControlXhrImagePicker = ({ url, label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, labelAdditionalInfo
+// hasWidthInput,
+// widthInputPostfix,
+// widthInputLabel,
+// widthInputHint
+ }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
             label,
             hint && React.createElement(Hint, { hint: hint, spacingLeft: true }))),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
-                React.createElement(ImagePicker, { id: id, name: name, onChange: onChange, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className }))),
+                React.createElement(XhrImagePicker, { url: url, id: id, name: name, onChange: onChange, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className, errors: errors }))),
         React.createElement(Control.Errors, null)));
 };
 
-export default ControlImagePicker;
+export default ControlXhrImagePicker;
 //# sourceMappingURL=index.js.map

package/build/{cjs/packages/aurora/src/components/controls/hoc/control_image_picker → esm/packages/aurora/src/components/controls/hoc/control_xhr_image_picker}/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/controls/types.d.ts

@@ -5,6 +5,7 @@ import { IFilePicker } from "../file_picker/types";
 import { IRange } from "../range/types";
 import React from 'react';
 import { TVerticalPosition } from "../../typings/general";
+import { TImageSize } from "../image_picker/types";
 export declare type TControlErrors = string[] | null | undefined;
 export interface IControlContext {
     errors?: TControlErrors;
@@ -169,15 +170,12 @@ export interface IControlFilePicker extends IFilePicker, IControlCommonProps {
     name?: string;
     labelAdditionalInfo?: string | ReactNode;
 }
-export interface IControlImagePicker extends IFilePicker, IControlCommonProps {
+export interface IControlXhrImagePicker extends IFilePicker, IControlCommonProps {
+    url: string;
     label?: string;
     isRequired?: boolean;
-    name?: string;
+    onChange?: (fileList: FileList | null, size?: TImageSize) => void;
     labelAdditionalInfo?: string | ReactNode;
-    hasWidthInput?: boolean;
-    widthInputPostfix?: string;
-    widthInputLabel?: string;
-    widthInputHint?: string;
 }
 export interface ICellSelector {
     rows?: number;

package/build/esm/packages/aurora/src/components/controls/types.js

@@ -5,4 +5,5 @@ import '@auroraComponents/file_picker/types';
 import '@auroraComponents/range/types';
 import 'react';
 import '@auroraTypings/general';
+import '@auroraComponents/image_picker/types';
 //# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/controls/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA0G,OAAO,CAAC;AAClH,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAA4B,qCAAqC,CAAC;AAClE,OAAuB,+BAA+B,CAAC;AACvD,OAAkB,OAAO,CAAC;AAC1B,OAAkC,wBAAwB,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA0G,OAAO,CAAC;AAClH,OAAgD,kCAAkC,CAAC;AAEnF,OAAkC,sCAAsC,CAAC;AACzE,OAA4B,qCAAqC,CAAC;AAClE,OAAuB,+BAA+B,CAAC;AACvD,OAAkB,OAAO,CAAC;AAC1B,OAAkC,wBAAwB,CAAC;AAC3D,OAA2B,sCAAsC,CAAC"}

package/build/esm/packages/aurora/src/components/file_picker/types.d.ts

@@ -45,6 +45,7 @@ export interface IUseFilePickerProps {
     initialFile?: TFilePickerFile;
     allowedExtensions?: TFilesExtension[];
     inputRef: React.RefObject<HTMLInputElement>;
+    initialErrors?: TControlErrors;
 }
 export declare type TFilesExtension = typeof FILES_EXTENSIONS[keyof typeof FILES_EXTENSIONS];
 export declare type TMimeFileExtension = typeof MIME_FILE_EXTENSIONS[keyof typeof MIME_FILE_EXTENSIONS];

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.d.ts

@@ -1,2 +1,2 @@
 import { IUseFilePicker, IUseFilePickerProps } from "./types";
-export declare const useFilePicker: ({ onChange, initialFile, allowedExtensions, inputRef }: IUseFilePickerProps) => IUseFilePicker;
+export declare const useFilePicker: ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors }: IUseFilePickerProps) => IUseFilePicker;

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js

@@ -2,9 +2,9 @@ import { useState, useEffect } from 'react';
 import i18n from '../../i18n.js';
 import { MIME_TYPE_TO_FILE_EXTENSIONS, FILE_PICKER_ERROR } from './constants.js';
 
-const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef }) => {
+const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors }) => {
     const [file, setFile] = useState(initialFile);
-    const [errors, setErrors] = useState([]);
+    const [errors, setErrors] = useState(initialErrors !== null && initialErrors !== void 0 ? initialErrors : []);
     const [isDragOver, setDragOver] = useState(false);
     const [isPreview, setPreview] = useState(true);
     useEffect(() => {

package/build/esm/packages/aurora/src/components/image_picker/components/uploaded_image_item.js

@@ -12,11 +12,11 @@ const UploadedImageItem = ({ imageSize, onFileDelete, isValid, file }) => {
     const imageWidth = imageSize && imageSize.width;
     const imageHeight = imageSize && imageSize.height;
     return (React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFile] },
-        React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileNameWrapper] }, isValid && (React.createElement("span", { className: styles[CSS_CLASSES.imagePickerSelectedFileFullName] },
-            React.createElement("span", null, FileUtils.getShortenFileName(imageName, 10, 5, 1)),
-            React.createElement("span", null, `.${imageExtension} (${imageWidth}x${imageHeight}px)`)))),
+        React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileNameWrapper] }, isValid && (React.createElement(React.Fragment, null,
+            FileUtils.getShortenFileName(imageName, 10, 5, 1),
+            `.${imageExtension} (${imageWidth}x${imageHeight}px)`))),
         React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileRemoveWrapper] },
-            React.createElement("span", { onClick: onFileDelete, className: styles[CSS_CLASSES.imagePickerDeleteButton] },
+            React.createElement("button", { onClick: onFileDelete, className: styles[CSS_CLASSES.imagePickerDeleteButton] },
                 React.createElement(IconDelete, { className: styles[CSS_CLASSES.imagePickerDeleteIcon] }),
                 React.createElement("span", { className: styles[CSS_CLASSES.imagePickerDeleteLabel] }, t('Remove'))))));
 };

package/build/esm/packages/aurora/src/components/image_picker/css_classes.d.ts

@@ -17,6 +17,5 @@ declare const _default: {
     imagePickerSelectedFile: string;
     imagePickerSelectedFileNameWrapper: string;
     imagePickerSelectedFileRemoveWrapper: string;
-    imagePickerSelectedFileFullName: string;
 };
 export default _default;

package/build/esm/packages/aurora/src/components/image_picker/css_classes.js

@@ -17,8 +17,7 @@ var CSS_CLASSES = {
     imagePickerInput: `${imagePicker}__input`,
     imagePickerSelectedFile: `${imagePicker}__selected-file`,
     imagePickerSelectedFileNameWrapper: `${imagePicker}__selected-file-name-wrapper`,
-    imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`,
-    imagePickerSelectedFileFullName: `${imagePicker}__selected-file-full-name`
+    imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`
 };
 
 export default CSS_CLASSES;

package/build/esm/packages/aurora/src/components/image_picker/css_classes.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/index.js

@@ -12,7 +12,7 @@ import ImageInput from './components/image_input.js';
 import { ImagePreview } from './components/image_preview.js';
 import { UploadedImageItem } from './components/uploaded_image_item.js';
 
-const ImagePicker = ({ id, onChange, allowedExtensions = [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG], initialFile, name, className = ''
+const ImagePicker = ({ id, onChange, errors: initialErrors, allowedExtensions = [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG], initialFile, name, className = ''
 // hasWidthInput,
 // widthInputPostfix = 'px',
 // widthInputLabel,
@@ -21,10 +21,13 @@ const ImagePicker = ({ id, onChange, allowedExtensions = [FILES_EXTENSIONS.WEBP,
     const [t] = useTranslation();
     const inputRef = createRef();
     // const [fileFormatIsCorrect, setFileFormatIsCorrect] = useState<boolean>(true);
-    const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+    const [imageSize, setImageSize] = useState(undefined);
     // const [widthInputValue, setWidthInputValue] = useState<number | undefined>();
     // const [isInputWidthTooBig, setIsInputWidthTooBig] = useState<boolean>(false);
-    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = useFilePicker({ initialFile, onChange, allowedExtensions, inputRef });
+    const onImageFileChange = (files) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(files, imageSize);
+    };
+    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = useFilePicker({ initialFile, onChange: onImageFileChange, allowedExtensions, initialErrors, inputRef });
     const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
     // const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
     const imagePickerClassName = classnames(styles[CSS_CLASSES.imagePicker], className && className);
@@ -75,16 +78,17 @@ const ImagePicker = ({ id, onChange, allowedExtensions = [FILES_EXTENSIONS.WEBP,
     //     if (!widthInputValue || !imageSize.width) return;
     //     widthInputValue > imageSize.width ? setIsInputWidthTooBig(true) : setIsInputWidthTooBig(false);
     // };
-    const handleOnDropFile = (event) => {
-        onDropFile(event);
-        // getImageWidth(event);
-    };
-    const handleOnFileChange = (event) => {
-        onFileChange(event);
-        // getImageWidth(event);
-    };
+    // const handleOnDropFile = (event: React.DragEvent<HTMLLabelElement>) => {
+    //     onDropFile(event);
+    //     // getImageWidth(event);
+    // };
+    //
+    // const handleOnFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    //     onFileChange(event);
+    //     // getImageWidth(event);
+    // };
     const handleOnFileDelete = () => {
-        setImageSize({ width: 0, height: 0 });
+        setImageSize(undefined);
         onFileDelete();
     };
     // const handleOnWidthInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -103,8 +107,8 @@ const ImagePicker = ({ id, onChange, allowedExtensions = [FILES_EXTENSIONS.WEBP,
                 (isPreview ? (React.createElement(React.Fragment, null,
                     React.createElement(ImagePreview, { file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onError: onPreviewError, onLoad: handlePreviewLoaded }),
                     React.createElement(UploadedImageItem, { imageSize: imageSize, file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onFileDelete: handleOnFileDelete }))) : (React.createElement("div", null, t('No preview')))),
-            React.createElement(ImageInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: handleOnDropFile }),
-            React.createElement("input", { onChange: handleOnFileChange, id: id, ref: inputRef, type: "file", name: name, className: styles[CSS_CLASSES.imagePickerInput], accept: acceptFiles })),
+            React.createElement(ImageInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile }),
+            React.createElement("input", { onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, className: styles[CSS_CLASSES.imagePickerInput], accept: acceptFiles })),
         errors && React.createElement(ErrorsList, { errors: errors })));
 };
 

package/build/esm/packages/aurora/src/components/image_picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/types.d.ts

@@ -5,6 +5,7 @@ export declare type TImagePickerFile = {
     fileName: string;
 };
 export interface IImagePicker extends IFilePicker {
+    onChange?: (fileList: FileList | null, size?: TImageSize) => void;
 }
 export interface ISelectedImagePreview {
     file: TImagePickerFile;

package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n}\n.main-module_image-picker__description__1v13N p {\n  color: #3c83ec;\n}\n.main-module_image-picker__description__1v13N span {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: #3c83ec;\n  cursor: pointer;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  flex: 1;\n  max-width: 50%;\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-full-name__3fALB {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n";
-var styles = {"image-picker__wrapper":"main-module_image-picker__wrapper__2RK3f","image-picker__wrapper-error":"main-module_image-picker__wrapper-error__kCZeA","image-picker__wrapper-has-file":"main-module_image-picker__wrapper-has-file__2zmRc","image-picker__label":"main-module_image-picker__label__1i_Fq","image-picker__description":"main-module_image-picker__description__1v13N","image-picker__upload-icon":"main-module_image-picker__upload-icon__3sMvN","image-picker__input":"main-module_image-picker__input__3Wu2I","image-picker__delete-button":"main-module_image-picker__delete-button__21_kT","image-picker__delete-label":"main-module_image-picker__delete-label__3v2ot","image-picker__wrong-file-format-icon":"main-module_image-picker__wrong-file-format-icon__X-NL0","image-picker__delete-icon":"main-module_image-picker__delete-icon__30pkO","image-picker__selected-file":"main-module_image-picker__selected-file__3bRqa","image-picker__selected-file-name-wrapper":"main-module_image-picker__selected-file-name-wrapper__37MKd","image-picker__selected-file-remove-wrapper":"main-module_image-picker__selected-file-remove-wrapper__2v4W2","image-picker__selected-file-full-name":"main-module_image-picker__selected-file-full-name__3fALB","image-picker__image-preview-wrapper":"main-module_image-picker__image-preview-wrapper__1jPXU","image-picker__image-preview":"main-module_image-picker__image-preview__12pRu","image-picker__error-text":"main-module_image-picker__error-text__rXAvw"};
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n}\n.main-module_image-picker__description__1v13N p {\n  color: #3c83ec;\n}\n.main-module_image-picker__description__1v13N span {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  color: #3c83ec;\n  cursor: pointer;\n  background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n";
+var styles = {"image-picker__wrapper":"main-module_image-picker__wrapper__2RK3f","image-picker__wrapper-error":"main-module_image-picker__wrapper-error__kCZeA","image-picker__wrapper-has-file":"main-module_image-picker__wrapper-has-file__2zmRc","image-picker__label":"main-module_image-picker__label__1i_Fq","image-picker__description":"main-module_image-picker__description__1v13N","image-picker__upload-icon":"main-module_image-picker__upload-icon__3sMvN","image-picker__input":"main-module_image-picker__input__3Wu2I","image-picker__delete-button":"main-module_image-picker__delete-button__21_kT","image-picker__delete-label":"main-module_image-picker__delete-label__3v2ot","image-picker__wrong-file-format-icon":"main-module_image-picker__wrong-file-format-icon__X-NL0","image-picker__delete-icon":"main-module_image-picker__delete-icon__30pkO","image-picker__selected-file":"main-module_image-picker__selected-file__3bRqa","image-picker__selected-file-name-wrapper":"main-module_image-picker__selected-file-name-wrapper__37MKd","image-picker__selected-file-remove-wrapper":"main-module_image-picker__selected-file-remove-wrapper__2v4W2","image-picker__image-preview-wrapper":"main-module_image-picker__image-preview-wrapper__1jPXU","image-picker__image-preview":"main-module_image-picker__image-preview__12pRu","image-picker__error-text":"main-module_image-picker__error-text__rXAvw"};
 styleInject(css_248z);
 
 export default styles;

package/build/esm/packages/aurora/src/index.d.ts

@@ -20,7 +20,7 @@ import ControlCheckboxSwitch from "./components/controls/hoc/control_checkbox_sw
 import ControlColorPicker from "./components/controls/hoc/control_color_picker";
 import ControlDatepicker from "./components/controls/hoc/control_date_picker";
 import ControlFilePicker from "./components/controls/hoc/control_file_picker";
-import ControlImagePicker from "./components/controls/hoc/control_image_picker";
+import ControlXhrImagePicker from "./components/controls/hoc/control_xhr_image_picker";
 import ControlInput from "./components/controls/hoc/control_input";
 import ControlMultiSelect from "./components/controls/hoc/control_multi_select";
 import ControlRadio from "./components/controls/hoc/control_radio";
@@ -109,7 +109,7 @@ import XhrImagePicker from "./components/xhr_image_picker";
 /**
  * export components
  */
-export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, Stack, Control, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, ControlImagePicker, Heading, Typography, Modal, ModalProvider, AbsoluteModal, RelativeModal, TabsWrapper, Tabs, TabsItem, TabsItemList, TabsPanel, TabsPanelList, SearchList, SearchListInput, SearchListResults, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ImagePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext, FlashMessengerContext, FlashMessagesList, Link, IconTablet, IconMobile, IconLaptop, IconDesktop, IconWarning, useToggle, useSearchList, Slide, SlideWrapper, SlideHeader, SlideContent, SlideFooter, XhrImagePicker };
+export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect, Label, Stack, Control, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, ControlXhrImagePicker, Heading, Typography, Modal, ModalProvider, AbsoluteModal, RelativeModal, TabsWrapper, Tabs, TabsItem, TabsItemList, TabsPanel, TabsPanelList, SearchList, SearchListInput, SearchListResults, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ImagePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, useDropdownContext, FlashMessengerContext, FlashMessagesList, Link, IconTablet, IconMobile, IconLaptop, IconDesktop, IconWarning, useToggle, useSearchList, Slide, SlideWrapper, SlideHeader, SlideContent, SlideFooter, XhrImagePicker };
 /**
  * export types
  */

package/build/esm/packages/aurora/src/index.js

@@ -23,7 +23,8 @@ export { default as ControlDatepicker } from './components/controls/hoc/control_
 export { default as FilePicker } from './components/file_picker/index.js';
 export { default as ControlFilePicker } from './components/controls/hoc/control_file_picker/index.js';
 export { default as ImagePicker } from './components/image_picker/index.js';
-export { default as ControlImagePicker } from './components/controls/hoc/control_image_picker/index.js';
+export { default as XhrImagePicker } from './components/xhr_image_picker/index.js';
+export { default as ControlXhrImagePicker } from './components/controls/hoc/control_xhr_image_picker/index.js';
 export { default as ControlInput } from './components/controls/hoc/control_input/index.js';
 export { default as MultiSelect } from './components/dropdown/hoc/multiselect/index.js';
 export { default as ControlMultiSelect } from './components/controls/hoc/control_multi_select/index.js';
@@ -74,5 +75,4 @@ export { TabsPanelList } from './components/tabs/components/tabs_panel_list.js';
 export { default as TabsWrapper } from './components/tabs/components/tabs_wrapper.js';
 export { default as Tooltip } from './components/tooltip/index.js';
 export { default as WithLoader } from './components/with_loader/index.js';
-export { default as XhrImagePicker } from './components/xhr_image_picker/index.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.6.0-4",
+  "version": "2.6.0-5",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",

package/build/esm/packages/aurora/src/components/controls/hoc/control_image_picker/index.d.ts

@@ -1,4 +0,0 @@
-import { IControlImagePicker } from '../../types';
-import React from 'react';
-declare const ControlImagePicker: React.FC<IControlImagePicker>;
-export default ControlImagePicker;

package/build/esm/packages/aurora/src/components/image_picker/components/selected_image_preview.d.ts

@@ -1,4 +0,0 @@
-import { ISelectedImagePreview } from '../types';
-import React from 'react';
-declare const SelectedImagePreview: React.FC<ISelectedImagePreview>;
-export default SelectedImagePreview;

package/build/esm/packages/aurora/src/components/image_picker/components/selected_image_preview.js

@@ -1,28 +0,0 @@
-import CSS_CLASSES from '@auroraComponents/image_picker/css_classes';
-import { FileUtils } from '@dreamcommerce/utilities';
-import '../types';
-import IconDelete from '@auroraAssets/icon_delete';
-import IconWrongFileFormat from '@auroraAssets/icon_wrong_file_format';
-import React from 'react';
-import styles from '@auroraCss/image_picker/main.module.less';
-import { useTranslation } from 'react-i18next';
-const SelectedImagePreview = ({ file, isPreview, fileFormatIsCorrect, imageSize, onPreviewError, onFileDelete }) => {
-    const [t] = useTranslation();
-    const imageName = FileUtils.getFileName(file.fileName);
-    const imageExtension = FileUtils.getFileExtension(file.fileName);
-    const imageWidth = imageSize && imageSize.width;
-    const imageHeight = imageSize && imageSize.height;
-    const previewMarkupJsx = fileFormatIsCorrect ? (React.createElement("img", { alt: "", src: (file === null || file === void 0 ? void 0 : file.fileUrl) || '', onError: onPreviewError, className: styles[CSS_CLASSES.imagePickerImagePreview] })) : (React.createElement(IconWrongFileFormat, { className: styles[CSS_CLASSES.imagePickerWrongFileFormatIcon] }));
-    return (React.createElement("div", null,
-        isPreview ? (React.createElement("div", { className: styles[CSS_CLASSES.imagePickerImagePreviewWrapper] }, previewMarkupJsx)) : (React.createElement("div", null, t('No preview'))),
-        React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFile] },
-            React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileNameWrapper] }, fileFormatIsCorrect && (React.createElement("span", { className: styles[CSS_CLASSES.imagePickerSelectedFileFullName] },
-                React.createElement("span", null, FileUtils.getShortenFileName(imageName, 10, 5, 1)),
-                React.createElement("span", null, `.${imageExtension} (${imageWidth}x${imageHeight}px)`)))),
-            React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileRemoveWrapper] },
-                React.createElement("span", { onClick: onFileDelete, className: styles[CSS_CLASSES.imagePickerDeleteButton] },
-                    React.createElement(IconDelete, { className: styles[CSS_CLASSES.imagePickerDeleteIcon] }),
-                    React.createElement("span", { className: styles[CSS_CLASSES.imagePickerDeleteLabel] }, t('Remove')))))));
-};
-export default SelectedImagePreview;
-//# sourceMappingURL=selected_image_preview.js.map

package/build/esm/packages/aurora/src/components/image_picker/components/selected_image_preview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"selected_image_preview.js","sourceRoot":"","sources":["../../../../../../../../src/components/image_picker/components/selected_image_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,4CAA4C,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAsC,UAAU,CAAC;AACjD,OAAO,UAAU,MAAM,2BAA2B,CAAC;AACnD,OAAO,mBAAmB,MAAM,sCAAsC,CAAC;AACvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,0CAA0C,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,oBAAoB,GAAoC,CAAC,EAC3D,IAAI,EACJ,SAAS,EACT,mBAAmB,EACnB,SAAS,EACT,cAAc,EACd,YAAY,EACf,EAAE,EAAE;IACD,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc,EAAE,CAAC;IAC7B,MAAM,SAAS,GAAG,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvD,MAAM,cAAc,GAAG,SAAS,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjE,MAAM,UAAU,GAAG,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC;IAChD,MAAM,WAAW,GAAG,SAAS,IAAI,SAAS,CAAC,MAAM,CAAC;IAElD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,CAAC,CAAC,CAC3C,6BAAK,GAAG,EAAC,EAAE,EAAC,GAAG,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,KAAI,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,uBAAuB,CAAC,GAAI,CAC5H,CAAC,CAAC,CAAC,CACA,oBAAC,mBAAmB,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,8BAA8B,CAAC,GAAI,CACzF,CAAC;IAEF,OAAO,CACH;QACK,SAAS,CAAC,CAAC,CAAC,CACT,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,8BAA8B,CAAC,IAAG,gBAAgB,CAAO,CAC/F,CAAC,CAAC,CAAC,CACA,iCAAM,CAAC,CAAC,YAAY,CAAC,CAAO,CAC/B;QAED,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,uBAAuB,CAAC;YACvD,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,kCAAkC,CAAC,IACjE,mBAAmB,IAAI,CACpB,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,+BAA+B,CAAC;gBAChE,kCAAO,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAQ;gBAChE,kCAAO,IAAI,cAAc,KAAK,UAAU,IAAI,WAAW,KAAK,CAAQ,CACjE,CACV,CACC;YAEN,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,oCAAoC,CAAC;gBACpE,8BAAM,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,uBAAuB,CAAC;oBAC/E,oBAAC,UAAU,IAAC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,qBAAqB,CAAC,GAAI;oBACpE,8BAAM,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,sBAAsB,CAAC,IAAG,CAAC,CAAC,QAAQ,CAAC,CAAQ,CAC9E,CACL,CACJ,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC"}