import BaseComponent from 'primevue/basecomponent';
import Button from 'primevue/button';
import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
import AngleDoubleLeftIcon from 'primevue/icons/angledoubleleft';
import AngleDoubleRightIcon from 'primevue/icons/angledoubleright';
import AngleDoubleUpIcon from 'primevue/icons/angledoubleup';
import AngleDownIcon from 'primevue/icons/angledown';
import AngleLeftIcon from 'primevue/icons/angleleft';
import AngleRightIcon from 'primevue/icons/angleright';
import AngleUpIcon from 'primevue/icons/angleup';
import Ripple from 'primevue/ripple';
import { UniqueComponentId, ObjectUtils, DomHandler } from 'primevue/utils';
import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, renderSlot, createVNode, withCtx, normalizeProps, guardReactiveProps, createCommentVNode, createElementVNode, TransitionGroup, Fragment, renderList, withDirectives, createBlock, resolveDynamicComponent } from 'vue';

var script = {
    name: 'PickList',
    extends: BaseComponent,
    emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur'],
    props: {
        modelValue: {
            type: Array,
            default: () => [[], []]
        },
        selection: {
            type: Array,
            default: () => [[], []]
        },
        dataKey: {
            type: String,
            default: null
        },
        listStyle: {
            type: null,
            default: null
        },
        metaKeySelection: {
            type: Boolean,
            default: true
        },
        responsive: {
            type: Boolean,
            default: true
        },
        breakpoint: {
            type: String,
            default: '960px'
        },
        stripedRows: {
            type: Boolean,
            default: false
        },
        showSourceControls: {
            type: Boolean,
            default: true
        },
        showTargetControls: {
            type: Boolean,
            default: true
        },
        targetListProps: {
            type: null,
            default: null
        },
        sourceListProps: {
            type: null,
            default: null
        },
        moveUpButtonProps: {
            type: null,
            default: null
        },
        moveTopButtonProps: {
            type: null,
            default: null
        },
        moveDownButtonProps: {
            type: null,
            default: null
        },
        moveBottomButtonProps: {
            type: null,
            default: null
        },
        moveToTargetProps: {
            type: null,
            default: null
        },
        moveAllToTargetProps: {
            type: null,
            default: null
        },
        moveToSourceProps: {
            type: null,
            default: null
        },
        moveAllToSourceProps: {
            type: null,
            default: null
        },
        tabindex: {
            type: Number,
            default: 0
        }
    },
    itemTouched: false,
    reorderDirection: null,
    styleElement: null,
    media: null,
    mediaChangeListener: null,
    data() {
        return {
            id: this.$attrs.id,
            d_selection: this.selection,
            focused: {
                sourceList: false,
                targetList: false
            },
            focusedOptionIndex: -1,
            viewChanged: false
        };
    },
    watch: {
        '$attrs.id': function (newValue) {
            this.id = newValue || UniqueComponentId();
        },
        selection(newValue) {
            this.d_selection = newValue;
        },
        breakpoint(newValue) {
            this.destroyMedia();
            this.initMedia();
        }
    },
    updated() {
        if (this.reorderDirection) {
            this.updateListScroll(this.$refs.sourceList.$el);
            this.updateListScroll(this.$refs.targetList.$el);
            this.reorderDirection = null;
        }
    },
    beforeUnmount() {
        this.destroyStyle();
        this.destroyMedia();
    },
    mounted() {
        this.id = this.id || UniqueComponentId();

        if (this.responsive) {
            this.createStyle();
            this.initMedia();
        }
    },
    methods: {
        getItemKey(item, index) {
            return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
        },
        getPTOptions(item, key) {
            return this.ptm(key, {
                context: {
                    active: this.isSelected(item),
                    focused: this.id === this.focusedOptionId
                }
            });
        },
        isSelected(item, listIndex) {
            return ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
        },
        onListFocus(event, listType) {
            const selectedFirstItem = DomHandler.findSingle(this.$refs[listType].$el, 'li.p-picklist-item.p-highlight');
            const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.$refs[listType].$el.children);

            this.focused[listType] = true;

            const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;

            this.changeFocusedOptionIndex(index, listType);
            this.$emit('focus', event);
        },
        onListBlur(event, listType) {
            this.focused[listType] = false;
            this.focusedOptionIndex = -1;
            this.$emit('blur', event);
        },
        onOptionMouseDown(index, listType) {
            this.focused[listType] = true;
            this.focusedOptionIndex = index;
        },
        moveUp(event, listIndex) {
            if (this.d_selection && this.d_selection[listIndex]) {
                let valueList = [...this.modelValue[listIndex]];
                let selectionList = this.d_selection[listIndex];

                for (let i = 0; i < selectionList.length; i++) {
                    let selectedItem = selectionList[i];
                    let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);

                    if (selectedItemIndex !== 0) {
                        let movedItem = valueList[selectedItemIndex];
                        let temp = valueList[selectedItemIndex - 1];

                        valueList[selectedItemIndex - 1] = movedItem;
                        valueList[selectedItemIndex] = temp;
                    } else {
                        break;
                    }
                }

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

                value[listIndex] = valueList;

                this.reorderDirection = 'up';
                this.$emit('update:modelValue', value);
                this.$emit('reorder', {
                    originalEvent: event,
                    value: value,
                    direction: this.reorderDirection,
                    listIndex: listIndex
                });
            }
        },
        moveTop(event, listIndex) {
            if (this.d_selection) {
                let valueList = [...this.modelValue[listIndex]];
                let selectionList = this.d_selection[listIndex];

                for (let i = 0; i < selectionList.length; i++) {
                    let selectedItem = selectionList[i];
                    let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);

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

                        valueList.unshift(movedItem);
                    } else {
                        break;
                    }
                }

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

                value[listIndex] = valueList;

                this.reorderDirection = 'top';
                this.$emit('update:modelValue', value);
                this.$emit('reorder', {
                    originalEvent: event,
                    value: value,
                    direction: this.reorderDirection,
                    listIndex: listIndex
                });
            }
        },
        moveDown(event, listIndex) {
            if (this.d_selection) {
                let valueList = [...this.modelValue[listIndex]];
                let selectionList = this.d_selection[listIndex];

                for (let i = selectionList.length - 1; i >= 0; i--) {
                    let selectedItem = selectionList[i];
                    let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);

                    if (selectedItemIndex !== valueList.length - 1) {
                        let movedItem = valueList[selectedItemIndex];
                        let temp = valueList[selectedItemIndex + 1];

                        valueList[selectedItemIndex + 1] = movedItem;
                        valueList[selectedItemIndex] = temp;
                    } else {
                        break;
                    }
                }

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

                value[listIndex] = valueList;

                this.reorderDirection = 'down';
                this.$emit('update:modelValue', value);
                this.$emit('reorder', {
                    originalEvent: event,
                    value: value,
                    direction: this.reorderDirection,
                    listIndex: listIndex
                });
            }
        },
        moveBottom(event, listIndex) {
            if (this.d_selection) {
                let valueList = [...this.modelValue[listIndex]];
                let selectionList = this.d_selection[listIndex];

                for (let i = selectionList.length - 1; i >= 0; i--) {
                    let selectedItem = selectionList[i];
                    let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, valueList);

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

                        valueList.push(movedItem);
                    } else {
                        break;
                    }
                }

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

                value[listIndex] = valueList;

                this.reorderDirection = 'bottom';
                this.$emit('update:modelValue', value);
                this.$emit('reorder', {
                    originalEvent: event,
                    value: value,
                    direction: this.reorderDirection,
                    listIndex: listIndex
                });
            }
        },
        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 (ObjectUtils.findIndexInList(selectedItem, targetList) == -1) {
                        targetList.push(sourceList.splice(ObjectUtils.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: selection
                });

                this.d_selection[0] = [];
                this.$emit('update:selection', this.d_selection);
                this.$emit('selection-change', {
                    originalEvent: event,
                    value: this.d_selection
                });
            }
        },
        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[0] = [];
                this.$emit('update:selection', this.d_selection);
                this.$emit('selection-change', {
                    originalEvent: event,
                    value: this.d_selection
                });
            }
        },
        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 (ObjectUtils.findIndexInList(selectedItem, sourceList) == -1) {
                        sourceList.push(targetList.splice(ObjectUtils.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: selection
                });

                this.d_selection[1] = [];
                this.$emit('update:selection', this.d_selection);
                this.$emit('selection-change', {
                    originalEvent: event,
                    value: this.d_selection
                });
            }
        },
        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[1] = [];
                this.$emit('update:selection', this.d_selection);
                this.$emit('selection-change', {
                    originalEvent: event,
                    value: this.d_selection
                });
            }
        },
        onItemClick(event, item, index, listIndex) {
            const listType = listIndex === 0 ? 'sourceList' : 'targetList';

            this.itemTouched = false;
            const selectionList = this.d_selection[listIndex];
            const selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection);
            const selected = selectedIndex != -1;
            const metaSelection = this.itemTouched ? false : this.metaKeySelection;
            const selectedId = DomHandler.find(this.$refs[listType].$el, '.p-picklist-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.$emit('update:selection', this.d_selection);
            this.$emit('selection-change', {
                originalEvent: event,
                value: this.d_selection
            });
        },
        onItemDblClick(event, item, listIndex) {
            if (listIndex === 0) this.moveToTarget(event);
            else if (listIndex === 1) this.moveToSource(event);
        },
        onItemTouchEnd() {
            this.itemTouched = true;
        },
        onItemKeyDown(event, listType) {
            switch (event.code) {
                case 'ArrowDown':
                    this.onArrowDownKey(event, listType);
                    break;

                case 'ArrowUp':
                    this.onArrowUpKey(event, listType);
                    break;

                case 'Home':
                    this.onHomeKey(event, listType);
                    break;

                case 'End':
                    this.onEndKey(event, listType);
                    break;

                case 'Enter':
                    this.onEnterKey(event, listType);
                    break;

                case 'Space':
                    this.onSpaceKey(event, listType);
                    break;

                case 'KeyA':
                    if (event.ctrlKey) {
                        this.d_selection = [...this.modelValue];
                        this.$emit('update:selection', this.d_selection);
                    }
            }
        },
        onArrowDownKey(event, listType) {
            const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex, listType);

            this.changeFocusedOptionIndex(optionIndex, listType);

            if (event.shiftKey) {
                this.onEnterKey(event, listType);
            }

            event.preventDefault();
        },
        onArrowUpKey(event, listType) {
            const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex, listType);

            this.changeFocusedOptionIndex(optionIndex, listType);

            if (event.shiftKey) {
                this.onEnterKey(event, listType);
            }

            event.preventDefault();
        },
        onEnterKey(event, listType) {
            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
            const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `li.p-picklist-item[id=${this.focusedOptionIndex}]`);
            const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
            const listId = listType === 'sourceList' ? 0 : 1;

            this.onItemClick(event, this.modelValue[listId][matchedOptionIndex], matchedOptionIndex, listId);

            event.preventDefault();
        },
        onSpaceKey(event, listType) {
            event.preventDefault();

            if (event.shiftKey) {
                const listId = listType === 'sourceList' ? 0 : 1;
                const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
                const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[listId][0], [...this.modelValue[listId]]);
                const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `li.p-picklist-item[id=${this.focusedOptionIndex}]`);
                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);

                this.d_selection[listId] = [...this.modelValue[listId]].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
                this.$emit('update:selection', this.d_selection);
            } else {
                this.onEnterKey(event, listType);
            }
        },
        onHomeKey(event, listType) {
            if (event.ctrlKey && event.shiftKey) {
                const listId = listType === 'sourceList' ? 0 : 1;
                const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
                const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `li.p-picklist-item[id=${this.focusedOptionIndex}]`);
                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);

                this.d_selection[listId] = [...this.modelValue[listId]].slice(0, matchedOptionIndex + 1);
                this.$emit('update:selection', this.d_selection);
            } else {
                this.changeFocusedOptionIndex(0, listType);
            }

            event.preventDefault();
        },
        onEndKey(event, listType) {
            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');

            if (event.ctrlKey && event.shiftKey) {
                const listId = listType === 'sourceList' ? 0 : 1;
                const focusedItem = DomHandler.findSingle(this.$refs[listType].$el, `li.p-picklist-item[id=${this.focusedOptionIndex}]`);
                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);

                this.d_selection[listId] = [...this.modelValue[listId]].slice(matchedOptionIndex, items.length);
                this.$emit('update:selection', this.d_selection);
            } else {
                this.changeFocusedOptionIndex(items.length - 1, listType);
            }

            event.preventDefault();
        },
        findNextOptionIndex(index, listType) {
            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');

            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);

            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
        },
        findPrevOptionIndex(index, listType) {
            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);

            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
        },
        changeFocusedOptionIndex(index, listType) {
            const items = DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');

            let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;

            this.focusedOptionIndex = items[order].getAttribute('id');
            this.scrollInView(items[order].getAttribute('id'), listType);
        },
        scrollInView(id, listType) {
            const element = DomHandler.findSingle(this.$refs[listType].$el, `li[id="${id}"]`);

            if (element) {
                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
            }
        },
        updateListScroll(listElement) {
            const listItems = DomHandler.find(listElement, '.p-picklist-item.p-highlight');

            if (listItems && listItems.length) {
                switch (this.reorderDirection) {
                    case 'up':
                        DomHandler.scrollInView(listElement, listItems[0]);
                        break;

                    case 'top':
                        listElement.scrollTop = 0;
                        break;

                    case 'down':
                        DomHandler.scrollInView(listElement, listItems[listItems.length - 1]);
                        break;

                    case 'bottom':
                        listElement.scrollTop = listElement.scrollHeight;
                        break;
                }
            }
        },
        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.$el.setAttribute(this.attributeSelector, '');
                this.styleElement = document.createElement('style');
                this.styleElement.type = 'text/css';
                document.head.appendChild(this.styleElement);

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

    .p-picklist[${this.attributeSelector}] .p-picklist-buttons {
        padding: var(--content-padding);
        flex-direction: row;
    }

    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button {
        margin-right: var(--inline-spacing);
        margin-bottom: 0;
    }

    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button:last-child {
        margin-right: 0;
    }
}
`;

                this.styleElement.innerHTML = innerHTML;
            }
        },
        destroyStyle() {
            if (this.styleElement) {
                document.head.removeChild(this.styleElement);
                this.styleElement = null;
            }
        },
        moveDisabled(index) {
            if (!this.d_selection[index] || !this.d_selection[index].length) {
                return true;
            }
        },
        moveAllDisabled(list) {
            return ObjectUtils.isEmpty(this[list]);
        },
        moveSourceDisabled() {
            return ObjectUtils.isEmpty(this.targetList);
        },
        itemClass(item, id, listIndex) {
            return ['p-picklist-item', { 'p-highlight': this.isSelected(item, listIndex), 'p-focus': id === this.focusedOptionId }];
        }
    },
    computed: {
        idSource() {
            return `${this.id}_source`;
        },
        idTarget() {
            return `${this.id}_target`;
        },
        focusedOptionId() {
            return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
        },
        containerClass() {
            return [
                'p-picklist p-component',
                {
                    'p-picklist-striped': this.stripedRows
                }
            ];
        },
        sourceList() {
            return this.modelValue && this.modelValue[0] ? this.modelValue[0] : null;
        },
        targetList() {
            return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null;
        },
        attributeSelector() {
            return UniqueComponentId();
        },
        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: {
        PLButton: Button,
        AngleRightIcon: AngleRightIcon,
        AngleLeftIcon: AngleLeftIcon,
        AngleDownIcon: AngleDownIcon,
        AngleUpIcon: AngleUpIcon,
        AngleDoubleRightIcon: AngleDoubleRightIcon,
        AngleDoubleLeftIcon: AngleDoubleLeftIcon,
        AngleDoubleDownIcon: AngleDoubleDownIcon,
        AngleDoubleUpIcon: AngleDoubleUpIcon
    },
    directives: {
        ripple: Ripple
    }
};

const _hoisted_1 = ["id", "onClick", "onDblclick", "onMousedown", "aria-selected"];
const _hoisted_2 = ["id", "onClick", "onDblclick", "onMousedown", "aria-selected"];

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_AngleUpIcon = resolveComponent("AngleUpIcon");
  const _component_PLButton = resolveComponent("PLButton");
  const _component_AngleDoubleUpIcon = resolveComponent("AngleDoubleUpIcon");
  const _component_AngleDownIcon = resolveComponent("AngleDownIcon");
  const _component_AngleDoubleDownIcon = resolveComponent("AngleDoubleDownIcon");
  const _directive_ripple = resolveDirective("ripple");

  return (openBlock(), createElementBlock("div", mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
    ($props.showSourceControls)
      ? (openBlock(), createElementBlock("div", mergeProps({
          key: 0,
          class: "p-picklist-buttons p-picklist-source-controls"
        }, _ctx.ptm('sourceControls')), [
          renderSlot(_ctx.$slots, "sourcecontrolsstart"),
          createVNode(_component_PLButton, mergeProps({
            "aria-label": $options.moveUpAriaLabel,
            disabled: $options.moveDisabled(0),
            type: "button",
            onClick: _cache[0] || (_cache[0] = $event => ($options.moveUp($event, 0)))
          }, $props.moveUpButtonProps, {
            pt: _ctx.ptm('sourceMoveUpButton')
          }), {
            icon: withCtx(() => [
              renderSlot(_ctx.$slots, "moveupicon", {}, () => [
                createVNode(_component_AngleUpIcon, normalizeProps(guardReactiveProps(_ctx.ptm('sourceMoveUpButton')['icon'])), null, 16)
              ])
            ]),
            _: 3
          }, 16, ["aria-label", "disabled", "pt"]),
          createVNode(_component_PLButton, mergeProps({
            "aria-label": $options.moveTopAriaLabel,
            disabled: $options.moveDisabled(0),
            type: "button",
            onClick: _cache[1] || (_cache[1] = $event => ($options.moveTop($event, 0)))
          }, $props.moveTopButtonProps, {
            pt: _ctx.ptm('sourceMoveTopButton')
          }), {
            icon: withCtx(() => [
              renderSlot(_ctx.$slots, "movetopicon", {}, () => [
                createVNode(_component_AngleDoubleUpIcon, normalizeProps(guardReactiveProps(_ctx.ptm('sourceMoveTopButton')['icon'])), null, 16)
              ])
            ]),
            _: 3
          }, 16, ["aria-label", "disabled", "pt"]),
          createVNode(_component_PLButton, mergeProps({
            "aria-label": $options.moveDownAriaLabel,
            disabled: $options.moveDisabled(0),
            type: "button",
            onClick: _cache[2] || (_cache[2] = $event => ($options.moveDown($event, 0)))
          }, $props.moveDownButtonProps, {
            pt: _ctx.ptm('sourceMoveDownButton')
          }), {
            icon: withCtx(() => [
              renderSlot(_ctx.$slots, "movedownicon", {}, () => [
                createVNode(_component_AngleDownIcon, normalizeProps(guardReactiveProps(_ctx.ptm('sourceMoveDownButton')['icon'])), null, 16)
              ])
            ]),
            _: 3
          }, 16, ["aria-label", "disabled", "pt"]),
          createVNode(_component_PLButton, mergeProps({
            "aria-label": $options.moveBottomAriaLabel,
            disabled: $options.moveDisabled(0),
            type: "button",
            onClick: _cache[3] || (_cache[3] = $event => ($options.moveBottom($event, 0)))
          }, $props.moveBottomButtonProps, {
            pt: _ctx.ptm('sourceMoveBottomButton')
          }), {
            icon: withCtx(() => [
              renderSlot(_ctx.$slots, "movebottomicon", {}, () => [
                createVNode(_component_AngleDoubleDownIcon, normalizeProps(guardReactiveProps(_ctx.ptm('sourceMoveBottomButton')['icon'])), null, 16)
              ])
            ]),
            _: 3
          }, 16, ["aria-label", "disabled", "pt"]),
          renderSlot(_ctx.$slots, "sourcecontrolsend")
        ], 16))
      : createCommentVNode("", true),
    createElementVNode("div", mergeProps({ class: "p-picklist-list-wrapper p-picklist-source-wrapper" }, _ctx.ptm('sourceWrapper')), [
      (_ctx.$slots.sourceheader)
        ? (openBlock(), createElementBlock("div", mergeProps({
            key: 0,
            class: "p-picklist-header"
          }, _ctx.ptm('sourceHeader')), [
            renderSlot(_ctx.$slots, "sourceheader")
          ], 16))
        : createCommentVNode("", true),
      createVNode(TransitionGroup, mergeProps({
        ref: "sourceList",
        id: $options.idSource + '_list',
        name: "p-picklist-flip",
        tag: "ul",
        class: "p-picklist-list p-picklist-source",
        style: $props.listStyle,
        role: "listbox",
        "aria-multiselectable": "true",
        "aria-activedescendant": $data.focused['sourceList'] ? $options.focusedOptionId : undefined,
        tabindex: $options.sourceList && $options.sourceList.length > 0 ? $props.tabindex : -1,
        onFocus: _cache[5] || (_cache[5] = $event => ($options.onListFocus($event, 'sourceList'))),
        onBlur: _cache[6] || (_cache[6] = $event => ($options.onListBlur($event, 'sourceList'))),
        onKeydown: _cache[7] || (_cache[7] = $event => ($options.onItemKeyDown($event, 'sourceList')))
      }, { ...$props.sourceListProps, ..._ctx.ptm('sourceList') }), {
        default: withCtx(() => [
          (openBlock(true), createElementBlock(Fragment, null, renderList($options.sourceList, (item, i) => {
            return withDirectives((openBlock(), createElementBlock("li", mergeProps({
              key: $options.getItemKey(item, i),
              id: $options.idSource + '_' + i,
              class: $options.itemClass(item, `${$options.idSource}_${i}`, 0),
              onClick: $event => ($options.onItemClick($event, item, i, 0)),
              onDblclick: $event => ($options.onItemDblClick($event, item, 0)),
              onTouchend: _cache[4] || (_cache[4] = (...args) => ($options.onItemTouchEnd && $options.onItemTouchEnd(...args))),
              onMousedown: $event => ($options.onOptionMouseDown(i, 'sourceList')),
              role: "option",
              "aria-selected": $options.isSelected(item, 0)
            }, $options.getPTOptions(item, 'item')), [
              renderSlot(_ctx.$slots, "item", {
                item: item,
                index: i
              })
            ], 16, _hoisted_1)), [
              [_directive_ripple]
            ])
          }), 128))
        ]),
        _: 3
      }, 16, ["id", "style", "aria-activedescendant", "tabindex"])
    ], 16),
    createElementVNode("div", mergeProps({ class: "p-picklist-buttons p-picklist-transfer-buttons" }, _ctx.ptm('buttons')), [
      renderSlot(_ctx.$slots, "movecontrolsstart"),
      createVNode(_component_PLButton, mergeProps({
        "aria-label": $options.moveToTargetAriaLabel,
        type: "button",
        onClick: $options.moveToTarget,
        disabled: $options.moveDisabled(0)
      }, $props.moveToTargetProps, {
        pt: _ctx.ptm('moveToTargetButton')
      }), {
        icon: withCtx(() => [
          renderSlot(_ctx.$slots, "movetotargeticon", { viewChanged: $data.viewChanged }, () => [
            (openBlock(), createBlock(resolveDynamicComponent($data.viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'), normalizeProps(guardReactiveProps(_ctx.ptm('moveToTargetButton')['icon'])), null, 16))
          ])
        ]),
        _: 3
      }, 16, ["aria-label", "onClick", "disabled", "pt"]),
      createVNode(_component_PLButton, mergeProps({
        "aria-label": $options.moveAllToTargetAriaLabel,
        type: "button",
        onClick: $options.moveAllToTarget,
        disabled: $options.moveAllDisabled('sourceList')
      }, $props.moveAllToTargetProps, {
        pt: _ctx.ptm('moveAllToTargetButton')
      }), {
        icon: withCtx(() => [
          renderSlot(_ctx.$slots, "movealltotargeticon", { viewChanged: $data.viewChanged }, () => [
            (openBlock(), createBlock(resolveDynamicComponent($data.viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'), normalizeProps(guardReactiveProps(_ctx.ptm('moveAllToTargetButton')['icon'])), null, 16))
          ])
        ]),
        _: 3
      }, 16, ["aria-label", "onClick", "disabled", "pt"]),
      createVNode(_component_PLButton, mergeProps({
        "aria-label": $options.moveToSourceAriaLabel,
        type: "button",
        onClick: $options.moveToSource,
        disabled: $options.moveDisabled(1)
      }, $props.moveToSourceProps, {
        pt: _ctx.ptm('moveToSourceButton')
      }), {
        icon: withCtx(() => [
          renderSlot(_ctx.$slots, "movetosourceicon", { viewChanged: $data.viewChanged }, () => [
            (openBlock(), createBlock(resolveDynamicComponent($data.viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'), normalizeProps(guardReactiveProps(_ctx.ptm('moveToSourceButton')['icon'])), null, 16))
          ])
        ]),
        _: 3
      }, 16, ["aria-label", "onClick", "disabled", "pt"]),
      createVNode(_component_PLButton, mergeProps({
        "aria-label": $options.moveAllToSourceAriaLabel,
        type: "button",
        onClick: $options.moveAllToSource,
        disabled: $options.moveSourceDisabled('targetList')
      }, $props.moveAllToSourceProps, {
        pt: _ctx.ptm('moveAllToSourceButton')
      }), {
        icon: withCtx(() => [
          renderSlot(_ctx.$slots, "movealltosourceicon", { viewChanged: $data.viewChanged }, () => [
            (openBlock(), createBlock(resolveDynamicComponent($data.viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'), normalizeProps(guardReactiveProps(_ctx.ptm('moveAllToSourceButton')['icon'])), null, 16))
          ])
        ]),
        _: 3
      }, 16, ["aria-label", "onClick", "disabled", "pt"]),
      renderSlot(_ctx.$slots, "movecontrolsend")
    ], 16),
    createElementVNode("div", mergeProps({ class: "p-picklist-list-wrapper p-picklist-target-wrapper" }, _ctx.ptm('targetWrapper')), [
      (_ctx.$slots.targetheader)
        ? (openBlock(), createElementBlock("div", mergeProps({
            key: 0,
            class: "p-picklist-header"
          }, _ctx.ptm('targetHeader')), [
            renderSlot(_ctx.$slots, "targetheader")
          ], 16))
        : createCommentVNode("", true),
      createVNode(TransitionGroup, mergeProps({
        ref: "targetList",
        id: $options.idTarget + '_list',
        name: "p-picklist-flip",
        tag: "ul",
        class: "p-picklist-list p-picklist-target",
        style: $props.listStyle,
        role: "listbox",
        "aria-multiselectable": "true",
        "aria-activedescendant": $data.focused['targetList'] ? $options.focusedOptionId : undefined,
        tabindex: $options.targetList && $options.targetList.length > 0 ? $props.tabindex : -1,
        onFocus: _cache[10] || (_cache[10] = $event => ($options.onListFocus($event, 'targetList'))),
        onBlur: _cache[11] || (_cache[11] = $event => ($options.onListBlur($event, 'targetList'))),
        onKeydown: _cache[12] || (_cache[12] = $event => ($options.onItemKeyDown($event, 'targetList')))
      }, { ...$props.targetListProps, ..._ctx.ptm('targetList') }), {
        default: withCtx(() => [
          (openBlock(true), createElementBlock(Fragment, null, renderList($options.targetList, (item, i) => {
            return withDirectives((openBlock(), createElementBlock("li", mergeProps({
              key: $options.getItemKey(item, i),
              id: $options.idTarget + '_' + i,
              class: $options.itemClass(item, `${$options.idTarget}_${i}`, 1),
              onClick: $event => ($options.onItemClick($event, item, i, 1)),
              onDblclick: $event => ($options.onItemDblClick($event, item, 1)),
              onKeydown: _cache[8] || (_cache[8] = $event => ($options.onItemKeyDown($event, 'targetList'))),
              onMousedown: $event => ($options.onOptionMouseDown(i, 'targetList')),
              onTouchend: _cache[9] || (_cache[9] = (...args) => ($options.onItemTouchEnd && $options.onItemTouchEnd(...args))),
              role: "option",
              "aria-selected": $options.isSelected(item, 1)
            }, $options.getPTOptions(item, 'item')), [
              renderSlot(_ctx.$slots, "item", {
                item: item,
                index: i
              })
            ], 16, _hoisted_2)), [
              [_directive_ripple]
            ])
          }), 128))
        ]),
        _: 3
      }, 16, ["id", "style", "aria-activedescendant", "tabindex"])
    ], 16),
    ($props.showTargetControls)
      ? (openBlock(), createElementBlock("div", mergeProps({
          key: 1,
          class: "p-picklist-buttons p-picklist-target-controls"
        }, _ctx.ptm('targetControls')), [
          renderSlot(_ctx.$slots, "targetcontrolsstart"),
          createVNode(_component_PLButton, mergeProps({
            "aria-label": $options.moveUpAriaLabel,
            disabled: $options.moveDisabled(1),
            type: "button",
            onClick: _cache[13] || (_cache[13] = $event => ($options.moveUp($event, 1)))
          }, $props.moveUpButtonProps, {
            pt: _ctx.ptm('targetMoveUpButton')
          }), {
            icon: withCtx(() => [
              renderSlot(_ctx.$slots, "moveupicon", {}, () => [
                createVNode(_component_AngleUpIcon, normalizeProps(guardReactiveProps(_ctx.ptm('targetMoveUpButton')['icon'])), null, 16)
              ])
            ]),
            _: 3
          }, 16, ["aria-label", "disabled", "pt"]),
          createVNode(_component_PLButton, mergeProps({
            "aria-label": $options.moveTopAriaLabel,
            disabled: $options.moveDisabled(1),
            type: "button",
            onClick: _cache[14] || (_cache[14] = $event => ($options.moveTop($event, 1)))
          }, $props.moveTopButtonProps, {
            pt: _ctx.ptm('targetMoveTopButton')
          }), {
            icon: withCtx(() => [
              renderSlot(_ctx.$slots, "movetopicon", {}, () => [
                createVNode(_component_AngleDoubleUpIcon, normalizeProps(guardReactiveProps(_ctx.ptm('targetMoveTopButton')['icon'])), null, 16)
              ])
            ]),
            _: 3
          }, 16, ["aria-label", "disabled", "pt"]),
          createVNode(_component_PLButton, mergeProps({
            "aria-label": $options.moveDownAriaLabel,
            disabled: $options.moveDisabled(1),
            type: "button",
            onClick: _cache[15] || (_cache[15] = $event => ($options.moveDown($event, 1)))
          }, $props.moveDownButtonProps, {
            pt: _ctx.ptm('targetMoveDownButton')
          }), {
            icon: withCtx(() => [
              renderSlot(_ctx.$slots, "movedownicon", {}, () => [
                createVNode(_component_AngleDownIcon, normalizeProps(guardReactiveProps(_ctx.ptm('targetMoveDownButton')['icon'])), null, 16)
              ])
            ]),
            _: 3
          }, 16, ["aria-label", "disabled", "pt"]),
          createVNode(_component_PLButton, mergeProps({
            "aria-label": $options.moveBottomAriaLabel,
            disabled: $options.moveDisabled(1),
            type: "button",
            onClick: _cache[16] || (_cache[16] = $event => ($options.moveBottom($event, 1)))
          }, $props.moveBottomButtonProps, {
            pt: _ctx.ptm('targetMoveBottomButton')
          }), {
            icon: withCtx(() => [
              renderSlot(_ctx.$slots, "movebottomicon", {}, () => [
                createVNode(_component_AngleDoubleDownIcon, normalizeProps(guardReactiveProps(_ctx.ptm('targetMoveBottomButton')['icon'])), null, 16)
              ])
            ]),
            _: 3
          }, 16, ["aria-label", "disabled", "pt"]),
          renderSlot(_ctx.$slots, "targetcontrolsend")
        ], 16))
      : createCommentVNode("", true)
  ], 16))
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "\n.p-picklist {\n    display: flex;\n}\n.p-picklist-buttons {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.p-picklist-list-wrapper {\n    flex: 1 1 50%;\n}\n.p-picklist-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    min-height: 12rem;\n    max-height: 24rem;\n}\n.p-picklist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,\n.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {\n    transition: none !important;\n}\n";
styleInject(css_248z);

script.render = render;

export { script as default };
