<template>
    <div :class="cx('root')" v-bind="ptmi('root')">
        <div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')" data-pc-group-section="controls">
            <slot name="sourcecontrolsstart"></slot>
            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" @click="moveUp($event, 0)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcSourceMoveUpButton')" :unstyled="unstyled">
                <slot name="moveupicon">
                    <AngleUp v-bind="ptm('pcSourceMoveUpButton')['icon']" data-pc-section="moveupicon" />
                </slot>
            </Button>
            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" @click="moveTop($event, 0)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcSourceMoveTopButton')" :unstyled="unstyled">
                <slot name="movetopicon">
                    <AngleDoubleUp v-bind="ptm('pcSourceMoveTopButton')['icon']" data-pc-section="movetopicon" />
                </slot>
            </Button>
            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" @click="moveDown($event, 0)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcSourceMoveDownButton')" :unstyled="unstyled">
                <slot name="movedownicon">
                    <AngleDown v-bind="ptm('pcSourceMoveDownButton')['icon']" data-pc-section="movedownicon" />
                </slot>
            </Button>
            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" @click="moveBottom($event, 0)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcSourceMoveBottomButton')" :unstyled="unstyled">
                <slot name="movebottomicon">
                    <AngleDoubleDown v-bind="ptm('pcSourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
                </slot>
            </Button>
            <slot name="sourcecontrolsend"></slot>
        </div>
        <div :class="cx('sourceListContainer')" v-bind="ptm('sourceListContainer')" data-pc-group-section="listcontainer">
            <Listbox
                ref="sourceList"
                :id="idSource + '_list'"
                :modelValue="d_selection[0]"
                :options="sourceList"
                multiple
                :metaKeySelection="metaKeySelection"
                :listStyle="listStyle"
                :scrollHeight="scrollHeight"
                :tabindex="sourceList && sourceList.length > 0 ? tabindex : -1"
                :dataKey="dataKey"
                :autoOptionFocus="autoOptionFocus"
                :focusOnHover="focusOnHover"
                :striped="striped"
                :disabled="disabled"
                :filter="!!filterBy && showSourceFilter"
                :filterPlaceholder="sourceFilterPlaceholder"
                :filterLocale="filterLocale"
                :filterMatchMode="filterMatchMode"
                :filterFields="filterFieldsValue"
                :filterMessage="filterMessage"
                :emptyFilterMessage="emptyFilterMessage"
                :emptyMessage="emptyMessage"
                @focus="onListFocus($event, 'sourceList')"
                @blur="onListBlur($event, 'sourceList')"
                @change="onChangeSelection($event, 0)"
                @item-dblclick="onItemDblClick($event, 0)"
                @filter="onFilter($event, 'source')"
                :pt="ptm('pcListbox')"
                :unstyled="unstyled"
                data-pc-group-section="list"
            >
                <template v-if="$slots.sourceheader" #header>
                    <slot name="sourceheader"></slot>
                </template>
                <template v-if="$slots.sourcefiltericon" #filtericon>
                    <slot name="sourcefiltericon"></slot>
                </template>
                <template #option="{ option, selected, index }">
                    <slot name="option" :item="option" :option="option" :selected="selected" :index="index" />
                </template>
                <template v-if="$slots.sourceempty" #empty>
                    <slot name="sourceempty"></slot>
                </template>
                <template v-if="$slots.sourceemptyfilter" #emptyfilter>
                    <slot name="sourceemptyfilter"></slot>
                </template>
                <template v-if="$slots.sourcefooter" #footer>
                    <slot name="sourcefooter"></slot>
                </template>
            </Listbox>
        </div>
        <div :class="cx('transferControls')" v-bind="ptm('transferControls')" data-pc-group-section="controls">
            <slot name="movecontrolsstart"></slot>
            <Button :aria-label="moveToTargetAriaLabel" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...buttonProps, ...moveToTargetProps }" :pt="ptm('pcMoveToTargetButton')" :unstyled="unstyled">
                <slot name="movetotargeticon" :viewChanged="viewChanged">
                    <component :is="viewChanged ? 'AngleDown' : 'AngleRight'" v-bind="ptm('pcMoveToTargetButton')['icon']" data-pc-section="movetotargeticon" />
                </slot>
            </Button>
            <Button :aria-label="moveAllToTargetAriaLabel" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="{ ...buttonProps, ...moveAllToTargetProps }" :pt="ptm('pcMoveAllToTargetButton')" :unstyled="unstyled">
                <slot name="movealltotargeticon" :viewChanged="viewChanged">
                    <component :is="viewChanged ? 'AngleDoubleDown' : 'AngleDoubleRight'" v-bind="ptm('pcMoveAllToTargetButton')['icon']" data-pc-section="movealltotargeticon" />
                </slot>
            </Button>
            <Button :aria-label="moveToSourceAriaLabel" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="{ ...buttonProps, ...moveToSourceProps }" :pt="ptm('pcMoveToSourceButton')" :unstyled="unstyled">
                <slot name="movetosourceicon" :viewChanged="viewChanged">
                    <component :is="viewChanged ? 'AngleUp' : 'AngleLeft'" v-bind="ptm('pcMoveToSourceButton')['icon']" data-pc-section="movetosourceicon" />
                </slot>
            </Button>
            <Button :aria-label="moveAllToSourceAriaLabel" @click="moveAllToSource" :disabled="moveAllDisabled('targetList')" v-bind="{ ...buttonProps, ...moveAllToSourceProps }" :pt="ptm('pcMoveAllToSourceButton')" :unstyled="unstyled">
                <slot name="movealltosourceicon" :viewChanged="viewChanged">
                    <component :is="viewChanged ? 'AngleDoubleUp' : 'AngleDoubleLeft'" v-bind="ptm('pcMoveAllToSourceButton')['icon']" data-pc-section="movealltosourceicon" />
                </slot>
            </Button>
            <slot name="movecontrolsend"></slot>
        </div>
        <div :class="cx('targetListContainer')" v-bind="ptm('targetListContainer')" data-pc-group-section="listcontainer">
            <Listbox
                ref="targetList"
                :id="idTarget + '_list'"
                :modelValue="d_selection[1]"
                :options="targetList"
                multiple
                :metaKeySelection="metaKeySelection"
                :listStyle="listStyle"
                :scrollHeight="scrollHeight"
                :tabindex="targetList && targetList.length > 0 ? tabindex : -1"
                :dataKey="dataKey"
                :autoOptionFocus="autoOptionFocus"
                :focusOnHover="focusOnHover"
                :striped="striped"
                :disabled="disabled"
                :filter="!!filterBy && showTargetFilter"
                :filterPlaceholder="targetFilterPlaceholder"
                :filterLocale="filterLocale"
                :filterMatchMode="filterMatchMode"
                :filterFields="filterFieldsValue"
                :filterMessage="filterMessage"
                :emptyFilterMessage="emptyFilterMessage"
                :emptyMessage="emptyMessage"
                @focus="onListFocus($event, 'targetList')"
                @blur="onListBlur($event, 'targetList')"
                @change="onChangeSelection($event, 1)"
                @item-dblclick="onItemDblClick($event, 1)"
                @filter="onFilter($event, 'target')"
                :pt="ptm('pcListbox')"
                :unstyled="unstyled"
                data-pc-group-section="list"
            >
                <template v-if="$slots.targetheader" #header>
                    <slot name="targetheader"></slot>
                </template>
                <template v-if="$slots.targetfiltericon" #filtericon>
                    <slot name="targetfiltericon"></slot>
                </template>
                <template #option="{ option, selected, index }">
                    <slot name="option" :item="option" :option="option" :selected="selected" :index="index" />
                </template>
                <template v-if="$slots.targetempty" #empty>
                    <slot name="targetempty"></slot>
                </template>
                <template v-if="$slots.targetemptyfilter" #emptyfilter>
                    <slot name="targetemptyfilter"></slot>
                </template>
                <template v-if="$slots.targetfooter" #footer>
                    <slot name="targetfooter"></slot>
                </template>
            </Listbox>
        </div>
        <div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls">
            <slot name="targetcontrolsstart"></slot>
            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" @click="moveUp($event, 1)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcTargetMoveUpButton')" :unstyled="unstyled">
                <slot name="moveupicon">
                    <AngleUp v-bind="ptm('pcTargetMoveUpButton')['icon']" data-pc-section="moveupicon" />
                </slot>
            </Button>
            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" @click="moveTop($event, 1)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcTargetMoveTopButton')" :unstyled="unstyled">
                <slot name="movetopicon">
                    <AngleDoubleUp v-bind="ptm('pcTargetMoveTopButton')['icon']" data-pc-section="movetopicon" />
                </slot>
            </Button>
            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" @click="moveDown($event, 1)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcTargetMoveDownButton')" :unstyled="unstyled">
                <slot name="movedownicon">
                    <AngleDown v-bind="ptm('pcTargetMoveDownButton')['icon']" data-pc-section="movedownicon" />
                </slot>
            </Button>
            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" @click="moveBottom($event, 1)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcTargetMoveBottomButton')" :unstyled="unstyled">
                <slot name="movebottomicon">
                    <AngleDoubleDown v-bind="ptm('pcTargetMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
                </slot>
            </Button>
            <slot name="targetcontrolsend"></slot>
        </div>
    </div>
</template>

<script>
import AngleDoubleDown from '@primeicons/vue/angle-double-down';
import AngleDoubleLeft from '@primeicons/vue/angle-double-left';
import AngleDoubleRight from '@primeicons/vue/angle-double-right';
import AngleDoubleUp from '@primeicons/vue/angle-double-up';
import AngleDown from '@primeicons/vue/angle-down';
import AngleLeft from '@primeicons/vue/angle-left';
import AngleRight from '@primeicons/vue/angle-right';
import AngleUp from '@primeicons/vue/angle-up';
import { find, setAttribute } from '@primeuix/utils/dom';
import { findIndexInList, isEmpty } from '@primeuix/utils/object';
import Button from 'primevue/button';
import Listbox from 'primevue/listbox';
import Ripple from 'primevue/ripple';
import BasePickList from './BasePickList.vue';

export default {
    name: 'PickList',
    extends: BasePickList,
    inheritAttrs: false,
    emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur', 'filter'],
    itemTouched: false,
    reorderDirection: null,
    reorderedListIndex: null,
    styleElement: null,
    media: null,
    mediaChangeListener: null,
    data() {
        return {
            d_selection: this.selection,
            viewChanged: false
        };
    },
    watch: {
        selection(newValue) {
            this.d_selection = newValue;
        },
        breakpoint() {
            this.destroyMedia();
            this.initMedia();
        }
    },
    updated() {
        if (this.reorderDirection) {
            this.updateListScroll(this.reorderedListIndex);
            this.reorderDirection = null;
            this.reorderedListIndex = null;
        }
    },
    beforeUnmount() {
        this.destroyStyle();
        this.destroyMedia();
    },
    mounted() {
        if (this.responsive) {
            this.createStyle();
            this.initMedia();
        }
    },
    methods: {
        updateSelection(event) {
            this.$emit('update:selection', this.d_selection);
            this.$emit('selection-change', {
                originalEvent: event,
                value: this.d_selection
            });
        },
        onChangeSelection(params, listIndex) {
            this.d_selection[listIndex] = params.value;
            this.updateSelection(params.event);
        },
        onListFocus(event, listType) {
            this.$emit('focus', event, listType);
        },
        onListBlur(event, listType) {
            this.$emit('blur', event, listType);
        },
        onFilter(event, type) {
            this.$emit('filter', {
                originalEvent: event.originalEvent,
                value: event.value,
                filterValue: event.filterValue,
                type
            });
        },
        onReorderUpdate(event, value, listIndex) {
            this.reorderedListIndex = listIndex;
            this.$emit('update:modelValue', value);
            this.$emit('reorder', {
                originalEvent: event,
                value: value,
                direction: this.reorderDirection,
                listIndex
            });
        },
        onItemDblClick(event, listIndex) {
            if (listIndex === 0) this.moveToTarget({ event: event.originalEvent });
            else if (listIndex === 1) this.moveToSource({ event: event.originalEvent });
        },
        moveUp(event, listIndex) {
            if (this.d_selection && this.d_selection[listIndex]) {
                let valueList = [...this.modelValue[listIndex]];
                let selectionList = this.d_selection[listIndex];
                const sortedSelection = this.sortByIndexInList(selectionList, valueList);

                for (let selectedItem of sortedSelection) {
                    let selectedItemIndex = findIndexInList(selectedItem, valueList);

                    if (selectedItemIndex > 0 && findIndexInList(valueList[selectedItemIndex - 1], selectionList) === -1) {
                        let movedItem = valueList[selectedItemIndex];
                        let temp = valueList[selectedItemIndex - 1];

                        valueList[selectedItemIndex - 1] = movedItem;
                        valueList[selectedItemIndex] = temp;
                    }
                }

                let value = [...this.modelValue];
                value[listIndex] = valueList;

                this.reorderDirection = 'up';
                this.onReorderUpdate(event, value, listIndex);
            }
        },
        moveTop(event, listIndex) {
            if (this.d_selection && this.d_selection[listIndex]) {
                let valueList = [...this.modelValue[listIndex]];
                let selectionList = this.d_selection[listIndex];
                const sortedSelection = this.sortByIndexInList(selectionList, valueList).reverse();

                for (let selectedItem of sortedSelection) {
                    let selectedItemIndex = findIndexInList(selectedItem, valueList);

                    if (selectedItemIndex !== 0) {
                        let movedItem = valueList.splice(selectedItemIndex, 1)[0];

                        valueList.unshift(movedItem);
                    }
                }

                let value = [...this.modelValue];
                value[listIndex] = valueList;

                this.reorderDirection = 'top';
                this.onReorderUpdate(event, value, listIndex);
            }
        },
        moveDown(event, listIndex) {
            if (this.d_selection && this.d_selection[listIndex]) {
                let valueList = [...this.modelValue[listIndex]];
                let selectionList = this.d_selection[listIndex];
                const sortedSelection = this.sortByIndexInList(selectionList, valueList).reverse();

                for (let selectedItem of sortedSelection) {
                    let selectedItemIndex = findIndexInList(selectedItem, valueList);

                    if (selectedItemIndex < valueList.length - 1 && findIndexInList(valueList[selectedItemIndex + 1], selectionList) === -1) {
                        let movedItem = valueList[selectedItemIndex];
                        let temp = valueList[selectedItemIndex + 1];

                        valueList[selectedItemIndex + 1] = movedItem;
                        valueList[selectedItemIndex] = temp;
                    }
                }

                let value = [...this.modelValue];
                value[listIndex] = valueList;

                this.reorderDirection = 'down';
                this.onReorderUpdate(event, value, listIndex);
            }
        },
        moveBottom(event, listIndex) {
            if (this.d_selection && this.d_selection[listIndex]) {
                let valueList = [...this.modelValue[listIndex]];
                let selectionList = this.d_selection[listIndex];
                const sortedSelection = this.sortByIndexInList(selectionList, valueList);

                for (let selectedItem of sortedSelection) {
                    let selectedItemIndex = findIndexInList(selectedItem, valueList);

                    if (selectedItemIndex !== valueList.length - 1) {
                        let movedItem = valueList.splice(selectedItemIndex, 1)[0];

                        valueList.push(movedItem);
                    }
                }

                let value = [...this.modelValue];
                value[listIndex] = valueList;

                this.reorderDirection = 'bottom';
                this.onReorderUpdate(event, value, listIndex);
            }
        },
        sortByIndexInList(items, list) {
            return [...items].sort((a, b) => findIndexInList(a, list) - findIndexInList(b, list));
        },
        moveToTarget(event) {
            let selection = this.d_selection && this.d_selection[0] ? this.d_selection[0] : null;
            let sourceList = [...this.modelValue[0]];
            let targetList = [...this.modelValue[1]];

            if (selection) {
                for (let i = 0; i < selection.length; i++) {
                    let selectedItem = selection[i];

                    if (findIndexInList(selectedItem, targetList) == -1) {
                        targetList.push(sourceList.splice(findIndexInList(selectedItem, sourceList), 1)[0]);
                    }
                }

                let value = [...this.modelValue];

                value[0] = sourceList;
                value[1] = targetList;
                this.$emit('update:modelValue', value);

                this.$emit('move-to-target', {
                    originalEvent: event,
                    items: [...new Set(selection)]
                });

                this.d_selection[0] = [];
                this.updateSelection(event);
            }
        },
        moveAllToTarget(event) {
            if (this.modelValue[0]) {
                let sourceList = [...this.modelValue[0]];
                let targetList = [...this.modelValue[1]];

                this.$emit('move-all-to-target', {
                    originalEvent: event,
                    items: sourceList
                });

                targetList = [...targetList, ...sourceList];
                sourceList = [];

                let value = [...this.modelValue];

                value[0] = sourceList;
                value[1] = targetList;
                this.$emit('update:modelValue', value);

                this.d_selection = [[], []];
                this.updateSelection(event);
            }
        },
        moveToSource(event) {
            let selection = this.d_selection && this.d_selection[1] ? this.d_selection[1] : null;
            let sourceList = [...this.modelValue[0]];
            let targetList = [...this.modelValue[1]];

            if (selection) {
                for (let i = 0; i < selection.length; i++) {
                    let selectedItem = selection[i];

                    if (findIndexInList(selectedItem, sourceList) == -1) {
                        sourceList.push(targetList.splice(findIndexInList(selectedItem, targetList), 1)[0]);
                    }
                }

                let value = [...this.modelValue];

                value[0] = sourceList;
                value[1] = targetList;
                this.$emit('update:modelValue', value);

                this.$emit('move-to-source', {
                    originalEvent: event,
                    items: [...new Set(selection)]
                });

                this.d_selection[1] = [];
                this.updateSelection(event);
            }
        },
        moveAllToSource(event) {
            if (this.modelValue[1]) {
                let sourceList = [...this.modelValue[0]];
                let targetList = [...this.modelValue[1]];

                this.$emit('move-all-to-source', {
                    originalEvent: event,
                    items: targetList
                });

                sourceList = [...sourceList, ...targetList];
                targetList = [];

                let value = [...this.modelValue];

                value[0] = sourceList;
                value[1] = targetList;
                this.$emit('update:modelValue', value);

                this.d_selection = [[], []];
                this.updateSelection(event);
            }
        },
        onItemClick(event, item, index, listIndex) {
            const listType = listIndex === 0 ? 'sourceList' : 'targetList';

            this.itemTouched = false;
            const selectionList = this.d_selection[listIndex];
            const selectedIndex = findIndexInList(item, selectionList);
            const selected = selectedIndex != -1;
            const metaSelection = this.itemTouched ? false : this.metaKeySelection;
            const selectedId = find(this.$refs[listType].$el, '[data-pc-section="item"]')[index].getAttribute('id');

            this.focusedOptionIndex = selectedId;
            let _selection;

            if (metaSelection) {
                let metaKey = event.metaKey || event.ctrlKey;

                if (selected && metaKey) {
                    _selection = selectionList.filter((val, index) => index !== selectedIndex);
                } else {
                    _selection = metaKey ? (selectionList ? [...selectionList] : []) : [];
                    _selection.push(item);
                }
            } else {
                if (selected) {
                    _selection = selectionList.filter((val, index) => index !== selectedIndex);
                } else {
                    _selection = selectionList ? [...selectionList] : [];
                    _selection.push(item);
                }
            }

            let newSelection = [...this.d_selection];

            newSelection[listIndex] = _selection;
            this.d_selection = newSelection;

            this.updateSelection(event);
        },
        updateListScroll(listIndex) {
            const listboxRef = listIndex === 0 ? this.$refs.sourceList : this.$refs.targetList;
            const selection = this.d_selection && this.d_selection[listIndex];

            if (!listboxRef || !selection || !selection.length) {
                return;
            }

            const indexes = selection.map((item) => findIndexInList(item, this.modelValue[listIndex]));
            const targetIndex = this.reorderDirection === 'up' || this.reorderDirection === 'top' ? Math.min(...indexes) : Math.max(...indexes);

            listboxRef.scrollInView(targetIndex);
        },
        initMedia() {
            this.media = window.matchMedia(`(max-width: ${this.breakpoint})`);
            this.viewChanged = this.media.matches;
            this.bindMediaChangeListener();
        },
        destroyMedia() {
            this.unbindMediaChangeListener();
        },
        bindMediaChangeListener() {
            if (this.media && !this.mediaChangeListener) {
                this.mediaChangeListener = (event) => {
                    this.viewChanged = event.matches;
                };

                this.media.addEventListener('change', this.mediaChangeListener);
            }
        },
        unbindMediaChangeListener() {
            if (this.media && this.mediaChangeListener) {
                this.media.removeEventListener('change', this.mediaChangeListener);
                this.mediaChangeListener = null;
            }
        },
        createStyle() {
            if (!this.styleElement && !this.isUnstyled) {
                this.styleElement = document.createElement('style');
                this.styleElement.type = 'text/css';
                setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
                document.head.appendChild(this.styleElement);

                let innerHTML = `
@media screen and (max-width: ${this.breakpoint}) {
    .p-picklist[${this.$attrSelector}] {
        flex-direction: column;
    }

    .p-picklist[${this.$attrSelector}] .p-picklist-controls {
        flex-direction: row;
    }
}
`;

                this.styleElement.innerHTML = innerHTML;
            }
        },
        destroyStyle() {
            if (this.styleElement) {
                document.head.removeChild(this.styleElement);
                this.styleElement = null;
            }
        },
        moveDisabled(index) {
            return this.disabled ? true : this.d_selection && (!this.d_selection[index] || !this.d_selection[index].length) ? true : false;
        },
        moveAllDisabled(list) {
            return this.disabled ? true : isEmpty(this[list]);
        }
    },
    computed: {
        filterFieldsValue() {
            if (!this.filterBy) return null;

            return Array.isArray(this.filterBy) ? this.filterBy : this.filterBy.split(',').map((field) => field.trim());
        },
        idSource() {
            return `${this.$id}_source`;
        },
        idTarget() {
            return `${this.$id}_target`;
        },
        sourceList() {
            return this.modelValue && this.modelValue[0] ? this.modelValue[0] : null;
        },
        targetList() {
            return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null;
        },
        moveUpAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;
        },
        moveTopAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveTop : undefined;
        },
        moveDownAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveDown : undefined;
        },
        moveBottomAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined;
        },
        moveToTargetAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveToTarget : undefined;
        },
        moveAllToTargetAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveAllToTarget : undefined;
        },
        moveToSourceAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveToSource : undefined;
        },
        moveAllToSourceAriaLabel() {
            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveAllToSource : undefined;
        }
    },
    components: {
        Listbox,
        Button,
        AngleRight,
        AngleLeft,
        AngleDown,
        AngleUp,
        AngleDoubleRight,
        AngleDoubleLeft,
        AngleDoubleDown,
        AngleDoubleUp
    },
    directives: {
        ripple: Ripple
    }
};
</script>
