{"version":3,"file":"GenericSelect-VNCfdXjg.js","sources":["../../../app/frontend/components/genericComponents/GenericSelect.vue"],"sourcesContent":["<template lang=\"pug\">\n    .relative.w-full(v-clickoutside='close')\n      span(v-if='closable')\n        button.transition.duration-200.ease-out.relative.w-full.text-left.truncate(\n          ref='menu'\n          :class='[customClasses, disabledClass]'\n          :disabled='disabled'\n          @click=\"toggleDropdown()\"\n          @keydown.esc='close()'\n          @focus=\"$emit('focus')\"\n          @blur=\"$emit('blur')\"\n        ) {{ currentValue }}\n        span.pr-2.absolute.inset-y-0.right-0.flex.items-center.pointer-events-none\n          sw-icon.transform(name=\"arrow-down\" size='h-4 w-4' :class=\"[isOpen ? 'rotate-180' : 'rotate-0', arrowClasses]\")\n\n      div.absolute(\n        v-show='isOpen'\n        :ref='optionRef'\n        :class='dropdownClasses'\n        tabindex=\"-1\"\n        @keydown.down.prevent=\"highlightItem(highlightedIndex + 1)\"\n        @keydown.up.prevent=\"highlightItem(highlightedIndex - 1)\"\n        @keyup.enter=\"handleSelectFromEnter()\"\n      )\n        //- Query search input\n        slot(name='query-input' :close='close' :query='query', :handleQuery='handleQuery')\n          //- Default block if not overwritten in the parent (hidden on mobile)\n          .hidden(class='md:flex' v-if='filterable')\n            input.relative.m-2.p-2.w-full.appearance-none.border.border-gray-250.rounded-sm.text-xs(\n              :value='query'\n              @input='handleQuery($event.target.value)'\n              @keydown.esc='close()'\n            )\n\n        //- Block within the dropdown\n        ul.text-base.overflow-auto(\n          class=\"focus:outline-none\"\n          :class=\"dropdownContentClasses\"\n          tabindex=\"-1\"\n          ref='options'\n        )\n          li.cursor-pointer.select-none.relative(\n            v-for='(item, i) in filteredOptions'\n            :key='item.value'\n            :id='item.value'\n            @click=\"handleSelect(item.value)\"\n          )\n            slot.min-h-10.flex.items-center(:isSelectedItem='isSelectedItem' :item='item' :index='i' :isUniqueItem='isUniqueItem' :isHighlighted='isHighlighted')\n              //- Default block if not overwritten in the parent\n              span.block.font-semibold.pl-4(\n                class='px-4 py-2 bg-white rounded hover:bg-emerald-100'\n                :class=\"isHighlighted(i) ? 'bg-emerald-200' : ''\"\n              ) {{ item.label || item.value }}\n              span.absolute.inset-y-0.right-0.flex.items-center.pr-2(v-if='isSelectedItem(item.value)')\n                sw-icon(name='check' size='h-5 w-5')\n\n        .normal-case.p-4(v-show='!filteredOptions.length') {{ noResults }}\n</template>\n\n<script>\nimport { responsiveWatcher } from '../../mixins/responsiveWatcher';\nimport { createPopper } from '@popperjs/core';\nimport { EventBus } from '../../entrypoints/event-bus';\n\nexport default {\n  name: 'GenericSelect',\n  mixins: [responsiveWatcher],\n  props: {\n    options: {\n      type: [Array, Boolean],\n      required: true,\n    },\n    value: {\n      type: [String, Number],\n      default: null,\n    },\n    placeholder: {\n      type: String,\n      default: '',\n    },\n    customClasses: {\n      type: String,\n      default: '',\n    },\n    arrowClasses: {\n      type: String,\n      default: 'text-gray-600',\n    },\n    dropdownClasses: {\n      type: String,\n      default: 'bg-gray-100',\n    },\n    dropdownContentClasses: {\n      type: String,\n      default: 'max-h-screen-1/2 sm:max-h-screen-1/3 md:max-h-screen-1/2',\n    },\n    filterable: {\n      type: Boolean,\n      default: false,\n    },\n    dropdownOpen: {\n      type: Boolean,\n      default: false,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    optionRef: {\n      type: String,\n      default: 'optionRef',\n    },\n    placement: {\n      type: String,\n      default: 'bottom',\n      validator: (value) => [\n        'auto',\n        'auto-start',\n        'auto-end',\n        'top',\n        'top-start',\n        'top-end',\n        'bottom',\n        'bottom-start',\n        'bottom-end',\n        'right',\n        'right-start',\n        'right-end',\n        'left',\n        'left-start',\n        'left-end',\n       ].includes(value),\n    },\n    closable: {\n      type: Boolean,\n      default: true,\n    },\n  },\n  data () {\n    return {\n      query: '',\n      isOpen: false,\n      highlightedIndex: 0,\n    };\n  },\n  computed: {\n    currentValue () {\n      return this.currentLabel || this.value || this.placeholder;\n    },\n    currentLabel () {\n      return this.options?.find((item) => item.value === this.value)?.label;\n    },\n    filteredOptions () {\n      const query = this.query.toLowerCase();\n      return this.options.filter((option) => (option.label || option.value).toLowerCase().includes(query));\n    },\n    disabledClass () {\n      return this.disabled ? 'cursor-not-allowed text-opacity-40' : 'cursor-pointer';\n    },\n    noResults () {\n      return this.$t('shared.common._noResults') + ` - \"${this.query.toUpperCase()}\"`;\n    },\n    isUniqueItem () {\n      return this.filteredOptions.length === 1;\n    },\n    activeElement () {\n      return document.activeElement;\n    },\n  },\n  mounted () {\n    this.isOpen = this.dropdownOpen;\n    EventBus.$on('focus-on-option-element', (ref) => this.focusOnOptionElement(ref));\n  },\n  beforeDestroy () {\n    this.popper?.destroy();\n  },\n  methods: {\n    handleQuery (value) {\n      this.query = value;\n    },\n    isSelectedItem (value) {\n      return this.value === value;\n    },\n    toggleDropdown () {\n      this.query = '';\n      this.isOpen ? this.close() : this.open();\n    },\n    highlightItem (index) {\n      this.highlightedIndex = index;\n\n      if (this.highlightedIndex < 0) this.highlightedIndex = this.filteredOptions.length - 1;\n      if (this.highlightedIndex > this.filteredOptions.length - 1) this.highlightedIndex = 0;\n\n      this.$refs.options.children[this.highlightedIndex].scrollIntoView({ block: 'nearest' });\n    },\n    handleSelectFromEnter () {\n      if (this.filteredOptions.length === 0) return;\n\n      this.filteredOptions.length === 1 ?\n        this.handleSelect(this.filteredOptions[0].value) :\n        this.handleSelect(this.filteredOptions[this.highlightedIndex].value);\n\n      this.highlightedIndex = 0;\n    },\n    isHighlighted (index) {\n      return (this.isMobile || this.options.length < 4) ? false : index === this.highlightedIndex;\n    },\n    handleSelect (value) {\n      this.activeElement.blur();\n      this.$emit('input', value);\n      this.close();\n    },\n    open () {\n      this.isOpen = true;\n      this.focusOnOptionElement(this.optionRef);\n      this.$nextTick(() => {\n        this.setupPopper();\n      });\n    },\n    close () {\n      this.query = '';\n      if (!this.closable) return;\n\n      this.isOpen = false;\n    },\n    focusOnOptionElement (ref) {\n      // This condition will always return true in case focusOnOptionElement() is called on Select opening.\n      // This check is however useful when calling this function via the EventBus (e.g. for unclosable\n      // Selects: if there are more than 1 of them on the page, we want to only focus on the intended one.\n      if (ref !== this.optionRef || this.isMobile) return;\n\n      this.$nextTick(() => {\n        if (!this.isOpen) return;\n        // Impossible to use the $refs for the input field as it's defined in slot in the parent → getElementsByTagName\n        const queryField = this.$refs[ref]?.getElementsByTagName('input')[0];\n        const focusableElement = queryField ? queryField : this.$refs.options;\n        focusableElement?.focus();\n      });\n    },\n    setupPopper () {\n      if (!this.isMobile) return;\n      if (this.popper === undefined) {\n        this.popper = createPopper(this.$refs.menu, this.$refs[this.optionRef], {\n          placement: this.placement,\n          strategy: 'absolute',\n          modifiers: [\n            {\n              name: 'computeStyles',\n              options: { adaptive: false },\n            },\n            {\n              name: 'offset',\n              options: { offset: [0, 6] },\n            },\n          ],\n        });\n      } else {\n        this.popper.update();\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","responsiveWatcher","value","_b","_a","item","query","option","EventBus","ref","index","queryField","focusableElement","createPopper"],"mappings":"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"}