\n\t\t {{item.first_name}} {{item.last_name}}\n\t\t {{item.optin_email}}\n\n \n Made a\n {{currency(item)}}{{item.amount}} purchase\n \n \n {{activityEventTypeTextCheck(item.event_id)}}\n \n\t
\n\n {{date(item.time)}}\nSearch tips: Some search terms require an exact match.
\n Try typing the entire term, or use a different word or phrase.
\n\t\t
\n\t\t {{ description }}\n\t
\n \n{{ customer.optin_email }}
\n\t \n \nYour orders CSV is ready to download
\n\t\t\t\t\n\t\t\t\tSelect your timezone, this will be used in all charts and analytics on your dashboard.\n\t\t\t
\n\t\t\tLorem ipsum dolor sit amet consectetur adipisicing elit. Unde, maxime.
')}},[_vm._v(\"Lorem ipsum\")])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\tLorem ipsum dolor sit amet consectetur adipisicing elit. Unde, maxime
')}})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\t\n\t\t\t\t\t\tYou have no saved templates yet.\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\tP.S. You can close this dialog and let the process to complete at the background
\n\n\t\t\t\t\t\tCanceling an order will make it unfulfillable.
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tOrder refunded already.\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tThis order cannot be refunded through Funnelish.\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tOrders processed using {{gateway.name}} gateway cannot be refunded through Funnelish.\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\tCanceling an order will make it unfulfillable. You can also choose to refund your customer as well.\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\tCanceling an order will make it unfulfillable.
\n\t\t\t\t\t\tOrders processed using {{gateway.name}} gateway cannot be refunded through Funnelish.\n\t\t\t\t\t
{{ message ? message : 'Please try again later' }}
\n\t\t![](\"/img/sources/paypal-plugin-logo.png\"){kind=logo}
`;\n case 8: // Funnelish Pay\n return `![](\"/img/logo.svg\"){kind=logo}
\n • ${g.acronym} \n ![](\"/img/sources/clickfunnels-logo.png\"){kind=logo}
`;\n }\n}\n\nfunction getImgUrl(img) {\n return require(img)\n// return images(img)\n}\n\nconst gateways = [\n {id: 1, acronym:\"Stripe\", name:\"Stripe\", canRefund: true},\n {id: 2, acronym:\"PayPal\", name:\"PayPal Express (Deprecated)\", canRefund: false},\n {id: 3, acronym:\"PayFast\", name:\"PayFast\", canRefund: false},\n {id: 4, acronym:\"Coinbase\", name:\"Coinbase\", canRefund: false},\n {id: 5, acronym:\"COD\", name:\"Cash On Delivery\", canRefund: false},\n {id: 6, acronym:\"Clickfunnels\", name:\"Clickfunnels\", canRefund: false},\n {id: 7, acronym:\"PayPal\", name:\"PayPal\", canRefund: false},\n {id: 8, acronym:\"ideal\", name:\"iDEAL\", canRefund: true},\n {id: 9, acronym:\"nmi\", name:\"NMI\", canRefund: true},\n {id: 10, acronym:\"stripe-klarna\", name:\"Klarna (through Stripe)\", canRefund: true},\n {id: 11, acronym:\"Bancontact\", name:\"Bancontact\", canRefund: true},\n {id: 12, acronym:\"Sofort\", name:\"SOFORT\", canRefund: true},\n {id: 13, acronym:\"sepa_direct_debit\", name:\"SEPA Direct Debit\", canRefund: true},\n {id: 14, acronym:\"checkout.com\", name:\"Checkout.com\", canRefund: true},\n {id: 15, acronym:\"p24\", name:\"Przelewy24\", canRefund: true},\n {id: 16, acronym:\"razorpay\", name:\"Razorpay\", canRefund: true},\n {id: 17, acronym:\"eps\", name:\"EPS\", canRefund: true},\n {id: 18, acronym:\"paypal-cc\", name:\"PayPal Card Payments\", canRefund: true},\n {id: 19, acronym:\"klarna\", name:\"Klarna\", canRefund: true},\n {id: 20, acronym:\"mollie\", name:\"Mollie\", canRefund: true},\n {id: 21, acronym:\"mollie-ideal\", name:\"iDEAL (Mollie)\", canRefund: true},\n {id: 22, acronym:\"mollie-bancontact\", name:\"Bancontact (Mollie)\", canRefund: true},\n]\n\nexport const GATEWAY_STRIPE = 1;\nexport const GATEWAY_MOLLIE = 20;\nexport const GATEWAY_MOLLIE_IDEAL = 21;\nexport const GATEWAY_MOLLIE_BANCONTACT = 22;\n\nfunction getGatewayNameById(id) {\n if (id >= 1) {\n for (let i = 0; i < gateways.length; i++) {\n if (gateways[i].id == id) return gateways[i];\n }\n }\n return {id: 0, name:\"Unknown\", acronym:\"Unknown\", canRefund: false};\n}\n\nfunction getGatewayById(id) {\n if (id >= 1) {\n for (let i = 0; i < gateways.length; i++) {\n if (gateways[i].id == id) return gateways[i];\n }\n }\n return {id: 0, name:\"Unknown\", acronym:\"Unknown\", canRefund: false};\n}\n\nexport {\n getGatewayNameById,\n getSourceLogo,\n getGatewayById\n}\n","\nfunction round_to_two(n) {\n return Math.round(n * 100) / 100;\n}\nfunction round_to_zero(n) {\n return Math.round(n);\n}\nfunction numberWithCommas(x) {\n return x.toString().replace(/(\\d)(?=(\\d\\d\\d)+(?!\\d))/g, \"$1,\");\n}\nexport default {\n numberWithCommas,\n round_to_two,\n round_to_zero,\n}\n","import store from '@/store';\nimport router from '@/router';\n\nfunction isAdmin(){\n try {\n if (!store.state.userInfo.member_account) return false;\n let ma = store.state.userInfo.member_account;\n if (!ma.permissions) return false;\n let p = JSON.parse(ma.permissions);\n return !!p.admin\n } catch {\n return false;\n }\n}\n\nfunction is(role=\"admin\"){\n try {\n if (!store.state.userInfo.member_account) return false;\n let ma = store.state.userInfo.member_account;\n if (!ma.permissions) return false;\n let p = JSON.parse(ma.permissions);\n return !!p[role]\n } catch (e) {\n console.error(e)\n return false;\n }\n}\n\nfunction validateUser(user, route){\n try {\n if (!user || user.error) {\n if (['LogIn','SignUp','ShareFunnel','ForgotPassword','PasswordRecovery','NewPassword',\n 'SelectAccount'].includes(route.name)) {\n return true; // don't redirect\n }\n router.replace({path:'/log-in'}).catch(()=>{})\n return false;\n }\n // let data = user.info.data;\n // if (!data || data.trim()===\"Exception: invalid token\") {\n // router.replace('/log-in').catch(()=>{})\n // return false;\n // }\n return true\n } catch (e) {\n console.error(e)\n return false;\n }\n}\n\nexport {\n isAdmin,\n is,\n validateUser\n}\n","export default function(value = 0, digits = 1, money = false) {\n function nFormatter(num, digits) {\n let si = [\n { value: 1, symbol: \"\" },\n { value: 1E3, symbol: \"k\" },\n { value: 1E6, symbol: \"M\" },\n { value: 1E9, symbol: \"G\" },\n { value: 1E12, symbol: \"T\" },\n { value: 1E15, symbol: \"P\" },\n { value: 1E18, symbol: \"E\" }\n ];\n let rx = /\\.0+$|(\\.[0-9]*[1-9])0+$/;\n let i;\n for (i = si.length - 1; i > 0; i--) {\n if (num >= si[i].value) {\n break;\n }\n }\n return (num / si[i].value).toFixed(digits).replace(rx, \"$1\") + si[i].symbol;\n }\n\n if (money && value) {\n return new Intl.NumberFormat().format(value);\n } else {\n return value ? nFormatter(value, digits) : 0\n }\n\n\n}","export const applyDrag = (arr, dragResult) => {\n const { removedIndex, addedIndex, payload } = dragResult\n if (removedIndex === null && addedIndex === null) return arr\n\n const result = [...arr]\n let itemToAdd = payload\n\n if (removedIndex !== null) {\n itemToAdd = result.splice(removedIndex, 1)[0]\n }\n\n if (addedIndex !== null) {\n result.splice(addedIndex, 0, itemToAdd)\n }\n\n return result\n}\n\nexport const generateItems = (count, creator) => {\n const result = []\n for (let i = 0; i < count; i++) {\n result.push(creator(i))\n }\n return result\n}\n\nexport const sortItems = (arr) => {\n function compare(a, b) {\n if (a.order_index < b.order_index) return -1;\n if (a.order_index > b.order_index) return 1;\n return 0;\n }\n return arr ? arr.sort(compare) : [];\n}\n\n","export default [\n {\n id: 1,\n img: require('@/assets/img/Order-Form.svg'),\n title: 'Checkout'\n },\n {\n id: 2,\n img: require('@/assets/img/upsell-2.svg'),\n title: 'Upsell'\n },\n {\n id: 3,\n img: require('@/assets/img/Thank You Page.svg'),\n title: 'Thank you page'\n },\n {\n id: 4,\n img: require('@/assets/img/Downsell.svg'),\n title: 'Downsell'\n },\n {\n id: 5,\n img: require('@/assets/img/Optin Page.svg'),\n title: 'Landing page'\n },\n {\n id: 6,\n img: require('@/assets/img/Other.svg'),\n title: 'Other'\n },\n]\n\n\nexport const types = {\n ORDER_FORM: 1,\n UPSELL: 2,\n TYP: 3,\n DOWNSELL: 4,\n OPTIN: 5,\n OTHER: 6,\n}\n","import moment from \"moment\";\n\n\nexport function identifyFullStory(user) {\n try {\n FS.identify(user.id, {\n displayName: user.member.first_name || '',\n email: user.member.email,\n });\n } catch (e) {\n console.warn(e)\n }\n}\n\n// export function fullStoryEvent(event) {\n// try {\n// FS('event', event);\n// } catch (e) {\n// console.warn(e)\n// }\n// }\n","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"app\"}},[_c('global-header'),_c('notifications',{attrs:{\"classes\":\"notification\",\"group\":\"main\",\"position\":\"top center\"},scopedSlots:_vm._u([{key:\"body\",fn:function(props){return [_c('div',{class:{'notification layout-row':true, 'warn':props.item.type==='warn', 'error':props.item.type==='error'},on:{\"click\":function($event){return _vm.notificationClicked(props)}}},[_c('div',{staticClass:\"icon flex-none\"},[(props.item.type=='warn')?_c('inline-svg',{attrs:{\"src\":require('@/assets/img/notification-icon-warn.svg')}}):(props.item.type=='error')?_c('inline-svg',{attrs:{\"src\":require('@/assets/img/notification-icon-error.svg')}}):_c('inline-svg',{attrs:{\"src\":require('@/assets/img/notification-icon-success.svg')}})],1),_c('div',{staticClass:\"flex title\",domProps:{\"innerHTML\":_vm._s(props.item.title)}}),(!props.item.data || !props.item.data.noClose)?_c('a',{staticClass:\"close\",on:{\"click\":props.close}},[_c('inline-svg',{attrs:{\"src\":require('@/assets/img/popup_close.svg')}})],1):_vm._e()])]}}])}),_c(_vm.layout,{tag:\"component\"},[_c('router-view')],1),(_vm.createShareFunnel)?_c('cloning-funnel-popup',{attrs:{\"funnel\":_vm.share_funnel,\"code\":_vm.share_code},on:{\"done\":_vm.shareDone,\"failed\":_vm.shareFailed}}):(_vm.onboarding)?_c('new-trial-popup'):_vm._e(),_c('portal-target',{attrs:{\"name\":\"popup\"}}),_c('hard-refresh-popup')],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"wrapper\"},[_c('router-view')],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n Thank you for choosing Funnelish!
\n\n\t\t\t\t\t\n\t\t\t\t\t\tPlease check your email inbox for a verification email.\n\t\t\t\t\t
\n\n\t\t\t\t\t\n\t\t\t\t\t\tMake sure to \n\t\t\t\t\t\t
Get started by creating your first funnel or choosing a plan!
\n\t\t\t\t\tGet started by adding your first funnel!
\n\n\t\t\t\t\t\n\t\t\t\t\t\tIf you have any questions or face any difficulties, reach out to our chat support or check the help section.\n\t\t\t\t\t
\n\n\t\t\t\tSearch tips: Some search terms require an exact match.
\n\t\t\t\t\t\t Try typing the entire term, or use a different word or phrase.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, maxime.
',\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: 'transparent' },\n // font: { title: 'Default font', comp: 'FontPanel', value: { fontFamily: 'Roboto', fontSize: 14, color: '#636A7B', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign: 'left' } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0,\n color: 'transparent',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { leftTop: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS classes', comp: 'MultiSelectItem', value: [], options: [{ id: 'class1', text: 'class1' }, { id: 'class2', text: 'class2' }, { id: 'class3', text: 'class3' }] },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n },\n },\n}\n","export default {\n tag: 'div', // div, h1-h6, p, img, video ...\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n cols: {\n title: 'Columns',\n comp: 'selectItem',\n value: 'one',\n options: [\n { id: \"one\", text: \"One\" }, { id: \"two\", text: \"Two\" }, { id: \"three\", text: \"Three\" },\n { id: \"four\", text: \"Four\" }, { id: \"five\", text: \"Two + One\" }, { id: \"six\", text: \"One + Two\" }\n ]\n },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: 'transparent' },\n backgroundImage: { title: 'Background image', comp: 'imageUploader', value: '' },\n font: { title: 'Font', comp: 'FontPanel', value: { fontFamily: 'Roboto', fontSize: 14, color: '#F6F9FE', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, } } },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0,\n color: 'transparent',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { leftTop: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' }, // !!!Unique!!!\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [{id: 'class1', text: 'class1'}, {id: 'class2', text: 'class2'}, {id: 'class3', text: 'class3'}] }, // Array of Strings\n },\n },\n}","export default {\n tag: 'section', // div, h1-h6, p, img, video ...\n labelTitle: '', // String\n labelColor: '', // String => #hex || rgba()\n id: { value: null },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n width: {\n title: 'Width',\n comp: 'selectItem',\n value: 'full',\n options: [{ id: \"full\", text: \"Full\" }, { id: \"wide\", text: \"Wide\" }, { id: \"half\", text: \"Half\" }]\n },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: 'transparent' },\n backgroundImage: { title: 'Background image', comp: 'imageUploader', value: 'url' },\n font: { title: 'Font', comp: 'FontPanel', value: { fontFamily: 'Roboto', fontSize: 14, color: '#F6F9FE', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, } },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0, // Integer\n color: 'transparent', // String => #hex || rgba()\n style: 'solid', // String => solid || dashed || dotted,\n sides: { top: true, left: true, right: true, bottom: true }, // Object => Boolean\n radius: { leftTop: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 }, // Object => Integers\n }\n },\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' }, // !!!Unique!!!\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [{id: 'class1', text: 'class1'}, {id: 'class2', text: 'class2'}, {id: 'class3', text: 'class3'}] }, // Array of Strings\n },\n },\n}\n","export default {\n tag: 'social',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n items: {\n title: 'Social Network Selection',\n comp: 'SocialNetworks',\n value: [\n { title: 'Twitter', status: true, url: '', icon: 'https://images.funnelish.com/default/social/tw_icon.png' },\n { title: 'LinkedIn', status: true, url: '', icon: 'https://images.funnelish.com/default/social/in_icon.png' },\n { title: 'Facebook', status: true, url: '', icon: 'https://images.funnelish.com/default/social/face_b_icon.png' },\n { title: 'YouTube', status: true, url: '', icon: 'https://images.funnelish.com/default/social/youtube_icon.png' },\n { title: 'Instagram', status: true, url: '', icon: 'https://images.funnelish.com/default/social/instagram_icon.png' },\n ]\n },\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [{ id: 'class1', text: 'class1' }, { id: 'class2', text: 'class2' }, { id: 'class3', text: 'class3' }] },\n // align: { title: 'Align', comp: 'TextAlign', value: 'center' },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: 'transparent' },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0,\n color: 'transparent',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { leftTop: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n },\n },\n}\n","export default {\n tag: 'spacer',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 10, left: 0, right: 0, bottom: 0 } },\n widthNumber: { title: 'Width', comp: 'InputNumber', value: { number: 2 } },\n color: { title: 'Color', comp: 'colorPicker', value: '#D5E5FF' },\n style: { title: 'Border style', comp: 'selectItem', value: 'solid', options: [{ id: \"dotted\", text: \"Dotted\" }, { id: \"dashed\", text: \"Dashed\" }, { id: \"solid\", text: \"Solid\" }, { id: \"double\", text: \"Double\" }, { id: \"groove\", text: \"Groove\" }, { id: \"ridge\", text: \"Ridge\" }, ] },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 5, left: 5, right: 5, bottom: 5 } },\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [] },\n },\n },\n}\n","const EMPTY_STATE = 'email_emptyState';\n\nmodule.exports = {\n install(Vue, options = {}) {\n if (!Vue._installedPlugins.find(plugin => plugin.Store)) {\n throw new Error(\"VuexUndoRedo plugin must be installed after the Vuex plugin.\")\n }\n Vue.mixin({\n data() {\n return {\n email_saved: 0,\n email_undone: [],\n email_newMutation: true,\n email_popMeOnce: true,\n email_ignoreMutations: options.ignoreMutations || [],\n email_doneState: [],\n email_stackLength: 50\n };\n },\n created() {\n if (this.$store) {\n var { editor, page } = this.$store.state.email;\n this.email_doneState.push({ editor: JSON.stringify(editor), page: JSON.stringify(page) });\n\n this.$store.subscribe(mutation => {\n if (\n mutation.type !== EMPTY_STATE &&\n this.email_ignoreMutations.indexOf(mutation.type) === -1 &&\n mutation.type.indexOf('EMAIL_') !== -1\n ) {\n if (\n this.email_doneState.length > this.email_stackLength ||\n mutation.type === 'EMAIL_APPLY_TEMPLATE'\n ) this.email_doneState.shift();\n\n this.email_doneState.push({\n editor: JSON.stringify(this.$store.state.email.editor),\n page: JSON.stringify(this.$store.state.email.page)\n });\n this.email_saved++\n }\n });\n }\n },\n computed: {\n email_canRedo() {\n return this.email_undone.length;\n },\n email_canUndo() {\n return this.email_doneState.length - 1;\n }\n },\n methods: {\n email_redo() {\n if (this.email_doneState.length >= this.email_stackLength) this.email_doneState.shift()\n\n let commit = this.email_undone.pop();\n this.email_doneState.push(commit);\n this.email_newMutation = false;\n this.$store.commit(EMPTY_STATE, commit);\n this.email_newMutation = true;\n commit = null;\n\n this.email_saved += 1\n },\n email_undo() {\n if (this.email_undone.length >= this.email_stackLength) this.email_undone.shift()\n\n this.email_undone.push(this.email_doneState.pop());\n this.email_newMutation = false;\n this.email_popMeOnce = false;\n this.$store.commit(EMPTY_STATE, this.email_doneState[this.email_doneState.length - 1]);\n this.email_newMutation = true;\n\n this.email_saved -= 1\n }\n }\n });\n },\n}","let shadows = {\n title: 'Shadow',\n comp: 'Shadow',\n value: []\n // \tangle: 0,\n // \tdistance: 0,\n // \tblur: 5,\n // \tspread: 0,\n // \tcolor: '#252A32',\n // \ttype: '',\n}\n\nlet buttonShadows = {\n title: 'Text shadow',\n comp: 'Shadow',\n value: []\n //\tangle: 0,\n //\tdistance: 0,\n //\tblur: 0,\n //\tcolor: 'transparent',\n}\n\nlet textShadows = {\n title: 'Text shadow',\n comp: 'ShadowsInput',\n value: {\n angle: 0,\n distance: 0,\n blur: 0,\n spread: 0,\n color: 'transparent',\n type: '',\n }\n}\n\nlet border = {\n title: 'Border',\n comp: 'border',\n value: {\n width: null,\n color: null,\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { topLeft: null, topRight: null, bottomRight: null, bottomLeft: null },\n }\n}\n\nlet sticky = {\n title: 'Sticky',\n comp: 'sticky',\n value: {\n enabled: false,\n position: 'top',\n distance: 0,\n }\n}\n\nlet margin = {\n title: 'Margin',\n comp: 'marginPadding',\n value: { top: 10, left: 0, right: 0, bottom: 0 }\n}\n\nlet padding = {\n title: 'Padding',\n comp: 'marginPadding',\n value: { top: 5, left: 50, right: 50, bottom: 5 }\n}\n\nlet font = {\n title: 'Headline font',\n comp: 'FontPanel',\n value: {\n fontFamily: '',\n fontSize: 18,\n color: null, // When null it falls-back to the CORE.CSS styles.\n fontStyling: {\n bold: false,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: 'center'\n }\n}\n\nlet hiddenFont = {\n title: 'Hidden font',\n comp: 'hidden',\n value: {\n fontFamily: '',\n fontSize: 18,\n mobileFontSize: null,\n tabletFontSize: null,\n color: null, // When null it falls-back to the CORE.CSS styles.\n fontStyling: {\n bold: false,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: 'center',\n mobileTextAlign: null,\n tabletTextAlign: null,\n }\n}\n\nlet font2 = {\n title: 'Sub-headline font',\n comp: 'FontPanel',\n value: {\n fontFamily: '',\n fontSize: 14,\n color: '#F6F9FE',\n fontStyling: {\n bold: false,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: 'center'\n }\n}\n\nlet font3 = { // formElement\n title: 'Value font',\n comp: 'FontPanel',\n value: {\n fontFamily: null,\n fontSize: 14,\n color: '#252A32',\n fontStyling: {\n bold: false,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: 'left'\n }\n}\n\nlet font4 = { //link\n title: 'Font',\n comp: 'FontPanel',\n value: {\n fontFamily: '',\n fontSize: 14,\n color: '#4368e0',\n fontStyling: {\n bold: false,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: 'center'\n }\n}\n\nlet linkUrl = {\n title: 'Click action',\n comp: 'ClickAction',\n value: {\n url: '',\n target: '_blank',\n mainToggle: 'No action',\n mainSelectOptions: [\n { id: 'No action', text: 'No action' },\n { id: 'Submit step', text: 'Submit step' },\n { id: 'Go to next step', text: 'Go to next step' },\n { id: 'Go to URL', text: 'Go to URL' },\n { id: 'Go to section/row', text: 'Go to section/row' },\n ]\n }\n}\n\nlet title = {\n title: 'Title',\n comp: 'TextInput',\n value: ''\n}\n\nlet cssId = {\n title: 'ID',\n comp: 'TextInput',\n value: ''\n}\n\nlet cssClasses = {\n title: 'CSS Classes',\n comp: 'MultiSelectItem',\n value: [],\n options: []\n}\n\nlet displayType = {\n title: 'Display type',\n comp: 'selectItem',\n value: 'inline-block',\n options: [\n { id: \"inline-block\", text: \"Fluid\" },\n { id: \"block\", text: \"Fill Width\" },\n ]\n}\n\nlet id = {\n value: null\n}\n\nlet animations = {\n title: 'Animations',\n comp: 'AnimationsInput',\n value: {\n property: '',\n duration: 0,\n easing: '',\n }\n}\n\nlet transformation = {\n title: 'Transformation',\n comp: 'TransformationInput',\n value: {\n rotateX: 0,\n rotateY: 0,\n rotateZ: 0,\n scaleX: 1,\n scaleY: 1,\n scaleZ: 1,\n }\n}\n\nlet backgroundColor = {\n title: 'Background color',\n comp: 'colorPicker',\n value: null,\n}\n\nlet backgroundColorButton = {\n title: 'Background color',\n comp: 'colorPicker',\n value: '#4368E0'\n}\n\nlet props = {\n title: 'Props',\n comp: 'FormElementProps',\n value: {\n required: true,\n showLabel: true,\n auto_optin:true,\n dataType: '',\n dataType2: '',\n placeholder: '',\n placeholder2: '',\n value: '',\n optionsType: 'countries',\n options: [],\n }\n}\n\nlet inputType = {\n title: 'Input type',\n comp: 'InputType',\n value: 'input'\n}\n\nlet label = {\n title: 'Label',\n comp: 'hidden',\n value: 'Label'\n}\n\nlet label2 = {\n title: 'Label2',\n comp: 'hidden',\n value: 'Label 2'\n}\n\nlet labelFont = {\n title: 'Label font',\n comp: 'FontPanel',\n value: {\n fontFamily: null,\n fontSize: 14,\n color: '#252A32',\n fontStyling: {\n bold: false,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: 'left'\n }\n}\n\n\n\nlet clickAction = {\n title: 'Click action',\n comp: 'ClickAction',\n value: {\n element: '',\n target: '',\n url: '',\n mainToggle: 'No action',\n mainSelectOptions: [\n { id: 'No action', label: 'No action', description: '' },\n { id: 'Submit step', label: 'Submit step', description: '' },\n { id: 'Go to next step', label: 'Go to next step', description: '' },\n { id: 'Go to URL', label: 'Go to URL', description: '' },\n { id: 'Go to section/row', label: 'Go to section/row', description: '' },\n ]\n }\n}\n\nlet size = {\n title: 'Image size',\n comp: 'SizeValue',\n placeholder: 'auto',\n value: {\n width: null,\n height: null /* null will be treated as 'auto'*/\n }\n}\n\nlet image = {\n title: 'Image',\n comp: 'imageUploader',\n value: ''\n}\n\nlet alternateText = {\n title: 'Alternate text',\n comp: 'TextInput',\n value: ''\n}\n\nlet hoverColor = {\n title: 'Hover color',\n comp: 'colorPicker',\n value: '#4368e0'\n}\n\n\nexport {\n sticky,\n shadows,\n buttonShadows,\n textShadows,\n border,\n margin,\n padding,\n font,\n hiddenFont,\n font2,\n font3,\n font4,\n linkUrl,\n title,\n cssId,\n cssClasses,\n displayType,\n id,\n animations,\n transformation,\n backgroundColor,\n backgroundColorButton,\n props,\n inputType,\n label,\n label2,\n labelFont,\n clickAction,\n size,\n image,\n alternateText,\n hoverColor,\n}\n","import {\n margin, cssId, cssClasses, id, padding, shadows, sticky\n\n} from './fields/'\n\nexport default {\n tag: 'formSpacer',\n labelTitle: '',\n labelColor: '',\n id,\n attributes: {\n basic: {\n margin,\n widthNumber: { title: 'Width', comp: 'InputNumber', value: { number: 2 } },\n color: { title: 'Color', comp: 'colorPicker', value: '#D5E5FF' },\n style: { title: 'Border style', comp: 'selectItem', value: 'solid', options: [{ id: \"dotted\", text: \"Dotted\" }, { id: \"dashed\", text: \"Dashed\" }, { id: \"solid\", text: \"Solid\" }, { id: \"double\", text: \"Double\" }, { id: \"groove\", text: \"Groove\" }, { id: \"ridge\", text: \"Ridge\" }, ] },\n\n font: { title: 'Label', comp: 'FontPanel', value: { fontFamily: '', fontSize: 15, color: '', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign: 'left' } },\n padding,\n shadows\n },\n advanced: {\n cssId,\n cssClasses,\n sticky\n\n },\n },\n}\n","import {\n shadows, buttonShadows, // textShadows,\n border, margin, padding, font, font2, linkUrl, title, cssId, cssClasses, id, backgroundColorButton, sticky\n} from './fields/'\n\nlet hoverFont = {\n comp: 'FontPanel',\n value: {\n fontFamily: null,\n fontSize: null,\n color: null, // When null it falls-back to the CORE.CSS styles.\n fontStyling: {\n bold: null,\n italic: null,\n 'line-through': null,\n underline: null,\n },\n textAlign: null\n }\n}\n\n\nexport default {\n tag: 'button',\n labelTitle: '',\n labelColor: '',\n id,\n editLock: false,\n attributes: {\n basic: {\n align: { title: 'Alignment', comp: 'alignment', value: {mobile:null,desktop:'center',tablet:null} },\n margin,\n content: { title: 'Headline', comp: 'TextInput', value: 'Call To Action' },\n subHeadline: { title: 'Sub-headline', comp: 'TextInput', value: '' },\n linkUrl,\n font,\n font2,\n lineSpacing: { title: 'Lines Spacing', comp: 'InputNumber', value: {number:10, append:'px'} },\n backgroundColor: backgroundColorButton,\n border,\n shadows,\n textShadows: buttonShadows\n },\n hover: {\n backgroundColor: {title: 'Background color', comp: 'colorPicker', value: null},\n border: {title: 'Border', comp: 'border', value: {\n width: null,\n color: null,\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { topLeft: null, topRight: null, bottomRight: null, bottomLeft: null },\n }\n },\n font: {title: 'Headline font', ...hoverFont},\n font2: {title: 'Sub-headline font', ...hoverFont},\n shadows,\n textShadows: buttonShadows\n },\n advanced: {\n title,\n cssId,\n cssClasses,\n padding:{\n title: 'Padding',\n comp: 'marginPadding',\n value: { top: 15, left: 30, right: 30, bottom: 15 }\n },\n sticky\n\n },\n },\n}\n\n","import {\n margin, cssId, cssClasses, id, sticky\n} from './fields/'\n\nexport default {\n tag: 'custom',\n labelTitle: '',\n labelColor: '',\n id,\n content: '',\n blockStyles: '',\n attributes: {\n basic: {\n margin,\n html: { title: 'Edit custom HTML', comp: 'CustomCodeButton' },\n textInfo: { title: 'For HTML experts', comp: 'InfoMessage', value: { text: \"Click the button above to use your own custom HTML code, make sure it's correct and meets the HTML5 standard requirements.\" } }\n },\n advanced: {\n cssId,\n cssClasses,\n sticky\n\n },\n },\n}\n","import {\n border, margin, cssId, cssClasses, id, backgroundColor, props, inputType, label, label2, labelFont, font3, sticky,\n} from './fields/'\n\nexport default {\n tag: 'formElement',\n labelTitle: '',\n labelColor: '',\n id,\n attributes: {\n basic: {\n inputType,\n margin,\n props,\n label,\n label2,\n labelFont,\n font: font3,\n backgroundColor,\n border,\n },\n advanced: {\n cssId,\n cssClasses,\n sticky\n\n },\n },\n}\n","import {\n shadows, textShadows, border, margin, padding, font, hiddenFont, cssId, cssClasses, id, backgroundColor, sticky\n} from './fields/'\n\nexport default {\n tag: 'headline',\n labelTitle: '',\n labelColor: '',\n id,\n content: 'ONE TIME OFFER! Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
'\n },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n selected: { title: 'Selected', comp: 'ToggleInput', value: { booleanValue: false } },\n product: { title: 'Product', comp: 'selectProduct', value: null },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: '#ffffff' },\n labelFont: { title: 'Label font', comp: 'FontPanel', value: { fontFamily: null, fontSize: '20', color: null, fontStyling: { bold: true, italic: false, 'line-through': false, underline: false, }, textAlign: 'left' } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 2,\n color: '#FDCC5E',\n style: 'dashed',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { analytics: 6, topRight: 6, bottomRight: 6, bottomLeft: 6 },\n }\n },\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [] },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 15, left: 15, right: 15, bottom: 15 } },\n sticky\n },\n },\n}\n","import {\n shadows, sticky,\n} from './fields/'\n\nexport default {\n tag: 'orderSummary',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n content: {\n product: 'Product',\n price: 'Price',\n total: 'Total',\n tax: 'Tax',\n subtotal: 'Subtotal',\n discountCode: 'Discount code',\n apply: 'Apply',\n discount:'Discount',\n showSummary:'Show order summary',\n hideSummary:'Hide order summary'\n },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 15, left: 0, right: 0, bottom: 0 } },\n props: { title: 'Props', comp: 'orderSummaryProps', value: {\n showImages: true,\n allowDiscountCodes: true,\n showHeader: false,\n showTotal: true,\n collapsable: true,\n isOpen: true,\n }\n },\n font: { title: 'Labels font', comp: 'FontPanel', value: { fontFamily: null, fontSize: 14, color: '#535353', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, } } },\n font2: { title: 'Items font', comp: 'FontPanel', value: { fontFamily: null, fontSize: 14, color: '#252A32', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, } } },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: '#ffffff' },\n separatorColor: { title: 'Separator color', comp: 'colorPicker', value: '#afafaf57' },\n headerBgColor: { title: 'Header background color', comp: 'colorPicker', value: '#fafafa' },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 1,\n color: '#AFAFAF56',\n style: 'solid',\n sides: { top: true, left: false, right: false, bottom: true },\n radius: { analytics: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [] },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 10, left: 10, right: 10, bottom: 10 } },\n sticky\n\n },\n },\n}\n","import {\n shadows, border, hiddenFont, sticky\n} from './fields/'\n\nexport default {\n tag: 'paragraph',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde, maxime.
',\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 10, left: 0, right: 0, bottom: 0 } },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: null },\n font: hiddenFont,\n lineHeight: {\n title:'Line spacing',\n comp: 'SmallNumber',\n value: {\n append: 'x',\n placeholder: 'normal',\n number: 1,\n min: 0\n }\n },\n letterSpacing: {\n title:'Letter spacing',\n comp: 'SmallNumber',\n value: {\n append: 'px',\n placeholder: 'normal',\n number: null,\n }\n },\n border,\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [{ id: 'paragraph', text: 'paragraph' }] },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 10, left: 10, right: 10, bottom: 10 } },\n // animations: {\n // title: 'Animations',\n // comp: 'AnimationsInput',\n // value: {\n // property: '',\n // duration: 0,\n // easing: '',\n // }\n // },\n textShadows: {\n title: 'Text shadow',\n comp: 'ShadowsInput',\n value: {\n angle: 0,\n distance: 0,\n blur: 0,\n spread: 0,\n color: 'transparent',\n type: '',\n }\n },\n sticky\n\n // transformation: {\n // title: 'Transformation',\n // comp: 'TransformationInput',\n // value: {\n // rotateX: 0,\n // rotateY: 0,\n // rotateZ: 0,\n // scaleX: 1,\n // scaleY: 1,\n // scaleZ: 1,\n // }\n // },\n },\n },\n}\n","import {\n shadows, sticky,\n} from './fields/'\n\nexport default {\n tag: 'paymentForm',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n attributes: {\n basic: {\n // color: { title: 'Color', comp: 'colorPicker', value: '#252A32' },\n // backgroundColor: { title: 'Background color', comp: 'colorPicker', value: '#FFFFFF' },\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 10, left: 0, right: 0, bottom: 0 } },\n openPopup: { title: 'Edit payment options', comp: 'PopupOpenBtn', value: 'payment-methods' },\n infoMessage: { title: '', comp: 'infoMessage', value: { text: 'You can change the payment options and the visual appearance of your credit card form in your payment app settings as well.' } },\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [] },\n sticky\n\n // transformation: {\n // title: 'Transformation',\n // comp: 'TransformationInput',\n // value: {\n // rotateX: 0,\n // rotateY: 0,\n // rotateZ: 0,\n // scaleX: 1,\n // scaleY: 1,\n // scaleZ: 1,\n // }\n // },\n },\n },\n}\n","import {\n shadows, sticky,\n} from './fields/'\n\nexport default {\n tag: 'productList',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n content: {\n selecta:'Select a',\n headerTitles: [\n 'Product',\n 'Price',\n ],\n productsList: [\n { title: 'Dynamically updated', pcs: 1, price: '0.00' },\n // { title: 'Air Jordan 1 Top', pcs: 2, price: '2998.00' },\n // { title: 'Dell Computer Monitor', pcs: 1, price: '30 / 2 weeks' },\n // { title: 'Heimer Miller Sofa (Mint Condition)', pcs: 1, price: '30.00' },\n ],\n },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 20, left: 0, right: 0, bottom: 0 } },\n products: {comp: \"manageProducts\"},\n selectionType: { title: 'Selection type', comp: 'selectItem', value: 'single', options: [{ id: 'single', text: 'Single checkout' }, { id: 'multi', text: 'Multi-checkout' }, { id: 'qty', text: 'Multi-Quantity' }, ] },\n labelFont: { title: 'Label font', comp: 'FontPanel', value: { fontFamily: '', fontSize: 12, color: '#97AACD', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, } } },\n font: { title: 'Entries font', comp: 'FontPanel', value: { fontFamily: '', fontSize: 12, color: '#252A32', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, } } },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: 'white' },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0,\n color: null,\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { analytics: 0, topRight: 0, topLeft: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [{ id: 'product-list', text: 'product-list' }] },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 10, left: 10, right: 10, bottom: 10 } },\n sticky\n\n // animations: {\n // title: 'Animations',\n // comp: 'AnimationsInput',\n // value: {\n // property: '',\n // duration: 0,\n // easing: '',\n // }\n // },\n // transformation: {\n // title: 'Transformation',\n // comp: 'TransformationInput',\n // value: {\n // rotateX: 0,\n // rotateY: 0,\n // rotateZ: 0,\n // scaleX: 1,\n // scaleY: 1,\n // scaleZ: 1,\n // }\n // },\n },\n },\n}\n","import {\n shadows, sticky,\n} from './fields/'\n\nexport default {\n tag: 'progressBar',\n labelTitle: 'progress bar',\n labelColor: '',\n id: { value: null },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 15, left: 0, right: 0, bottom: 0 } },\n valueNumber: { title: 'Value', comp: 'InputNumber', value: { number: 60, append: '%' } },\n labelText: { title: 'Label text', comp: 'TextInput', value: '60%' },\n progressColor1: { title: 'Progress color #1', comp: 'colorPicker', value: '#2BC253' },\n progressColor2: { title: 'Progress color #2', comp: 'colorPicker', value: '#54F054' },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: '#555555' },\n height: { title: 'Height', comp: 'InputNumber', value: { number: 20 } },\n labelPosition: { title: 'Label position', comp: 'selectItem', value: 'center', options: [{ id: \"center\", text: \"Center\" }, { id: \"left\", text: \"Left\" }, { id: \"right\", text: \"Right\" }] },\n style: { title: 'Style', comp: 'selectItem', value: 'stripes', options: [{ id: \"stripes\", text: \"Stripes\" }, { id: \"simple\", text: \"Simple\" }] },\n animated: { title: 'Use animation?', comp: 'ToggleInput', value: false },\n font: { title: 'Label font', comp: 'FontPanel', value: { fontFamily: '', fontSize: 18, color: '#ffffff', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, } } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0,\n color: 'transparent',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { analytics: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [{ id: 'progress-bar', text: 'progress-bar' }] },\n // animations: {\n // title: 'Animations',\n // comp: 'AnimationsInput',\n // value: {\n // property: '',\n // duration: 0,\n // easing: '',\n // }\n // },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 10, left: 10, right: 10, bottom: 10 } },\n textShadows: {\n title: 'Text shadow',\n comp: 'ShadowsInput',\n value: {\n angle: 0,\n distance: 0,\n blur: 0,\n spread: 0,\n color: 'transparent',\n type: '',\n }\n },\n sticky\n\n // transformation: {\n // title: 'Transformation',\n // comp: 'TransformationInput',\n // value: {\n // rotateX: 0,\n // rotateY: 0,\n // rotateZ: 0,\n // scaleX: 1,\n // scaleY: 1,\n // scaleZ: 1,\n // }\n // },\n },\n },\n}\n","import {\n shadows, sticky,\n} from './fields/'\n\nexport default {\n tag: 'div', // div, h1-h6, p, img, video ...\n labelTitle: 'My row',\n labelColor: '',\n id: { value: null },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'sectionMargin', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n cols: {\n title: 'Columns',\n comp: 'selectItem',\n value: 'one',\n options: [\n { id: \"one\", text: \"One\" }, { id: \"two\", text: \"Two\" }, { id: \"three\", text: \"Three\" },\n { id: \"four\", text: \"Four\" }, { id: \"five\", text: \"Two + One\" }, { id: \"six\", text: \"One + Two\" }\n ]\n },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: 'transparent' },\n backgroundImage: { title: 'Background image', comp: 'imageUploader', value: '' },\n backgroundStyle: { title: 'Background style', comp: 'selectItem',\n value: 'cover', options:[{id:'auto',text:'Auto (default)'},{id:'cover',text:'Cover'}] },\n backgroundPosition: { title: 'Background position', comp: 'selectItem',\n value: 'top', options:[{id:'top',text:'Top (default)'},{id:'center',text:'Center'},{id:'bottom',text:'Bottom'}] },\n\n font: { title: 'Font', comp: 'FontPanel', value: { fontFamily: '', fontSize: 14, color: '#303030', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign: 'initial' } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0,\n color: 'transparent',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { analytics: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' }, // !!!Unique!!!\n title: { title: 'Title', comp: 'TextInput', value: 'My row' }, //\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [] }, // Array of Strings\n sticky\n\n // animations: {\n // title: 'Animations',\n // comp: 'AnimationsInput', //no options yet..\n // value: {\n // property: '', // String => all || transform || width || height ...\n // duration: 0, // Float => 0.2 ...\n // easing: '', // String => ease-in-out || ease ...\n // }\n // },\n // transformation: {\n // title: 'Transformation',\n // comp: 'TransformationInput',\n // value: {\n // rotateX: 0, // Integer => 0 - 360\n // rotateY: 0, // Integer => 0 - 360\n // rotateZ: 0, // Integer => 0 - 360\n // scaleX: 0, // Integer\n // scaleY: 0, // Integer\n // scaleZ: 0, // Integer\n // }\n // }\n },\n },\n}\n","import {\n shadows, sticky,\n} from './fields/'\n\nexport default {\n tag: 'section', // div, h1-h6, p, img, video ...\n labelTitle: 'My section', // String\n labelColor: '', // String => #hex || rgba()\n id: { value: null },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'sectionMargin', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n width: {\n title: 'Width',\n comp: 'selectItem',\n value: 'full',\n options: [{ id: \"full\", text: \"Full width\" }, { id: \"wide\", text: \"Wide\" }, { id: \"half\", text: \"Half width\" }]\n },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: 'transparent' },\n backgroundImage: { title: 'Background image', comp: 'imageUploader', value: '' },\n backgroundStyle: { title: 'Background style', comp: 'selectItem',\n value: 'cover', options:[{id:'auto',text:'Auto (default)'},{id:'cover',text:'Cover'}] },\n backgroundPosition: { title: 'Background position', comp: 'selectItem',\n value: 'top', options:[{id:'top',text:'Top (default)'},{id:'center',text:'Center'},{id:'bottom',text:'Bottom'}] },\n // font: { title: 'Font', comp: 'Font', value: { fontFamily: 'Roboto', fontSize: 14 } },\n // color: { title: 'Color', comp: 'colorPicker', value: '#F6F9FE' },\n // fontStyling: { title: 'Font styling', comp: 'FontStyling', value: '' },\n // align: { title: 'Text align', comp: 'TextAlign', value: 'initial' },\n font: { title: 'Font', comp: 'FontPanel', value: { fontFamily: '', fontSize: 14, color: '#2f2f2f', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign: 'initial' } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0, // Integer\n color: 'transparent', // String => #hex || rgba()\n style: 'solid', // String => solid || dashed || dotted,\n sides: { top: true, left: true, right: true, bottom: true }, // Object => Boolean\n radius: { analytics: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 }, // Object => Integers\n }\n },\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' }, // !!!Unique!!!\n title: { title: 'Title', comp: 'TextInput', value: 'My section' }, //\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [] }, // Array of Strings\n sticky\n\n // animations: {\n // title: 'Animations',\n // comp: 'AnimationsInput', //no options yet..\n // value: {\n // property: '', // String => all || transform || width || height ...\n // duration: 0, // Float => 0.2 ...\n // easing: '', // String => ease-in-out || ease ...\n // }\n // },\n // transformation: {\n // title: 'Transformation',\n // comp: 'TransformationInput',\n // value: {\n // rotateX: 0, // Integer => 0 - 360\n // rotateY: 0, // Integer => 0 - 360\n // rotateZ: 0, // Integer => 0 - 360\n // scaleX: 0, // Integer\n // scaleY: 0, // Integer\n // scaleZ: 0, // Integer\n // }\n // }\n },\n },\n}\n","import {sticky} from \"./fields\";\n\nexport default {\n tag: 'social',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n attributes: {\n basic: {\n align: { title: 'Alignment', comp: 'alignment', value: {mobile:null,desktop:'center',tablet:null} },\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 10, left: 0, right: 0, bottom: 0 } },\n items: {\n title: 'Social networks',\n comp: 'SocialNetworks',\n value: [\n { title: 'Twitter', status: true, url: '', icon: 'tw_icon.svg' },\n { title: 'LinkedIn', status: true, url: '', icon: 'in_icon.svg' },\n { title: 'Facebook', status: true, url: '', icon: 'face_b_icon.svg' },\n { title: 'YouTube', status: true, url: '', icon: 'youtube_icon.svg' },\n { title: 'Instagram', status: true, url: '', icon: 'instagram_icon.svg' },\n ]\n },\n color: { title: 'Color', comp: 'colorPicker', value: null },\n hoverColor: { title: 'Hover color', comp: 'colorPicker', value: null },\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [{ id: 'social', text: 'social' },] },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: null },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 10, left: 10, right: 10, bottom: 10 } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0,\n color: 'transparent',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { analytics: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n sticky\n\n },\n },\n}\n","import {\n shadows, sticky,\n} from './fields/'\n\nexport default {\n tag: 'spacer',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n widthNumber: { title: 'Width', comp: 'InputNumber', value: { number: 2 } },\n color: { title: 'Color', comp: 'colorPicker', value: '#D5E5FF' },\n style: { title: 'Border style', comp: 'selectItem', value: 'solid', options: [{ id: \"dotted\", text: \"Dotted\" }, { id: \"dashed\", text: \"Dashed\" }, { id: \"solid\", text: \"Solid\" }, { id: \"double\", text: \"Double\" }, { id: \"groove\", text: \"Groove\" }, { id: \"ridge\", text: \"Ridge\" }, ] },\n // content: { title: 'Spacer title', comp: 'TextInput', value: '' },\n // alignment: {\n // title: 'Alignment', comp: 'Alignment', value: { alignSide: 'left' }\n // }\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [] },\n sticky\n\n // animations: {\n // title: 'Animations',\n // comp: 'AnimationsInput',\n // value: {\n // property: '',\n // duration: 0,\n // easing: '',\n // }\n // },\n // transformation: {\n // title: 'Transformation',\n // comp: 'TransformationInput',\n // value: {\n // rotateX: 0,\n // rotateY: 0,\n // rotateZ: 0,\n // scaleX: 1,\n // scaleY: 1,\n // scaleZ: 1,\n // }\n // },\n },\n },\n}\n","import {sticky} from \"./fields\";\n\nexport default {\n tag: 'timer',\n labelTitle: '',\n labelColor: '',\n id: {value: null},\n attributes: {\n basic: {\n align: { title: 'Alignment', comp: 'alignment', value: {mobile:null,desktop:'center',tablet:null} },\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n hours: { title: 'Hours', comp: 'InputNumber', value: { number: 1, append:'hours' } },\n hoursLabel: { title: 'Hours label', comp: 'TextInput', value: 'Hours' },\n minutes: { title: 'Minutes', comp: 'InputNumber', value: { number: 45, append:'minutes' } },\n minutesLabel: { title: 'Minutes label', comp: 'TextInput', value: 'Minutes' },\n seconds: { title: 'Seconds', comp: 'InputNumber', value: { number: 15, append:'seconds' } },\n secondsLabel: { title: 'Seconds label', comp: 'TextInput', value: 'Seconds' },\n expireAction: { title: 'Expire action', comp: 'ExpireAction', value: { url: '', mainToggle: ''} },\n numberFont: { title: 'Numbers font', comp: 'FontPanel', value: { fontFamily: null, fontSize: 36, color: '#636A7B', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }} },\n labelsFont : { title: 'Labels font', comp: 'FontPanel', value: { fontFamily: null, fontSize: 16, color: '#b1b2b4', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }} },\n numbersBorder: {\n title: 'Numbers border',\n comp: 'border',\n value: {\n width: 0,\n color: null,\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n numbersBgColor: { title: 'Numbers background color', comp: 'colorPicker', value: null },\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [] },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 10, left: 10, right: 10, bottom: 10 } },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: null },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0,\n color: null,\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { topLeft: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n sticky\n\n // clickAction: {title: 'Click action', comp: 'ClickAction', value: { url: '', toggle: 'no action'} },\n // alternateText: { title: 'Alternate text', comp: 'TextInput', value: '' },\n // alignment: {\n // title: 'Alignment', comp: 'Alignment', value: { alignSide: 'left' }\n // },\n // separator: { title: 'Separator', comp: 'TextInput', value: ':' },\n // animations: {\n // title: 'Animations',\n // comp: 'AnimationsInput',\n // value: {\n // property: '',\n // duration: 0,\n // easing: '',\n // }\n // },\n // shadows: {\n // title: 'Shadows',\n // comp: 'ShadowsInput',\n // value: {\n // angle: 0,\n // distance: 0,\n // blur: 0,\n // spread: 0,\n // color: 'transparent',\n // type: '',\n // }\n // },\n // transformation: {\n // title: 'Transformation',\n // comp: 'TransformationInput',\n // value: {\n // rotateX: 0,\n // rotateY: 0,\n // rotateZ: 0,\n // scaleX: 1,\n // scaleY: 1,\n // scaleZ: 1,\n // }\n // },\n },\n },\n}\n","import {sticky} from \"./fields\";\n\nexport default {\n tag: 'video',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n content: '',\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n videoURL: { title: 'Video URL', comp: 'TextInput', value: 'https://www.youtube.com/watch?v=lRTtMcx6rSM' },\n videoThumbnail: { title: 'Video Thumbnail', comp: 'hidden', value: 'https://img.youtube.com/vi/lRTtMcx6rSM/sddefault.jpg' },\n videoId: { title: 'Video ID', comp: 'hidden', value: 'lRTtMcx6rSM' },\n autoPlay: { title: 'Auto-play', comp: 'ToggleInput', value: { booleanValue: true } },\n loop: { title: 'Loop infinitely', comp: 'ToggleInput', value: { booleanValue: false } },\n showControls: { title: 'Show controls', comp: 'ToggleInput', value: { booleanValue: false } },\n size: { title: 'Video size', comp: 'SizeValue', placeholder:'auto', value: {width:null,height:400/* null will be treated as 'auto'*/} },\n lazyLoad: { title: 'Lazy load', comp: 'ToggleInput', value: { booleanValue: true } },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 0,\n color: 'transparent',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { analytics: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [{ id: 'class1', text: 'class1' }, { id: 'class2', text: 'class2' }, { id: 'class3', text: 'class3' }] },\n sticky\n\n },\n },\n}\n","import {\n shadows,\n textShadows,\n border,\n margin,\n padding,\n font,\n font2,\n linkUrl,\n title,\n cssId,\n cssClasses,\n displayType,\n id,\n backgroundColorButton, sticky\n} from './fields/'\n\nexport default {\n tag: 'formButton',\n labelTitle: 'Form button',\n labelColor: '',\n id,\n attributes: {\n basic: {\n margin,\n content: { title: 'Headline', comp: 'TextInput', value: 'Call To Action' },\n subHeadline: { title: 'Sub-headline', comp: 'TextInput', value: '' },\n font,\n font2,\n backgroundColor: backgroundColorButton,\n border,\n shadows\n },\n advanced: {\n title,\n cssId,\n cssClasses,\n displayType,\n padding,\n textShadows,\n sticky\n\n },\n },\n}\n","import {\n shadows, border, margin, cssId, cssClasses, id, size, backgroundColor, sticky\n} from './fields/'\n\nexport default {\n tag: 'imageSlider',\n labelTitle: '',\n labelColor: '',\n id,\n attributes: {\n basic: {\n margin,\n previewProductImage: { title: 'Preview product image', comp: 'previewImageProps', value: false },\n fitImage: { title: 'Fit image', comp: 'selectItem', value: 'scale-down', options: [\n { id: '', text: 'Default' },\n { id: 'cover', text: 'Cover' },\n { id: 'fill', text: 'Fill' },\n { id: 'scale-down', text: 'Scale down' },\n { id: 'contain', text: 'Contain' },\n { id: 'none', text: 'None' },\n ] },\n size: {\n title: 'Image size',\n comp: 'SizeValue',\n placeholder: 'auto',\n value: {\n width: null,\n height: 300\n }\n },\n thumbSize: {\n title: 'Thumbnails size',\n comp: 'SizeValue',\n placeholder: 'auto',\n value: {\n width: 60,\n height: 60\n }\n },\n imageBorder: {\n title: 'Image border',\n comp: 'border',\n value: {\n width: null,\n color: null,\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { topLeft: null, topRight: null, bottomRight: null, bottomLeft: null },\n }\n },\n // thumbnailsBorder: {\n // title: 'Thumbnails border',\n // comp: 'border',\n // value: {\n // width: null,\n // color: null,\n // style: 'solid',\n // sides: { top: true, left: true, right: true, bottom: true },\n // radius: { topLeft: null, topRight: null, bottomRight: null, bottomLeft: null },\n // }\n // },\n },\n advanced: {\n cssId,\n cssClasses,\n backgroundColor,\n border,\n shadows,\n sticky\n\n },\n },\n}\n","import {\n shadows, buttonShadows, border, margin, padding, font, title, cssId, cssClasses, id, sticky\n} from './fields/'\n\nexport default {\n tag: 'container',\n labelTitle: '',\n labelColor: '',\n id,\n editLock: false,\n attributes: {\n basic: {\n margin,\n orientation: { title: 'Orientation', comp: 'orientation',\n value: {mobile:null,desktop:'row',tablet:null},\n options: [{ id: 'row', text: 'Horizontal' }, { id: 'column', text: 'Vertical' }] },\n align: { title: 'Items alignment', comp: 'alignment', value: {mobile:null,desktop:'start',tablet:null} },\n boxes: {title:'Boxes', comp: 'containerProps', value: [\n {width:'',type:\"%\",content:'1', children:[]},\n // {width:'',type:\"%\",content:'2', children:[]},\n ]},\n font,\n backgroundColor: {title: 'Background color', comp: 'colorPicker', value: ''},\n border,\n shadows,\n textShadows: buttonShadows\n },\n // hover: {\n // backgroundColor: {title: 'Background color', comp: 'colorPicker', value: null},\n // border: {title: 'Border', comp: 'border', value: {\n // width: null,\n // color: null,\n // style: 'solid',\n // sides: { top: true, left: true, right: true, bottom: true },\n // radius: { topLeft: null, topRight: null, bottomRight: null, bottomLeft: null },\n // }\n // },\n // font: {title: 'Headline font', ...hoverFont},\n // font2: {title: 'Sub-headline font', ...hoverFont},\n // shadows,\n // textShadows: buttonShadows\n // },\n advanced: {\n title,\n cssId,\n cssClasses,\n padding: {\n title: 'Padding',\n comp: 'marginPadding',\n value: { top: 0, left: 0, right: 0, bottom: 0 }\n },\n sticky\n\n },\n },\n}\n","import {\n shadows, buttonShadows, border, margin, padding, font, title, cssId, cssClasses, id, sticky\n} from './fields/'\n\nexport default {\n tag: 'faq',\n labelTitle: 'FAQ',\n labelColor: '',\n id,\n editLock: false,\n attributes: {\n basic: {\n margin,\n // orientation: { title: 'Orientation', comp: 'orientation',\n // value: {mobile:null,desktop:'row',tablet:null},\n // options: [{ id: 'row', text: 'Horizontal' }, { id: 'column', text: 'Vertical' }] },\n align: { title: 'Arrow position', comp: 'alignment', value: {mobile:null,desktop:'start',tablet:null} },\n // boxes: {title:'Boxes', comp: 'containerProps', value: [\n // {width:'',type:\"%\",content:'1', children:[]},\n // // {width:'',type:\"%\",content:'2', children:[]},\n // ]},\n isActive: { title: 'Is active?', comp: 'ToggleInput', value: { booleanValue: true } },\n title: { title: 'Title', comp: 'hidden', value: 'Default title' },\n\n font:{\n title: 'Title font',\n comp: 'FontPanel',\n value: {\n fontFamily: '',\n fontSize: 16,\n color: null, // When null it falls-back to the CORE.CSS styles.\n fontStyling: {\n bold: true,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: 'left'\n }\n },\n backgroundColor: {title: 'Background color', comp: 'colorPicker', value: ''},\n headerBackgroundColor: {title: 'Header background color', comp: 'colorPicker', value: ''},\n headerBorder:{\n title: 'Header border',\n comp: 'border',\n value: {\n width: null,\n color: null,\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { topLeft: null, topRight: null, bottomRight: null, bottomLeft: null },\n }\n },\n border,\n headerShadows:{\n title: 'Header shadow',\n comp: 'Shadow',\n value: []\n },\n shadows,\n textShadows: buttonShadows\n },\n hover:{\n font:{\n title: 'Title font',\n comp: 'FontPanel',\n value: {\n fontFamily: '',\n fontSize: 16,\n color: null, // When null it falls-back to the CORE.CSS styles.\n fontStyling: {\n bold: true,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: null\n }\n },\n headerBackgroundColor: {title: 'Header background color', comp: 'colorPicker', value: ''},\n headerBorder:{\n title: 'Header border',\n comp: 'border',\n value: {\n width: null,\n color: null,\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { topLeft: null, topRight: null, bottomRight: null, bottomLeft: null },\n }\n },\n headerShadows:{\n title: 'Header shadow',\n comp: 'Shadow',\n value: []\n },\n textShadows: buttonShadows\n },\n active:{\n font:{\n title: 'Title font',\n comp: 'FontPanel',\n value: {\n fontFamily: '',\n fontSize: 16,\n color: null, // When null it falls-back to the CORE.CSS styles.\n fontStyling: {\n bold: true,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: null\n }\n },\n headerBackgroundColor: {title: 'Header background color', comp: 'colorPicker', value: ''},\n headerBorder:{\n title: 'Header border',\n comp: 'border',\n value: {\n width: null,\n color: null,\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { topLeft: null, topRight: null, bottomRight: null, bottomLeft: null },\n }\n },\n headerShadows:{\n title: 'Header shadow',\n comp: 'Shadow',\n value: []\n },\n textShadows: buttonShadows\n },\n advanced: {\n title,\n cssId,\n cssClasses,\n headerPadding: {\n title: 'Header padding',\n comp: 'marginPadding',\n value: { top: 10, left: 10, right: 10, bottom: 10 }\n },\n padding: {\n title: 'Padding',\n comp: 'marginPadding',\n value: { top: 20, left: 10, right: 10, bottom: 20 }\n },\n sticky\n\n },\n },\n}\n","import {\n shadows,\n border,\n margin,\n cssId,\n cssClasses,\n id,\n size,\n image,\n sticky,\n} from './fields/'\n\nexport default {\n tag: 'beforeAfterSlider',\n labelTitle: '',\n labelColor: '',\n id,\n content:{\n before:\"Before\",\n after:\"After\"\n },\n attributes: {\n basic: {\n align: { title: 'Alignment', comp: 'alignment', value: {mobile:null,desktop:'center',tablet:null} },\n margin,\n beforeImage:{title: 'Before image', comp: 'imageUploader', value: 'https://img.funnelish.com/default/placeholder-before.jpg'},\n afterImage:{title: 'After image', comp: 'imageUploader', value: 'https://img.funnelish.com/default/placeholder-after.jpg'},\n showLabels: { title: 'Show labels', comp: 'Toggle', value: true },\n labelsFont:{\n title: 'Labels font',\n comp: 'FontPanel',\n value: {\n fontFamily: '',\n fontSize: 13,\n color: null, // When null it falls-back to the CORE.CSS styles.\n fontStyling: {\n bold: false,\n italic: false,\n 'line-through': false,\n underline: false,\n },\n textAlign: null\n }\n },\n separatorColor:{\n title: 'Separator color',\n comp: 'colorPicker',\n value: '#FFFFFF'\n },\n labelsBgColor:{\n title: 'Labels background color',\n comp: 'colorPicker',\n value: '#FFFFFFCC'\n },\n size:{\n title: 'Size',\n comp: 'SizeValue',\n placeholder: 'auto',\n value: {\n width: 320,\n height: null /* null will be treated as 'auto'*/\n }\n },\n lazyload: { title: 'Lazyload', comp: 'LazyloadBool', options:{recommended:true},\n value: {booleanValue:true} },\n border:{\n title: 'Border',\n comp: 'border',\n value: {\n width: 2,\n color: '#ffffff',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { topLeft: 3, topRight: 3, bottomRight: 3, bottomLeft: 3 },\n }\n },\n shadows\n },\n advanced: {\n cssId,\n cssClasses,\n sticky\n },\n },\n}\n","import button from './button.js'\nimport custom from './custom.js'\nimport formElement from './formElement.js'\nimport headline from './headline.js'\nimport image from './image.js'\nimport link from './link.js'\nimport menu from './menu.js'\nimport orderBump from './orderBump.js'\nimport orderSummary from './orderSummary.js'\nimport paragraph from './paragraph.js'\nimport paymentForm from './paymentForm.js'\nimport productList from './productList.js'\nimport progressBar from './progressBar.js'\nimport row from './row.js'\nimport section from './section.js'\nimport social from './social.js'\nimport spacer from './spacer.js'\nimport timer from './timer.js'\nimport twoStepForm from './twoStepForm.js'\nimport video from './video.js'\nimport formSpacer from './formSpacer'\nimport formButton from './formButton'\nimport imageSlider from './imageSlider'\nimport container from './container'\nimport faq from './faq'\nimport beforeAfterSlider from './beforeAfterSlider'\n\nexport function findModel(type) {\n let arr = [button,\n faq,\n beforeAfterSlider,\n container,\n imageSlider,\n formButton,\n formSpacer,\n custom,\n formElement,\n headline,\n image,\n link,\n menu,\n orderBump,\n orderSummary,\n paragraph,\n paymentForm,\n productList,\n progressBar,\n row,\n section,\n social,\n spacer,\n timer,\n twoStepForm,\n video];\n for (let i = arr.length - 1; i >= 0; i--) {\n if (arr[i].tag===type) return arr[i];\n }\n return null\n}\n\nexport default {\n beforeAfterSlider,\n faq,\n container,\n imageSlider,\n formSpacer,\n formButton,\n button,\n custom,\n formElement,\n headline,\n image,\n link,\n menu,\n orderBump,\n orderSummary,\n paragraph,\n paymentForm,\n productList,\n progressBar,\n row,\n section,\n social,\n spacer,\n timer,\n twoStepForm,\n video,\n}\n","//var randomstring = require(\"randomstring\");\nimport randomstring from 'randomstring'\nimport {\n shadows, sticky,\n} from './fields/'\n\nexport default {\n tag: 'twoStepForm',\n labelTitle: '',\n labelColor: '',\n id: { value: null },\n // children: [],\n step1Children: [],\n step2Children: [],\n content: {\n formHeader: [\n { step: 1, title: 'Shipping', subtitle: 'Your shipping details' },\n { step: 2, title: 'Your Info', subtitle: 'Your billing details' },\n ],\n },\n attributes: {\n basic: {\n margin: { title: 'Margin', comp: 'marginPadding', value: { top: 0, left: 0, right: 0, bottom: 0 } },\n previewSteps: { title: 'Preview steps', comp: 'StepToggler', value: 1 },\n font: { title: 'Headline font', comp: 'FontPanel', value: { fontFamily: '', fontSize: 18, color: '#252A32', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign: 'left' } },\n font2: { title: 'Sub-headline font', comp: 'FontPanel', value: { fontFamily: '', fontSize: 13, color: '#C5C7D2', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign: 'left' } },\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: '#FFFFFF' },\n // color: { title: 'Label text color', comp: 'colorPicker', value: '#252A32' },\n border: {\n title: 'Border',\n comp: 'border',\n value: {\n width: 2,\n color: '#449CF4',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { analytics: 16, topRight: 16, bottomRight: 16, bottomLeft: 16 },\n }\n },\n shadows\n },\n advanced: {\n cssId: { title: 'ID', comp: 'TextInput', value: '' },\n cssClasses: { title: 'CSS Classes', comp: 'MultiSelectItem', value: [], options: [{ id: 'class1', text: 'class1' }, { id: 'class2', text: 'class2' }, { id: 'class3', text: 'class3' }] },\n padding: { title: 'Padding', comp: 'marginPadding', value: { top: 30, left: 30, right: 30, bottom: 30 } },\n sticky\n\n // animations: {\n // title: 'Animations',\n // comp: 'AnimationsInput',\n // value: {\n // property: '',\n // duration: 0,\n // easing: '',\n // }\n // },\n // transformation: {\n // title: 'Transformation',\n // comp: 'TransformationInput',\n // value: {\n // rotateX: 0,\n // rotateY: 0,\n // rotateZ: 0,\n // scaleX: 1,\n // scaleY: 1,\n // scaleZ: 1,\n // }\n // },\n },\n },\n}\n","import {findModel} from './../models'\nimport { applyDrag, clearUp } from '@/modules/page-editor/src/utils/helpers'\nimport twoStepForm from \"@/modules/page-editor/src/models/twoStepForm\";\nimport {shadows} from \"@/modules/page-editor/src/models/fields\";\nimport Vue from \"vue\";\n\nvar randomstring = require(\"randomstring\");\n\nexport function generateId(numbers = []) {\n var min = 1,\n max = 1000000;\n var randomNumber = Math.floor(Math.random() * (max - min + 1) + min);\n if (numbers.length && numbers.indexOf(randomNumber) !== -1) generateId(numbers);\n else return randomNumber\n}\nvar createCols = function(cols, oldCols = false) {\n var colsData = [];\n switch (cols) {\n case 'one':\n colsData = [{ width: 100, children: [] }]\n break;\n case 'two':\n colsData = [{ width: 50, children: [] }, { width: 50, children: [] }]\n break;\n case 'three':\n colsData = [{ width: 33.3333, children: [] }, { width: 33.3333, children: [] }, { width: 33.3333, children: [] }]\n break;\n case 'four':\n colsData = [{ width: 25, children: [] }, { width: 25, children: [] }, { width: 25, children: [] }, { width: 25, children: [] }]\n break;\n case 'five':\n colsData = [{ width: 75, children: [] }, { width: 25, children: [] }]\n break;\n case 'six':\n colsData = [{ width: 25, children: [] }, { width: 75, children: [] }]\n break;\n }\n if (oldCols !== false) {\n oldCols.forEach((col, index) => {\n if (index < colsData.length) {\n colsData[index].children = col.children\n } else {\n colsData[colsData.length - 1].children.push(...col.children);\n }\n });\n }\n\n return colsData\n}\n\nexport function cloneContainer(context, block, allIds=[]) {\n let clone = JSON.parse(JSON.stringify(block));\n clone.id = generateId([...context.getters.numbers, ...allIds]);\n\n let children = [];\n let ids = []; // used to prevent collision\n\n if (block.type==='faq') {\n let chank = [];\n block.children && block.children.forEach(c => {\n\n // Clone each child and add to global children list.\n let oldChild = context.getters.page_findChild(c);\n if (!oldChild) return;\n\n if (oldChild.type===\"container\"||oldChild.type===\"faq\") {\n let subRes = cloneContainer(context, oldChild, [...ids, ...allIds])\n if (subRes) {\n children.push(subRes.clone)\n chank.push(subRes.clone.id)\n children.push(...subRes.children)\n }\n } else {\n let newId = generateId([...context.getters.numbers, ...ids, ...allIds]);\n ids.push(newId)\n let newChild = JSON.parse(JSON.stringify(oldChild));\n newChild.id = newId\n newChild.parent = clone.id;\n\n children.push(newChild)\n chank.push(newId)\n }\n });\n // clone.attributes.children = chank\n Vue.set(clone, 'children', chank)\n } else {\n let newBoxes = [];\n block.attributes.basic.boxes.forEach(box => {\n let chank = [];\n let newbox = JSON.parse(JSON.stringify(box));\n box.children && box.children.forEach(c => {\n\n // Clone each child and add to global children list.\n let oldChild = context.getters.page_findChild(c);\n if (!oldChild) return;\n\n if (oldChild.type===\"container\"||oldChild.type===\"faq\") {\n let subRes = cloneContainer(context, oldChild, [...ids, ...allIds])\n if (subRes) {\n children.push(subRes.clone)\n chank.push(subRes.clone.id)\n children.push(...subRes.children)\n }\n } else {\n let newId = generateId([...context.getters.numbers, ...ids, ...allIds]);\n ids.push(newId)\n let newChild = JSON.parse(JSON.stringify(oldChild));\n newChild.id = newId\n newChild.parent = clone.id;\n\n children.push(newChild)\n chank.push(newId)\n }\n });\n newbox.children = chank;\n newBoxes.push(newbox);\n });\n clone.attributes.basic.boxes = newBoxes\n }\n\n children.push(clone) // append the new container block itself.\n return {clone,children}\n}\n\n// FIXME: some bug caused corruption of the block.parent.\nfunction repairChildrenParents(children=[], rows=[]) {\n\n const repairChild = (child, parentId, level=1) => {\n child.parent = parentId;\n\n if (child.type==='container') {\n child.attributes.basic.boxes && child.attributes.basic.boxes.forEach(box => {\n box.children && box.children.forEach(id=> {\n let c2 = children.find(x => x.id === id)\n if (!c2) return;\n repairChild(c2, child.id, level+1)\n })\n })\n } else if (child.type==='faq') {\n child.children && child.children.forEach(id => {\n let c2 = children.find(x => x.id === id)\n if (!c2) return;\n repairChild(c2, child.id, level+1)\n })\n }\n }\n\n rows.forEach(row => {\n if (!row.cols) return;\n row.cols.forEach(col=> {\n col.children && col.children.forEach(id=>{\n let child = children.find(x=>x.id===id)\n if (!child) return;\n repairChild(child, row.id)\n })\n })\n })\n}\n\nexport function applyTemplate(state, value) {\n state.currentTemplate.id = value.id || false;\n state.currentTemplate.name = value.name || false;\n state.currentTemplate.seo_description = value.seo_description || false;\n state.currentTemplate.seo_keywords = value.seo_keywords || '';\n state.currentTemplate.seo_title = value.seo_title || false;\n state.currentTemplate.url = value.url || \"\";\n\n if (!value.clear && value.config.page && value.config.editor && Object.keys(value.config.page).length && Object.keys(value.config.editor).length) {\n state.page = {...value.config.page };\n state.editor.content = value.config.editor.content;\n state.editor.rows = value.config.editor.rows;\n state.editor.children = value.config.editor.children;\n\n repairChildrenParents(state.editor.children, state.editor.rows)\n\n var { body_js, head_js, html, css } = value\n state.customCode = { body_js, head_js, html, css };\n } else {\n state.editor.content = [];\n state.editor.rows = [];\n state.editor.children = [];\n state.page = {\n basic: {\n backgroundColor: '#fff',\n backgroundImage: '',\n padding: { top: 68, left: 30, right: 30, bottom: 100 },\n font: {\n fontStyling: { bold: false, italic: false, 'line-through': false, underline: false },\n color: '#252A32',\n fontFamily: 'Roboto',\n fontSize: 14,\n },\n border: {\n radius: { bottomLeft: 0, bottomRight: 0, analytics: 0, topRight: 0 },\n sides: { bottom: true, left: true, right: true, top: true },\n color: 'transparent',\n style: 'solid',\n width: 0\n }\n },\n advanced: { id: '', cssClasses: [], direction:'ltr' }\n }\n }\n}\n\nexport default {\n state: {\n popup: null,\n content: [],\n rows: [],\n children: [],\n formChildren: [\n {\n tag: 'productList',\n type: 'productList',\n id: 0,\n step: 2,\n attributes: {\n basic: {\n margin: {top: 15, left: 0, right: 0, bottom: 0},\n selectionType: 'single',\n labelFont: { fontFamily: null, fontSize: 12, color: '#97AACD', fontStyling: { } },\n font: { fontFamily: '', fontSize: 12, color: '#252A32', fontStyling: { }},\n backgroundColor: { title: 'Background color', comp: 'colorPicker', value: 'white' },\n },\n advanced: {}\n }\n },\n {\n tag: 'paymentForm',\n type: 'paymentForm',\n id: 0,\n step: 2,\n attributes: {\n basic: {\n margin: { top: 20, left: 0, right: 0, bottom: 0 },\n },\n advanced: {}\n }\n },\n {\n tag: 'orderSummary',\n type: 'orderSummary',\n id: 0,\n step: 2,\n content: {\n topTitles: ['Product', 'Price'],\n bottomLeftText: 'Total',\n },\n attributes: {\n basic: {\n font: { fontFamily: null, fontSize: 12, color: '#97AACD', fontStyling: { } },\n font2: { fontFamily: null, fontSize: 12, color: '#252A32', fontStyling: { }},\n\n margin: {top: 20, left: 0, right: 0, bottom: 0}\n },\n advanced: {}\n },\n },\n {\n tag: 'orderBump',\n type: 'orderBump',\n id: 0,\n step: 2,\n attributes: {\n basic: {\n labelFont: { fontFamily: null, fontSize: 18, color: null, fontStyling: { }, textAlign:'left' },\n margin: {top: 20, left: 0, right: 0, bottom: 0},\n border: {width: 2, color: '#FDCC5E', style: 'dashed', sides: {top: true, left: true, right: true, bottom: true},\n radius: {analytics: 6, topRight: 6, bottomRight: 6, bottomLeft: 6},\n },\n },\n advanced: {\n padding: { top: 15, left: 15, right: 15, bottom: 15 },\n }\n }\n },\n {\n tag: 'formElement',\n type: 'formElement',\n id: 0,\n step: 1,\n attributes: {\n basic: {\n inputType: 'input',\n props: {\n required:true,\n showLabel: true,\n dataType: 'full_name',\n dataType2: '',\n placeholder: 'Full name',\n placeholder2: '',\n value: '',\n optionsType: 'countries',\n options: [],\n },\n label: 'Full name',\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n },\n advanced: {}\n }\n },\n {\n tag: 'formElement',\n type: 'formElement',\n id: 0,\n step: 1,\n attributes: {\n basic: {\n inputType: 'input',\n props: {\n required:true,\n showLabel: true,\n dataType: 'email',\n dataType2: '',\n placeholder: 'Email',\n placeholder2: '',\n value: '',\n optionsType: 'countries',\n options: [],\n },\n label: 'Email',\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n },\n advanced: {}\n }\n },\n {\n tag: 'formElement',\n type: 'formElement',\n id: 0,\n step: 1,\n attributes: {\n basic: {\n inputType: 'input',\n props: {\n required:true,\n showLabel: true,\n dataType: 'phone',\n dataType2: '',\n placeholder: 'Phone number',\n placeholder2: '',\n value: '',\n optionsType: 'countries',\n options: [],\n },\n label: 'Phone number',\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n },\n advanced: {}\n }\n },\n {\n tag: 'formSpacer',\n type: 'formSpacer',\n id: 0,\n step: 1,\n attributes: {\n basic: {\n label: 'Shipping address',\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n },\n advanced: {}\n }\n },\n {\n tag: 'formElement',\n type: 'formElement',\n id: 0,\n step: 1,\n attributes: {\n basic: {\n inputType: 'input',\n props: {\n required:true,\n showLabel: true,\n dataType: 'shipping_address',\n dataType2: '',\n placeholder: 'Shipping address',\n placeholder2: '',\n value: '',\n optionsType: 'countries',\n options: [],\n },\n label: 'Address line',\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n },\n advanced: {}\n }\n },\n {\n tag: 'formElement',\n type: 'formElement',\n id: 0,\n step: 1,\n attributes: {\n basic: {\n inputType: 'input',\n props: {\n required:true,\n showLabel: true,\n dataType: 'shipping_city',\n dataType2: '',\n placeholder: 'Shipping city',\n placeholder2: '',\n value: '',\n optionsType: 'countries',\n options: [],\n },\n label: 'City',\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n },\n advanced: {}\n }\n },\n {\n tag: 'formElement',\n type: 'formElement',\n id: 0,\n step: 1,\n attributes: {\n basic: {\n inputType: 'select',\n props: {\n required:true,\n showLabel: true,\n dataType: 'shipping_country',\n dataType2: '',\n placeholder: 'Shipping country',\n placeholder2: '',\n value: '',\n optionsType: 'countries',\n options: [],\n },\n label: 'Country',\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n },\n advanced: {}\n }\n },\n {\n tag: 'formElement',\n type: 'formElement',\n id: 0,\n step: 1,\n attributes: {\n basic: {\n inputType: 'double',\n label: 'State / Province',\n label2: 'ZIP code',\n props: {\n required:true,\n showLabel: true,\n dataType: 'shipping_state',\n dataType2: 'shipping_zip',\n placeholder: 'Shipping state',\n placeholder2: 'Shipping zip code',\n value: '',\n optionsType: 'countries',\n options: [],\n },\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n },\n advanced: {}\n }\n },\n {\n tag: 'formButton',\n type: 'formButton',\n id: 0,\n step: 1,\n attributes: {\n basic: {\n content: 'Go to step #2',\n subHeadline: '',\n margin: { top: 20, left: 0, right: 0, bottom: 0 },\n font: { fontFamily: null, fontSize: 18, color: '#F6F9FE', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign:'center' },\n linkUrl: { mainToggle:\"submit-1st-step\", target:\"_parent\", url:\"#submit-1st-step\" },\n },\n advanced: {\n displayType: 'block',\n padding: { top: 15, left: 30, right: 30, bottom: 15 },\n }\n }\n },\n {\n tag: 'paragraph',\n type: 'paragraph',\n id: 0,\n step: 1,\n content: 'We respect your privacy & information
',\n attributes: {\n basic: {\n subHeadline: '',\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n font: { fontFamily: null, fontSize: 12, color: '#97aacd', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign:'center' },\n },\n advanced: {\n displayType: 'block',\n padding: { top: 5, left: 0, right: 0, bottom: 5 },\n }\n }\n },\n {\n tag: 'formButton',\n type: 'formButton',\n id: 0,\n step: 2,\n attributes: {\n basic: {\n content: 'Complete order',\n subHeadline: '',\n margin: { top: 20, left: 0, right: 0, bottom: 0 },\n font: { fontFamily: null, fontSize: 18, color: '#F6F9FE', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign:'center' },\n linkUrl: { mainToggle:\"submit\", target:\"_parent\", url:\"#submit-step\" },\n },\n advanced: {\n displayType: 'block',\n padding: { top: 15, left: 30, right: 30, bottom: 15 },\n }\n }\n },\n {\n tag: 'paragraph',\n type: 'paragraph',\n id: 0,\n step: 2,\n content: '100% secure and safe payment
',\n attributes: {\n basic: {\n subHeadline: '',\n margin: { top: 10, left: 0, right: 0, bottom: 0 },\n font: { fontFamily: null, fontSize: 12, color: '#97aacd', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign:'center' },\n },\n advanced: {\n displayType: 'block',\n padding: { top: 5, left: 0, right: 0, bottom: 5 },\n }\n }\n },\n ],\n },\n getters: {\n current_popup({ editor }) {\n return editor.popup\n },\n // Checks if the popup content has changed.\n popupChanged({ editor }) {\n if (!editor.popup) return;\n\n let popup = JSON.parse(JSON.stringify(editor.popup));\n let configForSave = {\n children: popup.children,\n content: popup.content,\n rows: popup.rows,\n attributes: popup.attributes\n };\n let newConfig = JSON.stringify(configForSave);\n return editor.popup.config !== newConfig;\n\n },\n page_numbers({ editor }) {\n let numbers = []\n editor.content.forEach(item => numbers.push(item.id));\n editor.rows.forEach(item => numbers.push(item.id));\n editor.children.forEach(item => numbers.push(item.id));\n return numbers\n },\n popup_numbers({ editor }) {\n let numbers = [];\n editor.popup.content.forEach(item => numbers.push(item.id));\n editor.popup.rows.forEach(item => numbers.push(item.id));\n editor.popup.children.forEach(item => numbers.push(item.id));\n return numbers\n },\n numbers({ editor }, getters) {\n let isPopup = !!editor.popup; // if there is an active popup\n return isPopup ? getters.popup_numbers : getters.page_numbers;\n },\n page_findOne({ editor }) {\n return (id,isPopup=false) => {\n let context = (isPopup ? editor.popup : editor)\n\n return (context.content ? context.content.find(item => item.id === id) : null) ||\n (context.rows ? context.rows.find(item => item.id === id) : null) ||\n (context.children ? context.children.find(item => item.id === id) : null)\n // editor.formChildren.find(item => item.id === id)\n }\n },\n page_findChild({ editor }) {\n return (id, isPopup=false) => {\n return (isPopup ? editor.popup : editor).children.find(item => item.id === id);\n }\n },\n page_findChildren({ editor }) {\n return (ids, isPopup=false) => {\n let blocks = [];\n if (!ids) return [];\n\n // maintain source ids indices\n ids.forEach(id => {\n let block = (isPopup ? editor.popup : editor).children.find(item => item.id === id)\n if (block) blocks.push(block);\n });\n return blocks;\n }\n },\n page_findRows({ editor }) {\n return (ids, isPopup=false) => {\n let rows = [];\n if (!ids) return [];\n // maintain source ids indices\n ids.forEach(id => {\n let row = (isPopup ? editor.popup : editor).rows.find(item => item.id === id)\n if (row) rows.push(row);\n });\n return rows;\n }\n },\n page_findRow({ editor }) {\n return (id, isPopup=false) => {\n if (!id) return null;\n return (isPopup ? editor.popup : editor).rows.find(item => item.id === id)\n }\n },\n page_findAll({ editor }) {\n return (isPopup=false) => {\n return (isPopup ? editor.popup : editor).content\n }\n },\n page_sections({ editor }) {\n // console.log(\"page_sections\")\n return editor.content\n },\n },\n mutations: {\n emptyState(state, doneState) {\n var editor = doneState ? JSON.parse(doneState.editor) : {\n content: [{id:9}],\n rows: [],\n children: [],\n formChildren: state.formChildren\n };\n var page = doneState.page ? JSON.parse(doneState.page) : {\n basic: {\n pagePopup: {path:'',showWhen:'exitIntent',param1:'',param2:''},\n backgroundColor: '#fff',\n backgroundImage: '',\n backgroundStyle: 'cover',\n backgroundPosition: 'top',\n padding: { top: 0, left: 0, right: 0, bottom: 0 },\n font: {\n fontStyling: { bold: false, italic: false, 'line-through': false, underline: false },\n color: '#252A32',\n fontFamily: 'Roboto',\n fontSize: 14,\n },\n border: {\n radius: { bottomLeft: 0, bottomRight: 0, analytics: 0, topRight: 0 },\n sides: { bottom: true, left: true, right: true, top: true },\n color: 'transparent',\n style: 'solid',\n width: 0\n }\n },\n advanced: {\n id: '',\n cssClasses: [],\n direction:'ltr',\n }\n }\n var currentTemplate = doneState ? JSON.parse(doneState.currentTemplate) : {\n id: false,\n name: false,\n seo_description: false,\n seo_keywords: '',\n seo_title: false,\n };\n // this.replaceState({editor,page,currentTemplate})\n // applyTemplate(state, JSON.parse(JSON.stringify(state.emptyStateData)))\n\n state.editor = editor;\n state.page = page;\n state.currentTemplate = currentTemplate;\n // state.editor = JSON.parse(JSON.stringify(editor));\n // state.page = JSON.parse(JSON.stringify(page));\n // state.currentTemplate = JSON.parse(JSON.stringify(currentTemplate));\n },\n //SECTIONS\n PAGE_ADD_BLOCK({ editor }, { item, index/*, isPopup*/ }) {\n item.children = [];\n let context = editor.popup || editor;\n context.content.splice(index, 0, item)\n },\n PAGE_REMOVE_BLOCK({ editor }, value) {\n let context = editor.popup || editor;\n\n var target = context.content.findIndex(item => item.id === value);\n var targetRows = context.rows.filter(row => row.parent === value);\n var targetChildren = [];\n targetRows.forEach(item => item.cols.forEach(col => targetChildren.push(...col.children)));\n context.children = context.children.filter(child => targetChildren.indexOf(child.id) === -1);\n context.rows = context.rows.filter(row => row.parent !== value);\n context.content.splice(target, 1);\n\n //CLEAR CHILDREN\n context.children = clearUp(context).children\n },\n PAGE_CLONE_BLOCK({ editor }, { clone, id, newRows, newChildren }) {\n let context = editor.popup || editor;\n\n context.children.push(...newChildren);\n context.rows.push(...newRows);\n\n let sectionIndex = context.content.findIndex(item => item.id === id);\n context.content.splice(sectionIndex + 1, 0, clone);\n },\n\n PAGE_ADD_ELEMENT({ editor }, {newEl,parent,index,col,toBoxIndex,newSection,newRow,newChildren,newBlock,newRows}) {\n let context = editor.popup || editor;\n\n console.log(\"newChildren\", newChildren)\n console.log(\"newRows\", newRows)\n console.log(\"newEl\", newEl)\n\n context.children.push(...(newChildren || []));\n context.rows.push(...(newRows || []));\n\n if (newEl.type==='section') {\n context.content.splice(index, 0, newEl);\n } else if (newEl.type==='row') {\n let parentSection = context.content.find(x=>x.id===parent)\n newEl.parent = parentSection.id\n context.rows.push(newEl);\n parentSection.children.splice(index, 0, newEl.id);\n } else {\n let parentEl = context.rows.find(x=>x.id===parent)\n if (!parentEl) {\n parentEl = context.children.find(x => x.id === parent)\n if (parentEl.type==='container') {\n let box = parentEl.attributes.basic.boxes[toBoxIndex]\n if (!box.children) Vue.set(box, \"children\", []);\n\n if (box.children.length) box.children.splice(index, 0, newEl.id);\n else box.children.push(newEl.id);\n } else\n parentEl.children.splice(index, 0, newEl.id);\n } else {\n parentEl.cols[col||0].children.splice(index, 0, newEl.id);\n }\n }\n },\n PAGE_EDIT_BLOCK({ editor }, value) {\n let context = editor.popup || editor;\n let target = context.children.findIndex(item => item.id === value.id);\n\n context.children.splice(target, 1, value);\n },\n PAGE_EDIT_FIELD({ editor }, { id, field, value, tab, type }) {\n let context = editor.popup || editor;\n\n if (type === 'section') {\n let targetIndex = context.content.findIndex(item => item.id === id);\n\n /// WHY JSON this?\n // var saveStr = JSON.stringify(editor.content[targetIndex]);\n // var updatedItem = JSON.parse(saveStr);\n // if (tab) updatedItem.attributes[tab][field] = value;\n // else updatedItem[field] = value;\n // editor.content.splice(targetIndex, 1, updatedItem);\n\n /// AND NOT THIS?\n // Instead of stringify we update the ref element directly!\n let child = context.content[targetIndex];\n if (tab) {\n if (!child.attributes[tab]) {\n Vue.set(child.attributes, tab, {})\n } // Init tab if null, eg. \"hover\"\n Vue.set(child.attributes[tab], field, value)\n } else {\n Vue.set(child, field, value)\n }\n } else if (type === 'row') {\n let targetIndex = context.rows.findIndex(item => item.id === id);\n\n /// WHY JSON this?\n // var saveStr = JSON.stringify(editor.rows[targetIndex]);\n // var updatedItem = JSON.parse(saveStr);\n // if (tab) updatedItem.attributes[tab][field] = value;\n // else updatedItem[field] = value;\n //\n // if (field === 'cols') {\n // var newCols = createCols(value, editor.rows[targetIndex].cols);\n // updatedItem.cols = newCols;\n // }\n // editor.rows.splice(targetIndex, 1, updatedItem);\n\n /// AND NOT THIS?\n // Instead of stringify we update the ref element directly!\n let child = context.rows[targetIndex];\n if (tab) {\n if (!child.attributes[tab]) {\n Vue.set(child.attributes, tab, {})\n } // Init tab if null, eg. \"hover\"\n Vue.set(child.attributes[tab], field, value)\n } else {\n Vue.set(child, field, value)\n }\n if (field === 'cols') {\n var newCols = createCols(value, child.cols);\n child.cols = newCols;\n }\n } else {\n var targetIndex = context.children.findIndex(item => item.id === id);\n\n /// WHY JSON this?\n // var saveStr = JSON.stringify(editor.children[targetIndex]);\n // if (saveStr) {\n // let updatedItem = JSON.parse(saveStr);\n // if (tab) {\n // if (!updatedItem.attributes[tab]) updatedItem.attributes[tab] = {}; // Init tab if null, eg. \"hover\"\n // updatedItem.attributes[tab][field] = value;\n // }\n // else updatedItem[field] = value;\n // editor.children.splice(targetIndex, 1, updatedItem);\n // }\n\n /// AND NOT THIS?\n // Instead of stringify we update the ref element directly!\n let child = context.children[targetIndex];\n if (tab) {\n if (!child.attributes[tab]) {\n Vue.set(child.attributes, tab, {})\n } // Init tab if null, eg. \"hover\"\n\n Vue.set(child.attributes[tab], field, value)\n // child.attributes[tab][field] = value;\n } else {\n Vue.set(child, field, value)\n }\n }\n },\n PAGE_DROP_BLOCK({ editor }, dropResult) {\n let context = editor.popup || editor;\n context.content = applyDrag(context.content, dropResult);\n },\n //ROWS\n PAGE_ADD_ROW({ editor }, { type, parent, id, cols = false, index }) {\n var colsData = createCols(cols);\n var target;\n var newRow = { id, type, labelTitle: 'My Row', labelColor: '#449CF4',\n attributes: {\n basic: { cols,\n shadows:[],\n backgroundImage:'',\n backgroundColor:'',\n padding:{ top: 0, left: 0, right: 0, bottom: 0 },\n margin:{ top: 0, left: 0, right: 0, bottom: 0 },\n font: { fontFamily: '', fontSize: 14, color: '#303030', fontStyling: { bold: false, italic: false, 'line-through': false, underline: false, }, textAlign: 'initial' },\n border: {\n width: 0,\n color: 'transparent',\n style: 'solid',\n sides: { top: true, left: true, right: true, bottom: true },\n radius: { analytics: 0, topRight: 0, bottomRight: 0, bottomLeft: 0 },\n }\n },\n advanced: {\n cssId:'',\n title:'My Row',\n cssClasses:[],\n }\n },\n cols: colsData, };\n\n // get current active context (popup or editor)\n let context = editor.popup || editor;\n\n if (parent) target = context.content.find(item => item.id === parent);\n else target = context.content[0] || false;\n\n if (target) {\n newRow.parent = target.id;\n if (target.children.indexOf(newRow.id) === -1) target.children.splice(index, 0, newRow.id);\n context.rows.push(newRow);\n //router.push({ path: '/basic/' + newRow.id });\n } else alert('Place at least one section please');\n },\n PAGE_CHANGE_COLS({ editor }, { row, cols }) {\n let colsData = [];\n let context = editor.popup || editor;\n\n switch (cols) {\n case 'one':\n colsData = [{ width: 100, children: [] }]\n break;\n case 'two':\n colsData = [{ width: 50, children: [] }, { width: 50, children: [] }]\n break;\n case 'three':\n colsData = [{ width: 33.3333, children: [] }, { width: 33.3333, children: [] }, { width: 33.3333, children: [] }]\n break;\n case 'four':\n colsData = [{ width: 25, children: [] }, { width: 25, children: [] }, { width: 25, children: [] }, { width: 25, children: [] }]\n break;\n case 'five':\n colsData = [{ width: 75, children: [] }, { width: 25, children: [] }]\n break;\n case 'six':\n colsData = [{ width: 25, children: [] }, { width: 75, children: [] }]\n break;\n }\n let target = context.rows.find(r => r.id === row);\n target.cols = colsData\n },\n PAGE_DROP_ROW({ editor }, { removedIndex, addedIndex, payload }) {\n let context = editor.popup || editor;\n let section = context.content.find(s => s.id === payload.sectionId);\n section.children = applyDrag(section.children, { removedIndex, addedIndex, payload });\n },\n PAGE_DROP_ROW_ADD({ editor }, { from, to, id, item, index }) {\n let context = editor.popup || editor;\n\n item.parent = to;\n let sectionFrom = context.content.find(s => s.id === from);\n let sectionTo = context.content.find(s => s.id === to);\n let targetIndex = sectionFrom.children.findIndex(t => t === id);\n sectionFrom.children.splice(targetIndex, 1);\n sectionTo.children.splice(index, 0, id);\n },\n PAGE_RESIZE_BOX({ editor }, { containerId, index, width }) {\n let context = editor.popup || editor;\n\n let targetContainer = context.content.find(r => r.id === containerId);\n let delta = targetContainer.attributes.basic.boxes[index].value - width;\n targetContainer.attributes.basic.boxes[index].value = width\n targetContainer.attributes.basic.boxes[index + 1].value += delta\n },\n PAGE_RESIZE_COL({ editor }, { row, col, width }) {\n let context = editor.popup || editor;\n\n let targetRow = context.rows.find(r => r.id === row);\n let delta = targetRow.cols[col].width - width;\n targetRow.cols[col].width = width\n targetRow.cols[col + 1].width += delta\n },\n PAGE_REMOVE_ROW({ editor }, { row, index }) {\n let context = editor.popup || editor;\n\n let trashRow = context.rows.find(r => r.id === row);\n let targetRow = context.rows.findIndex(r => r.id === row);\n let targetSection = context.content.findIndex(item => item.id === context.rows[targetRow].parent);\n\n context.content[targetSection].children.splice(index, 1);\n context.rows.splice(targetRow, 1);\n\n //CLEAR CHILDREN\n context.children = clearUp(context).children\n },\n PAGE_CLONE_ROW({ editor }, { clone, id, newChildren }) {\n let context = editor.popup || editor;\n\n context.children.push(...newChildren);\n context.rows.push(clone);\n\n let section = context.content.find(item => item.id === clone.parent);\n let ancestorIndex = section.children.findIndex(item => item === id);\n\n section.children.splice(ancestorIndex+1, 0, clone.id);\n },\n //COMMON BLOCKS\n\n PAGE_ADD_COMMON({ editor }, { type, row, col, index, id, containerId=0,\n toBoxIndex=0, isBox=false }) {\n let newChild = {};\n let context = editor.popup || editor;\n\n if (type == \"twoStepForm\") {\n newChild = {\n id,\n type,\n parent: row,\n step1Children: [],\n step2Children: [],\n labelTitle: 'My Block',\n labelColor: '#449CF4',\n attributes: {\n basic: {\n margin: {top: 0, left: 0, right: 0, bottom: 0}, previewSteps: 1, font: {\n fontFamily: '',\n fontSize: 18,\n color: '#252A32',\n fontStyling: {bold: false, italic: false, 'line-through': false, underline: false,},\n textAlign: 'left'\n }, font2: {\n fontFamily: '',\n fontSize: 13,\n color: '#C5C7D2',\n fontStyling: {bold: false, italic: false, 'line-through': false, underline: false,},\n textAlign: 'left'\n }, backgroundColor: '#FFFFFF', border: {\n width: 2,\n color: '#449CF4',\n style: 'solid',\n sides: {top: true, left: true, right: true, bottom: true},\n radius: {analytics: 16, topRight: 16, bottomRight: 16, bottomLeft: 16},\n }, shadows: [],\n }, advanced: {\n cssId: '', cssClasses: [], padding: {top: 15, left: 15, right: 15, bottom: 15},\n },\n },\n };\n\n for (let index = 0; index < editor.formChildren.length; index++) {\n var cloneStr = JSON.stringify(editor.formChildren[index])\n var clone = JSON.parse(cloneStr)\n clone.id = parseInt(randomstring.generate({length: 5, charset: 'numeric'}))\n\n if (clone.step === 1) newChild.step1Children.push(clone.id); else newChild.step2Children.push(clone.id);\n\n context.children.push(clone);\n }\n } else {\n newChild = { id, type, parent: isBox ? containerId : row, labelTitle: 'My Block', labelColor: '#449CF4', attributes: { basic: {}, advanced: {} }, };\n let model = findModel(type)\n if (model) {\n // copy over default content if any (eg. used by Paragraph, Headline...etc).\n newChild.content = model.content || '';\n\n // Apply default props\n Object.keys(model.attributes.basic).forEach(key => {\n let value = model.attributes.basic[key];\n if (typeof value.value === 'object') newChild.attributes.basic[key] = JSON.parse(JSON.stringify(value.value));\n else newChild.attributes.basic[key] = value.value;\n });\n Object.keys(model.attributes.advanced).forEach(key => {\n let value = model.attributes.advanced[key];\n if (typeof value.value === 'object') newChild.attributes.advanced[key] = JSON.parse(JSON.stringify(value.value));\n else newChild.attributes.advanced[key] = value.value;\n });\n }\n }\n\n let targetRow = context.rows.find(r => r.id === row);\n context.children.push(newChild);\n if (isBox) {\n let container = context.children.find(c => c.id === containerId)\n if (container.type==='faq') {\n if (!container.children)\n Vue.set(container, \"children\", []);\n\n if (container.children.length)\n container.children.splice(index, 0, id);\n else container.children.push(id);\n } else {\n if (!container.attributes.basic.boxes[toBoxIndex].children)\n Vue.set(container.attributes.basic.boxes[toBoxIndex], \"children\", []);\n\n if (container.attributes.basic.boxes[toBoxIndex].children.length)\n container.attributes.basic.boxes[toBoxIndex].children.splice(index, 0, id);\n else container.attributes.basic.boxes[toBoxIndex].children.push(id);\n }\n } else {\n if (targetRow.cols[col].children.length) targetRow.cols[col].children.splice(index, 0, id);\n else targetRow.cols[col].children.push(id);\n }\n },\n PAGE_DROP_COMMON({ editor }, { removedIndex, addedIndex, payload, containerId=0,\n toBoxIndex=0, isBox=false }) {\n let context = editor.popup || editor;\n\n if (isBox) {\n let container = context.children.find(c => c.id === containerId)\n if (container.type==='faq') {\n if (!container.children)\n Vue.set(container, \"children\", []);\n\n container.children =\n applyDrag(container.children, { removedIndex, addedIndex, payload });\n } else {\n if (!container.attributes.basic.boxes[toBoxIndex].children)\n Vue.set(container.attributes.basic.boxes[toBoxIndex], \"children\", []);\n\n container.attributes.basic.boxes[toBoxIndex].children =\n applyDrag(container.attributes.basic.boxes[toBoxIndex].children, { removedIndex, addedIndex, payload });\n }\n } else {\n let row = context.rows.find(r => r.id === payload.rowFrom);\n let col = payload.colFrom;\n row.cols[col].children = applyDrag(row.cols[col].children, { removedIndex, addedIndex, payload });\n }\n },\n PAGE_DROP_COMMON_ADD({ editor }, { from, colFrom, indexFrom, to, colTo, indexTo, item,\n fromContainerId=-1, toContainerId=-1, fromBoxIndex=-1, toBoxIndex=-1}) {\n let context = editor.popup || editor;\n\n let rowFrom = from > 0 ? context.rows.find(r => r.id === from) : null;\n let rowTo = to > 0 ? context.rows.find(r => r.id === to) : null;\n let fromContainer = fromContainerId > 0 ? context.children.find(c => c.id === fromContainerId) : null\n let toContainer = toContainerId > 0 ? context.children.find(c => c.id === toContainerId) : null\n\n let block = context.children.find(c => c.id === item)\n if (!block) {\n console.error(\"invalid block\", item)\n return\n }\n if (fromContainer) {\n if (fromContainer.type==='faq') {\n if (!fromContainer.children)\n Vue.set(fromContainer, \"children\", []);\n fromContainer.children.splice(indexFrom, 1);\n } else {\n if (!fromContainer.attributes.basic.boxes[fromBoxIndex].children)\n Vue.set(fromContainer.attributes.basic.boxes[fromBoxIndex], \"children\", []);\n fromContainer.attributes.basic.boxes[fromBoxIndex].children.splice(indexFrom, 1);\n }\n } else {\n rowFrom.cols[colFrom].children.splice(indexFrom, 1);\n }\n\n if (toContainer) {\n if (toContainer.type==='faq') {\n if (!toContainer.children)\n Vue.set(toContainer, \"children\", []);\n toContainer.children.splice(indexTo, 0, item);\n } else {\n if (!toContainer.attributes.basic.boxes[toBoxIndex].children)\n Vue.set(toContainer.attributes.basic.boxes[toBoxIndex], \"children\", []);\n toContainer.attributes.basic.boxes[toBoxIndex].children.splice(indexTo, 0, item);\n }\n block.parent = toContainerId\n } else {\n rowTo.cols[colTo].children.splice(indexTo, 0, item);\n block.parent = to\n }\n },\n PAGE_REMOVE_COMMON({ editor }, { row, col, index, id, containerId=-1, boxIndex=-1 }) {\n let context = editor.popup || editor;\n let targetChild = context.children.findIndex(c => c.id === id);\n\n if (containerId >= 0) {\n let container = context.children.find(r => r.id === containerId)\n if (!container) return;\n if (container.type==='faq')\n container.children.splice(index, 1)\n else\n container.attributes.basic.boxes[boxIndex].children.splice(index, 1)\n } else {\n let targetRow = context.rows.find(r => r.id === row);\n targetRow.cols[col].children.splice(index, 1);\n }\n context.children.splice(targetChild, 1);\n },\n PAGE_CLONE_COMMON({ editor }, { row, col, index, clone, containerId=-1,\n boxIndex=-1, children=[] }) {\n let context = editor.popup || editor;\n\n if (containerId >= 0) {\n let container = context.children.find(r => r.id === containerId)\n if (!container) return;\n if (container.type==='faq')\n container.children.splice(index, 0, clone.id)\n else\n container.attributes.basic.boxes[boxIndex].children.splice(index, 0, clone.id)\n } else {\n let targetRow = context.rows.find(r => r.id === row);\n targetRow.cols[col].children.splice(index, 0, clone.id);\n }\n\n if (clone.type===\"container\"||clone.type==='faq') {\n // append all subsequent children (children includes all container blocks as well)\n context.children.push(...children)\n } else\n context.children.push(clone);\n },\n // FORM CHILDREN\n PAGE_ADD_FORM_CHILDREN({ editor }, { type, form, index, id, step = 1, attributes = false, content='' }) {\n let newFormChild = {};\n let context = editor.popup || editor;\n\n if (step && attributes) {\n newFormChild = { id, type, tag: type, step, labelTitle: 'My Block', content:content, labelColor: '#449CF4', attributes };\n } else {\n newFormChild = { id, type, tag: type, labelTitle: 'My Block', labelColor: '#449CF4', attributes: { basic: {}, advanced: {} }, };\n }\n\n context.children.push(newFormChild);\n\n let targetForm = context.children.find(r => r.id === form);\n if (step===1) {\n if (targetForm.step1Children.length && index) targetForm.step1Children.splice(index, 0, id);\n else targetForm.step1Children.push(id);\n } else {\n if (targetForm.step2Children.length && index) targetForm.step2Children.splice(index, 0, id);\n else targetForm.step2Children.push(id);\n }\n\n },\n PAGE_MOVE_FORM_CHILD({ editor }, { dropResult, form, step }) {\n let context = editor.popup || editor;\n let targetForm = context.children.find(r => r.id === form);\n\n if (step===1) targetForm.step1Children = applyDrag(targetForm.step1Children, dropResult)\n else targetForm.step2Children = applyDrag(targetForm.step2Children, dropResult)\n },\n PAGE_REMOVE_FORM_CHILDREN({ editor }, { itemId, itemIndex, form, stepNumber }) {\n let context = editor.popup || editor;\n let targetForm = context.children.find(r => r.id === form);\n let targetChild = context.children.findIndex(c => c.id === itemId);\n\n if (stepNumber===2) {\n let index = targetForm.step2Children.findIndex(x => x===itemId);\n if (index>=0) targetForm.step2Children.splice(index, 1);\n } else {\n let index = targetForm.step1Children.findIndex(x => x===itemId);\n if (index>=0) targetForm.step1Children.splice(index, 1);\n }\n context.children.splice(targetChild, 1);\n },\n PAGE_APPLY_CUSTOM_CODE({ editor }, newItems) {\n //update children content\n newItems.children.forEach((child, index) => {\n var target = editor.children.find(c => c.id === child.id);\n\n // {type: \"button\", row: 55292, col: 0, index: 0, id: 97691}\n if (target === undefined) {\n console.log('PAGE_APPLY_CUSTOM_CODE child:', child);\n // PAGE_ADD_COMMON({type: \"button\", row: 55292, col: 0, index: 0, id: 97691});\n return\n }\n\n child.content ? target.content = child.content : '';\n\n if (target.type === 'link') {\n target.attributes.basic.content = child.basic.content\n if (target.attributes.basic.linkUrl.url !== undefined) {\n target.attributes.basic.linkUrl.url = child.basic.linkUrl.url\n }\n }\n\n if (child.basic) {\n for (var prop in child.basic) {\n target.attributes.basic[prop] = child.basic[prop]\n }\n }\n\n if (child.advanced) {\n for (var prop in child.advanced) {\n target.attributes.advanced[prop] = child.advanced[prop];\n }\n }\n });\n },\n PAGE_CLEARUP({ editor }) {\n let alive = [];\n let context = editor.popup || editor;\n\n context.rows.forEach(row => {\n row.cols.forEach(col => alive = [...alive, ...col.children]);\n })\n context.children = context.children.filter(child => alive.includes(child.id));\n }\n },\n actions: {\n //SECTIONS\n PAGE_ADD_BLOCK(context, value) {\n let index = value.addedIndex;\n let width = value.width || 'full';\n let item = { type: 'section' };\n\n item.id = generateId(context.getters.numbers);\n item.attributes = { basic: { width }, advanced: {} };\n item.children = [];\n //console.log({ item });\n context.commit('PAGE_ADD_BLOCK', { item, index });\n },\n PAGE_ADD_ELEMENT(context,\n value={\n element:null,index:0,col:0,\n containerId: null,\n toBoxIndex: 0,\n parent:null}) {\n let element = value.element;\n\n const cloneSection = (el) => {\n let newRows = [], newChildren = [];\n let newSection = JSON.parse(el.structure);\n let oldChildren = JSON.parse(el.children);\n let rows = JSON.parse(el.rows);\n\n console.log(\"cloneSection newSection\", newSection)\n console.log(\"cloneSection oldChildren\", oldChildren)\n console.log(\"cloneSection rows\", rows)\n\n newSection.id = generateId(context.getters.numbers);\n\n let allIds = [newSection.id];\n let newRowIds = [];\n\n newSection.children.forEach(oldRowId => {\n let oldRow = rows.find(x=>x.id===oldRowId);\n if (!oldRow) return;\n\n //! HINT: no need for dereferencing (it's done above for all).\n let newRow = oldRow\n newRow.id = generateId([...context.getters.numbers, ...allIds])\n newRow.parent = newSection.id;\n\n allIds.push(newRow.id);\n newRows.push(newRow)\n newRowIds.push(newRow.id)\n\n newRow.cols.forEach(col => {\n let colChildrenIds = [];\n\n col.children.forEach(childId => {\n let child = oldChildren.find(x=>x.id===childId)\n if (!child) return; // nothing to do\n\n let res = cloneBlock(child, oldChildren, allIds)\n res.newBlock.parent = newRow.id;\n colChildrenIds.push(res.newBlock.id);\n newChildren.push(...res.newChildren);\n res.newChildren.forEach(x=>allIds.push(x.id))\n });\n // add ids into col.children.\n col.children = colChildrenIds;\n });\n });\n newSection.children = newRowIds;\n\n return {newSection,newChildren,newRows}\n }\n const cloneRow = (el) => {\n let newChildren = [];\n\n let newRow = JSON.parse(el.structure);\n let oldChildren = JSON.parse(el.children);\n\n newRow.id = generateId(context.getters.numbers);\n\n let allIds = [newRow.id];\n\n newRow.cols.forEach(col => {\n let colChildrenIds = [];\n\n col.children.forEach(childId => {\n let child = oldChildren.find(x=>x.id===childId)\n if (!child) return; // nothing to do\n\n let res = cloneBlock(child, oldChildren, allIds)\n res.newBlock.parent = newRow.id;\n colChildrenIds.push(res.newBlock.id);\n newChildren.push(...res.newChildren);\n res.newChildren.forEach(x=>allIds.push(x.id))\n });\n // add ids into col.children.\n col.children = colChildrenIds;\n });\n\n return {newRow,newChildren}\n }\n const cloneEl = (el) => {\n let block = JSON.parse(el.structure);\n let oldChildren = JSON.parse(el.children);\n\n return cloneBlock(block, oldChildren, [])\n }\n\n const cloneBlock = (block, oldChildren, allIds=[]) => {\n let newBlock = JSON.parse(JSON.stringify(block));\n newBlock.id = generateId([...context.getters.numbers, ...allIds]);\n\n let newChildren = [];\n let ids = []; // used to prevent collision\n\n if (block.type==='twoStepForm') {\n let chank1 = [], chank2 = [];\n block.step1Children && block.step1Children.forEach(c => {\n\n // Clone each child and add to global children list.\n let oldChild = oldChildren.find(x=>x.id===c);\n if (!oldChild) return;\n\n let res = cloneBlock(oldChild, oldChildren, [...ids, ...allIds])\n if (res) {\n ids.push(res.newBlock.id)\n res.newBlock.parent = newBlock.id;\n chank1.push(res.newBlock.id)\n newChildren.push(...res.newChildren) // it includes newBlock too.\n }\n });\n block.step2Children && block.step2Children.forEach(c => {\n\n // Clone each child and add to global children list.\n let oldChild = oldChildren.find(x=>x.id===c);\n if (!oldChild) return;\n\n let res = cloneBlock(oldChild, oldChildren, [...ids, ...allIds])\n if (res) {\n ids.push(res.newBlock.id)\n res.newBlock.parent = newBlock.id;\n chank2.push(res.newBlock.id)\n newChildren.push(...res.newChildren) // it includes newBlock too.\n }\n });\n newBlock.step1Children = chank1;\n newBlock.step2Children = chank2;\n } else if (block.type==='faq') {\n let chank = [];\n block.children && block.children.forEach(c => {\n\n // Clone each child and add to global children list.\n let oldChild = oldChildren.find(x=>x.id===c);\n if (!oldChild) return;\n\n let res = cloneBlock(oldChild, oldChildren, [...ids, ...allIds])\n if (res) {\n ids.push(res.newBlock.id)\n res.newBlock.parent = newBlock.id;\n chank.push(res.newBlock.id)\n newChildren.push(...res.newChildren) // it includes newBlock too.\n }\n });\n newBlock.children = chank;\n } else if (block.type==='container') {\n let newBoxes = [];\n block.attributes.basic.boxes.forEach(box => {\n let chank = [];\n let newbox = JSON.parse(JSON.stringify(box));\n box.children && box.children.forEach(c => {\n\n // Clone each child and add to global children list.\n let oldChild = oldChildren.find(x=>x.id===c);\n if (!oldChild) return;\n\n let res = cloneBlock(oldChild, oldChildren, [...ids, ...allIds])\n if (res) {\n ids.push(res.newBlock.id)\n res.newBlock.parent = newBlock.id;\n chank.push(res.newBlock.id)\n newChildren.push(...res.newChildren) // it includes newBlock too.\n }\n });\n newbox.children = chank;\n newBoxes.push(newbox);\n });\n newBlock.attributes.basic.boxes = newBoxes\n }\n else {\n // normal block do nothing else.\n }\n\n newChildren.push(newBlock) // append the new container block itself.\n return {newBlock,newChildren}\n }\n\n if (!element.element_type || !element.structure) {\n throw \"bad element \" + value\n }\n\n let res = {parent:{},newSection:{}, newRow:{}, newChildren:[],newBlock:{},newRows:[]}\n let newEl = null;\n if (element.element_type==='section') {\n res = cloneSection(element)\n newEl = res.newSection\n } else if (element.element_type==='row') {\n res = cloneRow(element)\n newEl = res.newRow\n } else {\n res = cloneEl(element)\n res.newBlock.parent = value.parent;\n newEl = res.newBlock\n }\n\n context.commit('PAGE_ADD_ELEMENT', { index: value.index,\n containerId: value.containerId, toBoxIndex: value.toBoxIndex,\n col:value.col, parent:value.parent, newEl, ...res });\n\n context.commit('PAGE_SET_TABID', {tab:'basic',id:newEl.id,block:newEl});\n },\n PAGE_REMOVE_BLOCK(context, value) {\n context.commit('PAGE_REMOVE_BLOCK', value);\n },\n\n // section.\n PAGE_CLONE_BLOCK(context, value) {\n let newSection = null;\n let newRows = [];\n let newChildren = [];\n let id = value.id;\n\n if (value.element_type && value.structure) {\n newSection = JSON.parse(value.structure);\n let children = JSON.parse(value.children);\n let rows = JSON.parse(value.rows);\n\n newSection.id = generateId(context.getters.numbers);\n\n let allIds = [newSection.id];\n let newRowIds = [];\n\n newSection.children.forEach(oldRowId => {\n let oldRow = rows.find(x=>x.id===oldRowId);\n if (!oldRow) return;\n\n //! HINT: no need for dereferencing.\n let newRow = oldRow //JSON.parse(JSON.stringify(oldRow))\n newRow.id = generateId([...context.getters.numbers, ...allIds])\n newRow.parent = newSection.id;\n\n allIds.push(newRow.id);\n newRows.push(newRow)\n newRowIds.push(newRow.id)\n\n newRow.cols.forEach(col => {\n let colChildrenIds = [];\n\n col.children.forEach(childId => {\n let child = children.find(x=>x.id===childId)\n if (!child) return; // nothing to do\n\n if (child.type==='container'||child.type==='faq') {\n let {clone,children} = cloneContainer(context, child, allIds)\n clone.parent = newRow.id;\n colChildrenIds.push(clone.id);\n newChildren.push(...children);\n children.forEach(x=>allIds.push(x.id))\n } else {\n let newChild = JSON.parse(JSON.stringify(child));\n newChild.id = generateId([...context.getters.numbers,...allIds]);\n newChild.parent = newRow.id;\n colChildrenIds.push(newChild.id);\n newChildren.push(newChild);\n allIds.push(newChild.id)\n }\n });\n // add ids into col.children.\n col.children = colChildrenIds;\n });\n });\n newSection.children = newRowIds;\n } else {\n newSection = JSON.parse(JSON.stringify(value));\n newSection.id = generateId(context.getters.numbers);\n\n let allIds = [newSection.id];\n let newRowIds = [];\n\n newSection.children.forEach(oldRowId => {\n let oldRow = context.getters.page_findOne(oldRowId, !!context.getters.current_popup);\n if (!oldRow) return;\n\n let newRow = JSON.parse(JSON.stringify(oldRow))\n newRow.id = generateId([...context.getters.numbers, ...allIds])\n newRow.parent = newSection.id;\n\n allIds.push(newRow.id);\n newRows.push(newRow)\n newRowIds.push(newRow.id)\n\n newRow.cols.forEach(col => {\n let colChildrenIds = [];\n\n col.children.forEach(c => {\n let child = context.getters.page_findChild(c, !!context.getters.current_popup)\n if (!child) return; // nothing to do\n\n if (child.type==='container'||child.type==='faq') {\n let {clone,children} = cloneContainer(context, child, allIds)\n clone.parent = newRow.id;\n colChildrenIds.push(clone.id);\n newChildren.push(...children);\n children.forEach(x=>allIds.push(x.id))\n } else {\n let newChild = JSON.parse(JSON.stringify(child));\n newChild.id = generateId([...context.getters.numbers,...allIds]);\n newChild.parent = newRow.id;\n colChildrenIds.push(newChild.id);\n newChildren.push(newChild);\n allIds.push(newChild.id)\n }\n });\n // add ids into col.children.\n col.children = colChildrenIds;\n });\n });\n newSection.children = newRowIds;\n }\n\n context.commit('PAGE_CLONE_BLOCK', { clone:newSection, id, newRows, newChildren });\n\n context.commit('PAGE_SET_TABID', {tab:'basic',id:newSection.id,block:newSection});\n },\n PAGE_EDIT_BLOCK(context, value) {\n context.commit('PAGE_EDIT_BLOCK', value);\n },\n PAGE_EDIT_FIELD(context, value) {\n context.commit('PAGE_EDIT_FIELD', value);\n },\n PAGE_DROP_BLOCK(context, value) {\n context.commit('PAGE_DROP_BLOCK', value);\n },\n //ROWS\n PAGE_ADD_ROW(context, value) {\n value.id = generateId(context.getters.numbers);\n context.commit('PAGE_ADD_ROW', value);\n },\n PAGE_CHANGE_COLS(context, value) {\n context.commit('PAGE_CHANGE_COLS', value)\n },\n PAGE_DROP_ROW(context, value) {\n context.commit('PAGE_DROP_ROW', value);\n },\n PAGE_DROP_ROW_ADD(context, value) {\n context.commit('PAGE_DROP_ROW_ADD', value);\n },\n PAGE_CLONE_ROW(context, value) {\n let newRow = JSON.parse(JSON.stringify(value));\n let id = value.id;\n\n newRow.id = generateId(context.getters.numbers);\n // newRow.parent = // it's the same parent.\n\n let newChildren = [];\n let allIds = [newRow.id]; // used to prevent collision.\n\n newRow.cols.forEach(col => {\n let colChildrenIds = [];\n\n col.children.forEach(c => {\n let child = context.getters.page_findChild(c, !!context.getters.current_popup)\n if (!child) return; // nothing to do\n\n if (child.type==='container'||child.type==='faq') {\n let {clone,children} = cloneContainer(context, child, allIds)\n clone.parent = newRow.id;\n colChildrenIds.push(clone.id);\n newChildren.push(...children);\n\n children.forEach(x=>allIds.push(x.id))\n } else {\n let newChild = JSON.parse(JSON.stringify(child));\n newChild.id = generateId([...context.getters.numbers,...allIds]);\n newChild.parent = newRow.id;\n colChildrenIds.push(newChild.id);\n newChildren.push(newChild);\n allIds.push(newChild.id)\n }\n });\n // add ids into col.children.\n col.children = colChildrenIds;\n });\n\n context.commit('PAGE_CLONE_ROW', { clone:newRow, id, newChildren });\n\n context.commit('PAGE_SET_TABID', {tab:'basic',id:newRow.id,block:newRow});\n\n },\n //COMMON BLOCKS\n PAGE_ADD_COMMON(context, value) {\n value.id = generateId(context.getters.numbers);\n context.commit('PAGE_ADD_COMMON', value);\n let el = context.getters.page_findOne(value.id)\n context.commit('PAGE_SET_TABID', {tab: 'basic', id: value.id, block:el});\n },\n PAGE_DROP_COMMON(context, value) {\n context.commit('PAGE_DROP_COMMON', value);\n },\n PAGE_DROP_COMMON_ADD(context, value) {\n context.commit('PAGE_DROP_COMMON_ADD', value);\n },\n PAGE_REMOVE_COMMON(context, value) {\n context.commit('PAGE_REMOVE_COMMON', value);\n },\n PAGE_CLONE_COMMON(context, value) {\n // Clone container recursively.\n if (value.item.type===\"container\"||value.item.type==='faq') {\n let {clone, children} = cloneContainer(context, value.item)\n // clone.parent = // it's the same.\n value.children = children\n value.clone = clone\n } else {\n let newBlock = JSON.parse(JSON.stringify(value.item));\n newBlock.id = generateId(context.getters.numbers);\n value.clone = newBlock;\n }\n context.commit('PAGE_CLONE_COMMON', value);\n // PAGE_SET_TABID(state, { tab, id, block })\n context.commit('PAGE_SET_TABID', {tab:'basic',id:value.clone.id,block:value.clone});\n },\n // FORM CHILDREN\n PAGE_ADD_FORM_CHILDREN(context, value) {\n value.id = generateId(context.getters.numbers);\n context.commit('PAGE_ADD_FORM_CHILDREN', value);\n },\n PAGE_DROP_FORM_CHILDREN(context, value) {\n context.commit('PAGE_DROP_COMMON_ADD', value);\n },\n PAGE_REMOVE_FORM_CHILDREN(context, value) {\n context.commit('PAGE_REMOVE_COMMON', value);\n // context.commit('PAGE_REMOVE_FORM_CHILDREN', value);\n },\n PAGE_APPLY_CUSTOM_CODE(context, value) {\n context.commit('PAGE_APPLY_CUSTOM_CODE', value);\n },\n }\n}\n","export const applyDrag = (arr, dragResult) => {\n const { removedIndex, addedIndex, payload } = dragResult\n if (removedIndex === null && addedIndex === null) return arr\n\n const result = [...arr]\n let itemToAdd = payload\n\n if (removedIndex !== null) {\n itemToAdd = result.splice(removedIndex, 1)[0]\n }\n\n if (addedIndex !== null) {\n result.splice(addedIndex, 0, itemToAdd)\n }\n\n return result\n}\n\nconst deepFunc = (inObject) => {\n let outObject, value, key\n if (typeof inObject !== \"object\" || inObject === null) {\n return inObject\n }\n\n outObject = Array.isArray(inObject) ? [] : {};\n\n for (key in inObject) {\n value = inObject[key]\n outObject[key] = deepFunc(value)\n }\n return outObject\n}\n\nexport const deepCopy = (inOb) => new Promise((resolve, reject, _inObj = inOb) => resolve(deepFunc(_inObj)))\n\nexport const clearUp = (editor) => {\n var { rows, children } = editor;\n var exist = [];\n rows.forEach((row, index) => {\n row.cols.forEach((col, index) => {\n exist = [...exist, ...col.children];\n });\n });\n\n children.forEach(child => {\n if (child.type === 'twoStepForm') {\n exist = [...exist, ...child.children];\n } else if (child.type === 'container') {\n let boxes = child.attributes && child.attributes.basic ? child.attributes.basic.boxes : [];\n\n boxes && boxes.forEach(box => {\n let ar = box.children;\n if (!ar || !Array.isArray(ar)) return; // during deletion this causes a bug.\n exist = [...exist, ...ar];\n })\n } else if (child.type === 'faq') {\n if (!child.children || !Array.isArray(child.children)) return; // during deletion this causes a bug.\n exist = [...exist, ...child.children];\n }\n });\n\n var newChildren = children.filter(child => exist.includes(child.id));\n editor.children = newChildren;\n return editor\n}\n\n/** DO NOT EXECUTE THIS TOO MUCH! IT'S AN EXPENSIVE RECURSIVE LOOP\n *\n * @param element to start hierarchy loop from.\n * @param horizontal should calculate horizontal offset, or vertical.\n * @returns {number} the offset.\n */\nexport function getOffset(element, horizontal = false) {\n if (!element) return 0;\n return getOffset(element.offsetParent, horizontal) + (horizontal ? element.offsetLeft : element.offsetTop);\n}\n\nexport function setFontProp(basic, view = 'desktop', prop, value) {\n switch (view) {\n case \"mobile\":\n if (!basic.mobileFont) basic.mobileFont = JSON.parse(JSON.stringify(basic.font));\n basic.mobileFont[prop] = value;\n break;\n case \"tablet\":\n case \"tablets\":\n if (!basic.tabletFont) basic.tabletFont = JSON.parse(JSON.stringify(basic.font));\n basic.tabletFont[prop] = value;\n break;\n default:\n basic.font[prop] = value;\n break;\n }\n}\n","/*! Props generation helper, used to generate common advanced props (shadows, animation...etc) */\n\n\n// shadows={angle:0,distance:0,color:'',blur:0,spread:0,type:''}\nfunction boxShadow(shadows) {\n if (!shadows) return false;\n let bs = '';\n for (let index = 0; index < shadows.length; index++) {\n let radians = shadows[index].angle * Math.PI / 180;\n let xDistance = Math.cos(radians) * shadows[index].distance;\n let yDistance = Math.sin(radians) * shadows[index].distance;\n\n if (index === 0) {\n bs = shadows[index].color + ' ' +\n xDistance + 'px ' +\n yDistance + 'px ' +\n shadows[index].blur + 'px ' +\n shadows[index].spread + 'px ' +\n shadows[index].type;\n } else {\n bs += ', ' + shadows[index].color + ' ' +\n xDistance + 'px ' +\n yDistance + 'px ' +\n shadows[index].blur + 'px ' +\n shadows[index].spread + 'px ' +\n shadows[index].type;\n }\n }\n\n return bs;\n}\n\nfunction multiTextShadow(shadows) {\n if (!shadows) return false;\n let bs = '';\n for (let index = 0; index < shadows.length; index++) {\n let radians = shadows[index].angle * Math.PI / 180;\n let xDistance = Math.cos(radians) * shadows[index].distance;\n let yDistance = Math.sin(radians) * shadows[index].distance;\n\n if (index === 0) {\n bs = shadows[index].color + ' ' +\n xDistance + 'px ' +\n yDistance + 'px ' +\n shadows[index].blur + 'px';\n } else {\n bs += ', ' + shadows[index].color + ' ' +\n xDistance + 'px ' +\n yDistance + 'px ' +\n shadows[index].blur + 'px';\n }\n }\n\n return bs;\n}\n\nfunction textShadow(shadow) {\n if (!shadow) return false;\n\n let radians = shadow.angle * Math.PI / 180;\n let xDistance = Math.cos(radians) * shadow.distance;\n let yDistance = Math.sin(radians) * shadow.distance;\n\n let bs = shadow.color + ' ' +\n xDistance + 'px ' +\n yDistance + 'px ' +\n shadow.blur + 'px ';\n return bs;\n}\n\nfunction borderProps(border) {\n\n let borderTop, borderLeft, borderRight, borderBottom, borderColor;\n\n if (border && border.sides) {\n borderTop = !border.sides.top ? 'none' : border.width + 'px ' + border.style + ' ' + border.color;\n borderLeft = !border.sides.left ? 'none' : border.width + 'px ' + border.style + ' ' + border.color;\n borderRight = !border.sides.right ? 'none' : border.width + 'px ' + border.style + ' ' + border.color;\n borderBottom = !border.sides.bottom ? 'none' : border.width + 'px ' + border.style + ' ' + border.color;\n }\n\n let borderRadius = border && border.radius ?\n border.radius.topLeft + 'px ' +\n border.radius.topRight + 'px ' +\n border.radius.bottomRight + 'px ' +\n border.radius.bottomLeft + 'px' : null;\n\n if (border) borderColor = border.color;\n return { borderTop, borderLeft, borderRight, borderBottom, borderRadius, borderColor }\n}\n\nfunction hoverBorderProps(border2, border) {\n border2 = border2 || {};\n border = border || border2;\n\n let borderTop, borderLeft, borderRight, borderBottom;\n\n let w = border2.width || border.width;\n let s = border2.style || border.style;\n let c = border2.color || border.color;\n let sides = border2.sides || border.sides;\n let r = border2.radius || border.radius;\n\n if (sides) {\n borderTop = !sides.top ? 'none' : `${w}px ${s} ${c}`;\n borderLeft = !sides.left ? 'none' : `${w}px ${s} ${c}`;\n borderRight = !sides.right ? 'none' : `${w}px ${s} ${c}`;\n borderBottom = !sides.bottom ? 'none' : `${w}px ${s} ${c}`;\n }\n\n let borderRadius = r ?\n r.topLeft + 'px ' +\n r.topRight + 'px ' +\n r.bottomRight + 'px ' +\n r.bottomLeft + 'px' : null;\n\n return { borderTop, borderLeft, borderRight, borderBottom, borderRadius, borderColor:c||false }\n}\n\nfunction textDecoration(font) {\n if (!font || !font.fontStyling) return null;\n let fontStyling = font.fontStyling;\n\n if (fontStyling['line-through'] && fontStyling.underline) return 'underline line-through';\n else if (fontStyling['line-through']) return 'line-through';\n else if (fontStyling.underline) return 'underline';\n else return null;\n}\n\nfunction getPadding(padding) {\n return padding ?\n padding.top + 'px ' +\n padding.right + 'px ' +\n padding.bottom + 'px ' +\n padding.left + 'px' : null;\n}\n\n/*! @omitFontSize: to avoid adding font-size props, this is needed when rendering as fontsize/align is embedded in classes.\n/* @omitFontStyle: to avoid adding fontStyling props (Headline, Paragraph) both have their styles embedded in the content. */\nfunction fontProps(font, view=\"desktop\", omitFontSize=false, omitFontStyle=false) {\n if (!font) return {};\n\n let fontFamily = font.fontFamily;\n let color = font.color;\n\n let r = {\n color,\n fontFamily,\n }\n\n if (!omitFontStyle) {\n let fontStyling = font.fontStyling;\n r.fontWeight = fontStyling && fontStyling.bold ? 'bold' : null;\n r.fontStyle = fontStyling && fontStyling.italic ? 'italic' : null;\n r.textDecoration = textDecoration(font);\n }\n\n if (!omitFontSize) {\n let fontSize = font.fontSize;\n let textAlign = font.textAlign;\n switch (view) {\n case \"mobile\":\n fontSize = font.mobileFontSize || font.fontSize;\n textAlign = font.mobileTextAlign || font.textAlign;\n break;\n case \"tablet\":\n case \"tablets\":\n fontSize = font.tabletFontSize || font.fontSize;\n textAlign = font.tabletTextAlign || font.textAlign;\n break;\n }\n r.fontSize = fontSize + 'px';\n r.textAlign = textAlign;\n }\n return r;\n}\n\nfunction hoverTextDecoration(hoverFont, font) {\n if (!hoverFont || !hoverFont.fontStyling) hoverFont = font;\n let fontStyling = font.fontStyling;\n let hoverStyling = hoverFont.fontStyling||font.fontStyling;\n let r = \"\";\n\n if (hoverStyling['line-through'] || fontStyling['line-through']) r += \"line-through \";\n if (hoverStyling.underline || fontStyling.underline) r += \"underline\";\n\n return r || null;\n}\n\nfunction hoverFontProps(hoverFont, font) {\n hoverFont = hoverFont || {};\n\n let fontFamily = hoverFont.fontFamily || font.fontFamily;\n let color = hoverFont.color || font.color;\n\n let r = {\n color,\n fontFamily,\n }\n\n let fontStyling = hoverFont.fontStyling||font.fontStyling;\n r.fontWeight = fontStyling && fontStyling.bold ? 'bold' : null;\n r.fontStyle = fontStyling && fontStyling.italic ? 'italic' : null;\n r.textDecoration = hoverTextDecoration(hoverFont, font);\n\n let fontSize = hoverFont.fontSize||font.fontSize;\n let textAlign = hoverFont.textAlign||font.textAlign;\n r.fontSize = fontSize + 'px';\n r.textAlign = textAlign;\n\n return r;\n}\n\nfunction responsiveAlignStyles(align, id) {\n if (!align) return '';\n if (!align.mobile && !align.tablet) {\n return `.el-${id} {\n align-items: ${align.desktop||'center'};\n}`;\n } else {\n return `.el-${id} {\n align-items: ${align.mobile||align.desktop};\n}\n@media screen and (min-width: 480px) {\n .el-${id} {\n align-items: ${align.tablet||align.desktop};\n }\n}\n@media screen and (min-width: 1024px) {\n .el-${id} {\n align-items: ${align.desktop||'center'};\n }\n}`;\n }\n}\n\n/**\n *\n * @param font\n * @param id\n * @param subClass empty by default\n * @returns {string} CSS generated for the given font for all devices in this format .el-${id} [${subClass}] {}\n */\nfunction responsiveFontStyles(font, id, subClass='') {\n if (!font.mobileFontSize && !font.tabletFontSize && !font.mobileTextAlign && !font.tabletTextAlign) {\nreturn `.el-${id} ${subClass} {\n font-size: ${font.fontSize}px;\n text-align: ${font.textAlign};\n}`;\n } else {\nreturn `.el-${id} ${subClass} {\n font-size: calc(${font.mobileFontSize || font.fontSize}px + 8 * ((100vw - 320px) / 960));\n text-align: ${font.mobileTextAlign || font.textAlign};\n}\n@media screen and (min-width: 480px) {\n .el-${id} ${subClass} {\n font-size: calc(${font.tabletFontSize || font.fontSize}px + 8 * ((100vw - 320px) / 960));\n text-align: ${font.tabletTextAlign || font.textAlign};\n }\n}\n@media screen and (min-width: 1024px) {\n .el-${id} ${subClass} {\n font-size: ${font.fontSize}px;\n text-align: ${font.textAlign};\n }\n}`;\n }\n}\n\n/**\n * Generates CSS from a given array.\n * @param {Object} props\n */\nfunction generateCss(props) {\n let s = ''\n const camelToSnakeCase = str => str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);\n\n Object.keys(props).forEach(p=>{\n let v = props[p];\n if (!v) return;\n let pKey = camelToSnakeCase(p)\n\n s+=`${pKey}:${v};`\n })\n return s\n}\n\nfunction responsiveOrientationStyles(orientation, id) {\n if (!orientation) return '';\n if (!orientation.mobile && !orientation.tablet) {\n return `.el-${id} {\n flex-direction: ${orientation.desktop||'column'};\n}`;\n } else {\n return `.el-${id} {\n flex-direction: ${orientation.mobile||orientation.desktop};\n}\n@media screen and (min-width: 480px) {\n .el-${id} {\n flex-direction: ${orientation.tablet||orientation.desktop};\n }\n}\n@media screen and (min-width: 1024px) {\n .el-${id} {\n flex-direction: ${orientation.desktop||'column'};\n }\n}`;\n }\n}\nconst capitalize = (s) => {\n if (typeof s !== 'string') return ''\n return s.charAt(0).toUpperCase() + s.slice(1)\n}\n\nfunction setFontSize(font, value, view='desktop') {\n switch (view) {\n case \"mobile\":\n font.mobileFontSize = value;\n break;\n case \"tablet\":\n case \"tablets\":\n font.tabletFontSize = value;\n break;\n default:\n font.fontSize = value;\n break;\n }\n}\n\nfunction setTextAlign(font, value, view='desktop') {\n switch (view) {\n case \"mobile\":\n font.mobileTextAlign = value;\n break;\n case \"tablet\":\n case \"tablets\":\n font.tabletTextAlign = value;\n break;\n default:\n font.textAlign = value;\n break;\n }\n}\n\n// falls-back to desktop version.\nfunction getFontSize(font, view='desktop') {\n switch (view) {\n case \"mobile\":\n return font.mobileFontSize || font.fontSize;\n case \"tablet\":\n case \"tablets\":\n return font.tabletFontSize || font.fontSize;\n default:\n return font.fontSize;\n }\n}\n\n// falls-back to desktop version.\nfunction getTextAlign(font, view='desktop') {\n switch (view) {\n case \"mobile\":\n return font.mobileTextAlign || font.textAlign;\n case \"tablet\":\n case \"tablets\":\n return font.tabletTextAlign || font.textAlign;\n default:\n return font.textAlign;\n }\n}\n\nfunction getAlignment(align, view='desktop') {\n if (!align) return null;\n switch (view) {\n case \"mobile\":\n return align.mobile || align.desktop;\n case \"tablet\":\n case \"tablets\":\n return align.tablet || align.desktop;\n default:\n return align.desktop;\n }\n}\n\nfunction getOrientation(orientation, view='desktop') {\n if (!orientation) return null;\n switch (view) {\n case \"mobile\":\n return orientation.mobile || orientation.desktop;\n case \"tablet\":\n case \"tablets\":\n return orientation.tablet || orientation.desktop;\n default:\n return orientation.desktop;\n }\n}\n\nfunction letterSpacing(value) {\n return value && value.number ? value.number+'px' : null;\n}\nfunction lineHeight(value) {\n return value && value.number ? value.number : null;\n}\n\nfunction trimSrc(url) {\n return '//' + url.replace(/https*:\\/\\//mgi, '')\n}\n\nfunction backgroundProps(basic) {\n if (!basic) return false;\n\n let imageUrl = basic.backgroundImage ? trimSrc(basic.backgroundImage) : null;\n let position = 'center ' + basic.backgroundPosition || 'center top';\n\n if (imageUrl) {\n imageUrl = imageUrl.replace(\"https://\", \"\")\n if (imageUrl.indexOf(\"images.funnelish.com\")>=0)\n imageUrl = imageUrl.replace(\"images.funnelish.com\", \"img.funnelish.com\");\n imageUrl = `url(\"//${imageUrl}?auto=webp&clip=bounds\")`;\n }\n\n let props = { // default props (auto)\n backgroundPosition: position,\n backgroundSize: 'auto',\n backgroundRepeat: 'no-repeat',\n backgroundImage: imageUrl,\n }\n\n if (basic.backgroundStyle==='cover') {\n props = {\n backgroundPosition: position,\n backgroundSize: '100% auto',\n backgroundRepeat: 'no-repeat',\n backgroundImage: imageUrl,\n }\n }\n\n return props;\n}\n\nexport {\n generateCss,\n hoverBorderProps,\n backgroundProps,\n responsiveOrientationStyles,\n getOrientation,\n hoverFontProps,\n responsiveAlignStyles,\n getAlignment,\n getPadding,\n textDecoration,\n borderProps,\n textShadow,\n boxShadow,\n multiTextShadow,\n fontProps,\n setFontSize,\n setTextAlign,\n responsiveFontStyles,\n getFontSize,\n getTextAlign,\n letterSpacing,\n lineHeight\n}\n","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"layout-column flex\"},[_c('div',{staticClass:\"app-email-editor\",attrs:{\"id\":\"app-email-editor\"}},[_c('v-style',[_vm._v(_vm._s(_vm.styleInTag))]),_c(_vm.layout,{tag:\"component\"},[_c('router-view')],1)],1)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"wrapper\"},[_c('LeftBar',{on:{\"goBack\":function($event){_vm.allowGoback = true},\"saving\":_vm.onSaving}}),_c('div',{staticClass:\"main email_editor_page\",staticStyle:{\"overflow\":\"hidden\"}},[_c('div',{staticClass:\"main-center\"},[_c('EditorHeader',{attrs:{\"goBackTo\":_vm.allowGoback},on:{\"saving\":_vm.onSaving}}),_c('router-view'),_c('renderTemplate',{attrs:{\"styleId\":\"render-style\",\"tableId\":\"render-table\",\"rawClass\":\"render-raw\"}})],1)])],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return (_vm.$route.name !== 'PreviewEmail')?_c('header',{staticClass:\"editor_header\",on:{\"click\":function($event){if($event.target !== $event.currentTarget)return null;return _vm.resetView.apply(null, arguments)}}},[_c('v-button',{staticClass:\"go_back_btn\",attrs:{\"label\":\"Go back to automations\",\"flat\":\"\",\"slim\":\"\",\"icon\":require('@/assets/img/back_bt_arrow.svg')},on:{\"click\":_vm.redirectToAutomations}}),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.emailTemplateName),expression:\"emailTemplateName\"}],staticClass:\"email_name\",class:{'input_focused': _vm.nameInputFocused, 'input_empty': !_vm.emailTemplateName.length},staticStyle:{\"flex\":\"1\"},attrs:{\"placeholder\":\"Please enter template title\"},domProps:{\"value\":(_vm.emailTemplateName)},on:{\"focus\":function($event){_vm.nameInputFocused = true},\"blur\":function($event){_vm.nameInputFocused = false},\"input\":function($event){if($event.target.composing)return;_vm.emailTemplateName=$event.target.value}}}),_c('div',{staticClass:\"right\"},[_c('ul',{staticClass:\"sm_btns_group devices_btns\"},[_c('li',{attrs:{\"title\":\"Mobile View\"}},[_c('a',{staticClass:\"small-btn\",class:{active: _vm.view === 'mobile'},on:{\"click\":function($event){return _vm.switchView('mobile')}}},[_c('inline-svg',{attrs:{\"src\":require('@/assets/icons/mobile.svg')}})],1)]),_c('li',{attrs:{\"title\":\"Tablet View\"}},[_c('a',{staticClass:\"small-btn\",class:{active: _vm.view === 'tablets'},on:{\"click\":function($event){return _vm.switchView('tablets')}}},[_c('inline-svg',{attrs:{\"src\":require('@/assets/icons/tablet.svg')}})],1)]),_c('li',{attrs:{\"title\":\"Desktop View\"}},[_c('a',{staticClass:\"small-btn\",class:{active: _vm.view === 'desktop'},on:{\"click\":function($event){return _vm.switchView('desktop')}}},[_c('inline-svg',{attrs:{\"src\":require('@/assets/icons/desktop.svg')}})],1)])]),_c('ul',{staticClass:\"sm_btns_group undo_redo_group\"},[_c('li',[_c('v-button',{directives:[{name:\"tippy\",rawName:\"v-tippy\",value:({theme:'small-black'}),expression:\"{theme:'small-black'}\"}],staticClass:\"small-btn\",attrs:{\"flat\":\"\",\"content\":\"Undo\",\"disabled\":!_vm.email_canUndo,\"icon\":require('@/assets/img/redo.svg')},on:{\"click\":_vm.undoMe}})],1),_c('li',[_c('v-button',{directives:[{name:\"tippy\",rawName:\"v-tippy\",value:({theme:'small-black'}),expression:\"{theme:'small-black'}\"}],staticClass:\"small-btn\",attrs:{\"flat\":\"\",\"content\":\"Redo\",\"disabled\":!_vm.email_canRedo,\"icon\":require('@/assets/img/undo.svg')},on:{\"click\":_vm.redoMe}})],1)]),_c('v-button',{attrs:{\"slim\":\"\",\"border\":\"\",\"label\":\"Preview\",\"target\":\"_blank\",\"href\":_vm.previewUrl}}),_c('v-button',{attrs:{\"slim\":\"\",\"label\":\"Send test email\",\"icon\":require('@/assets/email/img/send_email_btn_icon.svg'),\"border\":\"\"},on:{\"click\":_vm.sendTestEmailFunc}}),_c('v-button',{attrs:{\"slim\":\"\",\"loading\":_vm.savingLoading,\"label\":\"Save changes\",\"disabled\":_vm.localEmailSavedStore === _vm.emailSavedStore},on:{\"click\":function($event){return _vm.generateAndSave(false)}}})],1),_c('div',{staticClass:\"popup_wrpr select_image_popup_wrpr\",class:{'active' : _vm.popupOpen}},[_c('div',{staticClass:\"popup_wrpr_inner\"},[(_vm.popupOpen)?_c('SendTestEmailPopup',{attrs:{\"template\":_vm.templateId},on:{\"closePopup\":_vm.closePopup}}):_vm._e()],1)]),_c('div',{staticClass:\"popup_wrpr\",class:{'active' : _vm.savePopupOpen}},[_c('div',{staticClass:\"popup_wrpr_inner\"},[(_vm.savePopupOpen)?_c('SaveTemplatePopup',{on:{\"closePopup\":_vm.savePopupClose,\"saveFunc\":function($event){return _vm.generateAndSave(_vm.sendTestPopupProp, _vm.localRedirect)},\"noSave\":_vm.noSaveBtnFunc}}):_vm._e()],1)])],1):_c('a',{staticClass:\"btn back_to_editor_btn\",on:{\"click\":function($event){return _vm.linkTo('/email-editor')}}},[_vm._v(\"Back to editor\")])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('popup',{staticClass:\"send_email_popup\",attrs:{\"title\":_vm.step===1 ? 'Send email' : 'Send a test email'},on:{\"close\":_vm.closeThisPopup},scopedSlots:_vm._u([{key:\"content\",fn:function(){return [(_vm.step == 1)?_c('div',{staticClass:\"popup_body\"},[_c('div',{staticClass:\"inputs_wrpr\"},[_c('input-field',{staticStyle:{\"width\":\"100%\",\"margin-right\":\"20px\"},attrs:{\"type\":\"email\",\"placeholder\":\"Type a valid email address\"},model:{value:(_vm.emailInput),callback:function ($$v) {_vm.emailInput=$$v},expression:\"emailInput\"}})],1)]):(_vm.step == 2)?_c('div',{staticClass:\"popup_body\"},[_c('div',{staticClass:\"layout-column\",staticStyle:{\"align-items\":\"center\"}},[_c('inline-svg',{attrs:{\"src\":require('@/assets/email/img/success_icon.svg')}}),_c('p',[_vm._v(\"Test email has been sent successfully!\")])],1)]):_vm._e()]},proxy:true},{key:\"actions\",fn:function(){return [_c('v-button',{attrs:{\"label\":\"Cancel\",\"border\":\"\"},on:{\"click\":_vm.closeThisPopup}}),_c('v-button',{attrs:{\"loading\":_vm.loading,\"label\":\"Send test\",\"disabled\":!_vm.isValid},on:{\"click\":_vm.stepTwo}})]},proxy:true}])})\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\tTest email has been sent successfully!
\n\t\t\t\tThere are some unsaved changes, how would you like to proceed?
\n\t\t\n\t\t\n\t\t\t\n\t\t\t\t\t
| \n\t\t\t
No orders have been found
\n\t\t\t\t\t\t\t\t![](\"https://images.funnelish.com/default/social/tw_icon.png\"){kind=icon}
\n ![](\"https://images.funnelish.com/default/social/in_icon.png\"){kind=icon}
\n ![](\"https://images.funnelish.com/default/social/face_b_icon.png\"){kind=icon}
\n ![](\"https://images.funnelish.com/default/social/youtube_icon.png\"){kind=icon}
\n ![](\"https://images.funnelish.com/default/social/instagram_icon.png\"){kind=icon}
\n