{"version":3,"sources":["webpack:///./src/module_responsive/gspid/components/progress-bar-match.vue?0230","webpack:///src/module_responsive/gspid/components/progress-bar-match.vue","webpack:///./src/module_responsive/gspid/components/progress-bar-match.vue?35d2","webpack:///./src/module_responsive/gspid/components/progress-bar-match.vue","webpack:///./src/module_responsive/gspid/components/progress-bar-match.vue?47d3"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","PERCENTAGE","_m","_v","_s","staticRenderFns","component"],"mappings":"8IAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,UAAU,CAACE,YAAY,gCAAgC,CAACF,EAAG,MAAM,CAACE,YAAY,WAAWC,MAAM,CAAC,kBAAkBP,EAAIQ,aAAa,CAACR,EAAIS,GAAG,GAAGT,EAAIS,GAAG,GAAGL,EAAG,MAAM,CAACE,YAAY,kBAAkB,CAACF,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAACN,EAAIU,GAAGV,EAAIW,GAAGX,EAAIQ,aAAaJ,EAAG,OAAO,CAACJ,EAAIU,GAAG,OAAON,EAAG,MAAMA,EAAG,OAAO,CAACJ,EAAIU,GAAG,oBAC7ZE,EAAkB,CAAC,WAAa,IAAIZ,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,OAAO,CAACE,YAAY,iBAAiB,CAACF,EAAG,OAAO,CAACE,YAAY,oBAAoB,WAAa,IAAIN,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,OAAO,CAACE,YAAY,kBAAkB,CAACF,EAAG,OAAO,CAACE,YAAY,qBCgBlV,GACE,KAAF,mBACE,MAAF,CACI,WAAJ,CACM,KAAN,gBACM,UAAN,IAGE,SAAF,CACI,aACE,OAAN,+BC3BuN,I,wBCQnNO,EAAY,eACd,EACAd,EACAa,GACA,EACA,KACA,WACA,MAIa,aAAAC,E,2CCnBf","file":"js/chunk-152f8b18.438f8919.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',{staticClass:\"progress-bar-match-container\"},[_c('div',{staticClass:\"progress\",attrs:{\"data-percentage\":_vm.PERCENTAGE}},[_vm._m(0),_vm._m(1),_c('div',{staticClass:\"progress-value\"},[_c('div',{staticClass:\"roboto-font-fam\"},[_vm._v(_vm._s(_vm.PERCENTAGE)),_c('span',[_vm._v(\"%\")]),_c('br'),_c('span',[_vm._v(\"match\")])])])])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:\"progress-left\"},[_c('span',{staticClass:\"progress-bar\"})])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',{staticClass:\"progress-right\"},[_c('span',{staticClass:\"progress-bar\"})])}]\n\nexport { render, staticRenderFns }","<template lang=\"pug\">\n  section.progress-bar-match-container\n    .progress(:data-percentage=\"PERCENTAGE\")\n      span.progress-left\n        span.progress-bar\n      span.progress-right\n        span.progress-bar\n      .progress-value\n        div.roboto-font-fam\n          | {{ PERCENTAGE }}\n          span %\n          br\n          span match\n\n</template>\n\n<script>\n  export default {\n    name: 'ProgressBarMatch',\n    props: {\n      percentage: {\n        type: [Number, String],\n        required: true\n      }\n    },\n    computed: {\n      PERCENTAGE() {\n        return Math.round(this.percentage);\n      }\n    }\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  @import '~@/assets/scss/helper/_mixins.scss';\n\n  $borderWidth: 10px;\n  $animationTime: .5s;\n  $border-color-default: #efefef;\n  $border-color-fill: var(--styleGuide4);\n  $size: 100px;\n  $howManySteps: 100; //this needs to be even.\n\n  .progress {\n    @include gsp-breakpoint(tall) {\n      $size: 80px;\n      width: $size;\n      height: $size;\n      line-height: $size;\n    }\n\n    width: $size;\n    height: $size;\n    line-height: $size;\n    background: none;\n    margin: 0 auto;\n    box-shadow: none;\n    position: relative;\n    &:after {\n      content: \"\";\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border: $borderWidth solid $border-color-default;\n      position: absolute;\n      top: 0;\n      left: 0;\n    }\n    > span {\n      width: 50%;\n      height: 100%;\n      overflow: hidden;\n      position: absolute;\n      top: 0;\n      z-index: 1;\n    }\n    .progress-left {\n      left: 0;\n    }\n    .progress-bar {\n      width: 100%;\n      height: 100%;\n      background: none;\n      border-width: $borderWidth;\n      border-style: solid;\n      position: absolute;\n      top: 0;\n      border-color: $border-color-fill;\n    }\n    .progress-left .progress-bar {\n      left: 100%;\n      border-top-right-radius: ($size/2);;\n      border-bottom-right-radius: ($size/2);;\n      border-left: 0;\n      -webkit-transform-origin: center left;\n      transform-origin: center left;\n      //animation: loading-2 1.5s linear forwards 1.8s;\n    }\n    .progress-right {\n      right: 0;\n      .progress-bar {\n        left: -100%;\n        border-top-left-radius: ($size/2);;\n        border-bottom-left-radius: ($size/2);;\n        border-right: 0;\n        -webkit-transform-origin: center right;\n        transform-origin: center right;\n        //animation: loading-1 1.8s linear forwards;\n      }\n    }\n    .progress-value {\n      display: flex;\n      border-radius: 50%;\n      font-size: 1rem;\n      text-align: center;\n      line-height: 20px;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      width: 100%;\n      font-weight: 700;\n      div {\n        margin-top: 12px;\n        font-size: 38px;\n        color: var(--styleGuide4);;\n        line-height: 6px;\n\n        @include gsp-breakpoint(tall) {\n          font-size: 1.5rem;\n          line-height: .5rem;\n          margin-top: 6px;\n        }\n\n        // % sign\n        span:first-child {\n          font-size: 0.875rem;\n        }\n      }\n      span {\n        font-size: 0.688rem;\n        color: #969696;\n      }\n    }\n  }\n\n  /* This for loop creates the necessary css animation names \n  Due to the split circle of progress-left and progress right, we must use the animations on each side. \n  */\n  @for $i from 1 through $howManySteps {\n    $stepName: ($i*(100 / $howManySteps));\n\n    //animation only the left side if below 50%\n    @if $i <= ($howManySteps/2) { \n      .progress[data-percentage=\"#{$stepName}\"] {\n        .progress-right .progress-bar {\n          animation: loading-#{$i} $animationTime linear forwards;\n        }\n        .progress-left .progress-bar {animation: 0;}\n      }\n    }\n    //animation only the right side if above 50%\n    @if $i > ($howManySteps/2)  {  \n      .progress[data-percentage=\"#{$stepName}\"] {\n        .progress-right .progress-bar {\n          animation: loading-#{($howManySteps/2)} $animationTime linear forwards; //set the animation to longest animation\n        }\n        .progress-left .progress-bar {\n        animation: loading-#{$i - ($howManySteps/2)} $animationTime linear forwards $animationTime;\n      }\n      }\n    }\n  }\n\n  //animation\n  @for $i from 1 through ($howManySteps/2) {\n    $degrees: (180/($howManySteps/2));\n    $degrees: ($degrees*$i);\n    @keyframes loading-#{$i}{\n      0%{\n          -webkit-transform: rotate(0deg);\n          transform: rotate(0deg);\n      }\n      100%{\n          -webkit-transform: rotate($degrees);\n        transform: rotate(#{$degrees}deg);\n      }\n    }\n  }\n</style>","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./progress-bar-match.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./progress-bar-match.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./progress-bar-match.vue?vue&type=template&id=20facca4&scoped=true&lang=pug&\"\nimport script from \"./progress-bar-match.vue?vue&type=script&lang=js&\"\nexport * from \"./progress-bar-match.vue?vue&type=script&lang=js&\"\nimport style0 from \"./progress-bar-match.vue?vue&type=style&index=0&id=20facca4&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  \"20facca4\",\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!./progress-bar-match.vue?vue&type=style&index=0&id=20facca4&lang=scss&scoped=true&\""],"sourceRoot":""}