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

package/dist/esm/coupon/settings/configs/presets.js

@@ -0,0 +1,6 @@
+let CouponPresets=[{id:"coupon",name:{en:"Copy Coupon Code"},icon:{desktop:`<svg width="94" height="48" viewBox="0 0 94 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="94" height="48" rx="3" fill="#424242"/>
+<path d="M31.5 18H23.5C23.3674 18 23.2402 18.0527 23.1464 18.1464C23.0527 18.2402 23 18.3674 23 18.5V21H20.5C20.3674 21 20.2402 21.0527 20.1464 21.1464C20.0527 21.2402 20 21.3674 20 21.5V29.5C20 29.6326 20.0527 29.7598 20.1464 29.8536C20.2402 29.9473 20.3674 30 20.5 30H28.5C28.6326 30 28.7598 29.9473 28.8536 29.8536C28.9473 29.7598 29 29.6326 29 29.5V27H31.5C31.6326 27 31.7598 26.9473 31.8536 26.8536C31.9473 26.7598 32 26.6326 32 26.5V18.5C32 18.3674 31.9473 18.2402 31.8536 18.1464C31.7598 18.0527 31.6326 18 31.5 18ZM31 26H29V21.5C29 21.3674 28.9473 21.2402 28.8536 21.1464C28.7598 21.0527 28.6326 21 28.5 21H24V19H31V26Z" fill="#F9F9F9"/>
+<path d="M50.2386 22.1108H48.9091C48.858 21.8267 48.7628 21.5767 48.6236 21.3608C48.4844 21.1449 48.3139 20.9616 48.1122 20.8111C47.9105 20.6605 47.6847 20.5469 47.4347 20.4702C47.1875 20.3935 46.9247 20.3551 46.6463 20.3551C46.1435 20.3551 45.6932 20.4815 45.2955 20.7344C44.9006 20.9872 44.5881 21.358 44.358 21.8466C44.1307 22.3352 44.017 22.9318 44.017 23.6364C44.017 24.3466 44.1307 24.946 44.358 25.4347C44.5881 25.9233 44.902 26.2926 45.2997 26.5426C45.6974 26.7926 46.1449 26.9176 46.642 26.9176C46.9176 26.9176 47.179 26.8807 47.4261 26.8068C47.6761 26.7301 47.902 26.6179 48.1037 26.4702C48.3054 26.3224 48.4759 26.142 48.6151 25.929C48.7571 25.7131 48.8551 25.4659 48.9091 25.1875L50.2386 25.1918C50.1676 25.6207 50.0298 26.0156 49.8253 26.3764C49.6236 26.7344 49.3636 27.044 49.0455 27.3054C48.7301 27.5639 48.3693 27.7642 47.9631 27.9062C47.5568 28.0483 47.1136 28.1193 46.6335 28.1193C45.8778 28.1193 45.2045 27.9403 44.6136 27.5824C44.0227 27.2216 43.5568 26.706 43.2159 26.0355C42.8778 25.3651 42.7088 24.5653 42.7088 23.6364C42.7088 22.7045 42.8793 21.9048 43.2202 21.2372C43.5611 20.5668 44.027 20.0526 44.6179 19.6946C45.2088 19.3338 45.8807 19.1534 46.6335 19.1534C47.0966 19.1534 47.5284 19.2202 47.929 19.3537C48.3324 19.4844 48.6946 19.6776 49.0156 19.9332C49.3366 20.1861 49.6023 20.4957 49.8125 20.8622C50.0227 21.2259 50.1648 21.642 50.2386 22.1108ZM59.3952 23.6364C59.3952 24.5682 59.2248 25.3693 58.8839 26.0398C58.543 26.7074 58.0756 27.2216 57.4819 27.5824C56.891 27.9403 56.2191 28.1193 55.4663 28.1193C54.7106 28.1193 54.0359 27.9403 53.4421 27.5824C52.8512 27.2216 52.3853 26.706 52.0444 26.0355C51.7035 25.3651 51.533 24.5653 51.533 23.6364C51.533 22.7045 51.7035 21.9048 52.0444 21.2372C52.3853 20.5668 52.8512 20.0526 53.4421 19.6946C54.0359 19.3338 54.7106 19.1534 55.4663 19.1534C56.2191 19.1534 56.891 19.3338 57.4819 19.6946C58.0756 20.0526 58.543 20.5668 58.8839 21.2372C59.2248 21.9048 59.3952 22.7045 59.3952 23.6364ZM58.0913 23.6364C58.0913 22.9261 57.9762 22.3281 57.7461 21.8423C57.5188 21.3537 57.2063 20.9844 56.8086 20.7344C56.4137 20.4815 55.9663 20.3551 55.4663 20.3551C54.9634 20.3551 54.5146 20.4815 54.1197 20.7344C53.7248 20.9844 53.4123 21.3537 53.1822 21.8423C52.9549 22.3281 52.8413 22.9261 52.8413 23.6364C52.8413 24.3466 52.9549 24.946 53.1822 25.4347C53.4123 25.9205 53.7248 26.2898 54.1197 26.5426C54.5146 26.7926 54.9634 26.9176 55.4663 26.9176C55.9663 26.9176 56.4137 26.7926 56.8086 26.5426C57.2063 26.2898 57.5188 25.9205 57.7461 25.4347C57.9762 24.946 58.0913 24.3466 58.0913 23.6364ZM61.0369 28V19.2727H64.1477C64.8267 19.2727 65.3892 19.3963 65.8352 19.6435C66.2813 19.8906 66.6151 20.2287 66.8366 20.6577C67.0582 21.0838 67.169 21.5639 67.169 22.098C67.169 22.6349 67.0568 23.1179 66.8324 23.5469C66.6108 23.973 66.2756 24.3111 65.8267 24.5611C65.3807 24.8082 64.8196 24.9318 64.1435 24.9318H62.0043V23.8153H64.0241C64.4531 23.8153 64.8011 23.7415 65.0682 23.5938C65.3352 23.4432 65.5312 23.2386 65.6562 22.9801C65.7812 22.7216 65.8438 22.4276 65.8438 22.098C65.8438 21.7685 65.7812 21.4759 65.6562 21.2202C65.5312 20.9645 65.3338 20.7642 65.0639 20.6193C64.7969 20.4744 64.4446 20.402 64.0071 20.402H62.3537V28H61.0369ZM68.0394 19.2727H69.5352L71.815 23.2401H71.9087L74.1886 19.2727H75.6843L72.5181 24.5739V28H71.2056V24.5739L68.0394 19.2727Z" fill="#F9F9F9"/>
+</svg>
+`},components:[{tag:"Row",advanced:{d:{desktop:!0,tablet:!0,mobile:!0},border:{desktop:{normal:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"#121212",isCustom:!0}}},rounded:{desktop:{normal:{btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"}}},hasBoxShadow:{desktop:{normal:!1}},boxShadow:{desktop:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"4px",color:"rgba(18, 18, 18, 0.7)",angle:49}}},op:{desktop:"100%"}},childrens:[{tag:"Col",childrens:[{tag:"Row",settings:{layout:{desktop:{cols:[9,3],display:"fill"}},horizontalAlign:{desktop:"start"},verticalAlign:{desktop:"center"},inlineAlignment:"start",blockAlignment:"start"},styles:{fullWidth:{desktop:!0,tablet:!1,mobile:!1},verticalGutter:{desktop:"8px"},columnGap:{desktop:"1%"},background:{desktop:{type:"color",color:"#E1EFFF",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}},preloadBgImage:!1,width:{desktop:"451px"}},advanced:{"spacing-setting":{desktop:{link:!0,padding:{bottom:"var(--g-s-s)",left:"var(--g-s-s)",right:"var(--g-s-s)",top:"var(--g-s-s)"},margin:{bottom:0}}},d:{desktop:!0,tablet:!0,mobile:!0},border:{desktop:{normal:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"#121212",isCustom:!0}}},hasBoxShadow:{desktop:{normal:!1}},boxShadow:{desktop:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"4px",color:"rgba(18, 18, 18, 0.7)",angle:49}}},op:{desktop:"100%"}},childrens:[{tag:"Col",childrens:[{tag:"Col",childrens:[{tag:"Text",settings:{text:'<p><span style="font-size:16px;">Save 30% | Code: <strong>GEMPAGES30</strong></span></p>',translate:"text",htmlTag:"div",background:{desktop:{type:"color",color:"#00000000",image:{src:"",width:0,height:0},size:"cover",position:{x:50,y:50},repeat:"no-repeat",attachment:"scroll"}},globalSize:{desktop:{width:"100%",padding:{type:"custom",top:"0px",left:"0px",right:"0px",bottom:"0px"},gap:""}}},styles:{typo:{type:"paragraph-1",attrs:{color:"#121212"},custom:{fontSize:{desktop:"16px",tablet:"16px",mobile:"16px"},fontWeight:"400",lineHeight:{desktop:"150%",tablet:"180%",mobile:"180%"},letterSpacing:"normal",fontFamily:{value:"Inter",type:"google"},fontStyle:"normal",textShadow:{angle:37,blur:"2px",color:"rgba(0, 0, 0, 0.6)",distance:"4px",type:"custom"},hasShadowText:!1}},textAlign:{desktop:"left"},align:{desktop:"center"},hasLineClamp:{desktop:!1},lineClamp:{desktop:1,tablet:1,mobile:1}},advanced:{"spacing-setting":{desktop:{link:!0,margin:{bottom:"0px",left:"0px",right:"0px",top:"0px"},padding:{}}},editorData:{cssPlaceholder:".{{rootClassName}} {\n\n}\n.{{rootClassName}} p {\n\n}"},d:{desktop:!0,tablet:!0,mobile:!0},border:{desktop:{normal:{borderType:"none",border:"none",borderWidth:"1px",width:"1px 1px 1px 1px",color:"#121212",isCustom:!0}}},rounded:{desktop:{normal:{btrr:"0px",bblr:"0px",bbrr:"0px",btlr:"0px",radiusType:"none"}}},hasBoxShadow:{desktop:{normal:!1}},boxShadow:{desktop:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"4px",color:"rgba(18, 18, 18, 0.7)",angle:49}}},op:{desktop:"100%"}}}]}]},{tag:"Col",childrens:[{tag:"Coupon",settings:{iconSvg:'<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414808601461096"><path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32Zm-8,128H176V88a8,8,0,0,0-8-8H96V48H208Z"></path></svg>'}}]}]}]}]}]}];export{CouponPresets};

package/dist/esm/coupon/settings/configs/settings.js

@@ -0,0 +1,5 @@
+let CouponSettings=[{id:"setting",controls:[{id:"couponLayout",label:"Layout",type:"layout-selector",iconViewBox:"0 0 80 48",itemPerRow:2,itemSpacing:"large",default:"icon",options:[{label:"Text Only",value:"none",iconName:"gp-coupon-code-layout"},{label:"Icon",value:"icon",iconName:"gp-coupon-code-no-icon-layout"}]},{id:"copyContent",label:"copyContent",type:"input",default:"GEMPAGES30"},{id:"defaultLabel",label:"defaultLabel",type:"input",default:"Copy"},{id:"clickedLabel",label:"clickedLabel",type:"input",default:"Copied!"},{id:"translate",type:"input",default:"defaultLabel"},{id:"iconVisible",label:"Icon Visible",type:"toggle",default:!0},{id:"iconSvg",label:"SVG Icon",type:"icon",default:`<svg style="width: 100%; height: 100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
+            <path fill="currentColor" strokeLinecap="round" strokeLinejoin="round" fill="currentColor" d="M476 3.2L12.5 270.6c-18.1 10.4-15.8 35.6 2.2 43.2L121 358.4l287.3-253.2c5.5-4.9 13.3 2.6 8.6 8.3L176 407v80.5c0 23.6 28.5 32.9 42.5 15.8L282 426l124.6 52.2c14.2 6 30.4-2.9 33-18.2l72-432C515 7.8 493.3-6.8 476 3.2z" />
+          </svg>
+        `,placeholder:'E.g. <svg fill="currentColor"...'},{id:"iconAlign",label:"Icon Alignment",type:"segment",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left"},{label:"Right",value:"right",type:"align",tooltip:"Align right"}],default:"left"},{id:"shouldClearSpace",label:"",type:"toggle",default:!1},{id:"group-icon",type:"group",label:"Icon",controls:[{id:"iconSvg",label:"SVG icon",type:"icon",hide:!0,default:`<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508414779109605736">
+            <path fill="currentColor" strokelinecap="round" strokelinejoin="round" d="M233.21,56.31A12,12,0,0,0,224,52H66L60.53,21.85A12,12,0,0,0,48.73,12H24a12,12,0,0,0,0,24H38.71L63.62,173a28,28,0,0,0,4.07,10.21A32,32,0,1,0,123,196h34a32,32,0,1,0,31-24H91.17a4,4,0,0,1-3.93-3.28L84.92,156H196.1a28,28,0,0,0,27.55-23l12.16-66.86A12,12,0,0,0,233.21,56.31ZM100,204a8,8,0,1,1-8-8A8,8,0,0,1,100,204Zm88,8a8,8,0,1,1,8-8A8,8,0,0,1,188,212Zm12-83.28A4,4,0,0,1,196.1,132H80.56L70.38,76H209.62Z"></path></svg>`},{id:"iconAlign",label:"Icon Alignment",type:"segment",hide:!0,options:[{label:"Left",value:"left"},{label:"Right",value:"right"}],default:"left"}]},{id:"enableHoverEffect",type:"toggle",default:!0},{id:"enableActiveEffect",type:"toggle",default:!0}]},{id:"style",controls:[{id:"enableTextStyle",label:"",type:"toggle",default:!0},{id:"backgroundColorV2",type:"color-picker-v2",default:{normal:"brand",hover:"highlight",active:"#2C934E"},compoDefaultValue:{normal:"brand",hover:"highlight",active:"#2C934E"}},{id:"textColor",type:"color-picker-v2",label:"Text Color",default:{normal:"text-3"},state:{hover:!0,normal:!0,active:!0}},{id:"align",label:"Alignment",type:"segment",options:[{label:"Left",value:"left",type:"align"},{label:"Center",value:"center",type:"align"},{label:"Right",value:"right",type:"align"}],devices:{desktop:{default:"left"}}},{id:"typo",type:"typography-v2",label:"Typography",default:{type:"paragraph-1"},compoDefaultValue:{attrs:{color:"text-3"}},hiddenSetting:{textAlign:!0},ignoreReRender:!0},{id:"transform",label:"Text Transform",type:"select",options:[{value:"default",label:"None"},{value:"capitalize",label:"Capitalize"},{value:"uppercase",label:"Uppercase"},{value:"lowercase",label:"Lowercase"}],default:"default"},{id:"btnSpacing",label:"Inside space",type:"size",default:{type:"medium"},ignoreReRender:!0},{id:"iconSizeAuto",type:"toggle",label:"Icon Auto Size",default:!0},{id:"size",label:"Size Icon",type:"select",options:[{label:"Large",value:"1.2em"},{label:"Medium",value:"1em"},{label:"Small",value:"0.8em"}],devices:{desktop:{default:"1em"}}},{id:"iconDimension",type:"input:slider",useOnlyUnitInit:!0,isNumber:!0,label:"Size",hide:!0,min:0,max:100,step:1,units:["px","em","rem"],devices:{desktop:{default:"24px"}}},{id:"iconSpacing",type:"input:slider",units:["px"],step:1,max:40,devices:{desktop:{default:"8px"}},ignoreMax:!0},{id:"globalSize",type:"size-setting",devices:{desktop:{default:{width:"Auto",height:"Auto",padding:{type:"medium",top:"12px",bottom:"12px",left:"24px",right:"24px"}}}},hiddenSettings:["shape","gap"]},{id:"align",label:"Alignment",type:"segment",options:[{label:"Left",value:"left",type:"align",tooltip:"Align left"},{label:"Center",value:"center",type:"align",tooltip:"Align center"},{label:"Right",value:"right",type:"align",tooltip:"Align right"}],devices:{desktop:{default:"left"}}},{id:"borderBtnV2",type:"border-v2",compoDefaultValue:{normal:{border:"solid",color:"#121212",width:"1px",borderWidth:"1px"}},state:{hover:!0,normal:!0,active:!0}},{id:"roundedBtnV2",type:"corner-v2",compoDefaultValue:{normal:{btrr:"8px",bblr:"8px",bbrr:"8px",btlr:"8px",radiusType:"rounded"}},state:{hover:!0,normal:!0,active:!0}},{id:"boxShadowBtn",type:"shadow-v2",default:{normal:{}},compoDefaultValue:{normal:{type:"shadow-1",distance:"4px",blur:"4px",spread:"0px",color:"rgba(18, 18, 18, 0.2)",angle:45,enable:!0}}},{id:"hasBoxShadowBtn",type:"toggle",label:"Enable Button Shadow",default:{normal:!1}}]}];export{CouponSettings};

package/dist/esm/coupon/settings/configs/ui-v1.js

@@ -0,0 +1 @@
+let SettingUIV1=[{type:"group",label:{en:"Coupon code"},controls:[{type:"control",label:{en:"Copied code"},setting:{id:"copyContent"}}]},{type:"group",label:{en:"Content"},controls:[{type:"control",label:{en:"Default"},setting:{id:"defaultLabel"}},{type:"control",label:{en:"After click"},setting:{id:"clickedLabel"}}]},{type:"group",label:{en:"Layout"},controls:[{type:"control",setting:{id:"couponLayout"},layout:"vertical"}]},{type:"group",label:{en:"Icon"},condition:'couponLayout == "icon"',controls:[{type:"control",setting:{id:"iconSvg"},layout:"vertical"},{type:"control",label:{en:"Icon position"},setting:{id:"iconAlign"}},{type:"control",label:{en:"Spacing"},setting:{id:"iconSpacing"}}]},{type:"group",label:{en:"Size"},controls:[{type:"control",setting:{id:"globalSize"},layout:"vertical"}]},{type:"group",label:{en:"States"},options:{labelSpacing:"small"},controls:[{type:"tab",controls:[{type:"group",label:{en:"Normal"},controls:[{type:"control",label:{en:"Background color"},setting:{id:"backgroundColor",state:"normal"}},{type:"control",label:{en:"Text color"},setting:{id:"textColor",state:"normal"}},{type:"control",options:{labelPosition:"start"},label:{en:"Border"},setting:{id:"borderBtn",state:"normal"}},{type:"control",label:{en:"Corner"},setting:{id:"roundedBtn",state:"normal"}},{type:"control",label:{en:"Shadow"},setting:{id:"hasBoxShadowBtn",state:"normal"}},{condition:"hasBoxShadowBtn.normal == true",type:"control",layout:"vertical",setting:{id:"boxShadowBtn",state:"normal"}}]},{type:"group",label:{en:"Hover"},controls:[{type:"control",label:{en:"Background color"},setting:{id:"backgroundColor",state:"hover"}},{type:"control",label:{en:"Text color"},setting:{id:"textColor",state:"hover"}},{type:"control",options:{labelPosition:"start"},label:{en:"Border"},setting:{id:"borderBtn",state:"hover"}},{type:"control",label:{en:"Corner"},setting:{id:"roundedBtn",state:"hover"}},{type:"control",label:{en:"Shadow"},setting:{id:"hasBoxShadowBtn",state:"hover"}},{condition:"hasBoxShadowBtn.hover == true",type:"control",layout:"vertical",setting:{id:"boxShadowBtn",state:"hover"}}]},{type:"group",label:{en:"Clicked"},controls:[{type:"control",label:{en:"Background color"},setting:{id:"backgroundColor",state:"active"}},{type:"control",label:{en:"Text color"},setting:{id:"textColor",state:"active"}},{type:"control",options:{labelPosition:"start"},label:{en:"Border"},setting:{id:"borderBtn",state:"active"}},{type:"control",label:{en:"Corner"},setting:{id:"roundedBtn",state:"active"}},{type:"control",label:{en:"Shadow"},setting:{id:"hasBoxShadowBtn",state:"active"}},{condition:"hasBoxShadowBtn.active == true",type:"control",layout:"vertical",setting:{id:"boxShadowBtn",state:"active"}}]}]}]},{type:"group",label:{en:"Text"},controls:[{type:"control",layout:"vertical",setting:{id:"typo"}}]},{type:"control",label:{en:"Align"},condition:"globalSize.width !== '100%'",options:{label:"large"},setting:{id:"align"}}];export{SettingUIV1};

package/dist/esm/coupon/settings/configs/ui-v2.js

@@ -0,0 +1 @@
+let SettingUIV2=[{label:{en:"Layout"},controls:[{type:"control",setting:{id:"couponLayout"},layout:"vertical",controlChangeTrigger:{settings:[{condition:"couponLayout === 'icon'",source:["couponLayout","iconVisible"],action:{controlId:"iconVisible",groupType:"setting",controlType:"setting",newValue:!0}},{condition:"couponLayout === 'none'",source:["couponLayout","iconVisible"],action:{controlId:"iconVisible",groupType:"setting",controlType:"setting",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:{en:"Coupon code"},controls:[{type:"combo",label:{en:"Code"},iconName:"polaris-text-block",getValueFromSettingID:"copyContent",isHideClear:!0,compoDefaultValue:"GEMPAGES30",popoverLabel:{en:"Code"},controls:[{label:{en:"Content"},options:{fullWidth:!0},layout:"vertical",setting:{id:"copyContent"}}]}]},{label:{en:"Size"},controls:[{id:"Width",label:{en:"Width"},controlConfig:{id:"width",type:"dropdown:input",label:"Width",inputType:"number",units:["px","%"],hideUnit:!1,linkWithSetting:{name:"globalSize",field:"width"},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0},{label:"Full",value:"100%",showValue:!0}]},layout:"horizontal"},{id:"Height",label:{en:"Height"},controlConfig:{id:"height",type:"dropdown:input",label:"height",inputType:"number",units:["px"],hideUnit:!1,linkWithSetting:{name:"globalSize",field:"height"},displayOptions:[{label:"Fit content",value:"Auto",showValue:!0}]},layout:"horizontal"},{label:{en:"Padding"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"globalSize",field:"padding"},compoDefaultValue:{desktop:{default:{type:"custom",top:"12px",bottom:"12px",left:"24px",right:"24px"}}}}}]},{label:{en:"Background"},controls:[{label:{en:"Color"},setting:{id:"backgroundColorV2",state:"normal"}}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"borderBtnV2",state:"normal"}},{label:{en:"Corner"},setting:{id:"roundedBtnV2",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadowBtn",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadowBtn",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadowBtn.normal.enable === true",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"normal",newValue:!0}},{condition:"boxShadowBtn.normal.enable === false",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{controls:[{label:{en:"Icon"},setting:{id:"iconVisible"},options:{labelVariant:"primary",toggleStyle:"switch"}},{conditionDisplay:"iconVisible == true",type:"control",setting:{id:"iconSvg"},label:{en:"Icon"}},{conditionDisplay:"iconVisible == true",type:"control",label:{en:"Position"},setting:{id:"iconAlign"}},{conditionDisplay:"iconVisible == true",type:"control",label:{en:"Gap"},setting:{id:"iconSpacing"}}]},{controls:[{label:{en:"Text"},setting:{id:"enableTextStyle"},options:{labelVariant:"primary",toggleStyle:"switch"}},{type:"combo",label:{en:"Content"},iconName:"polaris-text-block",getValueFromSettingID:"defaultLabel",isHideClear:!0,conditionDisplay:"enableTextStyle == true",compoDefaultValue:"Copy",popoverLabel:{en:"Content"},controls:[{label:{en:"Content"},options:{fullWidth:!0},layout:"vertical",setting:{id:"defaultLabel"}}]},{type:"control",layout:"vertical",setting:{id:"typo"},conditionDisplay:"enableTextStyle == true",options:{updateFields:[{field:"attrs.color",settingId:"textColor",state:"normal"}]},controlChangeTrigger:{settings:[{action:{controlId:"textColor",valueFromField:"attrs.color",groupType:"style",controlType:"style",removeDevice:!0,state:"normal"}}],options:{noRecordHistory:!0}}}]},{label:{en:"Effect"},controls:[{label:{en:"Hover"},type:"combo",iconName:"polaris-check-hover",fixedValue:"Styled",setting:{id:"enableHoverEffect"},popoverLabel:{en:"Hover"},state:"hover",controls:[{type:"group",label:{en:"Background"},controls:[{label:{en:"Color"},setting:{id:"backgroundColorV2",state:"hover"}}]},{type:"group",label:{en:"Text"},controls:[{label:{en:"Color"},setting:{id:"textColor",state:"hover"},compoDefaultValue:{desktop:{default:{normal:"#121212"}}}}]},{type:"group",label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"borderBtnV2",state:"hover"}},{label:{en:"Corner"},setting:{id:"roundedBtnV2",state:"hover"}},{label:{en:"Shadow"},setting:{id:"boxShadowBtn",state:"hover"},options:{updateFields:[{field:"hover.enable",settingId:"hasBoxShadowBtn",state:"hover"}]},controlChangeTrigger:{settings:[{condition:"boxShadowBtn.hover.enable === true",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"hover",newValue:!0}},{condition:"boxShadowBtn.hover.enable === false",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"hover",newValue:!1}}],options:{noRecordHistory:!0}}},{label:{en:"Shadow"},setting:{id:"hasBoxShadowBtn",state:"hover"},conditionDisplay:"false"}]}]},{label:{en:"Clicked"},type:"combo",iconName:"polaris-check-clicked",fixedValue:"Styled",setting:{id:"enableActiveEffect"},popoverLabel:{en:"Clicked"},state:"active",controls:[{type:"group",label:{en:"Content"},controls:[{label:{en:"After click"},setting:{id:"clickedLabel"}}]},{type:"group",label:{en:"Background"},controls:[{label:{en:"Color"},setting:{id:"backgroundColorV2",state:"active"}}]},{type:"group",label:{en:"Text"},controls:[{label:{en:"Color"},setting:{id:"textColor",state:"active"}}]},{type:"group",label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"borderBtnV2",state:"active"}},{label:{en:"Corner"},setting:{id:"roundedBtnV2",state:"active"}},{label:{en:"Shadow"},setting:{id:"boxShadowBtn",state:"active"},options:{updateFields:[{field:"active.enable",settingId:"hasBoxShadowBtn",state:"active"}]},controlChangeTrigger:{settings:[{condition:"boxShadowBtn.active.enable === true",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"active",newValue:!0}},{condition:"boxShadowBtn.active.enable === false",source:["boxShadowBtn","hasBoxShadowBtn"],action:{controlId:"hasBoxShadowBtn",groupType:"style",controlType:"style",state:"active",newValue:!1}}],options:{noRecordHistory:!0}}},{label:{en:"Shadow"},setting:{id:"hasBoxShadowBtn",state:"active"},conditionDisplay:"false"}]}]}]},{conditionDisplay:"globalSize.width !== '100%'",controls:[{label:{en:"Align"},type:"control",setting:{id:"align"},options:{labelVariant:"primary",fullWidth:!0}}]}];export{SettingUIV2};

package/dist/esm/dialog/common/attrs.js

@@ -0,0 +1 @@
+let getAttr=({uid:t})=>({"data-id":t}),getAttrContainer=({uid:t})=>({"data-gp-dialog-id":t}),getAttrOverlay=()=>({"data-gp-dialog-overlay":""}),getAttrClose=()=>({"data-gp-dialog-close":""});export{getAttr,getAttrClose,getAttrContainer,getAttrOverlay};

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

@@ -0,0 +1 @@
+import{isTransparentColor as e}from"../../helpers.js";function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}let getContainClasses=e=>{let s="gp-dialog gp-bg-transparent gp-z-[999999]";return e&&(s+=` ${e}`),{...composeClasses(s)}},getBackdropClasses=e=>{let s="gp-fixed gp-inset-0 gp-z-50 gp-flex gp-overflow-y-auto gp-overflow-x-hidden gp-shadow-xl";return"center"===e&&(s+=" gp-items-center gp-justify-center"),"top"===e&&(s+=" gp-justify-center gp-items-start"),"top-right"===e&&(s+=" gp-justify-end gp-items-start"),"top-left"===e&&(s+=" gp-justify-start gp-items-start"),"bottom"===e&&(s+=" gp-items-end gp-justify-center"),"left"===e&&(s+=" gp-items-center gp-justify-start"),"right"===e&&(s+=" gp-items-center gp-justify-end"),"bottom-left"===e&&(s+=" gp-items-end gp-justify-start"),"bottom-right"===e&&(s+=" gp-items-end gp-justify-end"),{...composeClasses(s)}},getOverlayClasses=()=>({...composeClasses("gp-fixed gp-inset-0 gp-block gp-transition-all gp-duration-100")}),getDialogContentClasses=({setting:s,enableEffect:t,isILP:o})=>{let{effectType:g,background:n,closeButtonPosition:p}=s??{},a="gp-relative gp-max-h-full gp-max-w-full";return"fade"===g&&t&&(a+=" gp-animate-[fadeIn_0.4s_ease-in]"),"zoom"===g&&t&&(a+=" gp-animate-[zoomIn_0.3s_ease-in]"),"zoom-out"===g&&t&&(a+=" gp-animate-[zoomOut_0.3s_ease-in]"),"horizontal"===g&&t&&(a+=" gp-animate-[slideInLeft_0.3s_ease-in]"),"vertical"===g&&t&&(a+=" gp-animate-[slideInUp_0.3s_ease-in]"),"unfold"===g&&t&&(a+=" gp-animate-[unfold_0.3s_ease-in-out]"),"outside"!==p&&(a+=" gp-overflow-hidden"),e(n?.desktop?.color)||(a+=" gp-shadow-xl"),!t&&o&&(a+=" gp-animate-[fadeOut_0.2s_ease-out]"),{...composeClasses(a)}},getHeadContentClasses=()=>({...composeClasses("gp-inline-block gp-h-screen gp-align-middle")}),getButtonContentClasses=e=>{let s="gp-absolute gp-top-0 gp-right-0 gp-inline-flex gp-items-center gp-justify-center gp-outline-none focus-visible:gp-shadow-none focus-visible:gp-outline-none gp-overflow-hidden gp-z-1";return"outside"===e&&(s+=" gp-translate-x-1/2 -gp-translate-y-1/2 gp-shadow-md gp-z-[999999]"),{...composeClasses(s)}},getSvgContentClasses=()=>({...composeClasses("[&>svg]:!gp-w-auto [&>svg]:!gp-h-[var(--height-icon)]")}),getBodyContentClasses=()=>({...composeClasses("gp-h-full gp-w-full gp-overflow-y-auto gp-overflow-x-hidden !gp-max-h-screen")});export{getBackdropClasses,getBodyContentClasses,getButtonContentClasses,getContainClasses,getDialogContentClasses,getHeadContentClasses,getOverlayClasses,getSvgContentClasses};

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

@@ -0,0 +1 @@
+import{makeStyle as e}from"@gem-sdk/core";let getDisplayStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),pointerEventStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,l)=>({...t,[l.replace("--d","--pe")]:e?.[l]==="none"?"none":"auto"}),{}),getBorderStyle=e=>Object.keys(e??{}).filter(e=>["--bw","--bw-mobile","--bw-tablet","--bc","--bc-tablet","--bc-mobile","--b","--b-tablet","--b-mobile","--bs","--bs-tablet","--bs-mobile","--radius","--radius-tablet","--radius-mobile","--bblr","--bbrr","--btlr","--btrr","--bblr-tablet","--bbrr-tablet","--btlr-tablet","--btrr-tablet","--bblr-mobile","--bbrr-mobile","--btlr-mobile","--btrr-mobile"].includes(e)).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),getWrapperDialogStyle=e=>Object.keys(e??{}).filter(e=>e.startsWith("--mt")||e.startsWith("--mb")||e.startsWith("--ml")||e.startsWith("--mr")).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),getInnerStyle=e=>Object.keys(e??{}).filter(t=>!Object.keys(getWrapperDialogStyle(e)).includes(t)&&!Object.keys(getDisplayStyle(e)).includes(t)&&!Object.keys(getBorderStyle(e)).includes(t)).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),createDialogKey=(e="",t="")=>({id:`dialog:${e}:${t}`,time:`dialog:${e}:${t}:time`}),isShowModal=(e,t=0)=>{let l=e?new Date(Number(e)):new Date,r=Date.now()-l.getTime(),b=Math.abs(r/24/60/60/1e3);return b>=t},isMobile=e=>!!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(e),getPropertyByDevice=(e,t)=>"tablet"===t?e?.tablet??e?.desktop:"mobile"===t?e?.mobile??e?.tablet??e?.desktop:e?.desktop,heightStyle=(t,l)=>({...t?.desktop?e({h:"100%"}):l?.desktop?e({h:l.desktop}):e({minh:"300px"}),"--h-tablet":getPropertyByDevice(t,"tablet")?"100%":getPropertyByDevice(l,"tablet")??"300px","--h-mobile":getPropertyByDevice(t,"mobile")?"100%":getPropertyByDevice(l,"mobile")??"300px","--maxh":getPropertyByDevice(t,"desktop")?"100%":"","--maxh-tablet":getPropertyByDevice(t,"tablet")?"100%":"","--maxh-mobile":getPropertyByDevice(t,"mobile")?"100%":""}),removeHeightPercentForContent=e=>({...e,"--h":e["--h"]?.includes("%")?"100%":e["--h"],"--h-tablet":e["--h-tablet"]?.includes("%")?"100%":e["--h-tablet"],"--h-mobile":e["--h-mobile"]?.includes("%")?"100%":e["--h-mobile"]}),parseNumber=e=>{let t=parseFloat(e?.toString()??"0");return isNaN(t)?0:t};export{createDialogKey,getBorderStyle,getDisplayStyle,getInnerStyle,getPropertyByDevice,getWrapperDialogStyle,heightStyle,isMobile,isShowModal,parseNumber,pointerEventStyle,removeHeightPercentForContent};

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

@@ -0,0 +1 @@
+import{makeStyle as t,getGlobalColorResponsiveStyle as e,makeStyleResponsive as r,makeWidth as l,getResponsiveStylePadding as n,composeRadius as o,getStyleBackgroundByDevice as y,getGradientBgrStyleByDevice as i}from"@gem-sdk/core";import{pointerEventStyle as s,getDisplayStyle as S,getWrapperDialogStyle as u,getBorderStyle as g,heightStyle as m,getInnerStyle as p,removeHeightPercentForContent as a}from"./helpers.js";import"react/jsx-runtime";import"react";import{ELEMENT_Z_INDEX as c}from"../../common/const.js";import{getWidth as d}from"../../hero-banner/common/helpers.js";function filterTruthyStyles(t){return Object.fromEntries(Object.entries(t||{}).filter(([,t])=>!!t))}let getWrapperStyle=t=>{let e={"--d":t?.desktop?"contents":"none","--d-tablet":t?.tablet?"contents":"none","--d-mobile":t?.mobile?"contents":"none"};return filterTruthyStyles(e)},getContainStyle=()=>{let t={"z-index":c.DIALOG};return filterTruthyStyles(t)},getBackdropStyle=t=>{let e={...s(t)};return filterTruthyStyles(e)},getOverlayStyle=(r,l,n)=>{let o={...t({op:0==Number(r)?"0":(Number(r)??0)/100}),...e("bgc",{desktop:l}),...S(n)};return filterTruthyStyles(o)},getDialogContentStyle=({style:t,width:e,height:n,fullScreen:o})=>{let y={...u(t),...g(t),...S(t),...r("w",l(e,o)),...m(o,n)};return filterTruthyStyles(y)},getButtonContentStyle=t=>{let{btnBg:l,btnRounded:y,btnColor:i,btnPadding:s,btnWidth:S,btnHeight:u}=t??{},g=S?r("w",d(S)):{},m=u?r("h",d(u)):{},p={...g,...m,...e("c",{desktop:i}),...e("bgc",{desktop:l}),...n(s),...o({normal:y})};return filterTruthyStyles(p)},getSvgContentStyle=t=>{let e={};return t&&(e={"--height-icon":`${t}`}),filterTruthyStyles(e)},getBodyContentStyle=(t,e)=>{let{fullScreen:r,height:l,background:n}=t??{},o={...p(e),...a(m(r,l)),"border-radius":"inherit",...y(n),...i(n,{desktop:!0,tablet:!0,mobile:!0})};return filterTruthyStyles(o)};export{getBackdropStyle,getBodyContentStyle,getButtonContentStyle,getContainStyle,getDialogContentStyle,getOverlayStyle,getSvgContentStyle,getWrapperStyle};

package/dist/esm/dialog/components/Dialog.js

@@ -1,413 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useModalStore, useEditorMode, useInteraction, globalEvent, makeWidth, cls, makeStyle, getGlobalColorResponsiveStyle, makeStyleResponsive, composeRadius, getStyleBackgroundByDevice, isEmptyChildren, filterToolbarPreview } from '@gem-sdk/core';
-import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
-import { isShowModal, isMobile, advancedBorderStyle, heightStyle, removeHeightPercentForContent, inheritStyleBody, bodyDialogClass } from '../helpers/common.js';
-import { useScrollPercentage } from '../hooks/use-scroll-percentage.js';
-import ChildrenDroppable from '../../grid/components/ChildrenDroppable.js';
-import { ELEMENT_Z_INDEX } from '../../common/const.js';
-
-const parseNumber = (value)=>{
-    const numb = parseFloat(value?.toString() ?? '0');
-    if (isNaN(numb)) return 0;
-    return numb;
-};
-const createDialogKey = (uid = '', type = '')=>({
-        id: `dialog:${uid}:${type}`,
-        time: `dialog:${uid}:${type}:time`
-    });
-const Dialog = ({ setting, children, builderProps, builderAttrs, style })=>{
-    const { frequency = 3, triggerPercentage = 0, frequencyMode = 'once' } = setting ?? {};
-    const { dialogId, trigger, triggerTime, name, mobileTrigger, mobileTriggerTime } = setting ?? {};
-    const { fullScreen, width, height, position, effectType, background } = setting ?? {};
-    const { btnBg, btnColor, btnSize, iconSize, closeButtonPosition, btnRounded } = setting ?? {};
-    const { isOverlay, overlayColor, overlayOpacity, closeOnClickOutside } = setting ?? {};
-    const dialogInfo = useMemo(()=>createDialogKey(dialogId ?? builderProps?.uid, trigger), [
-        builderProps?.uid,
-        dialogId,
-        trigger
-    ]);
-    const activeId = useModalStore((s)=>s.activeId);
-    const setModalActive = useModalStore((s)=>s.setModalActive);
-    const clearModal = useModalStore((s)=>s.clearModal);
-    const mode = useEditorMode();
-    const timeoutRef = useRef();
-    const overlay = useRef(null);
-    const triggerScroll = useRef(false);
-    const opened = useRef(false);
-    const [isOpen, setIsOpen] = useState(false);
-    const percent = useScrollPercentage();
-    const forceOpen = activeId === builderProps?.uid;
-    const open = mode === 'edit' ? forceOpen : isOpen;
-    const enableEffect = open;
-    const { onListener, trigger: triggerInteraction, ref } = useInteraction();
-    const interactionListenerLoaded = useCallback((callback)=>{
-        //@ts-ignore
-        if (window.interactionLoaded) {
-            callback();
-            return;
-        }
-        window.addEventListener('gp:flow-actions-loaded', ()=>{
-            callback();
-        });
-    }, []);
-    const dispatchInteractionOpenPopup = useCallback(()=>{
-        interactionListenerLoaded(()=>{
-            triggerInteraction({
-                event: 'gp:popup-open',
-                selector: `[data-id="${builderProps?.uid}"`
-            });
-        });
-    }, [
-        interactionListenerLoaded,
-        triggerInteraction,
-        builderProps?.uid
-    ]);
-    const dispatchInteractionClosePopup = useCallback(()=>{
-        interactionListenerLoaded(()=>{
-            triggerInteraction({
-                event: 'gp:popup-close',
-                selector: `[data-id="${builderProps?.uid}"`
-            });
-        });
-    }, [
-        triggerInteraction,
-        builderProps?.uid,
-        interactionListenerLoaded
-    ]);
-    const openModal = useCallback(()=>{
-        localStorage.setItem(dialogInfo.time, `${Date.now()}`);
-        opened.current = true;
-        setIsOpen(true);
-        dispatchInteractionOpenPopup();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        dialogInfo.time
-    ]);
-    useEffect(()=>{
-        const triggerEventOpenDialog = (data)=>{
-            if (data?.popupUId == `#${builderProps?.uid}`) {
-                openModal();
-            }
-        };
-        globalEvent.subscribe('onOpenDialog', triggerEventOpenDialog);
-        return ()=>{
-            globalEvent.remove('onOpenDialog', triggerEventOpenDialog);
-        };
-    }, [
-        builderProps?.uid,
-        openModal
-    ]);
-    const closeModal = useCallback(()=>{
-        setIsOpen(false);
-        setModalActive();
-        clearModal();
-        dispatchInteractionClosePopup();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        setModalActive,
-        clearModal
-    ]);
-    const handleShowModal = useCallback(()=>{
-        const currentFrequency = localStorage.getItem(dialogInfo.time);
-        if (!currentFrequency) {
-            openModal();
-        } else {
-            switch(frequencyMode){
-                case 'once':
-                    break;
-                case 'after-period-time':
-                    {
-                        const diff = isShowModal(currentFrequency, frequency);
-                        if (diff) {
-                            openModal();
-                        }
-                        break;
-                    }
-                case 'every':
-                    {
-                        openModal();
-                        break;
-                    }
-            }
-        }
-    }, [
-        dialogInfo.time,
-        frequency,
-        openModal,
-        frequencyMode
-    ]);
-    const onMouseLeave = useCallback(()=>{
-        if (opened.current || mode === 'edit' || trigger !== 'show-when-about-exit') return;
-        handleShowModal();
-    }, [
-        handleShowModal,
-        mode,
-        trigger
-    ]);
-    useEffect(()=>{
-        const selector = `[data-id="${builderProps?.uid}"]`;
-        if (!onListener) {
-            return;
-        }
-        onListener({
-            event: 'gp:toggle-popup-open',
-            selector
-        }, ()=>{
-            openModal();
-        });
-        onListener({
-            event: 'gp:toggle-popup-close',
-            selector
-        }, ()=>{
-            closeModal();
-        });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        onListener
-    ]);
-    useEffect(()=>{
-        document.addEventListener('mouseleave', onMouseLeave);
-        return ()=>{
-            document.removeEventListener('mouseleave', onMouseLeave);
-        };
-    }, [
-        onMouseLeave
-    ]);
-    useEffect(()=>{
-        if (opened.current) return;
-        if (isMobile(navigator.userAgent) && trigger === 'show-when-about-exit' && mobileTrigger === 'timer') {
-            timeoutRef.current = setTimeout(()=>{
-                handleShowModal();
-            }, (mobileTriggerTime ?? 0) * 1000);
-            return ()=>{
-                clearTimeout(timeoutRef.current);
-            };
-        }
-    }, [
-        mobileTrigger,
-        mobileTriggerTime,
-        handleShowModal,
-        trigger
-    ]);
-    useEffect(()=>{
-        if (triggerScroll.current) return;
-        if (trigger === 'show-after-scroll') {
-            if (percent >= triggerPercentage) {
-                triggerScroll.current = true;
-                handleShowModal();
-            }
-        }
-    }, [
-        percent,
-        triggerPercentage,
-        handleShowModal,
-        trigger
-    ]);
-    const handleClickOverlay = useCallback((e)=>{
-        const isClickOutside = e.target === overlay.current;
-        if (closeOnClickOutside && isClickOutside) {
-            closeModal();
-        }
-    }, [
-        closeModal,
-        closeOnClickOutside
-    ]);
-    useEffect(()=>{
-        switch(trigger){
-            case 'show-on-page-load':
-                handleShowModal();
-                break;
-            case 'show-after-time':
-                {
-                    timeoutRef.current = setTimeout(()=>{
-                        handleShowModal();
-                    }, parseNumber(triggerTime) * 1000);
-                    break;
-                }
-        }
-        return ()=>{
-            clearTimeout(timeoutRef.current);
-        };
-    }, [
-        handleShowModal,
-        trigger,
-        triggerTime
-    ]);
-    const w = makeWidth(width, fullScreen);
-    const displayStyle = useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>[
-                '--d',
-                '--d-mobile',
-                '--d-tablet'
-            ].includes(key)).reduce((curr, key)=>({
-                ...curr,
-                [key]: style?.[key]
-            }), {});
-    }, [
-        style
-    ]);
-    const borderStyle = useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>advancedBorderStyle.includes(key)).reduce((curr, key)=>({
-                ...curr,
-                [key]: style?.[key]
-            }), {});
-    }, [
-        style
-    ]);
-    const wrapperStyle = useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>key.startsWith('--mt') || key.startsWith('--mb') || key.startsWith('--ml') || key.startsWith('--mr')).reduce((curr, key)=>({
-                ...curr,
-                [key]: style?.[key]
-            }), {});
-    }, [
-        style
-    ]);
-    const innerStyle = useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>!Object.keys(wrapperStyle).includes(key) && !Object.keys(displayStyle).includes(key) && !Object.keys(borderStyle).includes(key)).reduce((curr, key)=>({
-                ...curr,
-                [key]: style?.[key]
-            }), {});
-    }, [
-        style,
-        wrapperStyle,
-        displayStyle,
-        borderStyle
-    ]);
-    const pointerEventStyle = useMemo(()=>{
-        return Object.keys(style ?? {}).filter((key)=>[
-                '--d',
-                '--d-mobile',
-                '--d-tablet'
-            ].includes(key)).reduce((curr, key)=>({
-                ...curr,
-                [key.replace('--d', '--pe')]: style?.[key] === 'none' ? 'none' : 'auto'
-            }), {});
-    }, [
-        style
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        style: displayStyle,
-        children: (open || mode !== 'edit') && /*#__PURE__*/ jsx("dialog", {
-            ref: ref,
-            "data-id": builderProps?.uid,
-            open: open,
-            className: "gp-dialog gp-bg-transparent",
-            "aria-label": name,
-            style: {
-                zIndex: ELEMENT_Z_INDEX.DIALOG
-            },
-            children: /*#__PURE__*/ jsxs("div", {
-                "aria-label": "Backdrop",
-                className: cls('gp-fixed gp-inset-0 gp-z-50 gp-flex gp-overflow-y-auto gp-overflow-x-hidden', {
-                    'gp-items-center gp-justify-center': position === 'center',
-                    'gp-items-start gp-justify-center': position === 'top',
-                    'gp-items-start gp-justify-end': position === 'top-right',
-                    'gp-items-start gp-justify-start': position === 'top-left',
-                    'gp-items-end gp-justify-center': position === 'bottom',
-                    'gp-items-center gp-justify-start': position === 'left',
-                    'gp-items-center gp-justify-end': position === 'right',
-                    'gp-items-end gp-justify-start': position === 'bottom-left',
-                    'gp-items-end gp-justify-end': position === 'bottom-right'
-                }),
-                style: pointerEventStyle,
-                children: [
-                    isOverlay && /*#__PURE__*/ jsx("div", {
-                        ref: overlay,
-                        className: "gp-fixed gp-inset-0 gp-block gp-transition-all gp-duration-100",
-                        style: {
-                            ...makeStyle({
-                                op: (overlayOpacity ?? 0) / 100
-                            }),
-                            ...getGlobalColorResponsiveStyle('bgc', {
-                                desktop: overlayColor
-                            }),
-                            ...displayStyle
-                        },
-                        onClick: handleClickOverlay,
-                        "aria-hidden": true
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        className: "gp-inline-block gp-h-screen gp-align-middle"
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        ...builderAttrs,
-                        role: "dialog",
-                        "aria-label": "Dialog content",
-                        className: cls('gp-relative gp-max-h-full gp-max-w-full', {
-                            'gp-animate-[fadeIn_0.4s_ease-in]': effectType === 'fade' && enableEffect,
-                            'gp-animate-[zoomIn_0.3s_ease-in]': effectType === 'zoom' && enableEffect,
-                            'gp-animate-[zoomOut_0.3s_ease-in]': effectType === 'zoom-out' && enableEffect,
-                            'gp-animate-[slideInLeft_0.3s_ease-in]': effectType === 'horizontal' && enableEffect,
-                            'gp-animate-[slideInUp_0.3s_ease-in]': effectType === 'vertical' && enableEffect,
-                            'gp-animate-[unfold_0.3s_ease-in-out]': effectType === 'unfold' && enableEffect,
-                            'gp-animate-[fadeOut_0.2s_ease-out]': !open && mode !== 'edit',
-                            'gp-overflow-hidden': closeButtonPosition !== 'outside'
-                        }),
-                        style: {
-                            ...wrapperStyle,
-                            ...displayStyle,
-                            ...borderStyle,
-                            ...makeStyleResponsive('w', w),
-                            ...heightStyle(fullScreen, height)
-                        },
-                        children: [
-                            /*#__PURE__*/ jsx("button", {
-                                onClick: closeModal,
-                                tabIndex: -1,
-                                className: cls('gp-absolute gp-right-0 gp-top-0 gp-z-[1] gp-inline-flex gp-items-center gp-justify-center gp-outline-none focus-visible:gp-shadow-none focus-visible:gp-outline-none', {
-                                    '-gp-translate-y-1/2 gp-translate-x-1/2 gp-shadow-md gp-z-[99]': closeButtonPosition === 'outside'
-                                }),
-                                style: {
-                                    ...makeStyle({
-                                        w: `${parseInt(btnSize.toString())}px`,
-                                        h: `${parseInt(btnSize.toString())}px`
-                                    }),
-                                    ...getGlobalColorResponsiveStyle('c', {
-                                        desktop: btnColor
-                                    }),
-                                    ...getGlobalColorResponsiveStyle('bgc', {
-                                        desktop: btnBg
-                                    }),
-                                    ...composeRadius({
-                                        normal: btnRounded
-                                    })
-                                },
-                                children: /*#__PURE__*/ jsx("svg", {
-                                    viewBox: "0 0 12 12",
-                                    fill: "currentColor",
-                                    style: {
-                                        ...makeStyle({
-                                            w: iconSize,
-                                            h: iconSize
-                                        })
-                                    },
-                                    children: /*#__PURE__*/ jsx("path", {
-                                        d: "M7.1,6l4.5,4.5l-1.1,1.1L6,7.1l-4.5,4.5l-1.1-1.1L4.9,6L0.5,1.5l1.1-1.1L6,4.9l4.5-4.5l1.1,1.1L7.1,6z"
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ jsx("div", {
-                                style: {
-                                    ...innerStyle,
-                                    ...removeHeightPercentForContent(heightStyle(fullScreen, height)),
-                                    ...inheritStyleBody,
-                                    ...getStyleBackgroundByDevice(background, {
-                                        ignoreBackgroundImage: true,
-                                        ignoreBackgroundImageProperties: true,
-                                        ignoreBgAttachment: true
-                                    })
-                                },
-                                "aria-label": "Dialog body",
-                                className: bodyDialogClass,
-                                children: isEmptyChildren(children) ? /*#__PURE__*/ jsx(ChildrenDroppable, {}) : filterToolbarPreview(children)
-                            }),
-                            filterToolbarPreview(children, true)
-                        ]
-                    })
-                ]
-            })
-        })
-    });
-};
-
-export { Dialog as default };
+'use client';
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useEditorMode as o,isEmptyChildren as s,filterToolbarPreview as t}from"@gem-sdk/core";import a from"../../grid/components/ChildrenDroppable.js";import{createAttr as i,createStyle as r,createClass as m,If as n}from"@gem-sdk/system";import{getAttr as c,getAttrContainer as d,getAttrOverlay as p,getAttrClose as f}from"../common/attrs.js";import{getWrapperStyle as g,getContainStyle as y,getBackdropStyle as u,getOverlayStyle as b,getDialogContentStyle as h,getButtonContentStyle as v,getSvgContentStyle as j,getBodyContentStyle as N}from"../common/styles.js";import{getContainClasses as k,getBackdropClasses as C,getOverlayClasses as D,getDialogContentClasses as L,getHeadContentClasses as x,getButtonContentClasses as B,getSvgContentClasses as I,getBodyContentClasses as S}from"../common/classes.js";import w from"../../button/components/ButtonIcon.js";import{useDialog as z}from"../hooks/useDialog.js";let Dialog=E=>{let{setting:M,children:q,builderProps:A,style:F,advanced:G,builderAttrs:H}=E,J=G?.d,{name:K,fullScreen:O,width:P,height:Q,position:R,overlayColor:T,overlayOpacity:U,iconSize:V,closeButtonPosition:W,iconSvg:X}=M??{},Y=o(),{ref:Z,overlay:$,handleClickOverlay:_,closeModal:ee,open:el,dialogId:eo}=z(M,A,"edit"===Y),es="edit"!==Y,et=i({...c({uid:A?.uid||""})}),ea=r({...g(J)}),ei=m({...k(G?.cssClass)}),er=i({...d({uid:eo||""})}),em=r({...y()}),en=m({...C(R)}),ec=r({...u(F)}),ed=i({...p()}),ep=m({...D()}),ef=r({...b(U,T,F)}),eg=r({...h({style:F,width:P,height:Q,fullScreen:O})}),ey=m({...L({setting:M,enableEffect:el,isILP:es})}),eu=i({...f()}),eb=m({...x()}),eh=r({...v(M)}),ev=m({...B(W)}),ej=r({...j(V)}),eN=m({...I()}),ek=r({...N(M,F)}),eC=m({...S()});return e("div",{...et,style:ea,children:(el||"edit"!==Y)&&e("dialog",{ref:Z,open:el,"aria-label":K,...er,className:ei,style:em,children:l("div",{"aria-label":"Backdrop",className:en,style:ec,children:[n(!!T,e("div",{ref:$,...ed,className:ep,style:ef,onClick:_,"aria-hidden":!0})),e("span",{className:eb}),l("div",{role:"dialog","aria-label":"Dialog content",...H,className:ey,style:eg,children:[e("button",{...eu,type:"button",tabIndex:-1,className:ev,style:eh,onClick:ee,children:e(w,{iconSvg:X??`<svg viewBox="0 0 12 12" fill="currentColor" style={svgContentStyle}>
+                  <path d="M7.1,6l4.5,4.5l-1.1,1.1L6,7.1l-4.5,4.5l-1.1-1.1L4.9,6L0.5,1.5l1.1-1.1L6,4.9l4.5-4.5l1.1,1.1L7.1,6z"></path>
+                </svg>`,styles:ej,classes:eN})}),e("div",{"aria-label":"Dialog body",style:ek,className:eC,children:s(q)?e(a,{}):t(q)}),t(q,!0)]})]})})})};export{Dialog as default};