{"version":3,"file":"static/js/9635.39dbb5b8.js","mappings":"8JAAA,IAAIA,EAAS,WACX,IAAIC,EAAMC,KACRC,EAAKF,EAAIG,MAAMD,GACjB,OAAQF,EAAII,SAoDRJ,EAAIK,KAnDJH,EACE,MACA,CACEI,WAAY,CACV,CACEC,KAAM,OACNC,QAAS,SACTC,MAAOT,EAAIU,KACXC,WAAY,SAGhBC,YAAa,oBACbC,MAAOb,EAAIU,KAAO,UAAY,IAEhC,CACER,EACE,uBACA,CAAEY,MAAO,CAAE,aAAc,GAAF,OAAKd,EAAIe,UAAS,QAAQ,YAAa,IAC9D,CACEb,EACE,MACA,CACEU,YAAa,SACbE,MAAO,CACLE,KAAM,cACN,kBAAmB,sBAGvB,CACEd,EAAG,IAAK,CACNY,MAAO,CAAEG,GAAI,qBACbC,SAAU,CACRC,UAAWnB,EAAIoB,GAAGpB,EAAIqB,GAAG,6BAG7BnB,EACE,SACA,CACEU,YAAa,MACbE,MAAO,CAAEE,KAAM,SAAU,eAAgB,SACzCM,GAAI,CAAEC,MAAOvB,EAAIwB,SAEnB,CAACxB,EAAIyB,GAAGzB,EAAIoB,GAAGpB,EAAIqB,GAAG,sBAOlC,EAGR,EAEAtB,EAAO2B,eAAgB,E,gCC1D0J,ECqBjL,CACAnB,KAAAA,oBAEAoB,KAAAA,WACA,OACAvB,UAAAA,EACAM,MAAAA,EACAK,UAAAA,EAAAA,KAAAA,EAAAA,QAAAA,CACA,gDAGA,EAEAa,QAAAA,WAAA,WACAC,YAAAA,WACA,cACA,cAGA,SACA,OACA,EAEAC,QAAAA,CACAN,OAAAA,WACA,iBACA,YAEA,EAEAO,UAAAA,WAAA,QACA,gGACA,EAKAC,UAAAA,WACAC,SAAAA,OAAAA,0DACA,ICzCA,GAXgB,E,SAAA,GACd,EACAlC,EH+CoB,IG7CpB,EACA,KACA,WACA,MAI8B,O","sources":["webpack://finnish-art/./src/components/GdprNotification.vue","webpack://finnish-art/./src/components/GdprNotification.vue?d22a","webpack://finnish-art/src/components/GdprNotification.vue","webpack://finnish-art/./src/components/GdprNotification.vue?a5a9"],"sourcesContent":["var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return !_vm.accepted\n    ? _c(\n        \"div\",\n        {\n          directives: [\n            {\n              name: \"show\",\n              rawName: \"v-show\",\n              value: _vm.show,\n              expression: \"show\",\n            },\n          ],\n          staticClass: \"gdpr-notification\",\n          class: _vm.show ? \"visible\" : \"\",\n        },\n        [\n          _c(\n            \"silhouette-assistant\",\n            { attrs: { \"image-name\": `${_vm.character}.svg`, \"bubble-nr\": 0 } },\n            [\n              _c(\n                \"div\",\n                {\n                  staticClass: \"banner\",\n                  attrs: {\n                    role: \"alertdialog\",\n                    \"aria-labelledby\": \"gdpr-banner-title\",\n                  },\n                },\n                [\n                  _c(\"p\", {\n                    attrs: { id: \"gdpr-banner-title\" },\n                    domProps: {\n                      innerHTML: _vm._s(_vm.$t(\"user.gdprCookieNotice\")),\n                    },\n                  }),\n                  _c(\n                    \"button\",\n                    {\n                      staticClass: \"btn\",\n                      attrs: { role: \"button\", \"aria-pressed\": \"false\" },\n                      on: { click: _vm.accept },\n                    },\n                    [_vm._v(_vm._s(_vm.$t(\"common.ok\")))]\n                  ),\n                ]\n              ),\n            ]\n          ),\n        ],\n        1\n      )\n    : _vm._e()\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","import mod from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GdprNotification.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/babel-loader/lib/index.js!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GdprNotification.vue?vue&type=script&lang=js&\"","<template lang=\"pug\">\ndiv.gdpr-notification(\n    v-if=\"!accepted\"\n    v-show=\"show\"\n    v-bind:class=\"show ? 'visible' : ''\")\n\n    silhouette-assistant(\n        v-bind:image-name=\"`${character}.svg`\"\n        v-bind:bubble-nr=\"0\")\n\n        div.banner(\n            role=\"alertdialog\" aria-labelledby=\"gdpr-banner-title\")\n            p#gdpr-banner-title(v-html=\"$t('user.gdprCookieNotice')\")\n            button.btn(\n                v-on:click=\"accept\"\n                role=\"button\"\n                aria-pressed=\"false\") {{ $t('common.ok') }}\n\n</template>\n\n<script>\nexport default {\n    name: 'gdpr-notification',\n\n    data: function () {\n        return {\n            accepted: false,\n            show: false,\n            character: _.head(_.shuffle([\n                'silhouette-1', 'silhouette-2', 'silhouette-3'\n            ]))\n        };\n    },\n\n    mounted: function () {\n        setTimeout(() => {\n            if (this.getCookie()) {\n                this.accepted = true;\n                return;\n            }\n            this.show = true;\n        }, 1000);\n    },\n\n    methods: {\n        accept: function () {\n            this.setCookie();\n            this.show = false;\n            // console.info(\"GDPR cookies have been accepted\");\n        },\n\n        getCookie: function () {\n            return !!document?.cookie?.match('gdpr=true');\n        },\n\n        /**\n         * Set GDPR accepted cookie\n         */\n        setCookie: function () {\n            document.cookie = \"gdpr=true; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT\";\n        }\n    }\n};\n</script>\n\n<style scoped lang=\"scss\">\n// @import '~assets/styles/variables';\n\n.gdpr-notification {\n    position: fixed;\n    bottom: -200px;\n    z-index: 99999;\n    display: flex;\n    width: 100%;\n    height: 150px;\n    margin: 0;\n    padding: 0 $main-content-margin;\n    padding-left: 20px;\n    transition-property: bottom;\n    transition-duration: 0.5s;\n    transition-timing-function: ease-in;\n    &.visible {\n        bottom: -1px;\n    }\n    .banner {\n        display: inline-flex;\n        flex-grow: 1;\n        align-items: center;\n        align-self: center;\n        width: 100%;\n        height: 17vh;\n        max-width: 950px;\n        padding: 6% 6% 9% 20%;\n        font-family: $main-sans-serif;\n        font-size: 1rem;\n        background-image: url('~assets/images/bubble.png');\n        background-repeat: no-repeat;\n        background-size: 100% 100%;\n        p {\n            margin: auto 1.5rem;\n            margin-left: auto;\n            color: $dark-gray-2;\n        }\n        button.btn {\n            align-self: center;\n            justify-self: flex-end;\n            margin: auto 0 auto auto;\n            padding: 0.5rem 1rem;\n            border-width: 2px;\n        }\n    }\n    @media screen and (max-width: $breakpoint-desktop - 1) {\n        .banner {\n            height: 180px;\n            margin-bottom: 50px;\n        }\n    }\n    @media screen and (max-width: $breakpoint-tablet - 1) {\n        .banner {\n            height: 27vh;\n        }\n    }\n    @media screen and (max-width: $breakpoint-mobile) {\n        flex-direction: column-reverse;\n        height: auto;\n        .character {\n            width: auto;\n            height: 30vh;\n            max-height: 300px;\n        }\n        .banner {\n            flex-direction: column;\n            width: 95vw;\n            height: auto;\n            max-width: unset;\n            min-height: 350px;\n            margin-bottom: 0;\n            padding: 2% 25% 2%;\n            background-image: url('~assets/images/bubble-vertical.png');\n            p {\n                margin: 3rem 1.5rem 1.5rem !important;\n            }\n            button.btn {\n                justify-self: center;\n                margin: 0 auto 1rem;\n            }\n        }\n    }\n    @media screen and (max-width: $breakpoint-mobile-xs) {\n        .banner {\n            min-height: 400px;\n        }\n    }\n    @media screen and (max-width: 600px) {\n        .character {\n            display: none;\n        }\n        .bubble-wrapper {\n            max-width: 96vw !important;\n        }\n        .banner p {\n            width: 100%;\n        }\n    }\n    @media screen and (max-height: 600px) and (max-width: 600px) {\n        top: 1.5rem;\n        bottom: unset;\n        .banner {\n            p {\n                width: 80%;\n                margin: 10vh auto;\n            }\n        }\n    }\n    @media screen and (max-height: 350px) and (max-width: 600px) {\n        .banner {\n            width: 100vw;\n            height: 100vh;\n            min-height: unset;\n            padding: 0;\n            background: white;\n        }\n    }\n}\n</style>\n","import { render, staticRenderFns } from \"./GdprNotification.vue?vue&type=template&id=b988a864&scoped=true&lang=pug&\"\nimport script from \"./GdprNotification.vue?vue&type=script&lang=js&\"\nexport * from \"./GdprNotification.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GdprNotification.vue?vue&type=style&index=0&id=b988a864&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  \"b988a864\",\n  null\n  \n)\n\nexport default component.exports"],"names":["render","_vm","this","_c","_self","accepted","_e","directives","name","rawName","value","show","expression","staticClass","class","attrs","character","role","id","domProps","innerHTML","_s","$t","on","click","accept","_v","_withStripped","data","mounted","setTimeout","methods","getCookie","setCookie","document"],"sourceRoot":""}