@hhgtech/hhg-components 1.29.434-beta-20 → 1.29.435

package/build/atoms.js

@@ -2,138 +2,447 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-7629b723.js');
-var index$1 = require('./index-68556a6d.js');
-var index$2 = require('./index-4c01bb66.js');
-var index$3 = require('./index-dcc9df94.js');
-var index$4 = require('./index-82c83aad.js');
-var index$5 = require('./index-dd5f0406.js');
-var index$6 = require('./index-8398e60b.js');
-var index$7 = require('./index-01a98830.js');
-var index$8 = require('./index-7040e758.js');
-var index$9 = require('./index-0e57d49c.js');
-var index$a = require('./index-c1dd099d.js');
-var index$b = require('./index-8dd35dcc.js');
-var index$c = require('./index-39276343.js');
-var index$d = require('./index-212d00c5.js');
-var index$e = require('./index-a6b637f2.js');
-var index$f = require('./index-05be2b95.js');
-var index$g = require('./index-d11d21fd.js');
-var index$h = require('./index-18848cff.js');
-var index$i = require('./index-677836da.js');
-var logoIcon = require('./logoIcon-1be40d04.js');
-var index$j = require('./index-db86382c.js');
-var index$k = require('./index-7078cc1d.js');
-var index$l = require('./index-cd60f1be.js');
-var InputDate = require('./InputDate-822ae3db.js');
-require('react');
-require('./index-3aa17a05.js');
-require('./tslib.es6-6887d9c2.js');
-require('@mantine/core');
-require('./text-64715192.js');
-require('@emotion/styled');
-require('./miscTheme.js');
-require('./utils-c46f80b6.js');
+var ImageUpload_types = require('./ImageUpload.types-740802a9.js');
+var index = require('./index-4771346b.js');
+var index$1 = require('./index-7d502705.js');
+var index$2 = require('./index-cea20383.js');
+var index$3 = require('./index-71a4241b.js');
+var index$4 = require('./index-ef9886ab.js');
+var index$5 = require('./index-10587394.js');
+var index$6 = require('./index-e9f494fb.js');
+var index$7 = require('./index-feb676d3.js');
+var index$8 = require('./index-879c5d61.js');
+var index$9 = require('./index-2500c25e.js');
+var index$a = require('./index-4cb4d8cd.js');
+var index$b = require('./index-9624f9df.js');
+var index$c = require('./index-8b8d97cf.js');
+var index$d = require('./index-ca81f400.js');
+var index$e = require('./index-393f5a40.js');
+var index$f = require('./index-43c3255f.js');
+var index$g = require('./index-5c029047.js');
+var index$h = require('./index-db78eb88.js');
+var logoIcon = require('./logoIcon-cf0e4ea3.js');
+var index$i = require('./index-af07d94c.js');
+var index$j = require('./index-533e3f04.js');
+var index$k = require('./index-322f18d9.js');
+var InputDate = require('./InputDate-5eea89d0.js');
+var tslib_es6 = require('./tslib.es6-b33ba902.js');
+var React = require('react');
+var core = require('@mantine/core');
+var Close = require('./Close-64cf7bf9.js');
+var Upload = require('./Upload-cf3a4995.js');
+var styled = require('@emotion/styled');
+var miscTheme = require('./miscTheme.js');
+var index$l = require('./index-c96f8955.js');
+require('./utils-62c243a8.js');
 require('@mantine/hooks');
 require('./miscDefaultClassWrapper.js');
 require('react-keyed-flatten-children');
-require('./Close-9e9f1954.js');
-require('./index-716d7061.js');
-require('./translationsContext-4585ed16.js');
-require('@mantine/carousel');
-require('vaul');
-require('./index-e086f13b.js');
+require('./index-ecb51cb3.js');
+require('./shared-239f13fe.js');
+require('./text-e045e4ff.js');
+require('@mantine/dates');
+require('./index-aa0a87d2.js');
 require('date-fns/locale');
-require('./index-84cba973.js');
-require('./Locale-9694c269.js');
+require('./index-c7705a55.js');
+require('./Locale-3d460ee9.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./index-07e360cb.js');
-require('./shared-7cfff527.js');
-require('@mantine/dates');
-require('./index-7e8c5506.js');
-require('./index-33b7711c.js');
+require('./index-92e5bd77.js');
+require('./index-6da02f6c.js');
 require('dayjs');
 require('@mantine/notifications');
-require('./index.styles-1ebc0066.js');
-require('./index-26a35a04.js');
+require('./index.styles-ec2b0e3a.js');
+require('./translationsContext-b6a3a848.js');
+require('./index-6fe3211e.js');
 require('@hhgtech/icons/other');
 require('@emotion/react');
-require('./animation-0404e86c.js');
+require('./animation-4e3c0898.js');
+require('@mantine/carousel');
 require('classnames');
 require('uuid');
-require('./useUniqueId-d4274116.js');
+require('./useUniqueId-a8bec4a2.js');
 require('@hhgtech/icons/core');
-require('./WhatsApp-674b6734.js');
-require('./Spinner-37708ea7.js');
-require('./index-7240930d.js');
-require('./paths-18927b6c.js');
-require('./constants-14d8db17.js');
-require('./utils-1f7c9ee6.js');
-require('./index-5730c328.js');
+require('./WhatsApp-b7fa7cee.js');
+require('./Spinner-af23165e.js');
+require('./index-500da725.js');
+require('./index-c7d4bc04.js');
+require('./paths-a0ef9275.js');
+require('./constants-c63d956c.js');
+require('./utils-6e08da38.js');
+require('./index-afce1028.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-31cdc126.js');
+require('./constants-2cd1cd00.js');
+require('vaul');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const getBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+};
+const handleMultipleImageFiles = (fileList) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    if (fileList.length === 0) {
+        return [];
+    }
+    const base64List = yield Promise.all(fileList.map((file) => getBase64(file)));
+    return base64List;
+});
+
+const StyledImageUploadWrapper = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
 
+  .image-upload-input-error {
+    margin-top: ${core.rem(12)};
+    display: flex;
+    flex-direction: column;
+    gap: ${core.rem(4)};
+  }
+`;
+const StyledImageUploadContent = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: ${core.rem(4)};
+  margin-top: ${core.rem(4)};
 
+  span {
+    color: ${miscTheme.theme.colors.neutral500};
+  }
+`;
+const StyledImageUploadInputWrapper = styled__default["default"].div `
+  position: relative;
+  width: fit-content;
+  padding: ${core.rem(8)} ${core.rem(12)};
+  border-radius: ${core.rem(12)};
+  border: ${core.rem(1)} solid ${miscTheme.theme.colors.neutral200};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: ${core.rem(8)};
+  margin-top: ${core.rem(18)};
+
+  &.image-upload-dragover {
+    border-color: ${miscTheme.theme.colors.primaryBase};
+  }
+
+  &.image-upload-error {
+    border-color: ${miscTheme.theme.colors.error};
+  }
+
+  &.image-upload-disabled {
+    cursor: not-allowed;
+    background-color: ${miscTheme.theme.colors.gray100};
+    color: ${miscTheme.theme.colors.gray400};
+    border-color: ${miscTheme.theme.colors.gray200};
+  }
+
+  svg {
+    width: ${core.rem(18)};
+    height: ${core.rem(18)};
+  }
+
+  input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: -1;
+  }
+`;
+const StyledImageUploadPreviewContainer = styled__default["default"].div `
+  position: relative;
+  width: ${core.rem(90)};
+  height: ${core.rem(90)};
+  border-radius: ${core.rem(12)};
+  overflow: hidden;
+  background-color: ${miscTheme.theme.colors.gray100};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  svg {
+    width: ${core.rem(14)};
+    height: ${core.rem(14)};
+    color: ${miscTheme.theme.colors.white};
+  }
+
+  .image-upload-remove-button {
+    cursor: pointer;
+    position: absolute;
+    top: ${core.rem(6)};
+    right: ${core.rem(6)};
+    background: ${miscTheme.theme.colors.black};
+    border-radius: ${core.rem(12)};
+    padding: ${core.rem(2)};
+    display: flex;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+`;
+const StyledImageUploadPreviewContainerGroup = styled__default["default"].div `
+  display: flex;
+  gap: ${core.rem(8)};
+  margin-top: ${core.rem(18)};
+`;
+
+React.forwardRef(({ label, name, error, acceptedTypes = [
+    ImageUpload_types.FILE_UPLOAD_ACCEPTED_TYPES.PNG,
+    ImageUpload_types.FILE_UPLOAD_ACCEPTED_TYPES.JPG,
+    ImageUpload_types.FILE_UPLOAD_ACCEPTED_TYPES.JPEG,
+], maxSize = 1, acceptedRatios, multiple = false, disabled = false, id, className, onChange, value, showValidationRules = false, description, useBase64 = false, placeholder = 'Upload photo', }, ref) => {
+    const [isDragOver, setIsDragOver] = React.useState(false);
+    const [validationErrors, setValidationErrors] = React.useState([]);
+    const fileInputRef = React.useRef(null);
+    const hasError = Boolean(error) || validationErrors.length > 0;
+    const normalizedValue = React.useMemo(() => {
+        if (!value)
+            return [];
+        return Array.isArray(value) ? value : [value];
+    }, [value]);
+    const validateFile = React.useCallback((file) => {
+        var _a;
+        const errors = [];
+        const fileExtension = '.' + ((_a = file.name.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+        if (!acceptedTypes.includes(fileExtension)) {
+            errors.push(`Unsupported file format. Please upload a ${acceptedTypes.join(', ')} file.`);
+        }
+        const fileSizeMB = file.size / (1024 * 1024);
+        if (fileSizeMB > maxSize) {
+            errors.push(`File too large. Please upload an image smaller than ${maxSize}MB.`);
+        }
+        return {
+            file,
+            isValid: errors.length === 0,
+            errors,
+        };
+    }, [acceptedTypes, maxSize]);
+    const validateImageRatio = React.useCallback((file) => {
+        return new Promise((resolve) => {
+            if (!acceptedRatios ||
+                !acceptedRatios.length ||
+                !file.type.startsWith('image/')) {
+                resolve([]);
+                return;
+            }
+            const img = new Image();
+            img.onload = () => {
+                const ratio = img.width / img.height;
+                const ratioString = `${ratio.toFixed(1)}:1`;
+                const isValidRatio = acceptedRatios.some((acceptedRatio) => {
+                    const [w, h] = acceptedRatio.split(':');
+                    const expectedRatio = parseInt(w) / parseInt(h);
+                    return Math.abs(ratio - expectedRatio) < 0.1;
+                });
+                resolve(isValidRatio
+                    ? []
+                    : [`Image ratio ${ratioString} is not accepted.`]);
+            };
+            img.onerror = () => resolve(['Invalid image file']);
+            img.src = URL.createObjectURL(file);
+        });
+    }, [acceptedRatios]);
+    const previewList = React.useMemo(() => {
+        return normalizedValue
+            .map((val) => {
+            if (typeof val === 'string')
+                return val;
+            if (val instanceof File)
+                return URL.createObjectURL(val);
+            return '';
+        })
+            .filter(Boolean);
+    }, [normalizedValue]);
+    const processFiles = React.useCallback((files) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        const fileArray = Array.from(files);
+        const allErrors = [];
+        const validFiles = [];
+        for (const file of fileArray) {
+            const validation = validateFile(file);
+            const ratioErrors = yield validateImageRatio(file);
+            const allFileErrors = [...validation.errors, ...ratioErrors];
+            if (allFileErrors.length === 0) {
+                validFiles.push(file);
+            }
+            else {
+                allErrors.push(...allFileErrors);
+            }
+        }
+        setValidationErrors(allErrors);
+        if (validFiles.length === 0)
+            return;
+        const resultList = useBase64
+            ? yield handleMultipleImageFiles(validFiles)
+            : validFiles;
+        onChange({
+            target: {
+                name,
+                value: multiple
+                    ? [...normalizedValue, ...resultList]
+                    : resultList.slice(0, 1),
+            },
+        });
+    }), [
+        validateFile,
+        validateImageRatio,
+        multiple,
+        onChange,
+        name,
+        normalizedValue,
+    ]);
+    const handleFileInputChange = (e) => {
+        const files = e.target.files;
+        if (files && files.length > 0) {
+            processFiles(files);
+        }
+    };
+    const removeFile = (index) => {
+        const newFiles = normalizedValue.filter((_, i) => i !== index);
+        setValidationErrors([]);
+        onChange({
+            target: {
+                name,
+                value: multiple ? newFiles : '', // empty string if not multiple
+            },
+        });
+    };
+    const combinedRef = React.useCallback((e) => {
+        fileInputRef.current = e;
+        if (typeof ref === 'function') {
+            ref(e);
+        }
+        else if (ref) {
+            ref.current = e;
+        }
+    }, [ref]);
+    const handleClick = React.useCallback(() => {
+        if (!disabled && fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    }, [disabled]);
+    const handleDragEnter = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+    }, []);
+    const handleDragOver = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            processFiles(files);
+        }
+    }, [processFiles]);
+    return (React__default["default"].createElement(StyledImageUploadWrapper, { className: className },
+        React__default["default"].createElement("label", { htmlFor: id || name },
+            typeof label === 'string' ? (React__default["default"].createElement(index$l.Text, { size: "title2" }, label)) : (label),
+            description && (React__default["default"].createElement(index$l.Text, { size: "p3", mt: core.rem(4), color: miscTheme.theme.colors.gray700 }, description))),
+        showValidationRules && (React__default["default"].createElement(StyledImageUploadContent, null,
+            React__default["default"].createElement(index$l.Text, { size: "p3" },
+                "Formats: ",
+                acceptedTypes.join('/')),
+            acceptedRatios && (React__default["default"].createElement(index$l.Text, { size: "p3" },
+                "Max size: ",
+                maxSize,
+                "MB - Accepted ratios:",
+                ' ',
+                acceptedRatios.join('/'))))),
+        (multiple || normalizedValue.length === 0) && (React__default["default"].createElement(StyledImageUploadInputWrapper, { className: core.clsx(isDragOver && 'image-upload-dragover', hasError && 'image-upload-error', disabled && 'image-upload-disabled'), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick },
+            React__default["default"].createElement("input", { ref: combinedRef, type: "file", id: id || name, name: name, accept: acceptedTypes.join(','), multiple: multiple, onChange: handleFileInputChange, disabled: disabled }),
+            React__default["default"].createElement(Upload.Upload, null),
+            React__default["default"].createElement(index$l.Text, { size: "p3", fw: 500 }, placeholder))),
+        normalizedValue.length > 0 && (React__default["default"].createElement(StyledImageUploadPreviewContainerGroup, null, previewList.map((img, index) => (React__default["default"].createElement(StyledImageUploadPreviewContainer, { key: index },
+            React__default["default"].createElement("img", { src: img, alt: `Uploaded file ${index + 1}`, className: "image-upload-preview-image" }),
+            React__default["default"].createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    removeFile(index);
+                }, className: "image-upload-remove-button" },
+                React__default["default"].createElement(Close.Close, null))))))),
+        hasError && (React__default["default"].createElement("div", { className: "image-upload-input-error" }, [...validationErrors, error].map((err) => (React__default["default"].createElement(index$l.Text, { key: err, className: "error-text", size: "c1", color: miscTheme.theme.colors.red600 }, err)))))));
+});
 
-exports.Alert = index.Alert;
-exports.Badge = index.Badge;
-exports.BorderHeading = index.BorderHeading;
-exports.CardCollapse = index.CardCollapse;
-exports.DragFreeCarousel = index.DragFreeCarousel;
+exports.Alert = ImageUpload_types.Alert;
+exports.Badge = ImageUpload_types.Badge;
+exports.BorderHeading = ImageUpload_types.BorderHeading;
+exports.CardCollapse = ImageUpload_types.CardCollapse;
 Object.defineProperty(exports, 'FILE_UPLOAD_ACCEPTED_RATIOS', {
   enumerable: true,
-  get: function () { return index.FILE_UPLOAD_ACCEPTED_RATIOS; }
+  get: function () { return ImageUpload_types.FILE_UPLOAD_ACCEPTED_RATIOS; }
 });
 Object.defineProperty(exports, 'FILE_UPLOAD_ACCEPTED_TYPES', {
   enumerable: true,
-  get: function () { return index.FILE_UPLOAD_ACCEPTED_TYPES; }
+  get: function () { return ImageUpload_types.FILE_UPLOAD_ACCEPTED_TYPES; }
 });
-exports.FileDropdown = index.FileDropdown;
-exports.Grid = index.Grid;
-exports.HtmlContent = index.HtmlContent;
-exports.IconHeading = index.IconHeading;
-exports.ImageUpload = index.ImageUpload;
-exports.Radio = index.Radio;
-exports.RateStars = index.RateStars;
-exports.StepRenderer = index.StepRenderer;
-exports.StepRendererContext = index.StepRendererContext;
-exports.Tag = index.Tag;
-exports.Toggle = index.Toggle;
-exports.Avatar = index$1.Avatar;
-exports.DistanceTag = index$1.DistanceTag;
-exports.DrawerBottom = index$1.DrawerBottom;
-exports.IconWrapper = index$1.IconWrapper;
-exports.Button = index$2.Button;
-exports.Checkbox = index$3.Checkbox;
-exports.Pagination = index$3.Pagination;
-exports.PureInput = index$3.PureInput;
-exports.SearchInput = index$3.SearchInput;
-exports.StyledSearchIcon = index$3.StyledSearchIcon;
-exports.Container = index$4.Container;
-exports.Divider = index$5.Divider;
-exports.Drawer = index$6.Drawer;
-exports.Flag = index$7.Flag;
-exports.Heading = index$8.Heading;
-exports.Icon = index$9.Icon;
-exports.Input = index$a.Input;
-exports.Label = index$a.Label;
-exports.Logo = index$b.Logo;
-exports.RadioImageGroup = index$c.RadioImageGroup;
-exports.Text = index$d.Text;
-exports.TextArea = index$e.TextArea;
-exports.AuthorBadge = index$f.AuthorBadge;
-exports.BookingBtn = index$f.BookingBtn;
-exports.BtnChoice = index$g.BtnChoice;
-exports.CustomReferenceDot = index$h.CustomReferenceDot;
-exports.ImageWrap = index$i.ImageWrap;
+exports.FileDropdown = ImageUpload_types.FileDropdown;
+exports.Grid = ImageUpload_types.Grid;
+exports.HtmlContent = ImageUpload_types.HtmlContent;
+exports.IconHeading = ImageUpload_types.IconHeading;
+exports.Radio = ImageUpload_types.Radio;
+exports.RateStars = ImageUpload_types.RateStars;
+exports.StepRenderer = ImageUpload_types.StepRenderer;
+exports.StepRendererContext = ImageUpload_types.StepRendererContext;
+exports.Tag = ImageUpload_types.Tag;
+exports.Toggle = ImageUpload_types.Toggle;
+exports.Avatar = index.Avatar;
+exports.DistanceTag = index.DistanceTag;
+exports.IconWrapper = index.IconWrapper;
+exports.Button = index$1.Button;
+exports.Checkbox = index$2.Checkbox;
+exports.Pagination = index$2.Pagination;
+exports.PureInput = index$2.PureInput;
+exports.SearchInput = index$2.SearchInput;
+exports.StyledSearchIcon = index$2.StyledSearchIcon;
+exports.Container = index$3.Container;
+exports.Divider = index$4.Divider;
+exports.Drawer = index$5.Drawer;
+exports.Flag = index$6.Flag;
+exports.Heading = index$7.Heading;
+exports.Icon = index$8.Icon;
+exports.Input = index$9.Input;
+exports.Label = index$9.Label;
+exports.Logo = index$a.Logo;
+exports.RadioImageGroup = index$b.RadioImageGroup;
+exports.Text = index$c.Text;
+exports.TextArea = index$d.TextArea;
+exports.AuthorBadge = index$e.AuthorBadge;
+exports.BookingBtn = index$e.BookingBtn;
+exports.BtnChoice = index$f.BtnChoice;
+exports.CustomReferenceDot = index$g.CustomReferenceDot;
+exports.ImageWrap = index$h.ImageWrap;
 exports.LogoIcon = logoIcon.LogoIcon;
-exports.GenderOptionControl = index$j.GenderOptionControl;
-exports.Loading = index$k.Loading;
-exports.DrawerComponent = index$l.DrawerComponent;
+exports.GenderOptionControl = index$i.GenderOptionControl;
+exports.Loading = index$j.Loading;
+exports.DrawerComponent = index$k.DrawerComponent;
 exports.InputDate = InputDate.InputDate;