{"version":3,"sources":["webpack:///./src/components/PageBuilder/CounterBlock.vue","webpack:///src/components/PageBuilder/CounterBlock.vue","webpack:///./src/components/PageBuilder/CounterBlock.vue?2c83","webpack:///./src/components/PageBuilder/CounterBlock.vue?7ddc","webpack:///./src/components/PageBuilder/CounterBlock.vue?076e","webpack:///./src/assets/polygon.svg"],"names":["render","_vm","this","_c","_self","staticClass","class","cmsBlock","counterStyle","attrs","anchorTag","ref","style","gridCells","_l","counters","counter","key","id","polygonImage","_e","_v","_s","currentNumber","unit","description","staticRenderFns","name","props","data","countersFinished","require","mounted","self","observer","IntersectionObserver","entries","isIntersecting","triggerCounters","threshold","observe","$refs","forEach","push","number","localizeAlt","computed","gridColStyle","gridTemplateColumns","methods","i","duration","count","startTimestamp","step","timestamp","progress","Math","min","floor","window","requestAnimationFrame","component","module","exports"],"mappings":"yHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,UAAU,CAACE,YAAY,sBAAsBC,MAAML,EAAIM,SAASC,aAAaC,MAAM,CAAC,GAAKR,EAAIM,SAASG,YAAY,CAACP,EAAG,MAAM,CAACQ,IAAI,WAAWN,YAAY,WAAWO,MAAOX,EAAIY,WAAYZ,EAAIa,GAAIb,EAAIc,UAAU,SAASC,GAAS,OAAOb,EAAG,MAAM,CAACc,IAAID,EAAQE,GAAGb,YAAY,UAAUC,MAAMU,EAAQJ,OAAO,CAAmB,WAAjBI,EAAQJ,MAAoBT,EAAG,MAAM,CAACE,YAAY,gBAAgBI,MAAM,CAAC,IAAMR,EAAIkB,gBAAgBlB,EAAImB,KAAKjB,EAAG,MAAM,CAACE,YAAY,UAAU,CAACJ,EAAIoB,GAAGpB,EAAIqB,GAAGN,EAAQO,gBAAgBpB,EAAG,OAAO,CAACE,YAAY,QAAQ,CAACJ,EAAIoB,GAAG,IAAIpB,EAAIqB,GAAGN,EAAQQ,WAAWrB,EAAG,MAAM,CAACE,YAAY,eAAe,CAACJ,EAAIoB,GAAGpB,EAAIqB,GAAGN,EAAQS,qBAAoB,MAEzrBC,EAAkB,GCWP,G,UAAA,CACfC,KAAA,eAEAC,MAAA,CACA,YAGAC,OACA,OACAd,SAAA,GACAe,kBAAA,EACAX,aAAAY,EAAA,UAIAC,UACA,IAAAC,EAAA,KACAC,EAAA,IAAAC,sBACA,SAAAC,IACA,IAAAA,EAAA,GAAAC,gBACAJ,EAAAK,oBAEA,CACAC,UAAA,MAGAL,EAAAM,QAAA,KAAAC,MAAA1B,UAEA,KAAAR,SAAAQ,SAAA2B,SAAA,SAAA1B,GACAiB,EAAAlB,SAAA4B,KAAA,CACAzB,GAAAF,EAAAE,GACAN,MAAAI,EAAAJ,MACAgC,OAAA5B,EAAA4B,OACApB,KAAAR,EAAAQ,KACAC,YAAAQ,EAAAY,YAAA7B,EAAA,eACAO,cAAA,QAKAuB,SAAA,CACAjC,YACA,IAAAkC,EAAA,GAIA,OAHA,KAAAhC,SAAA2B,SAAA,SAAA1B,GACA+B,GAAA,UAEA,CACAC,oBAAAD,KAKAE,QAAA,CACAX,kBACA,SAAAR,iBAAA,CACA,IAAAG,EAAA,KACA,KAAAlB,SAAA2B,SAAA,SAAA1B,EAAAkC,GACA,IAAAC,EAAA,SAAAD,EAAA,GACAjB,EAAAmB,MAAApC,EAAAmC,GACAlB,EAAAH,kBAAA,OAKAsB,MAAApC,EAAAmC,GACA,IAAAE,EAAA,KACA,MAAAC,EAAA,SAAAC,GACAF,IACAA,EAAAE,GAEA,MAAAC,EAAAC,KAAAC,KAAAH,EAAAF,GAAAF,EAAA,GACAnC,EAAAO,cAAAkC,KAAAE,MAAAH,EAAAxC,EAAA4B,QACAY,EAAA,GACAI,OAAAC,sBAAAP,IAGAM,OAAAC,sBAAAP,OCzFoW,I,wBCQhWQ,EAAY,eACd,EACA9D,EACA0B,GACA,EACA,KACA,WACA,MAIa,aAAAoC,E,6CCnBf,W,8CCAAC,EAAOC,QAAU,IAA0B","file":"js/chunk-4aeb016c.d81dbb0b.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('section',{staticClass:\"component-container\",class:_vm.cmsBlock.counterStyle,attrs:{\"id\":_vm.cmsBlock.anchorTag}},[_c('div',{ref:\"counters\",staticClass:\"counters\",style:(_vm.gridCells)},_vm._l((_vm.counters),function(counter){return _c('div',{key:counter.id,staticClass:\"counter\",class:counter.style},[(counter.style == 'polygon')?_c('img',{staticClass:\"polygon-image\",attrs:{\"src\":_vm.polygonImage}}):_vm._e(),_c('div',{staticClass:\"number\"},[_vm._v(_vm._s(counter.currentNumber)),_c('span',{staticClass:\"unit\"},[_vm._v(\" \"+_vm._s(counter.unit))])]),_c('div',{staticClass:\"description\"},[_vm._v(_vm._s(counter.description))])])}),0)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <section :id=\"cmsBlock.anchorTag\" class=\"component-container\" :class=\"cmsBlock.counterStyle\">\n        <div class=\"counters\" ref=\"counters\" :style=\"gridCells\">\n            <div class=\"counter\" v-for=\"counter in counters\" :key=\"counter.id\" :class=\"counter.style\">\n                <img class=\"polygon-image\" v-if=\"counter.style == 'polygon'\" :src=\"polygonImage\" />\n                <div class=\"number\">{{ counter.currentNumber }}<span class=\"unit\"> {{ counter.unit }}</span></div>\n                <div class=\"description\">{{ counter.description }}</div>\n            </div>\n        </div>\n    </section>\n</template>\n\n<script>\nexport default {\n    name: 'CounterBlock',\n\n    props: [\n        'cmsBlock'\n    ],\n\n    data() {\n        return {\n            counters: [],\n            countersFinished: false,\n            polygonImage: require('@/assets/polygon.svg')\n        }\n    },\n\n    mounted() {\n        var self = this\n        var observer = new IntersectionObserver(\n            function (entries) {\n                if (entries[0].isIntersecting === true) {\n                    self.triggerCounters()\n                }\n            }, {\n            threshold: [0]\n        }\n        )\n        observer.observe(this.$refs.counters)\n\n        this.cmsBlock.counters.forEach(function (counter) {\n            self.counters.push({\n                id: counter.id,\n                style: counter.style,\n                number: counter.number,\n                unit: counter.unit,\n                description: self.localizeAlt(counter, 'description'),\n                currentNumber: 0\n            })\n        })\n    },\n\n    computed: {\n        gridCells() {\n            var gridColStyle = ''\n            this.counters.forEach(function (counter) {\n                gridColStyle += '1fr '\n            })\n            return {\n                gridTemplateColumns: gridColStyle\n            }\n        }\n    },\n\n    methods: {\n        triggerCounters() {\n            if (!this.countersFinished) {\n                var self = this\n                this.counters.forEach(function (counter, i) {\n                    var duration = 1000 + (i + 1) * 400\n                    self.count(counter, duration)\n                    self.countersFinished = true\n                })\n            }\n        },\n\n        count(counter, duration) {\n            var startTimestamp = null\n            const step = function (timestamp) {\n                if (!startTimestamp) {\n                    startTimestamp = timestamp\n                }\n                const progress = Math.min((timestamp - startTimestamp) / duration, 1)\n                counter.currentNumber = Math.floor(progress * counter.number)\n                if (progress < 1) {\n                    window.requestAnimationFrame(step)\n                }\n            }\n            window.requestAnimationFrame(step)\n        }\n    }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.component-container {\n    .counters {\n        display: grid;\n        column-gap: 30px;\n        max-width: $container-width;\n        margin: 0 auto;\n\n        @include breakpoint('tablet') {\n            padding-left: 30px;\n            padding-right: 30px;\n        }\n\n        @include breakpoint('mobile') {\n            grid-template-columns: 1fr !important;\n            row-gap: 100px;\n        }\n\n        .counter {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-start;\n            position: relative;\n\n            .number {\n                font-size: getFontSize('counterLarge', 'desktop');\n                font-family: getFontFamily('counterLarge');\n                line-height: 0.8em;\n\n                @include breakpoint('tablet') {\n                    font-size: getFontSize('counterLarge', 'tablet');\n                }\n\n                @include breakpoint('mobile') {\n                    font-size: getFontSize('counterLarge', 'mobile');\n                }\n\n                .unit {\n                    font-size: getFontSize('counterUnitLarge', 'desktop');\n                    font-family: getFontFamily('counterUnitLarge');\n                    font-weight: bold;\n\n                    @include breakpoint('tablet') {\n                        font-size: getFontSize('counterUnitLarge', 'tablet');\n                    }\n\n                    @include breakpoint('mobile') {\n                        font-size: getFontSize('counterUnitLarge', 'mobile');\n                    }\n                }\n            }\n\n            .description {\n                font-size: getFontSize('defaultText', 'desktop');\n                font-family: getFontFamily('defaultText');\n                font-weight: getFontWeight('defaultText');\n                font-style: getFontStyle('defaultText');\n                max-width: 300px;\n                text-align: center;\n                word-break: break-word;\n                hyphens: auto;\n\n                @include breakpoint('tablet') {\n                    font-size: getFontSize('defaultText', 'tablet');\n                }\n\n                @include breakpoint('mobile') {\n                    font-size: getFontSize('defaultText', 'mobile');\n                }\n            }\n\n            &.filled {}\n\n            &.outlined {\n\n                .number {\n                    -webkit-text-stroke-width: 3px;\n                    -webkit-text-stroke-color: $timberGreen;\n                    color: transparent;\n                }\n            }\n\n            &.polygon {\n                justify-content: center;\n\n                .number {\n                    font-size: 64px;\n                    font-size: getFontSize('counterMedium', 'desktop');\n                    margin-bottom: 20px;\n\n                    @include breakpoint('tablet') {\n                        font-size: getFontSize('counterMedium', 'tablet');\n                        margin-bottom: 10px;\n                    }\n\n                    @include breakpoint('mobile') {\n                        font-size: getFontSize('counterMedium', 'mobile');\n                        margin-bottom: 10px;\n                    }\n\n                    .unit {\n                        font-size: getFontSize('counterUnitSmall', 'desktop');\n\n                        @include breakpoint('tablet') {\n                            font-size: getFontSize('counterUnitSmall', 'tablet');\n                        }\n\n                        @include breakpoint('mobile') {\n                            font-size: getFontSize('counterUnitSmall', 'mobile');\n                        }\n                    }\n                }\n\n                .description {\n                    max-width: 200px;\n\n                    @include breakpoint('tablet') {\n                        max-width: 170px;\n                    }\n\n                    @include breakpoint('mobile') {\n                        max-width: 130px;\n                    }\n                }\n\n                .polygon-image {\n                    position: absolute;\n                    width: 350px;\n\n                    @include breakpoint('tablet') {\n                        width: 220px;\n                    }\n\n                    @include breakpoint('mobile') {\n                        width: 200px;\n                    }\n                }\n            }\n        }\n\n\n    }\n\n    &.dark {\n        .counters {\n            .counter {\n                &.outlined {\n                    .number {\n                        -webkit-text-stroke-color: $lightGrey;\n                    }\n\n                }\n            }\n        }\n\n    }\n}\n</style>\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!./CounterBlock.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!./CounterBlock.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./CounterBlock.vue?vue&type=template&id=3ea1ed1c&scoped=true\"\nimport script from \"./CounterBlock.vue?vue&type=script&lang=js\"\nexport * from \"./CounterBlock.vue?vue&type=script&lang=js\"\nimport style0 from \"./CounterBlock.vue?vue&type=style&index=0&id=3ea1ed1c&prod&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  \"3ea1ed1c\",\n  null\n  \n)\n\nexport default component.exports","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!./CounterBlock.vue?vue&type=style&index=0&id=3ea1ed1c&prod&lang=scss&scoped=true\"","module.exports = __webpack_public_path__ + \"img/polygon.4e8f91fe.svg\";"],"sourceRoot":""}