{"version":3,"file":"DDkpuTsW.js","sources":["../../../../src/components/multiSelectBox/multi-select-box.vue","../../../../src/components/components/advancedList/components/filters/tagFilter/tagFilter.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" class=\"relative col-span-12\">\n    <div\n      class=\"relative flex items-center justify-between bg-white border-2 cursor-pointer dropdown my-sm md:hidden\"\n      :class=\"isContentVisible ? 'open' : ''\"\n      @click=\"onToggleContent(!isContentVisible)\"\n    >\n      <span class=\"truncate mx-xs\">\n        {{ title.length ? title : t('multiSelectBox.selectionDefault') }}\n      </span>\n      <div\n        v-show=\"isContentVisible\"\n        class=\"relative border-l-2 pl-sm mr-xs text-bold\"\n      >\n        <FaIcon icon-class=\"fas fa-chevron-up\" classes=\"\" />\n      </div>\n      <div\n        v-show=\"!isContentVisible\"\n        class=\"relative border-l-2 pl-sm mr-xs text-bold\"\n      >\n        <FaIcon icon-class=\"fas fa-chevron-down\" />\n      </div>\n    </div>\n    <div\n      v-if=\"!isMobileScreen || isContentVisible\"\n      class=\"absolute z-20 flex flex-col-reverse w-full grid-cols-12 col-span-12 shadow-lg select-none md:grid bg-background-base pt-sm pl-sm pr-sm md:shadow-none md:relative rounded-alt-md\"\n    >\n      <div\n        class=\"flex flex-row flex-wrap w-full col-span-12 md:col-span-10 md:flex-row max-h-[370px] md:max-h-none overflow-auto mb-sm\"\n        :class=\"{\n          'md:col-span-12': !hasResetOption,\n        }\"\n      >\n        <div\n          v-for=\"option in options\"\n          :key=\"option.value\"\n          class=\"w-full text-center cursor-pointer entry px-sm py-2xs bg-activesection-alpha md:mr-sm mb-sm rounded-xs md:w-auto\"\n          :class=\"{\n            'bg-primary-base ease-in duration-300 text-white':\n              selectedItems[option.value] === true,\n            'inactive bg-btn-primary-base-opc50 ease-in duration-300 text-border-dark cursor-not-allowed':\n              !option.isAvailable,\n          }\"\n          @click=\"onToggleSelection(option)\"\n        >\n          <label class=\"text-sm\">\n            {{ option.label }}\n          </label>\n        </div>\n      </div>\n      <div\n        v-if=\"hasResetOption\"\n        class=\"flex items-center justify-between col-span-12 text-sm cursor-pointer md:col-span-2 md:border-l-2 text-primary-base mb-sm\"\n      >\n        <div class=\"md:ml-md mr-xs\" @click=\"resetSelection\">\n          <FaIcon icon-class=\"fas fa-arrow-rotate-left\" />\n          {{ t('multiSelectBox.selectionUndo') }}\n        </div>\n        <div class=\"md:hidden\" @click=\"onToggleContent(false)\">\n          <FaIcon\n            icon-class=\"fas fa-xmark\"\n            classes=\"md:ml-md mr-xs text-bold\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport FaIcon from '@/components/fa-icon.vue';\n\ntype MultiSelectItem = {\n  value: string;\n  label: string;\n  isAvailable: boolean;\n};\n\nconst { t } = useTrans();\n\nconst isMobileScreen = inject(mq_breakpointIsMobile);\n\nconst props = defineProps({\n  modelValue: {\n    type: Array<string>,\n    required: true,\n    default: [],\n  },\n  options: {\n    type: Array<MultiSelectItem>,\n    required: true,\n  },\n  hasResetOption: {\n    type: Boolean,\n    required: false,\n    default: () => true,\n  },\n});\n\nconst selectedItems = reactive<Record<string, boolean>>(\n  props.modelValue.reduce(\n    (acc, cur) => {\n      acc[cur] = true;\n      return acc;\n    },\n    {} as Record<string, boolean>,\n  ),\n);\nconst isContentVisible = ref(false);\n\nconst container = ref();\nonClickOutside(container, () => (isContentVisible.value = false));\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', values: string[]): void;\n}>();\n\nwatch(selectedItems, (v) =>\n  emit(\n    'update:modelValue',\n    Object.entries(v)\n      .filter((cur) => !!cur[1])\n      .map((cur) => cur[0]),\n  ),\n);\n\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    newValue.forEach((cur) => (selectedItems[cur] = true));\n\n    Object.keys(selectedItems).forEach((cur) => {\n      if (!newValue.includes(cur)) delete selectedItems[cur];\n    });\n  },\n);\n\nconst title = computed(() => {\n  return props.options\n    .filter(({ value }) => !!selectedItems[value])\n    .map(({ label }) => label)\n    .join(', ');\n});\n\nfunction onToggleContent(isVisible: boolean): void {\n  isContentVisible.value = isVisible;\n}\n\nfunction resetSelection() {\n  Object.keys(selectedItems).forEach((key) => delete selectedItems[key]);\n}\n\nfunction onToggleSelection(item: MultiSelectItem): void {\n  if (!item.isAvailable) return;\n  selectedItems[item.value] = !(selectedItems[item.value] ?? false);\n}\n</script>\n<style scoped lang=\"postcss\">\n.inactive > label {\n  @apply cursor-not-allowed;\n}\n\n.open::after {\n  content: '';\n  @apply absolute top-0 left-[-1pt] bottom-[-1pt] right-[-1pt] border-primary-base;\n  @apply border-b-4 !important;\n}\n\n.dropdown > * {\n  @apply py-2xs;\n}\n\n.entry > * {\n  @apply cursor-pointer;\n}\n</style>\n","<template>\n  <div v-if=\"tags.length\">\n    <div v-if=\"label\" class=\"text-sm font-bold py-xs md:py-sm\">\n      {{ t(label) }}\n    </div>\n\n    <MultiSelectBox\n      v-model=\"selectedTags\"\n      :options=\"tags\"\n      :has-reset-option=\"!label\"\n    />\n  </div>\n</template>\n<script setup lang=\"ts\">\nimport type { FilterOptions } from '@/components/components/advancedList/useAdvancedList';\nimport MultiSelectBox from '@/components/multiSelectBox/multi-select-box.vue';\n\nconst props = defineProps({\n  filterKey: {\n    type: String,\n    required: true,\n  },\n  label: {\n    type: String,\n    default: '',\n  },\n  filters: {\n    type: Object as PropType<Record<string, any>>,\n    required: true,\n    default: () => ({}) as Record<string, any>,\n  },\n  filterOptions: {\n    type: Object as PropType<FilterOptions>,\n    required: true,\n    default: () => ({}) as FilterOptions,\n  },\n});\n\nconst emits = defineEmits<{\n  (e: 'changeFilter', key: string, value: any): void;\n}>();\n\nconst { t } = useTrans();\n\nconst selectedTags = ref<string[]>(props.filters[props.filterKey] ?? []);\n\nconst tags = computed(() => {\n  return (\n    props.filterOptions[props.filterKey]?.values.map((cur) => ({\n      label: cur.label,\n      value: cur.id,\n      isAvailable: cur.isAvailable,\n    })) ?? []\n  );\n});\n\nwatch(selectedTags, (newValue) =>\n  emits('changeFilter', props.filterKey, newValue),\n);\n\nwatch(\n  () => props.filters[props.filterKey],\n  () => {\n    selectedTags.value = props.filters[props.filterKey] ?? [];\n  },\n);\n</script>\n"],"names":["t","useTrans","isMobileScreen","inject","mq_breakpointIsMobile","props","__props","selectedItems","reactive","acc","cur","isContentVisible","ref","container","onClickOutside","emit","__emit","watch","v","newValue","title","computed","value","label","onToggleContent","isVisible","resetSelection","key","onToggleSelection","item","emits","selectedTags","tags","_a"],"mappings":"q/BA8EM,KAAA,CAAE,EAAAA,GAAMC,IAERC,EAAiBC,EAAOC,CAAqB,EAE7CC,EAAQC,EAiBRC,EAAgBC,EACpBH,EAAM,WAAW,OACf,CAACI,EAAKC,KACJD,EAAIC,CAAG,EAAI,GACJD,GAET,CAAC,CACH,CAAA,EAEIE,EAAmBC,EAAI,EAAK,EAE5BC,EAAYD,IAClBE,EAAeD,EAAW,IAAOF,EAAiB,MAAQ,EAAM,EAEhE,MAAMI,EAAOC,EAIbC,EAAMV,EAAgBW,GACpBH,EACE,oBACA,OAAO,QAAQG,CAAC,EACb,OAAQR,GAAQ,CAAC,CAACA,EAAI,CAAC,CAAC,EACxB,IAAKA,GAAQA,EAAI,CAAC,CAAC,CACxB,CAAA,EAGFO,EACE,IAAMZ,EAAM,WACXc,GAAa,CACZA,EAAS,QAAST,GAASH,EAAcG,CAAG,EAAI,EAAK,EAErD,OAAO,KAAKH,CAAa,EAAE,QAASG,GAAQ,CACrCS,EAAS,SAAST,CAAG,GAAG,OAAOH,EAAcG,CAAG,CAAA,CACtD,CACH,CAAA,EAGI,MAAAU,EAAQC,EAAS,IACdhB,EAAM,QACV,OAAO,CAAC,CAAE,MAAAiB,CAAM,IAAM,CAAC,CAACf,EAAce,CAAK,CAAC,EAC5C,IAAI,CAAC,CAAE,MAAAC,KAAYA,CAAK,EACxB,KAAK,IAAI,CACb,EAED,SAASC,EAAgBC,EAA0B,CACjDd,EAAiB,MAAQc,CAC3B,CAEA,SAASC,GAAiB,CACjB,OAAA,KAAKnB,CAAa,EAAE,QAASoB,GAAQ,OAAOpB,EAAcoB,CAAG,CAAC,CACvE,CAEA,SAASC,EAAkBC,EAA6B,CACjDA,EAAK,cACVtB,EAAcsB,EAAK,KAAK,EAAI,EAAEtB,EAAcsB,EAAK,KAAK,GAAK,IAC7D,uxDC1IA,MAAMxB,EAAQC,EAqBRwB,EAAQd,EAIR,CAAE,EAAAhB,GAAMC,IAER8B,EAAenB,EAAcP,EAAM,QAAQA,EAAM,SAAS,GAAK,CAAA,CAAE,EAEjE2B,EAAOX,EAAS,IAAM,OAExB,QAAAY,EAAA5B,EAAM,cAAcA,EAAM,SAAS,IAAnC,YAAA4B,EAAsC,OAAO,IAAKvB,IAAS,CACzD,MAAOA,EAAI,MACX,MAAOA,EAAI,GACX,YAAaA,EAAI,WAAA,MACZ,CAAA,CAAC,CAEX,EAED,OAAAO,EAAMc,EAAeZ,GACnBW,EAAM,eAAgBzB,EAAM,UAAWc,CAAQ,CAAA,EAGjDF,EACE,IAAMZ,EAAM,QAAQA,EAAM,SAAS,EACnC,IAAM,CACJ0B,EAAa,MAAQ1B,EAAM,QAAQA,EAAM,SAAS,GAAK,EACzD,CAAA"}