@gem-sdk/components 3.0.0-pre-production.14 → 3.0.0

package/dist/cjs/video/hooks/useLiteVimeoEmbed.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react");const useLiteVimeoEmbed=(e,t)=>{let[i,s]=React.useState(),[o,a]=React.useState(!e),[u,r]=React.useState();React.useEffect(()=>{fetch(`https://vimeo.com/api/v2/video/${t}.json`).then(e=>e.json()).then(([e])=>{e?.width&&e?.height&&r((e?.width/e?.height).toFixed(2)),s(e?.thumbnail_large)})},[t]);let c=()=>{o||a(!0)};return{addIframe:c,thumbnail:i,iframe:o,originRatio:u}};exports.default=useLiteVimeoEmbed,exports.useLiteVimeoEmbed=useLiteVimeoEmbed;

package/dist/cjs/video/hooks/useLiteYoutubeEmbed.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),helpers=require("../common/helpers.js");const useLiteYoutubeEmbed=(e,t,r)=>{let{lazy:u,isHeroBanner:s}=e,[a,c]=React.useState(!1),[o,l]=React.useState(!u),n=()=>{a||c(!0)},i=()=>{o||l(!0)},p=React.useRef(!1),d=React.useRef(0),R=React.useRef(),b=e=>{let r=e.target;if(r&&s&&helpers.isSettingLoop(t)&&d.current>0){let e=parseFloat((d.current/100*5).toFixed(2));clearInterval(R.current),R.current=setInterval(()=>{let t=parseFloat(r.getCurrentTime().toFixed(2)),u=parseFloat((d.current-t).toFixed(2));u<=parseFloat((1.5*e).toFixed(2))&&r.seekTo(0)},1e3*e)}};return React.useEffect(()=>()=>{R.current&&(clearInterval(R.current),p.current=!1)},[r,t]),{iframe:o,addIframe:i,intervalPlay:b,warmConnections:n,isVideoStarted:p,videoDuration:d}};exports.default=useLiteYoutubeEmbed,exports.useLiteYoutubeEmbed=useLiteYoutubeEmbed;

package/dist/cjs/video/index.js

@@ -0,0 +1 @@
+"use strict";var Video$1=require("./settings/Video.js"),Video=require("./components/Video.js");const videoSetting={Video:Video$1.default};exports.Video=Video.default,exports.videoSetting=videoSetting;

package/dist/cjs/video/next.js

@@ -1,16 +1 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var dynamic = require('next/dynamic');
-var Loading = require('../common/components/Loading.js');
-require('react/jsx-runtime');
-
-const Video = dynamic(()=>Promise.resolve().then(function () { return require('./components/Video.js'); }), {
-    loading: Loading.default
-});
-var video = {
-    Video
-};
-
-exports.default = video;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var dynamic=require("next/dynamic"),Loading=require("../common/components/Loading.js");require("react/jsx-runtime"),require("react"),require("@gem-sdk/core");const Video=dynamic(()=>Promise.resolve().then(function(){return require("./components/Video.js")}),{loading:Loading.default});var video={Video};exports.default=video;

package/dist/cjs/video/settings/Video.js

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var settings=require("./configs/settings.js"),uiV1=require("./configs/ui-v1.js"),uiV2=require("./configs/ui-v2.js");const config={tag:"Video",label:"Video",icon:`
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.3333 24V16L24 20L17.3333 24ZM20 9.33337C20 9.33337 13.3333 9.33338 8.8 9.60004C8.13333 9.73338 6.8 9.73338 5.6 10.9334C4.66667 11.8667 4.26667 14 4.26667 14C4.26667 14 4 16.4 4 18.8V21.0667C4 23.4667 4.26667 26 4.26667 26C4.26667 26 4.53333 28.1334 5.6 29.0667C6.8 30.2667 8.4 30.2667 9.06667 30.4C11.7333 30.5334 20 30.6667 20 30.6667C20 30.6667 26.6667 30.6667 31.2 30.4C31.8667 30.2667 33.2 30.2667 34.4 29.0667C35.3333 28.1334 35.7333 26 35.7333 26C35.7333 26 36 23.6 36 21.0667V18.8C36 16.4 35.7333 13.8667 35.7333 13.8667C35.7333 13.8667 35.4667 11.7334 34.4 10.8C33.2 9.60004 31.8667 9.60004 31.2 9.46671C26.6667 9.33337 20 9.33337 20 9.33337ZM20 11.7334C20.1333 11.7334 26.6667 11.7334 31.0667 12H31.2C31.7333 12 32.2667 12.1334 32.8 12.5334C32.9333 12.8 33.3333 13.6 33.3333 14.1334C33.3333 14.1334 33.6 16.4 33.6 18.6667V20.9334C33.6 23.2 33.3333 25.4667 33.3333 25.4667C33.2 26 32.9333 26.9334 32.8 27.0667C32.2667 27.6 31.8667 27.6 31.3333 27.6H31.2C26.6667 28.2667 20 28.2667 20 28.2667C19.8667 28.2667 11.8667 28.1334 9.33333 28C9.2 28 9.06667 28 8.93333 28C8.13333 27.8667 7.6 27.8667 7.2 27.4667C7.06667 27.2 6.66667 26.4 6.66667 25.8667C6.66667 25.8667 6.4 23.6 6.4 21.3334V19.0667C6.4 16.8 6.66667 14.5334 6.66667 14.5334C6.8 13.8667 7.06667 13.0667 7.2 12.8C7.73333 12.2667 8.13333 12.2667 8.66667 12.2667H8.8C13.3333 11.7334 19.8667 11.7334 20 11.7334Z" fill="currentColor"/>
+  </svg>
+  `,settings:settings.VideoSettings,ui:uiV1.SettingUIV1,uiV2:uiV2.SettingUIV2,editorConfigs:{sideBar:{tab:{style:{hide:!0}}}},presets:[{id:"video",name:{en:"Video"},icon:{desktop:`
+          <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect width="96" height="48" rx="3" fill="#424242"/>
+          <path d="M48.0003 9.6665C43.3962 9.6665 39.667 13.3957 39.667 17.9998C39.667 22.604 43.3962 26.3332 48.0003 26.3332C52.6045 26.3332 56.3337 22.604 56.3337 17.9998C56.3337 13.3957 52.6045 9.6665 48.0003 9.6665ZM46.3337 21.7498V14.2498L51.3337 17.9998L46.3337 21.7498Z" fill="#D6D6D6"/>
+          <rect x="7" y="38" width="82" height="2" rx="1" fill="#757575"/>
+          <circle cx="24" cy="39" r="3" fill="#D6D6D6"/>
+          </svg>
+        `},components:[{tag:"Video",advanced:{"spacing-setting":{desktop:{margin:{bottom:"var(--g-s-l)"}}},editorData:{cssPlaceholder:'.{{rootClassName}}[data-component-label="Video"] {\n\n}'}}}]}]};exports.default=config;

package/dist/cjs/video/settings/configs/settings.js

@@ -0,0 +1 @@
+"use strict";var helpers=require("../../../helpers.js");const VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=drIt4RH_kyQ",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${helpers.youtubeShortsRegex}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify.  <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];exports.VideoSettings=VideoSettings;

package/dist/cjs/video/settings/configs/ui-v1.js

@@ -0,0 +1 @@
+"use strict";const SettingUIV1=[{type:"group",label:{en:"Video URL"},controls:[{type:"control",label:{en:"Video source"},setting:{id:"type"}},{type:"control",label:{en:"Weblink"},condition:"type === 'youtube'",setting:{id:"youtubeUrl"}},{type:"control",label:{en:"Weblink"},condition:"type === 'vimeo'",setting:{id:"vimeoUrl"}},{type:"control",label:{en:"Weblink"},condition:"type === 'html5'",setting:{id:"html5Url"}},{type:"control",condition:"type === 'html5'",setting:{id:"notes"}}]},{type:"group",label:{en:"Video thumbnail"},options:{labelSpacing:"small"},controls:[{label:{en:"Image"},type:"control",setting:{id:"poster"},layout:"vertical"},{type:"control",label:{en:"Preload"},options:{info:"near"},setting:{id:"preload"},condition:"type === 'html5' || type === 'youtube'"},{type:"control",label:{en:"Ratio"},setting:{id:"aspectRatio"}},{condition:"aspectRatio === 'custom'",type:"control",setting:{id:"ratioOptions"}}]},{type:"group",label:{en:"Options"},controls:[{type:"control",label:{en:"Autoplay"},setting:{id:"autoplay"}},{type:"control",label:{en:"Enable sound"},setting:{id:"mute"}},{type:"control",label:{en:"Loop video"},setting:{id:"loopVideo"}},{type:"control",label:{en:"Show control bar"},setting:{id:"controls"}},{type:"control",label:{en:"Lazy load"},setting:{id:"lazy"}}]},{type:"group",label:{en:"Starting and ending time"},condition:"type === 'youtube'",controls:[{type:"control",label:{en:"Start video at"},setting:{id:"startTime"}},{type:"control",label:{en:"End video at"},setting:{id:"endTime"}}]}];exports.SettingUIV1=SettingUIV1;

package/dist/cjs/video/settings/configs/ui-v2.js

@@ -0,0 +1 @@
+"use strict";const SettingUIV2=[{label:{en:"Video source"},controls:[{label:{en:"Type"},setting:{id:"type"}},{label:{en:"Video link"},conditionDisplay:"type === 'youtube'",setting:{id:"youtubeUrl"}},{label:{en:"Video link"},conditionDisplay:"type === 'vimeo'",setting:{id:"vimeoUrl"}},{label:{en:"Video link"},conditionDisplay:"type === 'html5'",setting:{id:"html5Url"}},{label:{en:"Thumbnail"},setting:{id:"poster"},options:{updateFields:[{field:"preload",settingId:"preload"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}}],moreSettings:{type:"collapse",controls:[{conditionDisplay:"type === 'youtube'",label:{en:"Start at"},setting:{id:"startTime"}},{conditionDisplay:"type === 'youtube'",label:{en:"End at"},setting:{id:"endTime"}}]}},{label:{en:"Video configure"},controls:[{label:{en:"Control bar"},setting:{id:"controls"}},{label:{en:"Sound"},setting:{id:"mute"}},{label:{en:"Lazy load"},setting:{id:"lazy"}}],moreSettings:{type:"collapse",controls:[{label:{en:"Autoplay"},setting:{id:"autoplay"},options:{disableMessage:"YouTube & Vimeo videos will not autoplay when lazy load is enabled"},conditionEnable:"type === 'html5' || (type !== 'html5' && lazy != true)"},{label:{en:"Loop video"},setting:{id:"loopVideo"}}]}},{label:{en:"Size"},controls:[{label:{en:"Frame"},setting:{id:"aspectRatio"}},{conditionDisplay:"aspectRatio === 'custom'",setting:{id:"ratioOptions"},layout:"vertical"}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"border",state:"normal"}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]}];exports.SettingUIV2=SettingUIV2;

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

@@ -0,0 +1 @@
+import{composeClasses as e,cls as t,getGlobalColorClass as o,getGlobalColorStateClass as g,genSizeClass as s}from"@gem-sdk/core";let getContainerClasses=(o,g)=>{let s=t("gp-flex gp-flex-col gp-w-full",{"gp-px-[1px]":"edit"===g},o);return e(s)},extendClasses=()=>e(t("gp-hidden gp-rotate-90 -gp-rotate-90 gp-rotate-180")),getItemContainerClasses=e("gp-overflow-clip gp-group"),getIconClasses=e("gp-inline-flex"),getIconRotateClasses=(s,r)=>{let{isShow:p,iconExpand:n,iconSvg:l,iconCollapse:i}=r||{},{color:a}=s??{};return e(t({"-gp-rotate-90":!0===p&&"plus"!==l&&!n,"gp-rotate-90":!1===p&&!i},"group-hover:[color:var(--icon-expand-hover-color)] gp-collapsible-icon gp-accordion-item_icon gp-inline-flex gp-items-center gp-justify-center gp-overflow-hidden gp-transition-all gp-duration-200 [&>svg]:!gp-h-[var(--height-iconCollapseSize)] [&>svg]:!gp-w-full",p?o("text",a?.active):g("text",a),p?"gp-text-[var(--icon-expand-active-color)]":""))},getDropdownClasses=(r,p)=>{let{isShow:n,uniqueId:l,makeIcon:i}=p||{},{itemHeaderSpacing:a,headerContentPadding:c,bgColor:d}=r??{};return e(t("gp-flex gp-accordion-item_header gp-cursor-pointer gp-items-center",i?"gp-gap-[16px]":"",l,`gp-accordion-item-${l}-${p?.index}`,a?.type&&!c?s(a?.type):"",{[o("bg",d?.active)]:n,[g("bg",d)]:!n}))},getContentClasses=o=>e(t(`${o}`,"gp-overflow-hidden",`gp-child-item-${o}`,"gp-accordion-item")),getGapClasses=e("gp-flex gp-w-full gp-items-center gp-break-all"),getLayoutIconClasses=e("group-hover:[color:var(--icon-hover-color)!important] gp-icon gp-inline-flex header-icon gp-items-center gp-justify-center gp-overflow-hidden [&>svg]:!gp-h-[var(--height-configIconSize)] [&>svg]:!gp-w-full"),getRenderChildrenClasses=(o,g)=>{let{isShow:r,hasTransitionedIn:p,isMounted:n}=g||{},{itemContentSpacing:l,contentSizePadding:i}=o??{};return e(t("gp-accordion-item_body gp-transition-all gp-grid gp-duration-500 gp-overflow-hidden",{"gp-grid-rows-[1fr]":r?p:n,"gp-grid-rows-[0fr]":r?!p:!n},l?.type&&!i?s(l?.type):""))};export{extendClasses,getContainerClasses,getContentClasses,getDropdownClasses,getGapClasses,getIconClasses,getIconRotateClasses,getItemContainerClasses,getLayoutIconClasses,getRenderChildrenClasses};

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

@@ -0,0 +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};

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

@@ -0,0 +1 @@
+import{getStyleBackgroundByDevice as e,getSingleColorVariable as t,makeStyle as o,makeStyleResponsive as r,getStyleShadow as i,getRadiusStyleActiveState as n,composeSize as l,getGlobalColorStateStyle as a,handleConvertBorderStyle as c,handleConvertBorderWidth as d,handleConvertBorderColor as g,makeGlobalSize as h,makeWidth as s}from"@gem-sdk/core";let filterStyles=e=>{let t=["--mb","--mb-mobile","--mb-tablet","--d","--d-mobile","--d-tablet"];return t.forEach(t=>{delete e?.[t]}),e},contentSizePaddingSize=e=>h(e?.contentSizePadding),getContainerStyles=(t,o)=>({...filterStyles(t),...contentSizePaddingSize(o).gap,...e(t?.backgroundContent),"border-radius":"inherit"}),widthHeightSizeControl=e=>h(e),widthStyle=(e,t,o)=>widthHeightSizeControl(o).width["--w"]?widthHeightSizeControl(o).width:r("w",s(e,t)),getItemContainerStyles=(e,l)=>{let{borderContent:a,backgroundContent:c,roundedContent:d,accordionShadow:g,width:h,fullWidth:s,widthHeightSize:m,iconColor:S,color:p,textColor:b,hasActiveShadow:w}=e??{};return{"--text-hover-color":l?t(b?.active??b?.normal):t(b?.hover??b?.normal),"--icon-expand-hover-color":l?t(p?.active??p?.normal):t(p?.hover??p?.normal),"--icon-expand-active-color":t(p?.active??p?.normal),"--icon-active-color":t(S?.active??S?.normal),"--icon-hover-color":l?t(S?.active??S?.normal):t(S?.hover??S?.normal),...widthStyle(h,s,m),...o({bs:a?.border??a?.border,bw:a?.width??a?.width,bc:t(a?.color??a?.color)}),...r("bg",c),...i({value:g,styleAppliedFor:"box-shadow",isEnableShadow:g?.enable||w}),...n({...d,active:{...d||{},radiusType:"custom"}})}},headerContentPaddingSize=e=>h(e),composePosition=e=>o({fd:"left"===e?"row":"row-reverse",jc:"right"===e?"space-between":""}),getDropdownStyles=(e,r)=>{let{headerContentPadding:i,widthHeightSize:n,itemHeaderSpacing:h,bgColor:s,headerBorder:m}=e??{},{isShow:S,iconPosition:p}=r??{};return{...i&&headerContentPaddingSize(i).padding,...h?.type||i?{}:l(h?.custom),...widthHeightSizeControl(n).height,...composePosition(p),...S?o({bgc:t(s?.active??s?.normal),bs:m?.active?.border??m?.normal?.border,bw:m?.active?.width??m?.normal?.width,bc:t(m?.active?.color??m?.normal?.color)}):{...a("bgc",s),...c(m),...d(m),...g(m),...a("bgc",s)}}},getDropdownTextStyles=(e,r)=>({...r?o({c:t(e?.active??e?.normal)}):o({c:t(e?.normal)})}),getIconRotateStyles=(e,r,i)=>{let{color:n}=e??{};return{...o({c:t(r?n?.active??n?.normal??"transparent":n?.normal??"transparent")}),width:`${i??16}px`,height:`${i??16}px`}},composeIconGlobalSize=e=>h(e),getGapStyles=(e,t)=>({...composeIconGlobalSize(e).gap,...r("jc",t)}),getIconStyles=(e,t)=>{let o=t?`${t}px`:"16px";return{...e,width:o,height:o,"--height":o}},getTemplateRow=e=>({"grid-template-rows":`${+!!e}fr`}),getRenderChildrenStyles=()=>({"grid-template-columns":"minmax(auto, 100%)"}),getIconGlobalSize=e=>h(e)?.padding;export{getContainerStyles,getDropdownStyles,getDropdownTextStyles,getGapStyles,getIconGlobalSize,getIconRotateStyles,getIconStyles,getItemContainerStyles,getRenderChildrenStyles,getTemplateRow};

package/dist/esm/accordion/components/Accordion.js

@@ -1,191 +1,2 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useState, useMemo, useEffect, Children, isValidElement } from 'react';
-import { makeGlobalSize, useEditorMode, useInteraction, cls, getStyleBackgroundByDevice, makeStyleResponsive } from '@gem-sdk/core';
-
-const Accordion = ({ builderProps, builderAttrs, style, children, setting, styles })=>{
-    const { align } = styles ?? {};
-    const currentAccordions = useRef([]);
-    const { childItem, activeKey, expandItem, expandedMode } = setting ?? {};
-    const [accordions, setAccordions] = useState([]);
-    const contentSizePaddingSize = makeGlobalSize(styles?.contentSizePadding);
-    const mode = useEditorMode();
-    const { onListener, saveToElementInteractionData, ref, findElementIncludingSelf } = useInteraction();
-    const expanded = useMemo(()=>{
-        return expandedMode === 'multiple' ? true : expandedMode !== 'single';
-    }, [
-        expandedMode
-    ]);
-    useEffect(()=>{
-        if (!expanded && !activeKey) {
-            currentAccordions.current = [
-                '0'
-            ];
-            setAccordions([
-                '0'
-            ]);
-        }
-        if (!activeKey) {
-            currentAccordions.current = [];
-            setAccordions([]);
-        }
-    }, [
-        expanded,
-        activeKey
-    ]);
-    useEffect(()=>{
-        if (!expandItem) {
-            currentAccordions.current = [];
-            setAccordions([]);
-        }
-    }, [
-        expandItem
-    ]);
-    useEffect(()=>{
-        if (activeKey && expandItem) {
-            const composeActiveKeys = activeKey?.toString()?.toLowerCase()?.split(',')?.map((item)=>parseInt(item.trim()) - 1)?.map((item)=>item.toString());
-            setAccordions(composeActiveKeys);
-            currentAccordions.current = composeActiveKeys;
-        }
-    }, [
-        activeKey,
-        expandItem
-    ]);
-    useEffect(()=>{
-        if (!expandItem) {
-            setAccordions([]);
-            currentAccordions.current = [];
-        }
-        if (activeKey?.toString()?.toLowerCase() === 'all' && expandItem) {
-            const list = Array.from(Children?.map(children, (_, index)=>index.toString()));
-            setAccordions(list);
-            currentAccordions.current = list;
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        activeKey,
-        expandItem
-    ]);
-    const setActive = (id)=>{
-        if (accordions.includes(id)) {
-            setAccordions([]);
-            currentAccordions.current = [];
-        } else {
-            setAccordions([
-                id
-            ]);
-            currentAccordions.current = [
-                id
-            ];
-        }
-    };
-    const setToggle = (id)=>{
-        let newActive = [];
-        if (accordions.includes(id)) {
-            newActive = accordions.filter((accordion)=>accordion !== id);
-        } else {
-            newActive = [
-                ...accordions,
-                id
-            ];
-        }
-        setAccordions(newActive);
-        currentAccordions.current = newActive;
-    };
-    const handleDropdown = (id)=>{
-        expanded ? setToggle(id.toString()) : setActive(id.toString());
-    };
-    const filterStyles = useMemo(()=>{
-        const delList = [
-            '--mb',
-            '--mb-mobile',
-            '--mb-tablet',
-            '--d',
-            '--d-mobile',
-            '--d-tablet'
-        ];
-        delList.forEach((element)=>{
-            delete style?.[element];
-        });
-        return style;
-    }, [
-        style
-    ]);
-    useEffect(()=>{
-        const selector = `[data-id="${builderProps?.uid}"]`;
-        onListener({
-            event: 'gp:change-expanded-item-original',
-            selector
-        }, (params)=>{
-            const element = findElementIncludingSelf(ref.current || document, selector);
-            const { data, isRollback, key } = params || {};
-            if (data === undefined && isRollback) return;
-            if (isRollback) {
-                setAccordions(data);
-                return;
-            }
-            let interactionAccordion = [
-                ...currentAccordions.current
-            ];
-            saveToElementInteractionData(element, key, JSON.stringify({
-                data: interactionAccordion
-            }));
-            const id = data.toString();
-            if (expanded) {
-                interactionAccordion = [
-                    ...interactionAccordion.filter((accordion)=>accordion !== id),
-                    id
-                ];
-            } else {
-                interactionAccordion = [
-                    id
-                ];
-            }
-            setAccordions(interactionAccordion);
-        });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    useEffect(()=>{
-        currentAccordions.current = accordions;
-    }, [
-        accordions
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        ...builderAttrs,
-        ref: ref,
-        "data-id": builderProps?.uid,
-        className: cls('gp-flex gp-flex-col ', {
-            'gp-px-[1px]': mode === 'edit'
-        }),
-        style: {
-            ...filterStyles,
-            ...contentSizePaddingSize.gap,
-            ...getStyleBackgroundByDevice(style?.backgroundContent),
-            borderRadius: 'inherit'
-        },
-        children: Children.map(children, (child, index)=>{
-            if (/*#__PURE__*/ isValidElement(child)) {
-                return /*#__PURE__*/ jsx("div", {
-                    className: "gp-flex",
-                    style: {
-                        ...makeStyleResponsive('jc', align)
-                    },
-                    children: /*#__PURE__*/ jsx(child.type, {
-                        ...child.props,
-                        index: index,
-                        title: childItem?.[index],
-                        accordions: accordions,
-                        handleDropDown: handleDropdown,
-                        parentSetting: setting,
-                        parentStyle: styles,
-                        activeKey: activeKey,
-                        childrenIcon: setting?.childConfig?.[index],
-                        parentUid: builderProps?.uid
-                    })
-                });
-            }
-            return child;
-        })
-    });
-};
-
-export { Accordion as default };
+'use client';
+import{jsx as r}from"react/jsx-runtime";import{useMemo as e,Children as o,isValidElement as t,cloneElement as s}from"react";import{makeStyleResponsive as i}from"@gem-sdk/core";import{createStyle as m,createClass as c,createAttr as n}from"@gem-sdk/system";import{getContainerStyles as d}from"../common/styles.js";import l from"../hooks/useAccordion.js";import{getContainerClasses as a}from"../common/classes.js";let Accordion=({builderProps:p,builderAttrs:f,style:u,children:h,setting:g,styles:j,advanced:y})=>{let{align:k}=j??{},{childItem:x}=g??{},{ref:A,mode:v,accordions:C,handleDropdown:D,activeKey:N}=l({setting:g,children:h,builderProps:p}),S=m({...d(u,j)}),w=c(a(y?.cssClass,v)),I=n({...f,"data-id":p?.uid??""}),U=m({...i("jc",k)}),b=c({"gp-flex":!0}),q=e(()=>o.map(h,(e,o)=>{if(!t(e))return e;let i={...e.props,index:o,title:x?.[o],accordions:C,handleDropDown:D,parentSetting:g,parentStyle:j,activeKey:N,childrenIcon:g?.childConfig?.[o],parentUid:p?.uid};return r("div",{className:b,style:U,children:s(e,i)})}),[C,N,p?.uid,x,h,b,U,D,g,j]);return r("div",{...I,ref:A,className:w,style:S,children:q})};export{Accordion as default};

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

@@ -1,109 +1,17 @@
-import { makeGlobalSize, template, getStyleBackgroundByDevice, WrapRenderChildren, makeStyleResponsive, RenderChildren, RenderIf, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
-import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
-
-const Accordion = ({ rawChildren, setting, styles, builderProps, pageContext, advanced })=>{
-    const { childItem, activeKey, iconSvg, expandItem, iconPosition, iconCollapseSize, iconGlobalSize, iconExpand, iconCollapse, layoutHeader, expandedMode, configIconSize, translate } = setting ?? {};
-    const { align, bgColor, color, headerBorder, width, fullWidth, textColor, itemHeaderSpacing, contentSizePadding, iconColor, headerContentPadding, widthHeightSize, backgroundContent } = styles ?? {};
-    const contentSizePaddingSize = makeGlobalSize(styles?.contentSizePadding);
-    let accordions = [];
-    let activeIndex = [
-        '0'
-    ];
-    if (!expandItem) {
-        activeIndex = [];
-    } else if (activeKey) {
-        const composeActiveKeys = activeKey.toString().toLowerCase().split(',').map((item)=>parseInt(item.trim()) - 1).map((item)=>item.toString());
-        activeIndex = composeActiveKeys;
-    }
-    const expanded = expandedMode === 'multiple' ? true : false;
-    if (expanded) {
-        accordions.push(...activeIndex);
-    } else {
-        accordions = activeIndex;
-    }
-    return template`
-    <gp-accordion
-      data-id="${builderProps?.uid}"
-     ${builderProps}
-      class="gp-flex gp-w-full gp-flex-col ${advanced?.cssClass}"
-      style="${{
-        ...contentSizePaddingSize.gap,
-        ...getStyleBackgroundByDevice(backgroundContent),
-        'border-radius': 'inherit'
-    }}"
-      gp-data='${JSON.stringify({
-        setting: {
-            iconSvg,
-            isIconPlus: iconSvg === 'plus',
-            activeKey,
-            expanded,
-            expandItem,
-            iconPosition,
-            iconGlobalSize,
-            iconCollapse,
-            iconExpand,
-            iconCollapseSize,
-            layoutHeader,
-            expandedMode,
-            configIconSize,
-            parentUid: builderProps?.uid,
-            childListNumber: expandItem ? activeKey?.toString()?.toLowerCase() === 'all' ? rawChildren?.map((item, index)=>index.toString()) : accordions : [],
-            chidlrenUid: rawChildren?.map((item)=>item.uid)
-        },
-        styles: {
-            bgColor,
-            color,
-            headerBorder,
-            fullWidth,
-            width,
-            itemHeaderSpacing,
-            textColor,
-            iconColor,
-            contentSizePadding,
-            headerContentPadding,
-            widthHeightSize
-        },
-        uid: builderProps?.uid
-    }).replaceAll("'", '&#039;')}'
-    >
-    <div class="gp-hidden gp-rotate-90 -gp-rotate-90 gp-rotate-180"></div>
-    ${WrapRenderChildren({
-        uid: builderProps?.uid || '',
-        customProps: rawChildren?.[0].customProps
-    }, rawChildren?.map((child, index)=>{
-        if (child) {
-            const title = getDynamicSourceLocales({
-                val: childItem?.[index],
-                uid: builderProps?.uid,
-                settingId: `childItem_${index}`,
-                pageContext,
-                isCapitalize: setting?.titleTypo?.attrs?.transform === 'capitalize',
-                translate
-            });
-            return template`<div
-                class="gp-flex"
-                style="${{
-                ...makeStyleResponsive('jc', align)
-            }}"
-              >
-                ${RenderChildren({
-                ...child,
-                index: index,
-                title: title,
-                accordions: accordions,
-                parentSetting: setting,
-                parentStyle: styles,
-                parentUid: builderProps?.uid,
-                childrenIcon: setting?.childConfig?.[index],
-                activeKey: activeKey
-            })}
-              </div>
-            `;
-        }
-    }))}
+import{makeStyleResponsive as s,template as e,WrapRenderChildren as i,RenderChildren as t,RenderIf as r,isLocalEnv as o,baseAssetURL as c}from"@gem-sdk/core";import{getDynamicSourceLocales as d,getSettingPreloadData as a}from"../../helpers.js";import{createStateOrContext as l,createClass as p,createStyle as m,createAttr as n}from"@gem-sdk/system";import{getDataState as f}from"../common/helpers.js";import{getContainerStyles as g}from"../common/styles.js";import{getContainerClasses as $,extendClasses as u}from"../common/classes.js";let Accordion=({rawChildren:y,setting:v,styles:S,builderProps:j,pageContext:h,advanced:A,style:k,builderAttrs:E})=>{let{align:I}=S??{},{translate:x,childItem:C,activeKey:P}=v??{},{uidState:_,settingState:z,stylesState:G,accordions:N}=f({setting:v,styles:S,builderProps:j},y),O=l({uid:_,setting:z,styles:{...G}}),T=p($(A?.cssClass)),J=m({...g(k,S)}),K=n({...E,"data-id":j?.uid??""}),M=m({...s("jc",I)}),R=p({"gp-flex":!0}),U=p(u()),V=()=>i({uid:j?.uid??"",customProps:y?.[0].customProps},y?.map((s,i)=>{if(s){let r=d({val:C?.[i],uid:j?.uid,settingId:`childItem_${i}`,pageContext:h,isCapitalize:v?.titleTypo?.attrs?.transform==="capitalize",translate:x});return e`
+          <div class="${R}" style="${M}">
+            ${t({...s,index:i,title:r,accordions:N,parentSetting:v,parentStyle:S,parentUid:j?.uid,childrenIcon:v?.childConfig?.[i],activeKey:P})}
+          </div>
+            `}})),b=()=>r(o,`
+    <script ${a('class="gps-link" delay',"src")}="{{ 'gp-accordion-v7-5.js' | asset_url }}"
+      defer="defer"></script>`,`
+    <script ${a('class="gps-link" delay',"src")}="${c}/assets-v2/gp-accordion-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>
+    `);return e`
+    <gp-accordion ${K} class="${T}" style="${J}"
+      gp-data='${JSON.stringify(O).replaceAll("'","&#039;")}'
+        >
+        <div class=" ${U}"></div>
+      ${V()}
     </gp-accordion>
-    ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-accordion.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-accordion.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `;
-};
-
-export { Accordion as default };
+    ${b()}
+  `};export{Accordion as default};