{"version":3,"file":"Pf9S_OTt.js","sources":["../../../../src/components/form/select/multiselect.vue"],"sourcesContent":["<template>\n  <div :id=\"id\" class=\"multiselect-custom\">\n    <label v-if=\"label.length\" class=\"font-bold\" for=\"\">\n      {{ label }}\n    </label>\n    <p v-if=\"sublabel.length\" class=\"text-[14px]\">\n      {{ sublabel }}\n    </p>\n    <VueMultiselect\n      v-model=\"modelValue\"\n      :options=\"Array.from(options)\"\n      :placeholder=\"placeholder\"\n      label=\"label\"\n      track-by=\"value\"\n      :disabled=\"disabled\"\n      :loading=\"isLoading\"\n      :searchable=\"searchable\"\n      :max-height=\"179\"\n      :select-label=\"t('multiselect.selectLabel')\"\n      :selected-label=\"t('multiselect.selectedLabel')\"\n      :deselect-label=\"t('multiselect.deselectLabel')\"\n      @search-change=\"handleSearchChanged\"\n      @select=\"handleValueChanged\"\n      @remove=\"handleRemovedOption\"\n    >\n      <template #option=\"optionProps\">\n        <span v-if=\"optionProps.option.value !== tmpCustomOptionIdentifier\">\n          {{ optionProps.option.label }}\n        </span>\n        <span v-if=\"optionProps.option.value === tmpCustomOptionIdentifier\">\n          <FaIcon icon-class=\"fal fa-plus-circle\" /> \"{{\n            optionProps.option.label\n          }}\"\n          {{ t('multiselect.customAdd') }}\n        </span>\n      </template>\n      <template #caret=\"{ toggle }\">\n        <div>\n          <div class=\"multiselect__select\" @mousedown.prevent.stop=\"toggle\">\n            <FaIcon\n              classes=\"!w-[28px] !h-[28px]\"\n              icon-class=\"fal fa-angle-down\"\n            />\n          </div>\n        </div>\n      </template>\n    </VueMultiselect>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport VueMultiselect from 'vue-multiselect';\nimport type { OptionType } from '@/helpers/disturbanceForm';\nimport FaIcon from '@/components/fa-icon.vue';\n\nconst props = defineProps({\n  initialOptions: {\n    type: Array as PropType<OptionType[]>,\n    required: true,\n    default: () => [],\n  },\n  value: {\n    type: [Object, null] as PropType<OptionType>,\n    required: true,\n    default: {} as OptionType,\n  },\n  id: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  label: {\n    type: String,\n    required: false,\n    default: '',\n  },\n  placeholder: {\n    type: String,\n    required: false,\n    default: 'Bitte auswählen',\n  },\n  isLoading: {\n    type: Boolean,\n    required: true,\n    default: false,\n  },\n  isExtendable: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  disabled: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n  searchable: {\n    type: Boolean,\n    required: false,\n    default: true,\n  },\n  sublabel: {\n    type: String,\n    required: false,\n    default: '',\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'onValueChanged', value: OptionType): void;\n}>();\n\nconst { t } = useTrans();\nconst tmpCustomOptionIdentifier = 'tmpCustomOption';\nconst customOptionIdentifier = 'customOption';\nconst options = computed(() => props.initialOptions);\nconst modelValue = computed({\n  get() {\n    return props.value;\n  },\n  set() {\n    // Tmp setter\n  },\n});\n\nfunction handleSearchChanged(searchQuery: string) {\n  if (!props.isExtendable) {\n    return;\n  }\n\n  const tmpCustomOption = options.value.filter(\n    (o) => o.value === tmpCustomOptionIdentifier,\n  );\n\n  // If all chars are removed from search, we have to remove custom answer from options\n  if (!searchQuery.length) {\n    if (tmpCustomOption.length) {\n      options.value.filter(removeTmpCustomIdentifier);\n    }\n    return;\n  }\n\n  const optionWithValueAlreadyExists =\n    options.value.filter(\n      (o) => o.label.toLowerCase() === searchQuery.toLowerCase(),\n    ).length > 0;\n\n  if (optionWithValueAlreadyExists) {\n    return;\n  }\n\n  if (!tmpCustomOption.length) {\n    options.value.push({ label: '', value: tmpCustomOptionIdentifier });\n  }\n\n  options.value.map((o) => {\n    if (o.value === tmpCustomOptionIdentifier) {\n      o.label = searchQuery;\n    }\n  });\n}\n\nfunction handleValueChanged(selectedOption: OptionType) {\n  emit('onValueChanged', selectedOption);\n\n  if (!props.isExtendable) {\n    return;\n  }\n\n  if (selectedOption.value === tmpCustomOptionIdentifier) {\n    options.value.filter(removeCustomIdentifier);\n    options.value.map((o) => {\n      if (o.value === tmpCustomOptionIdentifier) {\n        o.value = customOptionIdentifier;\n        return o;\n      }\n    });\n  }\n\n  options.value.filter(removeTmpCustomIdentifier);\n}\n\nfunction removeTmpCustomIdentifier(\n  object: OptionType,\n  index: number,\n  arr: OptionType[],\n) {\n  if (object.value === tmpCustomOptionIdentifier) {\n    arr.splice(index, 1);\n    return true;\n  }\n\n  return false;\n}\n\nfunction removeCustomIdentifier(\n  object: OptionType,\n  index: number,\n  arr: OptionType[],\n) {\n  if (object.value === customOptionIdentifier) {\n    arr.splice(index, 1);\n    return true;\n  }\n\n  return false;\n}\n\nfunction handleRemovedOption() {\n  emit('onValueChanged', null);\n}\n</script>\n<style lang=\"postcss\" scoped>\n.multiselect-custom :deep(.multiselect) {\n  min-height: 36px;\n}\n\n.multiselect-custom :deep(.multiselect__tags) {\n  border-radius: 0;\n  min-height: 36px;\n  height: 36px;\n  padding-top: 0;\n}\n\n.multiselect-custom :deep(.multiselect__input) {\n  padding-top: 1px;\n  height: 32px;\n}\n\n.multiselect-custom :deep(.multiselect__placeholder) {\n  padding-top: 7px;\n}\n\n.multiselect-custom :deep(.multiselect__single) {\n  padding-top: 7px;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n}\n\n.multiselect-custom :deep(.multiselect__option--highlight) {\n  color: var(--thm-text-dark);\n  background: var(--thm-primary-lighter);\n}\n.multiselect-custom :deep(.multiselect__option--highlight:after) {\n  color: var(--thm-text-base);\n  background: var(--thm-primary-lighter);\n}\n\n:deep(.multiselect__option--selected) {\n  color: var(--thm-white-base);\n  background: var(--thm-primary-base);\n}\n:deep(.multiselect__option--selected:after) {\n  color: var(--thm-white-base);\n  background: var(--thm-primary-base);\n}\n\n:deep(\n    li.multiselect__element:hover\n      .multiselect__option--highlight.multiselect__option--selected\n  ) {\n  color: var(--thm-white-base);\n  background: var(--thm-status-danger-base);\n}\n:deep(\n    li.multiselect__element:hover\n      .multiselect__option--highlight.multiselect__option--selected:after\n  ) {\n  color: var(--thm-white-base);\n  background: var(--thm-status-danger-base);\n}\n\n.multiselect-custom :deep(.multiselect__spinner) {\n  height: 34px;\n}\n\n.multiselect-custom :deep(.multiselect__spinner:before) {\n  border-color: #346e73 transparent transparent;\n}\n\n.multiselect-custom :deep(.multiselect__spinner:after) {\n  border-color: #346e73 transparent transparent;\n}\n\n.multiselect-custom :deep(.multiselect__select:before) {\n  content: none;\n}\n\n.multiselect-custom :deep(.multiselect__select:after) {\n  content: none;\n}\n\n.multiselect--disabled :deep(.multiselect__select) {\n  background: unset;\n}\n\n.multiselect-custom :deep(.multiselect__content-wrapper) {\n  max-height: 365px !important;\n}\n</style>\n<style src=\"vue-multiselect/dist/vue-multiselect.css\"></style>\n"],"names":["tmpCustomOptionIdentifier","customOptionIdentifier","props","__props","emit","__emit","t","useTrans","options","computed","modelValue","handleSearchChanged","searchQuery","tmpCustomOption","removeTmpCustomIdentifier","handleValueChanged","selectedOption","removeCustomIdentifier","o","object","index","arr","handleRemovedOption"],"mappings":"sXAiHMA,EAA4B,kBAC5BC,EAAyB,ykBA3D/B,MAAMC,EAAQC,EAqDRC,EAAOC,EAIP,CAAE,EAAAC,GAAMC,IAGRC,EAAUC,EAAS,IAAMP,EAAM,cAAc,EAC7CQ,EAAaD,EAAS,CAC1B,KAAM,CACJ,OAAOP,EAAM,KACf,EACA,KAAM,CAEN,CAAA,CACD,EAED,SAASS,EAAoBC,EAAqB,CAC5C,GAAA,CAACV,EAAM,aACT,OAGI,MAAAW,EAAkBL,EAAQ,MAAM,OACnC,GAAM,EAAE,QAAUR,CAAA,EAIjB,GAAA,CAACY,EAAY,OAAQ,CACnBC,EAAgB,QACVL,EAAA,MAAM,OAAOM,CAAyB,EAEhD,MACF,CAGEN,EAAQ,MAAM,OACX,GAAM,EAAE,MAAM,YAAY,IAAMI,EAAY,YAAY,CAAA,EACzD,OAAS,IAMRC,EAAgB,QACnBL,EAAQ,MAAM,KAAK,CAAE,MAAO,GAAI,MAAOR,EAA2B,EAG5DQ,EAAA,MAAM,IAAK,GAAM,CACnB,EAAE,QAAUR,IACd,EAAE,MAAQY,EACZ,CACD,EACH,CAEA,SAASG,EAAmBC,EAA4B,CACtDZ,EAAK,iBAAkBY,CAAc,EAEhCd,EAAM,eAIPc,EAAe,QAAUhB,IACnBQ,EAAA,MAAM,OAAOS,CAAsB,EACnCT,EAAA,MAAM,IAAKU,GAAM,CACnB,GAAAA,EAAE,QAAUlB,EACd,OAAAkB,EAAE,MAAQjB,EACHiB,CACT,CACD,GAGKV,EAAA,MAAM,OAAOM,CAAyB,EAChD,CAES,SAAAA,EACPK,EACAC,EACAC,EACA,CACI,OAAAF,EAAO,QAAUnB,GACfqB,EAAA,OAAOD,EAAO,CAAC,EACZ,IAGF,EACT,CAES,SAAAH,EACPE,EACAC,EACAC,EACA,CACI,OAAAF,EAAO,QAAUlB,GACfoB,EAAA,OAAOD,EAAO,CAAC,EACZ,IAGF,EACT,CAEA,SAASE,GAAsB,CAC7BlB,EAAK,iBAAkB,IAAI,CAC7B"}