@ikas/popup-renderer 1.0.231 → 1.0.234
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/popup-renderer/assets/x-circle.d.ts +7 -0
- package/build/popup-renderer/assets/x-circle.js +1 -0
- package/build/popup-renderer/assets/x-close.js +1 -1
- package/build/popup-renderer/components/index.js +1 -1
- package/build/popup-renderer/models/modal/close-settings/index.d.ts +5 -2
- package/build/popup-renderer/models/modal/close-settings/index.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"react";var t=function(t){var r=t.className,l=t.style;return e.createElement("svg",{className:"icon "+(r||""),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:l},e.createElement("g",{clipPath:"url(#clip0_x_circle)"},e.createElement("path",{d:"M10 6L6 10M6 6L10 10M14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8Z",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})),e.createElement("defs",null,e.createElement("clipPath",{id:"clip0_x_circle"},e.createElement("rect",{width:"16",height:"16",fill:"white"}))))};export{t as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"react";var t=function(t){var r=t.className,o=t.style;return e.createElement("svg",{className:"icon "+(r||""),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:o},e.createElement("path",{d:"
|
|
1
|
+
import e from"react";var t=function(t){var r=t.className,o=t.style;return e.createElement("svg",{className:"icon "+(r||""),width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:o},e.createElement("path",{d:"M2 2L14 14M14 2L2 14",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round"}))};export{t as default};
|
|
@@ -1 +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
|
|
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 r from"../assets/x-circle.js";import{CloseButtonPositionTypeEnum as l,CloseButtonDisplayTypeEnum as s,CloseIconTypeEnum 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 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 b,MobileImageColumnPositionEnum as y}from"../models/modal/step/elements/image-column/index.js";import{ButtonBorderStyle as T}from"../models/modal/background-settings/index.js";var O=t(function(t){var O,C,I,h,_,M,S,w,A,D,R=t.popup,k=t.dynamicData,j=t.dashboardComponents,L=t.previewMode,N=t.sfProps,B=t.isMobile,U=e.useState(!1),W=U[0],H=U[1],F=R.modal,V=F.teaser,G=!!F.selectedStep.isTeaser,z=F.selectedStep.elements.find(function(e){return e.type===a.IMAGE_COLUMN}),K=G?V.backgroundSettings:F.backgroundSettings,X=G?V.windowSettings:F.windowSettings,Y=G?V.closeSettings:F.closeSettings,q=K.allowScrollingWhenPopupOpen,J=R.isPreviewMode||L,Q=!!J||F.isVisible;e.useEffect(function(){return document.body.style.overflow=Q&&!q?"hidden":"auto",function(){document.body.style.overflow="auto"}},[Q,q]);var Z=K.overlay,$=K.border,ee="center",te="center";switch(G?o.POPUP:F.type){case o.POPUP:var oe=G?V.position:F.position;oe===n.POPUP_TOP_LEFT?(ee="flex-start",te="flex-start"):oe===n.POPUP_TOP_CENTER?(ee="center",te="flex-start"):oe===n.POPUP_TOP_RIGHT?(ee="flex-end",te="flex-start"):oe===n.POPUP_MIDDLE_LEFT?(ee="flex-start",te="center"):oe===n.POPUP_MIDDLE_CENTER?(ee="center",te="center"):oe===n.POPUP_MIDDLE_RIGHT?(ee="flex-end",te="center"):oe===n.POPUP_BOTTOM_LEFT?(ee="flex-start",te="flex-end"):oe===n.POPUP_BOTTOM_CENTER?(ee="center",te="flex-end"):oe===n.POPUP_BOTTOM_RIGHT&&(ee="flex-end",te="flex-end");break;case o.DRAWER:F.position===n.DRAWER_LEFT?(ee="flex-start",te="center"):F.position===n.DRAWER_RIGHT&&(ee="flex-end",te="center");break;case o.NOTIFICATION_BAR:F.position===n.NOTIFICATION_BAR_UP?(ee="center",te="flex-start"):F.position===n.NOTIFICATION_BAR_DOWN&&(ee="center",te="flex-end")}var ne=e.useMemo(function(){return 2147483644},[]),ie=e.useMemo(function(){return ne+1},[]),re=e.useMemo(function(){return ie+1},[]),le=e.useMemo(function(){return re+1},[]),se={position:"fixed",display:"flex",justifyContent:ee,alignItems:te,top:0,left:0,right:0,bottom:0,zIndex:ne,overflow:"hidden",padding:"".concat(X.outerVerticalPadding,"px ").concat(X.outerHorizontalPadding,"px"),opacity:Q?1:0,visibility:Q?"visible":"hidden",transition:"opacity 0.3s ease, visibility 0.3s ease"},de={position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:ie,backgroundColor:Z?Z.bgColor:"",opacity:Z?(Z.bgOpacity||100)/100:void 0},ae={position:"relative",zIndex:re,backgroundColor:K.bgColor,border:$?"".concat($.borderWidth,"px ").concat($.borderStyle," ").concat($.borderColor):"",borderRadius:"".concat(X.borderRadius,"px"),maxWidth:"100%",maxHeight:"100%",width:X.takeFullWidth?"100%":void 0,minHeight:X.minHeight,height:X.takeFullHeight?"100%":void 0,boxShadow:K.shadow?"0 0 10px ".concat(K.shadow.color):"",overflow:"auto",opacity:Q?1:0,visibility:Q?"visible":"hidden",transition:"opacity 0.3s ease, visibility 0.3s ease"},ce="";switch(null==z?void 0:z.verticalAlignment){case c.BOTTOM:ce="flex-end";break;case c.MIDDLE:ce="center";break;case c.TOP:ce="flex-start"}var me=z?z.imagePosition===b.LEFT_ALIGN?"row-reverse":"row":"",pe=z?z.mobilePosition===y.TOP?"column-reverse":"column":"",ue={display:"flex",flexDirection:z?B?pe:me:"column",overflow:"hidden"},fe={width:X.takeFullWidth?"100%":X.maxWidth,maxWidth:"100%",overflow:"auto",display:"flex",flexDirection:"column",justifyContent:ce,padding:"".concat(X.innerVerticalPadding,"px ").concat(X.innerHorizontalPadding,"px")},ve={position:Y.closeButtonPositionType===l.TAKE_SPACE?"relative":"absolute",float:Y.closeButtonPositionType===l.TAKE_SPACE?"right":"none",top:8,right:8,zIndex:le},xe="".concat(null!==(C=null===(O=Y.iconSettings)||void 0===O?void 0:O.borderRadius)&&void 0!==C?C:50,"px"),Pe=null!==(h=null===(I=Y.iconSettings)||void 0===I?void 0:I.borderWidth)&&void 0!==h?h:0,Ee=(null===(_=Y.iconSettings)||void 0===_?void 0:_.borderColor)||(null===(M=Y.iconSettings)||void 0===M?void 0:M.color)||"",ge=(null===(S=Y.iconSettings)||void 0===S?void 0:S.borderStyle)||T.SOLID,be={position:"sticky",padding:"6px",marginLeft:Y.closeButtonPositionType===l.TAKE_SPACE?"14px":void 0,display:"flex",justifyContent:"center",alignItems:"center",border:Pe>0?"".concat(Pe,"px ").concat(ge," ").concat(Ee):"",borderRadius:xe,backgroundColor:null===(w=Y.iconSettings)||void 0===w?void 0:w.backgroundColor},ye={color:null===(A=Y.iconSettings)||void 0===A?void 0:A.color,cursor:"pointer"},Te=function(t){var o=t.type,n=j&&j[o]&&j[o].length?j[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(x,{element:t,popup:R,editModeChildren:i});case a.IMAGE_COLUMN:return B&&z.mobilePosition===y.HIDE?null:e.createElement(P,{element:t,popup:R,editModeChildren:i,isMobile:B});case a.BUTTON:return e.createElement(p,{element:t,onClose:Oe,isStandaloneButtonComponent:!0});case a.DIVIDER:return e.createElement(f,{element:t});case a.FORM:return e.createElement(g,{element:t,popup:R,isPreviewMode:!!J,sfProps:N,setIsCustomerSaved:H});case a.PRODUCT_LIST:return e.createElement(E,{element:t,products:k.products[t.id],popup:R,editModeChildren:i,isPreviewMode:!!J,sfProps:N,onClose:Oe});case a.SOCIAL_MEDIA:return e.createElement(v,{element:t,popup:R,editModeChildren:i});case a.SPACE:return e.createElement(u,{element:t})}},Oe=function(e){if(!J&&F.isVisible){var t=W||e;F.isVisible=!1,N&&N.onModalClose(t),H(!1)}};return e.createElement("div",{className:"ikas-popup-default-styles",id:"ikas-popup-container",style:se},e.createElement("div",{style:ae},Y.closeButtonDisplayType!==s.ALWAYS_HIDDEN&&e.createElement("div",{style:ve,onClick:function(){return Oe()}},e.createElement("div",{style:be,className:Y.closeButtonDisplayType===s.VISIBLE_ON_HOVER?"visible-on-hover":""},(null===(D=Y.iconSettings)||void 0===D?void 0:D.type)===d.WITH_BORDER?e.createElement(r,{style:ye}):e.createElement(i,{style:ye}))),e.createElement("div",{style:ue,onClick:function(e){G&&(F.selectedStep=F.steps[0])}},e.createElement("div",{style:fe},F.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 Te(e)})),z&&Te(z))),e.createElement("div",{style:de,onClick:function(){Y.closeOnlyWithCloseButton||Oe()}}))});export{O as default};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ButtonBorderStyle } from "../background-settings";
|
|
1
2
|
export declare enum CloseButtonDisplayTypeEnum {
|
|
2
3
|
ALWAYS_VISIBLE = "ALWAYS_VISIBLE",
|
|
3
4
|
ALWAYS_HIDDEN = "ALWAYS_HIDDEN",
|
|
@@ -22,7 +23,9 @@ export declare class CloseIconSettings {
|
|
|
22
23
|
type: CloseIconTypeEnum;
|
|
23
24
|
color: string;
|
|
24
25
|
backgroundColor: string;
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
borderRadius: number;
|
|
27
|
+
borderWidth: number;
|
|
28
|
+
borderColor: string;
|
|
29
|
+
borderStyle: ButtonBorderStyle;
|
|
27
30
|
constructor(data: Partial<CloseIconSettings>);
|
|
28
31
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{makeObservable as o,observable as t}from"mobx";var
|
|
1
|
+
import{makeObservable as o,observable as t}from"mobx";import{ButtonBorderStyle as i}from"../background-settings/index.js";var r,e;!function(o){o.ALWAYS_VISIBLE="ALWAYS_VISIBLE",o.ALWAYS_HIDDEN="ALWAYS_HIDDEN",o.VISIBLE_ON_HOVER="VISIBLE_ON_HOVER"}(r||(r={})),function(o){o.SHOW_ON_CONTENT="SHOW_ON_CONTENT",o.TAKE_SPACE="TAKE_SPACE"}(e||(e={}));var s,n=function(i){var s;this.closeButtonPositionType=i.closeButtonPositionType||e.SHOW_ON_CONTENT,this.closeButtonDisplayType=i.closeButtonDisplayType||r.ALWAYS_VISIBLE,this.iconSettings=i.iconSettings?new l(i.iconSettings):new l({}),this.closeOnlyWithCloseButton=null!==(s=i.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 l=function(r){var e,n;this.type=r.type||s.WITHOUT_BORDER,this.color=r.color||"",this.backgroundColor=r.backgroundColor||"",this.borderRadius=null!==(e=r.borderRadius)&&void 0!==e?e:50,this.borderWidth=null!==(n=r.borderWidth)&&void 0!==n?n:0,this.borderColor=r.borderColor||"",this.borderStyle=r.borderStyle||i.SOLID,0===Object.keys(r).length&&(this.type=s.WITHOUT_BORDER,this.color="#697586",this.backgroundColor="#FFFFFF",this.borderRadius=50,this.borderWidth=0,this.borderColor="",this.borderStyle=i.SOLID),o(this,{type:t,color:t,backgroundColor:t,borderRadius:t,borderWidth:t,borderColor:t,borderStyle:t})};export{r as CloseButtonDisplayTypeEnum,e as CloseButtonPositionTypeEnum,l as CloseIconSettings,s as CloseIconTypeEnum,n as CloseSettings};
|