@gem-sdk/components 4.0.0-staging.1193 → 4.0.0-staging.1195

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

@@ -1,4 +1,4 @@
-import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-sdk/core";import i from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as r}from"../../helpers.js";import{createAttr as l,createClass as a,createStyle as d,If as n}from"@gem-sdk/system";import{getWrapThumbnailClasses as m,getButtonThumbnailClasses as c,getImageThumbnailClasses as u,getVideoYoutubeClasses as p}from"../common/classes.js";import{getPreloadImageStyle as v}from"../common/styles.js";import{getHtml5Attr as y}from"../common/attrs.js";let HTML5Embed=$=>{let g=`gp-video-${$.uid}`,{thumbnail:f,muted:h,autoplay:L,loop:b,controls:E,src:A,style:w,title:T,className:P,lazy:j,poster:k}=$,I=L&&h&&!!f,S=!j&&$.isVideoComponent,V=A.endsWith(".mp4"),x=!f||L&&h,C=S?A:void 0,M=l({...y({videoId:g,title:T,autoplay:L,preloadThumbnail:I,offLazyLoad:S,src:A,thumbnail:f})}),B=a({...m(x)}),N=d({...v()}),z=a({...c()}),D=a({...u()}),G=a({...p(P,S)}),H=()=>I?e`${i({src:f,alt:T,priority:k?.preload,enableLazyLoadImage:!0,style:N})}
+import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-sdk/core";import i from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as r}from"../../helpers.js";import{createAttr as l,createClass as a,createStyle as d,If as n}from"@gem-sdk/system";import{getWrapThumbnailClasses as m,getButtonThumbnailClasses as c,getImageThumbnailClasses as u,getVideoYoutubeClasses as p}from"../common/classes.js";import{getPreloadImageStyle as v}from"../common/styles.js";import{getHtml5Attr as y}from"../common/attrs.js";let HTML5Embed=$=>{let g=`gp-video-${$.uid}`,{thumbnail:f,muted:h,autoplay:L,loop:b,controls:E,src:A,style:w,title:T,className:P,lazy:j,poster:k,wrapperStyles:I}=$,S=L&&h&&!!f,V=!j&&$.isVideoComponent,x=A.endsWith(".mp4"),C=!f||L&&h,M=V?A:void 0,B=l({...y({videoId:g,title:T,autoplay:L,preloadThumbnail:S,offLazyLoad:V,src:A,thumbnail:f})}),N=a({...m(C)}),z=d({...v()}),D=a({...c()}),G=a({...u()}),H=a({...p(P,V)}),O=()=>S?e`${i({src:f,alt:T,priority:k?.preload,enableLazyLoadImage:!0,style:z})}
     ${n(L,`<script>
         document.addEventListener("DOMContentLoaded", (event) => {
           const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
@@ -20,14 +20,14 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
           }
         });
       </script>`)}
-      `:"",O=()=>e`
+      `:"",_=()=>e`
      <div
         role="presentation"
         style="${w}"
-        class="${B}"
+        class="${N}"
         >
-           ${i({id:"video-thumbnail",src:f??"",alt:k?.altText,title:k?.imageTitle,className:D,isDisableAspectStyle:!0,priority:k?.preload,enableLazyLoadImage:!0})}
-          <button type="button" class="${z}" aria-label="Play">
+           ${i({id:"video-thumbnail",src:f??"",alt:k?.altText,title:k?.imageTitle,className:G,isDisableAspectStyle:!0,priority:k?.preload,enableLazyLoadImage:!0})}
+          <button type="button" class="${D}" aria-label="Play">
             <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
               <path
                 fill="currentColor"
@@ -37,22 +37,22 @@ import{template as e,RenderIf as t,isLocalEnv as o,baseAssetURL as s}from"@gem-s
           </button>
         </div>
   `;return e`
-  <gp-lite-html5-embed is-check-loaded="${$.isCheckLoaded??!1}">
-    ${H()}
+  <gp-lite-html5-embed is-check-loaded="${$.isCheckLoaded??!1}" style="${I}">
+    ${O()}
     <video
-    ${{...M}}
+    ${{...B}}
       style="${w}"
-      class="${G}"
+      class="${H}"
       ${E?"controls":void 0}
       ${b?"loop":void 0}
       ${h?"muted":void 0}
       ${L?"autoplay":void 0}
       playsinline
-      src="${C}"
+      src="${M}"
     >
-      ${n(V,`<source data-src="${A}" src="${C}" type="video/mp4"></source>`)}
+      ${n(x,`<source data-src="${A}" src="${M}" type="video/mp4"></source>`)}
     </video>
-    ${n(!x,O())}
+    ${n(!C,_())}
   </gp-lite-html5-embed>
         ${t(o,`<script ${r('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${r('class="gps-link" delay',"src")}="${s}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};export{HTML5Embed as default};

package/dist/types/index.d.ts

@@ -4,7 +4,9 @@ import * as csstype from 'csstype';
 import { Property } from 'csstype';
 import * as _gem_sdk_keen_slider from '@gem-sdk/keen-slider';
 import { KeenSliderInstance } from '@gem-sdk/keen-slider';
+import { Swiper } from 'gem-sdk-swiper';
 import React$1, { ReactNode } from 'react';
+import * as gem_sdk_swiper_types_swiper_class from 'gem-sdk-swiper/types/swiper-class';
 
 type AccordionSettingProps = {
     activeKey?: string;
@@ -770,6 +772,7 @@ type CarouselRef = {
     nextSlideInteraction: (params: InteractionChangeSlide) => void;
     previousSlideInteraction: (params: InteractionChangeSlide) => void;
     moveToSlideInteraction: (params: InteractionChangeSlide) => void;
+    getSwiper: () => Swiper | null;
 };
 type CarouselSettingProps = {
     slidesToShow?: ObjectDevices<number | 'auto'>;
@@ -822,6 +825,7 @@ type CarouselSettingProps = {
     animationMode?: CarouselAnimationValue;
     layout?: 'vertical' | 'hozirontal';
     enableAction?: ObjectDevices<boolean>;
+    initialSlide?: number;
 };
 type CarouselStyleProps = {
     spacing?: ObjectDevices<number>;
@@ -848,12 +852,16 @@ type CarouselProps = BasePropsWrap<CarouselSettingProps, CarouselStyleProps> & {
     onCreated?: (slider: KeenSliderInstance) => void;
     onClickArrow?: () => void;
     onHandleChangeSlideByInteraction?: (index: number) => void;
+    onSwiperReady?: (swiper: Swiper) => void;
     elmRef?: React.Ref<HTMLDivElement>;
     rootClass?: string;
     parentClass?: string;
     rootAttrs?: Record<string, string | boolean | number>;
     slidesClass?: string;
     fullHeight?: boolean;
+    isDisableResetSlide?: boolean;
+    isProductList?: boolean;
+    thumbsSwiper?: string;
 } & {
     rootId?: string;
     rootClass?: string;
@@ -864,6 +872,7 @@ type CarouselProps = BasePropsWrap<CarouselSettingProps, CarouselStyleProps> & {
     disableMarginAuto?: boolean;
     slidesClass?: string;
     conditionAppendJs?: string;
+    isEnableCheckHasScrollableContent?: boolean;
 };
 type CarouselItemProps = {
     parentStyle?: CarouselProps['styles'];
@@ -876,6 +885,7 @@ type CarouselItemProps = {
     dispatchEventSelectSlide?: (index: number) => void;
     parentId?: string;
     parentUid?: string;
+    indexKey?: string;
 } & BasePropsWrap & React.ComponentPropsWithoutRef<'div'>;
 
 declare const Carousel$1: React.ForwardRefExoticComponent<_gem_sdk_core.BaseProps<CarouselSettingProps, CarouselStyleProps, Record<string, any>> & {
@@ -893,12 +903,16 @@ declare const Carousel$1: React.ForwardRefExoticComponent<_gem_sdk_core.BaseProp
     onCreated?: ((slider: _gem_sdk_keen_slider.KeenSliderInstance) => void) | undefined;
     onClickArrow?: (() => void) | undefined;
     onHandleChangeSlideByInteraction?: ((index: number) => void) | undefined;
+    onSwiperReady?: ((swiper: Swiper) => void) | undefined;
     elmRef?: React.Ref<HTMLDivElement> | undefined;
     rootClass?: string | undefined;
     parentClass?: string | undefined;
     rootAttrs?: Record<string, string | number | boolean> | undefined;
     slidesClass?: string | undefined;
     fullHeight?: boolean | undefined;
+    isDisableResetSlide?: boolean | undefined;
+    isProductList?: boolean | undefined;
+    thumbsSwiper?: string | undefined;
 } & {
     rootId?: string | undefined;
     rootClass?: string | undefined;
@@ -909,6 +923,7 @@ declare const Carousel$1: React.ForwardRefExoticComponent<_gem_sdk_core.BaseProp
     disableMarginAuto?: boolean | undefined;
     slidesClass?: string | undefined;
     conditionAppendJs?: string | undefined;
+    isEnableCheckHasScrollableContent?: boolean | undefined;
 } & React.RefAttributes<CarouselRef>>;
 
 declare const CarouselItem$1: React.FC<CarouselItemProps>;
@@ -5913,12 +5928,16 @@ declare const _default$3: {
         onCreated?: ((slider: _gem_sdk_keen_slider.KeenSliderInstance) => void) | undefined;
         onClickArrow?: (() => void) | undefined;
         onHandleChangeSlideByInteraction?: ((index: number) => void) | undefined;
+        onSwiperReady?: ((swiper: gem_sdk_swiper_types_swiper_class.default) => void) | undefined;
         elmRef?: React.Ref<HTMLDivElement> | undefined;
         rootClass?: string | undefined;
         parentClass?: string | undefined;
         rootAttrs?: Record<string, string | number | boolean> | undefined;
         slidesClass?: string | undefined;
         fullHeight?: boolean | undefined;
+        isDisableResetSlide?: boolean | undefined;
+        isProductList?: boolean | undefined;
+        thumbsSwiper?: string | undefined;
     } & {
         rootId?: string | undefined;
         rootClass?: string | undefined;
@@ -5929,6 +5948,7 @@ declare const _default$3: {
         disableMarginAuto?: boolean | undefined;
         slidesClass?: string | undefined;
         conditionAppendJs?: string | undefined;
+        isEnableCheckHasScrollableContent?: boolean | undefined;
     } & React.RefAttributes<CarouselRef>>;
     CarouselItem: React.ComponentType<CarouselItemProps>;
     Button: React.ComponentType<ButtonProps>;
@@ -6843,12 +6863,16 @@ declare const _default$2: {
         onCreated?: ((slider: _gem_sdk_keen_slider.KeenSliderInstance) => void) | undefined;
         onClickArrow?: (() => void) | undefined;
         onHandleChangeSlideByInteraction?: ((index: number) => void) | undefined;
+        onSwiperReady?: ((swiper: gem_sdk_swiper_types_swiper_class.default) => void) | undefined;
         elmRef?: React.Ref<HTMLDivElement> | undefined;
         rootClass?: string | undefined;
         parentClass?: string | undefined;
         rootAttrs?: Record<string, string | number | boolean> | undefined;
         slidesClass?: string | undefined;
         fullHeight?: boolean | undefined;
+        isDisableResetSlide?: boolean | undefined;
+        isProductList?: boolean | undefined;
+        thumbsSwiper?: string | undefined;
     } & {
         rootId?: string | undefined;
         rootClass?: string | undefined;
@@ -6859,6 +6883,7 @@ declare const _default$2: {
         disableMarginAuto?: boolean | undefined;
         slidesClass?: string | undefined;
         conditionAppendJs?: string | undefined;
+        isEnableCheckHasScrollableContent?: boolean | undefined;
     } & React.RefAttributes<CarouselRef>>;
     CarouselItem: React.FC<CarouselItemProps>;
     Cart: React.FC<CartProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "4.0.0-staging.1193",
+  "version": "4.0.0-staging.1195",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "@gem-sdk/keen-slider": "^6.8.8",
+    "gem-sdk-swiper": "0.0.58",
     "node-html-parser": "^6.1.13",
     "react-transition-group": "^4.4.5",
     "react-youtube": "^10.1.0"

package/dist/cjs/carousel/plugins/auto-play.js

@@ -1 +0,0 @@
-"use strict";const AutoPlayPlugin=e=>{let n,o=e.options.autoplay??{},t=!1,r=!1,a=null,s=e?.container?.closest('[data-component-type="component"]')?.querySelector(".carousel-dots");function i(e){e.forEach(e=>{(r=e.isIntersecting)?v():c()})}function u(){!a&&e.container&&(a=new IntersectionObserver(i,{root:null,threshold:0})).observe(e.container)}function c(){clearTimeout(n)}function v(){c(),n=setTimeout(()=>{!t&&o.enable&&r&&e.next()},o.delay??2e3)}function l(){t=!0,c()}function d(){t=!1,v()}e.on("created",()=>{s?.addEventListener("mouseover",l),s?.addEventListener("mouseout",d),o.pauseOnHover&&e.container&&(e.container.addEventListener("mouseover",l),e.container.addEventListener("mouseout",d)),o.enable&&(u(),v())}),e.on("dragStarted",c),e.on("animationEnded",v),e.on("updated",e=>{(o=e.options?.autoplay??{}).enable&&(u(),v())}),e.on("optionsChanged",n=>{n.options.autoplay?.pauseOnHover!==o.pauseOnHover&&e.container&&(n.options.autoplay?.pauseOnHover?(e.container.addEventListener("mouseover",l),e.container.addEventListener("mouseout",d)):(e.container.removeEventListener("mouseover",l),e.container.removeEventListener("mouseout",d),t=!1)),(o=n.options.autoplay??{}).enable&&(u(),v())}),e.on("destroyed",()=>{e.container&&(e.container.removeEventListener("mouseover",l),e.container.removeEventListener("mouseout",d)),s?.removeEventListener("mouseover",l),s?.removeEventListener("mouseout",d),c(),a&&(a.disconnect(),a=null)})};exports.AutoPlayPlugin=AutoPlayPlugin;

package/dist/cjs/carousel/plugins/fix-slider-move-backward.js

@@ -1 +0,0 @@
-"use strict";const FixSliderMoveBackwards=e=>{e.on("animationEnded",e=>{let{rel:a,progress:d}=e.track.details;0===a&&0!==d&&e.moveToIdx(0,!0,{duration:0})})};exports.FixSliderMoveBackwards=FixSliderMoveBackwards;

package/dist/cjs/carousel/plugins/mutation.js

@@ -1 +0,0 @@
-"use strict";const MutationPlugin=e=>{let t=new MutationObserver(t=>{t.forEach(()=>{e.update()})}),i={childList:!0},n=new ResizeObserver(function(){o(e),e.update()}),o=e=>{if(e.options.vertical){s(e);return}r(e)},s=e=>{e.slides.forEach(e=>{e.style.maxWidth="",e.style.minWidth=""})},r=e=>{e.slides.forEach(e=>{e.style.maxHeight="",e.style.minHeight=""})};e.on("created",()=>{n.observe(e.container),t.observe(e.container,i)}),e.on("destroyed",()=>{n.unobserve(e.container),t.disconnect()})};exports.MutationPlugin=MutationPlugin;

package/dist/esm/carousel/plugins/auto-play.js

@@ -1 +0,0 @@
-let AutoPlayPlugin=e=>{let n,o=e.options.autoplay??{},t=!1,r=!1,a=null,i=e?.container?.closest('[data-component-type="component"]')?.querySelector(".carousel-dots");function s(e){e.forEach(e=>{(r=e.isIntersecting)?v():c()})}function u(){!a&&e.container&&(a=new IntersectionObserver(s,{root:null,threshold:0})).observe(e.container)}function c(){clearTimeout(n)}function v(){c(),n=setTimeout(()=>{!t&&o.enable&&r&&e.next()},o.delay??2e3)}function d(){t=!0,c()}function l(){t=!1,v()}e.on("created",()=>{i?.addEventListener("mouseover",d),i?.addEventListener("mouseout",l),o.pauseOnHover&&e.container&&(e.container.addEventListener("mouseover",d),e.container.addEventListener("mouseout",l)),o.enable&&(u(),v())}),e.on("dragStarted",c),e.on("animationEnded",v),e.on("updated",e=>{(o=e.options?.autoplay??{}).enable&&(u(),v())}),e.on("optionsChanged",n=>{n.options.autoplay?.pauseOnHover!==o.pauseOnHover&&e.container&&(n.options.autoplay?.pauseOnHover?(e.container.addEventListener("mouseover",d),e.container.addEventListener("mouseout",l)):(e.container.removeEventListener("mouseover",d),e.container.removeEventListener("mouseout",l),t=!1)),(o=n.options.autoplay??{}).enable&&(u(),v())}),e.on("destroyed",()=>{e.container&&(e.container.removeEventListener("mouseover",d),e.container.removeEventListener("mouseout",l)),i?.removeEventListener("mouseover",d),i?.removeEventListener("mouseout",l),c(),a&&(a.disconnect(),a=null)})};export{AutoPlayPlugin};

package/dist/esm/carousel/plugins/fix-slider-move-backward.js

@@ -1 +0,0 @@
-let FixSliderMoveBackwards=e=>{e.on("animationEnded",e=>{let{rel:a,progress:d}=e.track.details;0===a&&0!==d&&e.moveToIdx(0,!0,{duration:0})})};export{FixSliderMoveBackwards};

package/dist/esm/carousel/plugins/mutation.js

@@ -1 +0,0 @@
-let MutationPlugin=e=>{let t=new MutationObserver(t=>{t.forEach(()=>{e.update()})}),i={childList:!0},n=new ResizeObserver(function(){o(e),e.update()}),o=e=>{if(e.options.vertical){r(e);return}s(e)},r=e=>{e.slides.forEach(e=>{e.style.maxWidth="",e.style.minWidth=""})},s=e=>{e.slides.forEach(e=>{e.style.maxHeight="",e.style.minHeight=""})};e.on("created",()=>{n.observe(e.container),t.observe(e.container,i)}),e.on("destroyed",()=>{n.unobserve(e.container),t.disconnect()})};export{MutationPlugin};