{"version":3,"sources":["webpack:///./src/components/PageBuilder/GraphicTiles.vue?4a68","webpack:///./src/events.js","webpack:///./src/components/PageBuilder/GraphicTiles.vue","webpack:///./src/components/PageBuilder/Elements/GraphicTile.vue","webpack:///src/components/PageBuilder/Elements/GraphicTile.vue","webpack:///./src/components/PageBuilder/Elements/GraphicTile.vue?f586","webpack:///./src/components/PageBuilder/Elements/GraphicTile.vue?d522","webpack:///src/components/PageBuilder/GraphicTiles.vue","webpack:///./src/components/PageBuilder/GraphicTiles.vue?ca85","webpack:///./src/components/PageBuilder/GraphicTiles.vue?ac01","webpack:///./src/components/PageBuilder/Elements/GraphicTile.vue?0cd9"],"names":["ToggleTextTile","constructor","component","this","ToggleTeamMember","ToggleSelectField","ResetEventFilters","ApplyEventFilters","formats","targetGroups","format","targetGroup","render","_vm","_c","_self","staticClass","attrs","cmsBlock","anchorTag","_l","tiles","tile","key","id","staticRenderFns","image","data","localize","text","class","open","on","toggle","Object","entries","srcsets","set","originalFormat","slice","_e","attributes","alternativeText","getImageUrl","url","domProps","_s","md","require","name","props","computed","getImageSrcsets","hasWebp","ext","eventListeners","event","handler","methods","EventBus","publish","window","innerWidth","components","GraphicTile"],"mappings":"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","file":"js/chunk-976d5e6e.c7653116.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!./GraphicTiles.vue?vue&type=style&index=0&id=36d45226&prod&lang=scss&scoped=true\"","//#############################################################################\n//Available Events for the Event Bus System\n//#############################################################################\n\nexport class ToggleTextTile {\n    constructor(component){\n        this.component = component\n    }\n}\n\nexport class ToggleTeamMember {\n    constructor(component){\n        this.component = component\n    }\n}\n\nexport class ToggleSelectField {\n    constructor(component) {\n        this.component = component\n    }\n}\n\nexport class ResetEventFilters {}\n\nexport class ApplyEventFilters {\n    constructor(formats, targetGroups){\n        this.format = formats\n        this.targetGroup = targetGroups\n    }\n}\n","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('section',{staticClass:\"component-container white\",attrs:{\"id\":_vm.cmsBlock.anchorTag}},[_c('div',{staticClass:\"tiles\"},_vm._l((_vm.cmsBlock.tiles),function(tile){return _c('GraphicTile',{key:tile.id,attrs:{\"tile\":tile}})}),1)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return (this.tile.image.data && _vm.localize(this.tile.text))?_c('div',{staticClass:\"white tile\",class:{open: _vm.open},on:{\"click\":_vm.toggle}},[_c('div',{staticClass:\"title\",class:{open: _vm.open}},[_c('picture',[_vm._l((Object.entries(_vm.srcsets)),function([format, set]){return [(format !== _vm.originalFormat)?_c('source',{attrs:{\"srcset\":set,\"sizes\":\"(max-width: 1100px) 100vw, 50vw\",\"type\":'image/' + format.slice(1)}}):_vm._e()]}),(_vm.originalFormat.slice(1) !== 'svg')?_c('img',{attrs:{\"loading\":\"lazy\",\"decoding\":\"async\",\"srcset\":_vm.srcsets[_vm.originalFormat],\"type\":'image/' + _vm.originalFormat.slice(1),\"sizes\":\"(max-width: 1100px) 80vw, 25vw\",\"alt\":_vm.tile.image.data.attributes.alternativeText}}):_vm._e(),(_vm.originalFormat.slice(1) === 'svg')?_c('img',{attrs:{\"src\":_vm.getImageUrl(this.tile.image.data.attributes.url),\"type\":'image/svg+xml',\"alt\":_vm.tile.image.data.attributes.alternativeText}}):_vm._e()],2)]),_c('div',{staticClass:\"text\",class:{open: _vm.open},domProps:{\"innerHTML\":_vm._s(_vm.md(_vm.localize(_vm.tile.text)))}}),_c('div',{staticClass:\"plus-button-wrapper\"},[_c('img',{staticClass:\"plus\",class:{open: _vm.open},attrs:{\"src\":require(\"@/assets/x.svg\")}})])]):_vm._e()\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div  v-if=\"this.tile.image.data && localize(this.tile.text)\" class=\"white tile\" v-on:click=\"toggle\" :class=\"{open: open}\">\n        <div class=\"title\" :class=\"{open: open}\">\n            <picture>\n                <template v-for=\"[format, set] of Object.entries(srcsets)\">\n                    <source v-if=\"format !== originalFormat\" :srcset=\"set\" sizes=\"(max-width: 1100px) 100vw, 50vw\" :type=\"'image/' + format.slice(1)\">\n                </template>\n                <img v-if=\"originalFormat.slice(1) !== 'svg'\" loading=\"lazy\" decoding=\"async\" :srcset=\"srcsets[originalFormat]\" :type=\"'image/' + originalFormat.slice(1)\" sizes=\"(max-width: 1100px) 80vw, 25vw\" :alt=\"tile.image.data.attributes.alternativeText\">\n                <img v-if=\"originalFormat.slice(1) === 'svg'\"\n                            :src=\"getImageUrl(this.tile.image.data.attributes.url)\" :type=\"'image/svg+xml'\"\n                            :alt=\"tile.image.data.attributes.alternativeText\">\n            </picture>\n        </div>\n        <div class=\"text\" :class=\"{open: open}\" v-html=\"md(localize(tile.text))\"></div>\n        <div class=\"plus-button-wrapper\">\n            <img class=\"plus\" :class=\"{open: open}\" src=\"@/assets/x.svg\"/>\n        </div>\n    </div>\n</template>\n\n<script> \n    import { EventBus } from '@/event-bus'\n    import { ToggleTextTile } from '@/events'\n\n    export default {\n        name: 'GraphicTile',\n\n        props: [\n            'tile'\n        ],\n\n        data() {\n            return {\n                open: false\n            }\n        },\n\n        computed: {\n            srcsets(){\n                return this.getImageSrcsets(this.tile.image.data.attributes) || {}\n            },\n            \n            hasWebp(){\n                return '.webp' in this.srcsets;\n            },\n\n            originalFormat(){\n                return this.tile.image.data.attributes.ext \n                /*for (const[format, _] of Object.entries(this.srcsets)) {\n                    if (format !== '.webp') {\n                        return format\n                    }\n                }\n                return null*/\n            },\n        },\n\n        eventListeners: [\n            {\n                event: ToggleTextTile,\n                handler(event){\n                    if(event.component != this){\n                        this.open = false\n                    }\n                }\n            }\n        ],\n\n        methods: {\n            toggle() {\n                EventBus.publish(new ToggleTextTile(this))\n                if(window.innerWidth < 1600){\n                    this.open = !this.open\n                }\n            }\n        }\n    }\n</script>\n\n<style lang=\"scss\" scoped>\n    $scrollbarPadding: 20px;\n\n    @mixin openTile {\n        //background: $timberGreen;\n        //color:white;\n    }\n\n    @mixin openPlus {\n        transform: rotate(0deg);\n\n        &.dark {\n            display: none;\n        }\n\n        &.light {\n            display: block;\n        }\n    }\n\n    @mixin openTitle {\n        display: none;\n    }\n\n    @mixin openText {\n        display: block;\n    }\n\n    .tile {\n        background: white;\n        height: calc(500px - 120px);\n        width: calc(100% - 100px);\n        position: relative;\n        color: $timberGreen;\n        overflow: hidden;\n        padding: getSpacing('padding-default-vertical', 'desktop') getSpacing('padding-default-horizontal', 'desktop');\n        padding-top: 40px;\n        padding-left: 50px;\n        padding-right: 50px;\n        padding-bottom: 80px;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        flex-direction: column;\n        hyphens: auto;\n\n        @include breakpoint('tablet') {\n            padding-top: 30px;\n            padding-left: 50px;\n            padding-right: 50px;\n            height: calc(500px - 110px);\n            width: calc(100% - 100px);\n            max-width: calc(100% - 100px) !important;\n            overflow: hidden; \n        }\n        @include breakpoint('mobile') {\n            padding-top: 20px;\n            padding-left: 30px;\n            padding-right: 30px;\n            height: calc(400px - 100px);\n            width: calc(100% - 60px);\n        }\n\n        &:nth-child(odd) {\n            background: $lightGrey;\n\n            @include breakpoint('tablet') {\n                background: white;\n            }\n\n            @include breakpoint('mobile') {\n                background: $lightGrey;\n            }\n        }\n        \n        &.open {\n            @include openTile;\n        }\n\n        .title {\n            font-family: getFontFamily('textHeader');\n            font-size: getFontSize('textHeader', 'desktop');\n            color: $timberGreen;\n            width: 100%;\n\n            @include breakpoint('tablet') {\n                font-size: getFontSize('textHeader', 'tablet');\n            }\n            @include breakpoint('mobile') {\n                font-size: getFontSize('textHeader', 'mobile');\n            }\n\n            &.open {\n                @include openTitle;\n            }\n\n            img {\n                width: 100%;\n                height: 150px;\n                max-width: 333px;\n                object-fit: contain;\n\n                @include breakpoint('mobile') {\n                    max-width: 250px;\n                }\n            }\n        }\n\n        .text {\n            display: none;\n            color: black;\n            text-align: start;\n            overflow-y: scroll;\n            padding-top: 20px;\n\n            ::v-deep p {\n                color: black;\n\n                font-family: getFontFamily('smallText');\n                font-size: getFontSize('smallText', 'desktop');\n                font-style: getFontStyle('smallText');\n                color: $timberGreen;\n\n                @include breakpoint('tablet') {\n                    font-size: getFontSize('smallText', 'tablet');\n                }\n                @include breakpoint('mobile') {\n                    font-size: getFontSize('smallText', 'mobile');\n                }\n            }\n            \n\n            &.open {\n                @include openText;\n            }\n        }\n\n        .plus-button-wrapper {\n            margin-top: 10px;\n            padding-right: $scrollbarPadding;\n            position: absolute;\n            bottom: 50px;\n            width: calc(100% - 200px);\n            display: flex;\n            justify-content: center;\n\n            .plus {\n                transform: rotate(45deg);\n                width: 20px;\n                height: 20px;\n                cursor: pointer;\n\n                &.dark {\n                    display: block;\n                }\n                &.light {\n                    display: none;\n                }\n\n                &.open {\n                    @include openPlus;\n                }\n\n                &:hover {\n                    opacity: 0.75;\n                }\n            }\n        }\n\n        @include breakpointAbove('tablet') {\n\n            &:hover {\n                @include openTile;\n\n                .title {\n                    @include openTitle;\n                }\n\n                .text {\n                    @include openText;\n                }\n\n                .plus-button-wrapper {\n                    .plus {\n                        @include openPlus;\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!./GraphicTile.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!./GraphicTile.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./GraphicTile.vue?vue&type=template&id=3ec169f1&scoped=true\"\nimport script from \"./GraphicTile.vue?vue&type=script&lang=js\"\nexport * from \"./GraphicTile.vue?vue&type=script&lang=js\"\nimport style0 from \"./GraphicTile.vue?vue&type=style&index=0&id=3ec169f1&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  \"3ec169f1\",\n  null\n  \n)\n\nexport default component.exports","<template>\n    <section :id=\"cmsBlock.anchorTag\" class=\"component-container white\">\n        <div class=\"tiles\">\n            <GraphicTile v-for=\"tile in cmsBlock.tiles\" :key=\"tile.id\" :tile=\"tile\" />\n        </div>\n    </section>\n</template>\n\n<script>\nimport GraphicTile from '@/components/PageBuilder/Elements/GraphicTile'\n\nexport default {\n    name: 'GraphicTiles',\n\n    props: [\n        'cmsBlock'\n    ],\n\n    components: {\n        GraphicTile\n    }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.component-container {\n\n    .tiles {\n        display: grid;\n        grid-template-columns: 1fr 1fr 1fr;\n        max-width: $container-width;\n        margin: 0 auto;\n        padding: 0 getSpacing('padding-default-horizontal', 'desktop');\n\n        @include breakpoint('tablet') {\n            padding: 0 getSpacing('padding-default-horizontal', 'tablet');\n            grid-template-columns: 1fr 1fr;\n        }\n\n        @include breakpoint('mobile') {\n            grid-template-columns: 1fr;\n            width: calc(100% - 2 * getSpacing('padding-default-horizontal', 'mobile'));\n            padding: 0 getSpacing('padding-default-horizontal', 'mobile');\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!./GraphicTiles.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!./GraphicTiles.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./GraphicTiles.vue?vue&type=template&id=36d45226&scoped=true\"\nimport script from \"./GraphicTiles.vue?vue&type=script&lang=js\"\nexport * from \"./GraphicTiles.vue?vue&type=script&lang=js\"\nimport style0 from \"./GraphicTiles.vue?vue&type=style&index=0&id=36d45226&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  \"36d45226\",\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!./GraphicTile.vue?vue&type=style&index=0&id=3ec169f1&prod&lang=scss&scoped=true\""],"sourceRoot":""}