{"version":3,"sources":["webpack:///./src/views/campaigns/components/steps/components/AdsetAds/components/DemographicsAnnotation.vue?7806","webpack:///./src/views/campaigns/components/steps/components/AdsetAds/components/DemographicsAnnotation.vue?37b3","webpack:///src/views/campaigns/components/steps/components/AdsetAds/components/DemographicsAnnotation.vue","webpack:///./src/views/campaigns/components/steps/components/AdsetAds/components/DemographicsAnnotation.vue?6e0d","webpack:///./src/views/campaigns/components/steps/components/AdsetAds/components/DemographicsAnnotation.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","_v","_s","$t","_l","gender","index","key","class","isGenderActive","on","$event","toggleGender","id","name","_e","ageGroup","isAgeRangeActive","toggleAgeGroup","staticRenderFns","props","value","required","type","Object","adsetIndex","Number","adIndex","data","audienceSuggestions","created","handleAdAudienceSuggestionsObject","watch","handler","$emit","newVal","deep","computed","genders","$store","getters","ageGroups","age_groups","showAdAudienceSuggestions","show_audience_suggestions","adAges","length","adGenders","showAdAudienceSuggestionsAges","showAdAudienceSuggestionsGenders","methods","audience_suggestions","splice","push","component"],"mappings":"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","file":"js/chunk-8182e7d4.42084dfb.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!./DemographicsAnnotation.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.showAdAudienceSuggestions)?_c('vx-card',{staticClass:\"mb-10\",attrs:{\"noShadow\":true}},[_c('h4',{staticClass:\"demographics-annotation-title\"},[_vm._v(\"\\n    \"+_vm._s(_vm.$t('create_campaign.audience_suggestions.title'))+\"\\n  \")]),_c('h6',{staticClass:\"mt-3 demographics-annotation-desc\"},[_vm._v(\"\\n    \"+_vm._s(_vm.$t('create_campaign.audience_suggestions.description'))+\"\\n  \")]),(_vm.showAdAudienceSuggestionsGenders)?_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col md:w-2/3 w-full text-md font-bold gender-age-mobile-view gender-age-web-view\"},[_vm._v(\"\\n      \"+_vm._s(_vm.$t('create_campaign.audience_suggestions.genders_title'))+\"\\n    \")]),_c('div',{staticClass:\"vx-col w-full\"},[_c('ul',{staticClass:\"gender-mobile-version list-none\"},_vm._l((_vm.genders),function(gender,index){return _c('li',{key:'genders-' + index,staticClass:\"gender inline-block check-item-box\",class:{'active': _vm.isGenderActive(gender)},attrs:{\"id\":\"create-campaign-s5-gender-options-buttons\"},on:{\"click\":function($event){return _vm.toggleGender(gender.id)}}},[_vm._v(\"\\n          \"+_vm._s(gender.name)+\"\\n        \")])}),0)])]):_vm._e(),(_vm.showAdAudienceSuggestionsAges)?_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col md:w-1/3 w-full text-md font-bold age-title gender-age-mobile-view gender-age-web-view\"},[_vm._v(\"\\n      \"+_vm._s(_vm.$t('create_campaign.audience_suggestions.ages_title'))+\"\\n    \")]),_c('div',{staticClass:\"vx-col w-full\"},[_c('ul',{staticClass:\"age-mobile-version list-none\"},_vm._l((_vm.ageGroups),function(ageGroup,index){return _c('li',{key:'ageGroups-' + index,staticClass:\"age inline-block check-item-box\",class:{'active': _vm.isAgeRangeActive(ageGroup)},attrs:{\"id\":\"create-campaign-s5-age-options-buttons\"},on:{\"click\":function($event){return _vm.toggleAgeGroup(ageGroup.id)}}},[_vm._v(\"\\n          \"+_vm._s(ageGroup.name)+\"\\n        \")])}),0)])]):_vm._e()]):_vm._e()}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <vx-card class=\"mb-10\" :noShadow=\"true\" v-if=\"showAdAudienceSuggestions\">\n    <h4 class=\"demographics-annotation-title\">\n      {{ $t('create_campaign.audience_suggestions.title') }}\n    </h4>\n    <h6 class=\"mt-3 demographics-annotation-desc\">\n      {{ $t('create_campaign.audience_suggestions.description') }}\n    </h6>\n\n    <!-- Genders Group -->\n    <div class=\"vx-row\" v-if=\"showAdAudienceSuggestionsGenders\">\n      <div class=\"vx-col md:w-2/3 w-full text-md font-bold gender-age-mobile-view gender-age-web-view\">\n        {{ $t('create_campaign.audience_suggestions.genders_title') }}\n      </div>\n\n      <div class=\"vx-col w-full\">\n        <ul class=\"gender-mobile-version list-none\">\n          <li\n            id=\"create-campaign-s5-gender-options-buttons\"\n            class=\"gender inline-block check-item-box\"\n            v-for=\"(gender, index) in genders\"\n            :key=\"'genders-' + index\"\n            :class=\"{'active': isGenderActive(gender)}\"\n            @click=\"toggleGender(gender.id)\"\n          >\n            {{ gender.name }}\n          </li>\n        </ul>\n      </div>\n\n    </div>\n\n    <!-- Ages Group -->\n    <div class=\"vx-row\" v-if=\"showAdAudienceSuggestionsAges\">\n      <div class=\"vx-col md:w-1/3 w-full text-md font-bold age-title gender-age-mobile-view gender-age-web-view\">\n        {{ $t('create_campaign.audience_suggestions.ages_title') }}\n      </div>\n\n      <div class=\"vx-col w-full\">\n        <ul class=\"age-mobile-version list-none\">\n          <li\n            id=\"create-campaign-s5-age-options-buttons\"\n            class=\"age inline-block check-item-box\"\n            v-for=\"(ageGroup, index) in ageGroups\"\n            :key=\"'ageGroups-' + index\"\n            :class=\"{'active': isAgeRangeActive(ageGroup)}\"\n            @click=\"toggleAgeGroup(ageGroup.id)\"\n          >\n            {{ ageGroup.name }}\n          </li>\n        </ul>\n      </div>\n    </div>\n  </vx-card>\n</template>\n\n<script>\nimport {get, isEmpty} from 'lodash'\n\nexport default {\n  props: {\n    value: {\n      required: true,\n      type: Object\n    },\n    adsetIndex: {\n      required: true,\n      type: Number\n    },\n    adIndex: {\n      required: true,\n      type: Number\n    }\n  },\n  data () {\n    return {\n      audienceSuggestions: get(window.initialCampaignData, `adsets[${ this.adsetIndex }].ads[${ this.adIndex }].audience_suggestion.suggestions`, { genders: [], age_groups: [] })\n    }\n  },\n  created () {\n    this.handleAdAudienceSuggestionsObject()\n  },\n  watch: {\n    value: {\n      handler (newVal) {\n        this.$emit('input', newVal)\n      },\n      deep: true\n    }\n  },\n  computed: {\n    genders () {\n      return this.$store.getters['campaign/targetingLookups'].genders\n    },\n\n    ageGroups () {\n      return this.$store.getters['campaign/targetingLookups'].age_groups\n    },\n\n    showAdAudienceSuggestions () {\n      if (this.value.show_audience_suggestions === true) {\n        return true\n      }\n\n      const adAges = get(this.audienceSuggestions, 'age_groups', []),\n        adGenders = get(this.audienceSuggestions, 'genders', [])\n      if (adAges.length === 0 || adGenders.length === 0) {\n        return true\n      }\n\n      return false\n    },\n    showAdAudienceSuggestionsAges () {\n      if (this.value.show_audience_suggestions === true || isEmpty(get(this.audienceSuggestions, 'age_groups', []))) {\n        return true\n      }\n\n      return false\n    },\n    showAdAudienceSuggestionsGenders () {\n      if (this.value.show_audience_suggestions === true || isEmpty(get(this.audienceSuggestions, 'genders', []))) {\n        return true\n      }\n\n      return false\n    }\n  },\n  methods: {\n    toggleGender (id) {\n      const index = this.value.audience_suggestions.genders.findIndex(i => i === id)\n\n      if (index > -1) {\n        this.value.audience_suggestions.genders.splice(index, 1)\n      } else {\n        this.value.audience_suggestions.genders.push(id)\n      }\n\n    },\n    toggleAgeGroup (id) {\n      const index = this.value.audience_suggestions.age_groups.findIndex(i => i === id)\n\n      if (index > -1) {\n        this.value.audience_suggestions.age_groups.splice(index, 1)\n      } else {\n        this.value.audience_suggestions.age_groups.push(id)\n      }\n    },\n    handleAdAudienceSuggestionsObject () {\n      const genders = get(this.value, 'audience_suggestions.genders', []),\n        age_groups = get(this.value, 'audience_suggestions.age_groups', [])\n      this.value.audience_suggestions = {\n        genders,\n        age_groups\n      }\n    },\n    isGenderActive (gender) {\n      if (get(this.value, 'audience_suggestions.genders', []).includes(gender.id)) {\n        return true\n      }\n\n      return false\n    },\n    isAgeRangeActive (ageGroup) {\n      if (get(this.value, 'audience_suggestions.age_groups', []).includes(ageGroup.id)) {\n        return true\n      }\n\n      return false\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\">\n  .demographics-annotation-title {\n    font-weight: 500;\n    font-size: 24px;\n    color: rgba(0, 0, 0, 0.75);\n  }\n\n  .gender-age-web-view {\n    color:#2C2C2C;\n  }\n\n  .age-title {\n    margin-top: 24px;\n  }\n\n  .demographics-annotation-desc {\n    color: #999;\n    font-size: 14px;\n    margin-bottom: 32px;\n    line-height: 24px;\n    font-weight: normal;\n  }\n\n  .list-none {\n    margin-top: 16px !important;\n  }\n\n  .check-item-box {\n    min-width: 96px;\n    padding: 12px 0px;\n    border-radius: 2rem;\n    color: #0092d7;\n    border: 1px solid #0092d7;\n    background-color: #FFFFFF;\n    font-family: Poppins;\n    font-style: normal;\n    font-size: 1rem;\n    line-height: 1rem;\n    cursor: pointer;\n    text-align: center;\n  }\n\n  .check-item-box.active {\n    background: #0092D7;\n    border-radius: 50px;\n    color: #FFFFFF;\n  }\n\n  .age,\n  .gender {\n    margin-right: 16px;\n  }\n\n\n  @media (max-width: 576px) {\n    .gender-age-mobile-view {\n      font-size: 12px;\n      // margin-bottom: 20px;\n    }\n\n    .gender-mobile-version,\n    .age-mobile-version {\n      width: 100%;\n      text-align: left;\n      li {\n        width: 47%;\n        text-align: center;\n      }\n\n      li:first-child {\n        margin-left: 0px;\n        margin-right: 12px !important;\n      }\n\n      li:nth-child(3) {\n        margin-left: 0px;\n        margin-right: 12px !important;\n      }\n    }\n\n    .age,\n    .gender {\n      margin-right: 0px;\n    }\n\n    .age-mobile-version {\n      li:not(:first-child):not(:nth-child(2)) {\n        margin-top: 24px;\n      }\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!./DemographicsAnnotation.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!./DemographicsAnnotation.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DemographicsAnnotation.vue?vue&type=template&id=6cdbfb48&\"\nimport script from \"./DemographicsAnnotation.vue?vue&type=script&lang=js&\"\nexport * from \"./DemographicsAnnotation.vue?vue&type=script&lang=js&\"\nimport style0 from \"./DemographicsAnnotation.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"],"sourceRoot":""}