@hhgtech/hhg-components 1.29.434-beta-6 → 1.29.434-beta-9

package/build/atoms.js

@@ -2,84 +2,395 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-a22036ff.js');
-var index$1 = require('./index-d4ab84d8.js');
-var index$2 = require('./index-fafc3fff.js');
-var index$3 = require('./index-a0924db7.js');
-var index$4 = require('./index-06ab8a5f.js');
-var index$5 = require('./index-1c596f98.js');
-var index$6 = require('./index-36b65f86.js');
-var index$7 = require('./index-7e6acf17.js');
-var index$8 = require('./index-61e3a6d9.js');
-var index$9 = require('./index-3787ca10.js');
-var index$a = require('./index-6e37811c.js');
-var index$b = require('./index-41045a03.js');
-var index$c = require('./index-a9f1a81d.js');
-var index$d = require('./index-f42c890a.js');
-var index$e = require('./index-634a0248.js');
-var index$f = require('./index-c19567fd.js');
-var index$g = require('./index-dd2985a5.js');
-var index$h = require('./index-e90b4259.js');
-var index$i = require('./index-abda1a2a.js');
-var logoIcon = require('./logoIcon-aa64ff8e.js');
-var index$j = require('./index-b7d80833.js');
-var index$k = require('./index-9bdbe814.js');
-var index$l = require('./index-1db38fcf.js');
-var InputDate = require('./InputDate-309bbfda.js');
-require('react');
-require('./index-ff33d353.js');
-require('./tslib.es6-a3550a91.js');
-require('@mantine/core');
-require('./text-0541ec8d.js');
-require('@emotion/styled');
-require('./miscTheme.js');
-require('./utils-f27ad070.js');
+var index = require('./index-18f389c1.js');
+var index$1 = require('./index-79ba6db4.js');
+var index$2 = require('./index-4baf4ddc.js');
+var index$3 = require('./index-a968c722.js');
+var index$4 = require('./index-b9681b68.js');
+var index$5 = require('./index-ec91ef32.js');
+var index$6 = require('./index-e16c7e60.js');
+var index$7 = require('./index-21a3777a.js');
+var index$8 = require('./index-a6a28783.js');
+var index$9 = require('./index-98b1e192.js');
+var index$a = require('./index-64adc16d.js');
+var index$b = require('./index-9cc3c5a1.js');
+var index$c = require('./index-459fb05e.js');
+var index$d = require('./index-169688df.js');
+var index$e = require('./index-08f9b5af.js');
+var index$f = require('./index-d5e0e539.js');
+var index$g = require('./index-c1c0f1f2.js');
+var index$h = require('./index-7182e218.js');
+var index$i = require('./index-6657e053.js');
+var logoIcon = require('./logoIcon-76355ef0.js');
+var index$j = require('./index-aceb513c.js');
+var index$k = require('./index-a7700885.js');
+var index$l = require('./index-2c72fa89.js');
+var InputDate = require('./InputDate-5c5a886e.js');
+var tslib_es6 = require('./tslib.es6-6465097a.js');
+var React = require('react');
+var core = require('@mantine/core');
+var Close = require('./Close-b8d4a680.js');
+var Upload = require('./Upload-a1b5c7a0.js');
+var styled = require('@emotion/styled');
+var miscTheme = require('./miscTheme.js');
+var index$m = require('./index-f029572e.js');
+require('./utils-aa8dec86.js');
 require('@mantine/hooks');
 require('./miscDefaultClassWrapper.js');
 require('react-keyed-flatten-children');
-require('./Close-2aeca77a.js');
 require('@mantine/carousel');
-require('./index-474d82c2.js');
-require('./shared-233ae69a.js');
+require('./index-0b3a95fd.js');
+require('./shared-736c3b5b.js');
+require('./text-f043a2ed.js');
 require('@mantine/dates');
-require('./index-0c0dfaef.js');
+require('./index-763697ad.js');
 require('date-fns/locale');
-require('./index-4a851fcc.js');
-require('./Locale-0291f816.js');
+require('./index-c567851e.js');
+require('./Locale-aba625ef.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./index-1e4bf333.js');
-require('./index-e4b581e0.js');
+require('./index-b3caf7c4.js');
+require('./index-5762a1f9.js');
 require('dayjs');
 require('@mantine/notifications');
-require('./index.styles-c7203957.js');
-require('./translationsContext-d5089cd8.js');
-require('./index-5a863dec.js');
+require('./index.styles-221cd30d.js');
+require('./translationsContext-2fcb2127.js');
+require('./index-6d245ce7.js');
 require('@hhgtech/icons/other');
 require('@emotion/react');
-require('./animation-39223b8b.js');
+require('./animation-bfb59207.js');
 require('classnames');
-require('uuid');
-require('./useUniqueId-0b33e5b0.js');
+require('./useUniqueId-0e466b02.js');
 require('@hhgtech/icons/core');
-require('./WhatsApp-194bab52.js');
-require('./Spinner-575bf837.js');
-require('./index-6c0744ec.js');
-require('./index-106352a1.js');
-require('./paths-3bf346f8.js');
-require('./constants-142c68f1.js');
-require('./utils-1e2aa4a8.js');
-require('./index-dbc7e96c.js');
+require('./WhatsApp-83608b83.js');
+require('./Spinner-fb107446.js');
+require('./index-b12a8ac7.js');
+require('./index-3500465d.js');
+require('./paths-3f0c4f93.js');
+require('./constants-82e09610.js');
+require('./utils-64290ae5.js');
+require('./index-5296bee2.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-70b285c4.js');
+require('./constants-a3394a48.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 = [
+    index.FILE_UPLOAD_ACCEPTED_TYPES.PNG,
+    index.FILE_UPLOAD_ACCEPTED_TYPES.JPG,
+    index.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$m.Text, { size: "title2" }, label)) : (label),
+            description && (React__default["default"].createElement(index$m.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$m.Text, { size: "p3" },
+                "Formats: ",
+                acceptedTypes.join('/')),
+            acceptedRatios && (React__default["default"].createElement(index$m.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$m.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$m.Text, { key: err, className: "error-text", size: "c1", color: miscTheme.theme.colors.red600 }, err)))))));
+});
 
 exports.Alert = index.Alert;
 exports.Badge = index.Badge;
@@ -98,7 +409,6 @@ 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;