{"version":3,"mappings":"soBAIA,MAAMA,EAAQC,EAAqB,IAAMC,EAAA,WAAO,qBAAgC,oFAAC,EAC3EC,EAAeF,EAAqB,IAAMC,EAAA,WAAO,4BAAuC,2FAAC,EAEzFE,EAAQC,EACRC,EAAOC,EAEPC,EAAiBC,EAAI,IAAI,EACzBC,EAAuBD,EAAI,EAAE,EAE7BE,EAAe,CAACC,EAAOC,IAAU,CACnCD,EAAM,OAAO,QACMF,EAAA,MAAM,KAAKG,CAAM,EAEtCH,EAAqB,MAAQA,EAAqB,MAAM,OAASI,GAAcA,IAAMD,CAAO,CAC7F,EAGKE,EAAoBF,GAClBH,EAAqB,MAAM,SAASG,CAAM,EAI5CG,EAAY,IAAK,CACnBR,EAAe,MACSS,KAE1BX,EAAK,cAAc,EACnBA,EAAK,OAAO,EACb,EAEKW,EAA4B,IAAK,CACtCP,EAAqB,MAAQ,EAAC,EAGzBQ,EAAc,IAAK,CACxBV,EAAe,MAAQ,MAGlBW,EAAoB,IAAK,CAC9Bb,EAAK,eAAgB,SAAUI,EAAqB,MAAOF,EAAe,MAAM,aAAa,GAGxFY,EAA4B,IAAK,CACpBD,IACND,IACcD,IAC1BX,EAAK,OAAO,GAGPe,EAAmBC,GAAS,CACjCd,EAAe,MAAQc,EACFZ,EAAA,MAAQ,CAAC,GAAGF,EAAe,MAAM,aAAa,OAAOe,GAAMA,EAAG,QAAQ,CAAC,GAGvFC,EAAe,IAAK,CACPL,IACND,IACcD,GAAA","names":["Modal","defineAsyncComponent","__vitePreload","RenderAction","props","__props","emit","__emit","selectedFilter","ref","selectedOptionsModel","selectOption","event","option","o","isOptionSelected","resetView","resetCurrentFilterOptions","resetFilter","updateProductList","updateProductListAndClose","navigateForward","facet","fo","navigateBack"],"sources":["../../src/components/Files/Templates/Designs/Mobler/src/components/FiltersModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {defineAsyncComponent, ref} from 'vue'\r\nimport {getTranslation} from '../ts/utilities.ts'\r\nimport {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'\r\nconst Modal = defineAsyncComponent(() => import('@/components/helpers/Modal.vue'))\r\nconst RenderAction = defineAsyncComponent(() => import('@/components/helpers/RenderAction.vue'))\r\n\r\nconst props = defineProps(['show', 'facets'])\r\nconst emit = defineEmits(['close', 'updateFilter', 'resetFilters'])\r\n\r\nconst selectedFilter = ref(null)\r\nconst selectedOptionsModel = ref([])\r\n\r\nconst selectOption = (event, option) =>{\r\n\tif(event.target.checked){\r\n\t\tselectedOptionsModel.value.push(option)\r\n\t} else{\r\n\t\tselectedOptionsModel.value = selectedOptionsModel.value.filter( (o) => {return o !== option})\r\n\t}\r\n}\r\n\r\nconst isOptionSelected = (option) =>{\r\n\treturn selectedOptionsModel.value.includes(option)\r\n\r\n}\r\n\r\nconst resetView = () =>{\r\n\tif(selectedFilter.value){\r\n\t\tresetCurrentFilterOptions()\r\n\t} else{\r\n\t\temit('resetFilters')\r\n\t\temit('close')\r\n\t}\r\n}\r\nconst resetCurrentFilterOptions = () =>{\r\n\tselectedOptionsModel.value = []\r\n}\r\n\r\nconst resetFilter = () =>{\r\n\tselectedFilter.value = null\r\n}\r\n\r\nconst updateProductList = () =>{\r\n\temit('updateFilter', 'facets', selectedOptionsModel.value, selectedFilter.value.parametername)\r\n}\r\n\r\nconst updateProductListAndClose = () =>{\r\n\tupdateProductList()\r\n\tresetFilter()\r\n\tresetCurrentFilterOptions()\r\n\temit('close')\r\n}\r\n\r\nconst navigateForward = (facet) =>{\r\n\tselectedFilter.value = facet\r\n\tselectedOptionsModel.value = [...selectedFilter.value.facetOptions.filter(fo => fo.selected)]\r\n}\r\n\r\nconst navigateBack = () =>{\r\n\tupdateProductList()\r\n\tresetFilter()\r\n\tresetCurrentFilterOptions()\r\n}\r\n\r\n</script>\r\n\r\n<template>\r\n\t<Modal class=\"overflow-auto\"\r\n\t\t   :show=\"props.show\"\r\n\t\t   type=\"full\"\r\n\t\t   @close=\"emit('close')\"\r\n\t\t>\r\n\t\t<template #modal-title>\r\n\t\t\t<div class=\"flex justify-between\">\r\n\t\t\t\t<span class=\"cursor-pointer font-normal flex items-center gap-2\" v-if=\"selectedFilter\" v-on:click=\"navigateBack\"><font-awesome-icon :icon=\"['fas', 'arrow-left']\"/> Tilbage</span>\r\n\t\t\t\t<span v-if=\"!selectedFilter\">{{ getTranslation('Products.Filters.Header') }}</span>\r\n\t\t\t</div>\r\n\t\t</template>\r\n\t\t<template #content>\r\n\t\t\t<div class=\"d-flex w-full\" v-if=\"selectedFilter\">\r\n\t\t\t\t<h4 class=\"mb-2\">{{selectedFilter.name}}</h4>\r\n\t\t\t\t<ul class=\"list-none border-t border-grey-light\">\r\n\t\t\t\t\t<li class=\"flex justify-between items-center border-b border-grey-light p-2 \" v-for=\"option in selectedFilter.facetOptions\" :key=\"option.$id\">\r\n\t\t\t\t\t\t<label class=\"flex items-center gap-2 cursor-pointer w-full\">\r\n\t\t\t\t\t\t\t<input type=\"checkbox\" :checked=\"isOptionSelected(option)\" v-on:change=\"selectOption($event, option)\">\r\n\t\t\t\t\t\t\t{{option.name}}\r\n\t\t\t\t\t\t</label>\r\n\r\n\t\t\t\t\t\t<span>({{option.productsCount}})</span>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t</ul>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"d-flex w-full\" v-else>\r\n\t\t\t\t<ul class=\"list-none border-t border-grey-light\">\r\n\t\t\t\t\t<li class=\"flex justify-between items-center gap-2 border-b border-grey-light p-2 cursor-pointer\" v-for=\"facet in props.facets\" v-on:click=\"navigateForward(facet)\" :key=\"facet.$id\">\r\n\t\t\t\t\t\t<div class=\"basis-1/2\">{{ facet.name }}</div>\r\n\t\t\t\t\t\t<small class=\"ml-auto grow-0 truncate\">{{ facet.facetOptions.filter(fo => fo.selected).map(fo => fo.name).join(', ') }}</small>\r\n\t\t\t\t\t\t<font-awesome-icon :icon=\"['fas', 'arrow-right']\"/>\r\n\t\t\t\t\t</li>\r\n\t\t\t\t</ul>\r\n\t\t\t</div>\r\n\t\t</template>\r\n\t\t<template #footer>\r\n\t\t\t<RenderAction\r\n\t\t\t\taction=\"button\"\r\n\t\t\t\ttheme=\"primary\"\r\n\t\t\t\tclass=\"col-span-2\"\r\n\t\t\t\t@click=\"updateProductListAndClose\">\r\n\t\t\t\t{{ getTranslation('Products.Filters.Select') }}\r\n\t\t\t</RenderAction>\r\n\t\t\t<RenderAction\r\n\t\t\t\taction=\"button\"\r\n\t\t\t\ttheme=\"secondary\"\r\n\t\t\t\t@click=\"resetView\">\r\n\t\t\t\t{{ getTranslation('Products.Filters.Reset') }}\r\n\t\t\t</RenderAction>\r\n\t\t</template>\r\n\t</Modal>\r\n</template>\r\n"],"file":"assets/FiltersModal-a6a5e546.js"}