{"version":3,"mappings":"qgCAIA,MAAMA,EAAeC,EAAqB,IAAMC,EAAA,WAAO,4BAAuC,EAAC,2FACzFC,EAAYF,EAAqB,IAAKC,EAAA,IAAC,OAAO,yBAA4B,EAAC,wFAE3EE,EAAQC,EAoCRC,EAAgBC,EAAMH,EAAO,SAAS,EAEtCI,EAAOC,EAGPC,EAAUC,GAAIC,EAAAR,EAAM,UAAN,YAAAQ,EAAe,IAAKC,GAChC,OAAO,OAAO,CACpB,GAAIA,EAAO,GACX,KAAMA,EAAO,KACb,WAAYA,EAAO,UACnB,EAAEA,CAAM,EACR,EAEET,EAAM,WAAa,WACtBM,EAAQ,OAAQI,EAAAV,EAAM,UAAN,YAAAU,EAAe,IAAKD,IAC5B,CACN,KAAMA,EAAO,KACb,MAAOA,EAAO,MACd,MAAOA,EAAO,aACd,KAIH,MAAME,EAAkBJ,EAAI,EAAE,EACxBK,EAAUL,EAAI,EAAE,EAChBM,EAAON,EAAI,EAAK,EAEhBO,EAAe,IAAM,CAC1BH,EAAgB,MAAQ,CAAE,EAC1B,QAAQ,IAAI,mBAAoBA,EAAgB,KAAK,EACrDI,EAAa,CACd,EAEMC,EAAgB,IAAM,CACvBhB,EAAM,OAAS,aAClBa,EAAK,MAAQ,CAACA,EAAK,MAErB,EAEA,SAASI,EAAUR,EAAQ,CACtBS,EAAiBT,CAAM,GAC1B,QAAQ,IAAI,kBAAmBA,CAAM,EACrCE,EAAgB,MAAQA,EAAgB,MAAM,OAAQQ,GAASA,EAAK,QAAUV,EAAO,KAAK,IAE1F,QAAQ,IAAI,gBAAiBA,CAAM,EACnCE,EAAgB,MAAM,KAAKF,CAAM,EAEnC,CAEA,SAASW,EAAaX,EAAQ,CAC7B,QAAQ,IAAI,0BAA2B,CAACA,CAAM,CAAC,EAC/CE,EAAgB,MAAQ,CAACF,CAAM,EAE/B,QAAQ,IAAI,sCAAsC,EAClDM,EAAa,CACd,CAEA,MAAMA,EAAc,IAAM,CACrBF,EAAK,QAAU,KAClBT,EAAK,eAAgBJ,EAAM,WAAYW,EAAgB,MAAOX,EAAM,cAAc,EAClFa,EAAK,MAAQ,GAEf,EAEMK,EAAoBT,GAClBE,EAAgB,MAAM,IAAI,GAAK,EAAE,KAAK,EAAE,SAASF,EAAO,KAAK,EAGrE,SAASY,EAAeC,EAAO,CACzBT,EAAK,OAENS,EAAM,MAAQ,WACjBT,EAAK,MAAQ,GAEf,CAEA,SAASU,GAAU,CAClB,OAAIvB,EAAM,OAAS,QACX,CAAC,MAAO,4BAA4B,EAEtCa,EAAK,MACH,CAAC,MAAO,UAAU,EADD,CAAC,MAAO,YAAY,CAG9C,CAEA,OAAAW,EAAU,IAAM,OACf,OAAO,iBAAiB,UAAWH,CAAc,IAC7Cb,EAAAR,EAAM,qBAAN,YAAAQ,EAA0B,QAAS,IACtC,QAAQ,IAAI,sBAAuBR,EAAM,kBAAkB,EAC3DW,EAAgB,MAAQX,EAAM,mBAEhC,CAAC,EAEDyB,EAAM,IAAMvB,EAAewB,GAAc,OAEpC1B,EAAM,WAAa,WACtBM,EAAQ,OAAQE,EAAAkB,EAAW,QAAX,YAAAlB,EAAkB,IAAKC,GAC/B,OAAO,OAAO,CACpB,KAAMA,EAAO,KACb,MAAOA,EAAO,MACd,MAAOA,EAAO,cACd,SAAUA,EAAO,QACrB,CAAI,GAGFE,EAAgB,MAAQL,EAAQ,MAAM,OAAOqB,GAAKA,EAAE,QAAQ,EAG9D,EAAE,CACD,KAAK,EACN,CAAC","names":["RenderAction","defineAsyncComponent","__vitePreload","ShowModal","props","__props","facetOptions","toRef","emit","__emit","options","ref","_a","option","_b","selectedOptions","listbox","open","resetOptions","saveOptions","toggleOptions","addOption","isOptionSelected","item","selectOption","keydownHandler","event","setIcon","onMounted","watch","newOptions","o"],"sources":["../../src/components/ui/form/SelectElement.vue"],"sourcesContent":["<script setup>\r\nimport {defineAsyncComponent, ref, onMounted, watch, toRef} from 'vue'\r\nimport {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'\r\nimport { getTranslation } from '@/ts/utilities.ts'\r\nconst RenderAction = defineAsyncComponent(() => import('@/components/helpers/RenderAction.vue'))\r\nconst ShowModal = defineAsyncComponent(() => import('@/components/ShowModal.vue'))\r\n\r\nconst props = defineProps({\r\n\tdataType: {\r\n\t\ttype: String,\r\n\t},\r\n\tqueryParameter: {\r\n\t\ttype: String,\r\n\t},\r\n\toptions: {\r\n\t\ttype: Array,\r\n\t},\r\n\tpreSelectedOptions: {\r\n\t\ttype: Array,\r\n\t},\r\n\tdefault: {\r\n\t\ttype: Object,\r\n\t},\r\n\tfilterType: {\r\n\t\ttype: String,\r\n\t},\r\n\tmultiple: {\r\n\t\ttype: Boolean,\r\n\t\tdefault: false\r\n\t},\r\n\ttype: {\r\n\t\ttype: String,\r\n\t\tdefault: 'dropdown'\r\n\t},\r\n\tinfobox: {\r\n\t\ttype: Object\r\n\t},\r\n\tlabel: {\r\n\t\ttype: String,\r\n\t\tdefault: 'Label'\r\n\t}\r\n})\r\n\r\nconst facetOptions =  toRef(props, 'options')\r\n\r\nconst emit = defineEmits(['updateFilter'])\r\n\r\n// Rewrite the incoming data from options, so it fits the SelectElement component\r\nconst options = ref(props.options?.map((option) => {\r\n\treturn Object.assign({\r\n\t\tid: option.id,\r\n\t\tname: option.name,\r\n\t\tthumbColor: option.thumbColor\r\n\t}, option)\r\n}))\r\n\r\nif (props.dataType === 'facets') {\r\n\toptions.value = props.options?.map((option) => {\r\n\t\treturn {\r\n\t\t\tname: option.name,\r\n\t\t\tvalue: option.value,\r\n\t\t\tcount: option.productsCount,\r\n\t\t}\r\n\t})\r\n}\r\n\r\nconst selectedOptions = ref([])\r\nconst listbox = ref('')\r\nconst open = ref(false)\r\n\r\nconst resetOptions = () => {\r\n\tselectedOptions.value = []\r\n\tconsole.log('resetted options', selectedOptions.value)\r\n\tsaveOptions()\r\n}\r\n\r\nconst toggleOptions = () => {\r\n\tif (props.type === 'dropdown') {\r\n\t\topen.value = !open.value\r\n\t}\r\n}\r\n\r\nfunction addOption(option) {\r\n\tif (isOptionSelected(option)) {\r\n\t\tconsole.log('removing option', option)\r\n\t\tselectedOptions.value = selectedOptions.value.filter((item) => item.value !== option.value)\r\n\t} else {\r\n\t\tconsole.log('adding option', option)\r\n\t\tselectedOptions.value.push(option)\r\n\t}\r\n}\r\n\r\nfunction selectOption(option) {\r\n\tconsole.log('setting a single option', [option])\r\n\tselectedOptions.value = [option]\r\n\r\n\tconsole.log('selected a single option, now saving')\r\n\tsaveOptions()\r\n}\r\n\r\nconst saveOptions = () => {\r\n\tif (open.value === true) {\r\n\t\temit('updateFilter', props.filterType, selectedOptions.value, props.queryParameter)\r\n\t\topen.value = false\r\n\t}\r\n}\r\n\r\nconst isOptionSelected = (option) =>{\r\n\treturn selectedOptions.value.map(o => o.value).includes(option.value)\r\n}\r\n\r\nfunction keydownHandler(event) {\r\n\tif (!open.value) return\r\n\r\n\tif (event.key === 'Escape') {\r\n\t\topen.value = false\r\n\t}\r\n}\r\n\r\nfunction setIcon() {\r\n\tif (props.type === 'modal') {\r\n\t\treturn ['fal', 'arrow-up-right-from-square']\r\n\t} else {\r\n\t\tif (!open.value) return ['fal', 'arrow-down']\r\n\t\treturn ['fal', 'arrow-up']\r\n\t}\r\n}\r\n\r\nonMounted(() => {\r\n\twindow.addEventListener('keydown', keydownHandler)\r\n\tif (props.preSelectedOptions?.length > 0) {\r\n\t\tconsole.log('preselected options', props.preSelectedOptions)\r\n\t\tselectedOptions.value = props.preSelectedOptions\r\n\t}\r\n})\r\n\r\nwatch(() => facetOptions, (newOptions) =>{\r\n\t//Update options to match new available facet-options and count\r\n\tif (props.dataType === 'facets') {\r\n\t\toptions.value = newOptions.value?.map((option) => {\r\n\t\t\treturn Object.assign({\r\n\t\t\t\tname: option.name,\r\n\t\t\t\tvalue: option.value,\r\n\t\t\t\tcount: option.productsCount,\r\n\t\t\t\tselected: option.selected\r\n\t\t\t})\r\n\t\t})\r\n\t\t//console.log(options.value.filter(o => o.selected))\r\n\t\tselectedOptions.value = options.value.filter(o => o.selected)\r\n\t\t//console.log('watch', newOptions)\r\n\t}\r\n},{\r\n\tdeep:true\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"flex flex-col gap-2 min-w-60\">\r\n\t\t<!-- Set a unique listbox ID, based on Vue component -->\r\n\t\t<div class=\"flex items-center justify-between\">\r\n\t\t\t<label class=\"font-bold text-sm\"\r\n\t\t\t\t   :for=\"'listbox'\"\r\n\t\t\t>\r\n\t\t\t\t{{ props.label }}\r\n\t\t\t</label>\r\n\t\t\t<ShowModal\r\n\t\t\t\tv-if=\"infobox\"\r\n\t\t\t\t:modal-title=\"props.infobox.heading\"\r\n\t\t\t\t:modal-content=\"props.infobox.content\"\r\n\t\t\t\t:button-options=\"{ action: 'button', theme: 'faded', size: 'sm' }\"\r\n\t\t\t>\r\n\t\t\t\t<font-awesome-icon :icon=\"['fas', 'info-circle']\" />\r\n\t\t\t\t{{ getTranslation('Info') }}\r\n\t\t\t</ShowModal>\r\n\t\t</div>\r\n\r\n\t\t<div class=\"relative\"\r\n\t\t\t ref=\"listbox\"\r\n\t\t\t v-click-outside=\"saveOptions\"\r\n\t\t>\r\n\t\t\t<!-- TODO: Maybe make this a specific SelectBoxButton component -->\r\n\t\t\t<button type=\"button\"\r\n\t\t\t\t\t:aria-label=\"props.label\"\r\n\t\t\t\t\tclass=\"relative w-full text-left border-2 bg-grey-light border-grey text-black outline-none hover:border-grey-dark focus:border-grey-dark pl-4 pr-10 py-2 line-clamp-1\"\r\n\t\t\t\t\t:class=\"open ? 'rounded-t-sm' : 'rounded-sm'\"\r\n\t\t\t\t\t@click=\"toggleOptions()\"\r\n\t\t\t>\r\n\t\t\t\t<template v-if=\"selectedOptions.length > 0\" v-for=\"(option, index) in selectedOptions\" :key=\"index\">\r\n\t\t\t\t\t<span v-if=\"option\"\r\n\t\t\t\t\t\t  class=\"mr-1 [&:not(:last-of-type)]:after:content-[',']\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t</span>\r\n\t\t\t\t</template>\r\n\t\t\t\t<template v-else>\r\n\t\t\t\t\t<slot></slot>\r\n\t\t\t\t</template>\r\n\r\n\t\t\t\t<font-awesome-icon\r\n\t\t\t\t\t:icon=\"setIcon()\"\r\n\t\t\t\t\taria-hidden=\"true\"\r\n\t\t\t\t\tclass=\"pointer-events-none absolute inset-y-3 right-4 flex items-center\"\r\n\t\t\t\t/>\r\n\t\t\t</button>\r\n\t\t\t<div class=\"absolute z-30 w-full rounded-b-sm\"\r\n\t\t\t\t :class=\"{ 'hidden': !open }\"\r\n\t\t\t>\r\n\t\t\t\t<ul v-if=\"options && options.length > 0\"\r\n\t\t\t\t\tclass=\"max-h-60 overflow-auto list-none bg-white border-x-2 border-grey text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm\"\r\n\t\t\t\t\t:class=\"props.multiple ? '' : 'border-b-2'\"\r\n\t\t\t\t\ttabindex=\"-1\"\r\n\t\t\t\t\taria-labelledby=\"listbox-label\"\r\n\t\t\t\t\t:aria-activedescendant=\"'list-box-'\"\r\n\t\t\t\t\trole=\"listbox\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<template v-for=\"(option, index) in options\" :key=\"index\">\r\n\t\t\t\t\t\t<li\r\n\t\t\t\t\t\t\tclass=\"text-black relative cursor-default select-none py-3 px-3 hover:bg-grey\"\r\n\t\t\t\t\t\t\tv-if=\"option\"\r\n\t\t\t\t\t\t\t:id=\"'listbox-option-' + option.id\"\r\n\t\t\t\t\t\t\t:class=\"{ 'bg-grey': isOptionSelected(option) }\"\r\n\t\t\t\t\t\t\trole=\"option\"\r\n\t\t\t\t\t\t\t@click=\"props.multiple ? addOption(option) : selectOption(option)\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span class=\"flex items-center gap-3\">\r\n\t\t\t\t\t\t\t\t<input type=\"checkbox\"\r\n\t\t\t\t\t\t\t\t   v-if=\"props.multiple\"\r\n\t\t\t\t\t\t\t\t   class=\"appearance-none peer relative h-5 w-5 shrink-0 rounded-full border-2 border-grey-light focus:ring-2 focus:ring-offset-2 ring-grey-dark\"\r\n\t\t\t\t\t\t\t\t   :class=\"{ 'checked:bg-primary checked:border-primary rounded-sm': !option.thumbColor }\"\r\n\t\t\t\t\t\t\t\t   :style=\"{ backgroundColor: option.thumbColor, borderColor: option.thumbColor }\"\r\n\t\t\t\t\t\t\t\t   :checked=\"isOptionSelected(option)\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<font-awesome-icon\r\n\t\t\t\t\t\t\t\t\t:icon=\"['fal', 'check']\"\r\n\t\t\t\t\t\t\t\t\tclass=\"text-white absolute h-3 w-3 left-4 hidden peer-checked:block\"\r\n\t\t\t\t\t\t\t\t/>\r\n\r\n\t\t\t\t\t\t\t\t<span class=\"flex justify-between w-full truncate\">\r\n\t\t\t\t\t\t\t\t\t{{ option.name }}\r\n\t\t\t\t\t\t\t\t\t<span v-if=\"option.count\">({{ option.count }})</span>\r\n\t\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t</li>\r\n\t\t\t\t\t</template>\r\n\t\t\t\t</ul>\r\n\t\t\t\t<div v-if=\"type === 'dropdown' && props.multiple\"\r\n\t\t\t\t\t class=\"w-full p-2 bg-white rounded-b-sm border-2 border-b-2 border-grey flex justify-center gap-2\">\r\n\t\t\t\t\t<!-- TODO: Add translation -->\r\n\t\t\t\t\t<RenderAction\r\n\t\t\t\t\t\taction=\"button\"\r\n\t\t\t\t\t\ttheme=\"outline\"\r\n\t\t\t\t\t\tsize=\"sm\"\r\n\t\t\t\t\t\t:disabled=\"selectedOptions.length === 0\"\r\n\t\t\t\t\t\t@click=\"resetOptions()\">\r\n\t\t\t\t\t\tNulstil\r\n\t\t\t\t\t</RenderAction>\r\n\t\t\t\t\t<!-- TODO: Add translation -->\r\n\t\t\t\t\t<RenderAction\r\n\t\t\t\t\t\taction=\"button\"\r\n\t\t\t\t\t\ttheme=\"primary\"\r\n\t\t\t\t\t\tsize=\"sm\"\r\n\t\t\t\t\t\t@click=\"saveOptions()\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\tGem valg\r\n\t\t\t\t\t</RenderAction>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n"],"file":"assets/SelectElement-2178c3f2.js"}