@gem-sdk/components 3.0.25 → 3.0.27

package/dist/cjs/accordion/common/helpers.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core");const MINIMUM_CHILD=1,BODY_CHILD_INDEX=0,getDataState=(t,e)=>{let{setting:r={},styles:o={},builderProps:a}=t,{activeKey:i,iconSvg:n,expandItem:l,iconPosition:s,iconCollapseSize:g,iconGlobalSize:c,iconExpand:S,iconCollapse:p,layoutHeader:d,expandedMode:m,configIconSize:u}=r,{bgColor:I,color:D,headerBorder:L,width:v,fullWidth:C,textColor:y,itemHeaderSpacing:M,contentSizePadding:_,iconColor:x,headerContentPadding:N,widthHeightSize:P}=o,b="multiple"===m,h=t=>t?t.toString().toLowerCase().split(",").map(t=>parseInt(t.trim())-1).map(t=>t.toString()):[],q=l?h(i):[],H=b?[...q]:q,U=()=>({iconSvg:n,isIconPlus:"plus"===n,activeKey:i,expanded:b,expandItem:l,iconPosition:s,iconGlobalSize:c,iconCollapse:p,iconExpand:S,iconCollapseSize:g,layoutHeader:d,expandedMode:m,configIconSize:u,parentUid:a?.uid,childListNumber:l?i?.toString().toLowerCase()==="all"?e?.map((t,e)=>e.toString()):H:[],chidlrenUid:e?.map(t=>t.uid)}),k=()=>({bgColor:I,color:D,headerBorder:L,fullWidth:C,width:v,itemHeaderSpacing:M,textColor:y,iconColor:x,contentSizePadding:_,headerContentPadding:N,widthHeightSize:P});return{uidState:a?.uid,settingState:U(),stylesState:k(),accordions:H}},getParentSettings=(t={})=>{let{iconSvg:e,titleTypo:r,layoutHeader:o,iconGlobalSize:a,iconCollapseSize:i,iconCollapse:n,iconExpand:l,alignment:s,configIconSize:g,iconPosition:c}=t,S=r?{...r,attrs:{...r.attrs}}:void 0;return S?.attrs?.color&&delete S.attrs.color,{iconSvg:e,titleTypo:S,layoutHeader:o,iconGlobalSize:a,iconCollapseSize:i,iconCollapse:n,iconExpand:l,alignment:s,configIconSize:g,iconPosition:c}},getSettingItemLiquid=t=>{let{index:e,accordions:r,parentSetting:o,parentStyle:a}=t,{titleTypo:i,iconCollapse:n,iconExpand:l,activeKey:s,expandItem:g}=o??{};delete i?.attrs?.color;let{itemContentSpacing:c,iconColor:S,contentSizePadding:p}=a??{},d=!!g&&(s?.toString()?.toLowerCase()==="all"||r?.includes(e?.toString()??"")),m=core.makeGlobalSize(p),u=()=>{let t={...p&&m.padding,...c?.type||p?{}:core.composeSize(c?.custom)};return d?t:core.removePaddingYInStyle(t)},I=()=>l&&d?l:n&&!d?n:void 0,D=I(),L=()=>{let t={normal:S?.normal??"transparent",hover:S?.hover??S?.active??S?.normal??"transparent",active:S?.active??"transparent"};return d?core.makeStyle({c:core.getSingleColorVariable(t?.active)}):core.getGlobalColorStateStyle("c",t)};return{isShow:d,composeContentSizeStyle:u,collapsibleIcon:D,composeIconColor:L(),makeIcon:I}};exports.BODY_CHILD_INDEX=0,exports.MINIMUM_CHILD=1,exports.getDataState=getDataState,exports.getParentSettings=getParentSettings,exports.getSettingItemLiquid=getSettingItemLiquid;
+"use strict";var core=require("@gem-sdk/core");const MINIMUM_CHILD=1,BODY_CHILD_INDEX=0,ICON_MINUS="<svg width='16' height='16' fill='currentColor' viewBox=\"0 0 448 512\"><path fill='currentColor' d=\"M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z\"/></svg>",ICON_PLUS="<svg fill='currentColor' width='16' height='16' xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path fill='currentColor' d=\"M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z\"/></svg>",getDataState=(t,e)=>{let{setting:r={},styles:o={},builderProps:a}=t,{activeKey:i,iconSvg:l,expandItem:s,iconPosition:n,iconCollapseSize:c,iconGlobalSize:g,iconExpand:S,iconCollapse:I,layoutHeader:p,expandedMode:m,configIconSize:u}=r,{bgColor:d,color:v,headerBorder:C,width:N,fullWidth:h,textColor:L,itemHeaderSpacing:_,contentSizePadding:M,iconColor:U,headerContentPadding:w,widthHeightSize:x}=o,D="multiple"===m,O=t=>t?t.toString().toLowerCase().split(",").map(t=>parseInt(t.trim())-1).map(t=>t.toString()):[],P=s?O(i):[],H=D?[...P]:P,y=()=>({iconSvg:l,isIconPlus:"plus"===l,activeKey:i,expanded:D,expandItem:s,iconPosition:n,iconGlobalSize:g,iconCollapse:I,iconExpand:S,iconCollapseSize:c,layoutHeader:p,expandedMode:m,configIconSize:u,parentUid:a?.uid,childListNumber:s?i?.toString().toLowerCase()==="all"?e?.map((t,e)=>e.toString()):H:[],chidlrenUid:e?.map(t=>t.uid)}),b=()=>({bgColor:d,color:v,headerBorder:C,fullWidth:h,width:N,itemHeaderSpacing:_,textColor:L,iconColor:U,contentSizePadding:M,headerContentPadding:w,widthHeightSize:x});return{uidState:a?.uid,settingState:y(),stylesState:b(),accordions:H}},getParentSettings=(t={})=>{let{iconSvg:e,titleTypo:r,layoutHeader:o,iconGlobalSize:a,iconCollapseSize:i,iconCollapse:l,iconExpand:s,alignment:n,configIconSize:c,iconPosition:g}=t,S=r?{...r,attrs:{...r.attrs}}:void 0;return S?.attrs?.color&&delete S.attrs.color,{iconSvg:e,titleTypo:S,layoutHeader:o,iconGlobalSize:a,iconCollapseSize:i,iconCollapse:l,iconExpand:s,alignment:n,configIconSize:c,iconPosition:g}},composeIconSvg=({isShow:t,iconExpand:e,iconCollapse:r,iconSvg:o})=>e&&t?e:r&&!t?r:"plus"===o?t?ICON_MINUS:ICON_PLUS:o,getSettingItemLiquid=t=>{let{index:e,accordions:r,parentSetting:o,parentStyle:a}=t,{titleTypo:i,iconCollapse:l,iconExpand:s,activeKey:n,expandItem:c,iconSvg:g}=o??{};delete i?.attrs?.color;let{itemContentSpacing:S,iconColor:I,contentSizePadding:p}=a??{},m=!!c&&(n?.toString()?.toLowerCase()==="all"||r?.includes(e?.toString()??"")),u=core.makeGlobalSize(p),d=()=>{let t={...p&&u.padding,...S?.type||p?{}:core.composeSize(S?.custom)};return m?t:core.removePaddingYInStyle(t)},v=composeIconSvg({isShow:m,iconExpand:s,iconCollapse:l,iconSvg:g}),C=()=>{let t={normal:I?.normal??"transparent",hover:I?.hover??I?.active??I?.normal??"transparent",active:I?.active??"transparent"};return m?core.makeStyle({c:core.getSingleColorVariable(t?.active)}):core.getGlobalColorStateStyle("c",t)};return{isShow:m,composeContentSizeStyle:d,collapsibleIcon:v,composeIconColor:C(),makeIcon:v}};exports.BODY_CHILD_INDEX=0,exports.ICON_MINUS=ICON_MINUS,exports.ICON_PLUS=ICON_PLUS,exports.MINIMUM_CHILD=1,exports.composeIconSvg=composeIconSvg,exports.getDataState=getDataState,exports.getParentSettings=getParentSettings,exports.getSettingItemLiquid=getSettingItemLiquid;

package/dist/cjs/accordion/components/AccordionItem.liquid.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../text/components/Text.liquid.js"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js");const AccordionItem=e=>{let{parentUid:s,childrenIcon:t,rawChildren:l,index:a,builderProps:r,title:o}=e,{iconSvg:c,titleTypo:n,layoutHeader:i,iconGlobalSize:y,iconCollapseSize:d,iconCollapse:m,iconExpand:p,alignment:g,configIconSize:$,iconPosition:C}=helpers.getParentSettings(e.parentSetting)??{},{isShow:u,composeContentSizeStyle:S,collapsibleIcon:v,composeIconColor:I,makeIcon:x}=helpers.getSettingItemLiquid(e),h=system.createClass(classes.getItemContainerClasses),q=system.createClass(classes.getDropdownClasses(e.parentStyle,{isShow:u,uniqueId:s,makeIcon:x(),index:a})),f=system.createStyle(styles.getIconGlobalSize(y)),_=system.createClass(classes.getIconClasses),D=system.createClass(classes.getIconRotateClasses(e.parentStyle,{isShow:u,iconExpand:p,iconSvg:c,iconCollapse:m})),T=system.createClass(classes.getContentClasses(s)),w=system.createClass(classes.getGapClasses),R=system.createStyle(styles.getItemContainerStyles(e.parentStyle,!1)),j=system.createStyle(styles.getDropdownStyles(e.parentStyle,{isShow:u,iconPosition:C})),L=system.createStyle(styles.getDropdownTextStyles(e.parentStyle?.textColor,u)),M=system.createStyle(styles.getIconRotateStyles(e.parentStyle,u,d)),b=system.createStyle(styles.getGapStyles(y,g)),k=system.createClass(core.composeClasses("gp-inline-flex")),G=system.createClass(u?{...core.composeClasses("!gp-text-[var(--icon-active-color)]"),...classes.getLayoutIconClasses}:classes.getLayoutIconClasses),N=system.createStyle(styles.getIconStyles(I,$)),A=system.createClass(classes.getRenderChildrenClasses(e.parentStyle,{isShow:u,hasTransitionedIn:!1,isMounted:!1})),F=system.createStyle({...styles.getTemplateRow(u),...styles.getRenderChildrenStyles()}),H=system.createClass(core.composeClasses("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),O=()=>l&&l.length>=helpers.MINIMUM_CHILD?core.RenderChildren({...l[helpers.BODY_CHILD_INDEX]}):"";return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),Text_liquid=require("../../text/components/Text.liquid.js"),helpers=require("../common/helpers.js"),system=require("@gem-sdk/system"),classes=require("../common/classes.js"),styles=require("../common/styles.js");const AccordionItem=e=>{let{parentUid:s,childrenIcon:t,rawChildren:l,index:a,builderProps:r,title:o}=e,{iconSvg:c,titleTypo:n,layoutHeader:i,iconGlobalSize:y,iconCollapseSize:d,iconCollapse:m,iconExpand:p,alignment:g,configIconSize:$,iconPosition:C}=helpers.getParentSettings(e.parentSetting)??{},{isShow:u,composeContentSizeStyle:S,collapsibleIcon:v,composeIconColor:x,makeIcon:I}=helpers.getSettingItemLiquid(e),h=system.createClass(classes.getItemContainerClasses),q=system.createClass(classes.getDropdownClasses(e.parentStyle,{isShow:u,uniqueId:s,makeIcon:I,index:a})),f=system.createStyle(styles.getIconGlobalSize(y)),_=system.createClass(classes.getIconClasses),D=system.createClass(classes.getIconRotateClasses(e.parentStyle,{isShow:u,iconExpand:p,iconSvg:c,iconCollapse:m})),T=system.createClass(classes.getContentClasses(s)),w=system.createClass(classes.getGapClasses),R=system.createStyle(styles.getItemContainerStyles(e.parentStyle,!1)),j=system.createStyle(styles.getDropdownStyles(e.parentStyle,{isShow:u,iconPosition:C})),L=system.createStyle(styles.getDropdownTextStyles(e.parentStyle?.textColor,u)),M=system.createStyle(styles.getIconRotateStyles(e.parentStyle,u,d)),b=system.createStyle(styles.getGapStyles(y,g)),G=system.createClass(core.composeClasses("gp-inline-flex")),N=system.createClass(u?{...core.composeClasses("!gp-text-[var(--icon-active-color)]"),...classes.getLayoutIconClasses}:classes.getLayoutIconClasses),k=system.createStyle(styles.getIconStyles(x,$)),A=system.createClass(classes.getRenderChildrenClasses(e.parentStyle,{isShow:u,hasTransitionedIn:!1,isMounted:!1})),F=system.createStyle({...styles.getTemplateRow(u),...styles.getRenderChildrenStyles()}),H=system.createClass(core.composeClasses("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),O=()=>l&&l.length>=helpers.MINIMUM_CHILD?core.RenderChildren({...l[helpers.BODY_CHILD_INDEX]}):"";return core.template`
   <div class="${h}" style="${R}">
     <div data-index="${a?.toString()}" class="${T}">
       <div aria-hidden uid="${r?.uid}" id="${r?.uid}" data-index="${a?.toString()}"
@@ -14,19 +14,19 @@
           `)}
         <div class="${w}" style="${b}">
           ${system.If("before-text"===i,core.template`
-          <div class="${k}" style="${{...f}}">
+          <div class="${G}" style="${{...f}}">
             <span
-              class="${G}"
-              style="${N}">
+              class="${N}"
+              style="${k}">
               ${t??""}</span>
           </div>
           `)}
           ${Text_liquid.default({style:{...L},styles:{typo:n},setting:{htmlTag:"div",text:o,excludeFlex:!0,isForceValue:!0},className:"gp-overflow-hidden gp-accordion-text-content group-hover:[color:var(--text-hover-color)!important]"})}
           ${system.If("after-text"===i,core.template`
-          <div class="${k}" style="${{...f}}">
+          <div class="${G}" style="${{...f}}">
             <span
-              class="${G}"
-              style="${N}">
+              class="${N}"
+              style="${k}">
               ${t??""}</span>
           </div>
           `)}

package/dist/cjs/accordion/hooks/useAccordionItem.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),React=require("react"),useMountTransition=require("./useMountTransition.js"),useGetProductId=require("../../hooks/useGetProductId.js");const useAccordionItem=e=>{let{accordions:t,index:r,builderProps:o,parentSetting:c={},parentStyle:a={},handleDropDown:s}=e,{iconPosition:u,titleTypo:n,iconCollapse:i,iconExpand:l}=c;delete n?.attrs?.color;let{itemContentSpacing:d,iconColor:m,contentSizePadding:p}=a,g=t?.includes(r?.toString()??""),v=core.makeGlobalSize(p),M=core.useEditorMode(),[S,R]=React.useState(g),f=useMountTransition.default(S||!1,500);React.useEffect(()=>{R(g)},[g]);let I=React.useMemo(()=>l&&g?l:i&&!g?i:void 0,[g,i,l]),y=React.useMemo(()=>core.makeStyle({fd:"left"===u?"row":"row-reverse",jc:"right"===u?"space-between":""}),[u]),G=(e,t)=>{!e.target.closest(".gp-text")&&s&&t&&(R(!S),s(t))},P=React.useMemo(()=>{let e={normal:m?.normal??"transparent",hover:m?.hover??m?.active??m?.normal??"transparent",active:m?.active??m?.normal??"transparent"};return g?core.makeStyle({c:core.getSingleColorVariable(e?.active)}):core.getGlobalColorStateStyle("c",e)},[m,g]),{refContainer:b,productID:k}=useGetProductId.useGetProductId(),h=React.useMemo(()=>{let e=`gp-accordion-item-${o?.uid}-${r}`;return k?`${e}-${k}`:e},[o?.uid,r,k]),j=React.useMemo(()=>{let e={...p&&v.padding,...d?.type||p?{}:core.composeSize(d?.custom)};return g?e:core.removePaddingYInStyle(e)},[p,d,g,v]),q=React.useMemo(()=>f||S||"edit"!==M,[f,S,M]);return{productID:k,isShow:g,getIdDropdownItem:G,makeIcon:I,refContainer:b,uniqueId:h,isRenderChildren:q,composePosition:y,composeIconColor:P,composeContentSizeStyle:j,hasTransitionedIn:f,isMounted:S}};exports.default=useAccordionItem;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),React=require("react"),useMountTransition=require("./useMountTransition.js"),useGetProductId=require("../../hooks/useGetProductId.js"),helpers=require("../common/helpers.js");const useAccordionItem=e=>{let{accordions:t,index:r,builderProps:o,parentSetting:c={},parentStyle:s={},handleDropDown:a}=e,{iconPosition:u,titleTypo:n,iconCollapse:i,iconExpand:l,iconSvg:d}=c;delete n?.attrs?.color;let{itemContentSpacing:m,iconColor:p,contentSizePadding:g}=s,v=t?.includes(r?.toString()??""),M=core.makeGlobalSize(g),S=core.useEditorMode(),[R,I]=React.useState(v),f=useMountTransition.default(R||!1,500);React.useEffect(()=>{I(v)},[v]);let h=React.useMemo(()=>helpers.composeIconSvg({isShow:v,iconExpand:l,iconCollapse:i,iconSvg:d}),[v,l,i,d]),y=React.useMemo(()=>core.makeStyle({fd:"left"===u?"row":"row-reverse",jc:"right"===u?"space-between":""}),[u]),G=(e,t)=>{!e.target.closest(".gp-text")&&a&&t&&(I(!R),a(t))},P=React.useMemo(()=>{let e={normal:p?.normal??"transparent",hover:p?.hover??p?.active??p?.normal??"transparent",active:p?.active??p?.normal??"transparent"};return v?core.makeStyle({c:core.getSingleColorVariable(e?.active)}):core.getGlobalColorStateStyle("c",e)},[p,v]),{refContainer:b,productID:j}=useGetProductId.useGetProductId(),k=React.useMemo(()=>{let e=`gp-accordion-item-${o?.uid}-${r}`;return j?`${e}-${j}`:e},[o?.uid,r,j]),q=React.useMemo(()=>{let e={...g&&M.padding,...m?.type||g?{}:core.composeSize(m?.custom)};return v?e:core.removePaddingYInStyle(e)},[g,m,v,M]),$=React.useMemo(()=>f||R||"edit"!==S,[f,R,S]);return{productID:j,isShow:v,getIdDropdownItem:G,makeIcon:h,refContainer:b,uniqueId:k,isRenderChildren:$,composePosition:y,composeIconColor:P,composeContentSizeStyle:q,hasTransitionedIn:f,isMounted:R}};exports.default=useAccordionItem;

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

@@ -1,4 +1,4 @@
-"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"),helpers$1=require("../common/helpers.js");const LiteYouTubeEmbed=e=>{let{style:s,iframeClass:t,wrapperClass:a,title:l,poster:r}=e,i=`gp-video-${e.uid}`,{posterUrl:c,iframeSrc:o}=helpers$1.getYoutubeParams(e),u=r?.preload,m=system.createStateOrContext({lazy:e.lazy,style:s,title:l,iframeSrc:o}),d=!e.lazy,p=system.createClass({...classes.getButtonYoutubeClasses(d)}),y=system.createClass({...classes.getImageYoutubeClasses()}),g=system.createClass({...classes.getArticleYoutubeClasses(u||!1,a)}),b=system.createClass({...classes.getIframeYoutubeClasses(t)}),n=system.createStyle({...styles.getIframeYoutubeStyle(s)}),f=system.createStyle({...styles.getArticleYoutubeStyle(s,c)}),$=()=>core.template`
+"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"),helpers$1=require("../common/helpers.js");const LiteYouTubeEmbed=e=>{let{style:s,iframeClass:t,wrapperClass:a,title:l,poster:r}=e,i=`gp-video-${e.uid}`,{posterUrl:o,iframeSrc:c}=helpers$1.getYoutubeParams(e),u=r?.preload,d=system.createStateOrContext({lazy:e.lazy,style:s,title:l,iframeSrc:c}),m=!e.lazy,p=system.createClass({...classes.getButtonYoutubeClasses(m)}),y=system.createClass({...classes.getImageYoutubeClasses()}),g=system.createClass({...classes.getArticleYoutubeClasses(u||!1,a)}),b=system.createClass({...classes.getIframeYoutubeClasses(t)}),n=system.createStyle({...styles.getIframeYoutubeStyle(s)}),f=system.createStyle({...styles.getArticleYoutubeStyle(s,o)}),$=()=>core.template`
     <iframe
       id="player-wrapper-${e.uid}"
       class="${b}"
@@ -7,17 +7,17 @@
       frameborder="0"
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen
-      src="${o}"
+      src="${c}"
     ></iframe>
   `;return core.template`
-    <gp-lite-youtube-embed gp-data='${JSON.stringify(m)}'>
+    <gp-lite-youtube-embed gp-data='${JSON.stringify(d)}'>
       <article
         aria-hidden
         class="${g}"
         data-title="${l}"
         style="${f}"
       >
-        ${NextImage_liquid.default({id:i,src:c,alt:r?.altText,title:r?.imageTitle,priority:r?.preload,enableLazyLoadImage:!0,className:y,isDisableAspectStyle:!0})}
+        ${NextImage_liquid.default({id:i,src:o,alt:r?.altText,title:r?.imageTitle,priority:r?.preload,enableLazyLoadImage:!0,className:y,isDisableAspectStyle:!0,isNotLazyload:r?.preload})}
         <button type="button" aria-label="Play" class="${p}">
           <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
             <path
@@ -27,7 +27,7 @@
             <path d="M 45,24 27,14 27,34" fill="#fff"></path>
           </svg>
         </button>
-        ${system.If(d,$())}
+        ${system.If(m,$())}
       </article>
     </gp-lite-youtube-embed>
     ${core.RenderIf(core.isLocalEnv,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${helpers.getSettingPreloadData('class="gps-link" delay',"src")}="${core.baseAssetURL}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}

package/dist/esm/accordion/common/helpers.js

@@ -1 +1 @@
-import{makeGlobalSize as t,composeSize as e,removePaddingYInStyle as r,makeStyle as a,getSingleColorVariable as i,getGlobalColorStateStyle as o}from"@gem-sdk/core";let MINIMUM_CHILD=1,BODY_CHILD_INDEX=0,getDataState=(t,e)=>{let{setting:r={},styles:a={},builderProps:i}=t,{activeKey:o,iconSvg:n,expandItem:l,iconPosition:s,iconCollapseSize:g,iconGlobalSize:d,iconExpand:p,iconCollapse:c,layoutHeader:m,expandedMode:u,configIconSize:I}=r,{bgColor:S,color:D,headerBorder:L,width:v,fullWidth:C,textColor:M,itemHeaderSpacing:_,contentSizePadding:N,iconColor:h,headerContentPadding:H,widthHeightSize:U}=a,w="multiple"===u,y=t=>t?t.toString().toLowerCase().split(",").map(t=>parseInt(t.trim())-1).map(t=>t.toString()):[],P=l?y(o):[],q=w?[...P]:P,B=()=>({iconSvg:n,isIconPlus:"plus"===n,activeKey:o,expanded:w,expandItem:l,iconPosition:s,iconGlobalSize:d,iconCollapse:c,iconExpand:p,iconCollapseSize:g,layoutHeader:m,expandedMode:u,configIconSize:I,parentUid:i?.uid,childListNumber:l?o?.toString().toLowerCase()==="all"?e?.map((t,e)=>e.toString()):q:[],chidlrenUid:e?.map(t=>t.uid)}),E=()=>({bgColor:S,color:D,headerBorder:L,fullWidth:C,width:v,itemHeaderSpacing:_,textColor:M,iconColor:h,contentSizePadding:N,headerContentPadding:H,widthHeightSize:U});return{uidState:i?.uid,settingState:B(),stylesState:E(),accordions:q}},getParentSettings=(t={})=>{let{iconSvg:e,titleTypo:r,layoutHeader:a,iconGlobalSize:i,iconCollapseSize:o,iconCollapse:n,iconExpand:l,alignment:s,configIconSize:g,iconPosition:d}=t,p=r?{...r,attrs:{...r.attrs}}:void 0;return p?.attrs?.color&&delete p.attrs.color,{iconSvg:e,titleTypo:p,layoutHeader:a,iconGlobalSize:i,iconCollapseSize:o,iconCollapse:n,iconExpand:l,alignment:s,configIconSize:g,iconPosition:d}},getSettingItemLiquid=n=>{let{index:l,accordions:s,parentSetting:g,parentStyle:d}=n,{titleTypo:p,iconCollapse:c,iconExpand:m,activeKey:u,expandItem:I}=g??{};delete p?.attrs?.color;let{itemContentSpacing:S,iconColor:D,contentSizePadding:L}=d??{},v=!!I&&(u?.toString()?.toLowerCase()==="all"||s?.includes(l?.toString()??"")),C=t(L),M=()=>{let t={...L&&C.padding,...S?.type||L?{}:e(S?.custom)};return v?t:r(t)},_=()=>m&&v?m:c&&!v?c:void 0,N=_(),h=()=>{let t={normal:D?.normal??"transparent",hover:D?.hover??D?.active??D?.normal??"transparent",active:D?.active??"transparent"};return v?a({c:i(t?.active)}):o("c",t)};return{isShow:v,composeContentSizeStyle:M,collapsibleIcon:N,composeIconColor:h(),makeIcon:_}};export{BODY_CHILD_INDEX,MINIMUM_CHILD,getDataState,getParentSettings,getSettingItemLiquid};
+import{makeGlobalSize as t,composeSize as e,removePaddingYInStyle as r,makeStyle as o,getSingleColorVariable as i,getGlobalColorStateStyle as a}from"@gem-sdk/core";let MINIMUM_CHILD=1,BODY_CHILD_INDEX=0,ICON_MINUS="<svg width='16' height='16' fill='currentColor' viewBox=\"0 0 448 512\"><path fill='currentColor' d=\"M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z\"/></svg>",ICON_PLUS="<svg fill='currentColor' width='16' height='16' xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path fill='currentColor' d=\"M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z\"/></svg>",getDataState=(t,e)=>{let{setting:r={},styles:o={},builderProps:i}=t,{activeKey:a,iconSvg:l,expandItem:n,iconPosition:s,iconCollapseSize:c,iconGlobalSize:g,iconExpand:I,iconCollapse:p,layoutHeader:S,expandedMode:m,configIconSize:u}=r,{bgColor:d,color:v,headerBorder:C,width:h,fullWidth:N,textColor:L,itemHeaderSpacing:_,contentSizePadding:w,iconColor:M,headerContentPadding:D,widthHeightSize:U}=o,O="multiple"===m,H=t=>t?t.toString().toLowerCase().split(",").map(t=>parseInt(t.trim())-1).map(t=>t.toString()):[],P=n?H(a):[],f=O?[...P]:P,x=()=>({iconSvg:l,isIconPlus:"plus"===l,activeKey:a,expanded:O,expandItem:n,iconPosition:s,iconGlobalSize:g,iconCollapse:p,iconExpand:I,iconCollapseSize:c,layoutHeader:S,expandedMode:m,configIconSize:u,parentUid:i?.uid,childListNumber:n?a?.toString().toLowerCase()==="all"?e?.map((t,e)=>e.toString()):f:[],chidlrenUid:e?.map(t=>t.uid)}),B=()=>({bgColor:d,color:v,headerBorder:C,fullWidth:N,width:h,itemHeaderSpacing:_,textColor:L,iconColor:M,contentSizePadding:w,headerContentPadding:D,widthHeightSize:U});return{uidState:i?.uid,settingState:x(),stylesState:B(),accordions:f}},getParentSettings=(t={})=>{let{iconSvg:e,titleTypo:r,layoutHeader:o,iconGlobalSize:i,iconCollapseSize:a,iconCollapse:l,iconExpand:n,alignment:s,configIconSize:c,iconPosition:g}=t,I=r?{...r,attrs:{...r.attrs}}:void 0;return I?.attrs?.color&&delete I.attrs.color,{iconSvg:e,titleTypo:I,layoutHeader:o,iconGlobalSize:i,iconCollapseSize:a,iconCollapse:l,iconExpand:n,alignment:s,configIconSize:c,iconPosition:g}},composeIconSvg=({isShow:t,iconExpand:e,iconCollapse:r,iconSvg:o})=>e&&t?e:r&&!t?r:"plus"===o?t?ICON_MINUS:ICON_PLUS:o,getSettingItemLiquid=l=>{let{index:n,accordions:s,parentSetting:c,parentStyle:g}=l,{titleTypo:I,iconCollapse:p,iconExpand:S,activeKey:m,expandItem:u,iconSvg:d}=c??{};delete I?.attrs?.color;let{itemContentSpacing:v,iconColor:C,contentSizePadding:h}=g??{},N=!!u&&(m?.toString()?.toLowerCase()==="all"||s?.includes(n?.toString()??"")),L=t(h),_=()=>{let t={...h&&L.padding,...v?.type||h?{}:e(v?.custom)};return N?t:r(t)},w=composeIconSvg({isShow:N,iconExpand:S,iconCollapse:p,iconSvg:d}),M=()=>{let t={normal:C?.normal??"transparent",hover:C?.hover??C?.active??C?.normal??"transparent",active:C?.active??"transparent"};return N?o({c:i(t?.active)}):a("c",t)};return{isShow:N,composeContentSizeStyle:_,collapsibleIcon:w,composeIconColor:M(),makeIcon:w}};export{BODY_CHILD_INDEX,ICON_MINUS,ICON_PLUS,MINIMUM_CHILD,composeIconSvg,getDataState,getParentSettings,getSettingItemLiquid};

package/dist/esm/accordion/components/AccordionItem.liquid.js

@@ -1,18 +1,18 @@
-import{composeClasses as t,template as e,RenderChildren as s}from"@gem-sdk/core";import i from"../../text/components/Text.liquid.js";import{getParentSettings as a,getSettingItemLiquid as o,MINIMUM_CHILD as n,BODY_CHILD_INDEX as l}from"../common/helpers.js";import{createClass as d,createStyle as r,If as $}from"@gem-sdk/system";import{getItemContainerClasses as c,getDropdownClasses as p,getIconClasses as m,getIconRotateClasses as v,getContentClasses as y,getGapClasses as x,getLayoutIconClasses as g,getRenderChildrenClasses as u}from"../common/classes.js";import{getIconGlobalSize as f,getItemContainerStyles as h,getDropdownStyles as S,getDropdownTextStyles as I,getIconRotateStyles as j,getGapStyles as k,getIconStyles as T,getTemplateRow as b,getRenderChildrenStyles as q}from"../common/styles.js";let AccordionItem=w=>{let{parentUid:A,childrenIcon:F,rawChildren:C,index:M,builderProps:N,title:V}=w,{iconSvg:_,titleTypo:z,layoutHeader:B,iconGlobalSize:D,iconCollapseSize:E,iconCollapse:G,iconExpand:H,alignment:J,configIconSize:K,iconPosition:L}=a(w.parentSetting)??{},{isShow:O,composeContentSizeStyle:P,collapsibleIcon:Q,composeIconColor:R,makeIcon:U}=o(w),W=d(c),X=d(p(w.parentStyle,{isShow:O,uniqueId:A,makeIcon:U(),index:M})),Y=r(f(D)),Z=d(m),tt=d(v(w.parentStyle,{isShow:O,iconExpand:H,iconSvg:_,iconCollapse:G})),te=d(y(A)),ts=d(x),ti=r(h(w.parentStyle,!1)),ta=r(S(w.parentStyle,{isShow:O,iconPosition:L})),to=r(I(w.parentStyle?.textColor,O)),tn=r(j(w.parentStyle,O,E)),tl=r(k(D,J)),td=d(t("gp-inline-flex")),tr=d(O?{...t("!gp-text-[var(--icon-active-color)]"),...g}:g),t$=r(T(R,K)),tc=d(u(w.parentStyle,{isShow:O,hasTransitionedIn:!1,isMounted:!1})),tp=r({...b(O),...q()}),tm=d(t("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),tv=()=>C&&C.length>=n?s({...C[l]}):"";return e`
+import{composeClasses as t,template as e,RenderChildren as s}from"@gem-sdk/core";import i from"../../text/components/Text.liquid.js";import{getParentSettings as a,getSettingItemLiquid as o,MINIMUM_CHILD as l,BODY_CHILD_INDEX as n}from"../common/helpers.js";import{createClass as d,createStyle as r,If as $}from"@gem-sdk/system";import{getItemContainerClasses as c,getDropdownClasses as p,getIconClasses as m,getIconRotateClasses as v,getContentClasses as y,getGapClasses as x,getLayoutIconClasses as g,getRenderChildrenClasses as u}from"../common/classes.js";import{getIconGlobalSize as f,getItemContainerStyles as h,getDropdownStyles as S,getDropdownTextStyles as j,getIconRotateStyles as I,getGapStyles as T,getIconStyles as b,getTemplateRow as k,getRenderChildrenStyles as q}from"../common/styles.js";let AccordionItem=w=>{let{parentUid:A,childrenIcon:F,rawChildren:C,index:M,builderProps:N,title:V}=w,{iconSvg:_,titleTypo:z,layoutHeader:B,iconGlobalSize:D,iconCollapseSize:E,iconCollapse:G,iconExpand:H,alignment:J,configIconSize:K,iconPosition:L}=a(w.parentSetting)??{},{isShow:O,composeContentSizeStyle:P,collapsibleIcon:Q,composeIconColor:R,makeIcon:U}=o(w),W=d(c),X=d(p(w.parentStyle,{isShow:O,uniqueId:A,makeIcon:U,index:M})),Y=r(f(D)),Z=d(m),tt=d(v(w.parentStyle,{isShow:O,iconExpand:H,iconSvg:_,iconCollapse:G})),te=d(y(A)),ts=d(x),ti=r(h(w.parentStyle,!1)),ta=r(S(w.parentStyle,{isShow:O,iconPosition:L})),to=r(j(w.parentStyle?.textColor,O)),tl=r(I(w.parentStyle,O,E)),tn=r(T(D,J)),td=d(t("gp-inline-flex")),tr=d(O?{...t("!gp-text-[var(--icon-active-color)]"),...g}:g),t$=r(b(R,K)),tc=d(u(w.parentStyle,{isShow:O,hasTransitionedIn:!1,isMounted:!1})),tp=r({...k(O),...q()}),tm=d(t("gp-accordion-item_body-inner gp-transition-all gp-duration-500 gp-min-h-0")),tv=()=>C&&C.length>=l?s({...C[n]}):"";return e`
   <div class="${W}" style="${ti}">
     <div data-index="${M?.toString()}" class="${te}">
       <div aria-hidden uid="${N?.uid}" id="${N?.uid}" data-index="${M?.toString()}"
         class="${X}" style="${ta}">
         ${$(!!Q,e`
           <div class="${Z}">
-            <span style="${tn}"
+            <span style="${tl}"
             data-index="${M}"
             class="${tt}">
               ${Q}
             </span>
           </div>
           `)}
-        <div class="${ts}" style="${tl}">
+        <div class="${ts}" style="${tn}">
           ${$("before-text"===B,e`
           <div class="${td}" style="${{...Y}}">
             <span

package/dist/esm/accordion/hooks/useAccordionItem.js

@@ -1 +1 @@
-import{makeGlobalSize as t,useEditorMode as e,makeStyle as r,getSingleColorVariable as o,getGlobalColorStateStyle as n,composeSize as a,removePaddingYInStyle as i}from"@gem-sdk/core";import{useState as c,useEffect as s,useMemo as l}from"react";import m from"./useMountTransition.js";import{useGetProductId as d}from"../../hooks/useGetProductId.js";let useAccordionItem=u=>{let{accordions:p,index:v,builderProps:f,parentSetting:g={},parentStyle:h={},handleDropDown:$}=u,{iconPosition:j,titleTypo:w,iconCollapse:I,iconExpand:k}=g;delete w?.attrs?.color;let{itemContentSpacing:x,iconColor:A,contentSizePadding:b}=h,y=p?.includes(v?.toString()??""),G=t(b),M=e(),[P,S]=c(y),T=m(P||!1,500);s(()=>{S(y)},[y]);let q=l(()=>k&&y?k:I&&!y?I:void 0,[y,I,k]),z=l(()=>r({fd:"left"===j?"row":"row-reverse",jc:"right"===j?"space-between":""}),[j]),B=(t,e)=>{!t.target.closest(".gp-text")&&$&&e&&(S(!P),$(e))},C=l(()=>{let t={normal:A?.normal??"transparent",hover:A?.hover??A?.active??A?.normal??"transparent",active:A?.active??A?.normal??"transparent"};return y?r({c:o(t?.active)}):n("c",t)},[A,y]),{refContainer:D,productID:E}=d(),F=l(()=>{let t=`gp-accordion-item-${f?.uid}-${v}`;return E?`${t}-${E}`:t},[f?.uid,v,E]),H=l(()=>{let t={...b&&G.padding,...x?.type||b?{}:a(x?.custom)};return y?t:i(t)},[b,x,y,G]),J=l(()=>T||P||"edit"!==M,[T,P,M]);return{productID:E,isShow:y,getIdDropdownItem:B,makeIcon:q,refContainer:D,uniqueId:F,isRenderChildren:J,composePosition:z,composeIconColor:C,composeContentSizeStyle:H,hasTransitionedIn:T,isMounted:P}};export{useAccordionItem as default};
+import{makeGlobalSize as e,useEditorMode as t,makeStyle as r,getSingleColorVariable as o,getGlobalColorStateStyle as n,composeSize as a,removePaddingYInStyle as c}from"@gem-sdk/core";import{useState as i,useEffect as s,useMemo as m}from"react";import l from"./useMountTransition.js";import{useGetProductId as d}from"../../hooks/useGetProductId.js";import{composeIconSvg as p}from"../common/helpers.js";let useAccordionItem=u=>{let{accordions:f,index:g,builderProps:v,parentSetting:h={},parentStyle:j={},handleDropDown:$}=u,{iconPosition:w,titleTypo:I,iconCollapse:k,iconExpand:x,iconSvg:A}=h;delete I?.attrs?.color;let{itemContentSpacing:b,iconColor:y,contentSizePadding:G}=j,M=f?.includes(g?.toString()??""),P=e(G),S=t(),[T,q]=i(M),z=l(T||!1,500);s(()=>{q(M)},[M]);let B=m(()=>p({isShow:M,iconExpand:x,iconCollapse:k,iconSvg:A}),[M,x,k,A]),C=m(()=>r({fd:"left"===w?"row":"row-reverse",jc:"right"===w?"space-between":""}),[w]),D=(e,t)=>{!e.target.closest(".gp-text")&&$&&t&&(q(!T),$(t))},E=m(()=>{let e={normal:y?.normal??"transparent",hover:y?.hover??y?.active??y?.normal??"transparent",active:y?.active??y?.normal??"transparent"};return M?r({c:o(e?.active)}):n("c",e)},[y,M]),{refContainer:F,productID:H}=d(),J=m(()=>{let e=`gp-accordion-item-${v?.uid}-${g}`;return H?`${e}-${H}`:e},[v?.uid,g,H]),K=m(()=>{let e={...G&&P.padding,...b?.type||G?{}:a(b?.custom)};return M?e:c(e)},[G,b,M,P]),L=m(()=>z||T||"edit"!==S,[z,T,S]);return{productID:H,isShow:M,getIdDropdownItem:D,makeIcon:B,refContainer:F,uniqueId:J,isRenderChildren:L,composePosition:C,composeIconColor:E,composeContentSizeStyle:K,hasTransitionedIn:z,isMounted:T}};export{useAccordionItem as default};

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

@@ -1,4 +1,4 @@
-import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as l}from"@gem-sdk/core";import r from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as a}from"../../helpers.js";import{createStateOrContext as i,createClass as o,createStyle as m,If as p}from"@gem-sdk/system";import{getButtonYoutubeClasses as d,getImageYoutubeClasses as c,getArticleYoutubeClasses as u,getIframeYoutubeClasses as f}from"../common/classes.js";import{getIframeYoutubeStyle as y,getArticleYoutubeStyle as b}from"../common/styles.js";import{getYoutubeParams as g}from"../common/helpers.js";let LiteYouTubeEmbed=n=>{let{style:$,iframeClass:h,wrapperClass:v,title:S,poster:j}=n,E=`gp-video-${n.uid}`,{posterUrl:w,iframeSrc:z}=g(n),C=j?.preload,T=i({lazy:n.lazy,style:$,title:S,iframeSrc:z}),k=!n.lazy,x=o({...d(k)}),L=o({...c()}),N=o({...u(C||!1,v)}),A=o({...f(h)}),I=m({...y($)}),M=m({...b($,w)}),G=()=>e`
+import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as a}from"@gem-sdk/core";import l from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as r}from"../../helpers.js";import{createStateOrContext as i,createClass as o,createStyle as p,If as m}from"@gem-sdk/system";import{getButtonYoutubeClasses as d,getImageYoutubeClasses as c,getArticleYoutubeClasses as u,getIframeYoutubeClasses as f}from"../common/classes.js";import{getIframeYoutubeStyle as y,getArticleYoutubeStyle as b}from"../common/styles.js";import{getYoutubeParams as g}from"../common/helpers.js";let LiteYouTubeEmbed=n=>{let{style:$,iframeClass:h,wrapperClass:v,title:S,poster:j}=n,z=`gp-video-${n.uid}`,{posterUrl:E,iframeSrc:w}=g(n),C=j?.preload,L=i({lazy:n.lazy,style:$,title:S,iframeSrc:w}),N=!n.lazy,T=o({...d(N)}),k=o({...c()}),x=o({...u(C||!1,v)}),A=o({...f(h)}),I=p({...y($)}),M=p({...b($,E)}),G=()=>e`
     <iframe
       id="player-wrapper-${n.uid}"
       class="${A}"
@@ -7,18 +7,18 @@ import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as l}from"@gem-s
       frameborder="0"
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen
-      src="${z}"
+      src="${w}"
     ></iframe>
   `;return e`
-    <gp-lite-youtube-embed gp-data='${JSON.stringify(T)}'>
+    <gp-lite-youtube-embed gp-data='${JSON.stringify(L)}'>
       <article
         aria-hidden
-        class="${N}"
+        class="${x}"
         data-title="${S}"
         style="${M}"
       >
-        ${r({id:E,src:w,alt:j?.altText,title:j?.imageTitle,priority:j?.preload,enableLazyLoadImage:!0,className:L,isDisableAspectStyle:!0})}
-        <button type="button" aria-label="Play" class="${x}">
+        ${l({id:z,src:E,alt:j?.altText,title:j?.imageTitle,priority:j?.preload,enableLazyLoadImage:!0,className:k,isDisableAspectStyle:!0,isNotLazyload:j?.preload})}
+        <button type="button" aria-label="Play" class="${T}">
           <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
             <path
               d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
@@ -27,8 +27,8 @@ import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as l}from"@gem-s
             <path d="M 45,24 27,14 27,34" fill="#fff"></path>
           </svg>
         </button>
-        ${p(k,G())}
+        ${m(N,G())}
       </article>
     </gp-lite-youtube-embed>
-    ${t(s,`<script ${a('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${a('class="gps-link" delay',"src")}="${l}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    ${t(s,`<script ${r('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${r('class="gps-link" delay',"src")}="${a}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};export{LiteYouTubeEmbed as default};

package/package.json

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