{"version":3,"sources":["webpack:///./src/components/LiveBet/Details/MarketsGroupMenu.vue?a8c2","webpack:///./src/components/LiveBet/Details/MarketsGroupMenu.vue","webpack:///src/components/LiveBet/Details/MarketsGroupMenu.vue","webpack:///./src/components/LiveBet/Details/MarketsGroupMenu.vue?be48","webpack:///./src/components/LiveBet/Details/MarketsGroupMenu.vue?e232"],"names":["render","_vm","this","_c","_self","_","isEmpty","marketsGroups","_e","staticClass","class","isMobile","favoriteMarkets","is_active","Number","groupActive","on","$event","setGroup","_v","_s","$t","length","_l","group","key","id","name","markets","getMarketsLength","event","attrs","findMarket","toggleAllMarkets","allMarketsOpen","staticRenderFns","props","type","required","marketsForSearch","data","computed","sportId","allCount","created","methods","marketsArray","component"],"mappings":"kHAAA,W,2CCAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAASF,EAAII,EAAEC,QAAQL,EAAIM,eAA29CN,EAAIO,KAA/8CL,EAAG,MAAM,CAACM,YAAY,qBAAqBC,MAAM,CAAC,cAAcT,EAAIU,WAAW,CAACR,EAAG,MAAM,CAACM,YAAY,iCAAiC,CAAGR,EAAII,EAAEC,QAAQL,EAAIW,iBAA2UX,EAAIO,KAA7T,CAACL,EAAG,MAAM,CAACM,YAAY,QAAQ,CAACN,EAAG,IAAI,CAACO,MAAM,CAACG,UAAuC,IAA5BC,OAAOb,EAAIc,cAAoBC,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOhB,EAAIiB,SAAS,MAAM,CAACf,EAAG,MAAM,CAACM,YAAY,SAAS,CAACR,EAAIkB,GAAGlB,EAAImB,GAAGnB,EAAIoB,GAAG,iBAAiBlB,EAAG,MAAM,CAACM,YAAY,iBAAiB,CAACR,EAAIkB,GAAG,IAAIlB,EAAImB,GAAGnB,EAAIW,gBAAgBU,QAAQ,YAAqBrB,EAAIsB,GAAItB,EAAIM,eAAe,SAASiB,GAAO,MAAO,CAACrB,EAAG,MAAM,CAACsB,IAAID,EAAME,GAAGjB,YAAY,QAAQ,CAACN,EAAG,IAAI,CAACO,MAAM,CAACG,UAAWC,OAAOb,EAAIc,eAAiBD,OAAOU,EAAME,KAAKV,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOhB,EAAIiB,SAASM,EAAME,OAAO,CAACvB,EAAG,MAAM,CAACM,YAAY,SAAS,CAACR,EAAIkB,GAAGlB,EAAImB,GAAGI,EAAMG,SAASxB,EAAG,MAAM,CAACM,YAAY,iBAAiB,CAA2B,IAAzBe,EAAMI,QAAQN,QAA6C,IAA7BR,OAAOU,EAAMI,QAAQ,IAAW,CAAC3B,EAAIkB,GAAG,IAAIlB,EAAImB,GAAGnB,EAAI4B,iBAAiB5B,EAAI6B,MAAMF,SAAS,IAAO,MAAM,CAAC3B,EAAIkB,GAAG,IAAIlB,EAAImB,GAAGnB,EAAI4B,iBAAiBL,EAAMI,SAAS,IAAQ,OAAO,YAAW,GAAGzB,EAAG,MAAM,CAACM,YAAY,iBAAiB,CAACN,EAAG,MAAM,CAACM,YAAY,cAAc,CAACN,EAAG,gBAAgB,CAAC4B,MAAM,CAAC,KAAO,OAAO,CAAC5B,EAAG,qBAAqB,CAACA,EAAG,IAAI,CAACM,YAAY,iBAAiBN,EAAG,eAAe,CAAC4B,MAAM,CAAC,YAAc9B,EAAIoB,GAAG,WAAWL,GAAG,CAAC,MAAQf,EAAI+B,eAAe,IAAI,GAAG7B,EAAG,WAAW,CAAC4B,MAAM,CAAC,QAAU,eAAef,GAAG,CAAC,MAAQf,EAAIgC,mBAAmB,CAAC9B,EAAG,IAAI,CAACO,MAAM,CAACT,EAAIiC,eAAiB,eAAiB,mBAAmB,MAEziDC,EAAkB,GC6DP,GACfR,wBACAS,OACAN,OACAO,YACAC,aAEAC,kBACAF,WACAC,aAEAvB,aACAuB,cAGAE,OACA,OACAN,oBAGAO,UACAC,UACA,4CAEA9B,kBACA,4DAEAL,gBACA,wCAEAoC,WACA,iDAEAhC,WACA,oCAGAiC,YAEAC,SACA3B,YACA,0BAEAe,mBACA,yCACA,oDAEAD,cACA,wFACA,4BAEAH,sBACA,aACA,SAEA,EADA,0BACA,kDACAiB,eAEAA,EAGA,qBACA,oDACA,+CACA,aACA,iCACA,yCAEA,4CAEA,mBCrIuX,I,wBCQnXC,EAAY,eACd,EACA/C,EACAmC,GACA,EACA,KACA,WACA,MAIa,aAAAY,E","file":"js/chunk-3a409043.1dc92ded.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MarketsGroupMenu.vue?vue&type=style&index=0&id=d986cd80&prod&scoped=true&lang=scss\"","var render = function render(){var _vm=this,_c=_vm._self._c;return (!_vm._.isEmpty(_vm.marketsGroups))?_c('div',{staticClass:\"menu grid-listview\",class:{'menu-mobile':_vm.isMobile}},[_c('div',{staticClass:\"menu__markets horizontal-menu\"},[(!_vm._.isEmpty(_vm.favoriteMarkets))?[_c('div',{staticClass:\"item\"},[_c('a',{class:{is_active: Number(_vm.groupActive) === 0},on:{\"click\":function($event){return _vm.setGroup(0)}}},[_c('div',{staticClass:\"label\"},[_vm._v(_vm._s(_vm.$t('favorites')))]),_c('div',{staticClass:\"markets_count\"},[_vm._v(\" \"+_vm._s(_vm.favoriteMarkets.length)+\" \")])])])]:_vm._e(),_vm._l((_vm.marketsGroups),function(group){return [_c('div',{key:group.id,staticClass:\"item\"},[_c('a',{class:{is_active: Number(_vm.groupActive) === Number(group.id)},on:{\"click\":function($event){return _vm.setGroup(group.id)}}},[_c('div',{staticClass:\"label\"},[_vm._v(_vm._s(group.name))]),_c('div',{staticClass:\"markets_count\"},[(group.markets.length === 1 && Number(group.markets[0]) === 0)?[_vm._v(\" \"+_vm._s(_vm.getMarketsLength(_vm.event.markets, true))+\" \")]:[_vm._v(\" \"+_vm._s(_vm.getMarketsLength(group.markets, false))+\" \")]],2)])])]})],2),_c('div',{staticClass:\"menu__actions\"},[_c('div',{staticClass:\"search-box\"},[_c('b-input-group',{attrs:{\"size\":\"sm\"}},[_c('b-input-group-text',[_c('i',{staticClass:\"pki-search\"})]),_c('b-form-input',{attrs:{\"placeholder\":_vm.$t('search')},on:{\"input\":_vm.findMarket}})],1)],1),_c('b-button',{attrs:{\"variant\":\"transparent\"},on:{\"click\":_vm.toggleAllMarkets}},[_c('i',{class:[_vm.allMarketsOpen ? 'pki-collapse' : 'pki-expand']})])],1)]):_vm._e()\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div\r\n    v-if=\"!_.isEmpty(marketsGroups)\"\r\n    class=\"menu grid-listview\"\r\n    :class=\"{'menu-mobile':isMobile}\"\r\n  >\r\n    <div class=\"menu__markets horizontal-menu\">\r\n      <template v-if=\"!_.isEmpty(favoriteMarkets)\">\r\n        <div class=\"item\">\r\n          <a\r\n            :class=\"{is_active: Number(groupActive) === 0}\"\r\n            @click=\"setGroup(0)\"\r\n          >\r\n            <div class=\"label\">{{ $t('favorites') }}</div>\r\n            <div class=\"markets_count\">\r\n              {{ favoriteMarkets.length }}\r\n            </div>\r\n          </a>\r\n        </div>\r\n      </template>\r\n      <template v-for=\"(group) in marketsGroups\">\r\n        <div\r\n          :key=\"group.id\"\r\n          class=\"item\"\r\n        >\r\n          <a\r\n            :class=\"{is_active: Number(groupActive) === Number(group.id)}\"\r\n            @click=\"setGroup(group.id)\"\r\n          >\r\n            <div class=\"label\">{{ group.name }}</div>\r\n            <div class=\"markets_count\">\r\n              <template v-if=\"group.markets.length === 1 && Number(group.markets[0]) === 0\">\r\n                {{ getMarketsLength(event.markets, true) }}\r\n              </template>\r\n              <template v-else>\r\n                {{ getMarketsLength(group.markets, false) }}\r\n              </template>\r\n            </div>\r\n          </a>\r\n        </div>\r\n      </template>\r\n    </div>\r\n    <div class=\"menu__actions\">\r\n      <div class=\"search-box\">\r\n        <b-input-group size=\"sm\">\r\n          <b-input-group-text><i class=\"pki-search\" /></b-input-group-text>\r\n          <b-form-input\r\n            :placeholder=\"$t('search')\"\r\n            @input=\"findMarket\"\r\n          />\r\n        </b-input-group>\r\n      </div>\r\n      <b-button\r\n        variant=\"transparent\"\r\n        @click=\"toggleAllMarkets\"\r\n      >\r\n        <i :class=\"[allMarketsOpen ? 'pki-collapse' : 'pki-expand']\" />\r\n      </b-button>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n  name: 'MarketsGroupMenu',\r\n  props: {\r\n    event: {\r\n      type: Object,\r\n      required: true,\r\n    },\r\n    marketsForSearch: {\r\n      type: Array,\r\n      required: true,\r\n    },\r\n    groupActive: {\r\n      required: true,\r\n    },\r\n  },\r\n  data() {\r\n    return {\r\n      allMarketsOpen: true,\r\n    };\r\n  },\r\n  computed: {\r\n    sportId() {\r\n      return Number(this.event.details.sport_id);\r\n    },\r\n    favoriteMarkets() {\r\n      return this.$store.state.liveFavoriteMarkets[this.sportId];\r\n    },\r\n    marketsGroups() {\r\n      return this.$store.state.marketsGroups;\r\n    },\r\n    allCount() {\r\n      return Object.values(this.event.markets).length;\r\n    },\r\n    isMobile() {\r\n      return this.$store.state.isMobile;\r\n    },\r\n  },\r\n  created() {\r\n  },\r\n  methods: {\r\n    setGroup(groupId) {\r\n      this.$emit('setGroup', groupId);\r\n    },\r\n    toggleAllMarkets() {\r\n      this.allMarketsOpen = !this.allMarketsOpen;\r\n      this.$emit('toggleAllMarkets', this.allMarketsOpen);\r\n    },\r\n    findMarket(term) {\r\n      const marketsFiltered = this.marketsForSearch.filter((market) => market.name.toLowerCase().includes(term.toLowerCase()));\r\n      this.$emit('setMarkets', marketsFiltered);\r\n    },\r\n    getMarketsLength(markets, all) {\r\n      const self = this;\r\n      let marketsArray = [];\r\n      if (typeof all !== 'undefined' && all) {\r\n        if (typeof markets === 'object') marketsArray = Object.values(markets).map((m) => m.id);\r\n        else marketsArray = markets.map((m) => m.id);\r\n      } else {\r\n        marketsArray = markets;\r\n      }\r\n\r\n      const validMarkets = marketsArray.filter((mId) => {\r\n        if (typeof self.event.markets[mId] === 'undefined') return false;\r\n        const bets = Object.values(self.event.markets[mId].bets);\r\n        const isValid = bets.some((bet) => {\r\n          const options = Object.values(bet.options);\r\n          return options.some((option) => Number(option.status) === 1);\r\n        });\r\n        return self.$store.state.translates.Os[mId] && isValid;\r\n      });\r\n      return validMarkets.length;\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n\r\n.horizontal-menu {\r\n  padding: 4px 0px;\r\n\r\n  &::-webkit-scrollbar {\r\n    width: 2px;\r\n    border-radius: 6px;\r\n    height: 4px;\r\n  }\r\n\r\n  &::-webkit-scrollbar-track {\r\n    background-color: var(--bg-color-primar);\r\n  }\r\n\r\n  &::-webkit-scrollbar-thumb {\r\n    background-color: var(--color-dominance);\r\n    outline: 1px solid var(----secondary);\r\n    border-radius: 12px;\r\n  }\r\n\r\n  @media (pointer: coarse) {\r\n    &::-webkit-scrollbar {\r\n      display: none;\r\n    }\r\n  }\r\n\r\n    @media (min-width: 1560px) and (max-width: 1650px) {\r\n      max-width: 680px;\r\n      width: 680px;\r\n    }\r\n    @media (min-width: 1500px) and (max-width: 1549px) {\r\n    max-width: 650px;\r\n    width: 650px;\r\n    }\r\n    @media (min-width: 1440px) and (max-width: 1499px) {\r\n      max-width: 550px;\r\n      width: 550px;\r\n    }\r\n    @media (min-width: 1025px) and (max-width: 1439px) {\r\n      max-width: 400px;\r\n      width: 400px;\r\n    }\r\n}\r\n\r\n.menu {\r\n  background: var(--listmenu-bg-color);\r\n  padding: 12px;\r\n  border-radius: 4px;\r\n  margin-top: 16px;\r\n  justify-content: flex-start;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 16px;\r\n\r\n  .item {\r\n    padding: 0;\r\n    margin: 0;\r\n    width: auto;\r\n\r\n    a {\r\n      font-size: 13px;\r\n      font-weight: 500;\r\n      color: var(--btn-nav-color);\r\n      position: relative;\r\n      display: block;\r\n      cursor: pointer;\r\n      transition: var(--transition);\r\n      padding: 0 24px;\r\n\r\n      .label {\r\n        white-space: nowrap;\r\n        text-overflow: ellipsis;\r\n        overflow: hidden;\r\n      }\r\n\r\n      .markets_count {\r\n        position: absolute;\r\n        top: -8px;\r\n        right: 0px;\r\n        width: 20px;\r\n        height: 20px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        background: var(--color-dark-dominance);\r\n        font-size: 10px;\r\n        border-radius: 50%;\r\n        line-height: 1;\r\n        font-weight: 400;\r\n      }\r\n\r\n      &.is_active {\r\n        color: var(--color-dominance);\r\n\r\n        .markets_count {\r\n          color: var(--color-dominance);\r\n        }\r\n\r\n        &:after {\r\n          content: '';\r\n          height: 3px;\r\n          width: calc(100% - 5px);\r\n          background: var(--color-dominance);\r\n          position: absolute;\r\n          bottom: -12px;\r\n          left: 50%;\r\n          transform: translate(-50%, 0%);\r\n          pointer-events: none;\r\n\r\n        }\r\n      }\r\n\r\n      &:hover {\r\n        color: var(--color-dominance);\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    & + .item {\r\n      //margin-left: 50px;\r\n    }\r\n  }\r\n\r\n  .btn-transparent {\r\n    padding: 0;\r\n    color: var(--color-primary);\r\n    font-size: 1em;\r\n  }\r\n\r\n  &__markets {\r\n    display: flex;\r\n    align-items: center;\r\n  }\r\n\r\n  &__actions {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n\r\n    .search-box {\r\n      min-width: 100px;\r\n      padding: 0 !important;\r\n\r\n      &:deep(.form-control) {\r\n        padding-left: 0;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.menu-mobile{\r\n    flex-wrap: wrap;\r\n    .menu__markets{\r\n      width: 100%;\r\n    }\r\n    .menu__actions{\r\n      width: 100%;\r\n      justify-content: space-between;\r\n      .search-box{\r\n        width: calc(100% - 50px);\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MarketsGroupMenu.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MarketsGroupMenu.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./MarketsGroupMenu.vue?vue&type=template&id=d986cd80&scoped=true\"\nimport script from \"./MarketsGroupMenu.vue?vue&type=script&lang=js\"\nexport * from \"./MarketsGroupMenu.vue?vue&type=script&lang=js\"\nimport style0 from \"./MarketsGroupMenu.vue?vue&type=style&index=0&id=d986cd80&prod&scoped=true&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  \"d986cd80\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}