{"version":3,"file":"cta-prompt-Cf6ca-ii.js","sources":["../../../app/javascript/components/cta-prompt.vue?vue&type=template&lang.js","../../../app/javascript/components/cta-prompt.vue"],"sourcesContent":["\n<div class=\"cta-bar\" :class=\"['container', {'is-visible': visible }, {'is-sticky': sticky }]\">\n  <div class=\"prompt\" :style=\"{backgroundImage: background ? 'url(' + background + ')' : null}\">\n    <div class=\"prompt__left\">\n      <p class=\"prompt__title\">{{ name }}</p>\n    </div>\n\n    <div class=\"prompt__right\"><slot></slot></div>\n  </div>\n</div>\n","<template>\n  <div class=\"cta-bar\" :class=\"['container', {'is-visible': visible }, {'is-sticky': sticky }]\">\n    <div class=\"prompt\" :style=\"{backgroundImage: background ? 'url(' + background + ')' : null}\">\n      <div class=\"prompt__left\">\n        <p class=\"prompt__title\">{{ name }}</p>\n      </div>\n\n      <div class=\"prompt__right\"><slot></slot></div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { EventBus } from '../utils/event-bus';\nexport default {\n  props: ['name','children','background'],\n  data() {\n    return {\n      visible: false,\n      sticky: false,\n    }\n  },\n  mounted() {\n    EventBus.$on('toggleCtaPrompt', (payload) => {\n      if(payload.visibility == 'hide') {\n        this.visible = false;\n      } else if(payload.visibility == 'show') {\n        this.visible = true;\n      }\n    })\n\n    EventBus.$on('toggleCtaPromptSticky', (payload) => {\n      this.sticky = payload;\n    })    \n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n  .container {\n    position: fixed;\n    top: 100%;\n    left: 0;\n    right: 0;\n    width: 100%;\n    height: 100px;\n    z-index: 5;\n    transition: transform .6s cubic-bezier(.25,1.34,.65,1.01);\n\n    &.is-visible {\n      transform: translateY(-120%);\n    }\n\n    &.is-sticky {\n      transform: translateY(-120%);\n      position: static;      \n      top: auto;\n      left: auto;\n      right: auto;\n      width: 100%;\n      margin-bottom: -100px;      \n      height: 100px;\n    }\n\n    @media screen and (max-width: 479px) {\n      height: auto;\n    }\n  }\n\n  .prompt {\n    height: 100%;\n    background: #E7E7E7; \n    background-image: url('../../assets/images/backgrounds/report-download-prompt-bg.png');\n    background-size: cover;\n    background-position: center;\n    border-radius: 21px;\n    color: #fff;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 48px;\n    overflow: hidden;\n\n    @media screen and (max-width: 768px) {\n      padding: 0 28px;\n      justify-content: center;\n    }\n\n    @media screen and (max-width: 479px) {\n      padding: 18px;\n    }\n  }\n\n  .prompt__left {\n    padding-right: 14px;\n  }\n\n  .prompt__title {\n    font-family: 'Inter-SemiBold', Arial, Helvetica, sans-serif;\n    font-size: 18px;\n    // color: #19193B;\n    color: white;\n    letter-spacing: 0;\n    line-height: 32px;\n\n    @media screen and (max-width: 768px) {\n      display: none;\n    }\n  }\n</style>"],"names":["render","_vm","_h","_c","staticRenderFns","__vue2_script","EventBus","payload"],"mappings":"2IAAA,IAAIA,EAAS,UAAY,CACvB,IAAIC,EAAI,KACJC,EAAGD,EAAI,eACPE,EAAGF,EAAI,MAAM,IAAIC,EAErB,OAAOC,EAAG,MAAO,CACf,YAAa,UACb,MAAO,CAAC,YAAa,CACnB,aAAcF,EAAI,OACxB,EAAO,CACD,YAAaA,EAAI,MAClB,CAAA,CACL,EAAK,CAACE,EAAG,MAAO,CACZ,YAAa,SACb,MAAO,CACL,gBAAiBF,EAAI,WAAa,OAASA,EAAI,WAAa,IAAM,IACxE,CACA,EAAK,CAACE,EAAG,MAAO,CACZ,YAAa,cACjB,EAAK,CAACA,EAAG,IAAK,CACV,YAAa,eACd,EAAE,CAACF,EAAI,GAAGA,EAAI,GAAGA,EAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,EAAGE,EAAG,MAAO,CAC1C,YAAa,eACjB,EAAK,CAACF,EAAI,GAAG,SAAS,CAAC,EAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAC/B,EACIG,EAAkB,CAAE,ECXxB,MAAAC,EAAA,CACA,MAAA,CAAA,OAAA,WAAA,YAAA,EACA,MAAA,CACA,MAAA,CACA,QAAA,GACA,OAAA,EACA,CACA,EACA,SAAA,CACAC,EAAA,IAAA,kBAAAC,GAAA,CACAA,EAAA,YAAA,OACA,KAAA,QAAA,GACAA,EAAA,YAAA,SACA,KAAA,QAAA,GAEA,CAAA,EAEAD,EAAA,IAAA,wBAAAC,GAAA,CACA,KAAA,OAAAA,CACA,CAAA,CACA,CACA"}