{"version":3,"sources":["webpack:///./src/views/campaigns/components/CardSlider.vue?f376","webpack:///src/views/campaigns/components/CardSlider.vue","webpack:///./src/views/campaigns/components/CardSlider.vue?8716","webpack:///./src/views/campaigns/components/CardSlider.vue","webpack:///./src/views/campaigns/components/CardSlider.vue?05a3"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","atHeadOfList","on","$event","moveCarousel","style","transform","currentOffset","_l","item","index","key","class","value","title","disabled_items","includes","updateValue","isNew","_v","_e","isSoon","isBeta","image","_s","domProps","subtitle","atEndOfList","staticRenderFns","props","type","String","required","Array","default","items","new_items","soon_items","beta_items","data","windowSize","paginationFactor","activeItems","computed","x","matches","watch","$hasFeature","filter","methods","direction","$emit","component"],"mappings":"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","file":"js/chunk-4d8e488a.2f2bfcd9.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"card-carousel-wrapper mt-12\"},[_c('div',{staticClass:\"card-carousel--nav__left\",attrs:{\"disabled\":_vm.atHeadOfList},on:{\"click\":function($event){return _vm.moveCarousel(-1)}}}),_c('div',{staticClass:\"card-carousel\"},[_c('div',{staticClass:\"card-carousel--overflow-container\"},[_c('div',{staticClass:\"card-carousel-cards\",style:({ transform: 'translateX' + '(' + _vm.currentOffset + 'px' + ')'})},_vm._l((_vm.activeItems),function(item,index){return _c('div',{key:index,staticClass:\"card-carousel--card\",class:{'active': _vm.value === item.title, 'disabled': _vm.disabled_items.includes(item.title)},on:{\"click\":function($event){return _vm.updateValue(item.title)}}},[_c('div',{staticClass:\"card-carousel--card--footer text-center\"},[(_vm.isNew(item.title))?_c('span',{staticClass:\"new-label items-center\"},[_vm._v(\"New\")]):_vm._e(),(_vm.isSoon(item.title))?_c('span',{staticClass:\"soon-label items-center\"},[_vm._v(\"Soon\")]):_vm._e(),(_vm.isBeta(item.title))?_c('span',{staticClass:\"beta-label items-center\"},[_vm._v(\"Beta\")]):_vm._e(),_c('img',{staticClass:\"campaign-objective-imges mt-5 mb-5\",class:_vm.isNew(item.title) ? 'new-item': '',attrs:{\"src\":item.image,\"alt\":\"objective\"}}),_c('h6',{staticClass:\"mb-5 text-lg font-medium\"},[_vm._v(\" \"+_vm._s(item.title)+\" \")]),_c('h4',{staticClass:\"card-subtitle text-sm\",domProps:{\"innerHTML\":_vm._s(item.subtitle)}})])])}),0)])]),_c('div',{staticClass:\"card-carousel--nav__right\",attrs:{\"disabled\":_vm.atEndOfList},on:{\"click\":function($event){return _vm.moveCarousel(1)}}})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"card-carousel-wrapper mt-12\">\n    <div class=\"card-carousel--nav__left\" @click=\"moveCarousel(-1)\" :disabled=\"atHeadOfList\"></div>\n    <div class=\"card-carousel\">\n      <div class=\"card-carousel--overflow-container\">\n        <div class=\"card-carousel-cards\" :style=\"{ transform: 'translateX' + '(' + currentOffset + 'px' + ')'}\">\n          <div class=\"card-carousel--card\" v-for=\"(item, index) in activeItems\" :key=\"index\" :class=\"{'active': value === item.title, 'disabled': disabled_items.includes(item.title)}\" @click=\"updateValue(item.title)\">\n            <div class=\"card-carousel--card--footer text-center\">\n              <span class=\"new-label items-center\" v-if=\"isNew(item.title)\">New</span>\n              <span class=\"soon-label items-center\" v-if=\"isSoon(item.title)\">Soon</span>\n              <span class=\"beta-label items-center\" v-if=\"isBeta(item.title)\">Beta</span>\n              <img class=\"campaign-objective-imges mt-5 mb-5\" :class=\"isNew(item.title) ? 'new-item': ''\" :src=\"item.image\" alt=\"objective\" />\n              <h6 class=\"mb-5 text-lg font-medium\"> {{ item.title }} </h6>\n              <h4 class=\"card-subtitle text-sm\" v-html=\"item.subtitle\"></h4>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-carousel--nav__right\" @click=\"moveCarousel(1)\" :disabled=\"atEndOfList\"></div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    value: {\n      type: String,\n      required: true\n    },\n    disabled_items: {\n      type: Array,\n      required: false,\n      default () {\n        return []\n      }\n    },\n    items: {\n      type: Array,\n      required: true\n    },\n\n    new_items: {\n      type: Array,\n      required: false\n    },\n\n    soon_items: {\n      type: Array,\n      required: false\n    },\n\n    beta_items: {\n      type: Array,\n      required: false\n    }\n  },\n  data () {\n    return {\n      currentOffset: 0,\n      windowSize: 3,\n      paginationFactor: 275,\n      activeItems: []\n    }\n  },\n  computed: {\n    atEndOfList () {\n      const x = window.matchMedia('(max-width: 576px)')\n\n      if (x.matches) {\n        return this.currentOffset <= ((this.paginationFactor  + 200) * -1) * (this.items.length + (this.items.length === 5 ? 0 : 1) - this.windowSize)\n      } else {\n        return this.currentOffset <= (this.paginationFactor * -1) * (this.items.length - this.windowSize)\n      }\n    },\n\n    atHeadOfList () {\n      return this.currentOffset === 0\n    }\n  },\n  watch: {\n    items () {\n      this.currentOffset = 0\n\n      this.activeItems = this.items\n      // TODO: Fix this condition because it applies to any item that has the same ID as this.$constants.CAMPAIGN_OBJECTIVES_IDS.LEAD_FORM\n      if (!this.$hasFeature('lead_form')) {\n        this.activeItems = this.items.filter(el => el.id !== this.$constants.CAMPAIGN_OBJECTIVES_IDS.LEAD_FORM)\n      }\n\n    }\n  },\n  methods: {\n    isNew (title) {\n      return this.new_items ? this.new_items.includes(title) : false\n    },\n\n    isSoon (title) {\n      return this.soon_items ? this.soon_items.includes(title) : false\n    },\n\n    isBeta (title) {\n      return this.beta_items ? this.beta_items.includes(title) : false\n    },\n    moveCarousel (direction) {\n      // Find a more elegant way to express the :style. consider using props to make it truly generic\n      if (direction === 1 && !this.atEndOfList) {\n        this.currentOffset -= this.paginationFactor\n      } else if (direction === -1 && !this.atHeadOfList) {\n        this.currentOffset += this.paginationFactor\n      }\n    },\n    updateValue (value) {\n      if (this.disabled_items.includes(value)) {\n        return\n      }\n      this.$emit('input', value)\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n  $vue-navy: #2c3e50;\n  $vue-navy-light: #3a5169;\n  $vue-teal: #4492e7;\n  $vue-teal-light: #42b983;\n  $gray: #666a73;\n  $light-gray: #f8f8f8;\n\n  .new-label {\n    top: 16px;\n    left: 16px;\n    // left: -42%;\n    position: absolute;\n    // margin-left: 18px !important;\n    background: #db2828;\n    border-radius: 20px;\n    font-size: 12px;\n    line-height: 20px;\n    text-align: center;\n    color: #fff;\n    width: 49px !important;\n    height: 24px !important;\n    padding: 3px 11px 3px 11px;\n  }\n\n  .soon-label {\n    top: 16px;\n    left: 16px;\n    position: absolute;\n    background: $gray;\n    border-radius: 20px;\n    font-size: 12px;\n    line-height: 20px;\n    text-align: center;\n    color: #fff;\n    width: 49px !important;\n    height: 24px !important;\n    padding: 3px 11px 3px 11px;\n  }\n\n  .beta-label {\n    top: 16px;\n    left: 16px;\n    position: absolute;\n    background: #ffc107;\n    border-radius: 20px;\n    font-size: 12px;\n    line-height: 20px;\n    text-align: center;\n    color: #fff;\n    width: 49px !important;\n    height: 24px !important;\n    padding: 3px 11px 3px 11px;\n  }\n\n  .card-carousel-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    // margin: 20px 0 40px;\n    color: $gray;\n  }\n\n  .card-carousel {\n    display: flex;\n    justify-content: center;\n    width: 100%;\n\n    &--overflow-container {\n      overflow: hidden;\n    }\n\n    &--nav__left,\n    &--nav__right {\n      display: inline-block;\n      width: 15px;\n      height: 15px;\n      padding: 10px;\n      box-sizing: border-box;\n      border-top: 2px solid $vue-teal;\n      border-right: 2px solid $vue-teal;\n      cursor: pointer;\n      margin: 0 20px;\n      transition: transform 150ms linear;\n\n      &[disabled] {\n        opacity: 0.2;\n        border-color: black;\n      }\n    }\n\n    &--nav__left {\n      transform: rotate(-135deg);\n\n      &:active {\n        transform: rotate(-135deg) scale(0.9);\n      }\n    }\n\n    &--nav__right {\n      transform: rotate(45deg);\n\n      &:active {\n        transform: rotate(45deg) scale(0.9);\n      }\n    }\n  }\n\n  .card-carousel-cards {\n    display: flex;\n    transition: transform 150ms ease-out;\n    transform: translateX(0);\n\n    .card-carousel--card {\n      margin: 0 10px;\n      cursor: pointer;\n      box-shadow: none;\n      border: 1px solid rgba(153, 153, 153, 0.277289);\n      background-color: #fff;\n      border-radius: 15px;\n      z-index: 3;\n      margin-bottom: 2px;\n\n      &:first-child {\n        margin-left: 0;\n      }\n\n      &:last-child {\n        margin-right: 0;\n      }\n\n      img {\n        vertical-align: bottom;\n        border-top-left-radius: 4px;\n        border-top-right-radius: 4px;\n        transition: opacity 150ms linear;\n        user-select: none;\n\n        // &:hover {\n        //   opacity: 0.5;\n        // }\n      }\n\n      &--footer {\n        border-top: 0;\n        padding: 7px 15px;\n      }\n    }\n\n    .card-subtitle {\n      font-size: 12px;\n      font-weight: unset !important;\n    }\n\n    .card-carousel--card--footer {\n      position: relative;\n      height: 290px;\n      width: 290px;\n    }\n  }\n\n  // .new-item {\n  //   margin-left: -70px !important;\n  // }\n\n  @media (max-width: 576px) {\n    .card-carousel--card--footer {\n      height: 250px !important;\n      width: 253px !important;\n    }\n  }\n\n  .card-carousel--nav__left {\n    position: relative;\n    left: 40px;\n    z-index: 999;\n  }\n\n  .card-carousel--nav__right {\n    position: relative;\n    right: 40px;\n    z-index: 999;\n  }\n\n  .active {\n    border: 1px solid #0092d7 !important;\n\n    h4 {\n      color: #0092d7 !important;\n    }\n\n    h6 {\n      color: #0092d7 !important;\n    }\n\n    img {\n      filter: grayscale(0%) !important;\n    }\n  }\n\n  .campaign-objective-imges {\n    width: 78px;\n    margin-top: 50px !important;\n  }\n\n  .disabled {\n    h6,\n    h4 {\n      color: #bdc3ca;\n    }\n\n    img {\n      -webkit-filter: grayscale(100%);\n      filter: grayscale(100%);\n    }\n\n    cursor: not-allowed !important;\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!./CardSlider.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!./CardSlider.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./CardSlider.vue?vue&type=template&id=847084ec&scoped=true&\"\nimport script from \"./CardSlider.vue?vue&type=script&lang=js&\"\nexport * from \"./CardSlider.vue?vue&type=script&lang=js&\"\nimport style0 from \"./CardSlider.vue?vue&type=style&index=0&id=847084ec&lang=scss&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  \"847084ec\",\n  null\n  \n)\n\nexport default component.exports","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!./CardSlider.vue?vue&type=style&index=0&id=847084ec&lang=scss&scoped=true&\""],"sourceRoot":""}