primevue/autocomplete/index.mjs.map

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/autocomplete/BaseAutoComplete.vue","../../src/autocomplete/AutoComplete.vue","../../src/autocomplete/AutoComplete.vue?vue&type=template&id=086b1533&lang.js"],"sourcesContent":["<script>\nimport BaseInput from '@primevue/core/baseinput';\nimport AutoCompleteStyle from 'primevue/autocomplete/style';\n\nexport default {\n    name: 'BaseAutoComplete',\n    extends: BaseInput,\n    props: {\n        suggestions: {\n            type: Array,\n            default: null\n        },\n        optionLabel: null,\n        optionDisabled: null,\n        optionGroupLabel: null,\n        optionGroupChildren: null,\n        scrollHeight: {\n            type: String,\n            default: '14rem'\n        },\n        dropdown: {\n            type: Boolean,\n            default: false\n        },\n        dropdownMode: {\n            type: String,\n            default: 'blank'\n        },\n        multiple: {\n            type: Boolean,\n            default: false\n        },\n        loading: {\n            type: Boolean,\n            default: false\n        },\n        placeholder: {\n            type: String,\n            default: null\n        },\n        dataKey: {\n            type: String,\n            default: null\n        },\n        minLength: {\n            type: Number,\n            default: 1\n        },\n        delay: {\n            type: Number,\n            default: 300\n        },\n        appendTo: {\n            type: [String, Object],\n            default: 'body'\n        },\n        forceSelection: {\n            type: Boolean,\n            default: false\n        },\n        completeOnFocus: {\n            type: Boolean,\n            default: false\n        },\n        inputId: {\n            type: String,\n            default: null\n        },\n        inputStyle: {\n            type: Object,\n            default: null\n        },\n        inputClass: {\n            type: [String, Object],\n            default: null\n        },\n        panelStyle: {\n            type: Object,\n            default: null\n        },\n        panelClass: {\n            type: [String, Object],\n            default: null\n        },\n        overlayStyle: {\n            type: Object,\n            default: null\n        },\n        overlayClass: {\n            type: [String, Object],\n            default: null\n        },\n        dropdownIcon: {\n            type: String,\n            default: null\n        },\n        dropdownClass: {\n            type: [String, Object],\n            default: null\n        },\n        loader: {\n            type: String,\n            default: null\n        },\n        loadingIcon: {\n            type: String,\n            default: null\n        },\n        removeTokenIcon: {\n            type: String,\n            default: null\n        },\n        chipIcon: {\n            type: String,\n            default: null\n        },\n        virtualScrollerOptions: {\n            type: Object,\n            default: null\n        },\n        autoOptionFocus: {\n            type: Boolean,\n            default: false\n        },\n        selectOnFocus: {\n            type: Boolean,\n            default: false\n        },\n        focusOnHover: {\n            type: Boolean,\n            default: true\n        },\n        searchLocale: {\n            type: String,\n            default: undefined\n        },\n        searchMessage: {\n            type: String,\n            default: null\n        },\n        selectionMessage: {\n            type: String,\n            default: null\n        },\n        emptySelectionMessage: {\n            type: String,\n            default: null\n        },\n        emptySearchMessage: {\n            type: String,\n            default: null\n        },\n        showEmptyMessage: {\n            type: Boolean,\n            default: true\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        },\n        typeahead: {\n            type: Boolean,\n            default: true\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        }\n    },\n    style: AutoCompleteStyle,\n    provide() {\n        return {\n            $pcAutoComplete: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div ref=\"container\" :class=\"cx('root')\" :style=\"sx('root')\" @click=\"onContainerClick\" :data-p=\"containerDataP\" v-bind=\"ptmi('root')\">\n        <InputText\n            v-if=\"!multiple\"\n            ref=\"focusInput\"\n            :id=\"inputId\"\n            type=\"text\"\n            :name=\"$formName\"\n            :class=\"[cx('pcInputText'), inputClass]\"\n            :style=\"inputStyle\"\n            :value=\"inputValue\"\n            :placeholder=\"placeholder\"\n            :tabindex=\"!disabled ? tabindex : -1\"\n            :fluid=\"$fluid\"\n            :disabled=\"disabled\"\n            :size=\"size\"\n            :invalid=\"invalid\"\n            :variant=\"variant\"\n            autocomplete=\"off\"\n            role=\"combobox\"\n            :aria-label=\"ariaLabel\"\n            :aria-labelledby=\"ariaLabelledby\"\n            aria-haspopup=\"listbox\"\n            aria-autocomplete=\"list\"\n            :aria-expanded=\"overlayVisible\"\n            :aria-controls=\"panelId\"\n            :aria-activedescendant=\"focused ? focusedOptionId : undefined\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @keydown=\"onKeyDown\"\n            @input=\"onInput\"\n            @change=\"onChange\"\n            :unstyled=\"unstyled\"\n            :data-p-has-dropdown=\"dropdown\"\n            :pt=\"ptm('pcInputText')\"\n        />\n        <ul\n            v-if=\"multiple\"\n            ref=\"multiContainer\"\n            :class=\"cx('inputMultiple')\"\n            tabindex=\"-1\"\n            role=\"listbox\"\n            aria-orientation=\"horizontal\"\n            :aria-activedescendant=\"focused ? focusedMultipleOptionId : undefined\"\n            @focus=\"onMultipleContainerFocus\"\n            @blur=\"onMultipleContainerBlur\"\n            @keydown=\"onMultipleContainerKeyDown\"\n            :data-p-has-dropdown=\"dropdown\"\n            :data-p=\"inputMultipleDataP\"\n            v-bind=\"ptm('inputMultiple')\"\n        >\n            <li\n                v-for=\"(option, i) of d_value\"\n                :key=\"`${i}_${getOptionLabel(option)}`\"\n                :id=\"$id + '_multiple_option_' + i\"\n                :class=\"cx('chipItem', { i })\"\n                role=\"option\"\n                :aria-label=\"getOptionLabel(option)\"\n                :aria-selected=\"true\"\n                :aria-setsize=\"d_value.length\"\n                :aria-posinset=\"i + 1\"\n                v-bind=\"ptm('chipItem')\"\n            >\n                <slot name=\"chip\" :class=\"cx('pcChip')\" :value=\"option\" :index=\"i\" :removeCallback=\"(event) => removeOption(event, i)\" v-bind=\"ptm('pcChip')\">\n                    <!-- TODO: removetokenicon and removeTokenIcon  deprecated since v4.0. Use chipicon slot and chipIcon prop-->\n                    <Chip\n                        :class=\"cx('pcChip')\"\n                        :label=\"getOptionLabel(option)\"\n                        :removeIcon=\"chipIcon || removeTokenIcon\"\n                        removable\n                        :unstyled=\"unstyled\"\n                        @remove=\"removeOption($event, i)\"\n                        :data-p-focused=\"focusedMultipleOptionIndex === i\"\n                        :pt=\"ptm('pcChip')\"\n                    >\n                        <template #removeicon>\n                            <slot :name=\"$slots.chipicon ? 'chipicon' : 'removetokenicon'\" :class=\"cx('chipIcon')\" :index=\"i\" :removeCallback=\"(event) => removeOption(event, i)\" />\n                        </template>\n                    </Chip>\n                </slot>\n            </li>\n            <li :class=\"cx('inputChip')\" role=\"option\" v-bind=\"ptm('inputChip')\">\n                <input\n                    ref=\"focusInput\"\n                    :id=\"inputId\"\n                    type=\"text\"\n                    :style=\"inputStyle\"\n                    :class=\"inputClass\"\n                    :placeholder=\"placeholder\"\n                    :tabindex=\"!disabled ? tabindex : -1\"\n                    :disabled=\"disabled\"\n                    autocomplete=\"off\"\n                    role=\"combobox\"\n                    :aria-label=\"ariaLabel\"\n                    :aria-labelledby=\"ariaLabelledby\"\n                    aria-haspopup=\"listbox\"\n                    aria-autocomplete=\"list\"\n                    :aria-expanded=\"overlayVisible\"\n                    :aria-controls=\"$id + '_list'\"\n                    :aria-activedescendant=\"focused ? focusedOptionId : undefined\"\n                    :aria-invalid=\"invalid || undefined\"\n                    @focus=\"onFocus\"\n                    @blur=\"onBlur\"\n                    @keydown=\"onKeyDown\"\n                    @input=\"onInput\"\n                    @change=\"onChange\"\n                    v-bind=\"ptm('input')\"\n                />\n            </li>\n        </ul>\n        <slot v-if=\"searching || loading\" :class=\"cx('loader')\" :name=\"$slots.loader ? 'loader' : 'loadingicon'\">\n            <i v-if=\"loader || loadingIcon\" :class=\"['pi-spin', cx('loader'), loader, loadingIcon]\" aria-hidden=\"true\" :data-p-has-dropdown=\"dropdown\" v-bind=\"ptm('loader')\" />\n            <SpinnerIcon v-else :class=\"cx('loader')\" spin aria-hidden=\"true\" :data-p-has-dropdown=\"dropdown\" v-bind=\"ptm('loader')\" />\n        </slot>\n        <slot :name=\"$slots.dropdown ? 'dropdown' : 'dropdownbutton'\" :toggleCallback=\"(event) => onDropdownClick(event)\">\n            <button\n                v-if=\"dropdown\"\n                ref=\"dropdownButton\"\n                type=\"button\"\n                :class=\"[cx('dropdown'), dropdownClass]\"\n                :disabled=\"disabled\"\n                aria-haspopup=\"listbox\"\n                :aria-expanded=\"overlayVisible\"\n                :aria-controls=\"panelId\"\n                @click=\"onDropdownClick\"\n                v-bind=\"ptm('dropdown')\"\n            >\n                <slot name=\"dropdownicon\" :class=\"dropdownIcon\">\n                    <component :is=\"dropdownIcon ? 'span' : 'ChevronDownIcon'\" :class=\"dropdownIcon\" v-bind=\"ptm('dropdownIcon')\" />\n                </slot>\n            </button>\n        </slot>\n        <span v-if=\"typeahead\" role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenSearchResult')\" :data-p-hidden-accessible=\"true\">\n            {{ searchResultMessageText }}\n        </span>\n        <Portal :appendTo=\"appendTo\">\n            <transition name=\"p-connected-overlay\" @enter=\"onOverlayEnter\" @after-enter=\"onOverlayAfterEnter\" @leave=\"onOverlayLeave\" @after-leave=\"onOverlayAfterLeave\" v-bind=\"ptm('transition')\">\n                <div\n                    v-if=\"overlayVisible\"\n                    :ref=\"overlayRef\"\n                    :id=\"panelId\"\n                    :class=\"[cx('overlay'), panelClass, overlayClass]\"\n                    :style=\"{ ...panelStyle, ...overlayStyle }\"\n                    @click=\"onOverlayClick\"\n                    @keydown=\"onOverlayKeyDown\"\n                    :data-p=\"overlayDataP\"\n                    v-bind=\"ptm('overlay')\"\n                >\n                    <slot name=\"header\" :value=\"d_value\" :suggestions=\"visibleOptions\"></slot>\n                    <div :class=\"cx('listContainer')\" :style=\"{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }\" v-bind=\"ptm('listContainer')\">\n                        <VirtualScroller :ref=\"virtualScrollerRef\" v-bind=\"virtualScrollerOptions\" :style=\"{ height: scrollHeight }\" :items=\"visibleOptions\" :tabindex=\"-1\" :disabled=\"virtualScrollerDisabled\" :pt=\"ptm('virtualScroller')\">\n                            <template v-slot:content=\"{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }\">\n                                <ul :ref=\"(el) => listRef(el, contentRef)\" :id=\"$id + '_list'\" :class=\"[cx('list'), styleClass]\" :style=\"contentStyle\" role=\"listbox\" :aria-label=\"listAriaLabel\" v-bind=\"ptm('list')\">\n                                    <template v-for=\"(option, i) of items\" :key=\"getOptionRenderKey(option, getOptionIndex(i, getItemOptions))\">\n                                        <li\n                                            v-if=\"isOptionGroup(option)\"\n                                            :id=\"$id + '_' + getOptionIndex(i, getItemOptions)\"\n                                            :style=\"{ height: itemSize ? itemSize + 'px' : undefined }\"\n                                            :class=\"cx('optionGroup')\"\n                                            role=\"option\"\n                                            v-bind=\"ptm('optionGroup')\"\n                                        >\n                                            <slot name=\"optiongroup\" :option=\"option.optionGroup\" :index=\"getOptionIndex(i, getItemOptions)\">{{ getOptionGroupLabel(option.optionGroup) }}</slot>\n                                        </li>\n                                        <li\n                                            v-else\n                                            :id=\"$id + '_' + getOptionIndex(i, getItemOptions)\"\n                                            v-ripple\n                                            :style=\"{ height: itemSize ? itemSize + 'px' : undefined }\"\n                                            :class=\"cx('option', { option, i, getItemOptions })\"\n                                            role=\"option\"\n                                            :aria-label=\"getOptionLabel(option)\"\n                                            :aria-selected=\"isSelected(option)\"\n                                            :aria-disabled=\"isOptionDisabled(option)\"\n                                            :aria-setsize=\"ariaSetSize\"\n                                            :aria-posinset=\"getAriaPosInset(getOptionIndex(i, getItemOptions))\"\n                                            @click=\"onOptionSelect($event, option)\"\n                                            @mousemove=\"onOptionMouseMove($event, getOptionIndex(i, getItemOptions))\"\n                                            :data-p-selected=\"isSelected(option)\"\n                                            :data-p-focused=\"focusedOptionIndex === getOptionIndex(i, getItemOptions)\"\n                                            :data-p-disabled=\"isOptionDisabled(option)\"\n                                            v-bind=\"getPTOptions(option, getItemOptions, i, 'option')\"\n                                        >\n                                            <slot name=\"option\" :option=\"option\" :index=\"getOptionIndex(i, getItemOptions)\">{{ getOptionLabel(option) }}</slot>\n                                        </li>\n                                    </template>\n                                    <li v-if=\"showEmptyMessage && (!items || (items && items.length === 0))\" :class=\"cx('emptyMessage')\" role=\"option\" v-bind=\"ptm('emptyMessage')\">\n                                        <slot name=\"empty\">{{ searchResultMessageText }}</slot>\n                                    </li>\n                                </ul>\n                            </template>\n                            <template v-if=\"$slots.loader\" v-slot:loader=\"{ options }\">\n                                <slot name=\"loader\" :options=\"options\"></slot>\n                            </template>\n                        </VirtualScroller>\n                    </div>\n                    <slot name=\"footer\" :value=\"d_value\" :suggestions=\"visibleOptions\"></slot>\n                    <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenSelectedMessage')\" :data-p-hidden-accessible=\"true\">\n                        {{ selectedMessageText }}\n                    </span>\n                </div>\n            </transition>\n        </Portal>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { absolutePosition, addStyle, findSingle, focus, getOuterWidth, isTouchDevice, relativePosition } from '@primeuix/utils/dom';\nimport { equals, findLastIndex, isEmpty, isNotEmpty, resolveFieldData } from '@primeuix/utils/object';\nimport { ZIndex } from '@primeuix/utils/zindex';\nimport { ConnectedOverlayScrollHandler } from '@primevue/core/utils';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport SpinnerIcon from '@primevue/icons/spinner';\nimport Chip from 'primevue/chip';\nimport InputText from 'primevue/inputtext';\nimport OverlayEventBus from 'primevue/overlayeventbus';\nimport Portal from 'primevue/portal';\nimport Ripple from 'primevue/ripple';\nimport VirtualScroller from 'primevue/virtualscroller';\nimport BaseAutoComplete from './BaseAutoComplete.vue';\n\nexport default {\n    name: 'AutoComplete',\n    extends: BaseAutoComplete,\n    inheritAttrs: false,\n    emits: ['change', 'focus', 'blur', 'item-select', 'item-unselect', 'option-select', 'option-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],\n    inject: {\n        $pcFluid: { default: null }\n    },\n    outsideClickListener: null,\n    resizeListener: null,\n    scrollHandler: null,\n    overlay: null,\n    virtualScroller: null,\n    searchTimeout: null,\n    dirty: false,\n    startRangeIndex: -1,\n    data() {\n        return {\n            clicked: false,\n            focused: false,\n            focusedOptionIndex: -1,\n            focusedMultipleOptionIndex: -1,\n            overlayVisible: false,\n            searching: false\n        };\n    },\n    watch: {\n        suggestions() {\n            if (this.searching) {\n                this.show();\n                this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;\n                this.searching = false;\n                !this.showEmptyMessage && this.visibleOptions.length === 0 && this.hide();\n            }\n\n            this.autoUpdateModel();\n        }\n    },\n    mounted() {\n        this.autoUpdateModel();\n    },\n    updated() {\n        if (this.overlayVisible) {\n            this.alignOverlay();\n        }\n    },\n    beforeUnmount() {\n        this.unbindOutsideClickListener();\n        this.unbindResizeListener();\n\n        if (this.scrollHandler) {\n            this.scrollHandler.destroy();\n            this.scrollHandler = null;\n        }\n\n        if (this.overlay) {\n            ZIndex.clear(this.overlay);\n            this.overlay = null;\n        }\n    },\n    methods: {\n        getOptionIndex(index, fn) {\n            return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];\n        },\n        getOptionLabel(option) {\n            return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;\n        },\n        getOptionValue(option) {\n            return option; // TODO: The 'optionValue' properties can be added.\n        },\n        getOptionRenderKey(option, index) {\n            return (this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;\n        },\n        getPTOptions(option, itemOptions, index, key) {\n            return this.ptm(key, {\n                context: {\n                    option,\n                    index,\n                    selected: this.isSelected(option),\n                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),\n                    disabled: this.isOptionDisabled(option)\n                }\n            });\n        },\n        isOptionDisabled(option) {\n            return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n        },\n        isOptionGroup(option) {\n            return this.optionGroupLabel && option.optionGroup && option.group;\n        },\n        getOptionGroupLabel(optionGroup) {\n            return resolveFieldData(optionGroup, this.optionGroupLabel);\n        },\n        getOptionGroupChildren(optionGroup) {\n            return resolveFieldData(optionGroup, this.optionGroupChildren);\n        },\n        getAriaPosInset(index) {\n            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;\n        },\n        show(isFocus) {\n            this.$emit('before-show');\n            this.dirty = true;\n            this.overlayVisible = true;\n            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;\n            isFocus && focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);\n        },\n        hide(isFocus) {\n            const _hide = () => {\n                this.$emit('before-hide');\n                this.dirty = isFocus;\n                this.overlayVisible = false;\n                this.clicked = false;\n                this.focusedOptionIndex = -1;\n\n                isFocus && focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput?.$el);\n            };\n\n            setTimeout(() => {\n                _hide();\n            }, 0); // For ScreenReaders\n        },\n        onFocus(event) {\n            if (this.disabled) {\n                // For ScreenReaders\n                return;\n            }\n\n            if (!this.dirty && this.completeOnFocus) {\n                this.search(event, event.target.value, 'focus');\n            }\n\n            this.dirty = true;\n            this.focused = true;\n\n            if (this.overlayVisible) {\n                this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;\n                this.scrollInView(this.focusedOptionIndex);\n            }\n\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            this.dirty = false;\n            this.focused = false;\n            this.focusedOptionIndex = -1;\n            this.$emit('blur', event);\n            this.formField.onBlur?.();\n        },\n        onKeyDown(event) {\n            if (this.disabled) {\n                event.preventDefault();\n\n                return;\n            }\n\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUpKey(event);\n                    break;\n\n                case 'ArrowLeft':\n                    this.onArrowLeftKey(event);\n                    break;\n\n                case 'ArrowRight':\n                    this.onArrowRightKey(event);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event);\n                    break;\n\n                case 'PageDown':\n                    this.onPageDownKey(event);\n                    break;\n\n                case 'PageUp':\n                    this.onPageUpKey(event);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                    this.onEnterKey(event);\n                    break;\n\n                case 'Space':\n                    this.onSpaceKey(event);\n                    break;\n\n                case 'Escape':\n                    this.onEscapeKey(event);\n                    break;\n\n                case 'Tab':\n                    this.onTabKey(event);\n                    break;\n\n                case 'ShiftLeft':\n                case 'ShiftRight':\n                    this.onShiftKey(event);\n                    break;\n\n                case 'Backspace':\n                    this.onBackspaceKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n\n            this.clicked = false;\n        },\n        onInput(event) {\n            if (this.typeahead) {\n                if (this.searchTimeout) {\n                    clearTimeout(this.searchTimeout);\n                }\n\n                let query = event.target.value;\n\n                if (!this.multiple) {\n                    this.updateModel(event, query);\n                }\n\n                if (query.length === 0) {\n                    this.hide();\n                    this.$emit('clear');\n                } else {\n                    if (query.length >= this.minLength) {\n                        this.focusedOptionIndex = -1;\n\n                        this.searchTimeout = setTimeout(() => {\n                            this.search(event, query, 'input');\n                        }, this.delay);\n                    } else {\n                        this.hide();\n                    }\n                }\n            }\n        },\n        onChange(event) {\n            if (this.forceSelection) {\n                let valid = false;\n\n                // when forceSelection is on, prevent called twice onOptionSelect()\n                if (this.visibleOptions && !this.multiple) {\n                    let value = this.multiple ? this.$refs.focusInput.value : this.$refs.focusInput?.$el?.value;\n                    const matchedValue = this.visibleOptions.find((option) => this.isOptionMatched(option, value || ''));\n\n                    if (matchedValue !== undefined) {\n                        valid = true;\n                        !this.isSelected(matchedValue) && this.onOptionSelect(event, matchedValue);\n                    }\n                }\n\n                if (!valid) {\n                    if (this.multiple) {\n                        this.$refs.focusInput.value = '';\n                    } else {\n                        const inputEl = this.$refs.focusInput?.$el;\n                        inputEl && (inputEl.value = '');\n                    }\n                    this.$emit('clear');\n                    !this.multiple && this.updateModel(event, null);\n                }\n            }\n        },\n        onMultipleContainerFocus() {\n            if (this.disabled) {\n                // For ScreenReaders\n                return;\n            }\n\n            this.focused = true;\n        },\n        onMultipleContainerBlur() {\n            this.focusedMultipleOptionIndex = -1;\n            this.focused = false;\n        },\n        onMultipleContainerKeyDown(event) {\n            if (this.disabled) {\n                event.preventDefault();\n\n                return;\n            }\n\n            switch (event.code) {\n                case 'ArrowLeft':\n                    this.onArrowLeftKeyOnMultiple(event);\n                    break;\n\n                case 'ArrowRight':\n                    this.onArrowRightKeyOnMultiple(event);\n                    break;\n\n                case 'Backspace':\n                    this.onBackspaceKeyOnMultiple(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onContainerClick(event) {\n            this.clicked = true;\n\n            if (this.disabled || this.searching || this.loading || this.isDropdownClicked(event)) {\n                return;\n            }\n\n            if (!this.overlay || !this.overlay.contains(event.target)) {\n                focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);\n            }\n        },\n        onDropdownClick(event) {\n            let query = undefined;\n\n            if (this.overlayVisible) {\n                this.hide(true);\n            } else {\n                let target = this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el;\n\n                focus(target);\n                query = target.value;\n\n                if (this.dropdownMode === 'blank') this.search(event, '', 'dropdown');\n                else if (this.dropdownMode === 'current') this.search(event, query, 'dropdown');\n            }\n\n            this.$emit('dropdown-click', { originalEvent: event, query });\n        },\n        onOptionSelect(event, option, isHide = true) {\n            const value = this.getOptionValue(option);\n\n            if (this.multiple) {\n                this.$refs.focusInput.value = '';\n\n                if (!this.isSelected(option)) {\n                    this.updateModel(event, [...(this.d_value || []), value]);\n                }\n            } else {\n                this.updateModel(event, value);\n            }\n\n            this.$emit('item-select', { originalEvent: event, value: option });\n            this.$emit('option-select', { originalEvent: event, value: option });\n\n            isHide && this.hide(true);\n        },\n        onOptionMouseMove(event, index) {\n            if (this.focusOnHover) {\n                this.changeFocusedOptionIndex(event, index);\n            }\n        },\n        onOptionSelectRange(event, start = -1, end = -1) {\n            start === -1 && (start = this.findNearestSelectedOptionIndex(end, true));\n            end === -1 && (end = this.findNearestSelectedOptionIndex(start));\n\n            if (start !== -1 && end !== -1) {\n                const rangeStart = Math.min(start, end);\n                const rangeEnd = Math.max(start, end);\n                const value = this.visibleOptions\n                    .slice(rangeStart, rangeEnd + 1)\n                    .filter((option) => this.isValidOption(option))\n                    .map((option) => this.getOptionValue(option));\n\n                this.updateModel(event, value);\n            }\n        },\n        onOverlayClick(event) {\n            OverlayEventBus.emit('overlay-click', {\n                originalEvent: event,\n                target: this.$el\n            });\n        },\n        onOverlayKeyDown(event) {\n            switch (event.code) {\n                case 'Escape':\n                    this.onEscapeKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDownKey(event) {\n            if (!this.overlayVisible) {\n                return;\n            }\n\n            const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();\n\n            if (this.multiple && event.shiftKey) {\n                this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);\n            }\n\n            this.changeFocusedOptionIndex(event, optionIndex);\n\n            event.preventDefault();\n        },\n        onArrowUpKey(event) {\n            if (!this.overlayVisible) {\n                return;\n            }\n\n            if (event.altKey) {\n                if (this.focusedOptionIndex !== -1) {\n                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);\n                }\n\n                this.overlayVisible && this.hide();\n                event.preventDefault();\n            } else {\n                const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();\n\n                if (this.multiple && event.shiftKey) {\n                    this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);\n                }\n\n                this.changeFocusedOptionIndex(event, optionIndex);\n\n                event.preventDefault();\n            }\n        },\n        onArrowLeftKey(event) {\n            const target = event.currentTarget;\n\n            this.focusedOptionIndex = -1;\n\n            if (this.multiple) {\n                if (isEmpty(target.value) && this.$filled) {\n                    focus(this.$refs.multiContainer);\n                    this.focusedMultipleOptionIndex = this.d_value.length;\n                } else {\n                    event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method\n                }\n            }\n        },\n        onArrowRightKey(event) {\n            this.focusedOptionIndex = -1;\n\n            this.multiple && event.stopPropagation(); // To prevent onArrowRightKeyOnMultiple method\n        },\n        onHomeKey(event) {\n            const { currentTarget } = event;\n            const len = currentTarget.value.length;\n            const metaKey = event.metaKey || event.ctrlKey;\n            const optionIndex = this.findFirstOptionIndex();\n\n            if (this.multiple && event.shiftKey && metaKey) {\n                this.onOptionSelectRange(event, optionIndex, this.startRangeIndex);\n            }\n\n            currentTarget.setSelectionRange(0, event.shiftKey ? len : 0);\n            this.focusedOptionIndex = -1;\n\n            event.preventDefault();\n        },\n        onEndKey(event) {\n            const { currentTarget } = event;\n            const len = currentTarget.value.length;\n            const metaKey = event.metaKey || event.ctrlKey;\n            const optionIndex = this.findLastOptionIndex();\n\n            if (this.multiple && event.shiftKey && metaKey) {\n                this.onOptionSelectRange(event, this.startRangeIndex, optionIndex);\n            }\n\n            currentTarget.setSelectionRange(event.shiftKey ? 0 : len, len);\n            this.focusedOptionIndex = -1;\n\n            event.preventDefault();\n        },\n        onPageUpKey(event) {\n            this.scrollInView(0);\n            event.preventDefault();\n        },\n        onPageDownKey(event) {\n            this.scrollInView(this.visibleOptions.length - 1);\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            if (!this.typeahead) {\n                if (this.multiple) {\n                    if (event.target.value.trim()) {\n                        this.updateModel(event, [...(this.d_value || []), event.target.value.trim()]);\n                        this.$refs.focusInput.value = '';\n                    }\n                }\n            } else {\n                if (!this.overlayVisible) {\n                    this.focusedOptionIndex = -1; // reset\n                    this.onArrowDownKey(event);\n                } else {\n                    if (this.focusedOptionIndex !== -1) {\n                        if (this.multiple && event.shiftKey) {\n                            this.onOptionSelectRange(event, this.focusedOptionIndex);\n                            event.preventDefault();\n                        } else {\n                            this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);\n                        }\n                    }\n\n                    this.hide();\n                }\n            }\n        },\n        onSpaceKey(event) {\n            if (this.focusedOptionIndex !== -1) {\n                this.onEnterKey(event);\n            }\n        },\n        onEscapeKey(event) {\n            this.overlayVisible && this.hide(true);\n            event.preventDefault();\n        },\n        onTabKey(event) {\n            if (this.focusedOptionIndex !== -1) {\n                this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);\n            }\n\n            this.overlayVisible && this.hide();\n        },\n        onShiftKey() {\n            this.startRangeIndex = this.focusedOptionIndex;\n        },\n        onBackspaceKey(event) {\n            if (this.multiple) {\n                if (isNotEmpty(this.d_value) && !this.$refs.focusInput.value) {\n                    const removedValue = this.d_value[this.d_value.length - 1];\n                    const newValue = this.d_value.slice(0, -1);\n\n                    this.writeValue(newValue, event);\n                    this.$emit('item-unselect', { originalEvent: event, value: removedValue });\n                    this.$emit('option-unselect', { originalEvent: event, value: removedValue });\n                }\n\n                event.stopPropagation(); // To prevent onBackspaceKeyOnMultiple method\n            }\n        },\n        onArrowLeftKeyOnMultiple() {\n            this.focusedMultipleOptionIndex = this.focusedMultipleOptionIndex < 1 ? 0 : this.focusedMultipleOptionIndex - 1;\n        },\n        onArrowRightKeyOnMultiple() {\n            this.focusedMultipleOptionIndex++;\n\n            if (this.focusedMultipleOptionIndex > this.d_value.length - 1) {\n                this.focusedMultipleOptionIndex = -1;\n                focus(this.$refs.focusInput);\n            }\n        },\n        onBackspaceKeyOnMultiple(event) {\n            if (this.focusedMultipleOptionIndex !== -1) {\n                this.removeOption(event, this.focusedMultipleOptionIndex);\n            }\n        },\n        onOverlayEnter(el) {\n            ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);\n\n            addStyle(el, { position: 'absolute', top: '0' });\n            this.alignOverlay();\n        },\n        onOverlayAfterEnter() {\n            this.bindOutsideClickListener();\n            this.bindScrollListener();\n            this.bindResizeListener();\n\n            this.$emit('show');\n        },\n        onOverlayLeave() {\n            this.unbindOutsideClickListener();\n            this.unbindScrollListener();\n            this.unbindResizeListener();\n\n            this.$emit('hide');\n            this.overlay = null;\n        },\n        onOverlayAfterLeave(el) {\n            ZIndex.clear(el);\n        },\n        alignOverlay() {\n            let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput.$el;\n\n            if (this.appendTo === 'self') {\n                relativePosition(this.overlay, target);\n            } else {\n                this.overlay.style.minWidth = getOuterWidth(target) + 'px';\n                absolutePosition(this.overlay, target);\n            }\n        },\n        bindOutsideClickListener() {\n            if (!this.outsideClickListener) {\n                this.outsideClickListener = (event) => {\n                    if (this.overlayVisible && this.overlay && this.isOutsideClicked(event)) {\n                        this.hide();\n                    }\n                };\n\n                document.addEventListener('click', this.outsideClickListener, true);\n            }\n        },\n        unbindOutsideClickListener() {\n            if (this.outsideClickListener) {\n                document.removeEventListener('click', this.outsideClickListener, true);\n                this.outsideClickListener = null;\n            }\n        },\n        bindScrollListener() {\n            if (!this.scrollHandler) {\n                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {\n                    if (this.overlayVisible) {\n                        this.hide();\n                    }\n                });\n            }\n\n            this.scrollHandler.bindScrollListener();\n        },\n        unbindScrollListener() {\n            if (this.scrollHandler) {\n                this.scrollHandler.unbindScrollListener();\n            }\n        },\n        bindResizeListener() {\n            if (!this.resizeListener) {\n                this.resizeListener = () => {\n                    if (this.overlayVisible && !isTouchDevice()) {\n                        this.hide();\n                    }\n                };\n\n                window.addEventListener('resize', this.resizeListener);\n            }\n        },\n        unbindResizeListener() {\n            if (this.resizeListener) {\n                window.removeEventListener('resize', this.resizeListener);\n                this.resizeListener = null;\n            }\n        },\n        isOutsideClicked(event) {\n            return !this.overlay.contains(event.target) && !this.isInputClicked(event) && !this.isDropdownClicked(event);\n        },\n        isInputClicked(event) {\n            if (this.multiple) return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);\n            else return event.target === this.$refs.focusInput.$el;\n        },\n        isDropdownClicked(event) {\n            return this.$refs.dropdownButton ? event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.contains(event.target) : false;\n        },\n        isOptionMatched(option, value) {\n            return this.isValidOption(option) && this.getOptionLabel(option)?.toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);\n        },\n        isValidOption(option) {\n            return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));\n        },\n        isValidSelectedOption(option) {\n            return this.isValidOption(option) && this.isSelected(option);\n        },\n        isEquals(value1, value2) {\n            return equals(value1, value2, this.equalityKey);\n        },\n        isSelected(option) {\n            const optionValue = this.getOptionValue(option);\n\n            return this.multiple ? (this.d_value || []).some((value) => this.isEquals(value, optionValue)) : this.isEquals(this.d_value, this.getOptionValue(option));\n        },\n        findFirstOptionIndex() {\n            return this.visibleOptions.findIndex((option) => this.isValidOption(option));\n        },\n        findLastOptionIndex() {\n            return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));\n        },\n        findNextOptionIndex(index) {\n            const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;\n        },\n        findPrevOptionIndex(index) {\n            const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex : index;\n        },\n        findSelectedOptionIndex() {\n            return this.$filled ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;\n        },\n        findFirstFocusedOptionIndex() {\n            const selectedIndex = this.findSelectedOptionIndex();\n\n            return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;\n        },\n        findLastFocusedOptionIndex() {\n            const selectedIndex = this.findSelectedOptionIndex();\n\n            return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;\n        },\n        search(event, query, source) {\n            //allow empty string but not undefined or null\n            if (query === undefined || query === null) {\n                return;\n            }\n\n            //do not search blank values on input change\n            if (source === 'input' && query.trim().length === 0) {\n                return;\n            }\n\n            this.searching = true;\n            this.$emit('complete', { originalEvent: event, query });\n        },\n        removeOption(event, index) {\n            const removedOption = this.d_value[index];\n            const value = this.d_value.filter((_, i) => i !== index).map((option) => this.getOptionValue(option));\n\n            this.updateModel(event, value);\n            this.$emit('item-unselect', { originalEvent: event, value: removedOption });\n            this.$emit('option-unselect', { originalEvent: event, value: removedOption });\n            this.dirty = true;\n            focus(this.multiple ? this.$refs.focusInput : this.$refs.focusInput.$el);\n        },\n        changeFocusedOptionIndex(event, index) {\n            if (this.focusedOptionIndex !== index) {\n                this.focusedOptionIndex = index;\n                this.scrollInView();\n\n                if (this.selectOnFocus) {\n                    this.onOptionSelect(event, this.visibleOptions[index], false);\n                }\n            }\n        },\n        scrollInView(index = -1) {\n            this.$nextTick(() => {\n                const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;\n                const element = findSingle(this.list, `li[id=\"${id}\"]`);\n\n                if (element) {\n                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });\n                } else if (!this.virtualScrollerDisabled) {\n                    this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);\n                }\n            });\n        },\n        autoUpdateModel() {\n            if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {\n                this.focusedOptionIndex = this.findFirstFocusedOptionIndex();\n                this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);\n            }\n        },\n        updateModel(event, value) {\n            this.writeValue(value, event);\n            this.$emit('change', { originalEvent: event, value });\n        },\n        flatOptions(options) {\n            return (options || []).reduce((result, option, index) => {\n                result.push({ optionGroup: option, group: true, index });\n\n                const optionGroupChildren = this.getOptionGroupChildren(option);\n\n                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));\n\n                return result;\n            }, []);\n        },\n        overlayRef(el) {\n            this.overlay = el;\n        },\n        listRef(el, contentRef) {\n            this.list = el;\n            contentRef && contentRef(el); // For VirtualScroller\n        },\n        virtualScrollerRef(el) {\n            this.virtualScroller = el;\n        },\n        findNextSelectedOptionIndex(index) {\n            const matchedOptionIndex = this.$filled && index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidSelectedOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : -1;\n        },\n        findPrevSelectedOptionIndex(index) {\n            const matchedOptionIndex = this.$filled && index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidSelectedOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex : -1;\n        },\n        findNearestSelectedOptionIndex(index, firstCheckUp = false) {\n            let matchedOptionIndex = -1;\n\n            if (this.$filled) {\n                if (firstCheckUp) {\n                    matchedOptionIndex = this.findPrevSelectedOptionIndex(index);\n                    matchedOptionIndex = matchedOptionIndex === -1 ? this.findNextSelectedOptionIndex(index) : matchedOptionIndex;\n                } else {\n                    matchedOptionIndex = this.findNextSelectedOptionIndex(index);\n                    matchedOptionIndex = matchedOptionIndex === -1 ? this.findPrevSelectedOptionIndex(index) : matchedOptionIndex;\n                }\n            }\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex : index;\n        }\n    },\n    computed: {\n        visibleOptions() {\n            return this.optionGroupLabel ? this.flatOptions(this.suggestions) : this.suggestions || [];\n        },\n        inputValue() {\n            if (this.$filled) {\n                if (typeof this.d_value === 'object') {\n                    const label = this.getOptionLabel(this.d_value);\n\n                    return label != null ? label : this.d_value;\n                } else {\n                    return this.d_value;\n                }\n            } else {\n                return '';\n            }\n        },\n        // @deprecated use $filled instead.\n        hasSelectedOption() {\n            return this.$filled;\n        },\n        equalityKey() {\n            // @todo: The 'optionValue' properties can be added.\n            return this.dataKey;\n        },\n        searchResultMessageText() {\n            return isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText;\n        },\n        searchMessageText() {\n            return this.searchMessage || this.$primevue.config.locale.searchMessage || '';\n        },\n        emptySearchMessageText() {\n            return this.emptySearchMessage || this.$primevue.config.locale.emptySearchMessage || '';\n        },\n        selectionMessageText() {\n            return this.selectionMessage || this.$primevue.config.locale.selectionMessage || '';\n        },\n        emptySelectionMessageText() {\n            return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage || '';\n        },\n        selectedMessageText() {\n            return this.$filled ? this.selectionMes