@gem-sdk/components 2.1.15 → 2.1.17

package/dist/cjs/builder.js

@@ -111,6 +111,18 @@ var TrustreviewsProductReviews = require('./third-party/components/TrustreviewsP
 var MyappgurusProductReviews = require('./third-party/components/MyappgurusProductReviews.js');
 var HulkProductOptions = require('./third-party/components/HulkProductOptions.js');
 var TrustshopProductReviews = require('./third-party/components/TrustshopProductReviews.js');
+var StellarDeliveryDatePickup = require('./third-party/components/StellarDeliveryDatePickup.js');
+var EssentialCountdownTimerBar = require('./third-party/components/EssentialCountdownTimerBar.js');
+var EssentialAnnouncementBar = require('./third-party/components/EssentialAnnouncementBar.js');
+var OkendoReviewsLoyalty = require('./third-party/components/OkendoReviewsLoyalty.js');
+var EstimatedDeliveryDatePlus = require('./third-party/components/EstimatedDeliveryDatePlus.js');
+var HextomCountdownTimerBar = require('./third-party/components/HextomCountdownTimerBar.js');
+var TrustBadgesBear = require('./third-party/components/TrustBadgesBear.js');
+var TrustedsiteTrustBadges = require('./third-party/components/TrustedsiteTrustBadges.js');
+var GloColorSwatchvariantImage = require('./third-party/components/GloColorSwatchvariantImage.js');
+var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuide.js');
+var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
+var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.js');
 var CartLineVariant = require('./cart/components/CartLineVariant.js');
 var Cart = require('./cart/components/Cart.js');
 var CartList = require('./cart/components/CartList.js');
@@ -245,6 +257,11 @@ var PostPurchaseCountdownTimer = require('./post-purchase/countdown-timer/compon
 var Text$1 = require('./post-purchase/text/Text.js');
 
 var builder = {
+    EstimatedDeliveryDatePlus: EstimatedDeliveryDatePlus.default,
+    OkendoReviewsLoyalty: OkendoReviewsLoyalty.default,
+    EssentialAnnouncementBar: EssentialAnnouncementBar.default,
+    EssentialCountdownTimerBar: EssentialCountdownTimerBar.default,
+    StellarDeliveryDatePickup: StellarDeliveryDatePickup.default,
     TrustshopProductReviews: TrustshopProductReviews.default,
     HulkProductOptions: HulkProductOptions.default,
     TrustreviewsProductReviews: TrustreviewsProductReviews.default,
@@ -479,7 +496,14 @@ var builder = {
     ArticleReadMore: ArticleReadMore.default,
     Marquee: Marquee.default,
     MarqueeItem: MarqueeItem.default,
-    ProductBadge: index$8.default
+    ProductBadge: index$8.default,
+    HextomCountdownTimerBar: HextomCountdownTimerBar.default,
+    TrustBadgesBear: TrustBadgesBear.default,
+    TrustedsiteTrustBadges: TrustedsiteTrustBadges.default,
+    GloColorSwatchvariantImage: GloColorSwatchvariantImage.default,
+    BfSizeChartSizeGuide: BfSizeChartSizeGuide.default,
+    AlsoBoughtCbb: AlsoBoughtCbb.default,
+    HextomFreeShippingBar: HextomFreeShippingBar.default
 };
 
 exports.default = builder;

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

@@ -4,16 +4,110 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
-var Text = require('../../text/components/Text.js');
+var React = require('react');
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, builderProps })=>{
+    const [open, setOpen] = React.useState(false);
+    const [isShowViewMore, allowShowViewMore] = React.useState(false);
+    const ref = React.useRef(null);
+    const currentDevice = core.useCurrentDevice();
     const collection = core.useCollection();
-    return /*#__PURE__*/ jsxRuntime.jsx(Text.default, {
-        styles: setting,
-        setting: {
-            text: collection?.descriptionHtml ?? 'Collection description',
-            excludeFlex: true
+    const hasLineClamp = core.getResponsiveValueByScreen(setting?.hasLineClamp, currentDevice);
+    const lineClamp = core.getResponsiveValueByScreen(setting?.lineClamp, currentDevice);
+    const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
+    const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
+    React.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 = core.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__*/ jsxRuntime.jsxs("div", {
+        "data-id": builderProps?.uid,
+        children: [
+            !core.isSafari() && /*#__PURE__*/ jsxRuntime.jsx("style", {
+                children: css
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                ref: ref,
+                "data-gp-text": true,
+                className: core.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' : '', core.getGlobalColorClass('text', setting?.color)),
+                style: {
+                    ...core.getStyleShadow({
+                        styleAppliedFor: 'text-shadow'
+                    }),
+                    ...core.makeStyleResponsive('ta', setting?.textAlign),
+                    ...hasLineClamp && !open ? core.makeStyleResponsive('line-clamp', setting?.lineClamp) : {},
+                    ...core.makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle
+                },
+                dangerouslySetInnerHTML: {
+                    __html: collection?.descriptionHtml && hasDescription ? collection.descriptionHtml : ``
+                }
+            }),
+            hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxRuntime.jsxs("button", {
+                className: core.cls(appendTypoClass, core.getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 gp-w-full gp-transition-all hover:gp-opacity-80'),
+                style: {
+                    ...core.makeStyleResponsive('ta', setting?.textAlign),
+                    ...core.makeStyle({
+                        tt: setting?.transform
+                    }),
+                    ...appendTypoStyle,
+                    ...core.getGlobalColorStyle(setting?.showMoreColor)
+                },
+                onClick: ()=>setOpen((prev)=>!prev),
+                children: [
+                    !open ? setting?.viewMoreText : setting?.viewLessText,
+                    setting?.enableViewMoreIcon && /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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__*/ jsxRuntime.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/cjs/collection/components/CollectionDescription.liquid.js

@@ -3,18 +3,111 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@gem-sdk/core');
-var Text_liquid = require('../../text/components/Text.liquid.js');
+var helpers = require('../../helpers.js');
+var common = require('../../product/components/ProductImages/common/common.js');
 
-const CollectionDescription = ({ setting })=>{
+const CollectionDescription = ({ setting, advanced, builderProps, pageContext })=>{
+    const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
+    const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
+    const defaultStyle = {
+        ...core.getStyleShadow({
+            styleAppliedFor: 'text-shadow'
+        }),
+        ...core.makeStyleResponsive('ta', setting?.textAlign),
+        ...core.getGlobalColorStyle(setting?.color),
+        ...core.makeStyle({
+            tt: setting?.transform
+        }),
+        ...appendTypoStyle
+    };
+    const collapseStyle = {
+        ...defaultStyle,
+        ...core.makeStyleResponsive('line-clamp', core.makeLineClamp(setting?.lineClamp, setting?.hasLineClamp))
+    };
+    const getDisplayCollapse = ()=>{
+        return common.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 = helpers.getDynamicSourceLocales({
+        val: setting?.viewMoreText,
+        uid: builderProps?.uid,
+        settingId: 'viewMoreText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
+    const viewLessTextTranslate = helpers.getDynamicSourceLocales({
+        val: setting?.viewLessText,
+        uid: builderProps?.uid,
+        settingId: 'viewLessText',
+        isLiquid: true,
+        pageContext,
+        translate: setting?.translate
+    });
     return core.template`
-    ${Text_liquid.default({
-        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="${core.cls('gp-relative p-description-wrapper gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, core.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 ${core.cls(appendTypoClass, core.getGlobalColorClass('text', setting?.showMoreColor), 'gp-mt-4 hover:gp-opacity-80 gp-transition-all gp-w-full')}"
+        style="${{
+        ...core.makeStyle({
+            tt: setting?.transform
+        }),
+        ...core.makeStyleResponsive('ta', setting?.textAlign),
+        ...appendTypoStyle,
+        ...core.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>
+  ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-collection-description.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-collection-description.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `;
 };
 

package/dist/cjs/collection/setting/CollectionDescription.js

@@ -39,6 +39,59 @@ const config = {
                         }
                     ]
                 },
+                {
+                    id: 'hasLineClamp',
+                    label: 'Enable View More',
+                    type: 'toggle',
+                    devices: {
+                        desktop: {
+                            default: true
+                        }
+                    }
+                },
+                {
+                    id: 'lineClamp',
+                    label: 'Maximum Row(s) To Show',
+                    type: 'input:number',
+                    min: 1,
+                    hide: true,
+                    devices: {
+                        desktop: {
+                            default: 12
+                        }
+                    }
+                },
+                {
+                    id: 'viewMoreText',
+                    label: 'View More Text',
+                    type: 'input',
+                    default: 'Show more',
+                    hide: true
+                },
+                {
+                    id: 'showMoreColor',
+                    type: 'colorpicker',
+                    default: 'text-1'
+                },
+                {
+                    id: 'viewLessText',
+                    label: 'View Less Text',
+                    type: 'input',
+                    default: 'Show less',
+                    hide: true
+                },
+                {
+                    id: 'enableViewMoreIcon',
+                    label: 'Enable Icon',
+                    type: 'toggle',
+                    default: true,
+                    hide: true
+                },
+                {
+                    id: 'translate',
+                    type: 'input',
+                    default: 'viewLessText,viewMoreText'
+                },
                 {
                     id: 'textAlign',
                     label: 'Align',
@@ -74,11 +127,86 @@ const config = {
                             default: 'center'
                         }
                     }
+                },
+                {
+                    id: 'color',
+                    type: 'colorpicker',
+                    default: 'text-1'
                 }
             ]
         }
     ],
     ui: [
+        {
+            type: 'group',
+            label: {
+                en: ''
+            },
+            controls: [
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more'
+                    },
+                    options: {
+                        label: 'large'
+                    },
+                    setting: {
+                        id: 'hasLineClamp'
+                    }
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Text color'
+                    },
+                    setting: {
+                        id: 'showMoreColor'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Max lines'
+                    },
+                    setting: {
+                        id: 'lineClamp'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show more label'
+                    },
+                    setting: {
+                        id: 'viewMoreText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Show less label'
+                    },
+                    setting: {
+                        id: 'viewLessText'
+                    },
+                    condition: 'hasLineClamp == true'
+                },
+                {
+                    type: 'control',
+                    label: {
+                        en: 'Icon'
+                    },
+                    setting: {
+                        id: 'enableViewMoreIcon'
+                    },
+                    condition: 'hasLineClamp == true'
+                }
+            ]
+        },
         {
             label: {
                 en: 'Text'

package/dist/cjs/index.js

@@ -207,6 +207,18 @@ var TrustreviewsProductReviews = require('./third-party/components/TrustreviewsP
 var MyappgurusProductReviews = require('./third-party/components/MyappgurusProductReviews.js');
 var HulkProductOptions = require('./third-party/components/HulkProductOptions.js');
 var TrustshopProductReviews = require('./third-party/components/TrustshopProductReviews.js');
+var StellarDeliveryDatePickup = require('./third-party/components/StellarDeliveryDatePickup.js');
+var EssentialCountdownTimerBar = require('./third-party/components/EssentialCountdownTimerBar.js');
+var EssentialAnnouncementBar = require('./third-party/components/EssentialAnnouncementBar.js');
+var OkendoReviewsLoyalty = require('./third-party/components/OkendoReviewsLoyalty.js');
+var EstimatedDeliveryDatePlus = require('./third-party/components/EstimatedDeliveryDatePlus.js');
+var HextomCountdownTimerBar = require('./third-party/components/HextomCountdownTimerBar.js');
+var TrustBadgesBear = require('./third-party/components/TrustBadgesBear.js');
+var TrustedsiteTrustBadges = require('./third-party/components/TrustedsiteTrustBadges.js');
+var GloColorSwatchvariantImage = require('./third-party/components/GloColorSwatchvariantImage.js');
+var BfSizeChartSizeGuide = require('./third-party/components/BfSizeChartSizeGuide.js');
+var AlsoBoughtCbb = require('./third-party/components/AlsoBoughtCbb.js');
+var HextomFreeShippingBar = require('./third-party/components/HextomFreeShippingBar.js');
 var index$x = require('./third-party-instant/setting/index.js');
 var InstantJudgemeReviews = require('./third-party-instant/components/InstantJudgemeReviews.js');
 var InstantLooxReviews = require('./third-party-instant/components/InstantLooxReviews.js');
@@ -509,6 +521,18 @@ exports.TrustreviewsProductReviews = TrustreviewsProductReviews.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews.default;
 exports.HulkProductOptions = HulkProductOptions.default;
 exports.TrustshopProductReviews = TrustshopProductReviews.default;
+exports.StellarDeliveryDatePickup = StellarDeliveryDatePickup.default;
+exports.EssentialCountdownTimerBar = EssentialCountdownTimerBar.default;
+exports.EssentialAnnouncementBar = EssentialAnnouncementBar.default;
+exports.OkendoReviewsLoyalty = OkendoReviewsLoyalty.default;
+exports.EstimatedDeliveryDatePlus = EstimatedDeliveryDatePlus.default;
+exports.HextomCountdownTimerBar = HextomCountdownTimerBar.default;
+exports.TrustBadgesBear = TrustBadgesBear.default;
+exports.TrustedsiteTrustBadges = TrustedsiteTrustBadges.default;
+exports.GloColorSwatchvariantImage = GloColorSwatchvariantImage.default;
+exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide.default;
+exports.AlsoBoughtCbb = AlsoBoughtCbb.default;
+exports.HextomFreeShippingBar = HextomFreeShippingBar.default;
 exports.thirdPartyInstantSetting = index$x.default;
 exports.InstantJudgemeReviews = InstantJudgemeReviews.default;
 exports.InstantLooxReviews = InstantLooxReviews.default;

package/dist/cjs/index.liquid.js

@@ -162,6 +162,18 @@ var TrustreviewsProductReviews_liquid = require('./third-party/components/Trustr
 var MyappgurusProductReviews_liquid = require('./third-party/components/MyappgurusProductReviews.liquid.js');
 var HulkProductOptions_liquid = require('./third-party/components/HulkProductOptions.liquid.js');
 var TrustshopProductReviews_liquid = require('./third-party/components/TrustshopProductReviews.liquid.js');
+var StellarDeliveryDatePickup_liquid = require('./third-party/components/StellarDeliveryDatePickup.liquid.js');
+var EssentialCountdownTimerBar_liquid = require('./third-party/components/EssentialCountdownTimerBar.liquid.js');
+var EssentialAnnouncementBar_liquid = require('./third-party/components/EssentialAnnouncementBar.liquid.js');
+var OkendoReviewsLoyalty_liquid = require('./third-party/components/OkendoReviewsLoyalty.liquid.js');
+var EstimatedDeliveryDatePlus_liquid = require('./third-party/components/EstimatedDeliveryDatePlus.liquid.js');
+var HextomCountdownTimerBar_liquid = require('./third-party/components/HextomCountdownTimerBar.liquid.js');
+var TrustBadgesBear_liquid = require('./third-party/components/TrustBadgesBear.liquid.js');
+var TrustedsiteTrustBadges_liquid = require('./third-party/components/TrustedsiteTrustBadges.liquid.js');
+var GloColorSwatchvariantImage_liquid = require('./third-party/components/GloColorSwatchvariantImage.liquid.js');
+var BfSizeChartSizeGuide_liquid = require('./third-party/components/BfSizeChartSizeGuide.liquid.js');
+var AlsoBoughtCbb_liquid = require('./third-party/components/AlsoBoughtCbb.liquid.js');
+var HextomFreeShippingBar_liquid = require('./third-party/components/HextomFreeShippingBar.liquid.js');
 var ImageComparison_liquid = require('./image-comparison/components/ImageComparison.liquid.js');
 var ThirdPartySlot_liquid = require('./third-party-slot/components/ThirdPartySlot.liquid.js');
 var Sticky_liquid = require('./sticky/components/Sticky.liquid.js');
@@ -346,6 +358,18 @@ exports.TrustreviewsProductReviews = TrustreviewsProductReviews_liquid.default;
 exports.MyappgurusProductReviews = MyappgurusProductReviews_liquid.default;
 exports.HulkProductOptions = HulkProductOptions_liquid.default;
 exports.TrustshopProductReviews = TrustshopProductReviews_liquid.default;
+exports.StellarDeliveryDatePickup = StellarDeliveryDatePickup_liquid.default;
+exports.EssentialCountdownTimerBar = EssentialCountdownTimerBar_liquid.default;
+exports.EssentialAnnouncementBar = EssentialAnnouncementBar_liquid.default;
+exports.OkendoReviewsLoyalty = OkendoReviewsLoyalty_liquid.default;
+exports.EstimatedDeliveryDatePlus = EstimatedDeliveryDatePlus_liquid.default;
+exports.HextomCountdownTimerBar = HextomCountdownTimerBar_liquid.default;
+exports.TrustBadgesBear = TrustBadgesBear_liquid.default;
+exports.TrustedsiteTrustBadges = TrustedsiteTrustBadges_liquid.default;
+exports.GloColorSwatchvariantImage = GloColorSwatchvariantImage_liquid.default;
+exports.BfSizeChartSizeGuide = BfSizeChartSizeGuide_liquid.default;
+exports.AlsoBoughtCbb = AlsoBoughtCbb_liquid.default;
+exports.HextomFreeShippingBar = HextomFreeShippingBar_liquid.default;
 exports.ImageComparison = ImageComparison_liquid.default;
 exports.ThirdPartySlot = ThirdPartySlot_liquid.default;
 exports.Sticky = Sticky_liquid.default;

package/dist/cjs/product/components/ProductDescription/common.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var core = require('@gem-sdk/core');
+var _const = require('./const.js');
+
+const getMaxHeightStyleDefault = (setting)=>{
+    let result = {
+        desktop: 'none'
+    };
+    const devices = [
+        'desktop',
+        'mobile',
+        'tablet'
+    ];
+    devices.forEach((device)=>{
+        const lineClamp = core.getResponsiveValueByScreen(setting?.lineClamp, device);
+        const hasLineClamp = core.getResponsiveValueByScreen(setting?.hasLineClamp, device);
+        const maxHeight = hasLineClamp && lineClamp ? `${lineClamp * _const.DESCRIPTION_LINE_HEIGHT_DEFAULT}px` : 'none';
+        result = {
+            ...result,
+            [device]: maxHeight
+        };
+    });
+    const style = core.makeStyleResponsive('maxh', result);
+    return style;
+};
+
+exports.getMaxHeightStyleDefault = getMaxHeightStyleDefault;

package/dist/cjs/product/components/ProductDescription/const.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const DESCRIPTION_LINE_HEIGHT_DEFAULT = 21;
+
+exports.DESCRIPTION_LINE_HEIGHT_DEFAULT = DESCRIPTION_LINE_HEIGHT_DEFAULT;

package/dist/cjs/product/components/ProductDescription.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@gem-sdk/core');
 var React = require('react');
+var common = require('./ProductDescription/common.js');
+var _const = require('./ProductDescription/const.js');
 
 const ProductDescription = ({ setting, builderProps })=>{
     const [open, setOpen] = React.useState(false);
@@ -18,14 +20,18 @@ const ProductDescription = ({ setting, builderProps })=>{
     React.useEffect(()=>{
         const dom = ref.current;
         setOpen(false);
-        if (dom && hasLineClamp && product?.description) {
+        if (!dom) return;
+        const enableShowMore = hasLineClamp && product?.descriptionHtml;
+        if (!enableShowMore) dom.style.maxHeight = 'none';
+        else {
             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 = core.isSafari() ? value && value < lineText : clientHeight < scrollHeight;
+                const lineHeight = getLineHeightFromDom();
+                const lineText = Math.round((scrollHeight ?? 0) / lineHeight);
+                dom.style.maxHeight = getMaxHeight(lineHeight);
+                const conditionCheckLine = value && value < lineText || clientHeight < scrollHeight;
                 if (value && conditionCheckLine) {
                     allowShowViewMore(()=>true);
                 } else {
@@ -36,8 +42,19 @@ const ProductDescription = ({ setting, builderProps })=>{
     }, [
         hasLineClamp,
         lineClamp,
-        product?.description
+        product?.description,
+        core.isSafari
     ]);
+    const getLineHeightFromDom = ()=>{
+        if (!ref.current) return _const.DESCRIPTION_LINE_HEIGHT_DEFAULT;
+        const lineHeight = window.getComputedStyle(ref.current).getPropertyValue('line-height');
+        return parseInt(lineHeight);
+    };
+    const getMaxHeight = (lineHeight)=>{
+        if (!hasLineClamp || !lineClamp) return 'auto';
+        if (lineHeight) return `${lineClamp * lineHeight}px`;
+        return 'auto';
+    };
     const Tag = htmlTag === 'html' ? 'div' : 'p';
     const appendTypoClass = core.composeTypographyClassName(setting?.typo, setting?.typography);
     const appendTypoStyle = core.composeTypographyStyle(setting?.typo, setting?.typography);
@@ -54,7 +71,17 @@ const ProductDescription = ({ setting, builderProps })=>{
     }
   `;
     const DescriptionNotFoundString = 'This product does not have a description';
-    const hasDescription = product?.description && product.description?.trim() != '';
+    const noDescriptionHtml = !product?.descriptionHtml;
+    const handleToggleShowMore = ()=>{
+        if (!ref.current) return;
+        const lineHeight = getLineHeightFromDom();
+        if (open) {
+            ref.current.style.maxHeight = getMaxHeight(lineHeight);
+        } else {
+            ref.current.style.maxHeight = 'none';
+        }
+        setOpen((prev)=>!prev);
+    };
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: !product ? null : /*#__PURE__*/ jsxRuntime.jsxs("div", {
             "data-id": builderProps?.uid,
@@ -65,7 +92,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                 /*#__PURE__*/ jsxRuntime.jsx(Tag, {
                     ref: ref,
                     "data-gp-text": true,
-                    className: core.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' : '', core.getGlobalColorClass('text', setting?.color)),
+                    className: core.cls('gp-p-description-text gp-break-words safari:[&_p]:gp-inline safari:[&_p]:after:gp-whitespace-pre', appendTypoClass, noDescriptionHtml ? 'gp-p-2 gp-text-center gp-text-sm gp-font-semibold gp-text-gray-500 gp-py-2 !gp-text-center' : '', core.getGlobalColorClass('text', setting?.color)),
                     style: {
                         ...core.getStyleShadow({
                             value: setting?.textShadow,
@@ -77,10 +104,11 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...core.makeStyle({
                             tt: setting?.transform
                         }),
-                        ...appendTypoStyle
+                        ...appendTypoStyle,
+                        ...common.getMaxHeightStyleDefault(setting)
                     },
                     dangerouslySetInnerHTML: {
-                        __html: product?.descriptionHtml && hasDescription ? product.descriptionHtml : `${DescriptionNotFoundString}`
+                        __html: product?.descriptionHtml || `${DescriptionNotFoundString}`
                     }
                 }),
                 hasLineClamp && isShowViewMore && /*#__PURE__*/ jsxRuntime.jsxs("button", {
@@ -93,7 +121,7 @@ const ProductDescription = ({ setting, builderProps })=>{
                         ...appendTypoStyle,
                         ...core.getGlobalColorStyle(setting?.showMoreColor)
                     },
-                    onClick: ()=>setOpen((prev)=>!prev),
+                    onClick: handleToggleShowMore,
                     children: [
                         !open ? setting?.viewMoreText : setting?.viewLessText,
                         setting?.enableViewMoreIcon && /*#__PURE__*/ jsxRuntime.jsx("svg", {