{"version":3,"file":"SectionInquiryForm.global.JrY0pRss.js","sources":["../../../../components/section/inquiry/InquiryNav.vue","../../../../components/section/inquiry/InquiryCheckbox.vue","../../../../types/categories.ts","../../../../components/section/inquiry/InquiryMaterialSelect.vue","../../../../node_modules/vue-multiselect/dist/vue-multiselect.esm.js","../../../../components/section/inquiry/InquiryProductDetails.vue","../../../../components/forms/FormCheckbox.vue","../../../../components/section/inquiry/InquiryUserDetails.vue","../../../../components/section/inquiry/SectionInquiryForm.global.vue"],"sourcesContent":["\n\n","\n\n\n","export enum DatoCmsCategoryId {\n KOVINARSKI = 'VwIZ0JC_SFqrvi2jBboWrQ',\n GRADBENI = 'HcywwQbkT_iWN2a_U4wSHA',\n LESNI = 'SQ9jlmleTuuRcKyONdyU-Q'\n}\n","\n\n\n","import { openBlock, createBlock, withKeys, withModifiers, renderSlot, createVNode, withDirectives, Fragment, renderList, toDisplayString, vShow, createCommentVNode, Transition, withCtx, createTextVNode } from 'vue';\n\nfunction isEmpty (opt) {\n if (opt === 0) return false\n if (Array.isArray(opt) && opt.length === 0) return true\n return !opt\n}\n\nfunction not (fun) {\n return (...params) => !fun(...params)\n}\n\nfunction includes (str, query) {\n /* istanbul ignore else */\n if (str === undefined) str = 'undefined';\n if (str === null) str = 'null';\n if (str === false) str = 'false';\n const text = str.toString().toLowerCase();\n return text.indexOf(query.trim()) !== -1\n}\n\nfunction filterOptions (options, search, label, customLabel) {\n return search ? options\n .filter((option) => includes(customLabel(option, label), search))\n .sort((a, b) => customLabel(a, label).length - customLabel(b, label).length) : options\n}\n\nfunction stripGroups (options) {\n return options.filter((option) => !option.$isLabel)\n}\n\nfunction flattenOptions (values, label) {\n return (options) =>\n options.reduce((prev, curr) => {\n /* istanbul ignore else */\n if (curr[values] && curr[values].length) {\n prev.push({\n $groupLabel: curr[label],\n $isLabel: true\n });\n return prev.concat(curr[values])\n }\n return prev\n }, [])\n}\n\nfunction filterGroups (search, label, values, groupLabel, customLabel) {\n return (groups) =>\n groups.map((group) => {\n /* istanbul ignore else */\n if (!group[values]) {\n console.warn(`Options passed to vue-multiselect do not contain groups, despite the config.`);\n return []\n }\n const groupOptions = filterOptions(group[values], search, label, customLabel);\n\n return groupOptions.length\n ? {\n [groupLabel]: group[groupLabel],\n [values]: groupOptions\n }\n : []\n })\n}\n\nconst flow = (...fns) => (x) => fns.reduce((v, f) => f(v), x);\n\nvar multiselectMixin = {\n data () {\n return {\n search: '',\n isOpen: false,\n preferredOpenDirection: 'below',\n optimizedHeight: this.maxHeight\n }\n },\n props: {\n /**\n * Decide whether to filter the results based on search query.\n * Useful for async filtering, where we search through more complex data.\n * @type {Boolean}\n */\n internalSearch: {\n type: Boolean,\n default: true\n },\n /**\n * Array of available options: Objects, Strings or Integers.\n * If array of objects, visible label will default to option.label.\n * If `labal` prop is passed, label will equal option['label']\n * @type {Array}\n */\n options: {\n type: Array,\n required: true\n },\n /**\n * Equivalent to the `multiple` attribute on a `` input.\n * @default 'Select option'\n * @type {String}\n */\n placeholder: {\n type: String,\n default: 'Select option'\n },\n /**\n * Allow to remove all selected values\n * @default true\n * @type {Boolean}\n */\n allowEmpty: {\n type: Boolean,\n default: true\n },\n /**\n * Reset this.internalValue, this.search after this.internalValue changes.\n * Useful if want to create a stateless dropdown.\n * @default false\n * @type {Boolean}\n */\n resetAfter: {\n type: Boolean,\n default: false\n },\n /**\n * Enable/disable closing after selecting an option\n * @default true\n * @type {Boolean}\n */\n closeOnSelect: {\n type: Boolean,\n default: true\n },\n /**\n * Function to interpolate the custom label\n * @default false\n * @type {Function}\n */\n customLabel: {\n type: Function,\n default (option, label) {\n if (isEmpty(option)) return ''\n return label ? option[label] : option\n }\n },\n /**\n * Disable / Enable tagging\n * @default false\n * @type {Boolean}\n */\n taggable: {\n type: Boolean,\n default: false\n },\n /**\n * String to show when highlighting a potential tag\n * @default 'Press enter to create a tag'\n * @type {String}\n */\n tagPlaceholder: {\n type: String,\n default: 'Press enter to create a tag'\n },\n /**\n * By default new tags will appear above the search results.\n * Changing to 'bottom' will revert this behaviour\n * and will proritize the search results\n * @default 'top'\n * @type {String}\n */\n tagPosition: {\n type: String,\n default: 'top'\n },\n /**\n * Number of allowed selected options. No limit if 0.\n * @default 0\n * @type {Number}\n */\n max: {\n type: [Number, Boolean],\n default: false\n },\n /**\n * Will be passed with all events as second param.\n * Useful for identifying events origin.\n * @default null\n * @type {String|Integer}\n */\n id: {\n default: null\n },\n /**\n * Limits the options displayed in the dropdown\n * to the first X options.\n * @default 1000\n * @type {Integer}\n */\n optionsLimit: {\n type: Number,\n default: 1000\n },\n /**\n * Name of the property containing\n * the group values\n * @default 1000\n * @type {String}\n */\n groupValues: {\n type: String\n },\n /**\n * Name of the property containing\n * the group label\n * @default 1000\n * @type {String}\n */\n groupLabel: {\n type: String\n },\n /**\n * Allow to select all group values\n * by selecting the group label\n * @default false\n * @type {Boolean}\n */\n groupSelect: {\n type: Boolean,\n default: false\n },\n /**\n * Array of keyboard keys to block\n * when selecting\n * @default 1000\n * @type {String}\n */\n blockKeys: {\n type: Array,\n default () {\n return []\n }\n },\n /**\n * Prevent from wiping up the search value\n * @default false\n * @type {Boolean}\n */\n preserveSearch: {\n type: Boolean,\n default: false\n },\n /**\n * Select 1st options if value is empty\n * @default false\n * @type {Boolean}\n */\n preselectFirst: {\n type: Boolean,\n default: false\n },\n /**\n * Prevent autofocus\n * @default false\n * @type {Boolean}\n */\n preventAutofocus: {\n type: Boolean,\n default: false\n }\n },\n mounted () {\n /* istanbul ignore else */\n if (!this.multiple && this.max) {\n console.warn('[Vue-Multiselect warn]: Max prop should not be used when prop Multiple equals false.');\n }\n if (\n this.preselectFirst &&\n !this.internalValue.length &&\n this.options.length\n ) {\n this.select(this.filteredOptions[0]);\n }\n },\n computed: {\n internalValue () {\n return this.modelValue || this.modelValue === 0\n ? Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]\n : []\n },\n filteredOptions () {\n const search = this.search || '';\n const normalizedSearch = search.toLowerCase().trim();\n\n let options = this.options.concat();\n\n /* istanbul ignore else */\n if (this.internalSearch) {\n options = this.groupValues\n ? this.filterAndFlat(options, normalizedSearch, this.label)\n : filterOptions(options, normalizedSearch, this.label, this.customLabel);\n } else {\n options = this.groupValues ? flattenOptions(this.groupValues, this.groupLabel)(options) : options;\n }\n\n options = this.hideSelected\n ? options.filter(not(this.isSelected))\n : options;\n\n /* istanbul ignore else */\n if (this.taggable && normalizedSearch.length && !this.isExistingOption(normalizedSearch)) {\n if (this.tagPosition === 'bottom') {\n options.push({isTag: true, label: search});\n } else {\n options.unshift({isTag: true, label: search});\n }\n }\n\n return options.slice(0, this.optionsLimit)\n },\n valueKeys () {\n if (this.trackBy) {\n return this.internalValue.map((element) => element[this.trackBy])\n } else {\n return this.internalValue\n }\n },\n optionKeys () {\n const options = this.groupValues ? this.flatAndStrip(this.options) : this.options;\n return options.map((element) => this.customLabel(element, this.label).toString().toLowerCase())\n },\n currentOptionLabel () {\n return this.multiple\n ? this.searchable ? '' : this.placeholder\n : this.internalValue.length\n ? this.getOptionLabel(this.internalValue[0])\n : this.searchable ? '' : this.placeholder\n }\n },\n watch: {\n internalValue: {\n handler () {\n /* istanbul ignore else */\n if (this.resetAfter && this.internalValue.length) {\n this.search = '';\n this.$emit('update:modelValue', this.multiple ? [] : null);\n }\n },\n deep: true\n },\n search () {\n this.$emit('search-change', this.search);\n }\n },\n emits: ['open', 'search-change', 'close', 'select', 'update:modelValue', 'remove', 'tag'],\n methods: {\n /**\n * Returns the internalValue in a way it can be emited to the parent\n * @returns {Object||Array||String||Integer}\n */\n getValue () {\n return this.multiple\n ? this.internalValue\n : this.internalValue.length === 0\n ? null\n : this.internalValue[0]\n },\n /**\n * Filters and then flattens the options list\n * @param {Array}\n * @return {Array} returns a filtered and flat options list\n */\n filterAndFlat (options, search, label) {\n return flow(\n filterGroups(search, label, this.groupValues, this.groupLabel, this.customLabel),\n flattenOptions(this.groupValues, this.groupLabel)\n )(options)\n },\n /**\n * Flattens and then strips the group labels from the options list\n * @param {Array}\n * @return {Array} returns a flat options list without group labels\n */\n flatAndStrip (options) {\n return flow(\n flattenOptions(this.groupValues, this.groupLabel),\n stripGroups\n )(options)\n },\n /**\n * Updates the search value\n * @param {String}\n */\n updateSearch (query) {\n this.search = query;\n },\n /**\n * Finds out if the given query is already present\n * in the available options\n * @param {String}\n * @return {Boolean} returns true if element is available\n */\n isExistingOption (query) {\n return !this.options\n ? false\n : this.optionKeys.indexOf(query) > -1\n },\n /**\n * Finds out if the given element is already present\n * in the result value\n * @param {Object||String||Integer} option passed element to check\n * @returns {Boolean} returns true if element is selected\n */\n isSelected (option) {\n const opt = this.trackBy\n ? option[this.trackBy]\n : option;\n return this.valueKeys.indexOf(opt) > -1\n },\n /**\n * Finds out if the given option is disabled\n * @param {Object||String||Integer} option passed element to check\n * @returns {Boolean} returns true if element is disabled\n */\n isOptionDisabled (option) {\n return !!option.$isDisabled\n },\n /**\n * Returns empty string when options is null/undefined\n * Returns tag query if option is tag.\n * Returns the customLabel() results and casts it to string.\n *\n * @param {Object||String||Integer} Passed option\n * @returns {Object||String}\n */\n getOptionLabel (option) {\n if (isEmpty(option)) return ''\n /* istanbul ignore else */\n if (option.isTag) return option.label\n /* istanbul ignore else */\n if (option.$isLabel) return option.$groupLabel\n\n const label = this.customLabel(option, this.label);\n /* istanbul ignore else */\n if (isEmpty(label)) return ''\n return label\n },\n /**\n * Add the given option to the list of selected options\n * or sets the option as the selected option.\n * If option is already selected -> remove it from the results.\n *\n * @param {Object||String||Integer} option to select/deselect\n * @param {Boolean} block removing\n */\n select (option, key) {\n /* istanbul ignore else */\n if (option.$isLabel && this.groupSelect) {\n this.selectGroup(option);\n return\n }\n if (this.blockKeys.indexOf(key) !== -1 ||\n this.disabled ||\n option.$isDisabled ||\n option.$isLabel\n ) return\n /* istanbul ignore else */\n if (this.max && this.multiple && this.internalValue.length === this.max) return\n /* istanbul ignore else */\n if (key === 'Tab' && !this.pointerDirty) return\n if (option.isTag) {\n this.$emit('tag', option.label, this.id);\n this.search = '';\n if (this.closeOnSelect && !this.multiple) this.deactivate();\n } else {\n const isSelected = this.isSelected(option);\n\n if (isSelected) {\n if (key !== 'Tab') this.removeElement(option);\n return\n }\n\n if (this.multiple) {\n this.$emit('update:modelValue', this.internalValue.concat([option]));\n } else {\n this.$emit('update:modelValue', option);\n }\n\n this.$emit('select', option, this.id);\n\n /* istanbul ignore else */\n if (this.clearOnSelect) this.search = '';\n }\n /* istanbul ignore else */\n if (this.closeOnSelect) this.deactivate();\n },\n /**\n * Add the given group options to the list of selected options\n * If all group optiona are already selected -> remove it from the results.\n *\n * @param {Object||String||Integer} group to select/deselect\n */\n selectGroup (selectedGroup) {\n const group = this.options.find((option) => {\n return option[this.groupLabel] === selectedGroup.$groupLabel\n });\n\n if (!group) return\n\n if (this.wholeGroupSelected(group)) {\n this.$emit('remove', group[this.groupValues], this.id);\n\n const newValue = this.internalValue.filter(\n (option) => group[this.groupValues].indexOf(option) === -1\n );\n\n this.$emit('update:modelValue', newValue);\n } else {\n let optionsToAdd = group[this.groupValues].filter(\n option => !(this.isOptionDisabled(option) || this.isSelected(option))\n );\n\n // if max is defined then just select options respecting max\n if (this.max) {\n optionsToAdd.splice(this.max - this.internalValue.length);\n }\n\n this.$emit('select', optionsToAdd, this.id);\n this.$emit(\n 'update:modelValue',\n this.internalValue.concat(optionsToAdd)\n );\n }\n\n if (this.closeOnSelect) this.deactivate();\n },\n /**\n * Helper to identify if all values in a group are selected\n *\n * @param {Object} group to validated selected values against\n */\n wholeGroupSelected (group) {\n return group[this.groupValues].every((option) => this.isSelected(option) || this.isOptionDisabled(option)\n )\n },\n /**\n * Helper to identify if all values in a group are disabled\n *\n * @param {Object} group to check for disabled values\n */\n wholeGroupDisabled (group) {\n return group[this.groupValues].every(this.isOptionDisabled)\n },\n /**\n * Removes the given option from the selected options.\n * Additionally checks this.allowEmpty prop if option can be removed when\n * it is the last selected option.\n *\n * @param {type} option description\n * @return {type} description\n */\n removeElement (option, shouldClose = true) {\n /* istanbul ignore else */\n if (this.disabled) return\n /* istanbul ignore else */\n if (option.$isDisabled) return\n /* istanbul ignore else */\n if (!this.allowEmpty && this.internalValue.length <= 1) {\n this.deactivate();\n return\n }\n\n const index = typeof option === 'object'\n ? this.valueKeys.indexOf(option[this.trackBy])\n : this.valueKeys.indexOf(option);\n\n if (this.multiple) {\n const newValue = this.internalValue.slice(0, index).concat(this.internalValue.slice(index + 1));\n this.$emit('update:modelValue', newValue);\n } else {\n this.$emit('update:modelValue', null);\n }\n this.$emit('remove', option, this.id);\n\n /* istanbul ignore else */\n if (this.closeOnSelect && shouldClose) this.deactivate();\n },\n /**\n * Calls this.removeElement() with the last element\n * from this.internalValue (selected element Array)\n *\n * @fires this#removeElement\n */\n removeLastElement () {\n /* istanbul ignore else */\n if (this.blockKeys.indexOf('Delete') !== -1) return\n /* istanbul ignore else */\n if (this.search.length === 0 && Array.isArray(this.internalValue) && this.internalValue.length) {\n this.removeElement(this.internalValue[this.internalValue.length - 1], false);\n }\n },\n /**\n * Opens the multiselect’s dropdown.\n * Sets this.isOpen to TRUE\n */\n activate () {\n /* istanbul ignore else */\n if (this.isOpen || this.disabled) return\n\n this.adjustPosition();\n /* istanbul ignore else */\n if (this.groupValues && this.pointer === 0 && this.filteredOptions.length) {\n this.pointer = 1;\n }\n\n this.isOpen = true;\n /* istanbul ignore else */\n if (this.searchable) {\n if (!this.preserveSearch) this.search = '';\n if (!this.preventAutofocus) this.$nextTick(() => this.$refs.search && this.$refs.search.focus());\n } else if (!this.preventAutofocus) {\n if (typeof this.$el !== 'undefined') this.$el.focus();\n }\n this.$emit('open', this.id);\n },\n /**\n * Closes the multiselect’s dropdown.\n * Sets this.isOpen to FALSE\n */\n deactivate () {\n /* istanbul ignore else */\n if (!this.isOpen) return\n\n this.isOpen = false;\n /* istanbul ignore else */\n if (this.searchable) {\n if (this.$refs.search !== null && typeof this.$refs.search !== 'undefined') this.$refs.search.blur();\n } else {\n if (typeof this.$el !== 'undefined') this.$el.blur();\n }\n if (!this.preserveSearch) this.search = '';\n this.$emit('close', this.getValue(), this.id);\n },\n /**\n * Call this.activate() or this.deactivate()\n * depending on this.isOpen value.\n *\n * @fires this#activate || this#deactivate\n * @property {Boolean} isOpen indicates if dropdown is open\n */\n toggle () {\n this.isOpen\n ? this.deactivate()\n : this.activate();\n },\n /**\n * Updates the hasEnoughSpace variable used for\n * detecting where to expand the dropdown\n */\n adjustPosition () {\n if (typeof window === 'undefined') return\n\n const spaceAbove = this.$el.getBoundingClientRect().top;\n const spaceBelow = window.innerHeight - this.$el.getBoundingClientRect().bottom;\n const hasEnoughSpaceBelow = spaceBelow > this.maxHeight;\n\n if (hasEnoughSpaceBelow || spaceBelow > spaceAbove || this.openDirection === 'below' || this.openDirection === 'bottom') {\n this.preferredOpenDirection = 'below';\n this.optimizedHeight = Math.min(spaceBelow - 40, this.maxHeight);\n } else {\n this.preferredOpenDirection = 'above';\n this.optimizedHeight = Math.min(spaceAbove - 40, this.maxHeight);\n }\n }\n }\n};\n\nvar pointerMixin = {\n data () {\n return {\n pointer: 0,\n pointerDirty: false\n }\n },\n props: {\n /**\n * Enable/disable highlighting of the pointed value.\n * @type {Boolean}\n * @default true\n */\n showPointer: {\n type: Boolean,\n default: true\n },\n optionHeight: {\n type: Number,\n default: 40\n }\n },\n computed: {\n pointerPosition () {\n return this.pointer * this.optionHeight\n },\n visibleElements () {\n return this.optimizedHeight / this.optionHeight\n }\n },\n watch: {\n filteredOptions () {\n this.pointerAdjust();\n },\n isOpen () {\n this.pointerDirty = false;\n },\n pointer () {\n this.$refs.search && this.$refs.search.setAttribute('aria-activedescendant', this.id + '-' + this.pointer.toString());\n }\n },\n methods: {\n optionHighlight (index, option) {\n return {\n 'multiselect__option--highlight': index === this.pointer && this.showPointer,\n 'multiselect__option--selected': this.isSelected(option)\n }\n },\n groupHighlight (index, selectedGroup) {\n if (!this.groupSelect) {\n return [\n 'multiselect__option--disabled',\n {'multiselect__option--group': selectedGroup.$isLabel}\n ]\n }\n\n const group = this.options.find((option) => {\n return option[this.groupLabel] === selectedGroup.$groupLabel\n });\n\n return group && !this.wholeGroupDisabled(group) ? [\n 'multiselect__option--group',\n {'multiselect__option--highlight': index === this.pointer && this.showPointer},\n {'multiselect__option--group-selected': this.wholeGroupSelected(group)}\n ] : 'multiselect__option--disabled'\n },\n addPointerElement ({key} = 'Enter') {\n /* istanbul ignore else */\n if (this.filteredOptions.length > 0) {\n this.select(this.filteredOptions[this.pointer], key);\n }\n this.pointerReset();\n },\n pointerForward () {\n /* istanbul ignore else */\n if (this.pointer < this.filteredOptions.length - 1) {\n this.pointer++;\n /* istanbul ignore next */\n if (this.$refs.list.scrollTop <= this.pointerPosition - (this.visibleElements - 1) * this.optionHeight) {\n this.$refs.list.scrollTop = this.pointerPosition - (this.visibleElements - 1) * this.optionHeight;\n }\n /* istanbul ignore else */\n if (\n this.filteredOptions[this.pointer] &&\n this.filteredOptions[this.pointer].$isLabel &&\n !this.groupSelect\n ) this.pointerForward();\n }\n this.pointerDirty = true;\n },\n pointerBackward () {\n if (this.pointer > 0) {\n this.pointer--;\n /* istanbul ignore else */\n if (this.$refs.list.scrollTop >= this.pointerPosition) {\n this.$refs.list.scrollTop = this.pointerPosition;\n }\n /* istanbul ignore else */\n if (\n this.filteredOptions[this.pointer] &&\n this.filteredOptions[this.pointer].$isLabel &&\n !this.groupSelect\n ) this.pointerBackward();\n } else {\n /* istanbul ignore else */\n if (\n this.filteredOptions[this.pointer] &&\n this.filteredOptions[0].$isLabel &&\n !this.groupSelect\n ) this.pointerForward();\n }\n this.pointerDirty = true;\n },\n pointerReset () {\n /* istanbul ignore else */\n if (!this.closeOnSelect) return\n this.pointer = 0;\n /* istanbul ignore else */\n if (this.$refs.list) {\n this.$refs.list.scrollTop = 0;\n }\n },\n pointerAdjust () {\n /* istanbul ignore else */\n if (this.pointer >= this.filteredOptions.length - 1) {\n this.pointer = this.filteredOptions.length\n ? this.filteredOptions.length - 1\n : 0;\n }\n\n if (this.filteredOptions.length > 0 &&\n this.filteredOptions[this.pointer].$isLabel &&\n !this.groupSelect\n ) {\n this.pointerForward();\n }\n },\n pointerSet (index) {\n this.pointer = index;\n this.pointerDirty = true;\n }\n }\n};\n\nvar script = {\n name: 'vue-multiselect',\n mixins: [multiselectMixin, pointerMixin],\n compatConfig: {\n MODE: 3,\n ATTR_ENUMERATED_COERCION: false\n },\n props: {\n /**\n * name attribute to match optional label element\n * @default ''\n * @type {String}\n */\n name: {\n type: String,\n default: ''\n },\n /**\n * Presets the selected options value.\n * @type {Object||Array||String||Integer}\n */\n modelValue: {\n type: null,\n default () {\n return []\n }\n },\n /**\n * String to show when pointing to an option\n * @default 'Press enter to select'\n * @type {String}\n */\n selectLabel: {\n type: String,\n default: 'Press enter to select'\n },\n /**\n * String to show when pointing to an option\n * @default 'Press enter to select'\n * @type {String}\n */\n selectGroupLabel: {\n type: String,\n default: 'Press enter to select group'\n },\n /**\n * String to show next to selected option\n * @default 'Selected'\n * @type {String}\n */\n selectedLabel: {\n type: String,\n default: 'Selected'\n },\n /**\n * String to show when pointing to an already selected option\n * @default 'Press enter to remove'\n * @type {String}\n */\n deselectLabel: {\n type: String,\n default: 'Press enter to remove'\n },\n /**\n * String to show when pointing to an already selected option\n * @default 'Press enter to remove'\n * @type {String}\n */\n deselectGroupLabel: {\n type: String,\n default: 'Press enter to deselect group'\n },\n /**\n * Decide whether to show pointer labels\n * @default true\n * @type {Boolean}\n */\n showLabels: {\n type: Boolean,\n default: true\n },\n /**\n * Limit the display of selected options. The rest will be hidden within the limitText string.\n * @default 99999\n * @type {Integer}\n */\n limit: {\n type: Number,\n default: 99999\n },\n /**\n * Sets maxHeight style value of the dropdown\n * @default 300\n * @type {Integer}\n */\n maxHeight: {\n type: Number,\n default: 300\n },\n /**\n * Function that process the message shown when selected\n * elements pass the defined limit.\n * @default 'and * more'\n * @param {Int} count Number of elements more than limit\n * @type {Function}\n */\n limitText: {\n type: Function,\n default: (count) => `and ${count} more`\n },\n /**\n * Set true to trigger the loading spinner.\n * @default False\n * @type {Boolean}\n */\n loading: {\n type: Boolean,\n default: false\n },\n /**\n * Disables the multiselect if true.\n * @default false\n * @type {Boolean}\n */\n disabled: {\n type: Boolean,\n default: false\n },\n /**\n * Fixed opening direction\n * @default ''\n * @type {String}\n */\n openDirection: {\n type: String,\n default: ''\n },\n /**\n * Shows slot with message about empty options\n * @default true\n * @type {Boolean}\n */\n showNoOptions: {\n type: Boolean,\n default: true\n },\n showNoResults: {\n type: Boolean,\n default: true\n },\n tabindex: {\n type: Number,\n default: 0\n }\n },\n computed: {\n hasOptionGroup () {\n return this.groupValues && this.groupLabel && this.groupSelect\n },\n isSingleLabelVisible () {\n return (\n (this.singleValue || this.singleValue === 0) &&\n (!this.isOpen || !this.searchable) &&\n !this.visibleValues.length\n )\n },\n isPlaceholderVisible () {\n return !this.internalValue.length && (!this.searchable || !this.isOpen)\n },\n visibleValues () {\n return this.multiple ? this.internalValue.slice(0, this.limit) : []\n },\n singleValue () {\n return this.internalValue[0]\n },\n deselectLabelText () {\n return this.showLabels ? this.deselectLabel : ''\n },\n deselectGroupLabelText () {\n return this.showLabels ? this.deselectGroupLabel : ''\n },\n selectLabelText () {\n return this.showLabels ? this.selectLabel : ''\n },\n selectGroupLabelText () {\n return this.showLabels ? this.selectGroupLabel : ''\n },\n selectedLabelText () {\n return this.showLabels ? this.selectedLabel : ''\n },\n inputStyle () {\n if (\n this.searchable ||\n (this.multiple && this.modelValue && this.modelValue.length)\n ) {\n // Hide input by setting the width to 0 allowing it to receive focus\n return this.isOpen\n ? {width: '100%'}\n : {width: '0', position: 'absolute', padding: '0'}\n }\n return ''\n },\n contentStyle () {\n return this.options.length\n ? {display: 'inline-block'}\n : {display: 'block'}\n },\n isAbove () {\n if (this.openDirection === 'above' || this.openDirection === 'top') {\n return true\n } else if (\n this.openDirection === 'below' ||\n this.openDirection === 'bottom'\n ) {\n return false\n } else {\n return this.preferredOpenDirection === 'above'\n }\n },\n showSearchInput () {\n return (\n this.searchable &&\n (this.hasSingleSelectedSlot &&\n (this.visibleSingleValue || this.visibleSingleValue === 0)\n ? this.isOpen\n : true)\n )\n }\n }\n};\n\nconst _hoisted_1 = {\n ref: \"tags\",\n class: \"multiselect__tags\"\n};\nconst _hoisted_2 = { class: \"multiselect__tags-wrap\" };\nconst _hoisted_3 = { class: \"multiselect__spinner\" };\nconst _hoisted_4 = { key: 0 };\nconst _hoisted_5 = { class: \"multiselect__option\" };\nconst _hoisted_6 = { class: \"multiselect__option\" };\nconst _hoisted_7 = /*#__PURE__*/createTextVNode(\"No elements found. Consider changing the search query.\");\nconst _hoisted_8 = { class: \"multiselect__option\" };\nconst _hoisted_9 = /*#__PURE__*/createTextVNode(\"List is empty.\");\n\nfunction render(_ctx, _cache, $props, $setup, $data, $options) {\n return (openBlock(), createBlock(\"div\", {\n tabindex: _ctx.searchable ? -1 : $props.tabindex,\n class: [{ 'multiselect--active': _ctx.isOpen, 'multiselect--disabled': $props.disabled, 'multiselect--above': $options.isAbove, 'multiselect--has-options-group': $options.hasOptionGroup }, \"multiselect\"],\n onFocus: _cache[14] || (_cache[14] = $event => (_ctx.activate())),\n onBlur: _cache[15] || (_cache[15] = $event => (_ctx.searchable ? false : _ctx.deactivate())),\n onKeydown: [\n _cache[16] || (_cache[16] = withKeys(withModifiers($event => (_ctx.pointerForward()), [\"self\",\"prevent\"]), [\"down\"])),\n _cache[17] || (_cache[17] = withKeys(withModifiers($event => (_ctx.pointerBackward()), [\"self\",\"prevent\"]), [\"up\"]))\n ],\n onKeypress: _cache[18] || (_cache[18] = withKeys(withModifiers($event => (_ctx.addPointerElement($event)), [\"stop\",\"self\"]), [\"enter\",\"tab\"])),\n onKeyup: _cache[19] || (_cache[19] = withKeys($event => (_ctx.deactivate()), [\"esc\"])),\n role: \"combobox\",\n \"aria-owns\": 'listbox-'+_ctx.id\n }, [\n renderSlot(_ctx.$slots, \"caret\", { toggle: _ctx.toggle }, () => [\n createVNode(\"div\", {\n onMousedown: _cache[1] || (_cache[1] = withModifiers($event => (_ctx.toggle()), [\"prevent\",\"stop\"])),\n class: \"multiselect__select\"\n }, null, 32 /* HYDRATE_EVENTS */)\n ]),\n renderSlot(_ctx.$slots, \"clear\", { search: _ctx.search }),\n createVNode(\"div\", _hoisted_1, [\n renderSlot(_ctx.$slots, \"selection\", {\n search: _ctx.search,\n remove: _ctx.removeElement,\n values: $options.visibleValues,\n isOpen: _ctx.isOpen\n }, () => [\n withDirectives(createVNode(\"div\", _hoisted_2, [\n (openBlock(true), createBlock(Fragment, null, renderList($options.visibleValues, (option, index) => {\n return renderSlot(_ctx.$slots, \"tag\", {\n option: option,\n search: _ctx.search,\n remove: _ctx.removeElement\n }, () => [\n (openBlock(), createBlock(\"span\", {\n class: \"multiselect__tag\",\n key: index\n }, [\n createVNode(\"span\", {\n textContent: toDisplayString(_ctx.getOptionLabel(option))\n }, null, 8 /* PROPS */, [\"textContent\"]),\n createVNode(\"i\", {\n tabindex: \"1\",\n onKeypress: withKeys(withModifiers($event => (_ctx.removeElement(option)), [\"prevent\"]), [\"enter\"]),\n onMousedown: withModifiers($event => (_ctx.removeElement(option)), [\"prevent\"]),\n class: \"multiselect__tag-icon\"\n }, null, 40 /* PROPS, HYDRATE_EVENTS */, [\"onKeypress\", \"onMousedown\"])\n ]))\n ])\n }), 256 /* UNKEYED_FRAGMENT */))\n ], 512 /* NEED_PATCH */), [\n [vShow, $options.visibleValues.length > 0]\n ]),\n (_ctx.internalValue && _ctx.internalValue.length > $props.limit)\n ? renderSlot(_ctx.$slots, \"limit\", { key: 0 }, () => [\n createVNode(\"strong\", {\n class: \"multiselect__strong\",\n textContent: toDisplayString($props.limitText(_ctx.internalValue.length - $props.limit))\n }, null, 8 /* PROPS */, [\"textContent\"])\n ])\n : createCommentVNode(\"v-if\", true)\n ]),\n createVNode(Transition, { name: \"multiselect__loading\" }, {\n default: withCtx(() => [\n renderSlot(_ctx.$slots, \"loading\", {}, () => [\n withDirectives(createVNode(\"div\", _hoisted_3, null, 512 /* NEED_PATCH */), [\n [vShow, $props.loading]\n ])\n ])\n ]),\n _: 3 /* FORWARDED */\n }),\n (_ctx.searchable)\n ? (openBlock(), createBlock(\"input\", {\n key: 0,\n ref: \"search\",\n name: $props.name,\n id: _ctx.id,\n type: \"text\",\n autocomplete: \"off\",\n spellcheck: false,\n placeholder: _ctx.placeholder,\n style: $options.inputStyle,\n value: _ctx.search,\n disabled: $props.disabled,\n tabindex: $props.tabindex,\n onInput: _cache[2] || (_cache[2] = $event => (_ctx.updateSearch($event.target.value))),\n onFocus: _cache[3] || (_cache[3] = withModifiers($event => (_ctx.activate()), [\"prevent\"])),\n onBlur: _cache[4] || (_cache[4] = withModifiers($event => (_ctx.deactivate()), [\"prevent\"])),\n onKeyup: _cache[5] || (_cache[5] = withKeys($event => (_ctx.deactivate()), [\"esc\"])),\n onKeydown: [\n _cache[6] || (_cache[6] = withKeys(withModifiers($event => (_ctx.pointerForward()), [\"prevent\"]), [\"down\"])),\n _cache[7] || (_cache[7] = withKeys(withModifiers($event => (_ctx.pointerBackward()), [\"prevent\"]), [\"up\"])),\n _cache[9] || (_cache[9] = withKeys(withModifiers($event => (_ctx.removeLastElement()), [\"stop\"]), [\"delete\"]))\n ],\n onKeypress: _cache[8] || (_cache[8] = withKeys(withModifiers($event => (_ctx.addPointerElement($event)), [\"prevent\",\"stop\",\"self\"]), [\"enter\"])),\n class: \"multiselect__input\",\n \"aria-controls\": 'listbox-'+_ctx.id\n }, null, 44 /* STYLE, PROPS, HYDRATE_EVENTS */, [\"name\", \"id\", \"placeholder\", \"value\", \"disabled\", \"tabindex\", \"aria-controls\"]))\n : createCommentVNode(\"v-if\", true),\n ($options.isSingleLabelVisible)\n ? (openBlock(), createBlock(\"span\", {\n key: 1,\n class: \"multiselect__single\",\n onMousedown: _cache[10] || (_cache[10] = withModifiers((...args) => (_ctx.toggle && _ctx.toggle(...args)), [\"prevent\"]))\n }, [\n renderSlot(_ctx.$slots, \"singleLabel\", { option: $options.singleValue }, () => [\n createTextVNode(toDisplayString(_ctx.currentOptionLabel), 1 /* TEXT */)\n ])\n ], 32 /* HYDRATE_EVENTS */))\n : createCommentVNode(\"v-if\", true),\n ($options.isPlaceholderVisible)\n ? (openBlock(), createBlock(\"span\", {\n key: 2,\n class: \"multiselect__placeholder\",\n onMousedown: _cache[11] || (_cache[11] = withModifiers((...args) => (_ctx.toggle && _ctx.toggle(...args)), [\"prevent\"]))\n }, [\n renderSlot(_ctx.$slots, \"placeholder\", {}, () => [\n createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)\n ])\n ], 32 /* HYDRATE_EVENTS */))\n : createCommentVNode(\"v-if\", true)\n ], 512 /* NEED_PATCH */),\n createVNode(Transition, { name: \"multiselect\" }, {\n default: withCtx(() => [\n withDirectives(createVNode(\"div\", {\n class: \"multiselect__content-wrapper\",\n onFocus: _cache[12] || (_cache[12] = (...args) => (_ctx.activate && _ctx.activate(...args))),\n tabindex: \"-1\",\n onMousedown: _cache[13] || (_cache[13] = withModifiers(() => {}, [\"prevent\"])),\n style: { maxHeight: _ctx.optimizedHeight + 'px' },\n ref: \"list\"\n }, [\n createVNode(\"ul\", {\n class: \"multiselect__content\",\n style: $options.contentStyle,\n role: \"listbox\",\n id: 'listbox-'+_ctx.id\n }, [\n renderSlot(_ctx.$slots, \"beforeList\"),\n (_ctx.multiple && _ctx.max === _ctx.internalValue.length)\n ? (openBlock(), createBlock(\"li\", _hoisted_4, [\n createVNode(\"span\", _hoisted_5, [\n renderSlot(_ctx.$slots, \"maxElements\", {}, () => [\n createTextVNode(\"Maximum of \" + toDisplayString(_ctx.max) + \" options selected. First remove a selected option to select another.\", 1 /* TEXT */)\n ])\n ])\n ]))\n : createCommentVNode(\"v-if\", true),\n (!_ctx.max || _ctx.internalValue.length < _ctx.max)\n ? (openBlock(true), createBlock(Fragment, { key: 1 }, renderList(_ctx.filteredOptions, (option, index) => {\n return (openBlock(), createBlock(\"li\", {\n class: \"multiselect__element\",\n key: index,\n id: _ctx.id + '-' + index,\n role: !(option && (option.$isLabel || option.$isDisabled)) ? 'option' : null\n }, [\n (!(option && (option.$isLabel || option.$isDisabled)))\n ? (openBlock(), createBlock(\"span\", {\n key: 0,\n class: [_ctx.optionHighlight(index, option), \"multiselect__option\"],\n onClick: withModifiers($event => (_ctx.select(option)), [\"stop\"]),\n onMouseenter: withModifiers($event => (_ctx.pointerSet(index)), [\"self\"]),\n \"data-select\": option && option.isTag ? _ctx.tagPlaceholder : $options.selectLabelText,\n \"data-selected\": $options.selectedLabelText,\n \"data-deselect\": $options.deselectLabelText\n }, [\n renderSlot(_ctx.$slots, \"option\", {\n option: option,\n search: _ctx.search,\n index: index\n }, () => [\n createVNode(\"span\", null, toDisplayString(_ctx.getOptionLabel(option)), 1 /* TEXT */)\n ])\n ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, [\"onClick\", \"onMouseenter\", \"data-select\", \"data-selected\", \"data-deselect\"]))\n : createCommentVNode(\"v-if\", true),\n (option && (option.$isLabel || option.$isDisabled))\n ? (openBlock(), createBlock(\"span\", {\n key: 1,\n \"data-select\": _ctx.groupSelect && $options.selectGroupLabelText,\n \"data-deselect\": _ctx.groupSelect && $options.deselectGroupLabelText,\n class: [_ctx.groupHighlight(index, option), \"multiselect__option\"],\n onMouseenter: withModifiers($event => (_ctx.groupSelect && _ctx.pointerSet(index)), [\"self\"]),\n onMousedown: withModifiers($event => (_ctx.selectGroup(option)), [\"prevent\"])\n }, [\n renderSlot(_ctx.$slots, \"option\", {\n option: option,\n search: _ctx.search,\n index: index\n }, () => [\n createVNode(\"span\", null, toDisplayString(_ctx.getOptionLabel(option)), 1 /* TEXT */)\n ])\n ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, [\"data-select\", \"data-deselect\", \"onMouseenter\", \"onMousedown\"]))\n : createCommentVNode(\"v-if\", true)\n ], 8 /* PROPS */, [\"id\", \"role\"]))\n }), 128 /* KEYED_FRAGMENT */))\n : createCommentVNode(\"v-if\", true),\n withDirectives(createVNode(\"li\", null, [\n createVNode(\"span\", _hoisted_6, [\n renderSlot(_ctx.$slots, \"noResult\", { search: _ctx.search }, () => [\n _hoisted_7\n ])\n ])\n ], 512 /* NEED_PATCH */), [\n [vShow, $props.showNoResults && (_ctx.filteredOptions.length === 0 && _ctx.search && !$props.loading)]\n ]),\n withDirectives(createVNode(\"li\", null, [\n createVNode(\"span\", _hoisted_8, [\n renderSlot(_ctx.$slots, \"noOptions\", {}, () => [\n _hoisted_9\n ])\n ])\n ], 512 /* NEED_PATCH */), [\n [vShow, $props.showNoOptions && ((_ctx.options.length === 0 || ($options.hasOptionGroup === true && _ctx.filteredOptions.length === 0)) && !_ctx.search && !$props.loading)]\n ]),\n renderSlot(_ctx.$slots, \"afterList\")\n ], 12 /* STYLE, PROPS */, [\"id\"])\n ], 36 /* STYLE, HYDRATE_EVENTS */), [\n [vShow, _ctx.isOpen]\n ])\n ]),\n _: 3 /* FORWARDED */\n })\n ], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, [\"tabindex\", \"aria-owns\"]))\n}\n\nscript.render = render;\n\nexport default script;\nexport { script as Multiselect, multiselectMixin, pointerMixin };\n","