{"version":3,"sources":["webpack:///./src/views/campaigns/components/steps/components/AdsetAds/components/AdPreview.vue?60e1","webpack:///./src/assets/images/ad-preview/default-mobile-english-no-content.png","webpack:///./src/assets/images/ad-preview/stories-tablet-arabic.png","webpack:///./src/assets/images/ad-preview/default-tablet-arabic.png","webpack:///./src/assets/images/ad-preview/stories-desktop-arabic.png","webpack:///./src/assets/images/ad-preview/default-desktop-arabic.png","webpack:///./src/assets/images/ad-preview/inline-tablet-arabic.png","webpack:///./src/assets/images/ad-preview/default-desktop-english-no-content.png","webpack:///./src/assets/images/ad-preview/stories-desktop-english.png","webpack:///./src/assets/images/ad-preview/default-desktop-english.png","webpack:///./src/assets/images/chevron-left.svg","webpack:///./src/assets/images/ad-preview/default-mobile-arabic.png","webpack:///./src/assets/images/ad-preview/default-mobile-arabic-no-content.png","webpack:///./src/assets/images/ad-preview/default-tablet-english-no-content.png","webpack:///./src/assets/images/ad-preview/stories-mobile-arabic.png","webpack:///./src/assets/images/ad-preview/inline-desktop-arabic.png","webpack:///./src/assets/images/ad-preview/stories-mobile-english.png","webpack:///./src/assets/images/ad-preview/inline-mobile-arabic.png","webpack:///./src/assets/images/ad-preview/default-desktop-arabic-no-content.png","webpack:///./src/assets/images/ad-preview/stories-tablet-english.png","webpack:///./src/assets/images/ad-preview/inline-tablet-english.png","webpack:///./src/assets/images/ad-preview/default-mobile-english.png","webpack:///./src/assets/images/ad-preview/default-tablet-arabic-no-content.png","webpack:///./src/assets/images/ad-preview/inline-desktop-english.png","webpack:///./src/assets/images/ad-preview/default-tablet-english.png","webpack:///./src/views/campaigns/components/steps/components/AdsetAds/components/AdPreview.vue?2dce","webpack:///src/views/campaigns/components/steps/components/AdsetAds/components/AdPreview.vue","webpack:///./src/views/campaigns/components/steps/components/AdsetAds/components/AdPreview.vue?581b","webpack:///./src/views/campaigns/components/steps/components/AdsetAds/components/AdPreview.vue","webpack:///./src/assets/images/ad-preview sync ^\\.\\/.*\\.png$","webpack:///./src/assets/images/ad-preview/inline-mobile-english.png"],"names":["module","exports","render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","_v","_s","$t","on","$event","value","is_previewing","_l","p","index","key","class","currently_previewing","changeCurrentlyPreviewing","previewMockupClasses","mockupImgSrc","file_as_data_url","file_type","previewClasses","_e","getImageTypeBasedOnCampaignType","previewBackImageClasses","upload_video","isAdContentEmpty","previewContentBackImageClasses","content","cta","previewContentClasses","staticRenderFns","props","required","type","Object","String","language","watch","handler","$emit","newVal","deep","initFilePreviewing","data","previews","types","languages","file_types","contents","computed","showCTA","$hasFeature","$constants","CAMPAIGN_TYPES_NAMES","RECOMMENDATIONS","no_content","selected_type","forEach","classes","hasOwnProperty","className","result","mounted","methods","preview","reader","onload","file","File","Blob","readAsDataURL","split","getThumpFromYoutubelink","has_video","ampersandPosition","video_id","substring","toLowerCase","component","map","webpackContext","req","id","webpackContextResolve","__webpack_require__","o","e","Error","code","keys","resolve"],"mappings":"kHAAA,W,uBCAAA,EAAOC,QAAU,IAA0B,sD,uBCA3CD,EAAOC,QAAU,IAA0B,0C,uBCA3CD,EAAOC,QAAU,IAA0B,0C,uBCA3CD,EAAOC,QAAU,IAA0B,2C,uBCA3CD,EAAOC,QAAU,IAA0B,2C,uBCA3CD,EAAOC,QAAU,IAA0B,yC,qBCA3CD,EAAOC,QAAU,IAA0B,uD,wBCA3CD,EAAOC,QAAU,IAA0B,4C,uBCA3CD,EAAOC,QAAU,IAA0B,4C,qBCA3CD,EAAOC,QAAU,IAA0B,iC,qBCA3CD,EAAOC,QAAU,IAA0B,0C,uBCA3CD,EAAOC,QAAU,IAA0B,qD,uBCA3CD,EAAOC,QAAU,IAA0B,sD,qBCA3CD,EAAOC,QAAU,IAA0B,0C,uBCA3CD,EAAOC,QAAU,IAA0B,0C,uBCA3CD,EAAOC,QAAU,IAA0B,2C,uBCA3CD,EAAOC,QAAU,IAA0B,yC,uBCA3CD,EAAOC,QAAU,IAA0B,sD,uBCA3CD,EAAOC,QAAU,IAA0B,2C,qBCA3CD,EAAOC,QAAU,IAA0B,0C,qBCA3CD,EAAOC,QAAU,IAA0B,2C,qBCA3CD,EAAOC,QAAU,IAA0B,qD,qBCA3CD,EAAOC,QAAU,IAA0B,2C,qBCA3CD,EAAOC,QAAU,IAA0B,2C,gECA3C,IAAIC,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,UAAU,CAACE,YAAY,0BAA0BC,MAAM,CAAC,UAAW,IAAO,CAACH,EAAG,MAAM,CAACE,YAAY,cAAc,CAACF,EAAG,KAAK,CAACE,YAAY,wBAAwB,CAACN,EAAIQ,GAAG,WAAWR,EAAIS,GAAGT,EAAIU,GAAG,eAAe,cAAcN,EAAG,MAAM,CAACE,YAAY,iCAAiC,CAACF,EAAG,YAAY,CAACE,YAAY,QAAQC,MAAM,CAAC,GAAK,+CAA+C,MAAQ,UAAU,KAAO,UAAUI,GAAG,CAAC,MAAQ,SAASC,GAAQZ,EAAIa,MAAMC,eAAgB,KAAS,CAACV,EAAG,MAAM,CAACE,YAAY,mBAAmBC,MAAM,CAAC,IAAM,EAAQ,WAAuCP,EAAIQ,GAAG,WAAWR,EAAIS,GAAGT,EAAIU,GAAG,uBAAuB,aAAa,GAAGN,EAAG,KAAK,CAACE,YAAY,2EAA2E,CAACN,EAAIQ,GAAG,SAASR,EAAIS,GAAGT,EAAIU,GAAG,iEAAiE,UAAUN,EAAG,MAAM,CAACE,YAAY,yBAAyB,CAACF,EAAG,YAAY,CAACE,YAAY,eAAeC,MAAM,CAAC,MAAQ,UAAU,KAAO,UAAUI,GAAG,CAAC,MAAQ,SAASC,GAAQZ,EAAIa,MAAMC,eAAgB,KAAS,CAACV,EAAG,MAAM,CAACE,YAAY,mBAAmBC,MAAM,CAAC,IAAM,EAAQ,WAAuCP,EAAIQ,GAAG,WAAWR,EAAIS,GAAGT,EAAIU,GAAG,uBAAuB,aAAa,GAAGN,EAAG,MAAM,CAACA,EAAG,MAAM,CAACE,YAAY,iGAAiGN,EAAIe,GAAIf,EAAY,UAAE,SAASgB,EAAEC,GAAO,OAAOb,EAAG,MAAM,CAACc,IAAI,YAAcD,EAAMX,YAAY,gFAAgFa,MAAM,CAAC,kBAAoBnB,EAAIoB,uBAAyBJ,GAAGL,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOZ,EAAIqB,0BAA0BL,MAAM,CAACZ,EAAG,OAAO,CAACA,EAAG,UAAU,CAACE,YAAY,kBAAkBC,MAAM,CAAC,YAAY,UAAU,KAAQ,WAAaS,KAAMZ,EAAG,OAAO,CAACE,YAAY,QAAQ,CAACN,EAAIQ,GAAGR,EAAIS,GAAGT,EAAIU,GAAGM,QAAQ,QAAO,KAAKZ,EAAG,MAAM,CAACE,YAAY,UAAU,CAACF,EAAG,MAAM,CAACE,YAAY,+BAA+B,CAACF,EAAG,MAAM,CAACE,YAAY,2BAA2Ba,MAAMnB,EAAIsB,qBAAqBf,MAAM,CAAC,IAAMP,EAAIuB,aAAa,IAAM,WAAqC,OAAzBvB,EAAIwB,kBAA+C,UAAlBxB,EAAIyB,UAAuBrB,EAAG,MAAM,CAACE,YAAY,wBAAwBa,MAAMnB,EAAI0B,eAAenB,MAAM,CAAC,IAAMP,EAAIwB,oBAAoBxB,EAAI2B,KAA+B,OAAzB3B,EAAIwB,kBAA+C,UAAlBxB,EAAIyB,UAAuBrB,EAAG,QAAQ,CAACE,YAAY,WAAWa,MAAMnB,EAAI0B,eAAenB,MAAM,CAAC,IAAMP,EAAIwB,oBAAoBxB,EAAI2B,KAAiD,YAA3C1B,KAAK2B,mCAA4E,OAAzB5B,EAAIwB,kBAA+C,UAAlBxB,EAAIyB,UAAuBrB,EAAG,QAAQ,CAACE,YAAY,WAAWa,MAAMnB,EAAI6B,wBAAwBtB,MAAM,CAAC,IAAMP,EAAIwB,oBAAoBxB,EAAI2B,KAAO1B,KAAKY,MAAMiB,cAA2D,YAA3C7B,KAAK2B,kCAAsK5B,EAAI2B,KAAzHvB,EAAG,MAAM,CAACE,YAAY,wBAAwBa,MAAMnB,EAAI6B,wBAAwBtB,MAAM,CAAC,IAAMP,EAAIwB,oBAAyE,YAA3CvB,KAAK2B,mCAAmD3B,KAAK8B,mBAAoB3B,EAAG,MAAM,CAACE,YAAY,0CAA0Ca,MAAMnB,EAAIgC,gCAAgC,CAAC5B,EAAG,KAAK,CAACE,YAAY,kBAAkB,CAACN,EAAIQ,GAAGR,EAAIS,GAAGR,KAAKY,MAAMoB,YAAajC,EAAW,QAAEI,EAAG,SAAS,CAACE,YAAY,kBAAkB,CAACN,EAAIQ,GAAGR,EAAIS,GAAGR,KAAKY,MAAMqB,IAAIrB,UAAUb,EAAI2B,OAAO3B,EAAI2B,KAAiD,YAA3C1B,KAAK2B,mCAAmD3B,KAAK8B,mBAAoB3B,EAAG,MAAM,CAACE,YAAY,0CAA0Ca,MAAMnB,EAAImC,uBAAuB,CAAC/B,EAAG,KAAK,CAACE,YAAY,eAAe,CAACN,EAAIQ,GAAGR,EAAIS,GAAGR,KAAKY,MAAMoB,YAAajC,EAAW,QAAEI,EAAG,SAAS,CAACE,YAAY,cAAc,CAACN,EAAIQ,GAAGR,EAAIS,GAAGR,KAAKY,MAAMqB,IAAIrB,UAAUb,EAAI2B,OAAO3B,EAAI2B,YACxlHS,EAAkB,GCkEtB,G,kDAAA,CACEC,MAAO,CACLxB,MAAO,CACLyB,UAAU,EACVC,KAAMC,QAERD,KAAM,CACJA,KAAME,OACNH,UAAU,GAEZI,SAAU,CACRH,KAAME,OACNH,UAAU,IAGdK,MAAO,CACL9B,MAAO,CACL+B,QADN,SACA,GACQ3C,KAAK4C,MAAM,QAASC,IAEtBC,MAAM,GAER,aAPJ,WAQM9C,KAAK+C,uBAGTC,KA1BF,WA2BI,MAAO,CAELC,SAAU,CAAC,UAAW,SAAU,UAChCC,MAAO,CAAC,UAAW,SAAU,WAC7BC,UAAW,CAAC,SAAU,WACtBC,WAAY,CAAC,QAAS,SACtBC,SAAU,CAAC,GAAI,eAEflC,qBAAsB,UACtBI,iBAAkB,KAClBC,UAAW,OAGf8B,SAAU,CACRC,QADJ,WAEM,OAAOvD,KAAKwD,YAAY,WAAaxD,KAAKsC,OAAStC,KAAKyD,WAAWC,qBAAqBC,iBAAmB3D,KAAKY,MAAMqB,KAExHX,aAJJ,WAUM,IAAN,yCACA,gBACA,4BACA,2CAMM,MAJa,WAATgB,GAA8B,YAATA,IACvBsB,EAAa,IAGR,EAAb,QAAa,CAAb,8DAEInC,eArBJ,WAqBA,WAMA,KAEA,yCACA,2CA6BM,MA3BsB,WAAlBoC,IACFD,EAAa,IAGf5D,KAAKiD,SAASa,SAAQ,SAA5B,GACQ,EAAR,2BACU,EAAV,+BACY,EAAZ,gCACc,EAAd,8BACgB,IAAhB,EACA,OACA,4BACA,gBACA,iBACA,MAEA,mEAEqBC,EAAQC,eAAeC,KAC1BF,EAAQE,GAAaC,kBAQ1BH,GAET1C,qBA7DJ,WA6DA,WAMA,KAEA,yCAmBM,OAjBArB,KAAKiD,SAASa,SAAQ,SAA5B,GACQ,EAAR,2BACU,EAAV,+BACY,IAAZ,EACA,OACA,4BACA,eAEA,kDAEiBC,EAAQC,eAAeC,KAC1BF,EAAQE,GAAaC,YAMtBH,GAETnC,wBA1FJ,WA0FA,WAMA,KAEA,YACA,2CACA,YAuBM,OArBA5B,KAAKiD,SAASa,SAAQ,SAA5B,GACQ,EAAR,+BACU,EAAV,gCACY,EAAZ,8BACc,IAAd,EACA,OACA,4BACA,gBACA,iBACA,MAEA,wEAEmBC,EAAQC,eAAeC,KAC1BF,EAAQE,GAAaC,eAOxBH,GAEThC,+BA7HJ,WA6HA,WAMA,KAEA,YACA,2CACA,YAuBM,OArBA/B,KAAKiD,SAASa,SAAQ,SAA5B,GACQ,EAAR,+BACU,EAAV,gCACY,EAAZ,8BACc,IAAd,EACA,OACA,4BACA,gBACA,iBACA,MAEA,gFAEmBC,EAAQC,eAAeC,KAC1BF,EAAQE,GAAaC,eAOxBH,GAET7B,sBAhKJ,WAgKA,WAMA,KAEA,yCACA,2CACA,wBA4BM,MA3BsB,WAAlB2B,IACFD,EAAa,IAGf5D,KAAKiD,SAASa,SAAQ,SAA5B,GACQZ,EAAMY,SAAQ,SAAtB,GACU,EAAV,+BACY,EAAZ,gCACc,EAAd,8BACgB,IAAhB,EACA,OACA,4BACA,gBACA,iBACA,MAEA,2EAEqBC,EAAQC,eAAeC,KAC1BF,EAAQE,GAAaC,kBAQ1BH,IAGXI,QAjPF,WAkPInE,KAAK+C,sBAEPqB,QAAS,CACPC,QADJ,SACA,cACA,iBAEMC,EAAOC,OAAS,SAAtB,GACQ,EAAR,mCAGUC,aAAgBC,MAAQD,aAAgBE,OAC1CJ,EAAOK,cAAcH,IAGzBzB,mBAZJ,WAaU/C,KAAKY,MAAM4D,gBAAgBC,MAC7BzE,KAAKwB,UAAYxB,KAAKY,MAAM4D,KAAKlC,KAAKsC,MAAM,KAAK,GAEjD5E,KAAKqE,QAAQrE,KAAKY,MAAM4D,OAChC,iGACQxE,KAAKuB,iBAAmBvB,KAAK6E,wBAAwB7E,KAAKY,MAAM4D,MAChExE,KAAKwB,UAAY,UAEjBxB,KAAKuB,iBAAmBvB,KAAKY,MAAM4D,MAAQ,KACvCxE,KAAKuB,iBACPvB,KAAKwB,UAAYxB,KAAKY,MAAMkE,UAAY,QAAU,QAElD9E,KAAKwB,UAAY,OAIvBJ,0BA7BJ,SA6BA,GACMpB,KAAKmB,qBAAuBJ,GAE9B8D,wBAhCJ,SAgCA,GACM,IAAN,mBAEA,iBAMM,OAJ2B,IAAvBE,IACFC,EAAWA,EAASC,UAAU,EAAGF,IAG5B,8BAAb,gCAEIjD,iBA3CJ,WA4CM,MAA8B,KAAvB9B,KAAKY,MAAMoB,SAAyC,OAAvBhC,KAAKY,MAAMoB,SAEjDL,gCA9CJ,WA+CM,IAAN,YAMM,MAJkB,WAAd3B,KAAKsC,MAAmC,YAAdtC,KAAKsC,OACjCA,EAAOtC,KAAKsC,KAAK4C,eAGZ5C,MC5Wga,I,wBCQza6C,EAAY,eACd,EACArF,EACAqC,GACA,EACA,KACA,KACA,MAIa,aAAAgD,E,sDCnBf,IAAIC,EAAM,CACT,0CAA2C,OAC3C,+BAAgC,OAChC,2CAA4C,OAC5C,gCAAiC,OACjC,yCAA0C,OAC1C,8BAA+B,OAC/B,0CAA2C,OAC3C,+BAAgC,OAChC,yCAA0C,OAC1C,8BAA+B,OAC/B,0CAA2C,OAC3C,+BAAgC,OAChC,8BAA+B,OAC/B,+BAAgC,OAChC,6BAA8B,OAC9B,8BAA+B,OAC/B,6BAA8B,OAC9B,8BAA+B,OAC/B,+BAAgC,OAChC,gCAAiC,QACjC,8BAA+B,OAC/B,+BAAgC,OAChC,8BAA+B,OAC/B,+BAAgC,QAIjC,SAASC,EAAeC,GACvB,IAAIC,EAAKC,EAAsBF,GAC/B,OAAOG,EAAoBF,GAE5B,SAASC,EAAsBF,GAC9B,IAAIG,EAAoBC,EAAEN,EAAKE,GAAM,CACpC,IAAIK,EAAI,IAAIC,MAAM,uBAAyBN,EAAM,KAEjD,MADAK,EAAEE,KAAO,mBACHF,EAEP,OAAOP,EAAIE,GAEZD,EAAeS,KAAO,WACrB,OAAOvD,OAAOuD,KAAKV,IAEpBC,EAAeU,QAAUP,EACzB5F,EAAOC,QAAUwF,EACjBA,EAAeE,GAAK,S,qBC7CpB3F,EAAOC,QAAU,IAA0B","file":"js/chunk-51767b34.bc6c6460.js","sourcesContent":["export * from \"-!../../../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AdPreview.vue?vue&type=style&index=0&lang=scss&\"","module.exports = __webpack_public_path__ + \"img/default-mobile-english-no-content.ba296f2c.png\";","module.exports = __webpack_public_path__ + \"img/stories-tablet-arabic.7d74b62a.png\";","module.exports = __webpack_public_path__ + \"img/default-tablet-arabic.5dd98fe6.png\";","module.exports = __webpack_public_path__ + \"img/stories-desktop-arabic.466a77ef.png\";","module.exports = __webpack_public_path__ + \"img/default-desktop-arabic.701e7706.png\";","module.exports = __webpack_public_path__ + \"img/inline-tablet-arabic.be6a2b68.png\";","module.exports = __webpack_public_path__ + \"img/default-desktop-english-no-content.8045063e.png\";","module.exports = __webpack_public_path__ + \"img/stories-desktop-english.e4ac356c.png\";","module.exports = __webpack_public_path__ + \"img/default-desktop-english.ee8ad507.png\";","module.exports = __webpack_public_path__ + \"img/chevron-left.56e5575f.svg\";","module.exports = __webpack_public_path__ + \"img/default-mobile-arabic.eb2b8821.png\";","module.exports = __webpack_public_path__ + \"img/default-mobile-arabic-no-content.5e24b4e2.png\";","module.exports = __webpack_public_path__ + \"img/default-tablet-english-no-content.1b35bc09.png\";","module.exports = __webpack_public_path__ + \"img/stories-mobile-arabic.3c6022fb.png\";","module.exports = __webpack_public_path__ + \"img/inline-desktop-arabic.7b309f77.png\";","module.exports = __webpack_public_path__ + \"img/stories-mobile-english.7e65fae5.png\";","module.exports = __webpack_public_path__ + \"img/inline-mobile-arabic.d508d8cb.png\";","module.exports = __webpack_public_path__ + \"img/default-desktop-arabic-no-content.66f71c91.png\";","module.exports = __webpack_public_path__ + \"img/stories-tablet-english.b3ad98c0.png\";","module.exports = __webpack_public_path__ + \"img/inline-tablet-english.5a6be10d.png\";","module.exports = __webpack_public_path__ + \"img/default-mobile-english.794da03a.png\";","module.exports = __webpack_public_path__ + \"img/default-tablet-arabic-no-content.6d02aeef.png\";","module.exports = __webpack_public_path__ + \"img/inline-desktop-english.4a83d61a.png\";","module.exports = __webpack_public_path__ + \"img/default-tablet-english.599f6873.png\";","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('vx-card',{staticClass:\"preview-container mb-10\",attrs:{\"noShadow\":true}},[_c('div',{staticClass:\"float-left\"},[_c('h5',{staticClass:\"font-medium text-2xl\"},[_vm._v(\"\\n      \"+_vm._s(_vm.$t('Ad Preview'))+\"\\n    \")])]),_c('div',{staticClass:\"back-to-ad-button float-right\"},[_c('vs-button',{staticClass:\"pl-16\",attrs:{\"id\":\"create-campaign-s5-back-to-ad-details-button\",\"color\":\"primary\",\"type\":\"border\"},on:{\"click\":function($event){_vm.value.is_previewing = false}}},[_c('img',{staticClass:\"back-button-icon\",attrs:{\"src\":require(\"@/assets/images/chevron-left.svg\")}}),_vm._v(\"\\n      \"+_vm._s(_vm.$t('Back to ad details'))+\"\\n    \")])],1),_c('h5',{staticClass:\"ad-details-desc text-base font-normal text-gray-500 mt-10 md:mb-16 mb-4\"},[_vm._v(\"\\n    \"+_vm._s(_vm.$t('This is how your ad will be displayed on the Speakol widget.'))+\"\\n  \")]),_c('div',{staticClass:\"mobile-preview-button\"},[_c('vs-button',{staticClass:\"w-full pl-16\",attrs:{\"color\":\"primary\",\"type\":\"border\"},on:{\"click\":function($event){_vm.value.is_previewing = false}}},[_c('img',{staticClass:\"back-button-icon\",attrs:{\"src\":require(\"@/assets/images/chevron-left.svg\")}}),_vm._v(\"\\n      \"+_vm._s(_vm.$t('Back to ad details'))+\"\\n    \")])],1),_c('div',[_c('div',{staticClass:\"w-full text-center md:mt-8 mt-6 ad-preview-container flex md:flex-row flex-col justify-center\"},_vm._l((_vm.previews),function(p,index){return _c('div',{key:'span-tag-' + index,staticClass:\"span-tag md:mr-6 mb-2 flex justify-center md:flex-grow-0 flex-grow device-btn\",class:{'span-tag-active' : _vm.currently_previewing === p},on:{\"click\":function($event){return _vm.changeCurrentlyPreviewing(p)}}},[_c('span',[_c('vs-icon',{staticClass:\"device-btn-icon\",attrs:{\"icon-pack\":\"speakol\",\"icon\":(\"speakol-\" + p)}}),_c('span',{staticClass:\"ml-2\"},[_vm._v(_vm._s(_vm.$t(p)))])],1)])}),0)]),_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"relative vx-col w-full mt-5\"},[_c('img',{staticClass:\"w-full m-auto block mb-5\",class:_vm.previewMockupClasses,attrs:{\"src\":_vm.mockupImgSrc,\"alt\":\"Image\"}}),(_vm.file_as_data_url !== null && _vm.file_type === 'image')?_c('img',{staticClass:\"absolute m-auto block\",class:_vm.previewClasses,attrs:{\"src\":_vm.file_as_data_url}}):_vm._e(),(_vm.file_as_data_url !== null && _vm.file_type === 'video')?_c('video',{staticClass:\"absolute\",class:_vm.previewClasses,attrs:{\"src\":_vm.file_as_data_url}}):_vm._e(),(this.getImageTypeBasedOnCampaignType() === 'default' && _vm.file_as_data_url !== null && _vm.file_type === 'video')?_c('video',{staticClass:\"absolute\",class:_vm.previewBackImageClasses,attrs:{\"src\":_vm.file_as_data_url}}):_vm._e(),(!this.value.upload_video && this.getImageTypeBasedOnCampaignType() === 'default')?_c('img',{staticClass:\"absolute m-auto block\",class:_vm.previewBackImageClasses,attrs:{\"src\":_vm.file_as_data_url}}):_vm._e(),(this.getImageTypeBasedOnCampaignType() === 'default' && this.isAdContentEmpty())?_c('div',{staticClass:\"flex justify-between absolute space-x-3\",class:_vm.previewContentBackImageClasses},[_c('h4',{staticClass:\"cta-content-bg\"},[_vm._v(_vm._s(this.value.content))]),(_vm.showCTA)?_c('button',{staticClass:\"cta-preview-bg\"},[_vm._v(_vm._s(this.value.cta.value))]):_vm._e()]):_vm._e(),(this.getImageTypeBasedOnCampaignType() === 'default' && this.isAdContentEmpty())?_c('div',{staticClass:\"flex justify-between absolute space-x-3\",class:_vm.previewContentClasses},[_c('h4',{staticClass:\"cta-content\"},[_vm._v(_vm._s(this.value.content))]),(_vm.showCTA)?_c('button',{staticClass:\"cta-action\"},[_vm._v(_vm._s(this.value.cta.value))]):_vm._e()]):_vm._e()])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <vx-card class=\"preview-container mb-10\" :noShadow=\"true\">\n    <div class=\"float-left\">\n      <h5 class=\"font-medium text-2xl\">\n        {{ $t('Ad Preview') }}\n      </h5>\n    </div>\n\n    <div class=\"back-to-ad-button float-right\">\n      <vs-button id=\"create-campaign-s5-back-to-ad-details-button\" @click=\"value.is_previewing = false\" class=\"pl-16\" color=\"primary\" type=\"border\">\n        <img class=\"back-button-icon\" src=\"@/assets/images/chevron-left.svg\" />\n        {{ $t('Back to ad details') }}\n      </vs-button>\n    </div>\n\n    <h5 class=\"ad-details-desc text-base font-normal text-gray-500 mt-10 md:mb-16 mb-4\">\n      {{ $t('This is how your ad will be displayed on the Speakol widget.') }}\n    </h5>\n\n    <div class=\"mobile-preview-button\">\n      <vs-button @click=\"value.is_previewing = false\" class=\"w-full pl-16\" color=\"primary\" type=\"border\">\n        <img class=\"back-button-icon\" src=\"@/assets/images/chevron-left.svg\" />\n        {{ $t('Back to ad details') }}\n      </vs-button>\n    </div>\n\n    <div>\n      <div class=\"w-full text-center md:mt-8 mt-6 ad-preview-container flex md:flex-row flex-col justify-center\">\n        <div v-for=\"(p, index) in previews\" :key=\"'span-tag-' + index\" class=\"span-tag md:mr-6 mb-2 flex justify-center md:flex-grow-0 flex-grow device-btn\" :class=\"{'span-tag-active' : currently_previewing === p}\" @click=\"changeCurrentlyPreviewing(p)\">\n          <span ><vs-icon icon-pack=\"speakol\" :icon=\"`speakol-${p}`\" class=\"device-btn-icon\"></vs-icon><span class=\"ml-2\">{{ $t(p) }}</span></span>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"vx-row\">\n      <div class=\"relative vx-col w-full mt-5\">\n        <!-- mockup -->\n        <img class=\"w-full m-auto block mb-5\" :class=\"previewMockupClasses\" :src=\"mockupImgSrc\" alt=\"Image\" />\n\n        <!-- mockup -->\n        <img class=\"absolute m-auto block\" v-if=\"file_as_data_url !== null && file_type === 'image'\" :class=\"previewClasses\" :src=\"file_as_data_url\" />\n\n        <video class=\"absolute\" v-if=\"file_as_data_url !== null && file_type === 'video'\" :class=\"previewClasses\" :src=\"file_as_data_url\"></video>\n        <video class=\"absolute\" v-if=\"this.getImageTypeBasedOnCampaignType() === 'default' && file_as_data_url !== null && file_type === 'video'\" :class=\"previewBackImageClasses\" :src=\"file_as_data_url\"></video>\n\n        <!-- content: this.value.content -->\n        <img class=\"absolute m-auto block\" v-if=\"!this.value.upload_video && this.getImageTypeBasedOnCampaignType() === 'default'\" :class=\"previewBackImageClasses\" :src=\"file_as_data_url\" />\n\n        <div class=\"flex justify-between absolute space-x-3\" :class=\"previewContentBackImageClasses\" v-if=\"this.getImageTypeBasedOnCampaignType() === 'default' && this.isAdContentEmpty()\">\n          <h4 class=\"cta-content-bg\">{{ this.value.content }}</h4>\n\n          <button v-if=\"showCTA\" class=\"cta-preview-bg\">{{this.value.cta.value}}</button>\n        </div>\n\n        <div class=\"flex justify-between absolute space-x-3\" :class=\"previewContentClasses\" v-if=\"this.getImageTypeBasedOnCampaignType() === 'default' && this.isAdContentEmpty()\">\n          <h4 class=\"cta-content\">{{ this.value.content }}</h4>\n\n          <button v-if=\"showCTA\" class=\"cta-action\">{{this.value.cta.value}}</button>\n        </div>\n      </div>\n    </div>\n  </vx-card>\n</template>\n\n<script>\nimport './AdPreview.scss'\n\nexport default {\n  props: {\n    value: {\n      required: true,\n      type: Object\n    },\n    type: {\n      type: String,\n      required: true\n    },\n    language: {\n      type: String,\n      required: true\n    }\n  },\n  watch: {\n    value: {\n      handler (newVal) {\n        this.$emit('input', newVal)\n      },\n      deep: true\n    },\n    'value.file' () {\n      this.initFilePreviewing()\n    }\n  },\n  data () {\n    return {\n      // the relative data in each case\n      previews: ['desktop', 'mobile', 'tablet'],\n      types: ['default', 'inline', 'stories'],\n      languages: ['arabic', 'english'],\n      file_types: ['image', 'video'],\n      contents: ['', '-no-content'],\n\n      currently_previewing: 'desktop',\n      file_as_data_url: null,\n      file_type: null\n    }\n  },\n  computed: {\n    showCTA () {\n      return this.$hasFeature('ad-cta') && this.type === this.$constants.CAMPAIGN_TYPES_NAMES.RECOMMENDATIONS && this.value.cta\n    },\n    mockupImgSrc () {\n      // the name of the mockup is generated by the selected certeria\n      // type-preview-language?-no-content\n      // ex: default-desktop-arabic or default-desktop-arabic-no-content in case the ad content is empty\n      // @see this.isAdContentEmpty\n\n      const type = this.getImageTypeBasedOnCampaignType()\n      const language = this.language\n      const preview = this.currently_previewing\n      let no_content = !this.isAdContentEmpty() ? '-no-content' : ''\n\n      if (type === 'inline' || type === 'stories') {\n        no_content = ''\n      }\n\n      return require(`@/assets/images/ad-preview/${type}-${preview}-${language}${no_content}.png`)\n    },\n    previewClasses () {\n      // the name of the class is generated by the selected certeria\n      // type-preview-language-file_type?-no-content\n      // file type can be image or video\n      // ex: default-desktop-arabic-image or default-desktop-arabic-image-no-content in case the ad content is empty\n      // @see this.isAdContentEmpty\n      const classes = {}\n\n      const selected_type = this.getImageTypeBasedOnCampaignType()\n      let no_content = !this.isAdContentEmpty() ? '-no-content' : ''\n\n      if (selected_type === 'inline') {\n        no_content = ''\n      }\n\n      this.previews.forEach(preview => {\n        this.types.forEach((type) => {\n          this.languages.forEach((language) => {\n            this.file_types.forEach((file_type) => {\n              this.contents.forEach((content) => {\n                const result =\n                  type === selected_type &&\n                  this.currently_previewing === preview &&\n                  this.language === language &&\n                  this.file_type === file_type &&\n                  no_content === content\n\n                const className = `${type}-${preview}-${language}-${file_type}${content}`\n\n                if (!classes.hasOwnProperty(className)) {\n                  classes[className] = result\n                }\n              })\n            })\n          })\n        })\n      })\n\n      return classes\n    },\n    previewMockupClasses () {\n      // the name of the class is generated by the selected certeria\n      // mockup-type-preview-language\n      // file type can be image or video\n      // ex: mockup-default-desktop-arabic or mockup-default-desktop-arabic-image in case the ad content is empty\n      // @see this.isAdContentEmpty\n      const classes = {}\n\n      const selected_type = this.getImageTypeBasedOnCampaignType()\n\n      this.previews.forEach(preview => {\n        this.types.forEach((type) => {\n          this.languages.forEach((language) => {\n            const result =\n                type === selected_type &&\n                this.currently_previewing === preview &&\n                this.language === language\n\n            const className = `mockup-${type}-${preview}-${language}`\n\n            if (!classes.hasOwnProperty(className)) {\n              classes[className] = result\n            }\n          })\n        })\n      })\n\n      return classes\n    },\n    previewBackImageClasses () {\n      // the name of the class is generated by the selected certeria\n      // back-type-preview-language-file_type?-no-content\n      // file type can be image or video\n      // ex: back-default-desktop-arabic-image or back-default-desktop-arabic-image-no-content in case the ad content is empty\n      // @see this.isAdContentEmpty\n      const classes = {}\n\n      const selected_type = 'default'\n      const no_content = !this.isAdContentEmpty() ? '-no-content' : ''\n      const type = 'default'\n\n      this.previews.forEach(preview => {\n        this.languages.forEach((language) => {\n          this.file_types.forEach((file_type) => {\n            this.contents.forEach((content) => {\n              const result =\n                type === selected_type &&\n                this.currently_previewing === preview &&\n                this.language === language &&\n                this.file_type === file_type &&\n                no_content === content\n\n              const className = `back-${type}-${preview}-${language}-${file_type}${content}`\n\n              if (!classes.hasOwnProperty(className)) {\n                classes[className] = result\n              }\n            })\n          })\n        })\n      })\n\n      return classes\n    },\n    previewContentBackImageClasses () {\n      // the name of the class is generated by the selected certeria\n      // content-back-type-preview-language-file_type?-no-content\n      // file type can be image or video\n      // ex: content-back-default-desktop-arabic-image or content-back-default-desktop-arabic-image-no-content in case the ad content is empty\n      // @see this.isAdContentEmpty\n      const classes = {}\n\n      const selected_type = 'default'\n      const no_content = !this.isAdContentEmpty() ? '-no-content' : ''\n      const type = 'default'\n\n      this.previews.forEach(preview => {\n        this.languages.forEach((language) => {\n          this.file_types.forEach((file_type) => {\n            this.contents.forEach((content) => {\n              const result =\n                type === selected_type &&\n                this.currently_previewing === preview &&\n                this.language === language &&\n                this.file_type === file_type &&\n                no_content === content\n\n              const className = `content-back-${type}-${preview}-${language}-${file_type}${content}`\n\n              if (!classes.hasOwnProperty(className)) {\n                classes[className] = result\n              }\n            })\n          })\n        })\n      })\n\n      return classes\n    },\n    previewContentClasses () {\n      // the name of the class is generated by the selected certeria\n      // content-type-preview-language-file_type?-no-content\n      // file type can be image or video\n      // ex: content-default-desktop-arabic-image or content-default-desktop-arabic-image-no-content in case the ad content is empty\n      // @see this.isAdContentEmpty\n      const classes = {}\n\n      const selected_type = this.getImageTypeBasedOnCampaignType()\n      let no_content = !this.isAdContentEmpty() ? '-no-content' : ''\n      const types = ['default', 'stories']\n      if (selected_type === 'inline') {\n        no_content = ''\n      }\n\n      this.previews.forEach(preview => {\n        types.forEach((type) => {\n          this.languages.forEach((language) => {\n            this.file_types.forEach((file_type) => {\n              this.contents.forEach((content) => {\n                const result =\n                  type === selected_type &&\n                  this.currently_previewing === preview &&\n                  this.language === language &&\n                  this.file_type === file_type &&\n                  no_content === content\n\n                const className = `content-${type}-${preview}-${language}-${file_type}${content}`\n\n                if (!classes.hasOwnProperty(className)) {\n                  classes[className] = result\n                }\n              })\n            })\n          })\n        })\n      })\n\n      return classes\n    }\n  },\n  mounted () {\n    this.initFilePreviewing()\n  },\n  methods: {\n    preview (file) {\n      const reader = new FileReader()\n\n      reader.onload = (e) => {\n        this.file_as_data_url = e.target.result\n      }\n\n      if (file instanceof File || file instanceof Blob) {\n        reader.readAsDataURL(file)\n      }\n    },\n    initFilePreviewing () {\n      if (this.value.file instanceof File) {\n        this.file_type = this.value.file.type.split('/')[0]\n\n        this.preview(this.value.file)\n      } else if (typeof this.value.file === 'string' && this.value.file.includes('https://www.youtube.com/watch?v=')) {\n        this.file_as_data_url = this.getThumpFromYoutubelink(this.value.file)\n        this.file_type = 'image'\n      } else {\n        this.file_as_data_url = this.value.file || null\n        if (this.file_as_data_url) {\n          this.file_type = this.value.has_video ? 'video' : 'image'\n        } else {\n          this.file_type = null\n        }\n      }\n    },\n    changeCurrentlyPreviewing (p) {\n      this.currently_previewing = p\n    },\n    getThumpFromYoutubelink (link) {\n      let video_id = link.split('v=')[1]\n\n      const ampersandPosition = video_id.indexOf('&')\n\n      if (ampersandPosition !== -1) {\n        video_id = video_id.substring(0, ampersandPosition)\n      }\n\n      return `https://img.youtube.com/vi/${video_id}/maxresdefault.jpg`\n    },\n    isAdContentEmpty () {\n      return this.value.content !== '' && this.value.content !== null\n    },\n    getImageTypeBasedOnCampaignType () {\n      let type = 'default'\n\n      if (this.type === 'Inline' || this.type === 'Stories') {\n        type = this.type.toLowerCase()\n      }\n\n      return type\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\">\n  .device-btn {\n    width: 161px;\n    height: 41px;\n  }\n\n  .device-btn-icon {\n    position: relative;\n    top: 4px;\n  }\n\n  .preview-container {\n    .video-container {\n      width: 70%;\n      height: 100%;\n\n      video {\n        width: 100%;\n      }\n    }\n  }\n\n  .back-button-icon {\n    position: absolute;\n    top: -1px;\n    left: -30px;\n  }\n\n  .cta {\n    background: #f4f4f4;\n    border: 1px solid #c2c2c2 !important;\n    border-radius: 4px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n\n  .cta-action {\n    @extend .cta;\n\n    padding: 0 12px;\n    height: 36px;\n    font: 14px Poppins;\n  }\n\n  .cta-preview {\n    @extend .cta;\n\n    padding: 6px;\n    height: 23px;\n    font-size: x-small;\n  }\n\n  .cta-preview-bg {\n    @extend .cta;\n\n    padding: 6px;\n    font-size: 6px;\n    height: 16px;\n    line-height: 10%;\n  }\n\n  .cta-content {\n    text-overflow: ellipsis;\n    overflow: hidden;\n  }\n\n  .cta-content-bg {\n    overflow: hidden !important;\n    white-space: nowrap !important;\n    text-overflow: ellipsis !important;\n  }\n\n  .cta-action:hover {\n    background: #d8dadf;\n  }\n\n  @media (max-width: 768px) {\n    .device-btn {\n      width: 100%;\n    }\n\n    .cta-mobile {\n      background: #f4f4f4;\n      border: 1px solid #323232 !important;\n      border-radius: 4px;\n      display: inline-block;\n      white-space: nowrap;\n    }\n\n    .cta-action {\n      @extend .cta-mobile;\n\n      font-size: 5px;\n      height: 10px;\n      line-height: 10%;\n      width: 45px;\n      padding: 2px;\n    }\n\n    .cta-preview {\n      @extend .cta-mobile;\n\n      padding: 6px;\n      height: 23px;\n      font-size: x-small;\n    }\n\n    .cta-preview-bg {\n      @extend .cta-mobile;\n\n      font-size: 1px;\n      padding: 0;\n      height: 5px;\n      min-width: 8px;\n    }\n\n    .cta-content-bg {\n      overflow: hidden;\n      display: block;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n  }\n</style>\n","import mod from \"-!../../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AdPreview.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AdPreview.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./AdPreview.vue?vue&type=template&id=2a7ddc87&\"\nimport script from \"./AdPreview.vue?vue&type=script&lang=js&\"\nexport * from \"./AdPreview.vue?vue&type=script&lang=js&\"\nimport style0 from \"./AdPreview.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var map = {\n\t\"./default-desktop-arabic-no-content.png\": \"945e\",\n\t\"./default-desktop-arabic.png\": \"369e\",\n\t\"./default-desktop-english-no-content.png\": \"4231\",\n\t\"./default-desktop-english.png\": \"4d03\",\n\t\"./default-mobile-arabic-no-content.png\": \"722c\",\n\t\"./default-mobile-arabic.png\": \"6320\",\n\t\"./default-mobile-english-no-content.png\": \"0816\",\n\t\"./default-mobile-english.png\": \"b859\",\n\t\"./default-tablet-arabic-no-content.png\": \"cb6d\",\n\t\"./default-tablet-arabic.png\": \"27e0\",\n\t\"./default-tablet-english-no-content.png\": \"741e\",\n\t\"./default-tablet-english.png\": \"cf1d\",\n\t\"./inline-desktop-arabic.png\": \"77b1\",\n\t\"./inline-desktop-english.png\": \"cd2e\",\n\t\"./inline-mobile-arabic.png\": \"8c25\",\n\t\"./inline-mobile-english.png\": \"ff75\",\n\t\"./inline-tablet-arabic.png\": \"39a9\",\n\t\"./inline-tablet-english.png\": \"addf\",\n\t\"./stories-desktop-arabic.png\": \"2e30\",\n\t\"./stories-desktop-english.png\": \"4c955\",\n\t\"./stories-mobile-arabic.png\": \"7525\",\n\t\"./stories-mobile-english.png\": \"7c71\",\n\t\"./stories-tablet-arabic.png\": \"1cda\",\n\t\"./stories-tablet-english.png\": \"9f46\"\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = \"f559b\";","module.exports = __webpack_public_path__ + \"img/inline-mobile-english.3f9e7030.png\";"],"sourceRoot":""}