@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

package/es/components/organism/Notification/styled.js

@@ -0,0 +1,161 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+import styled from 'styled-components';
+import { Button } from '../../atoms';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { Badge } from 'antd';
+export const DivShowNotiStyled = styled.div `
+  background-color: #fff;
+  width: 348px;
+  max-height: 695px;
+  font-size: 12px;
+
+  box-sizing: border-box;
+  div,
+  p {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .div-loading {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .div-show-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    .title-noti {
+      color: #333333;
+      font-size: 16px;
+    }
+  }
+
+  .div-loading ~ .div-show-content {
+    opacity: 0.2;
+  }
+  .div-show-content {
+    position: relative;
+    max-height: 545px;
+    overflow-y: auto;
+
+    .div-left-icon-dot {
+      position: absolute;
+      top: 20px;
+      left: 18px;
+      width: 8px;
+      height: 8px;
+      background-color: #2e60a7;
+      border-radius: 999px;
+    }
+    .noti-card:last-child {
+      border: none;
+    }
+    .noti-card:hover,
+    .noti-card:has(button.antsomi-dropdown-open) {
+      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue0};
+    }
+
+    .noti-card {
+      position: relative;
+      padding: 15px 10px 15px 45px;
+      border-bottom: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue0};
+
+      .div-title {
+        display: flex;
+        align-items: center;
+        width: 290px;
+        .div-title-text {
+          flex: 1;
+          color: #333333;
+          font-weight: bold;
+        }
+
+        margin-bottom: 7px;
+      }
+
+      .item-link {
+        margin-bottom: 12px;
+        width: 270px;
+      }
+
+      .item-desc {
+        margin-bottom: 10px;
+        color: #333333;
+        width: 250px;
+        padding: 0 10px 4px;
+
+        border-left: 1px solid #889199;
+      }
+
+      .item-desc + p {
+        font-size: 11px;
+      }
+    }
+  }
+
+  .text-link {
+    color: #1f5fac;
+    cursor: pointer;
+  }
+  .text-grey {
+    color: #999999;
+  }
+  .text-block-center {
+    height: 40px;
+    padding: 12px 0;
+    text-align: center;
+  }
+  .text-ellipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+export const ActionButton = styled(Button) `
+  /* border: none !important; */
+  background-color: transparent !important;
+  color: #666666 !important;
+  box-shadow: none !important;
+  border-radius: 10px !important;
+
+  &.notify-action {
+    border: none !important;
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue7} !important;
+    border-radius: 5px !important;
+  }
+
+  &.antsomi-dropdown-open,
+  &.antsomi-popover-open {
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue7} !important;
+    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1_1} !important;
+    border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue7} !important;
+    &.notify-action {
+      border: none !important;
+      color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue7} !important;
+      border-radius: 5px !important;
+    }
+  }
+`;
+export const BadgeStyled = styled(Badge) `
+  button {
+    background-color: transparent !important;
+    color: #666666 !important;
+    box-shadow: none !important;
+  }
+
+  &.antsomi-dropdown-open,
+  &.antsomi-popover-open {
+    button {
+      color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7} !important;
+      background-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue1_1} !important;
+      border: 1px solid ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue7} !important;
+    }
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/Banner/index.js

@@ -1,12 +1,43 @@
+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, { memo } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 // Styled
 import { BannerWrapper } from './styled';
+// Components
+import { MobileFrameV2 } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
 export const Banner = memo(props => {
-    const { deviceType, showBackgroundSkeleton = false, children } = props;
-    return (React.createElement(BannerWrapper, { deviceType: deviceType, showBackgroundSkeleton: showBackgroundSkeleton },
-        React.createElement("div", { className: "device-type" },
-            React.createElement("div", { className: "device-type__wrapper" },
-                React.createElement("div", { className: "content-wrapper" }, children || null),
-                React.createElement("div", { className: "backdrop" })))));
+    const { deviceType, showSkeleton = false, children, height } = props, restOfProps = __rest(props, ["deviceType", "showSkeleton", "children", "height"]);
+    const isMobile = useMemo(() => deviceType === DEVICE_TYPE.MOBILE.value, [deviceType]);
+    // States
+    const [shouldAnimate, setShouldAnimate] = useState(false);
+    // Side effects
+    useEffect(() => {
+        setShouldAnimate(true);
+        const timerId = setTimeout(() => {
+            setShouldAnimate(false);
+        }, 1000);
+        return () => clearTimeout(timerId);
+    }, [children]);
+    return (React.createElement(BannerWrapper, Object.assign({ "$height": height }, restOfProps),
+        React.createElement("div", { className: `${isMobile ? 'mobile-wrapper animate__animated animate__zoomIn' : 'desktop-wrapper'}` },
+            React.createElement("div", { className: classNames({
+                    'content-wrapper': true,
+                    'animate__animated animate__fadeIn': shouldAnimate,
+                }) }, isMobile ? React.createElement(MobileFrameV2, null, children || null) : children || null),
+            showSkeleton && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "skeleton" }),
+                React.createElement("div", { className: "backdrop" }))))));
 });

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.d.ts

@@ -1,4 +1,3 @@
 export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
-    deviceType: string;
-    showBackgroundSkeleton: boolean;
+    $height?: number | undefined;
 }, never>;

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -1,91 +1,101 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Images
 import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
-import MobileFrame from '../../../../../assets/svg/mobile-frame.svg';
-// Constants
-import { DEVICE_TYPE } from '../../constants';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/providers';
 const THUMBNAIL_CARD_RADIUS = 5;
-const { MOBILE } = DEVICE_TYPE;
 export const BannerWrapper = styled.div `
   width: 100%;
-  height: 762px;
-  max-height: 762px;
-  overflow-y: auto;
+  overflow-y: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #0000001a;
+  border-radius: ${globalToken.borderRadius}px;
 
-  .device-type {
-    position: relative;
-    height: 750px;
-    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
-    width: 100%;
-
-    .device-type__wrapper {
-      width: 100%;
-      height: 100%;
-    }
+  ${props => props.$height
+    ? css `
+          height: ${props.$height}px;
 
-    ${p => {
-    switch (p.deviceType) {
-        case MOBILE.value:
-            return `
-          width: 416.004px;
-          height: 713px;      
-          z-index: 20;
-          background: url(${MobileFrame}) no-repeat center center;
-          display: flex;
-          justify-content: center;
-          align-items: center;
+          .mobile-wrapper {
+            width: 359px;
+            height: ${props.$height}px;
+          }
+        `
+    : css `
+          @media screen and (max-height: 1000px) {
+            height: 760px;
+            max-height: 760px;
 
-          .device-type__wrapper {
-            width: 391px;
-            left: 11px;    
-            height: 661px;
-            top: 11px;    
-            position: absolute;
-            z-index: 1;
-            border-radius: 19px 19px 19px 21px / 21px 21px 21px 21px;
+            .mobile-wrapper {
+              width: 359px;
+              height: 722.41px;
+            }
+          }
 
-            .content-wrapper {
-              border-radius: 19px 19px 19px 21px / 21px 21px 21px 21px;
+          @media screen and (min-height: 1001px) {
+            height: 830px;
+            max-height: 830px;
 
-              img {
-                border-radius: 19px 19px 19px 21px / 21px 21px 21px 21px;
-              }
+            .mobile-wrapper {
+              width: 380px;
+              height: 800px;
             }
           }
-          `;
-        default:
-            return p.showBackgroundSkeleton
-                ? `
-                .device-type__wrapper {
-                  background: center / cover no-repeat url(${skeletonBackground});
-                  .backdrop {
-                    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
-                    position: absolute;
-                    width: 100%;
-                    height: 100%;
-                    background-color: black;
-                    opacity: 0.5;
-                    z-index: 10;
-                    top: 0;
-                    left: 0;
-                  }
-                }                 
-                `
-                : '';
+        `}
+
+  .mobile-wrapper {
+    position: relative;
+    border-radius: 80px;
+    animation-duration: 0.2s !important;
+
+    .content-wrapper {
+      width: fit-content;
+      height: fit-content;
     }
-}}
 
+    .skeleton,
+    .backdrop {
+      left: 5px;
+    }
+  }
+
+  .desktop-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+    transition: width 0.2s ease, height 0.2s ease;
     .content-wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 12;
       width: 100%;
       height: 100%;
     }
   }
+
+  .content-wrapper {
+    position: absolute;
+    z-index: 12;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .skeleton {
+    width: 100%;
+    height: 100%;
+    background: center / cover no-repeat url(${skeletonBackground});
+    border-radius: inherit;
+  }
+
+  .backdrop {
+    border-radius: inherit;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.5;
+    z-index: 10;
+    top: 0;
+    left: 0;
+  }
 `;

package/es/components/organism/PreviewTemplateModal/components/Information/index.js

@@ -2,28 +2,29 @@
 import React, { memo } from 'react';
 import Icon from '@antscorp/icons';
 // Styled
-import { InformationWrapper } from './styled';
+import { CheckboxButton, InformationWrapper } from './styled';
 // Components
-import { Button, Radio, Typography, Flex } from '../../../../atoms';
+import { Button, Typography, Flex } from '../../../../atoms';
 // Constants
 import { DEVICE_TYPE } from '../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Information = memo(props => {
-    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description = 'Description show here', categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
+    var _a;
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description, categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
     return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
         React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
-        React.createElement(Flex, { gap: 20, vertical: true, className: "content-information" },
-            React.createElement("div", null, description), categoryListing === null || categoryListing === void 0 ? void 0 :
-            categoryListing.map(({ key, label, children }) => (React.createElement("div", { key: key },
-                React.createElement("div", null,
-                    label,
-                    ":"),
-                React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', ')))))),
-        showDeviceRadios && (React.createElement(Radio.Group, { options: Object.values(DEVICE_TYPE).map(({ value, label, icon }) => ({
-                label: (React.createElement(Flex, { gap: 5, align: "center" },
-                    React.createElement(Icon, { type: icon }),
-                    label)),
-                value,
-            })), onChange: e => onDeviceTypeChange(e.target.value), value: deviceType, optionType: "button", style: { flexShrink: 0 } })),
-        React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
-            React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText))));
+        React.createElement(Flex, { gap: 15, vertical: true, className: "content-information" },
+            description && React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }, description), categoryListing === null || categoryListing === void 0 ? void 0 :
+            categoryListing.map(({ key, label, children }) => {
+                var _a;
+                return (React.createElement("div", { key: key },
+                    React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } },
+                        label,
+                        ":"),
+                    React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', '))));
+            })),
+        React.createElement(Flex, { gap: 20, style: { flexShrink: 0 }, vertical: true },
+            showDeviceRadios && (React.createElement(Flex, { align: "center", gap: 1 }, Object.values(DEVICE_TYPE).map(({ value, label, icon }) => (React.createElement(CheckboxButton, { key: value, icon: React.createElement(Icon, { type: icon }), block: true, "$active": deviceType === value, onClick: () => onDeviceTypeChange(value), type: "text" }, label))))),
+            React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
+                React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText)))));
 });

package/es/components/organism/PreviewTemplateModal/components/Information/styled.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="react" />
 export declare const InformationWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const CheckboxButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {
+    $active?: boolean | undefined;
+}, never>;

package/es/components/organism/PreviewTemplateModal/components/Information/styled.js

@@ -1,19 +1,23 @@
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Components
-import { Flex } from '../../../../atoms';
+import { Button, Flex } from '../../../../atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/providers';
 export const InformationWrapper = styled(Flex) `
-  width: 350px;
+  width: 300px;
   flex-shrink: 0;
   font-size: 12px;
-  max-height: 762px;
+  height: 100%;
+  max-height: 100%;
 
   .title {
     font-size: 16px;
     font-weight: 700;
     max-width: 100%;
     color: inherit;
-    padding-right: 20px;
+    padding-right: 25px;
+    word-break: break-all;
   }
 
   .antsomi-radio-group {
@@ -32,10 +36,21 @@ export const InformationWrapper = styled(Flex) `
         font-size: 24px;
       }
     }
+  }
 
-    .content-information {
-      flex: 1 1 0%;
-      overflow-y: auto;
-    }
+  .content-information {
+    flex: 1 1 0%;
+    height: fit-content;
+    overflow-y: auto;
+    max-height: 682px;
   }
 `;
+export const CheckboxButton = styled(Button) `
+  color: ${globalToken.colorText} !important;
+
+  ${p => p.$active &&
+    css `
+      color: ${globalToken.colorPrimary} !important;
+      background-color: ${globalToken.blue1_1} !important;
+    `}
+`;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.js

@@ -11,11 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React, { memo } from 'react';
+import { isEmpty } from 'lodash';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
-import { Empty, Flex } from '../../../../atoms';
 // Styled
-import { SimilarTemplateWrapper } from './styled';
+import { SimilarTemplateWrapper, TemplateListWrapper } from './styled';
 // Constants
 import { SIMILAR_CARD_HEIGHT_DEFAULT, SIMILAR_CARD_WIDTH_DEFAULT } from '../../constants';
 const MAX_QUANTITY_TEMPLATES = 4;
@@ -23,7 +23,10 @@ export const SimilarTemplate = memo(props => {
     var _a;
     const { show = true, similarTemplates = [], similarCardProps } = props;
     const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
-    return show ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
+    return show && !isEmpty(similarTemplates) ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
         React.createElement("div", { className: "title" }, "Similar templates"),
-        React.createElement(Flex, { gap: 30 }, ((_a = similarTemplates === null || similarTemplates === void 0 ? void 0 : similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map(({ id, name, thumbnail }) => (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false }, restOfSimilarCardProps))))) || React.createElement(Empty, null)))) : null;
+        React.createElement(TemplateListWrapper, { templateQuantity: MAX_QUANTITY_TEMPLATES }, (_a = similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map((item, idx) => {
+            const { id, name, thumbnail } = item || {};
+            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card" }, restOfSimilarCardProps)));
+        })))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
 export declare const SimilarTemplateWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const TemplateListWrapper: import("styled-components").StyledComponent<"div", any, {
+    templateQuantity: number;
+}, never>;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.js

@@ -2,11 +2,25 @@
 import styled from 'styled-components';
 // Components
 import { Flex } from '../../../../atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/providers';
 export const SimilarTemplateWrapper = styled(Flex) `
   margin-top: 15px;
 
   .title {
-    font-weight: 700;
+    font-weight: 400;
     font-size: 16px;
   }
 `;
+export const TemplateListWrapper = styled.div `
+  display: flex;
+  gap: 30px;
+
+  .thumbnail-card {
+    border-radius: ${globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken.borderRadius}px;
+    }
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.js

@@ -23,6 +23,7 @@ import { Button, Flex } from '../../../../atoms';
 import { ThumbnailCard } from '../../../../molecules';
 // Constants
 import { THUMBNAIL_HEIGHT_DEFAULT, THUMBNAIL_WIDTH_DEFAULT } from '../../constants';
+import classNames from 'classnames';
 /** Max width of list thumbnail's wrapper, it is used to show swiper if the width is greater than 990 */
 const WRAPPER_WIDTH = 990;
 const GAP_X = 10;
@@ -30,7 +31,7 @@ const ICON_SIZE = 24;
 export const ThumbnailSlider = memo(props => {
     const { thumbnails, width = THUMBNAIL_WIDTH_DEFAULT, height = THUMBNAIL_HEIGHT_DEFAULT, onClickThumbnail } = props, restOfThumbnailProps = __rest(props, ["thumbnails", "width", "height", "onClickThumbnail"]);
     //  States
-    const [isSlideBeginning, setSlideBeginning] = useState(false);
+    const [isSlideBeginning, setSlideBeginning] = useState(true);
     const [isSlideEnd, setSlideEnd] = useState(false);
     // Refs
     const navigationPrevRef = useRef(null);
@@ -50,7 +51,7 @@ export const ThumbnailSlider = memo(props => {
         return (React.createElement(Flex, { gap: GAP_X },
             !!index && (React.createElement(Flex, { align: "center" },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
-            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
     };
     return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
         React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {
@@ -59,19 +60,21 @@ export const ThumbnailSlider = memo(props => {
             }, onBeforeInit: swiper => {
                 setTimeout(() => {
                     // Override prevEl & nextEl now that refs are defined
-                    swiper.params.navigation.prevEl = navigationPrevRef.current;
-                    swiper.params.navigation.nextEl = navigationNextRef.current;
-                    // Re-init navigation
-                    swiper.navigation.destroy();
-                    swiper.navigation.init();
-                    swiper.navigation.update();
+                    if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {
+                        swiper.params.navigation.prevEl = navigationPrevRef.current;
+                        swiper.params.navigation.nextEl = navigationNextRef.current;
+                        // Re-init navigation
+                        swiper.navigation.destroy();
+                        swiper.navigation.init();
+                        swiper.navigation.update();
+                    }
                 });
             }, onSlideChange: ({ isBeginning, isEnd }) => {
                 setSlideBeginning(isBeginning);
                 setSlideEnd(isEnd);
             } }, thumbnails.map((thumbnail, index) => (React.createElement(SwiperSlideWrapper, { key: `slide-${thumbnail.id}` }, renderThumbnail({ thumbnail, index }))))),
-        React.createElement(Button, { ref: navigationPrevRef, className: "custom-button-prev", disabled: isSlideBeginning },
+        React.createElement(Button, { ref: navigationPrevRef, className: classNames({ 'custom-button-prev': true, hidden: isSlideBeginning }) },
             React.createElement(Icon, { type: "icon-ants-expand-more" })),
-        React.createElement(Button, { ref: navigationNextRef, className: "custom-button-next", disabled: isSlideEnd },
+        React.createElement(Button, { ref: navigationNextRef, className: classNames({ 'custom-button-next': true, hidden: isSlideEnd }) },
             React.createElement(Icon, { type: "icon-ants-expand-more" })))) : (React.createElement(Flex, { gap: GAP_X, style: { width: 'fit-content' } }, thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.map((thumbnail, index) => (React.createElement(React.Fragment, { key: thumbnail.id }, renderThumbnail({ thumbnail, index })))))))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.js

@@ -1,5 +1,6 @@
 var _a;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/providers';
 import styled from 'styled-components';
 import { SwiperSlide } from 'swiper/react';
 export const ThumbnailSliderWrapper = styled.div `
@@ -11,11 +12,26 @@ export const ThumbnailSliderWrapper = styled.div `
 
   .swiper {
     max-width: 1030px;
+
     .swiper-slide {
       width: fit-content !important;
     }
   }
 
+  .thumbnail-animation {
+    box-shadow: none;
+    transition: box-shadow 0.1s ease-in-out;
+    border-radius: ${globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken.borderRadius}px;
+    }
+
+    &:hover {
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
   .custom-button-prev,
   .custom-button-next {
     z-index: 10;
@@ -48,6 +64,10 @@ export const ThumbnailSliderWrapper = styled.div `
     transform: rotate(-90deg);
   }
 
+  .hidden {
+    display: none !important;
+  }
+
   i {
     font-size: 20px;
     color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};