@ikas/popup-renderer 1.0.228 → 1.0.229

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

package/build/popup-renderer/models/modal/close-settings/index.d.ts

@@ -28,5 +28,6 @@ export declare class CloseIconSettings {
     backgroundColor: string;
     backgroundBorderRadius: number;
     backgroundBorderRadiusType: BorderRadiusTypeEnum;
+    backgroundBorderWidth: number;
     constructor(data: Partial<CloseIconSettings>);
 }

package/build/popup-renderer/models/modal/close-settings/index.js

@@ -1 +1 @@
-import{makeObservable as o,observable as t}from"mobx";var i,n,s;!function(o){o.ALWAYS_VISIBLE="ALWAYS_VISIBLE",o.ALWAYS_HIDDEN="ALWAYS_HIDDEN",o.VISIBLE_ON_HOVER="VISIBLE_ON_HOVER"}(i||(i={})),function(o){o.SHOW_ON_CONTENT="SHOW_ON_CONTENT",o.TAKE_SPACE="TAKE_SPACE"}(n||(n={})),function(o){o.PX="PX",o.PERCENT="PERCENT"}(s||(s={}));var e,r=function(s){var e;this.closeButtonPositionType=s.closeButtonPositionType||n.SHOW_ON_CONTENT,this.closeButtonDisplayType=s.closeButtonDisplayType||i.ALWAYS_VISIBLE,this.iconSettings=s.iconSettings?new u(s.iconSettings):new u({}),this.closeOnlyWithCloseButton=null!==(e=s.closeOnlyWithCloseButton)&&void 0!==e?e:null,o(this,{closeButtonPositionType:t,closeButtonDisplayType:t,iconSettings:t,closeOnlyWithCloseButton:t})};!function(o){o.WITH_BORDER="WITH_BORDER",o.WITHOUT_BORDER="WITHOUT_BORDER"}(e||(e={}));var u=function(i){var n;this.type=i.type||e.WITHOUT_BORDER,this.color=i.color||"",this.backgroundColor=i.backgroundColor||"",this.backgroundBorderRadius=null!==(n=i.backgroundBorderRadius)&&void 0!==n?n:50,this.backgroundBorderRadiusType=i.backgroundBorderRadiusType||s.PERCENT,0===Object.keys(i).length&&(this.type=e.WITHOUT_BORDER,this.color="#697586",this.backgroundColor="#FFFFFF",this.backgroundBorderRadius=50,this.backgroundBorderRadiusType=s.PERCENT),o(this,{type:t,color:t,backgroundColor:t,backgroundBorderRadius:t,backgroundBorderRadiusType:t})};export{s as BorderRadiusTypeEnum,i as CloseButtonDisplayTypeEnum,n as CloseButtonPositionTypeEnum,u as CloseIconSettings,e as CloseIconTypeEnum,r as CloseSettings};
+import{makeObservable as o,observable as t}from"mobx";var i,n,r;!function(o){o.ALWAYS_VISIBLE="ALWAYS_VISIBLE",o.ALWAYS_HIDDEN="ALWAYS_HIDDEN",o.VISIBLE_ON_HOVER="VISIBLE_ON_HOVER"}(i||(i={})),function(o){o.SHOW_ON_CONTENT="SHOW_ON_CONTENT",o.TAKE_SPACE="TAKE_SPACE"}(n||(n={})),function(o){o.PX="PX",o.PERCENT="PERCENT"}(r||(r={}));var s,e=function(r){var s;this.closeButtonPositionType=r.closeButtonPositionType||n.SHOW_ON_CONTENT,this.closeButtonDisplayType=r.closeButtonDisplayType||i.ALWAYS_VISIBLE,this.iconSettings=r.iconSettings?new d(r.iconSettings):new d({}),this.closeOnlyWithCloseButton=null!==(s=r.closeOnlyWithCloseButton)&&void 0!==s?s:null,o(this,{closeButtonPositionType:t,closeButtonDisplayType:t,iconSettings:t,closeOnlyWithCloseButton:t})};!function(o){o.WITH_BORDER="WITH_BORDER",o.WITHOUT_BORDER="WITHOUT_BORDER"}(s||(s={}));var d=function(i){var n,e;this.type=i.type||s.WITHOUT_BORDER,this.color=i.color||"",this.backgroundColor=i.backgroundColor||"",this.backgroundBorderRadius=null!==(n=i.backgroundBorderRadius)&&void 0!==n?n:50,this.backgroundBorderRadiusType=i.backgroundBorderRadiusType||r.PERCENT,this.backgroundBorderWidth=null!==(e=i.backgroundBorderWidth)&&void 0!==e?e:0,0===Object.keys(i).length&&(this.type=s.WITHOUT_BORDER,this.color="#697586",this.backgroundColor="#FFFFFF",this.backgroundBorderRadius=50,this.backgroundBorderRadiusType=r.PERCENT,this.backgroundBorderWidth=0),o(this,{type:t,color:t,backgroundColor:t,backgroundBorderRadius:t,backgroundBorderRadiusType:t,backgroundBorderWidth:t})};export{r as BorderRadiusTypeEnum,i as CloseButtonDisplayTypeEnum,n as CloseButtonPositionTypeEnum,d as CloseIconSettings,s as CloseIconTypeEnum,e as CloseSettings};

package/package.json

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