@antscorp/antsomi-ui 1.4.4 → 1.4.6

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -830,6 +830,10 @@ export const GlobalStyle = () => {
             }
           }
         }
+
+        .antsomi-form-item-explain-error {
+          font-size: 11px !important;
+        }
       }
 
       /* Popover */

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -407,7 +407,7 @@ export const AdvancedPicker = props => {
                                 React.createElement(ErrorMessage, { errorMessage: errorMessage })),
                             renderDropdownFooter()),
                         React.createElement(Divider, null),
-                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30 },
+                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30, "$isRangePicker": operatorKey === 'between' },
                             ['HH', 'HHmm', 'HHmmss'].includes(timeFormat) ? React.createElement("span", null, "Hours") : null,
                             ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? React.createElement("span", null, "Minutes") : null,
                             timeFormat === 'HHmmss' ? React.createElement("span", null, "Seconds") : null)) : null));

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.d.ts

@@ -9,4 +9,5 @@ export declare const DatePickerFooter: import("styled-components").StyledCompone
 export declare const CalendarIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TimeLabel: import("styled-components").StyledComponent<"div", any, {
     $width: number;
+    $isRangePicker: boolean;
 }, never>;

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.js

@@ -101,7 +101,8 @@ export const CalendarIconWrapper = styled.div `
 export const TimeLabel = styled.div `
   position: absolute;
   right: 0;
-  top: 120px;
+  /* top: 120px; */
+  top: ${props => (props.$isRangePicker ? '140px' : '120px')};
   height: 39.1px;
   width: ${props => `${props.$width}px`};
   /* width: 180px; */

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.d.ts

@@ -37,3 +37,15 @@ export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdva
     formatDisplay: string;
     timeFormatDisplay: string;
 };
+/**
+ * Returns the formatted display string based on the given type and value type.
+ *
+ * @param {TAdvancedType} [type] - The type indicating whether it's a start or end date.
+ * @param {ValueTypes} [valueType] - The value type specifying the date/time format.
+ * @returns {string} The formatted display string.
+ *
+ * @example
+ * // returns ADVANCED_RANGE_PICKER_FORMAT.general
+ * getFormatDisplayFromValueType('anyType', 'YEAR_MONTH_DAY_SECOND');
+ */
+export declare const getFormatDisplayFromValueType: (type?: TAdvancedType, valueType?: ValueTypes) => string;

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.js

@@ -8,6 +8,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { DATE_TYPE_MAPPING, DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from './constants';
+import { ADVANCED_RANGE_PICKER_FORMAT } from '../AdvancedRangePicker/constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
 dayjs.extend(utc);
@@ -209,3 +210,29 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
     }
     return { formatDisplay: formatInputDisplay || formatDisplay, timeFormatDisplay };
 };
+/**
+ * Returns the formatted display string based on the given type and value type.
+ *
+ * @param {TAdvancedType} [type] - The type indicating whether it's a start or end date.
+ * @param {ValueTypes} [valueType] - The value type specifying the date/time format.
+ * @returns {string} The formatted display string.
+ *
+ * @example
+ * // returns ADVANCED_RANGE_PICKER_FORMAT.general
+ * getFormatDisplayFromValueType('anyType', 'YEAR_MONTH_DAY_SECOND');
+ */
+export const getFormatDisplayFromValueType = (type, valueType) => {
+    switch (valueType) {
+        case 'YEAR_MONTH_DAY_HOUR':
+            return type === 'startDate' ? 'YYYY-MM-DD HH:00:00' : 'YYYY-MM-DD HH:59:59';
+        case 'YEAR_MONTH_DAY_MINUTE':
+            return type === 'startDate' ? 'YYYY-MM-DD HH:mm:00' : 'YYYY-MM-DD HH:mm:59';
+        case 'YEAR_MONTH_DAY_SECOND':
+            return ADVANCED_RANGE_PICKER_FORMAT.general;
+        case 'YEAR_MONTH_DAY':
+        default:
+            return type === 'startDate'
+                ? ADVANCED_RANGE_PICKER_FORMAT.startDate
+                : ADVANCED_RANGE_PICKER_FORMAT.endDate;
+    }
+};

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.d.ts

@@ -4,6 +4,10 @@ import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
 export interface AdvancedRangePickerProps {
     className?: string;
     valueType?: ValueTypes;
+    /**
+     * If true => auto generate time format from valueType props; else use hard config
+     */
+    useFormatMapping?: boolean;
     disabled?: boolean;
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     startDateConfig?: TDateConfig;

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js

@@ -15,11 +15,12 @@ import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Instance
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { getFormatDisplayFromValueType } from '../AdvancedPicker/utils';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.tsx';
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { className, valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, isViewMode, onChange, } = props;
+    const { className, valueType, useFormatMapping, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, isViewMode, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -55,9 +56,17 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20, align: "end", className: className || '' },
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode }),
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: useFormatMapping
+                ? getFormatDisplayFromValueType('startDate', valueType)
+                : ADVANCED_RANGE_PICKER_FORMAT.startDate, 
+            // format={ADVANCED_RANGE_PICKER_FORMAT.startDate}
+            errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode }),
         separator || null,
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode })));
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: useFormatMapping
+                ? getFormatDisplayFromValueType('endDate', valueType)
+                : ADVANCED_RANGE_PICKER_FORMAT.endDate, 
+            // format={ADVANCED_RANGE_PICKER_FORMAT.endDate}
+            errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

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

@@ -32,6 +32,7 @@ export const TemplateSaveAs = props => {
     const form = formProps || internalForm;
     const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
     const { label: imageReviewLabel } = imageReview, restImageReviewProps = __rest(imageReview, ["label"]);
+    console.log('🚀 ~ restImageReviewProps:', restImageReviewProps);
     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', validateName, 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 || {};
@@ -50,6 +51,8 @@ export const TemplateSaveAs = props => {
     };
     const [searchValue, setSearchValue] = useState('');
     const searchValueDebounce = useDebounce(searchValue, 1000);
+    // Watches
+    const defaultThumbnailValue = Form.useWatch('defaultThumbnail', form);
     // Effects
     useEffect(() => {
         if (searchValueDebounce && onSearch)
@@ -207,7 +210,7 @@ export const TemplateSaveAs = props => {
                     React.createElement(Form.Item, { name: "description", label: descriptionLabel || 'Description' },
                         React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) })),
                     React.createElement(Form.Item, { name: "defaultThumbnail", shouldUpdate: true, required: true, label: imageReviewLabel || 'Thumbnail template' },
-                        React.createElement(ImageSlider, Object.assign({ defaultThumbnail: form.getFieldValue('defaultThumbnail'), onSelectDefault: value => {
+                        React.createElement(ImageSlider, Object.assign({ defaultThumbnail: defaultThumbnailValue, onSelectDefault: value => {
                                 form.setFieldValue('defaultThumbnail', value);
                                 handleChangeValue({ defaultThumbnail: value });
                             } }, restImageReviewProps))),

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

@@ -1,8 +1,10 @@
 import React from 'react';
 interface BigImageProps {
     url?: string;
+    showSkeleton?: boolean;
     isDefaultThumbnail?: boolean;
     isHideDefaultButton?: boolean;
+    imageFit?: React.CSSProperties['objectFit'];
     index: number;
     onClickDefaultButton?: (index: number) => void;
 }

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

@@ -2,17 +2,17 @@ import React, { useMemo } from 'react';
 import { Image } from 'antd';
 import { Button } from '@antscorp/antsomi-ui/es/components';
 import Icon from '@antscorp/icons';
+import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
 export const BigImage = React.memo(props => {
-    const { url, isDefaultThumbnail, isHideDefaultButton, index, onClickDefaultButton } = props;
+    const { url, isDefaultThumbnail, isHideDefaultButton, index, showSkeleton, imageFit, onClickDefaultButton, } = props;
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
-    const urlNoCache = url
-        ? url.includes('nocache') || url.startsWith('data:image')
-            ? url
-            : `${url}?nocache=${timeGenerated}`
-        : undefined;
-    return (React.createElement("div", { className: "image-container--big" },
-        url ? (React.createElement(Image, { preview: false, width: "80%", height: "96%", src: urlNoCache })) : null,
+    const urlNoCache = getUrlNoCache(url, timeGenerated);
+    const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
+    return (React.createElement("div", { className: `image-container--big ${!showSkeletonMemo ? 'hide-skeleton' : ''}` },
+        url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", src: urlNoCache, style: { objectFit: imageFit }, onError: e => {
+                e.currentTarget.style.display = 'none';
+            } })) : 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

@@ -11,6 +11,7 @@ export interface ImageSliderProps {
     imageWidth?: number;
     imageHeight?: number;
     infinity?: boolean;
+    thumbnailFit?: React.CSSProperties['objectFit'];
     /**
      * Default thumbnail - order of default thumbnail in thumbnails array
      */

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

@@ -1,5 +1,5 @@
 // Libraries
-import React, { useState, useRef, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import Icon from '@antscorp/icons';
 // Components
 import { Flex, Spin } from '@antscorp/antsomi-ui/es/components';
@@ -12,12 +12,16 @@ const ButtonSlider = React.memo(({ direction, type, onClick }) => (React.createE
         : `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 { thumbnails, isLoading, className, skeleton, previewNavigation, slidesPerView = 3, hideThumbnailsList, hideDefaultButton, imageWidth = 330, imageHeight = 230, infinity = true, defaultThumbnail, thumbnailFit, 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);
+    // Effects
+    useEffect(() => {
+        setDefaultThumbnailInternal(defaultThumbnail || 0);
+    }, [defaultThumbnail]);
     const handleScroll = useCallback((scrollIndex) => {
         var _a, _b;
         (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
@@ -55,8 +59,8 @@ export const ImageSlider = props => {
         }
     }, [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, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, 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 })))))),
+        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, showSkeleton: skeleton, isDefaultThumbnail: defaultThumbnailInternal === index, isHideDefaultButton: hideDefaultButton || hideThumbnailsList || thumbnails.length <= 1, imageFit: thumbnailFit, onClickDefaultButton: handleClickDefault }))))),
+        hideThumbnailsList || thumbnails.length <= 1 ? null : (React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef, style: { justifyContent: thumbnails.length < slidesPerView ? 'center' : 'flex-start' } }, isLoading ? (React.createElement(Spin, { spinning: true })) : (thumbnails.map((url, index) => (React.createElement(SmallImage, { imageFit: thumbnailFit, key: `${url}_${index * 2}`, showSkeleton: skeleton, 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,

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

@@ -3,6 +3,8 @@ interface SmallImageProps {
     url?: string;
     isSelected?: boolean;
     index: number;
+    showSkeleton?: boolean;
+    imageFit?: React.CSSProperties['objectFit'];
     onClick?: (index: number) => void;
 }
 export declare const SmallImage: React.FC<SmallImageProps>;

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

@@ -1,16 +1,16 @@
 import React, { useMemo } from 'react';
 import { Image } from 'antd';
+import { checkShowSkeletonBaseUrl, getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
 export const SmallImage = React.memo(props => {
-    const { url, isSelected, index, onClick } = props;
+    const { url, isSelected, index, imageFit, showSkeleton, onClick } = props;
     const currentTime = useMemo(() => new Date(), []);
     const timeGenerated = Math.floor(currentTime.getTime() / 1000 - (currentTime.getTime() % 3)) * 1000;
-    const urlNoCache = url
-        ? url.includes('nocache') || url.startsWith('data:image')
-            ? url
-            : `${url}?nocache=${timeGenerated}`
-        : undefined;
-    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%", 
+    const urlNoCache = getUrlNoCache(url, timeGenerated);
+    const showSkeletonMemo = showSkeleton !== undefined ? showSkeleton : checkShowSkeletonBaseUrl(urlNoCache);
+    return (React.createElement("div", { className: `image-container--small ${isSelected ? 'image-container--selected' : ''} ${!showSkeletonMemo ? 'hide-skeleton' : ''}`, onClick: () => onClick && onClick(index) }, url ? (React.createElement(Image, { preview: false, width: "100%", height: "100%", style: { objectFit: imageFit }, 
         // src={imageUrl}
         // src={url}
-        src: urlNoCache })) : null));
+        src: urlNoCache, onError: e => {
+            e.currentTarget.style.display = 'none';
+        } })) : null));
 });

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

@@ -4,14 +4,10 @@ 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;
-        `}
+  ${() => css `
+    background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
+    background-size: contain;
+  `}
 `;
 const setWidthHeight = ({ w, h }) => `
   width: ${w};
@@ -141,8 +137,12 @@ export const ImageSliderStyled = styled(Flex) `
   .image-container {
     &--big,
     &--small {
+      background: #e5e5e5;
       ${centerBlock}
-      ${backgroundImage}
+      &:not(.hide-skeleton) {
+        ${backgroundImage}
+      }
+
       img {
         object-fit: contain;
       }

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

@@ -19,7 +19,8 @@ export const TemplateSaveAsStyled = styled(Flex) `
   }
 
   .template-container {
-    flex: 1 1 60%;
+    flex: 0 0 670px;
+    /* flex: 1 1 60%; */
     max-height: 60vh;
     padding-right: 28px;
     overflow-y: auto;

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -28,16 +28,22 @@ import { ThumbnailCardWrapper } from './styled';
 import { Button, Flex, Typography, Spin } from '../../atoms';
 // Constants
 import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
-import { getUrlNoCache } from '@antscorp/antsomi-ui/es/utils';
+import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
 const cacheValue = new Date().getTime();
 export const ThumbnailCard = memo(props => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, actionAvailable = true, showSkeleton = true, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
+    const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "onClickWrapper"]);
     const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
     const _b = editBtnProps || {}, { text: editText = 'Edit thumbnail', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
     const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
     // Memo
-    const showSkeletonMemo = typeof showSkeleton === 'function' ? showSkeleton(props) : showSkeleton;
+    const showSkeletonMemo = 
+    // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
+    typeof showSkeleton === 'undefined'
+        ? checkShowSkeletonBaseUrl(thumbnail)
+        : typeof showSkeleton === 'function'
+            ? showSkeleton(props)
+            : showSkeleton;
     // Handlers
     const handleRemoveThumbnail = e => {
         e.stopPropagation();
@@ -54,7 +60,9 @@ export const ThumbnailCard = memo(props => {
     };
     return (React.createElement(Flex, Object.assign({ gap: 10, vertical: true }, restOfProps, { style: Object.assign({ width }, restOfProps.style) }),
         React.createElement(ThumbnailCardWrapper, { "$showSkeleton": showSkeletonMemo, style: { height, cursor: actionAvailable ? 'default' : 'pointer' }, onClick: handleWrapperClick },
-            React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "" })),
+            React.createElement("div", { className: "screen" }, thumbnail && (React.createElement("img", { src: getUrlNoCache(thumbnail, cacheValue), alt: "", style: { objectFit: thumbnailFit }, onError: e => {
+                    e.currentTarget.style.display = 'none';
+                } }))),
             actionAvailable && !loading && (React.createElement(React.Fragment, null,
                 React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
                     React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -1,5 +1,5 @@
 import { ModalFuncProps, ButtonProps } from 'antd';
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 export type TThumbnailCardId = string | number;
 export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
     onOk?: (id: TThumbnailCardId) => void;
@@ -21,5 +21,6 @@ export interface ThumbnailCardProps extends Omit<HTMLAttributes<HTMLDivElement>,
     previewBtnProps?: TThumbnailButton;
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
+    thumbnailFit?: React.CSSProperties['objectFit'];
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }

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

@@ -17,7 +17,12 @@ export const InformationWrapper = styled(Flex) `
     max-width: 100%;
     color: inherit;
     padding-right: 25px;
-    word-break: break-all;
+    word-break: break-word;
+
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
   }
 
   .antsomi-radio-group {

package/es/constants/theme.js

@@ -12,7 +12,7 @@ export const THEME = {
         colorTextDark: '#333333',
         colorTextPlaceholder: '#BEBEBE',
         colorTextDisabled: '#999999',
-        colorError: '#CF1825',
+        colorError: '#EF3340',
         colorWarning: '#faad14',
         colorPrimary: '#005fb8',
         colorTextHover: '#3a72b6',
@@ -181,4 +181,5 @@ THEME.components = {
     Dropdown: {
         controlItemBgHover: '#F2F9FF',
     },
+    Form: {},
 };

package/es/utils/common.d.ts

@@ -58,4 +58,4 @@ export declare const searchParamsToObject: (searchParams?: string) => Record<str
 export declare const getShuffleArray: <T>(array: T[]) => T[];
 export declare const snakeCaseToCamelCase: <T = Record<string, any>>(object: Record<string, any> | Record<string, any>[], recursive?: boolean) => T;
 export declare const camelCaseToSnakeCase: <T = Record<string, any>>(object: Record<string, any>, recursive?: boolean) => T;
-export declare const getUrlNoCache: (url?: string, cacheValue?: number | string) => string | undefined;
+export declare const getUrlNoCache: (url?: string, cacheValue?: number | string) => string;

package/es/utils/common.js

@@ -410,10 +410,19 @@ export const camelCaseToSnakeCase = (object, recursive = false) => {
     return newObject;
 };
 export const getUrlNoCache = (url = '', cacheValue = 0) => {
-    const urlNoCache = url
-        ? url.includes('nocache') || url.startsWith('data:image')
-            ? url
-            : `${url}?nocache=${cacheValue}`
-        : undefined;
+    let urlNoCache = url;
+    if (urlNoCache.includes('nocache') || url.startsWith('data:image')) {
+        urlNoCache = url;
+    }
+    else {
+        try {
+            const newUrl = new URL(url);
+            newUrl.searchParams.append('nocache', `${cacheValue}`);
+            urlNoCache = newUrl.toString();
+        }
+        catch (error) {
+            urlNoCache = url;
+        }
+    }
     return urlNoCache;
 };

package/es/utils/templateListing.d.ts

@@ -1,2 +1,3 @@
 import { ObjectTemplate } from '../models/ObjectTemplate';
 export declare const getCategoriesFromObjectTemplate: (objectTemplate: ObjectTemplate) => {};
+export declare const checkShowSkeletonBaseUrl: (url?: string) => boolean;

package/es/utils/templateListing.js

@@ -10,3 +10,20 @@ export const getCategoriesFromObjectTemplate = (objectTemplate) => {
     });
     return categories;
 };
+export const checkShowSkeletonBaseUrl = (url = '') => {
+    if (url.includes('type')) {
+        switch (true) {
+            case url.includes('type=media'):
+                return true;
+            case url.includes('type=email'):
+                return false;
+            case url.includes('type=tactic'):
+            default:
+                return false;
+        }
+    }
+    else {
+        return (`${url || ''}`.includes('base64-img') &&
+            ['jn_thumb_', 'v_thumb_'].every(prefix => !`${url || ''}`.includes(prefix)));
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",