@hhgtech/hhg-components 1.29.433 → 1.29.434-beta-2

package/build/esm/{ImageUpload.types-44e95f83.js → index-10392644.js}

@@ -1,20 +1,27 @@
-import React__default, { useState, useRef, createContext, useEffect, Fragment } from 'react';
-import { T as Text } from './index-4288764b.js';
+import * as React from 'react';
+import React__default, { useState, useRef, createContext, useEffect, Fragment, forwardRef, useMemo, useCallback } from 'react';
+import { T as Text } from './index-f65c7844.js';
 import styled from '@emotion/styled';
 import { theme } from './miscTheme.js';
-import { M as MediaQueries } from './utils-94f3e27e.js';
-import { Collapse } from '@mantine/core';
+import { M as MediaQueries } from './utils-4eaa39a7.js';
+import { Collapse, rem, clsx } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { S as ShapedArrowDown } from './index-db240e2e.js';
-import { R as Radio$1 } from './index-3bbc49c3.js';
-import { _ as __rest } from './tslib.es6-cef845e5.js';
-import { T as Text$1 } from './index-89362365.js';
+import { S as ShapedArrowDown } from './index-e3748cc0.js';
+import { R as Radio$1 } from './index-f8edffe6.js';
+import { _ as __rest, a as __awaiter } from './tslib.es6-65d85c84.js';
+import { T as Text$1 } from './index-d1892b36.js';
 import { setDefaultClass } from './miscDefaultClassWrapper.js';
 import flattenChildren from 'react-keyed-flatten-children';
-import { H as Heading } from './index-3ac056d4.js';
+import { H as Heading } from './index-ef671917.js';
+import { C as Close } from './Close-e8f81044.js';
+import { Carousel } from '@mantine/carousel';
 
 var styles = {"alert":"CHw-fZZ","content":"_03U6VRS","close":"EO828Vv"};
 
+/* eslint-disable prettier/prettier */
+const Upload = (props) => (React.createElement("svg", Object.assign({ width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none" }, props),
+    React.createElement("path", { d: "M9.82324 8.7033L10.8228 9.70287C10.9267 9.80662 11.056 9.8573 11.2107 9.85493C11.3655 9.85255 11.4948 9.79943 11.5987 9.69555C11.7026 9.59168 11.7545 9.46074 11.7545 9.30274C11.7545 9.14474 11.7026 9.01462 11.5987 8.91237L9.7353 7.04899C9.59968 6.91337 9.44149 6.84555 9.26074 6.84555C9.07999 6.84555 8.9218 6.91337 8.78618 7.04899L6.91549 8.91968C6.81174 9.02355 6.75987 9.15287 6.75987 9.30762C6.75987 9.46237 6.81174 9.59168 6.91549 9.69555C7.01937 9.79943 7.1503 9.85137 7.3083 9.85137C7.4663 9.85137 7.59643 9.79943 7.69868 9.69555L8.69824 8.7033L8.69824 11.5576C8.69824 11.717 8.75218 11.8506 8.86005 11.9583C8.96793 12.0662 9.10156 12.1201 9.26093 12.1201C9.42043 12.1201 9.55399 12.0662 9.66162 11.9583C9.76937 11.8506 9.82324 11.717 9.82324 11.5576L9.82324 8.7033ZM16.3857 9.3063C16.3857 10.2918 16.1987 11.2181 15.8247 12.0852C15.4507 12.9524 14.9432 13.7066 14.3021 14.348C13.6609 14.9894 12.907 15.4972 12.0402 15.8714C11.1735 16.2456 10.2474 16.4326 9.26205 16.4326C8.27655 16.4326 7.35024 16.2456 6.48312 15.8716C5.61599 15.4976 4.86174 14.9901 4.22037 14.3489C3.57899 13.7078 3.07118 12.9539 2.69693 12.0871C2.3228 11.2204 2.13574 10.2943 2.13574 9.30893C2.13574 8.32343 2.32274 7.39712 2.69674 6.52999C3.07074 5.66287 3.5783 4.90862 4.21943 4.26724C4.86055 3.62587 5.61449 3.11805 6.48124 2.7438C7.34799 2.36968 8.27405 2.18262 9.25943 2.18262C10.2449 2.18262 11.1712 2.36962 12.0384 2.74362C12.9055 3.11762 13.6597 3.62518 14.3011 4.2663C14.9425 4.90743 15.4503 5.66137 15.8246 6.52812C16.1987 7.39487 16.3857 8.32093 16.3857 9.3063ZM15.2607 9.30762C15.2607 7.63262 14.6795 6.21387 13.517 5.05137C12.3545 3.88887 10.9357 3.30762 9.26074 3.30762C7.58574 3.30762 6.16699 3.88887 5.00449 5.05137C3.84199 6.21387 3.26074 7.63262 3.26074 9.30762C3.26074 10.9826 3.84199 12.4014 5.00449 13.5639C6.16699 14.7264 7.58574 15.3076 9.26074 15.3076C10.9357 15.3076 12.3545 14.7264 13.517 13.5639C14.6795 12.4014 15.2607 10.9826 15.2607 9.30762Z", fill: "#595959" })));
+
 /**
  * @deprecated Consider to use Mantine
  */
@@ -213,29 +220,34 @@ const StyledCardCollapse = styled.div `
     flex-shrink: 0;
     color: ${theme.colors.neutral800};
   }
-  .title {
+  .title-collapse {
     color: #111111;
     font-weight: var(--fwSemiBold);
-    font-size: 0.9375rem;
+    font-size: 1.0625rem;
     line-height: 1.5rem;
     flex-grow: 1;
   }
 `;
 const StyledBox = styled.div `
   display: flex;
-  padding: 1rem;
+  padding: 1.5rem 1rem 1rem 1rem;
   gap: 0.75rem;
   align-items: center;
 `;
 
-function CardCollapse({ children, title, icon, defaultOpened = true, id, }) {
+function CardCollapse({ children, title, icon, defaultOpened = true, haveCollapse = true, id, }) {
     const [opened, { toggle }] = useDisclosure(defaultOpened);
+    const handleClick = () => {
+        if (haveCollapse) {
+            toggle();
+        }
+    };
     return (React__default.createElement(StyledCardCollapse, { id: id },
-        React__default.createElement(StyledBox, { onClick: toggle },
-            icon,
-            React__default.createElement("div", { className: "title" }, title),
-            React__default.createElement(StyledArrowDownIcon, { "data-is-collapsed": opened })),
-        React__default.createElement(Collapse, { in: opened, transitionDuration: 200, transitionTimingFunction: "ease" }, children)));
+        React__default.createElement(StyledBox, { onClick: handleClick },
+            haveCollapse && icon,
+            React__default.createElement("div", { className: "title-collapse" }, title),
+            haveCollapse && React__default.createElement(StyledArrowDownIcon, { "data-is-collapsed": opened })),
+        React__default.createElement(Collapse, { in: haveCollapse ? opened : true, transitionDuration: 200, transitionTimingFunction: "ease" }, children)));
 }
 
 const StyledDropdown = styled.div `
@@ -798,4 +810,323 @@ var FILE_UPLOAD_ACCEPTED_TYPES;
     FILE_UPLOAD_ACCEPTED_TYPES["JPEG"] = ".jpeg";
 })(FILE_UPLOAD_ACCEPTED_TYPES || (FILE_UPLOAD_ACCEPTED_TYPES = {}));
 
-export { Alert as A, Badge as B, CardCollapse as C, FileDropdown as F, Grid as G, HtmlContent as H, IconHeading as I, Radio as R, StepRenderer as S, Tag as T, BorderHeading as a, RateStars as b, Toggle as c, StepRendererContext as d, FILE_UPLOAD_ACCEPTED_RATIOS as e, FILE_UPLOAD_ACCEPTED_TYPES as f };
+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) => __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.div `
+  display: flex;
+  flex-direction: column;
+
+  .image-upload-input-error {
+    margin-top: ${rem(12)};
+    display: flex;
+    flex-direction: column;
+    gap: ${rem(4)};
+  }
+`;
+const StyledImageUploadContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${rem(4)};
+  margin-top: ${rem(4)};
+
+  span {
+    color: ${theme.colors.neutral500};
+  }
+`;
+const StyledImageUploadInputWrapper = styled.div `
+  position: relative;
+  width: fit-content;
+  padding: ${rem(8)} ${rem(12)};
+  border-radius: ${rem(12)};
+  border: ${rem(1)} solid ${theme.colors.neutral200};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: ${rem(8)};
+  margin-top: ${rem(18)};
+
+  &.image-upload-dragover {
+    border-color: ${theme.colors.primaryBase};
+  }
+
+  &.image-upload-error {
+    border-color: ${theme.colors.error};
+  }
+
+  &.image-upload-disabled {
+    cursor: not-allowed;
+    background-color: ${theme.colors.gray100};
+    color: ${theme.colors.gray400};
+    border-color: ${theme.colors.gray200};
+  }
+
+  svg {
+    width: ${rem(18)};
+    height: ${rem(18)};
+  }
+
+  input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: -1;
+  }
+`;
+const StyledImageUploadPreviewContainer = styled.div `
+  position: relative;
+  width: ${rem(90)};
+  height: ${rem(90)};
+  border-radius: ${rem(12)};
+  overflow: hidden;
+  background-color: ${theme.colors.gray100};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  svg {
+    width: ${rem(14)};
+    height: ${rem(14)};
+    color: ${theme.colors.white};
+  }
+
+  .image-upload-remove-button {
+    cursor: pointer;
+    position: absolute;
+    top: ${rem(6)};
+    right: ${rem(6)};
+    background: ${theme.colors.black};
+    border-radius: ${rem(12)};
+    padding: ${rem(2)};
+    display: flex;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+`;
+const StyledImageUploadPreviewContainerGroup = styled.div `
+  display: flex;
+  gap: ${rem(8)};
+  margin-top: ${rem(18)};
+`;
+
+const ImageUpload = forwardRef(({ label, name, error, acceptedTypes = [
+    FILE_UPLOAD_ACCEPTED_TYPES.PNG,
+    FILE_UPLOAD_ACCEPTED_TYPES.JPG,
+    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] = useState(false);
+    const [validationErrors, setValidationErrors] = useState([]);
+    const fileInputRef = useRef(null);
+    const hasError = Boolean(error) || validationErrors.length > 0;
+    const normalizedValue = useMemo(() => {
+        if (!value)
+            return [];
+        return Array.isArray(value) ? value : [value];
+    }, [value]);
+    const validateFile = 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 = 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 = 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 = useCallback((files) => __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 = useCallback((e) => {
+        fileInputRef.current = e;
+        if (typeof ref === 'function') {
+            ref(e);
+        }
+        else if (ref) {
+            ref.current = e;
+        }
+    }, [ref]);
+    const handleClick = useCallback(() => {
+        if (!disabled && fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    }, [disabled]);
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            processFiles(files);
+        }
+    }, [processFiles]);
+    return (React__default.createElement(StyledImageUploadWrapper, { className: className },
+        React__default.createElement("label", { htmlFor: id || name },
+            typeof label === 'string' ? (React__default.createElement(Text, { size: "title2" }, label)) : (label),
+            description && (React__default.createElement(Text, { size: "p3", mt: rem(4), color: theme.colors.gray700 }, description))),
+        showValidationRules && (React__default.createElement(StyledImageUploadContent, null,
+            React__default.createElement(Text, { size: "p3" },
+                "Formats: ",
+                acceptedTypes.join('/')),
+            acceptedRatios && (React__default.createElement(Text, { size: "p3" },
+                "Max size: ",
+                maxSize,
+                "MB - Accepted ratios:",
+                ' ',
+                acceptedRatios.join('/'))))),
+        (multiple || normalizedValue.length === 0) && (React__default.createElement(StyledImageUploadInputWrapper, { className: 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.createElement("input", { ref: combinedRef, type: "file", id: id || name, name: name, accept: acceptedTypes.join(','), multiple: multiple, onChange: handleFileInputChange, disabled: disabled }),
+            React__default.createElement(Upload, null),
+            React__default.createElement(Text, { size: "p3", fw: 500 }, placeholder))),
+        normalizedValue.length > 0 && (React__default.createElement(StyledImageUploadPreviewContainerGroup, null, previewList.map((img, index) => (React__default.createElement(StyledImageUploadPreviewContainer, { key: index },
+            React__default.createElement("img", { src: img, alt: `Uploaded file ${index + 1}`, className: "image-upload-preview-image" }),
+            React__default.createElement("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    removeFile(index);
+                }, className: "image-upload-remove-button" },
+                React__default.createElement(Close, null))))))),
+        hasError && (React__default.createElement("div", { className: "image-upload-input-error" }, [...validationErrors, error].map((err) => (React__default.createElement(Text, { key: err, className: "error-text", size: "c1", color: theme.colors.red600 }, err)))))));
+});
+
+const StyledCarousel = styled(Carousel) `
+  & .mantine-Carousel-control {
+    width: auto;
+  }
+`;
+
+const DragFreeCarousel = (_a) => {
+    var { children, gapItem = 8, slideSize = 'auto', withControls = false, withIndicators = false, dragFree = true, align = 'start' } = _a, otherProps = __rest(_a, ["children", "gapItem", "slideSize", "withControls", "withIndicators", "dragFree", "align"]);
+    return (React__default.createElement(StyledCarousel, Object.assign({ slideSize: slideSize, slideGap: gapItem, withControls: withControls, withIndicators: withIndicators, dragFree: dragFree, align: align, containScroll: "trimSnaps" }, otherProps), React__default.Children.map(children, (child, index) => (React__default.createElement(Carousel.Slide, { key: index }, child)))));
+};
+
+export { Alert as A, Badge as B, CardCollapse as C, DragFreeCarousel as D, FileDropdown as F, Grid as G, HtmlContent as H, IconHeading as I, Radio as R, StepRenderer as S, Tag as T, Upload as U, BorderHeading as a, RateStars as b, Toggle as c, StepRendererContext as d, ImageUpload as e, FILE_UPLOAD_ACCEPTED_RATIOS as f, FILE_UPLOAD_ACCEPTED_TYPES as g };

package/build/esm/{index-64114837.js → index-112446ca.js}

@@ -1,11 +1,11 @@
 import React__default, { useState, useEffect } from 'react';
-import { L as LOCALE } from './Locale-aaa3e640.js';
-import { C as CommonGAssets } from './index-b478f836.js';
+import { L as LOCALE } from './Locale-6fb06008.js';
+import { C as CommonGAssets } from './index-43415278.js';
 import styled from '@emotion/styled';
-import { M as MediaQueries } from './utils-94f3e27e.js';
-import { L as LogoIcon } from './logoIcon-47b6d502.js';
-import './index-f0c6581c.js';
-import { I as ImageWrap } from './index-f9c0b188.js';
+import { M as MediaQueries } from './utils-4eaa39a7.js';
+import { L as LogoIcon } from './logoIcon-0121b5c4.js';
+import './index-7c9ba229.js';
+import { I as ImageWrap } from './index-878e373b.js';
 
 const StyledLogo = styled.div `
   position: relative;