{"version":3,"file":"static/js/7842.15d7c693.js","mappings":"8JAAA,IAAIA,EAAS,WACX,IAAIC,EAAMC,KACRC,EAAKF,EAAIG,MAAMD,GACjB,OAAOA,EACL,MACA,CACEE,WAAY,CACV,CACEC,KAAM,OACNC,QAAS,SACTC,MAAOP,EAAIQ,KACXC,WAAY,SAGhBC,YAAa,iBACbC,MAAOX,EAAIW,OAEb,CACET,EAAG,2BAA4B,CAC7BU,IAAK,cACLC,MAAO,CACL,WAAYb,EAAIc,QAChBC,WAAW,EACXC,YAAahB,EAAIiB,GAAG,kBAEtBC,MAAO,CACLX,MAAOP,EAAIO,MACXY,SAAU,SAAUC,GAClBpB,EAAIO,MAAQa,CACd,EACAX,WAAY,WAGhBP,EAAG,aAAc,CACfW,MAAO,CAAEQ,MAAOrB,EAAIiB,GAAG,iBACvBK,GAAI,CAAEC,MAAOvB,EAAIwB,YAGrB,EAEJ,EAEAzB,EAAO0B,eAAgB,E,aC1CuJ,ECqB9K,CACApB,KAAAA,iBAEAqB,WAAAA,CACA,EAGAC,KAAAA,WACA,OACAnB,MAAAA,EACAG,MAAAA,GACAJ,MAAAA,CAAAqB,KAAAA,IAEA,EAEAC,QAAAA,WACA,kCACA,2DACA,EAEAC,cAAAA,WACA,4DACA,EAEAC,MAAAA,CAIAvB,KAAAA,WACA,kCACA,UACAwB,SAAAA,iBAAAA,UAAAA,KAAAA,WAGAA,SAAAA,oBAAAA,UAAAA,KAAAA,UAEA,GAGAC,QAAAA,CAMAC,gBAAAA,WACA,wDACA,uCACA,SAGA,SAKA,OAJA,sBACAvB,GAAAA,WAAAA,OAAAA,EAAAA,aAAAA,QAGA,CACA,EAEAwB,aAAAA,SAAAA,GAAA,WACA,aAQA,cAPA,YAAAP,KAAAA,IACA,aACA,mCACA,0GACA,IAKA,EAEAQ,UAAAA,SAAAA,GACA,gBACA,cAEA,EAEAtB,QAAAA,WACA,IACA,GAAAc,KADA,iCAEA,eACA,mBAAAvB,KAAAA,GAAAA,OAAAA,KAAAA,MAAAA,OAAAA,WAAAgC,MAAAA,GAEA,EAEAb,QAAAA,WACA,YACA,IC1FA,GAXgB,E,SAAA,GACd,EACAzB,EH+BoB,IG7BpB,EACA,KACA,KACA,MAI8B,O","sources":["webpack://finnish-art/./src/components/SearchOverlay.vue","webpack://finnish-art/./src/components/SearchOverlay.vue?cb21","webpack://finnish-art/src/components/SearchOverlay.vue","webpack://finnish-art/./src/components/SearchOverlay.vue?02c5"],"sourcesContent":["var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _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: \"search-overlay\",\n      style: _vm.style,\n    },\n    [\n      _c(\"search-option-input-text\", {\n        ref: \"SearchInput\",\n        attrs: {\n          \"on-enter\": _vm.onEnter,\n          autofocus: true,\n          placeholder: _vm.$t(\"common.search\"),\n        },\n        model: {\n          value: _vm.value,\n          callback: function ($$v) {\n            _vm.value = $$v\n          },\n          expression: \"value\",\n        },\n      }),\n      _c(\"icon-close\", {\n        attrs: { title: _vm.$t(\"common.close\") },\n        on: { click: _vm.onClose },\n      }),\n    ],\n    1\n  )\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!./SearchOverlay.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!./SearchOverlay.vue?vue&type=script&lang=js&\"","<template lang=\"pug\">\ndiv.search-overlay(\n    v-show=\"show\"\n    v-bind:style=\"style\")\n\n    search-option-input-text(\n        ref=\"SearchInput\"\n        v-model=\"value\"\n        v-bind:on-enter=\"onEnter\"\n        v-bind:autofocus=\"true\"\n        v-bind:placeholder=\"$t('common.search')\")\n\n    icon-close(\n        v-bind:title=\"$t('common.close')\"\n        v-on:click=\"onClose\")\n\n</template>\n\n<script>\n// import SearchOptionInputText from '@/components/SearchOptions/InputText';\n\nexport default {\n    name: 'search-overlay',\n\n    components: {\n        // SearchOptionInputText\n    },\n\n    data: function () {\n        return {\n            show: false,\n            style: '',\n            value: {Text: ''}\n        };\n    },\n\n    mounted: function () {\n        this.style = this.getWrapperStyle();\n        this.$eventBus.$on('show-search-overlay', this.onToggleShow);\n    },\n\n    beforeDestroy: function () {\n        this.$eventBus.$off('show-search-overlay', this.onToggleShow);\n    },\n\n    watch: {\n        /**\n         * Set style and bind keycode listeners for esc key to close the overlay.\n         */\n        show: function () {\n            this.style = this.getWrapperStyle();\n            if (this.show) {\n                document.addEventListener('keydown', this.onKeyDown);\n            }\n            else {\n                document.removeEventListener('keydown', this.onKeyDown);\n            }\n        }\n    },\n\n    methods: {\n        /**\n         * Get search overlay style.\n         * On tablet (navbar width >= 1024px), the search bar overlaps navbar, having same height.\n         * On mobile (< 1024px) it will be beneath the logo (auto height).\n         */\n        getWrapperStyle: function () {\n            const navbar = document.querySelector('.navbar.main-navigation');\n            if (!navbar || !navbar.clientHeight || !navbar.clientWidth) {\n                return '';\n            }\n\n            let style = '';\n            if (navbar.clientWidth >= 1024) { // desktop or tablet\n                style += `height: ${navbar.clientHeight}px;`;\n            }\n\n            return style;\n        },\n\n        onToggleShow: function (forceClose) {\n            if (!this.show && !forceClose) {\n                this.value = {Text: ''};\n                this.show = true;\n                this.$nextTick(() => {\n                    this.$refs.SearchInput?.$el.querySelector('input')?.focus();\n                });\n            }\n            else {\n                this.show = false;\n            }\n        },\n\n        onKeyDown: function (event) {\n            if (event.keyCode === 27) {\n                this.onClose();\n            }\n        },\n\n        onEnter: function () {\n            const text = (this.value && this.value.Text) || '';\n            const query = {Text: text};\n            this.onClose();\n            this.$router.push({name: `${this.$i18n.locale}.Search`, query});\n            // -> exits this view\n        },\n\n        onClose: function () {\n            this.show = false;\n        }\n    }\n};\n</script>\n\n<style lang=\"scss\">\n// @import '~assets/styles/variables';\n\n.search-overlay {\n    position: fixed;\n    top: 100px;\n    right: 0;\n    left: 0;\n    z-index: 15000; // above .dx-overlay-wrapper\n    display: flex;\n    width: auto;\n    height: auto; // will be dynamically adjusted for desktop\n    min-height: 5em;\n    background-color: rgba(0, 0, 0, 0.90);\n    transition-property: all;\n    transition-duration: 500ms;\n    transition-timing-function: ease-in;\n\n    .search-input-text {\n        position: relative;\n        top: 1rem;\n        max-width: 85vw;\n        margin: 0 auto 0 1rem;\n        .dx-textbox, input {\n            background-color: $light-gray;\n        }\n    }\n\n    .close-icon {\n        position: absolute;\n        top: 1rem;\n        right: 1.5rem;\n        width: 2rem;\n        height: 2rem;\n        color: $light-gray;\n        cursor: pointer;\n    }\n\n    // dynamically adjust for tablet\n    @media screen and (min-width: $breakpoint-tablet) {\n        .search-input-text {\n            max-width: 90vw;\n            margin-left: 2rem;\n        }\n    }\n\n    // dynamically adjust for desktop\n    @media screen and (min-width: $breakpoint-desktop) {\n        top: 0;\n        left: calc(137px + 45px + 2rem); // logo width 137px + 45px margin\n        min-height: unset;\n        .search-input-text {\n            top: 35px;\n            max-width: 70vw;\n        }\n        .close-icon {\n            top: 2rem;\n            right: 3rem;\n        }\n    }\n}\n</style>\n","import { render, staticRenderFns } from \"./SearchOverlay.vue?vue&type=template&id=442ce37f&lang=pug&\"\nimport script from \"./SearchOverlay.vue?vue&type=script&lang=js&\"\nexport * from \"./SearchOverlay.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SearchOverlay.vue?vue&type=style&index=0&id=442ce37f&prod&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  null,\n  null\n  \n)\n\nexport default component.exports"],"names":["render","_vm","this","_c","_self","directives","name","rawName","value","show","expression","staticClass","style","ref","attrs","onEnter","autofocus","placeholder","$t","model","callback","$$v","title","on","click","onClose","_withStripped","components","data","Text","mounted","beforeDestroy","watch","document","methods","getWrapperStyle","onToggleShow","onKeyDown","query"],"sourceRoot":""}