{"version":3,"sources":["webpack:///./src/assets/arrow_down_black.svg","webpack:///./src/events.js","webpack:///./src/components/Form/SelectField.vue","webpack:///src/components/Form/SelectField.vue","webpack:///./src/components/Form/SelectField.vue?4a9d","webpack:///./src/components/Form/SelectField.vue?e6f3","webpack:///./src/components/Form/SelectField.vue?3fd5"],"names":["module","exports","ToggleTextTile","constructor","component","this","ToggleTeamMember","ToggleSelectField","ResetEventFilters","ApplyEventFilters","formats","targetGroups","format","targetGroup","render","_vm","_c","_self","staticClass","class","open","on","toggle","_v","_s","currentOption","label","value","_e","placeholder","attrs","require","$event","updateValue","_l","options","option","staticRenderFns","name","props","data","eventListeners","event","handler","methods","EventBus","publish","$emit","length","reflectCurrentState","self","forEach","watch"],"mappings":"mGAAAA,EAAOC,QAAU,IAA0B,qC,kCCA3C,0KAIO,MAAMC,EACTC,YAAYC,GACRC,KAAKD,UAAYA,GAIlB,MAAME,EACTH,YAAYC,GACRC,KAAKD,UAAYA,GAIlB,MAAMG,EACTJ,YAAYC,GACRC,KAAKD,UAAYA,GAIlB,MAAMI,GAEN,MAAMC,EACTN,YAAYO,EAASC,GACjBN,KAAKO,OAASF,EACdL,KAAKQ,YAAcF,K,yCC3B3B,IAAIG,EAAS,WAAkB,IAAIC,EAAIV,KAAKW,EAAGD,EAAIE,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,SAAS,CAACF,EAAG,MAAM,CAACE,YAAY,SAASC,MAAM,CAAC,KAAQJ,EAAIK,MAAMC,GAAG,CAAC,MAAQN,EAAIO,SAAS,CAACP,EAAIQ,GAAG,IAAIR,EAAIS,GAAGT,EAAIU,cAAcC,OAAO,KAAOX,EAAIU,cAAcE,MAA+EZ,EAAIa,KAA5EZ,EAAG,MAAM,CAACE,YAAY,eAAe,CAACH,EAAIQ,GAAGR,EAAIS,GAAGT,EAAIc,kBAA2Bb,EAAG,MAAM,CAACE,YAAY,SAAS,CAACF,EAAG,MAAM,CAACG,MAAM,CAAC,KAAQJ,EAAIK,MAAMU,MAAM,CAAC,IAAMC,EAAQ,aAAsCf,EAAG,MAAM,CAACE,YAAY,UAAUC,MAAM,CAAC,KAAQJ,EAAIK,OAAO,CAACJ,EAAG,MAAM,CAACE,YAAY,SAASG,GAAG,CAAC,MAAQ,SAASW,GAAQ,OAAOjB,EAAIkB,YAAY,CAACP,MAAO,KAAMC,MAAO,UAAU,CAACZ,EAAIQ,GAAG,OAAOR,EAAImB,GAAInB,EAAIoB,SAAS,SAASC,GAAQ,OAAOpB,EAAG,MAAM,CAACE,YAAY,SAASG,GAAG,CAAC,MAAQ,SAASW,GAAQ,OAAOjB,EAAIkB,YAAYG,MAAW,CAACrB,EAAIQ,GAAG,IAAIR,EAAIS,GAAGY,EAAOV,OAAO,WAAU,MAE/zBW,EAAkB,G,wBCoBtB,GACAC,KAAA,cAEAC,MAAA,CACA,QACA,UACA,eAGAC,OACA,OACApB,MAAA,EACAK,cAAA,CACAC,MAAA,KACAC,MAAA,QAKAc,eAAA,CACA,CACAC,MAAAnC,OACAoC,QAAAD,GACAA,EAAAtC,WAAA,OACA,KAAAgB,MAAA,MAMAwB,QAAA,CACAtB,SACAuB,OAAAC,QAAA,IAAAvC,OAAA,OACA,KAAAa,MAAA,KAAAA,MAGAa,YAAAG,GACA,KAAAX,cAAAW,EACAA,EAAAT,MACA,KAAAoB,MAAA,QAAAX,EAAAT,MAAAqB,OAAA,EAAAZ,EAAAT,MAAA,MAEA,KAAAoB,MAAA,cAEA,KAAAzB,UAGA2B,sBACA,IAAAC,EAAA,KACA,KAAAvB,MACA,KAAAQ,QAAAgB,SAAA,SAAAf,GACAA,EAAAT,OAAAuB,EAAAvB,QACAuB,EAAAzB,cAAAE,MAAAuB,EAAAvB,MACAuB,EAAAzB,cAAAC,MAAAU,EAAAV,UAIA,KAAAD,cAAA,CACAE,MAAA,KACAD,MAAA,QAMA0B,MAAA,CACAzB,MAAA,CACAgB,UACA,KAAAM,wBAIAd,QAAA,CACAQ,UACA,KAAAM,0BC/FmW,I,wBCQ/V7C,EAAY,eACd,EACAU,EACAuB,GACA,EACA,KACA,WACA,MAIa,aAAAjC,E,kECnBf","file":"js/chunk-49825fa4.87b72b2b.js","sourcesContent":["module.exports = __webpack_public_path__ + \"img/arrow_down_black.de5c8985.svg\";","//#############################################################################\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('div',{staticClass:\"field\"},[_c('div',{staticClass:\"select\",class:{'open': _vm.open},on:{\"click\":_vm.toggle}},[_vm._v(\" \"+_vm._s(_vm.currentOption.label)+\" \"),(!_vm.currentOption.value)?_c('div',{staticClass:\"placeholder\"},[_vm._v(_vm._s(_vm.placeholder))]):_vm._e()]),_c('div',{staticClass:\"arrow\"},[_c('img',{class:{'flip': _vm.open},attrs:{\"src\":require(\"@/assets/arrow_down_black.svg\")}})]),_c('div',{staticClass:\"options\",class:{'open': _vm.open}},[_c('div',{staticClass:\"option\",on:{\"click\":function($event){return _vm.updateValue({label: null, value: null})}}},[_vm._v(\"-\")]),_vm._l((_vm.options),function(option){return _c('div',{staticClass:\"option\",on:{\"click\":function($event){return _vm.updateValue(option)}}},[_vm._v(\" \"+_vm._s(option.label)+\" \")])})],2)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div class=\"field\">\n        <div class=\"select\" v-on:click=\"toggle\" :class=\"{'open': open}\">\n            {{ currentOption.label }}\n            <div v-if=\"!currentOption.value\" class=\"placeholder\">{{ placeholder }}</div>\n        </div>\n        <div class=\"arrow\">\n            <img :class=\"{'flip': open}\" src=\"@/assets/arrow_down_black.svg\"/>\n        </div>\n        <div class=\"options\" :class=\"{'open': open}\">\n            <div class=\"option\" v-on:click=\"updateValue({label: null, value: null})\">-</div>\n            <div class=\"option\" v-for=\"option in options\" v-on:click=\"updateValue(option)\">\n                {{ option.label }}\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\n    import { EventBus } from '@/event-bus'\n    import { ToggleSelectField } from '@/events'\n\n    export default {\n        name: 'SelectField',\n\n        props: [\n            'value',\n            'options',\n            'placeholder'\n        ],\n\n        data() {\n            return {\n                open: false,\n                currentOption: {\n                    label: null,\n                    value: null\n                }\n            }\n        },\n\n        eventListeners: [\n            {\n                event: ToggleSelectField,\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 ToggleSelectField(this))\n                this.open = !this.open\n            },\n\n            updateValue(option) {\n                this.currentOption = option\n                if(option.value){\n                    this.$emit('input', option.value.length > 0 ? option.value : null)\n                } else {\n                    this.$emit('input', null)\n                }\n                this.toggle()\n            },\n\n            reflectCurrentState() {\n                var self = this\n                if(this.value){\n                    this.options.forEach(function(option){\n                        if(option.value == self.value){\n                            self.currentOption.value = self.value\n                            self.currentOption.label = option.label\n                        }\n                    })\n                } else {\n                    this.currentOption = {\n                        value: null,\n                        label: null\n                    }\n                }\n            }\n        },\n\n        watch: {\n            value: {\n                handler() {\n                    this.reflectCurrentState()\n                }\n            },\n\n            options: {\n                handler() {\n                    this.reflectCurrentState()\n                }\n            }\n        }\n    }\n</script>\n\n<style lang=\"scss\" scoped>\n    .field {\n        position: relative;\n        border-bottom: none;\n    }\n\n    .select {\n        width: 100%;\n        height: 100%;\n        border: 1px solid $timberGreen;\n        padding: 0 20px;\n        line-height: 42px;\n        cursor: pointer;\n\n        &.open {\n            border-width: 2px;\n            border-bottom: none;\n            padding: 0 19px;\n            line-height: 40px;\n\n            .placeholder {\n                line-height: 38px;\n            }\n        }\n    }\n\n    .placeholder {\n        opacity: 0.5;\n        font-style: italic;\n        line-height: 40px;\n    }\n\n    .arrow {\n        position: absolute;\n        right: 16px;\n        top: 5px;\n        pointer-events: none;\n\n        img.flip {\n            transform: rotate(180deg);\n        }\n    }\n\n    .options {\n        position: absolute;\n        top: 41px;\n        display: none;\n        z-index: 999;\n        background: white;\n        border: 2px solid $timberGreen;\n        border-top-width: 1px;\n        width: calc(100% - 4px);\n\n        &.open {\n            display: block;\n        }\n\n        .option {\n            height: 40px;\n            line-height: 42px;\n            border-bottom: 1px solid $timberGreen;\n            padding: 0 20px;\n            cursor: pointer;\n\n            &:last-child {\n                border: none;\n            }\n\n            &:hover {\n                background: $lightGrey;\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!./SelectField.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!./SelectField.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SelectField.vue?vue&type=template&id=ae1aadcc&scoped=true\"\nimport script from \"./SelectField.vue?vue&type=script&lang=js\"\nexport * from \"./SelectField.vue?vue&type=script&lang=js\"\nimport style0 from \"./SelectField.vue?vue&type=style&index=0&id=ae1aadcc&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  \"ae1aadcc\",\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!./SelectField.vue?vue&type=style&index=0&id=ae1aadcc&prod&lang=scss&scoped=true\""],"sourceRoot":""}