{"version":3,"sources":["webpack:///./src/components/interactions/CrmInteraction.vue?f773","webpack:///./src/components/interactions/CrmInteraction.vue?1189","webpack:///src/components/interactions/CrmInteraction.vue","webpack:///./src/components/interactions/CrmInteraction.vue?0c59","webpack:///./src/components/interactions/CrmInteraction.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","ref","staticClass","href","content","tag","isFunnelVisible","sources","length","attrs","$refs","wrapper","offsetWidth","height","labels","values","colors","subLabels","direction","_e","staticRenderFns","component"],"mappings":"kHAAA,yBAAokB,EAAG,G,kECAvkB,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,IAAI,UAAUC,YAAY,eAAe,CAACH,EAAGJ,EAAIQ,KAAK,6BAA6BC,QAAQ,CAACC,IAAI,cAAeV,EAAIW,iBAAmBX,EAAIY,QAAQC,OAAQT,EAAG,mBAAmB,CAACU,MAAM,CAAC,MAAQd,EAAIe,MAAMC,SAAWhB,EAAIe,MAAMC,QAAQC,YAAY,OAASjB,EAAIkB,OAAO,OAASlB,EAAImB,OAAO,OAASnB,EAAIoB,OAAO,OAASpB,EAAIqB,OAAO,aAAarB,EAAIsB,UAAU,UAAYtB,EAAIuB,UAAU,UAAW,EAAK,sBAAqB,KAAQvB,EAAIwB,MAAM,IACrhBC,EAAkB,G,qGCsBtB,GACA,iBACA,iBACA,iBACA,kBACA,mBACA,kBACA,iBAGA,GACA,sBACA,gBACA,KAHA,WAIA,OACA,mBACA,mBACA,uBACA,WACA,YAGA,2BACA,kCADA,GAEA,gBACA,yCACA,6CAJA,CAMA,OANA,WAOA,0EAEA,UATA,WAUA,iEAEA,OAZA,WAaA,uDAGA,OACA,qBAEA,YACA,uBAEA,QAlCA,WAmCA,0EACA,qDAEA,cAtCA,WAuCA,wDAEA,QAzCA,WA0CA,+BAEA,SACA,aADA,WACA,WACA,qDACA,0CACA,qBACA,wBACA,0BAEA,QCrFuW,I,wBCQnWC,EAAY,eACd,EACA3B,EACA0B,GACA,EACA,KACA,WACA,MAIa,aAAAC,E","file":"js/chunk-29e10914.f199d959.js","sourcesContent":["import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CrmInteraction.vue?vue&type=style&index=0&id=f2195304&lang=less&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./CrmInteraction.vue?vue&type=style&index=0&id=f2195304&lang=less&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:\"wrapper\",staticClass:\"crm content\"},[_c(_vm.href('/interactions/crm/details').content,{tag:\"component\"}),(_vm.isFunnelVisible && _vm.sources.length)?_c('vue-funnel-graph',{attrs:{\"width\":_vm.$refs.wrapper && _vm.$refs.wrapper.offsetWidth,\"height\":_vm.height,\"labels\":_vm.labels,\"values\":_vm.values,\"colors\":_vm.colors,\"sub-labels\":_vm.subLabels,\"direction\":_vm.direction,\"animated\":true,\"display-percentage\":true}}):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n<div class=\"crm content\" ref=\"wrapper\">\n\t<component :is=\"href('/interactions/crm/details').content\" />\n\t<vue-funnel-graph \n\t\tv-if=\"isFunnelVisible && sources.length\"\n\t\t:width=\"$refs.wrapper && $refs.wrapper.offsetWidth\"\n\t\t:height=\"height\" \n\t\t:labels=\"labels\"\n\t\t:values=\"values\" \n\t\t:colors=\"colors\" \n\t\t:sub-labels=\"subLabels\" \n\t\t:direction=\"direction\"\n\t\t:animated=\"true\" \n\t\t:display-percentage=\"true\"\n\t></vue-funnel-graph>\n</div>\n</template>\n<script>\nimport hreflang from '@/lib/hreflang'\nimport { VueFunnelGraph } from 'vue-funnel-graph-js';\nimport { mapGetters, mapState } from 'vuex'\nimport _ from 'lodash'\n\nlet colorsMap = {\n\tdirect: '#65bd7d', \n\tsearch: '#ea4335',\n\tsocial: '#4687dd',\n\tdisplay: '#d07a6b',\n\treferral: '#f4b607',\n\tmessage: '#ff7bac',\n\tother: '#aeaeae'\n}\n\nexport default {\n\tname: 'CrmInteraction',\n\tmixins: [ hreflang ],\n\tdata() {\n\t\treturn {\n\t\t\tisFunnelVisible: false,\n\t\t\tresizeTimeout: null,\n\t\t\tdirection: 'horizontal',\n\t\t\theight: 300,\n\t\t\twidth: 600\n\t\t}\n\t},\n\tcomputed: {\n\t\t...mapGetters(\"aida\", [\"values\"]),\n\t\t...mapState({\n\t\t\tstages: state => state.aida.stages,\n\t\t\tsources: state => state.aida.sources\n\t\t}),\n\t\tlabels() {\n\t\t\treturn _.keys(this.stages).map(label => _.startCase(label))\n\t\t},\n\t\tsubLabels() {\n\t\t\treturn this.sources.map(label => _.startCase(label))\n\t\t},\n\t\tcolors() {\n\t\t\treturn this.sources.map(color => colorsMap[color])\n\t\t}\n\t},\n\tprops: {\n\t\tshowDetails: Boolean,\n\t},\n\tcomponents: {\n\t\tVueFunnelGraph\n\t},\n\tmounted() {\n\t\tthis.isFunnelVisible = this.$refs.wrapper && this.$refs.wrapper.offsetWidth > 0\n\t\twindow.addEventListener('resize', this.handleResize)\n\t},\n\tbeforeDestroy() {\n\t\twindow.removeEventListener(\"resize\", this.handleResize)\n\t},\n\tcreated() {\n\t\tthis.document(require('documents/en/interactions/crm-details.md'), 'en')\n\t},\n\tmethods: {\n\t\thandleResize() {\n\t\t\tif (this.resizeTimeout) clearTimeout(this.resizeTimeout)\n\t\t\tthis.resizeTimeout = setTimeout(() => {\n\t\t\t\tthis.isFunnelVisible = false\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.isFunnelVisible = true\n\t\t\t\t})\n\t\t\t}, 200)\n\t\t}\n\t}\n}\n</script>\n<style lang=\"less\" scoped>\n@import url('~whitebox-presentation/src/assets/variables.less');\n@import url('~whitebox-presentation/src/assets/mixins.less');\n\n/deep/ .svg-funnel-js {\n\tmargin-bottom: @gap * 3;\n\tmargin-top: @gap * 2.5;\n\t&:not(.svg-funnel-js--vertical) .svg-funnel-js__label:not(:first-child) {\n\t\tborder-left: 1px solid @shadow-25;\n\t}\n\t.svg-funnel-js__labels {\n\n\t\t.svg-funnel-js__label {\n\t\t\tpadding-left: @gap * 2;\n\t\t\t.label__percentage {\n\t\t\t\tcolor: @gray-50;\n\t\t\t\tfont-size: @font-size-s;\n\t\t\t\tfont-weight: @normal;\n\t\t\t\tline-height: 1;\n\t\t\t}    \n\t\t\t.label__value {\n\t\t\t\tcolor: @black;\n\t\t\t\tmargin-bottom: 0;\n\t\t\t\tfont-weight: @bold;\n\t\t\t\tfont-size: @font-size-m;\n\t\t\t}\n\t\t\t.label__title {\n\t\t\t\tcolor: @blue;\n\t\t\t\tfont-size: @font-size-l;\n\t\t\t\tline-height: 1;\n\t\t\t}\n\t\t\t.label__segment-percentages {\n\t\t\t\tbackground-color: #fff;\n\t\t\t\theight: 300px;\n\t\t\t\tpadding: @gap * 2;\n\t\t\t\tul li {\n\t\t\t\t\tcolor: @black;\n\t\t\t\t}\n\t\t\t\tul li .percentage__list-label {\n\t\t\t\t\tbackground-color: @magenta;\n\t\t\t\t\tcolor: @gray-0;\n\t\t\t\t\tpadding: @gap/2.5 @font-size/2;\n\t\t\t\t\tborder-radius: @font-size;\n\t\t\t\t\tfont-size: @font-size;\n\t\t\t\t\tfont-weight: 300;\n\t\t\t\t\tfloat: right;\n\t\t\t\t\ttransform: translateY(-@gap / 2.5);\n\t\t\t\t}\n\t\t\t\tul li:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\t.svg-funnel-js__subLabels {\n\t\t.svg-funnel-js__subLabel--title {\n\t\t\tcolor: @black;\n\t\t\tfont-size: @font-size;\n\t\t}\n\t\t.svg-funnel-js__subLabel--color {\n            width: @gap*2;\n            height: @gap*2;\n\t\t}\n\t}\n}\n\n</style>","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!./CrmInteraction.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!./CrmInteraction.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CrmInteraction.vue?vue&type=template&id=f2195304&scoped=true&\"\nimport script from \"./CrmInteraction.vue?vue&type=script&lang=js&\"\nexport * from \"./CrmInteraction.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CrmInteraction.vue?vue&type=style&index=0&id=f2195304&lang=less&scoped=true&\"\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  \"f2195304\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}