@gem-sdk/components 13.1.6 → 13.2.2

package/dist/cjs/carousel-v3/components/swiper/Swiper.js

@@ -1 +1 @@
-"use strict";var jsxRuntime=require("react/jsx-runtime"),React=require("react"),styles=require("./common/styles.js");function Swiper(e){let t=React.useRef(null),{children:r,totalSlides:s,onSwiperReset:i,onSwiperReady:n,sliderClass:c,sliderOrder:u,thumbsSwiper:a,...p}=e,[l,w]=React.useState(!1),o=React.useMemo(()=>a?{"thumbs-swiper":a}:{},[a]),f=styles.getStyleSwiperContainer(),d="object"==typeof e.autoplay&&null!==e.autoplay?e.autoplay.pauseOnMouseEnter:void 0,y=()=>{t.current?.swiper&&t.current.swiper.wrapperEl.style.setProperty("width",`${t.current.swiper.width}px`)};return React.useEffect(()=>{let e=async()=>{let e=await import("@gem-sdk/swiper/element/bundle");e.register(),await window.customElements.whenDefined("swiper-container"),w(!0)};e()},[]),React.useEffect(()=>{l&&(Object.assign(t.current,p),t.current.initialize(),n?.(t.current.swiper),y())},[l]),React.useEffect(()=>{t.current?.swiper&&(t.current.swiper.destroy(!1,!1),Object.assign(t.current,p),t.current.initialize(),n(t.current.swiper),i())},[p.dir,p.loop,d,p.slidesPerView,n,i,p.spaceBetween,p.slidesOffsetBefore]),React.useEffect(()=>{let e=t.current;e&&(Object.assign(e,p),e.swiper?.update(),y())},[p]),React.useEffect(()=>{i()},[u,i]),React.useEffect(()=>{let e=t.current;if(!e)return;let r=()=>{y()};return e.addEventListener("swiperresize",r),()=>{e.removeEventListener("swiperresize",r)}},[]),jsxRuntime.jsx("swiper-container",{init:!1,ref:t,class:c,style:{...f,display:l?"block":"none"},...o,children:r})}exports.Swiper=Swiper;
+"use strict";var jsxRuntime=require("react/jsx-runtime"),React=require("react"),styles=require("./common/styles.js");function Swiper(e){let t=React.useRef(null),{children:r,totalSlides:s,onSwiperReset:i,onSwiperReady:n,sliderClass:c,sliderOrder:u,thumbsSwiper:a,...p}=e,[l,w]=React.useState(!1),o=React.useMemo(()=>a?{"thumbs-swiper":a}:{},[a]),f=styles.getStyleSwiperContainer(),d="object"==typeof e.autoplay&&null!==e.autoplay?e.autoplay.pauseOnMouseEnter:void 0,y=()=>{t.current?.swiper&&t.current.swiper.wrapperEl.style.setProperty("width",`${t.current.swiper.width}px`)};return React.useEffect(()=>{let e=async()=>{let e=await import("@gem-sdk/swiper/element/bundle");e.register(),await window.customElements.whenDefined("swiper-container"),w(!0)};e()},[]),React.useEffect(()=>{l&&t.current&&(Object.assign(t.current,p),t.current.initialize?.(),n?.(t.current.swiper),y())},[l]),React.useEffect(()=>{t.current?.swiper&&(t.current.swiper.destroy(!1,!1),Object.assign(t.current,p),t.current.initialize?.(),n(t.current.swiper),i())},[p.dir,p.loop,d,p.slidesPerView,n,i,p.spaceBetween,p.slidesOffsetBefore]),React.useEffect(()=>{let e=t.current;e&&(Object.assign(e,p),e.swiper?.update(),y())},[p]),React.useEffect(()=>{i()},[u,i]),React.useEffect(()=>{let e=t.current;if(!e)return;let r=()=>{y()};return e.addEventListener("swiperresize",r),()=>{e.removeEventListener("swiperresize",r)}},[]),jsxRuntime.jsx("swiper-container",{init:!1,ref:t,class:c,style:{...f,display:l?"block":"none"},...o,children:r})}exports.Swiper=Swiper;

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

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let t=`gp-video-${e.uid}`,{thumbnail:s,muted:a,autoplay:l,loop:o,controls:r,src:i,style:d,title:n,className:c,lazy:u,poster:m,wrapperStyles:p}=e,y=l&&a&&!!s,g=!u&&e.isVideoComponent,v=!s||l&&a,$=g?i:void 0,h=system.createAttr({...attrs.getHtml5Attr({videoId:t,title:n,autoplay:l,preloadThumbnail:y,offLazyLoad:g,src:i,thumbnail:s})}),b=system.createClass({...classes.getWrapThumbnailClasses(v)}),f=system.createStyle({...styles.getPreloadImageStyle()}),L=system.createClass({...classes.getButtonThumbnailClasses()}),E=system.createClass({...classes.getImageThumbnailClasses()}),I=system.createClass({...classes.getVideoYoutubeClasses(c,g)}),A=()=>y?core.template`${NextImage_liquid.default({src:s,alt:n,priority:m?.preload,enableLazyLoadImage:!0,style:f})}
-    ${system.If(l,`<script>
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../image/components/NextImage.liquid.js"),helpers=require("../../helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js"),attrs=require("../common/attrs.js");const HTML5Embed=e=>{let t=`gp-video-${e.uid}`,{thumbnail:s,muted:a,autoplay:o,loop:r,controls:i,src:l,style:d,title:n,className:c,lazy:u,poster:m,wrapperStyles:v}=e,p=o&&a&&!!s,y=!u&&e.isVideoComponent,g=!s||o&&a,f=y?l:void 0,$=system.createAttr({...attrs.getHtml5Attr({videoId:t,title:n,autoplay:o,preloadThumbnail:p,offLazyLoad:y,src:l,thumbnail:s})}),h=system.createClass({...classes.getWrapThumbnailClasses(g)}),b=system.createStyle({...styles.getPreloadImageStyle()}),L=system.createClass({...classes.getButtonThumbnailClasses()}),E=system.createClass({...classes.getImageThumbnailClasses()}),A=system.createClass({...classes.getVideoYoutubeClasses(c,y)}),P=()=>p?core.template`${NextImage_liquid.default({src:s,alt:n,priority:m?.preload,enableLazyLoadImage:!0,style:b})}
+    ${system.If(o,`<script>
         document.addEventListener("DOMContentLoaded", (event) => {
           const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
           const autoLoadTimeout = setTimeout(runAutoPlayVideo, 0);
@@ -14,9 +14,21 @@
               });
           }
           function runAutoPlayVideo() {
-              document.getElementById('${t}').setAttribute('autoplay','true');
-              document.getElementById('${t}').setAttribute('playsinline','true');
-              document.getElementById('${t}').play();
+              var video = document.getElementById('${t}');
+              if (!video) return;
+              video.setAttribute('autoplay','true');
+              video.setAttribute('playsinline','true');
+              var playPromise = video.play();
+              if (playPromise !== undefined) {
+                playPromise.catch(function(error) {
+                  if (error.name === 'AbortError') {
+                    video.addEventListener('loadeddata', function onLoaded() {
+                      video.removeEventListener('loadeddata', onLoaded);
+                      video.play();
+                    });
+                  }
+                });
+              }
           }
         });
       </script>`)}
@@ -24,7 +36,7 @@
      <div
         role="presentation"
         style="${d}"
-        class="${b}"
+        class="${h}"
         >
            ${NextImage_liquid.default({id:"video-thumbnail",src:s??"",alt:m?.altText,title:m?.imageTitle,className:E,isDisableAspectStyle:!0,priority:m?.preload,enableLazyLoadImage:!0})}
           <button type="button" class="${L}" aria-label="Play">
@@ -37,20 +49,20 @@
           </button>
         </div>
   `;return core.template`
-  <gp-lite-html5-embed is-check-loaded="${e.isCheckLoaded??!1}" style="${p}">
-    ${A()}
+  <gp-lite-html5-embed is-check-loaded="${e.isCheckLoaded??!1}" style="${v}">
+    ${P()}
     <video
-    ${{...h}}
+    ${{...$}}
       style="${d}"
-      class="${I}"
-      ${r?"controls":void 0}
-      ${o?"loop":void 0}
+      class="${A}"
+      ${i?"controls":void 0}
+      ${r?"loop":void 0}
       ${a?"muted":void 0}
-      ${l?"autoplay":void 0}
+      ${o?"autoplay":void 0}
       playsinline
-      ${$?`src="${$}"`:""}
+      ${f?`src="${f}"`:""}
     ></video>
-    ${system.If(!v,C())}
+    ${system.If(!g,C())}
   </gp-lite-html5-embed>
         ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-html5-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-lite-html5-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};exports.default=HTML5Embed;

package/dist/esm/carousel-v3/components/swiper/Swiper.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as r,useState as t,useMemo as i,useEffect as n}from"react";import{getStyleSwiperContainer as s}from"./common/styles.js";function Swiper(p){let o=r(null),{children:c,totalSlides:l,onSwiperReset:u,onSwiperReady:a,sliderClass:w,sliderOrder:d,thumbsSwiper:m,...f}=p,[y,b]=t(!1),j=i(()=>m?{"thumbs-swiper":m}:{},[m]),g=s(),h="object"==typeof p.autoplay&&null!==p.autoplay?p.autoplay.pauseOnMouseEnter:void 0,E=()=>{o.current?.swiper&&o.current.swiper.wrapperEl.style.setProperty("width",`${o.current.swiper.width}px`)};return n(()=>{let e=async()=>{let e=await import("@gem-sdk/swiper/element/bundle");e.register(),await window.customElements.whenDefined("swiper-container"),b(!0)};e()},[]),n(()=>{y&&(Object.assign(o.current,f),o.current.initialize(),a?.(o.current.swiper),E())},[y]),n(()=>{o.current?.swiper&&(o.current.swiper.destroy(!1,!1),Object.assign(o.current,f),o.current.initialize(),a(o.current.swiper),u())},[f.dir,f.loop,h,f.slidesPerView,a,u,f.spaceBetween,f.slidesOffsetBefore]),n(()=>{let e=o.current;e&&(Object.assign(e,f),e.swiper?.update(),E())},[f]),n(()=>{u()},[d,u]),n(()=>{let e=o.current;if(!e)return;let r=()=>{E()};return e.addEventListener("swiperresize",r),()=>{e.removeEventListener("swiperresize",r)}},[]),e("swiper-container",{init:!1,ref:o,class:w,style:{...g,display:y?"block":"none"},...j,children:c})}export{Swiper};
+import{jsx as e}from"react/jsx-runtime";import{useRef as r,useState as t,useMemo as i,useEffect as n}from"react";import{getStyleSwiperContainer as s}from"./common/styles.js";function Swiper(p){let c=r(null),{children:o,totalSlides:u,onSwiperReset:l,onSwiperReady:a,sliderClass:w,sliderOrder:d,thumbsSwiper:m,...f}=p,[y,b]=t(!1),j=i(()=>m?{"thumbs-swiper":m}:{},[m]),g=s(),h="object"==typeof p.autoplay&&null!==p.autoplay?p.autoplay.pauseOnMouseEnter:void 0,E=()=>{c.current?.swiper&&c.current.swiper.wrapperEl.style.setProperty("width",`${c.current.swiper.width}px`)};return n(()=>{let e=async()=>{let e=await import("@gem-sdk/swiper/element/bundle");e.register(),await window.customElements.whenDefined("swiper-container"),b(!0)};e()},[]),n(()=>{y&&c.current&&(Object.assign(c.current,f),c.current.initialize?.(),a?.(c.current.swiper),E())},[y]),n(()=>{c.current?.swiper&&(c.current.swiper.destroy(!1,!1),Object.assign(c.current,f),c.current.initialize?.(),a(c.current.swiper),l())},[f.dir,f.loop,h,f.slidesPerView,a,l,f.spaceBetween,f.slidesOffsetBefore]),n(()=>{let e=c.current;e&&(Object.assign(e,f),e.swiper?.update(),E())},[f]),n(()=>{l()},[d,l]),n(()=>{let e=c.current;if(!e)return;let r=()=>{E()};return e.addEventListener("swiperresize",r),()=>{e.removeEventListener("swiperresize",r)}},[]),e("swiper-container",{init:!1,ref:c,class:w,style:{...g,display:y?"block":"none"},...j,children:o})}export{Swiper};

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "13.1.6",
+  "version": "13.2.2",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",