@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.131

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js

@@ -0,0 +1,167 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useEffect, useState } from 'react';
+import { Form } from 'antd';
+import dayjs from 'dayjs';
+// Components
+import { Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, Space, Spin, } from '@antscorp/antsomi-ui/es/components';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
+// Styles
+import { TemplateSaveAsStyled } from './styled';
+import { Category, ImageSlider } from './components';
+const { Text } = Typography;
+export const TemplateSaveAs = props => {
+    const { className, shareAccess, saveOptions, imageReview, isLoadingCategories, categories, omitCategories, templateNames: templateNameList, templateNamesOptions, descriptionOptions, form, value, onChange, onEvent, } = props;
+    const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
+    const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
+    const { isLoading, label: templateLabel, defaultNewTemplateName = `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`, selectPlaceholder = 'Please select an item', placeholder = 'Enter your media template name', onSearch, onNamePopupScroll, onScrollToBottom, } = templateNamesOptions || {};
+    const { label: descriptionLabel, placeholder: descriptionPlaceholder } = descriptionOptions || {};
+    const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
+    const { saveOption = saveNewValue, templateName = saveOption === saveNewValue || !saveOption
+        ? { id: undefined, label: defaultNewTemplateName }
+        : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0], description: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = {}, accessInfo, } = value || {};
+    const [searchValue, setSearchValue] = useState('');
+    const searchValueDebounce = useDebounce(searchValue, 1000);
+    useEffect(() => {
+        if (searchValueDebounce && onSearch)
+            onSearch(searchValueDebounce);
+    }, [searchValueDebounce, onSearch]);
+    const [templateNameNew, setTemplateNameNew] = useState(defaultNewTemplateName);
+    const [templateNameExist, setTemplateNameExist] = useState((templateName === null || templateName === void 0 ? void 0 : templateName.id) ? templateName : templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList[0]);
+    // NOTE: HOTFIX templateNameExist not update when value outside changed
+    useEffect(() => {
+        if (templateName === null || templateName === void 0 ? void 0 : templateName.id) {
+            setTemplateNameExist(templateName);
+        }
+    }, [templateName]);
+    const handleChangeValue = (newValue) => {
+        var _a, _b;
+        if (onEvent) {
+            onEvent(newValue);
+        }
+        if (onChange) {
+            onChange(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, value), (!(value === null || value === void 0 ? void 0 : value.saveOption) && { saveOption: saveNewValue })), (!(value === null || value === void 0 ? void 0 : value.templateName) && { templateName: { id: undefined, label: templateNameNew } })), (!(value === null || value === void 0 ? void 0 : value.defaultThumbnail) && { defaultThumbnail })), newValue), (_b = (_a = form === null || form === void 0 ? void 0 : form.getFieldsError()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.errors);
+        }
+    };
+    const handleAddCategory = ({ parentKey, childKey }) => {
+        const currCategory = (categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey]) || [];
+        const newCategory = Object.assign(Object.assign({}, categoriesValue), { [parentKey]: [...currCategory, +childKey] });
+        handleChangeValue({ categories: newCategory });
+    };
+    const handleRemoveCategory = ({ parentKey, childKey }) => {
+        const currCategory = categoriesValue === null || categoriesValue === void 0 ? void 0 : categoriesValue[parentKey];
+        if (!currCategory)
+            return;
+        const newChildren = currCategory.filter(child => child !== childKey);
+        handleChangeValue({
+            categories: Object.assign(Object.assign({}, categoriesValue), { [parentKey]: newChildren }),
+        });
+    };
+    return (React.createElement(Form, { form: form, initialValues: {
+            'template-name': defaultNewTemplateName ||
+                `Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,
+        } },
+        React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
+            React.createElement(Flex, { className: "save-options-container" },
+                React.createElement(RadioGroup, { value: saveOption, onChange: e => {
+                        handleChangeValue({
+                            saveOption: e.target.value,
+                            templateName: e.target.value === saveNewValue
+                                ? { id: undefined, label: templateNameNew }
+                                : templateNameExist,
+                        });
+                    } },
+                    React.createElement(Radio, { value: saveNewValue }, saveNewText),
+                    React.createElement(Radio, { value: saveExistValue }, saveExistText))),
+            React.createElement(Flex, null,
+                React.createElement(Flex, { vertical: true, gap: 20, className: "template-container" },
+                    React.createElement(Flex, { className: "field-container" },
+                        React.createElement(Text, { className: "field-title field-title--start" },
+                            templateLabel || 'Template name',
+                            React.createElement("span", null, "\u2009*")),
+                        saveOption === saveNewValue ? (React.createElement(Form.Item, { name: "template-name", validateTrigger: "onChange", rules: [{ required: true, message: "This field can't be empty" }] },
+                            React.createElement(Input, { className: "field-input", value: templateNameNew, placeholder: placeholder, debounce: 100, maxLength: 255, onAfterChange: value => {
+                                    handleChangeValue({ templateName: { id: undefined, label: value } });
+                                    setTemplateNameNew(value);
+                                }, "aria-valuetext": templateNameNew }))) : (React.createElement(Select, { className: "field-input", placeholder: selectPlaceholder, showSearch: true, searchValue: searchValue, onSearch: setSearchValue, onPopupScroll: e => {
+                                if (onNamePopupScroll)
+                                    onNamePopupScroll(e);
+                                if (onScrollToBottom) {
+                                    const { scrollHeight, scrollTop, clientHeight } = e.currentTarget;
+                                    if (scrollHeight === clientHeight + scrollTop) {
+                                        onScrollToBottom();
+                                    }
+                                }
+                            }, filterOption: false, dropdownRender: menu => (React.createElement(React.Fragment, null,
+                                isLoading && templateNameList.length === 0 ? null : menu,
+                                isLoading ? (React.createElement(Space, { style: {
+                                        padding: '4px 0',
+                                        width: '100%',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                    } },
+                                    React.createElement(Spin, { size: "small" }))) : null)), value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options: 
+                            // If template exist is not in templateNames list => add to begin of options array
+                            (templateNameList === null || templateNameList === void 0 ? void 0 : templateNameList.length) > 0
+                                ? [
+                                    ...(templateNameList.find(item => item.id === (templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id))
+                                        ? []
+                                        : [{ value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, label: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.label }]),
+                                    ...templateNameList.map(item => ({ value: item.id, label: item.label })),
+                                ]
+                                : [], onChange: value => {
+                                var _a, _b;
+                                handleChangeValue({
+                                    templateName: {
+                                        id: value,
+                                        label: ((_a = templateNameList.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
+                                    },
+                                });
+                                setTemplateNameExist({
+                                    id: value,
+                                    label: ((_b = templateNameList.find(item => item.id === value)) === null || _b === void 0 ? void 0 : _b.label) || '',
+                                });
+                            } }))),
+                    React.createElement(Flex, { className: "field-container", style: { marginTop: '-20px' } },
+                        React.createElement(Text, { className: "field-title field-title--middle" }, descriptionLabel || 'Description'),
+                        React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', className: "field-input", value: defaultTemplateDesc, debounce: 100, maxLength: 400, onAfterChange: value => handleChangeValue({ description: value }) })),
+                    React.createElement(Flex, { className: "field-container" },
+                        React.createElement(Text, { className: "field-title" },
+                            imageReviewLabel || 'Thumbnail template',
+                            " ",
+                            React.createElement("span", null, "*")),
+                        React.createElement(ImageSlider, Object.assign({ defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }) }, restImageReviewProps))),
+                    isLoadingCategories ? (React.createElement(Flex, { className: "field-container" },
+                        React.createElement(Text, { className: "field-title" }, "Categories"),
+                        React.createElement(Space, { style: {
+                                padding: '4px 0',
+                                width: '100%',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                            } },
+                            React.createElement(Spin, { size: "small" })))) : null,
+                    !isLoadingCategories && categories
+                        ? categories.map(parentCategory => {
+                            const selectedChildren = categoriesValue[parentCategory.key];
+                            // NOTE: filter to remove device and template categories
+                            if (omitCategories === null || omitCategories === void 0 ? void 0 : omitCategories.includes(parentCategory.key.toString()))
+                                return null;
+                            return (React.createElement(Category, { key: parentCategory.key, categoryKey: parentCategory.key, categoryChildren: parentCategory.children, label: parentCategory.label, selected: selectedChildren, onAddCategory: handleAddCategory, onRemoveCategory: handleRemoveCategory }));
+                        })
+                        : null),
+                isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
+                    React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, excludeUserAccess: ['to_editor'], generalAccessSettings: {
+                            publicOnlyWith: true,
+                        }, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null))));
+};

package/es/components/molecules/TemplateSaveAs/TemplateSaveAsModal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ModalV2Props } from '../ModalV2';
+import { TemplateSaveAsProps, TemplateValueOptions } from './TemplateSaveAs';
+interface TemplateSaveAsModalProps extends ModalV2Props {
+    templateProps: TemplateSaveAsProps;
+    defaultValue?: TemplateValueOptions;
+    onOk?: (e: React.MouseEvent<HTMLButtonElement>, value?: TemplateValueOptions) => void;
+}
+export declare const TemplateSaveAsModal: React.FC<TemplateSaveAsModalProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/TemplateSaveAsModal.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useState } from 'react';
+import { ModalV2 } from '../ModalV2';
+import { TemplateSaveAs } from './TemplateSaveAs';
+// NOTE: helper link (read more about controlled and uncontrolled component)
+// Inspiration form input component https://react.dev/reference/react-dom/components/input
+export const TemplateSaveAsModal = props => {
+    const { open, onCancel, okText, onOk, title, templateProps, defaultValue } = props, restProps = __rest(props, ["open", "onCancel", "okText", "onOk", "title", "templateProps", "defaultValue"]);
+    const { onChange, value: templateValue } = templateProps, restTemplateProps = __rest(templateProps, ["onChange", "value"]);
+    const [internalValue, setInternalValue] = useState(defaultValue || templateValue);
+    const [errors, setErrors] = useState();
+    useEffect(() => {
+        if (defaultValue)
+            setInternalValue(defaultValue);
+    }, [defaultValue]);
+    const handleOnChange = (value, errors) => {
+        setErrors(errors);
+        if (onChange) {
+            onChange(value);
+        }
+        // NOTE: If there are no templateValue and templateOnChange => uncontrolled component => return templateValue
+        if (defaultValue && !templateValue && !onChange) {
+            setInternalValue(value);
+        }
+    };
+    const handleOk = (event) => {
+        if (onOk && (!errors || errors.length === 0)) {
+            // NOTE: If there are templateValue and onChange => controlled component => return templateValue
+            onOk(event, templateValue && onChange ? templateValue : internalValue);
+        }
+    };
+    const handleCancel = (event) => {
+        if (onCancel) {
+            setInternalValue(defaultValue);
+            onCancel(event);
+        }
+    };
+    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: handleCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template', styles: { body: { borderTop: '1px solid #e5e5e5', paddingTop: 0 } } }, restProps),
+        React.createElement(TemplateSaveAs, Object.assign({ onChange: onChange ? (newValue, errors) => handleOnChange(newValue, errors) : undefined, value: templateValue || internalValue }, restTemplateProps))));
+};

package/es/components/molecules/TemplateSaveAs/components/Category/Category.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type EditCategory = ({ parentKey, childKey, }: {
+    parentKey: string | number;
+    childKey: string | number;
+}) => void;
+interface CategoryProps {
+    categoryKey: string | number;
+    categoryChildren: Array<{
+        key: string | number;
+        label: string | React.ReactNode;
+    }>;
+    label: string | React.ReactNode;
+    selected: (string | number)[];
+    onRemoveCategory: EditCategory;
+    onAddCategory: EditCategory;
+}
+export declare const Category: React.FC<CategoryProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/components/Category/Category.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Tooltip, Button, Flex, Typography, Dropdown } from '@antscorp/antsomi-ui/es/components';
+import Icon from '@antscorp/icons';
+const { Text } = Typography;
+export const Category = props => {
+    const { categoryKey, categoryChildren, label, selected, onRemoveCategory, onAddCategory } = props;
+    const remainChildren = categoryChildren.filter(item => !(selected === null || selected === void 0 ? void 0 : selected.includes(item.key)));
+    return (React.createElement(Flex, { className: "field-container" },
+        React.createElement(Text, { className: "field-title" }, label),
+        React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, selected === null || selected === void 0 ? void 0 :
+            selected.map(selectedKey => {
+                var _a;
+                const selectedLabel = (_a = categoryChildren.find(item => item.key === selectedKey)) === null || _a === void 0 ? void 0 : _a.label;
+                return (React.createElement(Flex, { key: selectedKey, className: "selected-category", justify: "space-between", align: "center" },
+                    React.createElement(Tooltip, { title: selectedLabel, zIndex: 3001 },
+                        React.createElement(Text, { ellipsis: true, style: { textOverflow: 'ellipsis' } }, selectedLabel)),
+                    React.createElement(Icon, { type: "icon-ants-remove-light", className: "remove-btn", onClick: () => onRemoveCategory({ parentKey: categoryKey, childKey: selectedKey }) })));
+            }),
+            remainChildren.length === 0 ? (typeof label === 'string' ? (React.createElement(Button, { disabled: true },
+                "+ Add ", label === null || label === void 0 ? void 0 :
+                label.toLowerCase())) : (label)) : (React.createElement(Dropdown, { menu: {
+                    items: remainChildren,
+                    onClick: ({ key }) => onAddCategory({ parentKey: categoryKey, childKey: key }),
+                }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] }, typeof label === 'string' ? (React.createElement(Button, { disabled: true },
+                "+ Add ", label === null || label === void 0 ? void 0 :
+                label.toLowerCase())) : (label))))));
+};

package/es/components/molecules/TemplateSaveAs/components/Category/index.d.ts

@@ -0,0 +1,2 @@
+export { Category } from './Category';
+export type { EditCategory } from './Category';

package/es/components/molecules/TemplateSaveAs/components/Category/index.js

@@ -0,0 +1 @@
+export { Category } from './Category';

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface BigImageProps {
+    url?: string;
+    isDefaultThumbnail?: boolean;
+    isHideDefaultButton?: boolean;
+    index: number;
+    onClickDefaultButton?: (index: number) => void;
+}
+export declare const BigImage: React.FC<BigImageProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/BigImage.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Image } from 'antd';
+import { Button } from '@antscorp/antsomi-ui/es/components';
+import Icon from '@antscorp/icons';
+export const BigImage = React.memo(props => {
+    const { url, isDefaultThumbnail, isHideDefaultButton, index, onClickDefaultButton } = props;
+    return (React.createElement("div", { className: "image-container--big" },
+        url ? React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url }) : null,
+        isHideDefaultButton ? null : (React.createElement(Button, { className: "set-default-button", onClick: () => onClickDefaultButton && onClickDefaultButton(index) },
+            isDefaultThumbnail ? React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } }) : null,
+            isDefaultThumbnail ? 'Default thumbnail' : 'Set as default'))));
+});

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface ImageSliderProps {
+    thumbnails: (string | undefined)[];
+    isLoading?: boolean;
+    className?: string;
+    skeleton?: boolean;
+    previewNavigation?: boolean;
+    slidesPerView?: number;
+    hideThumbnailsList?: boolean;
+    hideDefaultButton?: boolean;
+    imageWidth?: number;
+    imageHeight?: number;
+    infinity?: boolean;
+    /**
+     * Default thumbnail - order of default thumbnail in thumbnails array
+     */
+    defaultThumbnail?: number;
+    onSelectDefault?: (imgIndex: number) => void;
+}
+export declare const ImageSlider: React.FC<ImageSliderProps>;

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -0,0 +1,66 @@
+// Libraries
+import React, { useState, useRef, useMemo, useCallback } from 'react';
+import Icon from '@antscorp/icons';
+// Components
+import { Flex, Spin } from '@antscorp/antsomi-ui/es/components';
+// Styles
+import { ImageSliderStyled } from './styled';
+import { SmallImage } from './SmallImage';
+import { BigImage } from './BigImage';
+const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createElement("div", { className: type === 'slider'
+        ? `slider-button slider-button--${direction}`
+        : `change-preview-button change-preview-button--${direction}`, onClick: onClick },
+    React.createElement(Icon, { type: `icon-ants-angle-${direction}` }))));
+export const ImageSlider = props => {
+    const { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, onSelectDefault, } = props;
+    const sliderContainerRef = useRef(null);
+    const thumbnailSelectedRef = useRef(null);
+    const smallImageWidth = useMemo(() => imageWidth / slidesPerView - (10 * (slidesPerView - 1)) / slidesPerView, [imageWidth, slidesPerView]);
+    const [selectedThumbnail, setSelectedThumbnail] = useState(0);
+    const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
+    const handleScroll = useCallback((scrollIndex) => {
+        var _a, _b;
+        (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+            left: scrollIndex * imageWidth,
+            behavior: 'smooth',
+        });
+        (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+            left: scrollIndex * (smallImageWidth + 10),
+            behavior: 'smooth',
+        });
+    }, [imageWidth, smallImageWidth]);
+    const handleNextThumbnail = useCallback(() => {
+        setSelectedThumbnail(prev => {
+            const newValue = prev === thumbnails.length - 1 ? 0 : prev + 1;
+            handleScroll(newValue);
+            return newValue;
+        });
+    }, [thumbnails, handleScroll]);
+    const handlePrevThumbnail = useCallback(() => {
+        setSelectedThumbnail(prev => {
+            const newValue = prev === 0 ? thumbnails.length - 1 : prev - 1;
+            handleScroll(newValue);
+            return newValue;
+        });
+    }, [thumbnails, handleScroll]);
+    const handleSelectThumbnail = useCallback((index) => {
+        handleScroll(index);
+        setSelectedThumbnail(index);
+    }, [handleScroll]);
+    const handleClickDefault = useCallback((index) => {
+        // Because of only selectedThumbnail equal to current thumbnail index so can use index instead of  selectedThumbnail
+        setDefaultThumbnailInternal(index);
+        if (onSelectDefault) {
+            onSelectDefault(index);
+        }
+    }, [onSelectDefault]);
+    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$imageWidth": imageWidth, "$smallImageWidth": smallImageWidth, "$imageHeight": imageHeight, vertical: true, gap: 10 },
+        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(BigImage, { key: `image-big_${url}_${index * 2}`, url: url, index: index, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, onClickDefaultButton: handleClickDefault }))))),
+        hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { key: `${url}_${index * 2}`, isSelected: index === selectedThumbnail, url: url, index: index, onClick: handleSelectThumbnail })))))),
+        previewNavigation && !isLoading ? (React.createElement(React.Fragment, null,
+            React.createElement(ButtonSlider, { direction: "left", type: "preview", onClick: handlePrevThumbnail }),
+            React.createElement(ButtonSlider, { direction: "right", type: "preview", onClick: handleNextThumbnail }))) : null,
+        hideThumbnailsList || isLoading || thumbnails.length <= 1 ? null : (React.createElement(React.Fragment, null,
+            (!infinity && selectedThumbnail !== 0) || infinity ? (React.createElement(ButtonSlider, { direction: "left", type: "slider", onClick: handlePrevThumbnail })) : null,
+            (!infinity && selectedThumbnail !== thumbnails.length - 1) || infinity ? (React.createElement(ButtonSlider, { direction: "right", type: "slider", onClick: handleNextThumbnail })) : null))));
+};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface SmallImageProps {
+    url?: string;
+    isSelected?: boolean;
+    index: number;
+    onClick?: (index: number) => void;
+}
+export declare const SmallImage: React.FC<SmallImageProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/SmallImage.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Image } from 'antd';
+export const SmallImage = React.memo(props => {
+    const { url, isSelected, index, onClick } = props;
+    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''}`, onClick: () => onClick && onClick(index) }, url ? React.createElement(Image, { preview: false, width: "80%", height: "96%", src: url }) : null));
+});

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/index.d.ts

@@ -0,0 +1,2 @@
+export { ImageSlider } from './ImageSlider';
+export type { ImageSliderProps } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/index.js

@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface ImageSliderStyledProps {
+    $skeleton?: boolean;
+    $smallImageWidth: number;
+    $imageWidth?: number;
+    $imageHeight?: number;
+}
+export declare const ImageSliderStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ImageSliderStyledProps, never>;
+export {};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js

@@ -0,0 +1,184 @@
+// Libraries
+import styled, { css } from 'styled-components';
+import { Flex } from '@antscorp/antsomi-ui/es/components';
+// Assets
+import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/skeleton_bg.png';
+const backgroundImage = css `
+  ${props => props.$skeleton
+    ? css `
+          background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
+          background-size: contain;
+        `
+    : css `
+          background: #e5e5e5;
+        `}
+`;
+const setWidthHeight = ({ w, h }) => `
+  width: ${w};
+  height: ${h};
+`;
+const centerBlock = css `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ImageSliderStyled = styled(Flex) `
+  /* NOTE: Style for prev and next button in thumbnail slider */
+  position: relative;
+
+  .change-preview-button {
+    ${centerBlock}
+    position: absolute;
+    top: 115px;
+    transform: translateY(-50%);
+    font-size: 24px;
+    color: #fafafa;
+
+    cursor: pointer;
+    z-index: 1;
+
+    &--left {
+      left: 6px;
+    }
+    &--right {
+      right: 6px;
+    }
+  }
+
+  .slider-button {
+    ${centerBlock}
+    position: absolute;
+    bottom: 36px;
+    transform: translateY(50%);
+
+    font-size: 12px;
+
+    ${setWidthHeight({ w: '24px', h: '24px' })}
+    border-radius: 999px;
+    background-color: #fff;
+
+    cursor: pointer;
+    z-index: 1;
+
+    &--left {
+      left: 2px;
+    }
+    &--right {
+      right: 2px;
+    }
+  }
+
+  .thumbnail-preview-container:has(.antsomi-spin),
+  .thumbnail-slider-container:has(.antsomi-spin) {
+    box-shadow: rgba(159, 180, 180, 0.2) 0px 2px 8px;
+  }
+
+  .thumbnail-preview-container .antsomi-spin,
+  .thumbnail-slider-container .antsomi-spin {
+    width: 100%;
+    ${centerBlock}
+    background-color: #fcfcfc;
+  }
+
+  .thumbnail-preview-container {
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
+    overflow-x: scroll;
+    scrollbar-width: none;
+
+    /* NOTE: set border-radius for parent of thumbnail list make better UI when scroll horizontal */
+    border-radius: 5px;
+
+    & > div {
+      overflow: hidden;
+    }
+
+    .antsomi-spin {
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
+    }
+  }
+
+  .thumbnail-slider-container {
+    position: relative;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
+    overflow-x: scroll;
+    scrollbar-width: none;
+
+    .antsomi-spin {
+      height: 72px;
+    }
+  }
+
+  &:has(> .thumbnail-preview-container + .thumbnail-slider-container) {
+    .image-container--big::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      z-index: 1;
+      transition: background-color 150ms ease-in-out;
+    }
+
+    .image-container--big:hover::before {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  .image-container {
+    &--big,
+    &--small {
+      ${centerBlock}
+      ${backgroundImage}
+      img {
+        object-fit: contain;
+      }
+
+      div:has(> img) {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &--big {
+      width: 100%;
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
+      flex-shrink: 0;
+
+      position: relative;
+      overflow: hidden;
+    }
+
+    &--small {
+      box-sizing: border-box;
+      width: ${props => `${props.$smallImageWidth}px`};
+
+      height: 72px;
+      flex-shrink: 0;
+
+      border: 2px solid #e5e5e5;
+      border-radius: 2px;
+      user-select: none;
+      cursor: pointer;
+    }
+    &--selected {
+      border: 2px solid var(--primary-color);
+    }
+  }
+
+  .set-default-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+  }
+  .image-container--big:hover {
+    .set-default-button {
+      opacity: 1;
+    }
+  }
+`;

package/es/components/molecules/TemplateSaveAs/components/index.d.ts

@@ -0,0 +1,4 @@
+export { ImageSlider } from './ImageSlider';
+export type { ImageSliderProps } from './ImageSlider';
+export { Category } from './Category';
+export type { EditCategory } from './Category';

package/es/components/molecules/TemplateSaveAs/components/index.js

@@ -0,0 +1,2 @@
+export { ImageSlider } from './ImageSlider';
+export { Category } from './Category';