@ikas/popup-renderer 1.0.245 → 1.0.247

package/build/popup-renderer/components/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";import{PopupTypeEnum as o,PopupPositonEnum as i}from"../models/modal/index.js";import n from"../assets/x-close.js";import{CloseButtonPositionTypeEnum as r,CloseIconTypeEnum as l,CloseButtonDisplayTypeEnum as s}from"../models/modal/close-settings/index.js";import{VisibilityConditionEnum as d}from"../models/modal/teaser/index.js";import{PopupElementTypeEnum as a,ComponentVerticalAlignmentEnum as c}from"../models/modal/step/elements/base/index.js";import m from"./text-element-renderer/index.js";import p from"./button-element-renderer/index.js";import u from"./space-element-renderer/index.js";import f from"./divider-element-renderer/index.js";import v from"./social-element-renderer/index.js";import x from"./image-element-renderer/index.js";import P from"./image-column-element-renderer/index.js";import E from"./product-list-renderer/index.js";import g from"./form-element-renderer/index.js";import{ImageColumnPositionEnum as T,MobileImageColumnPositionEnum as b}from"../models/modal/step/elements/image-column/index.js";import{ButtonBorderStyle as y}from"../models/modal/background-settings/index.js";var _=t((function(t){var _,I,O,h,C,S,M,A,w,D,R=t.popup,k=t.dynamicData,N=t.dashboardComponents,L=t.previewMode,j=t.sfProps,B=t.isMobile,U=e.useState(!1),H=U[0],W=U[1],F=e.useState(!1),V=F[0],G=F[1],z=R.modal,K=z.teaser,X=!!z.selectedStep.isTeaser,Y=z.selectedStep.elements.find((function(e){return e.type===a.IMAGE_COLUMN})),q=X?K.backgroundSettings:z.backgroundSettings,J=X?K.windowSettings:z.windowSettings,Q=X?K.closeSettings:z.closeSettings,Z=q.allowScrollingWhenPopupOpen,$=R.isPreviewMode||L,ee=!!$||z.isVisible;e.useEffect((function(){return document.body.style.overflow=ee&&!Z?"hidden":"auto",function(){document.body.style.overflow="auto"}}),[ee,Z]);var te=q.overlay,oe=q.border,ie="center",ne="center";switch(X?o.POPUP:z.type){case o.POPUP:var re=X?K.position:z.position;re===i.POPUP_TOP_LEFT?(ie="flex-start",ne="flex-start"):re===i.POPUP_TOP_CENTER?(ie="center",ne="flex-start"):re===i.POPUP_TOP_RIGHT?(ie="flex-end",ne="flex-start"):re===i.POPUP_MIDDLE_LEFT?(ie="flex-start",ne="center"):re===i.POPUP_MIDDLE_CENTER?(ie="center",ne="center"):re===i.POPUP_MIDDLE_RIGHT?(ie="flex-end",ne="center"):re===i.POPUP_BOTTOM_LEFT?(ie="flex-start",ne="flex-end"):re===i.POPUP_BOTTOM_CENTER?(ie="center",ne="flex-end"):re===i.POPUP_BOTTOM_RIGHT&&(ie="flex-end",ne="flex-end");break;case o.DRAWER:z.position===i.DRAWER_LEFT?(ie="flex-start",ne="center"):z.position===i.DRAWER_RIGHT&&(ie="flex-end",ne="center");break;case o.NOTIFICATION_BAR:z.position===i.NOTIFICATION_BAR_UP?(ie="center",ne="flex-start"):z.position===i.NOTIFICATION_BAR_DOWN&&(ie="center",ne="flex-end")}var le=e.useMemo((function(){return 2147483644}),[]),se=e.useMemo((function(){return le+1}),[]),de=e.useMemo((function(){return se+1}),[]),ae=e.useMemo((function(){return de+1}),[]),ce={position:"fixed",display:"flex",justifyContent:ie,alignItems:ne,top:0,left:0,right:0,bottom:0,zIndex:le,overflow:"hidden",padding:"".concat(J.outerVerticalPadding,"px ").concat(J.outerHorizontalPadding,"px"),opacity:ee?1:0,visibility:ee?"visible":"hidden",transition:"opacity 0.3s ease, visibility 0.3s ease"},me={position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:se,backgroundColor:te?te.bgColor:"",opacity:te?(te.bgOpacity||100)/100:void 0},pe={position:"relative",zIndex:de,backgroundColor:q.bgColor,border:oe?"".concat(oe.borderWidth,"px ").concat(oe.borderStyle," ").concat(oe.borderColor):"",borderRadius:"".concat(J.borderRadius,"px"),maxWidth:"100%",maxHeight:"100%",width:J.takeFullWidth?"100%":void 0,minHeight:J.minHeight,height:J.takeFullHeight?"100%":void 0,boxShadow:q.shadow?"0 0 10px ".concat(q.shadow.color):"",overflow:"auto",opacity:ee&&!V?1:0,visibility:ee?"visible":"hidden",transition:"opacity 0.15s ease, visibility 0.3s ease"},ue="";switch(null==Y?void 0:Y.verticalAlignment){case c.BOTTOM:ue="flex-end";break;case c.MIDDLE:ue="center";break;case c.TOP:ue="flex-start"}var fe=Y?Y.imagePosition===T.LEFT_ALIGN?"row-reverse":"row":"",ve=Y?Y.mobilePosition===b.TOP?"column-reverse":"column":"",xe={display:"flex",flexDirection:Y?B?ve:fe:"column",overflow:"hidden"},Pe={width:J.takeFullWidth?"100%":J.maxWidth,maxWidth:"100%",overflow:"auto",display:"flex",flexDirection:"column",justifyContent:ue,padding:"".concat(J.innerVerticalPadding,"px ").concat(J.innerHorizontalPadding,"px")},Ee={position:Q.closeButtonPositionType===r.TAKE_SPACE?"relative":"absolute",float:Q.closeButtonPositionType===r.TAKE_SPACE?"right":"none",top:8,right:8,zIndex:ae},ge="".concat(null!==(I=null===(_=Q.iconSettings)||void 0===_?void 0:_.borderRadius)&&void 0!==I?I:50,"px"),Te=null!==(h=null===(O=Q.iconSettings)||void 0===O?void 0:O.borderWidth)&&void 0!==h?h:0,be=(null===(C=Q.iconSettings)||void 0===C?void 0:C.borderColor)||(null===(S=Q.iconSettings)||void 0===S?void 0:S.color)||"",ye=(null===(M=Q.iconSettings)||void 0===M?void 0:M.borderStyle)||y.SOLID,_e={position:"sticky",padding:9,marginLeft:Q.closeButtonPositionType===r.TAKE_SPACE?"14px":void 0,display:"flex",justifyContent:"center",alignItems:"center",border:(null===(A=Q.iconSettings)||void 0===A?void 0:A.type)===l.WITH_BORDER?"".concat(Te,"px ").concat(ye," ").concat(be):"",borderRadius:ge,backgroundColor:null===(w=Q.iconSettings)||void 0===w?void 0:w.backgroundColor},Ie={color:null===(D=Q.iconSettings)||void 0===D?void 0:D.color,cursor:"pointer",width:14,height:14},Oe=function(t){var o=t.type,i=N&&N[o]&&N[o].length?N[o][0]:null,n=i&&R.marketingPopupViewModel?e.createElement(i,{element:t,marketingPopupViewModel:R.marketingPopupViewModel}):void 0;switch(o){case a.TEXT:return e.createElement(m,{element:t});case a.IMAGE:return e.createElement(x,{element:t,popup:R,editModeChildren:n});case a.IMAGE_COLUMN:return B&&Y.mobilePosition===b.HIDE?null:e.createElement(P,{element:t,popup:R,editModeChildren:n,isMobile:B});case a.BUTTON:return e.createElement(p,{element:t,onClose:he,isStandaloneButtonComponent:!0});case a.DIVIDER:return e.createElement(f,{element:t});case a.FORM:return e.createElement(g,{element:t,popup:R,isPreviewMode:!!$,sfProps:j,setIsCustomerSaved:W});case a.PRODUCT_LIST:return e.createElement(E,{element:t,products:k.products[t.id],popup:R,editModeChildren:n,isPreviewMode:!!$,sfProps:j,onClose:he});case a.SOCIAL_MEDIA:return e.createElement(v,{element:t,popup:R,editModeChildren:n});case a.SPACE:return e.createElement(u,{element:t})}},he=function(e){if(!$&&z.isVisible){var t=H||e;if(!X&&K.isActive&&(K.visibleCondition===d.VISIBLE_AT_THE_END||K.visibleCondition===d.VISIBLE_AT_FIRST_AND_AT_THE_END))return G(!0),setTimeout((function(){z.selectedStep=K.step,G(!1)}),150),void W(!1);z.isVisible=!1,j&&j.onModalClose(t),W(!1)}};return e.createElement("div",{className:"ikas-popup-default-styles",id:"ikas-popup-container",style:ce},e.createElement("div",{style:pe},Q.closeButtonDisplayType!==s.ALWAYS_HIDDEN&&e.createElement("div",{style:Ee,onClick:function(){return he()}},e.createElement("div",{style:_e,className:Q.closeButtonDisplayType===s.VISIBLE_ON_HOVER?"visible-on-hover":""},e.createElement(n,{style:Ie}))),e.createElement("div",{style:xe,onClick:function(e){X&&(G(!0),setTimeout((function(){z.selectedStep=z.steps[0],G(!1)}),150))}},e.createElement("div",{style:Pe},z.selectedStep.elements.filter((function(e){return e.type!==a.IMAGE_COLUMN})).slice().sort((function(e,t){return e.order-t.order})).map((function(e){return Oe(e)}))),Y&&Oe(Y))),e.createElement("div",{style:me,onClick:function(){Q.closeOnlyWithCloseButton||he()}}))}));export{_ as default};
+import e from"react";import{observer as t}from"mobx-react";import{PopupTypeEnum as o,PopupPositonEnum as n}from"../models/modal/index.js";import i from"../assets/x-close.js";import{CloseButtonPositionTypeEnum as r,CloseIconTypeEnum as l,CloseButtonDisplayTypeEnum as s}from"../models/modal/close-settings/index.js";import{VisibilityConditionEnum as d}from"../models/modal/teaser/index.js";import{PopupElementTypeEnum as a,ComponentVerticalAlignmentEnum as c}from"../models/modal/step/elements/base/index.js";import m from"./text-element-renderer/index.js";import u from"./button-element-renderer/index.js";import p from"./space-element-renderer/index.js";import f from"./divider-element-renderer/index.js";import v from"./social-element-renderer/index.js";import E from"./image-element-renderer/index.js";import x from"./image-column-element-renderer/index.js";import P from"./product-list-renderer/index.js";import g from"./form-element-renderer/index.js";import{ImageColumnPositionEnum as T,MobileImageColumnPositionEnum as b}from"../models/modal/step/elements/image-column/index.js";import{ButtonBorderStyle as y}from"../models/modal/background-settings/index.js";var O=t((function(t){var O,_,I,h,C,S,M,w,A,D,R=t.popup,k=t.dynamicData,L=t.dashboardComponents,N=t.previewMode,B=t.sfProps,j=t.isMobile,U=e.useState(!1),W=U[0],H=U[1],F=e.useState(!1),V=F[0],G=F[1],z=e.useRef(null),K=R.modal,X=K.teaser,Y=!!K.selectedStep.isTeaser,q=K.selectedStep.elements.find((function(e){return e.type===a.IMAGE_COLUMN})),J=Y?X.backgroundSettings:K.backgroundSettings,Q=Y?X.windowSettings:K.windowSettings,Z=Y?X.closeSettings:K.closeSettings,$=J.allowScrollingWhenPopupOpen,ee=R.isPreviewMode||N,te=!!ee||K.isVisible;e.useEffect((function(){return document.body.style.overflow=te&&!$?"hidden":"auto",function(){document.body.style.overflow="auto"}}),[te,$]);var oe=J.overlay,ne=J.border,ie="center",re="center";switch(Y?o.POPUP:K.type){case o.POPUP:var le=Y?X.position:K.position;le===n.POPUP_TOP_LEFT?(ie="flex-start",re="flex-start"):le===n.POPUP_TOP_CENTER?(ie="center",re="flex-start"):le===n.POPUP_TOP_RIGHT?(ie="flex-end",re="flex-start"):le===n.POPUP_MIDDLE_LEFT?(ie="flex-start",re="center"):le===n.POPUP_MIDDLE_CENTER?(ie="center",re="center"):le===n.POPUP_MIDDLE_RIGHT?(ie="flex-end",re="center"):le===n.POPUP_BOTTOM_LEFT?(ie="flex-start",re="flex-end"):le===n.POPUP_BOTTOM_CENTER?(ie="center",re="flex-end"):le===n.POPUP_BOTTOM_RIGHT&&(ie="flex-end",re="flex-end");break;case o.DRAWER:K.position===n.DRAWER_LEFT?(ie="flex-start",re="center"):K.position===n.DRAWER_RIGHT&&(ie="flex-end",re="center");break;case o.NOTIFICATION_BAR:K.position===n.NOTIFICATION_BAR_UP?(ie="center",re="flex-start"):K.position===n.NOTIFICATION_BAR_DOWN&&(ie="center",re="flex-end")}var se=e.useMemo((function(){return 2147483644}),[]),de=e.useMemo((function(){return se+1}),[]),ae=e.useMemo((function(){return de+1}),[]),ce=e.useMemo((function(){return ae+1}),[]),me={position:"fixed",display:"flex",justifyContent:ie,alignItems:re,top:0,left:0,right:0,bottom:0,zIndex:se,overflow:"hidden",padding:"".concat(Q.outerVerticalPadding,"px ").concat(Q.outerHorizontalPadding,"px"),opacity:te?1:0,visibility:te?"visible":"hidden",transition:"opacity 0.3s ease, visibility 0.3s ease",pointerEvents:Y?"none":void 0},ue={position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:de,backgroundColor:oe?oe.bgColor:"",opacity:oe?(oe.bgOpacity||100)/100:void 0,pointerEvents:Y?"none":void 0},pe={position:"relative",zIndex:ae,pointerEvents:Y?"auto":void 0,backgroundColor:J.bgColor,border:ne?"".concat(ne.borderWidth,"px ").concat(ne.borderStyle," ").concat(ne.borderColor):"",borderRadius:"".concat(Q.borderRadius,"px"),maxWidth:"100%",maxHeight:"100%",width:Q.takeFullWidth?"100%":void 0,minHeight:Q.minHeight,height:Q.takeFullHeight?"100%":void 0,boxShadow:J.shadow?"0 0 10px ".concat(J.shadow.color):"",overflow:"auto",opacity:te&&!V?1:0,visibility:te?"visible":"hidden",transition:"opacity 0.15s ease, visibility 0.3s ease"},fe="";switch(null==q?void 0:q.verticalAlignment){case c.BOTTOM:fe="flex-end";break;case c.MIDDLE:fe="center";break;case c.TOP:fe="flex-start"}var ve=q?q.imagePosition===T.LEFT_ALIGN?"row-reverse":"row":"",Ee=q?q.mobilePosition===b.TOP?"column-reverse":"column":"",xe={display:"flex",flexDirection:q?j?Ee:ve:"column",overflow:"hidden"},Pe={width:Q.takeFullWidth?"100%":Q.maxWidth,maxWidth:"100%",overflow:"auto",display:"flex",flexDirection:"column",justifyContent:fe,padding:"".concat(Q.innerVerticalPadding,"px ").concat(Q.innerHorizontalPadding,"px")},ge={position:Z.closeButtonPositionType===r.TAKE_SPACE?"relative":"absolute",float:Z.closeButtonPositionType===r.TAKE_SPACE?"right":"none",top:8,right:8,zIndex:ce},Te="".concat(null!==(_=null===(O=Z.iconSettings)||void 0===O?void 0:O.borderRadius)&&void 0!==_?_:50,"px"),be=null!==(h=null===(I=Z.iconSettings)||void 0===I?void 0:I.borderWidth)&&void 0!==h?h:0,ye=(null===(C=Z.iconSettings)||void 0===C?void 0:C.borderColor)||(null===(S=Z.iconSettings)||void 0===S?void 0:S.color)||"",Oe=(null===(M=Z.iconSettings)||void 0===M?void 0:M.borderStyle)||y.SOLID,_e={position:"sticky",padding:9,marginLeft:Z.closeButtonPositionType===r.TAKE_SPACE?"14px":void 0,display:"flex",justifyContent:"center",alignItems:"center",border:(null===(w=Z.iconSettings)||void 0===w?void 0:w.type)===l.WITH_BORDER?"".concat(be,"px ").concat(Oe," ").concat(ye):"",borderRadius:Te,backgroundColor:null===(A=Z.iconSettings)||void 0===A?void 0:A.backgroundColor},Ie={color:null===(D=Z.iconSettings)||void 0===D?void 0:D.color,cursor:"pointer",width:14,height:14},he=function(t){var o=t.type,n=L&&L[o]&&L[o].length?L[o][0]:null,i=n&&R.marketingPopupViewModel?e.createElement(n,{element:t,marketingPopupViewModel:R.marketingPopupViewModel}):void 0;switch(o){case a.TEXT:return e.createElement(m,{element:t});case a.IMAGE:return e.createElement(E,{element:t,popup:R,editModeChildren:i});case a.IMAGE_COLUMN:return j&&q.mobilePosition===b.HIDE?null:e.createElement(x,{element:t,popup:R,editModeChildren:i,isMobile:j});case a.BUTTON:return e.createElement(u,{element:t,onClose:Ce,isStandaloneButtonComponent:!0});case a.DIVIDER:return e.createElement(f,{element:t});case a.FORM:return e.createElement(g,{element:t,popup:R,isPreviewMode:!!ee,sfProps:B,setIsCustomerSaved:H});case a.PRODUCT_LIST:return e.createElement(P,{element:t,products:k.products[t.id],popup:R,editModeChildren:i,isPreviewMode:!!ee,sfProps:B,onClose:Ce});case a.SOCIAL_MEDIA:return e.createElement(v,{element:t,popup:R,editModeChildren:i});case a.SPACE:return e.createElement(p,{element:t})}},Ce=function(e){if(!ee&&K.isVisible){var t=W||e;if(!Y&&X.isActive&&(X.visibleCondition===d.VISIBLE_AT_THE_END||X.visibleCondition===d.VISIBLE_AT_FIRST_AND_AT_THE_END))return G(!0),setTimeout((function(){K.selectedStep=X.step,G(!1)}),150),void H(!1);K.isVisible=!1,B&&B.onModalClose(t),H(!1)}};return e.useEffect((function(){if(Y&&te&&!Z.closeOnlyWithCloseButton){var e=function(e){var t=e.target;t&&(z.current&&z.current.contains(t)||Ce())};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}}),[Y,te,Z.closeOnlyWithCloseButton]),e.createElement("div",{className:"ikas-popup-default-styles",id:"ikas-popup-container",style:me},e.createElement("div",{ref:z,style:pe},Z.closeButtonDisplayType!==s.ALWAYS_HIDDEN&&e.createElement("div",{style:ge,onClick:function(){return Ce()}},e.createElement("div",{style:_e,className:Z.closeButtonDisplayType===s.VISIBLE_ON_HOVER?"visible-on-hover":""},e.createElement(i,{style:Ie}))),e.createElement("div",{style:xe,onClick:function(e){Y&&(G(!0),setTimeout((function(){K.selectedStep=K.steps[0],G(!1)}),150))}},e.createElement("div",{style:Pe},K.selectedStep.elements.filter((function(e){return e.type!==a.IMAGE_COLUMN})).slice().sort((function(e,t){return e.order-t.order})).map((function(e){return he(e)}))),q&&he(q))),e.createElement("div",{style:ue,onClick:function(){Z.closeOnlyWithCloseButton||Ce()}}))}));export{O as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ikas/popup-renderer",
-  "version": "1.0.245",
+  "version": "1.0.247",
   "description": "",
   "author": "ucy",
   "license": "ISC",