@gem-sdk/components 2.1.13-staging.3 → 2.1.13-staging.31

package/dist/cjs/third-party/setting/index.js

@@ -103,11 +103,26 @@ var TrustreviewsProductReviews = require('./TrustreviewsProductReviews.js');
 var MyappgurusProductReviews = require('./MyappgurusProductReviews.js');
 var HulkProductOptions = require('./HulkProductOptions.js');
 var TrustshopProductReviews = require('./TrustshopProductReviews.js');
+var StellarDeliveryDatePickup = require('./StellarDeliveryDatePickup.js');
+var EssentialCountdownTimerBar = require('./EssentialCountdownTimerBar.js');
+var EssentialAnnouncementBar = require('./EssentialAnnouncementBar.js');
+var OkendoReviewsLoyalty = require('./OkendoReviewsLoyalty.js');
+var EstimatedDeliveryDatePlus = require('./EstimatedDeliveryDatePlus.js');
 var HextomCountdownTimerBar = require('./HextomCountdownTimerBar.js');
 var TrustBadgesBear = require('./TrustBadgesBear.js');
+var TrustedsiteTrustBadges = require('./TrustedsiteTrustBadges.js');
+var GloColorSwatchvariantImage = require('./GloColorSwatchvariantImage.js');
+var BfSizeChartSizeGuide = require('./BfSizeChartSizeGuide.js');
+var AlsoBoughtCbb = require('./AlsoBoughtCbb.js');
+var HextomFreeShippingBar = require('./HextomFreeShippingBar.js');
 
 var index = {
     HextomCountdownTimerBar: HextomCountdownTimerBar.default,
+    EstimatedDeliveryDatePlus: EstimatedDeliveryDatePlus.default,
+    OkendoReviewsLoyalty: OkendoReviewsLoyalty.default,
+    EssentialAnnouncementBar: EssentialAnnouncementBar.default,
+    EssentialCountdownTimerBar: EssentialCountdownTimerBar.default,
+    StellarDeliveryDatePickup: StellarDeliveryDatePickup.default,
     TrustshopProductReviews: TrustshopProductReviews.default,
     HulkProductOptions: HulkProductOptions.default,
     TrustreviewsProductReviews: TrustreviewsProductReviews.default,
@@ -209,7 +224,12 @@ var index = {
     RequestQuoteHidePrice: RequestQuoteHidePrice.default,
     BirdChime: BirdChime.default,
     FordeerProductLabels: FordeerProductLabels.default,
-    TrustBadgesBear: TrustBadgesBear.default
+    TrustBadgesBear: TrustBadgesBear.default,
+    TrustedsiteTrustBadges: TrustedsiteTrustBadges.default,
+    GloColorSwatchvariantImage: GloColorSwatchvariantImage.default,
+    BfSizeChartSizeGuide: BfSizeChartSizeGuide.default,
+    AlsoBoughtCbb: AlsoBoughtCbb.default,
+    HextomFreeShippingBar: HextomFreeShippingBar.default
 };
 
 exports.default = index;

package/dist/cjs/video/components/HTML5Embed.js

@@ -51,14 +51,14 @@ const HTML5Embed = (props)=>{
             }),
             props.thumbnail && showThumbnail && /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 role: "presentation",
-                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full",
+                className: "gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full",
                 onClick: playVideoAndTurnOffThumbnail,
                 style: props.style,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("img", {
                         id: "video-thumbnail",
                         src: props.thumbnail,
-                        className: "gp-w-full gp-h-full gp-object-cover gp-thumbnail-video",
+                        className: "gp-w-full gp-h-full gp-object-contain gp-thumbnail-video",
                         alt: "Video Thumbnail"
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("button", {

package/dist/cjs/video/components/HTML5Embed.liquid.js

@@ -7,6 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const HTML5Embed = (props)=>{
+    const { enableLazyLoadImage, pageContext } = props;
     const videoId = `gp-video-${props.uid}`;
     const preloadThumbnail = props.autoplay && props.thumbnail;
     const offLazyVideo = !props.lazy && props.isVideoComponent;
@@ -23,7 +24,9 @@ const HTML5Embed = (props)=>{
                 '--op': 0,
                 '--z': -1,
                 display: 'none'
-            }
+            },
+            enableLazyLoadImage,
+            pageContext
         })}
     ${core.RenderIf(props.autoplay, `<script>
         document.addEventListener("DOMContentLoaded", (event) => {
@@ -72,14 +75,14 @@ const HTML5Embed = (props)=>{
   </video>
     <div
           style="${props.style}"
-           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-thumbnail-video', {
+           class="${core.cls('gp-absolute gp-top-0 gp-left-0  gp-w-full gp-h-full gp-thumbnail-video', {
         'gp-hidden': !props.thumbnail || props.autoplay
     })}"
         >
           <img
             id="video-thumbnail"
             src="${props.thumbnail ?? ''}"
-            class="gp-w-full gp-h-full gp-object-cover"
+            class="gp-w-full gp-h-full gp-object-contain"
             alt="Video Thumbnail"
           ></img>
           <button

package/dist/cjs/video/components/LiteYouTubeEmbed.liquid.js

@@ -7,7 +7,7 @@ var NextImage_liquid = require('../../image/components/NextImage.liquid.js');
 var helpers = require('../../helpers.js');
 
 const LiteYouTubeEmbed = (props)=>{
-    const { style, lazy, preload } = props;
+    const { style, lazy, preload, enableLazyLoadImage, pageContext } = props;
     const videoUid = `gp-video-${props.uid}`;
     const videoId = encodeURIComponent(props.id);
     const videoTitle = props.title;
@@ -42,7 +42,7 @@ const LiteYouTubeEmbed = (props)=>{
         data-title="${videoTitle}"
         style="${{
         ...core.makeStyleResponsive('bgi', {
-            desktop: preload ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
+            desktop: preload || !enableLazyLoadImage ? `url('${posterUrl}')` : `url('${imagePlaceholder}')`
         }),
         ...style
     }}"
@@ -52,7 +52,9 @@ const LiteYouTubeEmbed = (props)=>{
         src: posterUrl,
         alt: 'Poster',
         className: `gp-invisible gp-w-full gp-h-full gp_lazyforbg`,
-        isDisableAspectStyle: true
+        isDisableAspectStyle: true,
+        enableLazyLoadImage,
+        pageContext
     })}
         <button
           type="button"

package/dist/esm/article/components/ArticleImage.js

@@ -25,7 +25,8 @@ const ArticleImage = ({ className, setting = {}, styles = {}, advanced, builderP
             setting: {
                 ...setting,
                 alt: image.alt,
-                image
+                image,
+                disableNoDataState: true
             },
             styles: styles,
             advanced: advanced

package/dist/esm/article/components/ArticleList.js

@@ -10,7 +10,7 @@ const ArticleList = ({ styles, setting, className, children, builderProps })=>{
     const { articleSetting, numberOfArticle } = setting ?? {};
     const { articleIds, articlePickType } = articleSetting ?? {};
     const articlesQuery = {
-        first: 10,
+        first: articleIds?.length ?? 50,
         where: {
             baseIDIn: [
                 ...articleSetting?.articleIds ?? []

package/dist/esm/banner/components/hero-banner/index.liquid.js

@@ -10,7 +10,7 @@ import NextImage from '../../../image/components/NextImage.liquid.js';
 import { getImageSrc, DEVICES } from '../../../image/helpers/getSrcSet.js';
 import { createBlurDataURL } from '../../../image/components/helpers.js';
 
-const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyloadImage = true })=>{
+const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, children, rawChildren, advanced, enableLazyLoadImage = true })=>{
     const { link, layout, verticalAlign, order, alignBanner, alt, title } = setting ?? {};
     const { background, overlayEnable, overlayColor, overlayOpacity, verticalGutter, contentWidth, hoverEffect, hoverEffectDuration, hoverEffectScale, cornerBg, borderBg, hasActiveShadow, shadowBg, sizeSetting, contentPadding } = styles ?? {};
     const enableParallax = setting?.enableParallax || false;
@@ -39,9 +39,6 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             } else if (data.videoType === 'html5') {
                 delete data.video;
             }
-            if (data.type !== 'image') {
-                delete data.image;
-            }
         }
         return background;
     };
@@ -130,6 +127,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
         tablet: createBlurDataURL(srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0),
         mobile: createBlurDataURL(srcSet?.mobile?.width ?? srcSet?.tablet?.width ?? srcSet?.desktop?.width ?? 0, srcSet?.mobile?.height ?? srcSet?.tablet?.height ?? srcSet?.desktop?.width ?? 0)
     };
+    const enableLazyLoad = !setting?.preload && enableLazyLoadImage;
     const renderInnerHeroBanner = ()=>{
         return template /* liquid */ `
       <div
@@ -179,7 +177,7 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             alt,
             title,
             imagePlaceholder,
-            enableLazyloadImage
+            enableLazyLoadImage
         })}
         <div class="${cls('gp-absolute gp-w-full gp-h-full')}">
           <div
@@ -193,9 +191,10 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             'clip-path': getClipPath(borderBg?.width, cornerBg)
         }}"
             > 
-            <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background gp_lazybg', {
+            <div class="${cls('hero-banner-bg-parallax gp-hero-banner-image-background', {
             'gp-duration-[var(--duration)] group-hover/hero:gp-scale-[var(--scale)]': hoverEffect,
-            'gp-transition-transform': hoverEffect
+            'gp-transition-transform': hoverEffect,
+            gp_lazybg: enableLazyLoad
         })}"
               style="${{
             ...getStyleBackgroundByDevice(background, {
@@ -204,9 +203,9 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
                 liquid: true
             }),
             ...makeStyleResponsive('bgi', {
-                desktop: `url('${bgiEnableByDevice['desktop'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
-                tablet: `url('${bgiEnableByDevice['tablet'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
-                mobile: `url('${bgiEnableByDevice['mobile'] ? setting?.preload || !enableLazyloadImage ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
+                desktop: `url('${bgiEnableByDevice['desktop'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'desktop'), 'desktop') : imagePlaceholder['desktop'] : ''}')`,
+                tablet: `url('${bgiEnableByDevice['tablet'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'tablet'), 'tablet') : imagePlaceholder['tablet'] : ''}')`,
+                mobile: `url('${bgiEnableByDevice['mobile'] ? !enableLazyLoad ? getImageSrc(getResponsiveValueByScreen(srcSet, 'mobile'), 'mobile') : imagePlaceholder['mobile'] : ''}')`
             }),
             '--duration': `${hoverEffectDuration ?? 0}s`,
             '--scale': hoverEffectScale ?? 1,
@@ -214,17 +213,17 @@ const HeroBanner = ({ builderAttrs, builderProps, setting, styles, style, childr
             ...getStyleHeroBannerBg(backgroundResponsive || {}, enableParallax)
         }}"
             >
+            ${embed()}
             ${!setting?.preload ? DEVICES.map((device)=>{
             return RenderIf(getEnableBgImageByDevice(device), NextImage({
                 src: getImageSrc(getResponsiveValueByScreen(srcSet, device), device),
                 alt: `lazy image ${device}`,
                 className: `gp-absolute gp-top-0 gp-invisible gp-w-full gp_lazyload gp-h-full gp_lazyforbg ${device === 'tablet' ? 'gp_lazybg_tl' : ''} ${device === 'mobile' ? 'gp_lazybg_mb' : ''}`,
                 isDisableAspectStyle: true,
-                enableLazyloadImage
+                enableLazyLoadImage
             }));
         }).join('') : ''}
-            </div>  
-            ${embed()} </div>
+            </div></div>
           </div>
           ${RenderIf(overlayEnable, template`<div
               aria-label="Overlay"

package/dist/esm/banner/components/hero-banner/utils/index.js

@@ -25,13 +25,14 @@ const getHeightHeroBanner = (background, enableParallax)=>{
         'tablet'
     ];
     DEVICES.forEach((device)=>{
+        const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
         const isScale = isScaleImage({
-            enableParallax,
+            enableParallax: enableParallaxDevice,
             attachment: background[device]?.attachment
         });
         result = {
             ...result,
-            [device]: enableParallax ? '150%' : isScale ? '100vh' : '100%'
+            [device]: enableParallaxDevice ? '150%' : isScale ? '100vh' : '100%'
         };
     });
     return makeStyleResponsive('h', result);
@@ -44,8 +45,9 @@ const getWidthHeroBanner = (background, enableParallax)=>{
         'tablet'
     ];
     DEVICES.forEach((device)=>{
+        const enableParallaxDevice = background?.[device]?.type === 'image' ? enableParallax : false;
         const isScale = isScaleImage({
-            enableParallax,
+            enableParallax: enableParallaxDevice,
             attachment: background[device]?.attachment
         });
         result = {

package/dist/esm/builder.js

@@ -107,8 +107,18 @@ import TrustreviewsProductReviews from './third-party/components/TrustreviewsPro
 import MyappgurusProductReviews from './third-party/components/MyappgurusProductReviews.js';
 import HulkProductOptions from './third-party/components/HulkProductOptions.js';
 import TrustshopProductReviews from './third-party/components/TrustshopProductReviews.js';
+import StellarDeliveryDatePickup from './third-party/components/StellarDeliveryDatePickup.js';
+import EssentialCountdownTimerBar from './third-party/components/EssentialCountdownTimerBar.js';
+import EssentialAnnouncementBar from './third-party/components/EssentialAnnouncementBar.js';
+import OkendoReviewsLoyalty from './third-party/components/OkendoReviewsLoyalty.js';
+import EstimatedDeliveryDatePlus from './third-party/components/EstimatedDeliveryDatePlus.js';
 import HextomCountdownTimerBar from './third-party/components/HextomCountdownTimerBar.js';
 import TrustBadgesBear from './third-party/components/TrustBadgesBear.js';
+import TrustedsiteTrustBadges from './third-party/components/TrustedsiteTrustBadges.js';
+import GloColorSwatchvariantImage from './third-party/components/GloColorSwatchvariantImage.js';
+import BfSizeChartSizeGuide from './third-party/components/BfSizeChartSizeGuide.js';
+import AlsoBoughtCbb from './third-party/components/AlsoBoughtCbb.js';
+import HextomFreeShippingBar from './third-party/components/HextomFreeShippingBar.js';
 import CartLineVariant from './cart/components/CartLineVariant.js';
 import Cart from './cart/components/Cart.js';
 import CartList from './cart/components/CartList.js';
@@ -243,6 +253,11 @@ import PostPurchaseCountdownTimer from './post-purchase/countdown-timer/componen
 import Text$1 from './post-purchase/text/Text.js';
 
 var builder = {
+    EstimatedDeliveryDatePlus,
+    OkendoReviewsLoyalty,
+    EssentialAnnouncementBar,
+    EssentialCountdownTimerBar,
+    StellarDeliveryDatePickup,
     TrustshopProductReviews,
     HulkProductOptions,
     TrustreviewsProductReviews,
@@ -479,7 +494,12 @@ var builder = {
     MarqueeItem,
     ProductBadge,
     HextomCountdownTimerBar,
-    TrustBadgesBear
+    TrustBadgesBear,
+    TrustedsiteTrustBadges,
+    GloColorSwatchvariantImage,
+    BfSizeChartSizeGuide,
+    AlsoBoughtCbb,
+    HextomFreeShippingBar
 };
 
 export { builder as default };

package/dist/esm/carousel/components/Carousel.liquid.js

@@ -9,7 +9,7 @@ const DEVICES = [
     'tablet',
     'desktop'
 ];
-const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId, rootAttr, rootClass, wrapperClass, rootStyles, children, rawChildren, isHiddenArrowWhenDisabled = true, advanced, disableMarginAuto, conditionAppendJs, ...props })=>{
+const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId, rootAttr, rootClass, wrapperClass, rootStyles, children, rawChildren, isHiddenArrowWhenDisabled = true, advanced, disableMarginAuto, conditionAppendJs, ftShapeProductImage, ...props })=>{
     const setting = mappingNavigationCarousel(props.setting);
     const styleHeight = makeStyleResponsive('h', getHeightByShapeGlobalSize(styles?.sizeSetting));
     const styleWidth = makeStyleWithDefault('w', getWidthByShapeGlobalSize(styles?.sizeSetting, true), {
@@ -108,7 +108,8 @@ const Carousel = ({ builderAttrs, builderProps, style, styles, moveToIdx, rootId
         setting,
         styles,
         moveToIdx,
-        isHiddenArrowWhenDisabled
+        isHiddenArrowWhenDisabled,
+        ftShapeProductImage
     }).replaceAll("'", ''')}' style="${{
         ...makeStyleResponsive('jc', styles?.align),
         ...rootStyles

package/dist/esm/collection/components/CollectionDescription.js

@@ -1,15 +1,109 @@
-import { jsx } from 'react/jsx-runtime';
-import { useCollection } from '@gem-sdk/core';
-import Text from '../../text/components/Text.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCurrentDevice, useCollection, getResponsiveValueByScreen, composeTypographyClassName, composeTypographyStyle, isSafari, cls, getGlobalColorClass, getStyleShadow, makeStyleResponsive, makeStyle, getGlobalColorStyle } from '@gem-sdk/core';
+import { useState, useRef, useEffect } from 'react';
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, builderProps })=>{
+    const [open, setOpen] = useState(false);
+    const [isShowViewMore, allowShowViewMore] = useState(false);
+    const ref = useRef(null);
+    const currentDevice = useCurrentDevice();
     const collection = useCollection();
-    return /*#__PURE__*/ jsx(Text, {
-        styles: setting,
-        setting: {
-            text: collection?.descriptionHtml ?? 'Collection description',
-            excludeFlex: true
+    const hasLineClamp = getResponsiveValueByScreen(setting?.hasLineClamp, currentDevice);
+    const lineClamp = getResponsiveValueByScreen(setting?.lineClamp, currentDevice);
+    const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
+    const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
+    useEffect(()=>{
+        const dom = ref.current;
+        setOpen(false);
+        if (dom && hasLineClamp && collection?.description) {
+            const value = lineClamp;
+            setTimeout(()=>{
+                const scrollHeight = dom?.scrollHeight ?? 0;
+                const clientHeight = dom?.clientHeight ?? 0;
+                const lineHeight = window.getComputedStyle(dom).getPropertyValue('line-height');
+                const lineText = Math.round((scrollHeight ?? 0) / parseInt(lineHeight));
+                const conditionCheckLine = isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                if (value && conditionCheckLine) {
+                    allowShowViewMore(()=>true);
+                } else {
+                    allowShowViewMore(()=>false);
+                }
+            }, 100);
         }
+    }, [
+        hasLineClamp,
+        lineClamp,
+        collection?.description
+    ]);
+    const css = `
+  .gp-p-description-text > *:not(ol):not(ul):not(table):not(div) {
+    display: inline !important;
+  }
+  .gp-p-description-text > *:not(ol):not(ul):not(table):not(div)::after {
+    content: "\\A";
+    white-space: pre;
+  }
+  .gp-p-description-text > table {
+    box-shadow: none;
+  }
+`;
+    const hasDescription = collection?.description && collection.description?.trim() != '';
+    return /*#__PURE__*/ jsxs("div", {
+        "data-id": builderProps?.uid,
+        children: [
+            !isSafari() && /*#__PURE__*/ jsx("style", {
+                children: css
+            }),
+            /*#__PURE__*/ jsx("div", {
+                ref: ref,
+                "data-gp-text": true,
+                className: cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, !hasDescription ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', getGlobalColorClass('text', setting?.color)),
+                style: {
+                    ...getStyleShadow({
+                        styleAppliedFor: 'text-shadow'
+                    }),
+                    ...makeStyleResponsive('ta', setting?.textAlign),
+                    ...hasLineClamp && !open ? makeStyleResponsive('line-clamp', setting?.lineClamp) : {},
+                    ...makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle
+                },
+                dangerouslySetInnerHTML: {
+                    __html: collection?.descriptionHtml && hasDescription ? collection.descriptionHtml : ``
+                }
+            }),
+            hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxs("button", {
+                className: cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 gp-w-full gp-transition-all hover:gp-opacity-80'),
+                style: {
+                    ...makeStyleResponsive('ta', setting?.textAlign),
+                    ...makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle,
+                    ...getGlobalColorStyle(setting?.showMoreColor)
+                },
+                onClick: ()=>setOpen((prev)=>!prev),
+                children: [
+                    !open ? setting?.viewMoreText : setting?.viewLessText,
+                    setting?.enableViewMoreIcon && /*#__PURE__*/ jsx("svg", {
+                        className: "gp-ml-1 gp-inline-block",
+                        height: "1em",
+                        width: "1em",
+                        viewBox: "0 0 22 12",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: !open ? /*#__PURE__*/ jsx("path", {
+                            d: "M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z",
+                            fill: "currentColor"
+                        }) : /*#__PURE__*/ jsx("path", {
+                            d: "M0.292893 10.2929C-0.0976311 10.6834 -0.0976311 11.3166 0.292893 11.7071C0.683417 12.0976 1.31658 12.0976 1.70711 11.7071L0.292893 10.2929ZM11 1L11.7071 0.292893C11.3166 -0.0976311 10.6834 -0.0976311 10.2929 0.292893L11 1ZM20.2929 11.7071C20.6834 12.0976 21.3166 12.0976 21.7071 11.7071C22.0976 11.3166 22.0976 10.6834 21.7071 10.2929L20.2929 11.7071ZM1.70711 11.7071L11.7071 1.70711L10.2929 0.292893L0.292893 10.2929L1.70711 11.7071ZM10.2929 1.70711L20.2929 11.7071L21.7071 10.2929L11.7071 0.292893L10.2929 1.70711Z",
+                            fill: "currentColor"
+                        })
+                    })
+                ]
+            })
+        ]
     });
 };
 

package/dist/esm/collection/components/CollectionDescription.liquid.js

@@ -1,16 +1,109 @@
-import { template } from '@gem-sdk/core';
-import Text from '../../text/components/Text.liquid.js';
+import { composeTypographyStyle, composeTypographyClassName, getStyleShadow, makeStyleResponsive, getGlobalColorStyle, makeStyle, makeLineClamp, template, cls, getGlobalColorClass, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
+import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
+import { getDisplayStyle } from '../../product/components/ProductImages/common/common.js';
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
+    const appendTypoStyle = composeTypographyStyle(setting?.typo, setting?.typography);
+    const appendTypoClass = composeTypographyClassName(setting?.typo, setting?.typography);
+    const defaultStyle = {
+        ...getStyleShadow({
+            styleAppliedFor: 'text-shadow'
+        }),
+        ...makeStyleResponsive('ta', setting?.textAlign),
+        ...getGlobalColorStyle(setting?.color),
+        ...makeStyle({
+            tt: setting?.transform
+        }),
+        ...appendTypoStyle
+    };
+    const collapseStyle = {
+        ...defaultStyle,
+        ...makeStyleResponsive('line-clamp', makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
+    };
+    const getDisplayCollapse = ()=>{
+        return getDisplayStyle((device)=>!!setting?.hasLineClamp && setting.hasLineClamp[device] !== undefined && !setting.hasLineClamp[device], 'block');
+    };
+    const moreIcon = `<svg
+          class="gp-ml-1 gp-inline-block"
+          style="display: inline-block; margin-left: 1px;"
+          height="1em"
+          width="1em"
+          viewBox="0 0 22 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+              d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L1.70711 0.292893ZM11 11L10.2929 11.7071C10.6834 12.0976 11.3166 12.0976 11.7071 11.7071L11 11ZM21.7071 1.70711C22.0976 1.31658 22.0976 0.683417 21.7071 0.292893C21.3166 -0.0976311 20.6834 -0.0976311 20.2929 0.292893L21.7071 1.70711ZM0.292893 1.70711L10.2929 11.7071L11.7071 10.2929L1.70711 0.292893L0.292893 1.70711ZM11.7071 11.7071L21.7071 1.70711L20.2929 0.292893L10.2929 10.2929L11.7071 11.7071Z"
+              fill="currentColor"
+          />
+        </svg>`;
+    const viewMoreTextTranslate = getDynamicSourceLocales({
+        val: setting?.viewMoreText,
+        uid: builderProps?.uid,
+        settingId: 'viewMoreText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
+    const viewLessTextTranslate = getDynamicSourceLocales({
+        val: setting?.viewLessText,
+        uid: builderProps?.uid,
+        settingId: 'viewLessText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
     return template`
-    ${Text({
-        styles: setting,
+  <gp-collection-description  data-id="${builderProps?.uid}" class="${advanced?.cssClass} gp-collection-description" gp-data='${JSON.stringify({
         setting: {
-            ...setting,
-            text: '{{ collection.description }}',
-            excludeFlex: true
-        }
-    })}
+            lineClamp: setting?.lineClamp,
+            hasLineClamp: setting?.hasLineClamp,
+            viewMoreText: viewMoreTextTranslate,
+            viewLessText: viewLessTextTranslate,
+            enableViewMoreIcon: setting?.enableViewMoreIcon
+        },
+        defaultStyle,
+        collapseStyle
+    }).replaceAll("'", '&#039;')}'
+    view-more-text="${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}"
+    view-less-text="${pageContext?.isPreviewing ? viewLessTextTranslate : `{{${viewLessTextTranslate}}}`}"
+  >
+    <div></div>
+    <div
+     data-gp-text
+      class="${cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, getGlobalColorClass('text', setting?.color), "data-[browser=safari]:after:gp-content-[' '] data-[browser=safari]:after:gp-absolute data-[browser=safari]:after:gp-left-0 data-[browser=safari]:after:gp-right-0 data-[browser=safari]:after:gp-bottom-0 data-[browser=safari]:after:gp-w-full data-[browser=safari]:after:gp-h-1/2 data-[browser=safari]:after:gp-bg-gradient-to-t data-[browser=safari]:after:gp-from-white")}"
+      data-gp-text
+      style="${collapseStyle}"
+    >
+    {{collection.description}}
+    </div>
+        {% if collection.description != blank -%}
+      <button
+        type="button"
+        class="p-description-show-more ${cls(appendTypoClass, getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
+        style="${{
+        ...makeStyle({
+            tt: setting?.transform
+        }),
+        ...makeStyleResponsive('ta', setting?.textAlign),
+        ...appendTypoStyle,
+        ...getGlobalColorStyle(setting?.showMoreColor),
+        ...getDisplayCollapse(),
+        position: 'absolute',
+        visibility: 'hidden'
+    }}"
+    >
+      ${pageContext?.isPreviewing ? viewMoreTextTranslate : `{{${viewMoreTextTranslate}}}`}
+      ${setting?.enableViewMoreIcon ? moreIcon : ''}
+      </button>
+    {%- endif -%}
+    {% style %}
+      .p-description-wrapper.gp-p-description-text * {
+        color: inherit
+      }
+    {% endstyle %}
+  </gp-collection-description>
+  ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `;
 };