@gem-sdk/components 12.0.0-dev.123 → 12.0.0-dev.125
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/carousel-v3/components/root/common/helpers.js +1 -1
- package/dist/cjs/product/components/product-images-v3/common/common.js +1 -1
- package/dist/cjs/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.liquid.js +3 -3
- package/dist/esm/carousel-v3/components/root/common/helpers.js +1 -1
- package/dist/esm/product/components/product-images-v3/common/common.js +1 -1
- package/dist/esm/product/components/product-images-v3/components/gallery-carousel/GalleryCarousel.liquid.js +12 -12
- package/dist/types/index.d.ts +4 -0
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core"),system=require("@gem-sdk/system");const getData=e=>{let t=["mobile","tablet","desktop"],{setting:r,rootId:o,builderProps:s,styles:a,moveToIdx:n,isHiddenArrowWhenDisabled:c}=e,
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core"),system=require("@gem-sdk/system");const getData=e=>{let t=["mobile","tablet","desktop"],{setting:r,rootId:o,builderProps:s,styles:a,moveToIdx:n,isHiddenArrowWhenDisabled:c,renderByLayout:i,rootAttrs:l}=e,p=o??s?.uid,g=`gp-carousel-slider-${s?.uid}`,{enableAction:u={desktop:!0},navigationStyle:d,navigationEnable:y={desktop:!0}}=r??{},m=()=>{let e=r?.loop;return t.forEach(t=>{e={...e,[t]:!!core.getResponsiveValueByScreen(u)&&e?.[t]}}),e},S=()=>{let e=d;return t.forEach(t=>{e={...e,[t]:core.getResponsiveValueByScreen(y,t)?core.getResponsiveValueByScreen(e,t):"none"}}),e},f=system.createStateOrContext({id:p,moveToIdx:n,isHiddenArrowWhenDisabled:c,setting:r,styles:a,renderByLayout:i,type:l?.type});return{loopConfig:m(),stateData:JSON.stringify(f).replaceAll("'","'"),uniqueComponentId:p,arrowShowConfig:S(),sliderSelector:g}};exports.getData=getData;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core");const getTypeWidthDevice=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,r=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:r}},convertUnitToNumber=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},convertSpacing=e=>{if(!e)return{desktop:5};let t=convertUnitToNumber(e.desktop,5),o=convertUnitToNumber(e.tablet,t),r=convertUnitToNumber(e.mobile,o);return{desktop:t,tablet:o,mobile:r}},getDisplayStyle=(e,t)=>{let o={},r=["desktop","mobile","tablet"];return r.forEach(r=>{o={...o,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),o},checkAddOverFlowClass=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",r=e?.["--bbrr"]||"0px",i=e?.["--btlr"]||"0px",l=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==r||"0px"!==i||"0px"!==l},getAspectRatio=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let r=core.getResponsiveValueByScreen(e,o)?.shapeValue;if(r)t={...t,[o]:r};else{let r=core.getResponsiveValueByScreen(e,o)?.shape;switch(r){case"square":t={...t,[o]:"1/1"};break;case"vertical":t={...t,[o]:"3/4"};break;case"horizontal":t={...t,[o]:"4/3"};break;case"original":t={...t,[o]:""}}}}),core.makeAspectRatio(t)},getStyleGridLayout=e=>{let t={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!e.isHiddenGalleryImages){let o=!1;core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e.position,r),l=core.getResponsiveValueByScreen(e.ratioLayout,r),n=core.getResponsiveValueByScreen(e.ratioLayoutRight,r),a="desktop"===r?"--gtc":`--gtc-${r}`,s="desktop"===r?"--gtr":`--gtr-${r}`,c="left"===i?l:n,d=["left","right"].includes(i||"");d&&c?(o=!0,Object.assign(t={...t,[a]:`minmax(0, ${c[0]}fr) minmax(0, ${c[1]}fr)`},{[s]:"fit-content(0)"})):o&&Object.assign(t,{[s]:"unset"})})}return t},getStyleGridOrderForFeature=e=>{let t={"--o":"0","--o-tablet":"0","--o-mobile":"0"},o=["desktop","mobile","tablet"];return o.forEach(o=>{let r=core.getResponsiveValueByScreen(e.position,o),i="desktop"===o?"--o":`--o-${o}`;t={...t,[i]:"left"===r?"1":"0"}}),t},getStyleGridOrderForGallery=e=>{let t={"--o":"1","--o-tablet":"1","--o-mobile":"1"},o=["desktop","mobile","tablet"];return o.forEach(o=>{let r=core.getResponsiveValueByScreen(e.position,o),i="desktop"===o?"--o":`--o-${o}`;t={...t,[i]:"left"===r?"0":"1"}}),t},getSrcImage=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,convertSpacingForIndisdeLayout=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},getStyleInsideLayout=(e,t,o)=>{let r=["desktop","mobile","tablet"],i={},l={},n={},a={},s={},c={};return r.forEach(r=>{let d=core.getResponsiveValueByScreen(e,r),u=core.getResponsiveValueByScreen(t,r)?.width,g=core.getResponsiveValueByScreen(o,r);if(i={...i,[r]:["inside-bottom","inside-left","inside-right"].includes(d)?"absolute":"static"},["inside-bottom"].includes(d)){let e=convertSpacingForIndisdeLayout(g);u=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(d)&&(u="100%"),n={...n,[r]:"inside-bottom"===d?`${g}`:"auto"},a={...a,[r]:["inside-left","inside-right"].includes(d)?`${g}`:"auto"},c={...c,[r]:["inside-bottom","inside-left"].includes(d)?`${g}`:"auto"},s={...s,[r]:"inside-right"===d?`${g}`:"auto"},l={...l,[r]:u}}),{...core.makeStyleResponsive("pos",i),...core.makeStyleResponsive("w",core.removeNullUndefined(l)),...core.makeStyleResponsive("bottom",core.removeNullUndefined(n)),...core.makeStyleResponsive("top",core.removeNullUndefined(a)),...core.makeStyleResponsive("left",core.removeNullUndefined(c)),...core.makeStyleResponsive("right",core.removeNullUndefined(s))}},getConditionRenderGalleryImages=(e,t)=>{let o=["desktop","mobile","tablet"],r=!0,i=!1;return o.forEach(o=>{let l=core.getResponsiveValueByScreen(e,o),n=core.getResponsiveValueByScreen(t,o);l&&"only-feature"!==l&&(r=!1),(["two-col","one-col"].includes(l)||"images"===n)&&(i=!0)}),{isOnlyFeatureAllDevices:r,isRenderGalleryGrid:i}},setDefaultWhenUndefineSetting=e=>({...e,setting:{...e.setting}}),getValueFromValueContainUnit=e=>{let t=e.match(/\d+/g);return t?t[0]:e},getPaddingBottomByShapeSetting=e=>{let t=getAspectRatio(e),o={desktop:"auto",mobile:"auto",tablet:"auto"},r=["desktop","mobile","tablet"];return r.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r),l=i?.height,n=i?.width||"",a=getValueFromValueContainUnit(l||""),s=n.toString().match(/px/g)?getValueFromValueContainUnit(n):n;if(l&&n&&!isNaN(Number(a))&&!isNaN(Number(s))){o={...o,[r]:`${Number(a)/Number(s)*100}%`};return}if(l&&!isNaN(Number(a))){o={...o,[r]:l};return}let c=t?.[r]!=="auto"&&t?.[r]?t?.[r]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";o={...o,[r]:`calc((${c})*100%)`}}),o};exports.checkAddOverFlowClass=checkAddOverFlowClass,exports.convertSpacing=convertSpacing,exports.convertSpacingForIndisdeLayout=convertSpacingForIndisdeLayout,exports.convertUnitToNumber=convertUnitToNumber,exports.getAspectRatio=getAspectRatio,exports.getConditionRenderGalleryImages=getConditionRenderGalleryImages,exports.getDisplayStyle=getDisplayStyle,exports.getPaddingBottomByShapeSetting=getPaddingBottomByShapeSetting,exports.getSrcImage=getSrcImage,exports.getStyleGridLayout=getStyleGridLayout,exports.getStyleGridOrderForFeature=getStyleGridOrderForFeature,exports.getStyleGridOrderForGallery=getStyleGridOrderForGallery,exports.getStyleInsideLayout=getStyleInsideLayout,exports.getTypeWidthDevice=getTypeWidthDevice,exports.setDefaultWhenUndefineSetting=setDefaultWhenUndefineSetting;
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core");const getTypeWidthDevice=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,r=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:r}},convertUnitToNumber=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},convertSpacing=e=>{if(!e)return{desktop:5};let t=convertUnitToNumber(e.desktop,5),o=convertUnitToNumber(e.tablet,t),r=convertUnitToNumber(e.mobile,o);return{desktop:t,tablet:o,mobile:r}},getDisplayStyle=(e,t)=>{let o={},r=["desktop","mobile","tablet"];return r.forEach(r=>{o={...o,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),o},checkAddOverFlowClass=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",r=e?.["--bbrr"]||"0px",i=e?.["--btlr"]||"0px",l=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==r||"0px"!==i||"0px"!==l},getAspectRatio=e=>{let t={},o=["desktop","mobile","tablet"];return o.forEach(o=>{let r=core.getResponsiveValueByScreen(e,o)?.shapeValue;if(r)t={...t,[o]:r};else{let r=core.getResponsiveValueByScreen(e,o)?.shape;switch(r){case"square":t={...t,[o]:"1/1"};break;case"vertical":t={...t,[o]:"3/4"};break;case"horizontal":t={...t,[o]:"4/3"};break;case"original":t={...t,[o]:""}}}}),core.makeAspectRatio(t)},getStyleGridLayout=e=>{let t={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!e.isHiddenGalleryImages){let o=!1;core.DEVICES.forEach(r=>{let i=core.getResponsiveValueByScreen(e.position,r),l=core.getResponsiveValueByScreen(e.ratioLayout,r),n=core.getResponsiveValueByScreen(e.ratioLayoutRight,r),a="desktop"===r?"--gtc":`--gtc-${r}`,s="desktop"===r?"--gtr":`--gtr-${r}`,c="left"===i?l:n,d=["left","right"].includes(i||"");d&&c?(o=!0,Object.assign(t={...t,[a]:`minmax(0, ${c[0]}fr) minmax(0, ${c[1]}fr)`},{[s]:"fit-content(0)"})):o&&Object.assign(t,{[s]:"unset"})})}return t},getStyleGridOrderForFeature=e=>{let t={"--o":"0","--o-tablet":"0","--o-mobile":"0"},o=["desktop","mobile","tablet"];return o.forEach(o=>{let r=core.getResponsiveValueByScreen(e.position,o),i="desktop"===o?"--o":`--o-${o}`;t={...t,[i]:"left"===r?"1":"0"}}),t},getStyleGridOrderForGallery=e=>{let t={"--o":"1","--o-tablet":"1","--o-mobile":"1"},o=["desktop","mobile","tablet"];return o.forEach(o=>{let r=core.getResponsiveValueByScreen(e.position,o),i="desktop"===o?"--o":`--o-${o}`;t={...t,[i]:"left"===r?"0":"1"}}),t},getSrcImage=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,convertSpacingForIndisdeLayout=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},getStyleInsideLayout=(e,t,o)=>{let r=["desktop","mobile","tablet"],i={},l={},n={},a={},s={},c={};return r.forEach(r=>{let d=core.getResponsiveValueByScreen(e,r),u=core.getResponsiveValueByScreen(t,r)?.width,g=core.getResponsiveValueByScreen(o,r);if(i={...i,[r]:["inside-bottom","inside-left","inside-right"].includes(d)?"absolute":"static"},["inside-bottom"].includes(d)){let e=convertSpacingForIndisdeLayout(g);u=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(d)&&(u="100%"),n={...n,[r]:"inside-bottom"===d?`${g}`:"auto"},a={...a,[r]:["inside-left","inside-right"].includes(d)?`${g}`:"auto"},c={...c,[r]:["inside-bottom","inside-left"].includes(d)?`${g}`:"auto"},s={...s,[r]:"inside-right"===d?`${g}`:"auto"},l={...l,[r]:u}}),{...core.makeStyleResponsive("pos",i),...core.makeStyleResponsive("w",core.removeNullUndefined(l)),...core.makeStyleResponsive("bottom",core.removeNullUndefined(n)),...core.makeStyleResponsive("top",core.removeNullUndefined(a)),...core.makeStyleResponsive("left",core.removeNullUndefined(c)),...core.makeStyleResponsive("right",core.removeNullUndefined(s))}},getConditionRenderGalleryImages=(e,t)=>{let o=["desktop","mobile","tablet"],r=!0,i=!1;return o.forEach(o=>{let l=core.getResponsiveValueByScreen(e,o),n=core.getResponsiveValueByScreen(t,o);l&&"only-feature"!==l&&(r=!1),(["two-col","one-col"].includes(l)||"images"===n)&&(i=!0)}),{isOnlyFeatureAllDevices:r,isRenderGalleryGrid:i}},setDefaultWhenUndefineSetting=e=>({...e,setting:{...e.setting}}),getValueFromValueContainUnit=e=>{let t=e.match(/\d+/g);return t?t[0]:e},getPaddingBottomByShapeSetting=e=>{let t=getAspectRatio(e),o={desktop:"auto",mobile:"auto",tablet:"auto"},r=["desktop","mobile","tablet"];return r.forEach(r=>{let i=core.getResponsiveValueByScreen(e,r),l=i?.height,n=i?.width||"",a=getValueFromValueContainUnit(l||""),s=n.toString().match(/px/g)?getValueFromValueContainUnit(n):n;if(l&&n&&!isNaN(Number(a))&&!isNaN(Number(s))){o={...o,[r]:`${Number(a)/Number(s)*100}%`};return}if(l&&!isNaN(Number(a))){o={...o,[r]:l};return}let c=t?.[r]!=="auto"&&t?.[r]?t?.[r]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";o={...o,[r]:`calc((${c})*100%)`}}),o},getGalleryCarouselRenderByLayout=e=>{let t=["desktop","mobile","tablet"],o={};return t.forEach(t=>{let r=core.getResponsiveValueByScreen(e,t);o={...o,[t]:"only-feature"!==r}}),o};exports.checkAddOverFlowClass=checkAddOverFlowClass,exports.convertSpacing=convertSpacing,exports.convertSpacingForIndisdeLayout=convertSpacingForIndisdeLayout,exports.convertUnitToNumber=convertUnitToNumber,exports.getAspectRatio=getAspectRatio,exports.getConditionRenderGalleryImages=getConditionRenderGalleryImages,exports.getDisplayStyle=getDisplayStyle,exports.getGalleryCarouselRenderByLayout=getGalleryCarouselRenderByLayout,exports.getPaddingBottomByShapeSetting=getPaddingBottomByShapeSetting,exports.getSrcImage=getSrcImage,exports.getStyleGridLayout=getStyleGridLayout,exports.getStyleGridOrderForFeature=getStyleGridOrderForFeature,exports.getStyleGridOrderForGallery=getStyleGridOrderForGallery,exports.getStyleInsideLayout=getStyleInsideLayout,exports.getTypeWidthDevice=getTypeWidthDevice,exports.setDefaultWhenUndefineSetting=setDefaultWhenUndefineSetting;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),common=require("../../common/common.js"),productGallery=require("../../common/productGallery.js"),_function=require("../../../../helpers/function.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),Carousel_liquid=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),CarouselItem_liquid=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");const ProductGalleryCarousel=({builderPropUID:e,children:t,enableLazyLoadImage:i,...o})=>{let{featuredImageGalleryClasses:s,galleryItemClasses:r}=getProductImagesClassName.getProductImagesClassName(o),{galleryCarouselSettingAttrs:a}=getProductImagesAttr.getProductImagesAttr(o),{galleryCarouselStyle:l,galleryCarouselItemStyle:d}=getProductImagesStyles.getProductImagesStyles(o),p=()=>{let e=(e,t,i)=>{let o=core.getResponsiveValueByScreen(t,i),s=core.getResponsiveValueByScreen(e,i),r="slider"===s&&("bottom-center"===o||"inside-bottom"===o),a=["left","right","inside-left","inside-right"].includes(o??"");return a||r},t=productGallery.checkDisplayGalleryByWidth({shapeByLayout:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),NextImage_liquid=require("../../../../../image/components/NextImage.liquid.js"),common=require("../../common/common.js"),productGallery=require("../../common/productGallery.js"),_function=require("../../../../helpers/function.js"),getProductImagesStyles=require("../../composables/getProductImagesStyles.js"),getProductImagesClassName=require("../../composables/getProductImagesClassName.js"),getProductImagesAttr=require("../../composables/getProductImagesAttr.js"),system=require("@gem-sdk/system"),Carousel_liquid=require("../../../../../carousel-v3/components/root/Carousel.liquid.js"),CarouselItem_liquid=require("../../../../../carousel-v3/components/item/CarouselItem.liquid.js");const ProductGalleryCarousel=({builderPropUID:e,children:t,enableLazyLoadImage:i,...o})=>{let{featuredImageGalleryClasses:s,galleryItemClasses:r}=getProductImagesClassName.getProductImagesClassName(o),{galleryCarouselSettingAttrs:a}=getProductImagesAttr.getProductImagesAttr(o),{galleryCarouselStyle:l,galleryCarouselItemStyle:d}=getProductImagesStyles.getProductImagesStyles(o),p=()=>{let e=(e,t,i)=>{let o=core.getResponsiveValueByScreen(t,i),s=core.getResponsiveValueByScreen(e,i),r="slider"===s&&("bottom-center"===o||"inside-bottom"===o),a=["left","right","inside-left","inside-right"].includes(o??"");return a||r},t=productGallery.checkDisplayGalleryByWidth({shapeByLayout:m}),i={desktop:t.desktop&&e(o.type,o.position,"desktop"),tablet:t.tablet&&e(o.type,o.position,"tablet"),mobile:t.mobile&&e(o.type,o.position,"mobile")};return common.getDisplayStyle(e=>!i[e],"flex")},m=productGallery.getShapeByLayout({shape:o.shape,shapeForBottom:o.shapeForBottom,shapeFor1Col:o.shapeFor1Col,shapeFor2Col:o.shapeFor2Col,shapeForFtOnly:o.shapeForFtOnly,shapeForInsideBottom:o.shapeForInsideBottom,shapeForInside:o.shapeForInside},o.position),g=(e,t)=>core.template`${NextImage_liquid.default({srcIsLiquidCode:!0,src:`${common.getSrcImage("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:e,baseSrc:"{{media.preview_image | image_url}}",style:t,className:"!gp-rounded-none gp-w-full gp-h-full gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:i})}`,u=t=>`
|
|
2
2
|
${system.LiquidIf("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
|
|
3
3
|
${system.LiquidIf("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}")}
|
|
4
4
|
${system.LiquidIf("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<div class="gp-w-full gp-relative gp-h-full"
|
|
7
7
|
|
|
8
8
|
>
|
|
9
|
-
${
|
|
9
|
+
${g({aspectRatio:common.getAspectRatio(m),layout:o?.layout,qualityPercent:o?.qualityPercent,qualityType:o?.qualityType},{width:"100%",height:"100%",cursor:"pointer"})}
|
|
10
10
|
|
|
11
11
|
${system.LiquidIf("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
|
|
12
12
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
</div>
|
|
43
43
|
`})}`,c=()=>{let e=productGallery.getCarouselVerticalConfigByPosition(o.position),t=[e.desktop?"gp-px-0":"gp-py-0",e.tablet?"tablet:gp-px-0":"tablet:gp-py-0",e.mobile?"mobile:gp-px-0":"mobile:gp-py-0"];return` ${t.join(" ")}`},n=system.LiquidIf("product.media.size > 1",system.LiquidFor("media in product.media",`${system.LiquidIf("media.media_type == 'image'",system.LiquidFor("image in product.images",system.LiquidIf("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
|
|
44
44
|
${system.LiquidIf("media.id == product.featured_media.id ",u(o?.borderActive?.border!=="none"?"active":""),u())}`));return core.template`
|
|
45
|
-
${Carousel_liquid.default({builderProps:{uid:e},rootId:`${e}-{{product.id}}`,rootClass:`${s}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"},wrapperClass:c(),slidesClass:productGallery.getMinHeightByPosition(o.position,o.navigationPosition),isHiddenArrowWhenDisabled:!0,setting:a,rootStyles:{...p()},styles:l,disableMarginAuto:!0,children:n})}
|
|
45
|
+
${Carousel_liquid.default({builderProps:{uid:e},rootId:`${e}-{{product.id}}`,rootClass:`${s}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"},wrapperClass:c(),slidesClass:productGallery.getMinHeightByPosition(o.position,o.navigationPosition),isHiddenArrowWhenDisabled:!0,setting:a,rootStyles:{...p()},styles:l,disableMarginAuto:!0,children:n,renderByLayout:common.getGalleryCarouselRenderByLayout(o.position)})}
|
|
46
46
|
`};exports.default=ProductGalleryCarousel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getResponsiveValueByScreen as e}from"@gem-sdk/core";import{createStateOrContext as t}from"@gem-sdk/system";let getData=o=>{let r=["mobile","tablet","desktop"],{setting:a,rootId:l,builderProps:
|
|
1
|
+
import{getResponsiveValueByScreen as e}from"@gem-sdk/core";import{createStateOrContext as t}from"@gem-sdk/system";let getData=o=>{let r=["mobile","tablet","desktop"],{setting:a,rootId:l,builderProps:p,styles:i,moveToIdx:s,isHiddenArrowWhenDisabled:d,renderByLayout:g,rootAttrs:m}=o,n=l??p?.uid,f=`gp-carousel-slider-${p?.uid}`,{enableAction:u={desktop:!0},navigationStyle:c,navigationEnable:k={desktop:!0}}=a??{},y=()=>{let t=a?.loop;return r.forEach(o=>{t={...t,[o]:!!e(u)&&t?.[o]}}),t},h=()=>{let t=c;return r.forEach(o=>{t={...t,[o]:e(k,o)?e(t,o):"none"}}),t},D=t({id:n,moveToIdx:s,isHiddenArrowWhenDisabled:d,setting:a,styles:i,renderByLayout:g,type:m?.type});return{loopConfig:y(),stateData:JSON.stringify(D).replaceAll("'","'"),uniqueComponentId:n,arrowShowConfig:h(),sliderSelector:f}};export{getData};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getResponsiveValueByScreen as e,makeAspectRatio as t,makeStyleResponsive as
|
|
1
|
+
import{getResponsiveValueByScreen as e,makeAspectRatio as t,makeStyleResponsive as o,removeNullUndefined as r,DEVICES as i}from"@gem-sdk/core";let getTypeWidthDevice=e=>{let t=e?.desktop,o=e?.tablet===void 0?t:e?.tablet,r=e?.mobile===void 0?o:e?.mobile;return{desktop:t,tablet:o,mobile:r}},convertUnitToNumber=(e,t)=>{if(!e)return t;if("number"==typeof e)return e;let o=e.replaceAll("px","").replaceAll("%","").replaceAll("rem","").replaceAll("em","");return isNaN(Number(o))?t:Number(o)},convertSpacing=e=>{if(!e)return{desktop:5};let t=convertUnitToNumber(e.desktop,5),o=convertUnitToNumber(e.tablet,t),r=convertUnitToNumber(e.mobile,o);return{desktop:t,tablet:o,mobile:r}},getDisplayStyle=(e,t)=>{let o={},r=["desktop","mobile","tablet"];return r.forEach(r=>{o={...o,[`--d${"desktop"===r?"":`-${r}`}`]:`${e(r)?"none":t}`}}),o},checkAddOverFlowClass=e=>{let t=e?.["--radius"],o=e?.["--bblr"]||"0px",r=e?.["--bbrr"]||"0px",i=e?.["--btlr"]||"0px",l=e?.["--btrr"]||"0px";return t&&!t.toString().includes("none")&&"0"!==t.toString()||"0px"!==o||"0px"!==r||"0px"!==i||"0px"!==l},getAspectRatio=o=>{let r={},i=["desktop","mobile","tablet"];return i.forEach(t=>{let i=e(o,t)?.shapeValue;if(i)r={...r,[t]:i};else{let i=e(o,t)?.shape;switch(i){case"square":r={...r,[t]:"1/1"};break;case"vertical":r={...r,[t]:"3/4"};break;case"horizontal":r={...r,[t]:"4/3"};break;case"original":r={...r,[t]:""}}}}),t(r)},getStyleGridLayout=t=>{let o={"--gtc":"minmax(0, 12fr)","--gtc-tablet":"minmax(0, 12fr)","--gtc-mobile":"minmax(0, 12fr)"};if(!t.isHiddenGalleryImages){let r=!1;i.forEach(i=>{let l=e(t.position,i),a=e(t.ratioLayout,i),n=e(t.ratioLayoutRight,i),s="desktop"===i?"--gtc":`--gtc-${i}`,d="desktop"===i?"--gtr":`--gtr-${i}`,u="left"===l?a:n,c=["left","right"].includes(l||"");c&&u?(r=!0,Object.assign(o={...o,[s]:`minmax(0, ${u[0]}fr) minmax(0, ${u[1]}fr)`},{[d]:"fit-content(0)"})):r&&Object.assign(o,{[d]:"unset"})})}return o},getStyleGridOrderForFeature=t=>{let o={"--o":"0","--o-tablet":"0","--o-mobile":"0"},r=["desktop","mobile","tablet"];return r.forEach(r=>{let i=e(t.position,r),l="desktop"===r?"--o":`--o-${r}`;o={...o,[l]:"left"===i?"1":"0"}}),o},getStyleGridOrderForGallery=t=>{let o={"--o":"1","--o-tablet":"1","--o-mobile":"1"},r=["desktop","mobile","tablet"];return r.forEach(r=>{let i=e(t.position,r),l="desktop"===r?"--o":`--o-${r}`;o={...o,[l]:"left"===i?"0":"1"}}),o},getSrcImage=e=>`{{${e} | image_url: width: 480}} 480w, {{${e} | image_url: width: 768}} 768w, {{${e} | image_url: width: 1024}} 1024w, {{${e} | image_url: width: 1440}} 1440w`,convertSpacingForIndisdeLayout=e=>{let t=parseInt(e)?`${2*parseInt(e)}px`:`${e} * 2`;return t},getStyleInsideLayout=(t,i,l)=>{let a=["desktop","mobile","tablet"],n={},s={},d={},u={},c={},g={};return a.forEach(o=>{let r=e(t,o),a=e(i,o)?.width,m=e(l,o);if(n={...n,[o]:["inside-bottom","inside-left","inside-right"].includes(r)?"absolute":"static"},["inside-bottom"].includes(r)){let e=convertSpacingForIndisdeLayout(m);a=`calc(100% - ${e})`}["bottom-center","two-col","one-col"].includes(r)&&(a="100%"),d={...d,[o]:"inside-bottom"===r?`${m}`:"auto"},u={...u,[o]:["inside-left","inside-right"].includes(r)?`${m}`:"auto"},g={...g,[o]:["inside-bottom","inside-left"].includes(r)?`${m}`:"auto"},c={...c,[o]:"inside-right"===r?`${m}`:"auto"},s={...s,[o]:a}}),{...o("pos",n),...o("w",r(s)),...o("bottom",r(d)),...o("top",r(u)),...o("left",r(g)),...o("right",r(c))}},getConditionRenderGalleryImages=(t,o)=>{let r=["desktop","mobile","tablet"],i=!0,l=!1;return r.forEach(r=>{let a=e(t,r),n=e(o,r);a&&"only-feature"!==a&&(i=!1),(["two-col","one-col"].includes(a)||"images"===n)&&(l=!0)}),{isOnlyFeatureAllDevices:i,isRenderGalleryGrid:l}},setDefaultWhenUndefineSetting=e=>({...e,setting:{...e.setting}}),getValueFromValueContainUnit=e=>{let t=e.match(/\d+/g);return t?t[0]:e},getPaddingBottomByShapeSetting=t=>{let o=getAspectRatio(t),r={desktop:"auto",mobile:"auto",tablet:"auto"},i=["desktop","mobile","tablet"];return i.forEach(i=>{let l=e(t,i),a=l?.height,n=l?.width||"",s=getValueFromValueContainUnit(a||""),d=n.toString().match(/px/g)?getValueFromValueContainUnit(n):n;if(a&&n&&!isNaN(Number(s))&&!isNaN(Number(d))){r={...r,[i]:`${Number(s)/Number(d)*100}%`};return}if(a&&!isNaN(Number(s))){r={...r,[i]:a};return}let u=o?.[i]!=="auto"&&o?.[i]?o?.[i]?.split("/").reverse().join("/"):"{%if largestRatio == 0%} 100 / 100 {%else%} {{largestRatio}} {%endif%}";r={...r,[i]:`calc((${u})*100%)`}}),r},getGalleryCarouselRenderByLayout=t=>{let o=["desktop","mobile","tablet"],r={};return o.forEach(o=>{let i=e(t,o);r={...r,[o]:"only-feature"!==i}}),r};export{checkAddOverFlowClass,convertSpacing,convertSpacingForIndisdeLayout,convertUnitToNumber,getAspectRatio,getConditionRenderGalleryImages,getDisplayStyle,getGalleryCarouselRenderByLayout,getPaddingBottomByShapeSetting,getSrcImage,getStyleGridLayout,getStyleGridOrderForFeature,getStyleGridOrderForGallery,getStyleInsideLayout,getTypeWidthDevice,setDefaultWhenUndefineSetting};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import{template as e,getResponsiveValueByScreen as t}from"@gem-sdk/core";import i from"../../../../../image/components/NextImage.liquid.js";import{
|
|
2
|
-
${
|
|
3
|
-
${
|
|
4
|
-
${
|
|
5
|
-
${
|
|
1
|
+
import{template as e,getResponsiveValueByScreen as t}from"@gem-sdk/core";import i from"../../../../../image/components/NextImage.liquid.js";import{getGalleryCarouselRenderByLayout as o,getDisplayStyle as r,getAspectRatio as s,getSrcImage as a}from"../../common/common.js";import{getShapeByLayout as p,getMinHeightByPosition as l,checkDisplayGalleryByWidth as d,getZoomDisplay as m,getCarouselVerticalConfigByPosition as g}from"../../common/productGallery.js";import{getStyleOfObject as n}from"../../../../helpers/function.js";import{getProductImagesStyles as c}from"../../composables/getProductImagesStyles.js";import{getProductImagesClassName as u}from"../../composables/getProductImagesClassName.js";import{getProductImagesAttr as C}from"../../composables/getProductImagesAttr.js";import{LiquidIf as h,LiquidFor as y}from"@gem-sdk/system";import v from"../../../../../carousel-v3/components/root/Carousel.liquid.js";import b from"../../../../../carousel-v3/components/item/CarouselItem.liquid.js";let ProductGalleryCarousel=({builderPropUID:f,children:w,enableLazyLoadImage:L,...F})=>{let{featuredImageGalleryClasses:x,galleryItemClasses:$}=u(F),{galleryCarouselSettingAttrs:I}=C(F),{galleryCarouselStyle:_,galleryCarouselItemStyle:k}=c(F),j=()=>{let e=(e,i,o)=>{let r=t(i,o),s=t(e,o),a="slider"===s&&("bottom-center"===r||"inside-bottom"===r),p=["left","right","inside-left","inside-right"].includes(r??"");return p||a},i=d({shapeByLayout:V}),o={desktop:i.desktop&&e(F.type,F.position,"desktop"),tablet:i.tablet&&e(F.type,F.position,"tablet"),mobile:i.mobile&&e(F.type,F.position,"mobile")};return r(e=>!o[e],"flex")},V=p({shape:F.shape,shapeForBottom:F.shapeForBottom,shapeFor1Col:F.shapeFor1Col,shapeFor2Col:F.shapeFor2Col,shapeForFtOnly:F.shapeForFtOnly,shapeForInsideBottom:F.shapeForInsideBottom,shapeForInside:F.shapeForInside},F.position),M=(t,o)=>e`${i({srcIsLiquidCode:!0,src:`${a("media.preview_image")}`,width:"{{media.width}}",height:"{{media.height}}",alt:"{{media.alt | escape}}",setting:t,baseSrc:"{{media.preview_image | image_url}}",style:o,className:"!gp-rounded-none gp-w-full gp-h-full gp-top-0 gp-left-0 gp-cursor-pointer",enableLazyLoadImage:L})}`,B=e=>`
|
|
2
|
+
${h("media.media_type == 'video'","{% assign mediaSourceUrl = media.sources.last.url %}")}
|
|
3
|
+
${h("media.media_type == 'external_video'","{% assign mediaSourceUrl = media | external_video_url %}")}
|
|
4
|
+
${h("media.media_type == 'image'","{% assign mediaSourceUrl = media.src %}")}
|
|
5
|
+
${b({id:"{{imageID}}",contentType:"productImage",className:`${$(`gp-gallery-image-item ${e??""}`)}`,parentId:`${f}-{{product.id}}`,builderAttrs:{"data-outline":e?"active":"deactive"},style:k,children:`
|
|
6
6
|
<div class="gp-w-full gp-relative gp-h-full"
|
|
7
7
|
|
|
8
8
|
>
|
|
9
|
-
${
|
|
9
|
+
${M({aspectRatio:s(V),layout:F?.layout,qualityPercent:F?.qualityPercent,qualityType:F?.qualityType},{width:"100%",height:"100%",cursor:"pointer"})}
|
|
10
10
|
|
|
11
|
-
${
|
|
11
|
+
${h("media.media_type == 'video' or media.media_type == 'external_video'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0" >
|
|
12
12
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
13
13
|
<rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
|
|
14
14
|
<path d="M17.6869 12.2646L17.6868 12.2646L6.78379 18.4464C6.78378 18.4464 6.78376 18.4464 6.78374 18.4464C6.52931 18.5903 6.1665 18.4179 6.1665 18.0416V5.95844C6.1665 5.58218 6.52917 5.40981 6.7836 5.55354C6.78366 5.55357 6.78373 5.55361 6.78379 5.55365L17.6868 11.7354L17.6869 11.7354C17.8819 11.846 17.8819 12.154 17.6869 12.2646Z" stroke="#F9F9F9" stroke-miterlimit="10"/>
|
|
15
15
|
</svg>
|
|
16
16
|
</div>`)}
|
|
17
|
-
${
|
|
17
|
+
${h("media.media_type == 'model'",`<div class="gp-absolute gp-pb-1 gp-pr-1 gp-right-0 gp-bottom-0">
|
|
18
18
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
19
19
|
<rect opacity="0.9" width="24" height="24" rx="3" fill="#212121"/>
|
|
20
20
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7441 4.57034C11.9017 4.47655 12.098 4.47655 12.2555 4.57034L18.5889 8.33957C18.7404 8.42971 18.8332 8.59296 18.8332 8.76923V15.2308C18.8332 15.407 18.7404 15.5703 18.5889 15.6604L12.2555 19.4297C12.098 19.5234 11.9017 19.5234 11.7441 19.4297L5.41079 15.6604C5.25932 15.5703 5.1665 15.407 5.1665 15.2308V8.76923C5.1665 8.59296 5.25932 8.42971 5.41079 8.33957L11.7441 4.57034ZM6.1665 9.64865V14.9465L11.4998 18.1206V12.8227L6.1665 9.64865ZM12.4998 12.8227V18.1206L17.8332 14.9465V9.64865L12.4998 12.8227ZM17.3555 8.76923L11.9998 11.9566L6.64417 8.76923L11.9998 5.58185L17.3555 8.76923Z" fill="#F9F9F9"/>
|
|
@@ -22,7 +22,7 @@ import{template as e,getResponsiveValueByScreen as t}from"@gem-sdk/core";import
|
|
|
22
22
|
</div>`)}
|
|
23
23
|
|
|
24
24
|
<div class="gp-absolute gp-inset-0 gp-flex gp-cursor-pointer gp-items-center gp-justify-center gp-bg-black/50 gp-opacity-0 gp-transition-opacity gp-duration-100 group-hover:gp-opacity-100"
|
|
25
|
-
style="${
|
|
25
|
+
style="${n(m(F?.clickOpenLightBox))}"
|
|
26
26
|
>
|
|
27
27
|
<svg
|
|
28
28
|
height="100%"
|
|
@@ -40,7 +40,7 @@ import{template as e,getResponsiveValueByScreen as t}from"@gem-sdk/core";import
|
|
|
40
40
|
</svg>
|
|
41
41
|
</div>
|
|
42
42
|
</div>
|
|
43
|
-
`})}`,P=()=>{let e=
|
|
44
|
-
${
|
|
45
|
-
${
|
|
43
|
+
`})}`,P=()=>{let e=g(F.position),t=[e.desktop?"gp-px-0":"gp-py-0",e.tablet?"tablet:gp-px-0":"tablet:gp-py-0",e.mobile?"mobile:gp-px-0":"mobile:gp-py-0"];return` ${t.join(" ")}`},Z=h("product.media.size > 1",y("media in product.media",`${h("media.media_type == 'image'",y("image in product.images",h("image.src == media.src","{% assign imageID = image.id %}{% break %}")),"{% assign imageID = '' %}")}
|
|
44
|
+
${h("media.id == product.featured_media.id ",B(F?.borderActive?.border!=="none"?"active":""),B())}`));return e`
|
|
45
|
+
${v({builderProps:{uid:f},rootId:`${f}-{{product.id}}`,rootClass:`${x}`,rootAttrs:{type:"grid-carousel","product-media":"{{product.media.size}}"},wrapperClass:P(),slidesClass:l(F.position,F.navigationPosition),isHiddenArrowWhenDisabled:!0,setting:I,rootStyles:{...j()},styles:_,disableMarginAuto:!0,children:Z,renderByLayout:o(F.position)})}
|
|
46
46
|
`};export{ProductGalleryCarousel as default};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -875,6 +875,7 @@ type CarouselProps$1 = BasePropsWrap<CarouselSettingProps$1, CarouselStyleProps$
|
|
|
875
875
|
isProductList?: boolean;
|
|
876
876
|
thumbsSwiper?: string;
|
|
877
877
|
productBadgeLiquid?: string;
|
|
878
|
+
renderByLayout?: ObjectDevices<boolean>;
|
|
878
879
|
} & {
|
|
879
880
|
rootId?: string;
|
|
880
881
|
rootClass?: string;
|
|
@@ -927,6 +928,7 @@ declare const Carousel$3: React.ForwardRefExoticComponent<_gem_sdk_core.BaseProp
|
|
|
927
928
|
isProductList?: boolean | undefined;
|
|
928
929
|
thumbsSwiper?: string | undefined;
|
|
929
930
|
productBadgeLiquid?: string | undefined;
|
|
931
|
+
renderByLayout?: Partial<Record<_gem_sdk_core.NameDevices, boolean>> | undefined;
|
|
930
932
|
} & {
|
|
931
933
|
rootId?: string | undefined;
|
|
932
934
|
rootClass?: string | undefined;
|
|
@@ -6395,6 +6397,7 @@ declare const _default$3: {
|
|
|
6395
6397
|
isProductList?: boolean | undefined;
|
|
6396
6398
|
thumbsSwiper?: string | undefined;
|
|
6397
6399
|
productBadgeLiquid?: string | undefined;
|
|
6400
|
+
renderByLayout?: Partial<Record<_gem_sdk_core.NameDevices, boolean>> | undefined;
|
|
6398
6401
|
} & {
|
|
6399
6402
|
rootId?: string | undefined;
|
|
6400
6403
|
rootClass?: string | undefined;
|
|
@@ -7359,6 +7362,7 @@ declare const _default$2: {
|
|
|
7359
7362
|
isProductList?: boolean | undefined;
|
|
7360
7363
|
thumbsSwiper?: string | undefined;
|
|
7361
7364
|
productBadgeLiquid?: string | undefined;
|
|
7365
|
+
renderByLayout?: Partial<Record<_gem_sdk_core.NameDevices, boolean>> | undefined;
|
|
7362
7366
|
} & {
|
|
7363
7367
|
rootId?: string | undefined;
|
|
7364
7368
|
rootClass?: string | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/components",
|
|
3
|
-
"version": "12.0.0-dev.
|
|
3
|
+
"version": "12.0.0-dev.125",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"i18n:extract": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/translate/extract-texts-to-locales.js && node ./scripts/translate/en-keys-usage.js"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@gem-sdk/core": "12.0.0-dev.
|
|
30
|
-
"@gem-sdk/styles": "12.0.0-dev.
|
|
31
|
-
"@gem-sdk/system": "12.0.0-dev.
|
|
29
|
+
"@gem-sdk/core": "12.0.0-dev.124",
|
|
30
|
+
"@gem-sdk/styles": "12.0.0-dev.124",
|
|
31
|
+
"@gem-sdk/system": "12.0.0-dev.124",
|
|
32
32
|
"@types/react-transition-group": "^4.4.12",
|
|
33
33
|
"tsup": "8.5.1",
|
|
34
34
|
"postcss-import": "16.1.1",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"@gem-sdk/keen-slider": "^6.8.8",
|
|
44
|
-
"@gem-sdk/swiper": "0.0.12",
|
|
44
|
+
"@gem-sdk/swiper": "0.0.12-dev.2",
|
|
45
45
|
"node-html-parser": "^6.1.13",
|
|
46
46
|
"react-transition-group": "^4.4.5",
|
|
47
47
|
"react-youtube": "10.1.0"
|