@ikas/popup-renderer 1.0.189 → 1.0.191

package/build/popup-renderer/components/form-element-renderer/checkbox-item-view/index.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import { CheckboxFormItem } from "../../../models/modal/step/elements/form/checkbox";
+import { FormInputSettings } from "popup-renderer/models/modal/step/elements/form/form-settings";
 type Props = {
     checkboxItem: CheckboxFormItem;
+    formInputSettings: FormInputSettings;
 };
 export declare const CheckboxItemView: React.FC<Props>;
 export {};

package/build/popup-renderer/components/form-element-renderer/checkbox-item-view/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";var r=t((function(t){var r=t.checkboxItem;e.useEffect((function(){r.showInCheckedStatus?r.isChecked=!0:r.isChecked=!1}),[r.showInCheckedStatus]);var i=r.requiredToBeChecked,o=e.useCallback((function(){var e=/<pre[^>]*>([\s\S]*?)<\/pre>/.exec(r.text);return e?e[1]:r.text}),[r.text]);return e.createElement("div",{style:{width:"100%",display:"flex",gap:6,flexDirection:"column"}},e.createElement("div",{style:{width:"100%",display:"flex",gap:8,flexDirection:"row",alignItems:"baseline",wordBreak:"break-word"}},e.createElement("input",{style:{width:"16px",height:"16px",cursor:"pointer",position:"relative",top:3},type:"checkbox",checked:r.isChecked,onChange:function(){r.isChecked=!r.isChecked,i&&i.hasError&&r.isChecked&&(i.hasError=!1)}}),e.createElement("div",{dangerouslySetInnerHTML:{__html:o()}})),!!i&&i.hasError&&e.createElement("div",{style:{color:"red",fontSize:"12px"}},i.validationErrorMessage))}));export{r as CheckboxItemView};
+import e from"react";import{observer as t}from"mobx-react";var r=t((function(t){var r=t.checkboxItem,o=t.formInputSettings;e.useEffect((function(){r.showInCheckedStatus?r.isChecked=!0:r.isChecked=!1}),[r.showInCheckedStatus]);var i=r.requiredToBeChecked,c=e.useCallback((function(){var e=/<pre[^>]*>([\s\S]*?)<\/pre>/.exec(r.text);return e?e[1]:r.text}),[r.text]);return e.createElement("div",{style:{width:"100%",display:"flex",gap:6,flexDirection:"column"}},e.createElement("div",{style:{width:"100%",display:"flex",gap:8,flexDirection:"row",alignItems:"baseline",wordBreak:"break-word"}},e.createElement("input",{style:{width:"16px",height:"16px",cursor:"pointer",position:"relative",top:3},type:"checkbox",checked:r.isChecked,onChange:function(){r.isChecked=!r.isChecked,i&&i.hasError&&r.isChecked&&(i.hasError=!1)}}),e.createElement("div",{style:{color:o.checkboxTextColor},dangerouslySetInnerHTML:{__html:c()}})),!!i&&i.hasError&&e.createElement("div",{style:{color:"red",fontSize:"12px"}},i.validationErrorMessage))}));export{r as CheckboxItemView};

package/build/popup-renderer/components/form-element-renderer/index.d.ts

@@ -7,6 +7,7 @@ type Props = {
     popup: Popup;
     isPreviewMode: boolean;
     sfProps?: SFProps;
+    setIsCustomerSaved: (isCustomerSaved: boolean) => void;
 };
 declare const FormElementRenderer: React.FC<Props>;
 export default FormElementRenderer;

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

@@ -1 +1 @@
-import{__awaiter as e,__generator as r}from'./../../../ext/tslib/tslib.es6.mjs.js';import t from"react";import{observer as n}from"mobx-react";import{getHorizontalAlignment as o,injectFontScript as a,validateEmail as i,validatePhoneNumber as l}from"../../helpers/index.js";import{FormItemTypeEnum as s}from"../../models/modal/step/elements/form/index.js";import u from"../button-element-renderer/index.js";import m from"./input-item-view/index.js";import{CheckboxItemView as d}from"./checkbox-item-view/index.js";import c from"./date-item-view/index.js";import f from"./gender-item-view/index.js";var E=n((function(n){var E=n.element,p=n.popup,v=n.isPreviewMode,C=n.sfProps,M=t.useState(!1);M[0];var I=M[1],h=E,S=h.rows.slice().sort((function(e,r){return e.order-r.order})),g=h.formSettings,R=h.buttonSettings,O=h.bgColor,T={display:"flex",flexDirection:"column",justifyContent:o(h.horizontalAlignment),gap:"".concat(g.gapBetweenItems,"px"),padding:"".concat(h.outerVerticalPadding,"px ").concat(h.outerHorizontalPadding,"px"),backgroundColor:O,width:"100%"},_={display:"flex",flexDirection:"row",width:"100%",gap:"".concat(g.gapBetweenItems,"px")},U={flex:1,display:"flex",alignItems:"flex-end",fontFamily:a(g.fontFamily),fontSize:g.fontSize},b=function(){return e(void 0,void 0,void 0,(function(){var e,t,n;return r(this,(function(r){switch(r.label){case 0:return e=p.modal.steps.findIndex((function(e){return e.id===p.modal.selectedStep.id})),t=e===p.modal.steps.length-2,!v&&C&&t?(I(!0),o=0,h.rows.forEach((function(e){e.columns.forEach((function(e){switch(e.type){case s.CUSTOMER_BIRTHDAY:var r=e.formItem;r.required&&!r.value&&(r.required.hasError=!0,o++);break;case s.CUSTOMER_EMAIL:case s.CUSTOMER_PHONE:case s.CUSTOMER_NAME:case s.CUSTOMER_SURNAME:var t=e.formItem;if(t.required&&!t.value){if(t.type===s.CUSTOMER_EMAIL&&(null==C?void 0:C.isCustomerLoggedIn))return;t.required.hasError=!0,o++}else if(e.type===s.CUSTOMER_EMAIL){var n=i(t.value||"");t.validEmailError.hasError=!n,n||o++}else if(e.type===s.CUSTOMER_PHONE){var a=l(t.value||"",null==C?void 0:C.currentCountryCode);t.validPhoneError.hasError=!a,a||o++}break;case s.CUSTOMER_GENDER:var u=e.formItem,m=u.genders.find((function(e){return e.isSelected}));u.required&&!m&&(u.required.hasError=!0,o++);break;case s.CHECKBOX_FORM_ITEM:var d=e.formItem;d.requiredToBeChecked&&!d.isChecked&&(d.requiredToBeChecked.hasError=!0,o++)}}))})),o>0?(I(!1),[2]):(n={},h.rows.forEach((function(e){e.columns.forEach((function(e){var r;switch(e.type){case s.CUSTOMER_BIRTHDAY:n.birthday=e.formItem.value;break;case s.CUSTOMER_EMAIL:n.email=e.formItem.value;break;case s.CUSTOMER_GENDER:n.gender=(null===(r=e.formItem.genders.find((function(e){return e.isSelected})))||void 0===r?void 0:r.type)||"";break;case s.CUSTOMER_PHONE:n.phone=e.formItem.value;break;case s.CUSTOMER_NAME:n.firstName=e.formItem.value||"";break;case s.CUSTOMER_SURNAME:n.lastName=e.formItem.value||"";break;case s.CHECKBOX_FORM_ITEM:n.hasPermission=e.formItem.isChecked}}))})),[4,C.onCustomerSave(n)])):[3,2];case 1:r.sent(),I(!1),r.label=2;case 2:return-1!==e&&e<p.modal.steps.length&&(p.modal.selectedStep=p.modal.steps[e+1]),[2]}var o}))}))};return t.createElement("div",{style:T},S.map((function(e,r){return t.createElement("div",{style:_,key:r},e.columns.slice().sort((function(e,r){return e.order-r.order})).map((function(e,r){return t.createElement("div",{style:U,key:r},function(e){switch(e.type){case s.CUSTOMER_EMAIL:case s.CUSTOMER_PHONE:case s.CUSTOMER_NAME:case s.CUSTOMER_SURNAME:var r=e.formItem;if(r.type===s.CUSTOMER_EMAIL&&(null==C?void 0:C.isCustomerLoggedIn)&&!v)return null;var n=null;if(e.type===s.CUSTOMER_EMAIL){var o=r;o.validEmailError.hasError&&(n=o.validEmailError.validationErrorMessage)}else if(e.type===s.CUSTOMER_PHONE){var a=r;a.validPhoneError.hasError&&(n=a.validPhoneError.validationErrorMessage)}return t.createElement(m,{formInputSettings:g.formInputSettings,inputLabel:r.inputLabel,isRequired:r.required,onValueChange:function(e){return v?null:r.value=e},placeholder:r.placeholder,updateCurrentInfo:r.updateCurrentInfo,value:r.value||"",validationErrorMessage:n});case s.CUSTOMER_BIRTHDAY:var i=e.formItem;return t.createElement(c,{formInputSettings:g.formInputSettings,inputLabel:i.inputLabel,isRequired:i.required,onValueChange:function(e){return v?null:i.value=e},placeholder:i.placeholder,updateCurrentInfo:i.updateCurrentInfo,value:i.value||""});case s.CUSTOMER_GENDER:var l=e.formItem;return t.createElement(f,{genderFormItem:l,formInputSettings:g.formInputSettings,onValueChange:function(e){return v?null:l.genders.forEach((function(r){r.isSelected=r.label===e}))}});case s.CHECKBOX_FORM_ITEM:return t.createElement(d,{checkboxItem:e.formItem})}}(e))})))})),t.createElement("div",{style:{width:"100%",minWidth:"fit-content"},onClick:function(e){b(),e.preventDefault(),e.stopPropagation()}},t.createElement(u,{element:R})," "))}));export{E as default};
+import{__awaiter as e,__generator as r}from'./../../../ext/tslib/tslib.es6.mjs.js';import t from"react";import{observer as n}from"mobx-react";import{getHorizontalAlignment as o,injectFontScript as a,validateEmail as i,validatePhoneNumber as l}from"../../helpers/index.js";import{FormItemTypeEnum as s}from"../../models/modal/step/elements/form/index.js";import u from"../button-element-renderer/index.js";import m from"./input-item-view/index.js";import{CheckboxItemView as d}from"./checkbox-item-view/index.js";import c from"./date-item-view/index.js";import f from"./gender-item-view/index.js";var E=n((function(n){var E=n.element,p=n.popup,v=n.isPreviewMode,C=n.sfProps,I=t.useState(!1);I[0];var M=I[1],h=E,S=h.rows.slice().sort((function(e,r){return e.order-r.order})),g=h.formSettings,R=h.buttonSettings,O=h.bgColor,T={display:"flex",flexDirection:"column",justifyContent:o(h.horizontalAlignment),gap:"".concat(g.gapBetweenItems,"px"),padding:"".concat(h.outerVerticalPadding,"px ").concat(h.outerHorizontalPadding,"px"),backgroundColor:O,width:"100%"},_={display:"flex",flexDirection:"row",width:"100%",gap:"".concat(g.gapBetweenItems,"px")},U={flex:1,display:"flex",alignItems:"flex-end",fontFamily:a(g.fontFamily),fontSize:g.fontSize},b=function(){return e(void 0,void 0,void 0,(function(){var e,t,o;return r(this,(function(r){switch(r.label){case 0:return e=p.modal.steps.findIndex((function(e){return e.id===p.modal.selectedStep.id})),t=e===p.modal.steps.length-2,!v&&C&&t?(M(!0),a=0,h.rows.forEach((function(e){e.columns.forEach((function(e){switch(e.type){case s.CUSTOMER_BIRTHDAY:var r=e.formItem;r.required&&!r.value&&(r.required.hasError=!0,a++);break;case s.CUSTOMER_EMAIL:case s.CUSTOMER_PHONE:case s.CUSTOMER_NAME:case s.CUSTOMER_SURNAME:var t=e.formItem;if(t.required&&!t.value){if(t.type===s.CUSTOMER_EMAIL&&(null==C?void 0:C.isCustomerLoggedIn))return;t.required.hasError=!0,a++}else if(e.type===s.CUSTOMER_EMAIL){var n=i(t.value||"");t.validEmailError.hasError=!n,n||a++}else if(e.type===s.CUSTOMER_PHONE&&t.required){var o=l(t.value||"",null==C?void 0:C.currentCountryCode);t.validPhoneError.hasError=!o,o||a++}break;case s.CUSTOMER_GENDER:var u=e.formItem,m=u.genders.find((function(e){return e.isSelected}));u.required&&!m&&(u.required.hasError=!0,a++);break;case s.CHECKBOX_FORM_ITEM:var d=e.formItem;d.requiredToBeChecked&&!d.isChecked&&(d.requiredToBeChecked.hasError=!0,a++)}}))})),a>0?(M(!1),[2]):(o={},h.rows.forEach((function(e){e.columns.forEach((function(e){var r;switch(e.type){case s.CUSTOMER_BIRTHDAY:o.birthday=e.formItem.value;break;case s.CUSTOMER_EMAIL:o.email=e.formItem.value;break;case s.CUSTOMER_GENDER:o.gender=(null===(r=e.formItem.genders.find((function(e){return e.isSelected})))||void 0===r?void 0:r.type)||"";break;case s.CUSTOMER_PHONE:o.phone=e.formItem.value;break;case s.CUSTOMER_NAME:o.firstName=e.formItem.value||"";break;case s.CUSTOMER_SURNAME:o.lastName=e.formItem.value||"";break;case s.CHECKBOX_FORM_ITEM:o.hasPermission=e.formItem.isChecked}}))})),[4,C.onCustomerSave(o)])):[3,2];case 1:r.sent(),n.setIsCustomerSaved(!0),M(!1),r.label=2;case 2:return-1!==e&&e<p.modal.steps.length&&(p.modal.selectedStep=p.modal.steps[e+1]),[2]}var a}))}))};return t.createElement("div",{style:T},S.map((function(e,r){return t.createElement("div",{style:_,key:r},e.columns.slice().sort((function(e,r){return e.order-r.order})).map((function(e,r){return t.createElement("div",{style:U,key:r},function(e){switch(e.type){case s.CUSTOMER_EMAIL:case s.CUSTOMER_PHONE:case s.CUSTOMER_NAME:case s.CUSTOMER_SURNAME:var r=e.formItem;if(r.type===s.CUSTOMER_EMAIL&&(null==C?void 0:C.isCustomerLoggedIn)&&!v)return null;var n=null;if(e.type===s.CUSTOMER_EMAIL){var o=r;o.validEmailError.hasError&&(n=o.validEmailError.validationErrorMessage)}else if(e.type===s.CUSTOMER_PHONE){var a=r;a.validPhoneError.hasError&&(n=a.validPhoneError.validationErrorMessage)}return t.createElement(m,{formInputSettings:g.formInputSettings,inputLabel:r.inputLabel,isRequired:r.required,onValueChange:function(e){return v?null:r.value=e},placeholder:r.placeholder,updateCurrentInfo:r.updateCurrentInfo,value:r.value||"",validationErrorMessage:n});case s.CUSTOMER_BIRTHDAY:var i=e.formItem;return t.createElement(c,{formInputSettings:g.formInputSettings,inputLabel:i.inputLabel,isRequired:i.required,onValueChange:function(e){return v?null:i.value=e},placeholder:i.placeholder,updateCurrentInfo:i.updateCurrentInfo,value:i.value||""});case s.CUSTOMER_GENDER:var l=e.formItem;return t.createElement(f,{genderFormItem:l,formInputSettings:g.formInputSettings,onValueChange:function(e){return v?null:l.genders.forEach((function(r){r.isSelected=r.label===e}))}});case s.CHECKBOX_FORM_ITEM:return t.createElement(d,{checkboxItem:e.formItem})}}(e))})))})),t.createElement("div",{style:{width:"100%",minWidth:"fit-content"},onClick:function(e){b(),e.preventDefault(),e.stopPropagation()}},t.createElement(u,{element:R})," "))}));export{E as default};

package/build/popup-renderer/components/form-element-renderer/input-item-view/index.js

@@ -1 +1 @@
-import e from"react";import{observer as t}from"mobx-react";var r=t((function(t){var r=e.useState(!1),o=r[0],n=r[1];e.useRef(null);var l=t.placeholder,a=t.isRequired,i=t.inputLabel;t.updateCurrentInfo;var c=t.validationErrorMessage,d=t.formInputSettings,u=t.value,p=t.onValueChange,s={width:"100%",backgroundColor:d.bgColor?"".concat(d.bgColor):"transparent",border:"".concat(d.borderWidth,"px solid ").concat(o?d.focusBorderColor:d.borderColor),borderRadius:"".concat(d.borderRadius,"px"),fontSize:"14px",padding:"10px 12px",height:"".concat(d.height,"px"),outline:"none"},x=a?((null==l?void 0:l.text)||"")+" *":(null==l?void 0:l.text)||"";return e.createElement("div",{style:{width:"100%",display:"flex",gap:2,flexDirection:"column"}},(i||a)&&e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:4,marginBottom:"6px"}},e.createElement("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px"}},i&&e.createElement("label",{style:{color:"black",fontSize:"14px"}},i.text)),a&&a.hasError&&e.createElement("div",{style:{color:"red",fontSize:"12px"}},a.validationErrorMessage),!!c&&e.createElement("div",{style:{color:"red",fontSize:"12px"}},c)),e.createElement("input",{type:"text",placeholder:x,value:u||"",onChange:function(e){return function(e){p(e),a&&a.hasError&&e.length>0&&(a.hasError=!1)}(e.target.value)},style:s,onFocus:function(){return n(!0)},onBlur:function(){return n(!1)}}))}));export{r as default};
+import e from"react";import{observer as t}from"mobx-react";import{generateRandomId as r}from"../../../helpers/index.js";var o=t((function(t){var o=e.useState(!1),n=o[0],l=o[1];e.useRef(null);var a=e.useMemo((function(){return r()}),[]),i=t.placeholder,c=t.isRequired,u=t.inputLabel;t.updateCurrentInfo;var d=t.validationErrorMessage,s=t.formInputSettings,p=t.value,m=t.onValueChange,f={width:"100%",backgroundColor:s.bgColor?"".concat(s.bgColor):"transparent",border:"".concat(s.borderWidth,"px solid ").concat(n?s.focusBorderColor:s.borderColor),borderRadius:"".concat(s.borderRadius,"px"),fontSize:"14px",padding:"10px 12px",height:"".concat(s.height,"px"),outline:"none"},x=c?((null==i?void 0:i.text)||"")+" *":(null==i?void 0:i.text)||"";return e.createElement("div",{style:{width:"100%",display:"flex",gap:2,flexDirection:"column"}},(u||c)&&e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:4,marginBottom:"6px"}},e.createElement("div",{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"4px"}},u&&e.createElement("label",{style:{color:s.titleColor,fontSize:"14px"}},u.text)),c&&c.hasError&&e.createElement("div",{style:{color:"red",fontSize:"12px"}},c.validationErrorMessage),!!d&&e.createElement("div",{style:{color:"red",fontSize:"12px"}},d)),e.createElement("input",{type:"text",placeholder:x,value:p||"",onChange:function(e){return function(e){m(e),c&&c.hasError&&e.length>0&&(c.hasError=!1)}(e.target.value)},style:f,onFocus:function(){return l(!0)},onBlur:function(){return l(!1)},className:"ikas-form-input-item-view-".concat(a)}),e.createElement("style",null,"\n        .ikas-form-input-item-view-".concat(a," {\n          ::placeholder {\n              color: ").concat(s.placeholderColor,";\n            }\n          }  \n        ")))}));export{o as default};

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

package/build/popup-renderer/helpers/index.d.ts

@@ -9,3 +9,4 @@ export declare const getGoogleFontHref: (fontFamily: IkasPopupRendererFontFamily
 export declare const injectFontScript: (fontFamily: IkasPopupRendererFontFamily) => string | undefined;
 export declare const validateEmail: (str: string) => boolean;
 export declare const validatePhoneNumber: (phone: string, countryCode?: string) => boolean;
+export declare const generateRandomId: (text?: string) => string;

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

@@ -1 +1 @@
-import{__spreadArray as e}from'./../../ext/tslib/tslib.es6.mjs.js';import'./../../ext/libphonenumber-js/es6/PhoneNumberMatcher.js';import'./../../ext/libphonenumber-js/es6/AsYouTypeFormatter.js';import{isValidPhoneNumber as t}from'./../../ext/libphonenumber-js/min/exports/isValidPhoneNumber.js';import'./../../ext/libphonenumber-js/min/exports/PhoneNumberMatcher.js';import'./../../ext/libphonenumber-js/min/exports/AsYouType.js';import'./../../ext/libphonenumber-js/min/exports/Metadata.js';import'./../../ext/libphonenumber-js/es6/findNumbers/isValidCandidate.js';import'./../../ext/libphonenumber-js/index.es6.exports/PhoneNumberSearch.js';import{PopupElementTypeEnum as n,ComponentHorizontalAlignmentEnum as r}from"../models/modal/step/elements/base/index.js";var a=function(t){var r=[];return t.modal.steps.forEach((function(t){t.elements.forEach((function(t){if(t.type===n.PRODUCT_LIST){var a=t.variantPairs;a&&(r=e(e([],r,!0),a,!0))}}))})),{variantPairs:r}},o=function(e){var t="";switch(e){case r.LEFT:t="flex-start";break;case r.CENTER:t="center";break;case r.RIGHT:t="flex-end"}return t},s=function(e){if(e.name){var t=e.name.replace(/ /g,"+"),n="";if(e.variants){n+=":";var r=e.variants.some((function(e){return"italic"===e}));if(r&&(n+="ital,"),n+="wght@",r){var a=new RegExp("italic","i");n+=e.variants.reduce((function(e,t){return a.test(t)?e:e+"0,".concat(t.replace("regular","400"),";")}),""),n+=e.variants.reduce((function(e,t){return a.test(t)?e+"1,".concat("italic"===t?"400":t.replace("italic",""),";"):e}),"")}else n+=e.variants.reduce((function(e,t){return e+"".concat(t.replace("regular","400"),";")}),"");n=n.substring(0,n.length-1),n+="&display=swap"}return"https://fonts.googleapis.com/css2?family=".concat(t).concat(n)}},i=function(e){var t="'".concat(e.name,'\', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');if(document.getElementById("ikas-popup-font-".concat(e.name)))return t;var n=s(e);if(n){var r=document.createElement("link");return r.setAttribute("id","ikas-popup-font-".concat(e.name)),r.setAttribute("rel","stylesheet"),r.setAttribute("href",n),document.getElementsByTagName("head")[0].appendChild(r),t}},m=function(e){return!(e.length>320)&&/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(e)},u=function(e,n){return t(e,n?n.toUpperCase():"TR")};export{s as getGoogleFontHref,o as getHorizontalAlignment,a as getPopupDynamicData,i as injectFontScript,m as validateEmail,u as validatePhoneNumber};
+import{__spreadArray as e}from'./../../ext/tslib/tslib.es6.mjs.js';import'./../../ext/libphonenumber-js/es6/PhoneNumberMatcher.js';import'./../../ext/libphonenumber-js/es6/AsYouTypeFormatter.js';import{isValidPhoneNumber as t}from'./../../ext/libphonenumber-js/min/exports/isValidPhoneNumber.js';import'./../../ext/libphonenumber-js/min/exports/PhoneNumberMatcher.js';import'./../../ext/libphonenumber-js/min/exports/AsYouType.js';import'./../../ext/libphonenumber-js/min/exports/Metadata.js';import'./../../ext/libphonenumber-js/es6/findNumbers/isValidCandidate.js';import'./../../ext/libphonenumber-js/index.es6.exports/PhoneNumberSearch.js';import{PopupElementTypeEnum as n,ComponentHorizontalAlignmentEnum as r}from"../models/modal/step/elements/base/index.js";var o=function(t){var r=[];return t.modal.steps.forEach((function(t){t.elements.forEach((function(t){if(t.type===n.PRODUCT_LIST){var o=t.variantPairs;o&&(r=e(e([],r,!0),o,!0))}}))})),{variantPairs:r}},a=function(e){var t="";switch(e){case r.LEFT:t="flex-start";break;case r.CENTER:t="center";break;case r.RIGHT:t="flex-end"}return t},s=function(e){if(e.name){var t=e.name.replace(/ /g,"+"),n="";if(e.variants){n+=":";var r=e.variants.some((function(e){return"italic"===e}));if(r&&(n+="ital,"),n+="wght@",r){var o=new RegExp("italic","i");n+=e.variants.reduce((function(e,t){return o.test(t)?e:e+"0,".concat(t.replace("regular","400"),";")}),""),n+=e.variants.reduce((function(e,t){return o.test(t)?e+"1,".concat("italic"===t?"400":t.replace("italic",""),";"):e}),"")}else n+=e.variants.reduce((function(e,t){return e+"".concat(t.replace("regular","400"),";")}),"");n=n.substring(0,n.length-1),n+="&display=swap"}return"https://fonts.googleapis.com/css2?family=".concat(t).concat(n)}},i=function(e){var t="'".concat(e.name,'\', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif');if(document.getElementById("ikas-popup-font-".concat(e.name)))return t;var n=s(e);if(n){var r=document.createElement("link");return r.setAttribute("id","ikas-popup-font-".concat(e.name)),r.setAttribute("rel","stylesheet"),r.setAttribute("href",n),document.getElementsByTagName("head")[0].appendChild(r),t}},u=function(e){return!(e.length>320)&&/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(e)},m=function(e,n){return t(e,n?n.toUpperCase():"TR")},l=function(e){var t;return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)+(null!==(t=null==e?void 0:e.length)&&void 0!==t?t:0)};export{l as generateRandomId,s as getGoogleFontHref,a as getHorizontalAlignment,o as getPopupDynamicData,i as injectFontScript,u as validateEmail,m as validatePhoneNumber};

package/build/popup-renderer/models/modal/step/elements/form/form-settings/index.d.ts

@@ -13,5 +13,8 @@ export declare class FormInputSettings {
     borderColor: string | null;
     focusBorderColor: string | null;
     height: number;
+    placeholderColor: string;
+    titleColor: string;
+    checkboxTextColor: string;
     constructor(data?: Partial<FormInputSettings>);
 }

package/build/popup-renderer/models/modal/step/elements/form/form-settings/index.js

@@ -1 +1 @@
-import{makeObservable as o,observable as r}from"mobx";import{IkasPopupRendererFontFamily as t}from"../../base/index.js";var i=function(i){var n,d;void 0===i&&(i={}),this.formInputSettings=i.formInputSettings?new e(i.formInputSettings):new e({borderColor:"#E3E8EF",focusBorderColor:"#000000"}),this.gapBetweenItems=null!==(n=i.gapBetweenItems)&&void 0!==n?n:12,this.fontFamily=new t(i.fontFamily),this.fontSize=null!==(d=i.fontSize)&&void 0!==d?d:14,o(this,{formInputSettings:r,gapBetweenItems:r,fontFamily:r,fontSize:r})},e=function(t){var i,e,n;void 0===t&&(t={}),this.bgColor=t.bgColor||"",this.borderWidth=null!==(i=t.borderWidth)&&void 0!==i?i:1,this.borderRadius=null!==(e=t.borderRadius)&&void 0!==e?e:4,this.borderColor=t.borderColor||"",this.focusBorderColor=t.focusBorderColor||"",this.height=null!==(n=t.height)&&void 0!==n?n:40,o(this,{bgColor:r,borderWidth:r,borderRadius:r,borderColor:r,focusBorderColor:r,height:r})};export{e as FormInputSettings,i as FormSettings};
+import{makeObservable as o,observable as r}from"mobx";import{IkasPopupRendererFontFamily as t}from"../../base/index.js";var e=function(e){var l,d;void 0===e&&(e={}),this.formInputSettings=e.formInputSettings?new i(e.formInputSettings):new i({borderColor:"#E3E8EF",focusBorderColor:"#000000"}),this.gapBetweenItems=null!==(l=e.gapBetweenItems)&&void 0!==l?l:12,this.fontFamily=new t(e.fontFamily),this.fontSize=null!==(d=e.fontSize)&&void 0!==d?d:14,o(this,{formInputSettings:r,gapBetweenItems:r,fontFamily:r,fontSize:r})},i=function(t){var e,i,l;void 0===t&&(t={}),this.bgColor=t.bgColor||"",this.borderWidth=null!==(e=t.borderWidth)&&void 0!==e?e:1,this.borderRadius=null!==(i=t.borderRadius)&&void 0!==i?i:4,this.borderColor=t.borderColor||"",this.focusBorderColor=t.focusBorderColor||"",this.height=null!==(l=t.height)&&void 0!==l?l:40,this.placeholderColor=t.placeholderColor||"#999999",this.titleColor=t.titleColor||"#000000",this.checkboxTextColor=t.checkboxTextColor||"#000000",o(this,{bgColor:r,borderWidth:r,borderRadius:r,borderColor:r,focusBorderColor:r,height:r,placeholderColor:r,titleColor:r})};export{i as FormInputSettings,e as FormSettings};

package/package.json

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