@hhgtech/hhg-components 1.29.431-beta-2 → 1.29.432-beta-1

package/build/atoms.js

@@ -2,88 +2,409 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-259f5c4b.js');
-var index$1 = require('./index-ec2b00e1.js');
-var index$2 = require('./index-24781cb2.js');
-var index$3 = require('./index-60bc5082.js');
-var index$4 = require('./index-7fe12f20.js');
-var index$5 = require('./index-a29ccc0e.js');
-var index$6 = require('./index-4e84bdc8.js');
-var index$7 = require('./index-6d11558a.js');
-var index$8 = require('./index-a2c2dbe9.js');
-var index$9 = require('./index-0a9a537d.js');
-var index$a = require('./index-29a88110.js');
-var index$b = require('./index-5c5d8e88.js');
-var index$c = require('./index-b6102036.js');
-var index$d = require('./index-5c1614fa.js');
-var index$e = require('./index-73923dee.js');
-var index$f = require('./index-8fe26fb6.js');
-var index$g = require('./index-098e0a89.js');
-var index$h = require('./index-d333b01b.js');
-var index$i = require('./index-8f8e535c.js');
-var logoIcon = require('./logoIcon-6723cec9.js');
-var index$j = require('./index-0ff06aef.js');
-var index$k = require('./index-7ade673a.js');
-var index$l = require('./index-8f59559d.js');
-var InputDate = require('./InputDate-078ab5aa.js');
-require('react');
-require('./index-b68e1442.js');
-require('./tslib.es6-370364b7.js');
-require('@mantine/core');
-require('./text-2eaa7a96.js');
-require('@emotion/styled');
-require('./miscTheme.js');
-require('./utils-4249781d.js');
+var index = require('./index-b5474a2b.js');
+var index$1 = require('./index-ae7b428b.js');
+var index$2 = require('./index-8fc4e19c.js');
+var index$3 = require('./index-e0016525.js');
+var index$4 = require('./index-e028d5cf.js');
+var index$5 = require('./index-480cfab7.js');
+var index$6 = require('./index-5f21c7ed.js');
+var index$7 = require('./index-94287b20.js');
+var index$8 = require('./index-d6a81a68.js');
+var index$9 = require('./index-bde7c053.js');
+var index$a = require('./index-80064ca0.js');
+var index$b = require('./index-863ed135.js');
+var index$c = require('./index-55d5ca00.js');
+var index$d = require('./index-35433f61.js');
+var index$e = require('./index-33d967f8.js');
+var index$f = require('./index-c9965e37.js');
+var index$g = require('./index-a1512102.js');
+var index$h = require('./index-2234d245.js');
+var index$i = require('./index-4e0dc8e3.js');
+var logoIcon = require('./logoIcon-3a1b3b9b.js');
+var index$j = require('./index-447bd0bc.js');
+var index$k = require('./index-73b4eebb.js');
+var index$l = require('./index-5ef8d926.js');
+var InputDate = require('./InputDate-14bc7a0a.js');
+var tslib_es6 = require('./tslib.es6-7f95245a.js');
+var React = require('react');
+var core = require('@mantine/core');
+var Close = require('./Close-d4550e62.js');
+var Upload = require('./Upload-28848dcb.js');
+var styled = require('@emotion/styled');
+var miscTheme = require('./miscTheme.js');
+var index$m = require('./index-56169eaa.js');
+require('./utils-cf895ec3.js');
 require('@mantine/hooks');
 require('./miscDefaultClassWrapper.js');
 require('react-keyed-flatten-children');
 require('@mantine/carousel');
-require('./index-6a549749.js');
-require('./shared-1f6a17b8.js');
+require('./index-8c0c3fda.js');
+require('./shared-648f497f.js');
+require('./text-85f98d93.js');
 require('@mantine/dates');
-require('./index-b4fbb091.js');
+require('./index-1f96b2bf.js');
 require('date-fns/locale');
-require('./index-e6aaedf8.js');
-require('./Locale-1251caf9.js');
+require('./index-476ad1f4.js');
+require('./Locale-3a195369.js');
 require('./constantsSite.js');
 require('./constantsDomainLocales.js');
 require('./constantsRiskScreener.js');
 require('./constantsIsProduction.js');
-require('./index-f3e2a299.js');
-require('./index-60ff3f94.js');
+require('./index-e848ebd1.js');
+require('./index-220a2a7a.js');
 require('dayjs');
 require('@mantine/notifications');
-require('./index.styles-8c61f4be.js');
-require('./translationsContext-b797b2e1.js');
-require('./index-395c64b6.js');
+require('./index.styles-18f79820.js');
+require('./translationsContext-6fc18e75.js');
+require('./index-6c34e617.js');
 require('@hhgtech/icons/other');
 require('@emotion/react');
-require('./animation-03978149.js');
+require('./animation-20009841.js');
 require('classnames');
-require('./useUniqueId-a18cf14d.js');
+require('./useUniqueId-807fe748.js');
 require('@hhgtech/icons/core');
-require('./WhatsApp-b5fe357f.js');
-require('./Spinner-fbb7702d.js');
-require('./index-d53859b3.js');
-require('./index-ff7f6ccc.js');
-require('./paths-bbc05982.js');
-require('./constants-e7ffc3c1.js');
-require('./utils-dbe7248e.js');
-require('./index-4273987f.js');
+require('./WhatsApp-73786a9a.js');
+require('./Spinner-06596750.js');
+require('./index-4c41858c.js');
+require('./index-b02dd8de.js');
+require('./paths-e673deff.js');
+require('./constants-5ec3039f.js');
+require('./utils-87ad4486.js');
+require('./index-1d4875bc.js');
 require('./miscCookieHelper.js');
 require('slugify');
 require('string-format');
 require('./togetherApiPaths.js');
-require('./constants-ec828833.js');
+require('./constants-f39e6af1.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;
 exports.BorderHeading = index.BorderHeading;
 exports.CardCollapse = index.CardCollapse;
 exports.DragFreeCarousel = index.DragFreeCarousel;
+Object.defineProperty(exports, 'FILE_UPLOAD_ACCEPTED_RATIOS', {
+  enumerable: true,
+  get: function () { return index.FILE_UPLOAD_ACCEPTED_RATIOS; }
+});
+Object.defineProperty(exports, 'FILE_UPLOAD_ACCEPTED_TYPES', {
+  enumerable: true,
+  get: function () { return index.FILE_UPLOAD_ACCEPTED_TYPES; }
+});
 exports.FileDropdown = index.FileDropdown;
 exports.Grid = index.Grid;
 exports.HtmlContent = index.HtmlContent;