{"version":3,"sources":["webpack:///./src/components/lists/Tabs.vue?b4e6","webpack:///./src/components/lists/Tabs.vue?e571","webpack:///./src/components/lists/Tabs.vue?dabc","webpack:///src/components/lists/Tabs.vue","webpack:///./src/components/lists/Tabs.vue?bc1e","webpack:///./src/components/lists/Tabs.vue","webpack:///./src/components/lists/Tabs.vue?af6d"],"names":["exports","module","push","i","content","__esModule","default","locals","add","render","_vm","this","_h","$createElement","_c","_self","staticClass","_l","item","index","key","class","activeIndex","on","$event","slideToTab","_v","_s","tab_heading","ref","style","height","tabHeight","width","containerWidth","transform","domProps","attrs","separator","_e","staticRenderFns","name","data","props","components","SectionSeparator","computed","tabs","items","map","JSON","parse","value","totalTabs","length","itemWidth","methods","setHeight","mounted","setTimeout","injectStyles","context","style0","__inject__","component"],"mappings":"yFAAAA,EAAUC,EAAOD,QAAU,EAAQ,OAAR,EAA4D,GAKvFA,EAAQE,KAAK,CAACD,EAAOE,EAAI,g+DAAm+D,M,qBCF5/D,IAAIC,EAAU,EAAQ,QACnBA,EAAQC,aAAYD,EAAUA,EAAQE,SACnB,kBAAZF,IAAsBA,EAAU,CAAC,CAACH,EAAOE,EAAIC,EAAS,MAC7DA,EAAQG,SAAQN,EAAOD,QAAUI,EAAQG,QAE5C,IAAIC,EAAM,EAAQ,QAAkEF,QACvEE,EAAI,WAAYJ,GAAS,EAAM,CAAC,WAAY,EAAM,YAAa,K,yCCT5E,IAAIK,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAACF,EAAG,MAAM,CAACE,YAAY,uCAAuC,CAACF,EAAG,MAAM,CAACE,YAAY,QAAQN,EAAIO,GAAIP,EAAQ,MAAE,SAASQ,EAAKC,GAAO,OAAOL,EAAG,MAAM,CAACM,IAAK,eAAiBD,EAAOH,YAAY,kBAAkBK,MAAM,CAAE,YAAaF,IAAUT,EAAIY,aAAcC,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOd,EAAIe,WAAWN,MAAU,CAACL,EAAG,KAAK,CAACJ,EAAIgB,GAAGhB,EAAIiB,GAAGT,EAAKU,qBAAoB,GAAGd,EAAG,MAAM,CAACe,IAAI,MAAMb,YAAY,gBAAgBc,MAAM,CAAEC,OAAQrB,EAAIsB,YAAa,CAAClB,EAAG,MAAM,CAACE,YAAY,YAAYc,MAAM,CAAGG,MAAOvB,EAAIwB,eAAgBC,UAAWzB,EAAIyB,YAAczB,EAAIO,GAAIP,EAAQ,MAAE,SAASQ,EAAKC,GAAO,OAAOL,EAAG,MAAM,CAACM,IAAK,eAAiBD,EAAOH,YAAY,OAAO,CAACF,EAAG,MAAM,CAACsB,SAAS,CAAC,UAAY1B,EAAIiB,GAAGT,EAAKd,iBAAgB,OAAQM,EAAa,UAAEI,EAAG,mBAAmB,CAACuB,MAAM,CAAC,UAAY3B,EAAI4B,aAAa5B,EAAI6B,MAAM,IAC16BC,EAAkB,G,YCkCtB,GACEC,KAAM,OAENC,KAHF,WAII,MAAO,CACLP,UAAW,KACXb,YAAa,EACbU,UAAW,KAIfW,MAAO,CAAC,QAAS,aAEjBC,WAAY,CACVC,iBAAJ,QAGEC,SAAU,CACRC,KADJ,WAEM,OAAOpC,KAAKqC,MAAMC,KAAI,SAA5B,GACQ,OAAOC,KAAKC,MAAMjC,EAAKkC,WAI3BC,UAPJ,WAQM,OAAO1C,KAAKoC,KAAKO,QAGnBpB,eAXJ,WAYM,OAAO,IAAMvB,KAAK0C,UAAY,KAGhCE,UAfJ,WAgBM,OAAO,IAAM5C,KAAK0C,YAItBG,QAAS,CACP/B,WADJ,SACA,GACMd,KAAKW,YAAcH,EACnBR,KAAKwB,UAAY,eAAvB,8BACMxB,KAAK8C,UAAUtC,IAGjBsC,UAPJ,SAOA,GACM,IAAN,KACA,qDACA,gCAEM9C,KAAKqB,UAAY,GAAvB,mBAIE0B,QArDF,WAqDA,WACIC,YAAW,WACT,IAAN,IACM,EAAN,eACA,OC5F6V,I,YCG7V,SAASC,EAAcC,GAErB,IAAIC,EAAS,EAAQ,QACnBA,EAAOC,YAAYD,EAAOC,WAAWF,GAMzC,IAAIG,EAAY,eACd,EACAvD,EACA+B,GACA,EACAoB,EACA,KACA,YAIa,aAAAI,E,2CCvBf","file":"js/chunks/tabs.js?id=0b91bd78b169e1333d52","sourcesContent":["exports = module.exports = require(\"../../../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".tabs-container .tabs{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-bottom:20px;border-bottom:3px solid;padding-bottom:10px;position:-webkit-sticky;position:sticky;top:0;z-index:1}.theme-clean-dark .tabs-container .tabs{border-color:hsla(0,0%,100%,.07)}.theme-clean-light .tabs-container .tabs{border-color:rgba(0,0,0,.07)}.theme-vantage-dark .tabs-container .tabs{border-color:hsla(0,0%,100%,.07)}.theme-vantage-light .tabs-container .tabs{border-color:rgba(0,0,0,.07)}.theme-slanted-dark .tabs-container .tabs{border-color:hsla(0,0%,100%,.07)}.theme-slanted-light .tabs-container .tabs{border-color:rgba(0,0,0,.07)}.tabs-container .tab-heading{text-align:center;opacity:.25;cursor:pointer;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;text-transform:uppercase}.tabs-container .tab-heading.is-active{position:relative;opacity:1}.tabs-container .tab-heading.is-active:before{content:\\\"\\\";position:absolute;width:75%;height:2px;bottom:-17px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.tabs-container .tab-container{overflow:hidden;-webkit-transition:height .3s ease-in-out;transition:height .3s ease-in-out}.tabs-container .tab-data{width:100%;padding:0}.tabs-container .tab-data ul{padding:0;list-style:none;margin-top:0}.tabs-container .tab-data ul li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:0 0 10px 0}.tabs-container .tab-data ul li.tab-item{display:none}.tabs-container .key{text-transform:capitalize}.tabs-container .value{font-weight:700;margin-left:10px}.tabs-container .tab-inner{-webkit-transition:-webkit-transform .5s ease-in-out;transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out,-webkit-transform .5s ease-in-out;display:-webkit-box;display:-ms-flexbox;display:flex}.tab{width:100%}\", \"\"]);\n\n// exports\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../../../node_modules/css-loader/index.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/postcss-loader/src/index.js??ref--9-oneOf-1-3!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Tabs.vue?vue&type=style&index=0&lang=sass&\");\nif(content.__esModule) content = content.default;\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../../../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"a55f4710\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"page-section\"},[_c('div',{staticClass:\"container content-bg tabs-container\"},[_c('div',{staticClass:\"tabs\"},_vm._l((_vm.tabs),function(item,index){return _c('div',{key:(\"tab-heading-\" + index),staticClass:\"tab tab-heading\",class:{ 'is-active': index === _vm.activeIndex },on:{\"click\":function($event){return _vm.slideToTab(index)}}},[_c('h3',[_vm._v(_vm._s(item.tab_heading))])])}),0),_c('div',{ref:\"tab\",staticClass:\"tab-container\",style:({height: _vm.tabHeight})},[_c('div',{staticClass:\"tab-inner\",style:({ width: _vm.containerWidth, transform: _vm.transform })},_vm._l((_vm.tabs),function(item,index){return _c('div',{key:(\"tab-content-\" + index),staticClass:\"tab\"},[_c('div',{domProps:{\"innerHTML\":_vm._s(item.content)}})])}),0)])]),(_vm.separator)?_c('SectionSeparator',{attrs:{\"separator\":_vm.separator}}):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template lang=\"html\">\n  <div class=\"page-section\">\n    <div class=\"container content-bg tabs-container\">\n      <div class=\"tabs\">\n        <div\n          v-for=\"(item, index) in tabs\"\n          class=\"tab tab-heading\"\n          :class=\"{ 'is-active': index === activeIndex }\"\n          :key=\"`tab-heading-${index}`\"\n          @click=\"slideToTab(index)\">\n          <h3>{{item.tab_heading}}</h3>\n        </div>\n      </div>\n\n      <div class=\"tab-container\" ref=\"tab\" :style=\"{height: tabHeight}\">\n        <div\n          class=\"tab-inner\"\n          :style=\"{ width: containerWidth, transform: transform }\">\n\n          <div class=\"tab\"\n            v-for=\"(item, index) in tabs\"\n            :key=\"`tab-content-${index}`\">\n            <div v-html=\"item.content\"></div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <SectionSeparator v-if=\"separator\" :separator=\"separator\"/>\n  </div>\n</template>\n\n<script>\nimport SectionSeparator from '@/components/lists/SectionSeparator'\n\nexport default {\n  name: 'Tabs',\n\n  data() {\n    return {\n      transform: '0%',\n      activeIndex: 0,\n      tabHeight: ''\n    }\n  },\n\n  props: ['items', 'separator'],\n\n  components: {\n    SectionSeparator\n  },\n\n  computed: {\n    tabs() {\n      return this.items.map((item) => {\n        return JSON.parse(item.value)\n      })\n    },\n\n    totalTabs() {\n      return this.tabs.length\n    },\n\n    containerWidth() {\n      return 100 * this.totalTabs + '%'\n    },\n\n    itemWidth() {\n      return 100 / this.totalTabs\n    }\n  },\n\n  methods: {\n    slideToTab(index) {\n      this.activeIndex = index\n      this.transform = `translateX(-${this.itemWidth * index}%)`\n      this.setHeight(index)\n    },\n\n    setHeight(index) {\n      const padding = 20\n      let tabs = this.$refs.tab.querySelectorAll('.tab-inner .tab')\n      let activeTabHeight = tabs[index].children[0].offsetHeight\n\n      this.tabHeight = `${activeTabHeight + padding}px`\n    }\n  },\n\n  mounted() {\n    setTimeout(() => {\n      const firstTab = 0\n      this.setHeight(firstTab)\n    }, 500)\n  }\n}\n</script>\n\n<style lang=\"sass\">\n  @import '../../stylesheets/base/variables'\n  @import '../../stylesheets/base/theme'\n  @import '../../stylesheets/helpers/mixins'\n\n  .tabs-container\n    .tabs\n      position: relative\n      display: flex\n      justify-content: flex-start\n      margin-bottom: $gap-medium\n      border-bottom: 3px solid\n      padding-bottom: $gap-small\n      position: sticky\n      top: 0\n      z-index: 1\n\n      @include themify($themes)\n        border-color: themed('hr-color')\n\n    .tab-heading\n      text-align: center\n      opacity: 0.25\n      cursor: pointer\n      transition: opacity .3s ease-in-out\n      text-transform: uppercase\n\n      &.is-active\n        position: relative\n        opacity: 1\n\n        @include themify($themes)\n          color: themed('color-secondary')\n\n        &:before\n          content: ''\n          position: absolute\n          width: 75%\n          height: 2px\n          bottom: -17px\n          left: 50%\n          transform: translateX(-50%)\n\n          @include themify($themes)\n            background: themed('color-secondary')\n\n    .tab-container\n      overflow: hidden\n      transition: height .3s ease-in-out\n\n    .tab-data\n      width: 100%\n      padding: 0\n\n      ul\n        padding: 0\n        list-style: none\n        margin-top: 0\n\n        li\n          display: flex\n          justify-content: flex-start\n          margin: 0 0 $gap-small 0\n\n          &.tab-item\n            display: none\n\n    .key\n      text-transform: capitalize\n\n    .value\n      font-weight: bold\n      margin-left: $gap-small\n\n    .tab-inner\n      transition: transform .5s ease-in-out\n      display: flex\n\n  .tab\n    width: 100%\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!./Tabs.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!./Tabs.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Tabs.vue?vue&type=template&id=2aa7ea86&lang=html&\"\nimport script from \"./Tabs.vue?vue&type=script&lang=js&\"\nexport * from \"./Tabs.vue?vue&type=script&lang=js&\"\nfunction injectStyles (context) {\n  \n  var style0 = require(\"./Tabs.vue?vue&type=style&index=0&lang=sass&\")\nif (style0.__inject__) style0.__inject__(context)\n\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  injectStyles,\n  null,\n  \"559c01b5\"\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/vue-style-loader/index.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/index.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/postcss-loader/src/index.js??ref--9-oneOf-1-3!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-4!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Tabs.vue?vue&type=style&index=0&lang=sass&\""],"sourceRoot":""}