{"version":3,"file":"FormSelectWithGroupsDropdown-DEDFnIgC.js","sources":["../../../app/javascript/shared/components/forms/FormSelectWithGroupsDropdown.vue"],"sourcesContent":["<template>\n  <VDropdown\n    :placement=\"placement\"\n    @apply-show=\"isFocusLoopActive = true\"\n    @apply-hide=\"isFocusLoopActive = false\"\n    popover-inner-class=\"\"\n  >\n    <FormInput\n      v-model=\"groupLabel\"\n      type=\"text\"\n      readonly\n      :placeholder=\"placeholder\"\n      :is-required=\"isRequired\"\n      :errors=\"errors\"\n      :is-error=\"isError\"\n    >\n      <template #label>\n        <slot name=\"label\" />\n      </template>\n    </FormInput>\n    <template #popper>\n      <div\n        class=\"tw-w-[250px] tw-overflow-hidden sm:tw-w-[300px] md:tw-w-[400px] lg:tw-w-[600px]\"\n      >\n        <FocusLoop\n          :is-active=\"isFocusLoopActive\"\n          :auto-focus=\"false\"\n          is-arrows-navigation-active\n        >\n          <FormSelectWithGroups\n            :model-value=\"modelValue\"\n            @update:model-value=\"emitUpdatedValue\"\n            :groups=\"groups\"\n            hide-tags\n          />\n        </FocusLoop>\n      </div>\n    </template>\n  </VDropdown>\n</template>\n\n<script setup>\nimport { computed, ref } from 'vue'\nimport FormSelectWithGroups from '@/shared/components/forms/FormSelectWithGroups.vue'\nimport FocusLoop from '@/shared/components/FocusLoop.vue'\nimport FormInput from '@/shared/components/forms/FormInput.vue'\n\nconst props = defineProps({\n  placement: {\n    type: String,\n    default: 'bottom-start',\n  },\n  groups: {\n    type: Array,\n    required: true,\n  },\n  modelValue: {\n    type: [Number, String],\n    default: '',\n  },\n  isError: {\n    type: Boolean,\n    default: false,\n  },\n  errors: {\n    type: [Array, String],\n    default: '',\n  },\n  placeholder: {\n    type: String,\n    default: '',\n  },\n  isRequired: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nconst emits = defineEmits(['update:modelValue'])\n\nconst isFocusLoopActive = ref(false)\n\nconst groupLabel = computed(() => {\n  return props.groups.reduce((foundLabel, currentGroup) => {\n    const foundOption = currentGroup.options.find(\n      (option) => option.value === props.modelValue,\n    )\n    if (foundOption) {\n      return foundOption.label\n    }\n    return foundLabel\n  }, '')\n})\n\nconst emitUpdatedValue = (value) => {\n  emits('update:modelValue', value)\n}\n</script>\n"],"names":["props","__props","emits","__emit","isFocusLoopActive","ref","groupLabel","computed","foundLabel","currentGroup","foundOption","option","emitUpdatedValue","value"],"mappings":"8kBA+CA,MAAMA,EAAQC,EA+BRC,EAAQC,EAERC,EAAoBC,EAAI,EAAK,EAE7BC,EAAaC,EAAS,IACnBP,EAAM,OAAO,OAAO,CAACQ,EAAYC,IAAiB,CACvD,MAAMC,EAAcD,EAAa,QAAQ,KACtCE,GAAWA,EAAO,QAAUX,EAAM,UACpC,EACD,OAAIU,EACKA,EAAY,MAEdF,CACR,EAAE,EAAE,CACN,EAEKI,EAAoBC,GAAU,CAClCX,EAAM,oBAAqBW,CAAK,CAClC"}