primevue 3.29.1 → 3.30.0

package/orderlist/orderlist.esm.js

@@ -1,4 +1,3 @@
-import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import AngleDoubleDownIcon from 'primevue/icons/angledoubledown';
 import AngleDoubleUpIcon from 'primevue/icons/angledoubleup';
@@ -6,713 +5,655 @@ import AngleDownIcon from 'primevue/icons/angledown';
 import AngleUpIcon from 'primevue/icons/angleup';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId, ObjectUtils, DomHandler } from 'primevue/utils';
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createElementVNode, renderSlot, createVNode, withCtx, normalizeProps, guardReactiveProps, createCommentVNode, TransitionGroup, Fragment, renderList, withDirectives } from 'vue';
 
-var script = {
-    name: 'OrderList',
-    extends: BaseComponent,
-    emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'focus', 'blur'],
-    props: {
-        modelValue: {
-            type: Array,
-            default: null
-        },
-        selection: {
-            type: Array,
-            default: null
-        },
-        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
-        },
-        tabindex: {
-            type: Number,
-            default: 0
-        },
-        listProps: {
-            type: null,
-            default: null
-        },
-        moveUpButtonProps: {
-            type: null,
-            default: null
-        },
-        moveTopButtonProps: {
-            type: null,
-            default: null
-        },
-        moveDownButtonProps: {
-            type: null,
-            default: null
-        },
-        moveBottomButtonProps: {
-            type: null,
-            default: null
-        },
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
+var styles = "\n.p-orderlist {\n    display: flex;\n}\n\n.p-orderlist-controls {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.p-orderlist-list-container {\n    flex: 1 1 auto;\n}\n\n.p-orderlist-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\n.p-orderlist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-orderlist.p-state-disabled .p-orderlist-item,\n.p-orderlist.p-state-disabled .p-button {\n    cursor: default;\n}\n\n.p-orderlist.p-state-disabled .p-orderlist-list {\n    overflow: hidden;\n}\n";
+var classes = {
+  root: function root(_ref) {
+    var props = _ref.props;
+    return ['p-orderlist p-component', {
+      'p-orderlist-striped': props.stripedRows
+    }];
+  },
+  controls: 'p-orderlist-controls',
+  header: 'p-orderlist-header',
+  container: 'p-orderlist-list-container',
+  list: 'p-orderlist-list',
+  item: function item(_ref2) {
+    var instance = _ref2.instance,
+      _item = _ref2.item,
+      id = _ref2.id;
+    return ['p-orderlist-item', {
+      'p-highlight': instance.isSelected(_item),
+      'p-focus': id === instance.focusedOptionId
+    }];
+  }
+};
+var _useStyle = useStyle(styles, {
+    name: 'orderlist',
+    manual: true
+  }),
+  loadStyle = _useStyle.load;
+var script$1 = {
+  name: 'BaseOrderList',
+  "extends": BaseComponent,
+  props: {
+    modelValue: {
+      type: Array,
+      "default": null
     },
-    itemTouched: false,
-    reorderDirection: null,
-    styleElement: null,
-    list: null,
-    data() {
-        return {
-            id: this.$attrs.id,
-            d_selection: this.selection,
-            focused: false,
-            focusedOptionIndex: -1
-        };
-    },
-    watch: {
-        '$attrs.id': function (newValue) {
-            this.id = newValue || UniqueComponentId();
-        }
+    selection: {
+      type: Array,
+      "default": null
     },
-    beforeUnmount() {
-        this.destroyStyle();
+    dataKey: {
+      type: String,
+      "default": null
     },
-    updated() {
-        if (this.reorderDirection) {
-            this.updateListScroll();
-            this.reorderDirection = null;
-        }
+    listStyle: {
+      type: null,
+      "default": null
     },
-    mounted() {
-        this.id = this.id || UniqueComponentId();
-
-        if (this.responsive) {
-            this.createStyle();
-        }
+    metaKeySelection: {
+      type: Boolean,
+      "default": true
     },
-    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) {
-            return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
-        },
-        onListFocus(event) {
-            const selectedFirstItem = DomHandler.findSingle(this.list, 'li.p-orderlist-item.p-highlight');
-            const findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.list.children);
-
-            this.focused = true;
-
-            const index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
-
-            this.changeFocusedOptionIndex(index);
-            this.$emit('focus', event);
-        },
-        onListBlur(event) {
-            this.focused = false;
-            this.focusedOptionIndex = -1;
-            this.$emit('blur', event);
-        },
-        onListKeyDown(event) {
-            switch (event.code) {
-                case 'ArrowDown':
-                    this.onArrowDownKey(event);
-                    break;
-
-                case 'ArrowUp':
-                    this.onArrowUpKey(event);
-                    break;
-
-                case 'Home':
-                    this.onHomeKey(event);
-                    break;
-
-                case 'End':
-                    this.onEndKey(event);
-                    break;
-
-                case 'Enter':
-                    this.onEnterKey(event);
-                    break;
-
-                case 'Space':
-                    this.onSpaceKey(event);
-                    break;
-
-                case 'KeyA':
-                    if (event.ctrlKey) {
-                        this.d_selection = [...this.modelValue];
-                        this.$emit('update:selection', this.d_selection);
-                    }
-            }
-        },
-        onOptionMouseDown(index) {
-            this.focused = true;
-            this.focusedOptionIndex = index;
-        },
-        onArrowDownKey(event) {
-            const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
-
-            this.changeFocusedOptionIndex(optionIndex);
-
-            if (event.shiftKey) {
-                this.onEnterKey(event);
-            }
-
-            event.preventDefault();
-        },
-        onArrowUpKey(event) {
-            const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
-
-            this.changeFocusedOptionIndex(optionIndex);
-
-            if (event.shiftKey) {
-                this.onEnterKey(event);
-            }
-
-            event.preventDefault();
-        },
-        onHomeKey(event) {
-            if (event.ctrlKey && event.shiftKey) {
-                const items = DomHandler.find(this.list, 'li.p-orderlist-item');
-                const focusedItem = DomHandler.findSingle(this.list, `li.p-orderlist-item[id=${this.focusedOptionIndex}]`);
-                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
-
-                this.d_selection = [...this.modelValue].slice(0, matchedOptionIndex + 1);
-                this.$emit('update:selection', this.d_selection);
-            } else {
-                this.changeFocusedOptionIndex(0);
-            }
-
-            event.preventDefault();
-        },
-        onEndKey(event) {
-            if (event.ctrlKey && event.shiftKey) {
-                const items = DomHandler.find(this.list, 'li.p-orderlist-item');
-                const focusedItem = DomHandler.findSingle(this.list, `li.p-orderlist-item[id=${this.focusedOptionIndex}]`);
-                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
-
-                this.d_selection = [...this.modelValue].slice(matchedOptionIndex, items.length);
-                this.$emit('update:selection', this.d_selection);
-            } else {
-                this.changeFocusedOptionIndex(DomHandler.find(this.list, 'li.p-orderlist-item').length - 1);
-            }
-
-            event.preventDefault();
-        },
-        onEnterKey(event) {
-            const items = DomHandler.find(this.list, 'li.p-orderlist-item');
-            const focusedItem = DomHandler.findSingle(this.list, `li.p-orderlist-item[id=${this.focusedOptionIndex}]`);
-            const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
-
-            this.onItemClick(event, this.modelValue[matchedOptionIndex], matchedOptionIndex);
-
-            event.preventDefault();
-        },
-        onSpaceKey(event) {
-            if (event.shiftKey) {
-                const items = DomHandler.find(this.list, 'li.p-orderlist-item');
-                const selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[0], [...this.modelValue]);
-                const focusedItem = DomHandler.findSingle(this.list, `li.p-orderlist-item[id=${this.focusedOptionIndex}]`);
-                const matchedOptionIndex = [...items].findIndex((item) => item === focusedItem);
-
-                this.d_selection = [...this.modelValue].slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
-                this.$emit('update:selection', this.d_selection);
-            } else {
-                this.onEnterKey(event);
-            }
-        },
-        findNextOptionIndex(index) {
-            const items = DomHandler.find(this.list, 'li.p-orderlist-item');
-            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
-
-            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
-        },
-        findPrevOptionIndex(index) {
-            const items = DomHandler.find(this.list, 'li.p-orderlist-item');
-            const matchedOptionIndex = [...items].findIndex((link) => link.id === index);
-
-            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
-        },
-        changeFocusedOptionIndex(index) {
-            const items = DomHandler.find(this.list, 'li.p-orderlist-item');
-
-            let order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
-
-            this.focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
-            this.scrollInView(this.focusedOptionIndex);
-        },
-        scrollInView(id) {
-            const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
-
-            if (element) {
-                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
-            }
-        },
-        moveUp(event) {
-            if (this.d_selection) {
-                let value = [...this.modelValue];
-
-                for (let i = 0; i < this.d_selection.length; i++) {
-                    let selectedItem = this.d_selection[i];
-                    let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
-
-                    if (selectedItemIndex !== 0) {
-                        let movedItem = value[selectedItemIndex];
-                        let temp = value[selectedItemIndex - 1];
-
-                        value[selectedItemIndex - 1] = movedItem;
-                        value[selectedItemIndex] = temp;
-                    } else {
-                        break;
-                    }
-                }
-
-                this.reorderDirection = 'up';
-                this.$emit('update:modelValue', value);
-                this.$emit('reorder', {
-                    originalEvent: event,
-                    value: value,
-                    direction: this.reorderDirection
-                });
-            }
-        },
-        moveTop(event) {
-            if (this.d_selection) {
-                let value = [...this.modelValue];
-
-                for (let i = 0; i < this.d_selection.length; i++) {
-                    let selectedItem = this.d_selection[i];
-                    let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
-
-                    if (selectedItemIndex !== 0) {
-                        let movedItem = value.splice(selectedItemIndex, 1)[0];
-
-                        value.unshift(movedItem);
-                    } else {
-                        break;
-                    }
-                }
-
-                this.reorderDirection = 'top';
-                this.$emit('update:modelValue', value);
-                this.$emit('reorder', {
-                    originalEvent: event,
-                    value: value,
-                    direction: this.reorderDirection
-                });
-            }
-        },
-        moveDown(event) {
-            if (this.d_selection) {
-                let value = [...this.modelValue];
-
-                for (let i = this.d_selection.length - 1; i >= 0; i--) {
-                    let selectedItem = this.d_selection[i];
-                    let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
-
-                    if (selectedItemIndex !== value.length - 1) {
-                        let movedItem = value[selectedItemIndex];
-                        let temp = value[selectedItemIndex + 1];
-
-                        value[selectedItemIndex + 1] = movedItem;
-                        value[selectedItemIndex] = temp;
-                    } else {
-                        break;
-                    }
-                }
-
-                this.reorderDirection = 'down';
-                this.$emit('update:modelValue', value);
-                this.$emit('reorder', {
-                    originalEvent: event,
-                    value: value,
-                    direction: this.reorderDirection
-                });
-            }
-        },
-        moveBottom(event) {
-            if (this.d_selection) {
-                let value = [...this.modelValue];
-
-                for (let i = this.d_selection.length - 1; i >= 0; i--) {
-                    let selectedItem = this.d_selection[i];
-                    let selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
-
-                    if (selectedItemIndex !== value.length - 1) {
-                        let movedItem = value.splice(selectedItemIndex, 1)[0];
-
-                        value.push(movedItem);
-                    } else {
-                        break;
-                    }
-                }
-
-                this.reorderDirection = 'bottom';
-                this.$emit('update:modelValue', value);
-                this.$emit('reorder', {
-                    originalEvent: event,
-                    value: value,
-                    direction: this.reorderDirection
-                });
-            }
-        },
-        onItemClick(event, item, index) {
-            this.itemTouched = false;
-            const selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection);
-            const selected = selectedIndex != -1;
-            const metaSelection = this.itemTouched ? false : this.metaKeySelection;
-            const selectedId = DomHandler.find(this.list, '.p-orderlist-item')[index].getAttribute('id');
-
-            this.focusedOptionIndex = selectedId;
-
-            if (metaSelection) {
-                const metaKey = event.metaKey || event.ctrlKey;
-
-                if (selected && metaKey) {
-                    this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
-                } else {
-                    this.d_selection = metaKey ? (this.d_selection ? [...this.d_selection] : []) : [];
-                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
-                }
-            } else {
-                if (selected) {
-                    this.d_selection = this.d_selection.filter((val, index) => index !== selectedIndex);
-                } else {
-                    this.d_selection = this.d_selection ? [...this.d_selection] : [];
-                    ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
-                }
-            }
-
-            this.$emit('update:selection', this.d_selection);
-            this.$emit('selection-change', {
-                originalEvent: event,
-                value: this.d_selection
-            });
-        },
-        onItemTouchEnd() {
-            this.itemTouched = true;
-        },
-        findNextItem(item) {
-            let nextItem = item.nextElementSibling;
-
-            if (nextItem) return !DomHandler.hasClass(nextItem, 'p-orderlist-item') ? this.findNextItem(nextItem) : nextItem;
-            else return null;
-        },
-        findPrevItem(item) {
-            let prevItem = item.previousElementSibling;
-
-            if (prevItem) return !DomHandler.hasClass(prevItem, 'p-orderlist-item') ? this.findPrevItem(prevItem) : prevItem;
-            else return null;
-        },
-        findFirstItem() {
-            return DomHandler.findSingle(this.list, '.p-orderlist-item');
-        },
-        findLastItem() {
-            const items = DomHandler.find(this.list, '.p-orderlist-item');
-
-            return items[items.length - 1];
-        },
-        itemClass(item, id) {
-            return ['p-orderlist-item', { 'p-highlight': this.isSelected(item), 'p-focus': id === this.focusedOptionId }];
-        },
-        updateListScroll() {
-            const listItems = DomHandler.find(this.list, '.p-orderlist-item.p-highlight');
-
-            if (listItems && listItems.length) {
-                switch (this.reorderDirection) {
-                    case 'up':
-                        DomHandler.scrollInView(this.list, listItems[0]);
-                        break;
-
-                    case 'top':
-                        this.list.scrollTop = 0;
-                        break;
-
-                    case 'down':
-                        DomHandler.scrollInView(this.list, listItems[listItems.length - 1]);
-                        break;
-
-                    case 'bottom':
-                        this.list.scrollTop = this.list.scrollHeight;
-                        break;
-                }
-            }
-        },
-        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-orderlist[${this.attributeSelector}] {
-        flex-direction: column;
+    responsive: {
+      type: Boolean,
+      "default": true
+    },
+    breakpoint: {
+      type: String,
+      "default": '960px'
+    },
+    stripedRows: {
+      type: Boolean,
+      "default": false
+    },
+    tabindex: {
+      type: Number,
+      "default": 0
+    },
+    listProps: {
+      type: null,
+      "default": null
+    },
+    moveUpButtonProps: {
+      type: null,
+      "default": null
+    },
+    moveTopButtonProps: {
+      type: null,
+      "default": null
+    },
+    moveDownButtonProps: {
+      type: null,
+      "default": null
+    },
+    moveBottomButtonProps: {
+      type: null,
+      "default": null
+    },
+    'aria-labelledby': {
+      type: String,
+      "default": null
+    },
+    'aria-label': {
+      type: String,
+      "default": null
     }
+  },
+  css: {
+    classes: classes,
+    loadStyle: loadStyle
+  },
+  provide: function provide() {
+    return {
+      $parentInstance: this
+    };
+  }
+};
 
-    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls {
-        padding: var(--content-padding);
-        flex-direction: row;
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var script = {
+  name: 'OrderList',
+  "extends": script$1,
+  emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'focus', 'blur'],
+  itemTouched: false,
+  reorderDirection: null,
+  styleElement: null,
+  list: null,
+  data: function data() {
+    return {
+      id: this.$attrs.id,
+      d_selection: this.selection,
+      focused: false,
+      focusedOptionIndex: -1
+    };
+  },
+  watch: {
+    '$attrs.id': function $attrsId(newValue) {
+      this.id = newValue || UniqueComponentId();
     }
-
-    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button {
-        margin-right: var(--inline-spacing);
-        margin-bottom: 0;
+  },
+  beforeUnmount: function beforeUnmount() {
+    this.destroyStyle();
+  },
+  updated: function updated() {
+    if (this.reorderDirection) {
+      this.updateListScroll();
+      this.reorderDirection = null;
     }
-
-    .p-orderlist[${this.attributeSelector}] .p-orderlist-controls .p-button:last-child {
-        margin-right: 0;
+  },
+  mounted: function mounted() {
+    this.id = this.id || UniqueComponentId();
+    if (this.responsive) {
+      this.createStyle();
     }
-}
-`;
-
-                this.styleElement.innerHTML = innerHTML;
-            }
-        },
-        destroyStyle() {
-            if (this.styleElement) {
-                document.head.removeChild(this.styleElement);
-                this.styleElement = null;
-            }
-        },
-        moveDisabled() {
-            if (!this.d_selection || !this.d_selection.length) {
-                return true;
-            }
-        },
-        listRef(el) {
-            this.list = el ? el.$el : undefined;
+  },
+  methods: {
+    getItemKey: function getItemKey(item, index) {
+      return this.dataKey ? ObjectUtils.resolveFieldData(item, this.dataKey) : index;
+    },
+    getPTOptions: function getPTOptions(item, key) {
+      return this.ptm(key, {
+        context: {
+          active: this.isSelected(item),
+          focused: this.id === this.focusedOptionId
         }
+      });
+    },
+    isSelected: function isSelected(item) {
+      return ObjectUtils.findIndexInList(item, this.d_selection) != -1;
     },
-    computed: {
-        containerClass() {
-            return [
-                'p-orderlist p-component',
-                {
-                    'p-orderlist-striped': this.stripedRows
-                }
-            ];
-        },
-        attributeSelector() {
-            return UniqueComponentId();
-        },
-        focusedOptionId() {
-            return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : 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;
+    onListFocus: function onListFocus(event) {
+      var selectedFirstItem = DomHandler.findSingle(this.list, '[data-p-highlight="true"]');
+      var findIndex = ObjectUtils.findIndexInList(selectedFirstItem, this.list.children);
+      this.focused = true;
+      var index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
+      this.changeFocusedOptionIndex(index);
+      this.$emit('focus', event);
+    },
+    onListBlur: function onListBlur(event) {
+      this.focused = false;
+      this.focusedOptionIndex = -1;
+      this.$emit('blur', event);
+    },
+    onListKeyDown: function onListKeyDown(event) {
+      switch (event.code) {
+        case 'ArrowDown':
+          this.onArrowDownKey(event);
+          break;
+        case 'ArrowUp':
+          this.onArrowUpKey(event);
+          break;
+        case 'Home':
+          this.onHomeKey(event);
+          break;
+        case 'End':
+          this.onEndKey(event);
+          break;
+        case 'Enter':
+          this.onEnterKey(event);
+          break;
+        case 'Space':
+          this.onSpaceKey(event);
+          break;
+        case 'KeyA':
+          if (event.ctrlKey) {
+            this.d_selection = _toConsumableArray(this.modelValue);
+            this.$emit('update:selection', this.d_selection);
+          }
+      }
+    },
+    onOptionMouseDown: function onOptionMouseDown(index) {
+      this.focused = true;
+      this.focusedOptionIndex = index;
+    },
+    onArrowDownKey: function onArrowDownKey(event) {
+      var optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
+      this.changeFocusedOptionIndex(optionIndex);
+      if (event.shiftKey) {
+        this.onEnterKey(event);
+      }
+      event.preventDefault();
+    },
+    onArrowUpKey: function onArrowUpKey(event) {
+      var optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
+      this.changeFocusedOptionIndex(optionIndex);
+      if (event.shiftKey) {
+        this.onEnterKey(event);
+      }
+      event.preventDefault();
+    },
+    onHomeKey: function onHomeKey(event) {
+      if (event.ctrlKey && event.shiftKey) {
+        var items = DomHandler.find(this.list, '[data-pc-section="item"]');
+        var focusedItem = DomHandler.findSingle(this.list, "[data-pc-section=\"item\"][id=".concat(this.focusedOptionIndex, "]"));
+        var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+          return item === focusedItem;
+        });
+        this.d_selection = _toConsumableArray(this.modelValue).slice(0, matchedOptionIndex + 1);
+        this.$emit('update:selection', this.d_selection);
+      } else {
+        this.changeFocusedOptionIndex(0);
+      }
+      event.preventDefault();
+    },
+    onEndKey: function onEndKey(event) {
+      if (event.ctrlKey && event.shiftKey) {
+        var items = DomHandler.find(this.list, '[data-pc-section="item"]');
+        var focusedItem = DomHandler.findSingle(this.list, "[data-pc-section=\"item\"][id=".concat(this.focusedOptionIndex, "]"));
+        var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+          return item === focusedItem;
+        });
+        this.d_selection = _toConsumableArray(this.modelValue).slice(matchedOptionIndex, items.length);
+        this.$emit('update:selection', this.d_selection);
+      } else {
+        this.changeFocusedOptionIndex(DomHandler.find(this.list, '[data-pc-section="item"]').length - 1);
+      }
+      event.preventDefault();
+    },
+    onEnterKey: function onEnterKey(event) {
+      var items = DomHandler.find(this.list, '[data-pc-section="item"]');
+      var focusedItem = DomHandler.findSingle(this.list, "[data-pc-section=\"item\"][id=".concat(this.focusedOptionIndex, "]"));
+      var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+        return item === focusedItem;
+      });
+      this.onItemClick(event, this.modelValue[matchedOptionIndex], matchedOptionIndex);
+      event.preventDefault();
+    },
+    onSpaceKey: function onSpaceKey(event) {
+      if (event.shiftKey) {
+        var items = DomHandler.find(this.list, '[data-pc-section="item"]');
+        var selectedItemIndex = ObjectUtils.findIndexInList(this.d_selection[0], _toConsumableArray(this.modelValue));
+        var focusedItem = DomHandler.findSingle(this.list, "[data-pc-section=\"item\"][id=".concat(this.focusedOptionIndex, "]"));
+        var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+          return item === focusedItem;
+        });
+        this.d_selection = _toConsumableArray(this.modelValue).slice(Math.min(selectedItemIndex, matchedOptionIndex), Math.max(selectedItemIndex, matchedOptionIndex) + 1);
+        this.$emit('update:selection', this.d_selection);
+      } else {
+        this.onEnterKey(event);
+      }
+    },
+    findNextOptionIndex: function findNextOptionIndex(index) {
+      var items = DomHandler.find(this.list, '[data-pc-section="item"]');
+      var matchedOptionIndex = _toConsumableArray(items).findIndex(function (link) {
+        return link.id === index;
+      });
+      return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+    },
+    findPrevOptionIndex: function findPrevOptionIndex(index) {
+      var items = DomHandler.find(this.list, '[data-pc-section="item"]');
+      var matchedOptionIndex = _toConsumableArray(items).findIndex(function (link) {
+        return link.id === index;
+      });
+      return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+    },
+    changeFocusedOptionIndex: function changeFocusedOptionIndex(index) {
+      var items = DomHandler.find(this.list, '[data-pc-section="item"]');
+      var order = index >= items.length ? items.length - 1 : index < 0 ? 0 : index;
+      this.focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
+      this.scrollInView(this.focusedOptionIndex);
+    },
+    scrollInView: function scrollInView(id) {
+      var element = DomHandler.findSingle(this.list, "[data-pc-section=\"item\"][id=\"".concat(id, "\"]"));
+      if (element) {
+        element.scrollIntoView && element.scrollIntoView({
+          block: 'nearest',
+          inline: 'start'
+        });
+      }
+    },
+    moveUp: function moveUp(event) {
+      if (this.d_selection) {
+        var value = _toConsumableArray(this.modelValue);
+        for (var i = 0; i < this.d_selection.length; i++) {
+          var selectedItem = this.d_selection[i];
+          var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
+          if (selectedItemIndex !== 0) {
+            var movedItem = value[selectedItemIndex];
+            var temp = value[selectedItemIndex - 1];
+            value[selectedItemIndex - 1] = movedItem;
+            value[selectedItemIndex] = temp;
+          } else {
+            break;
+          }
         }
+        this.reorderDirection = 'up';
+        this.$emit('update:modelValue', value);
+        this.$emit('reorder', {
+          originalEvent: event,
+          value: value,
+          direction: this.reorderDirection
+        });
+      }
     },
-    components: {
-        OLButton: Button,
-        AngleUpIcon: AngleUpIcon,
-        AngleDownIcon: AngleDownIcon,
-        AngleDoubleUpIcon: AngleDoubleUpIcon,
-        AngleDoubleDownIcon: AngleDoubleDownIcon
+    moveTop: function moveTop(event) {
+      if (this.d_selection) {
+        var value = _toConsumableArray(this.modelValue);
+        for (var i = 0; i < this.d_selection.length; i++) {
+          var selectedItem = this.d_selection[i];
+          var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
+          if (selectedItemIndex !== 0) {
+            var movedItem = value.splice(selectedItemIndex, 1)[0];
+            value.unshift(movedItem);
+          } else {
+            break;
+          }
+        }
+        this.reorderDirection = 'top';
+        this.$emit('update:modelValue', value);
+        this.$emit('reorder', {
+          originalEvent: event,
+          value: value,
+          direction: this.reorderDirection
+        });
+      }
     },
-    directives: {
-        ripple: Ripple
+    moveDown: function moveDown(event) {
+      if (this.d_selection) {
+        var value = _toConsumableArray(this.modelValue);
+        for (var i = this.d_selection.length - 1; i >= 0; i--) {
+          var selectedItem = this.d_selection[i];
+          var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
+          if (selectedItemIndex !== value.length - 1) {
+            var movedItem = value[selectedItemIndex];
+            var temp = value[selectedItemIndex + 1];
+            value[selectedItemIndex + 1] = movedItem;
+            value[selectedItemIndex] = temp;
+          } else {
+            break;
+          }
+        }
+        this.reorderDirection = 'down';
+        this.$emit('update:modelValue', value);
+        this.$emit('reorder', {
+          originalEvent: event,
+          value: value,
+          direction: this.reorderDirection
+        });
+      }
+    },
+    moveBottom: function moveBottom(event) {
+      if (this.d_selection) {
+        var value = _toConsumableArray(this.modelValue);
+        for (var i = this.d_selection.length - 1; i >= 0; i--) {
+          var selectedItem = this.d_selection[i];
+          var selectedItemIndex = ObjectUtils.findIndexInList(selectedItem, value);
+          if (selectedItemIndex !== value.length - 1) {
+            var movedItem = value.splice(selectedItemIndex, 1)[0];
+            value.push(movedItem);
+          } else {
+            break;
+          }
+        }
+        this.reorderDirection = 'bottom';
+        this.$emit('update:modelValue', value);
+        this.$emit('reorder', {
+          originalEvent: event,
+          value: value,
+          direction: this.reorderDirection
+        });
+      }
+    },
+    onItemClick: function onItemClick(event, item, index) {
+      this.itemTouched = false;
+      var selectedIndex = ObjectUtils.findIndexInList(item, this.d_selection);
+      var selected = selectedIndex != -1;
+      var metaSelection = this.itemTouched ? false : this.metaKeySelection;
+      var selectedId = DomHandler.find(this.list, '[data-pc-section="item"]')[index].getAttribute('id');
+      this.focusedOptionIndex = selectedId;
+      if (metaSelection) {
+        var metaKey = event.metaKey || event.ctrlKey;
+        if (selected && metaKey) {
+          this.d_selection = this.d_selection.filter(function (val, index) {
+            return index !== selectedIndex;
+          });
+        } else {
+          this.d_selection = metaKey ? this.d_selection ? _toConsumableArray(this.d_selection) : [] : [];
+          ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
+        }
+      } else {
+        if (selected) {
+          this.d_selection = this.d_selection.filter(function (val, index) {
+            return index !== selectedIndex;
+          });
+        } else {
+          this.d_selection = this.d_selection ? _toConsumableArray(this.d_selection) : [];
+          ObjectUtils.insertIntoOrderedArray(item, index, this.d_selection, this.modelValue);
+        }
+      }
+      this.$emit('update:selection', this.d_selection);
+      this.$emit('selection-change', {
+        originalEvent: event,
+        value: this.d_selection
+      });
+    },
+    onItemTouchEnd: function onItemTouchEnd() {
+      this.itemTouched = true;
+    },
+    findNextItem: function findNextItem(item) {
+      var nextItem = item.nextElementSibling;
+      if (nextItem) return !(DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item') ? this.findNextItem(nextItem) : nextItem;else return null;
+    },
+    findPrevItem: function findPrevItem(item) {
+      var prevItem = item.previousElementSibling;
+      if (prevItem) return !(DomHandler.getAttribute(nextItem, 'data-pc-section') === 'item') ? this.findPrevItem(prevItem) : prevItem;else return null;
+    },
+    updateListScroll: function updateListScroll() {
+      var listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-highlight="true"]');
+      if (listItems && listItems.length) {
+        switch (this.reorderDirection) {
+          case 'up':
+            DomHandler.scrollInView(this.list, listItems[0]);
+            break;
+          case 'top':
+            this.list.scrollTop = 0;
+            break;
+          case 'down':
+            DomHandler.scrollInView(this.list, listItems[listItems.length - 1]);
+            break;
+          case 'bottom':
+            this.list.scrollTop = this.list.scrollHeight;
+            break;
+        }
+      }
+    },
+    createStyle: function createStyle() {
+      if (!this.styleElement && !this.isUnstyled) {
+        this.$el.setAttribute(this.attributeSelector, '');
+        this.styleElement = document.createElement('style');
+        this.styleElement.type = 'text/css';
+        document.head.appendChild(this.styleElement);
+        var innerHTML = "\n@media screen and (max-width: ".concat(this.breakpoint, ") {\n    .p-orderlist[").concat(this.attributeSelector, "] {\n        flex-direction: column;\n    }\n\n    .p-orderlist[").concat(this.attributeSelector, "] .p-orderlist-controls {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-orderlist[").concat(this.attributeSelector, "] .p-orderlist-controls .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-orderlist[").concat(this.attributeSelector, "] .p-orderlist-controls .p-button:last-child {\n        margin-right: 0;\n    }\n}\n");
+        this.styleElement.innerHTML = innerHTML;
+      }
+    },
+    destroyStyle: function destroyStyle() {
+      if (this.styleElement) {
+        document.head.removeChild(this.styleElement);
+        this.styleElement = null;
+      }
+    },
+    moveDisabled: function moveDisabled() {
+      if (!this.d_selection || !this.d_selection.length) {
+        return true;
+      }
+    },
+    listRef: function listRef(el) {
+      this.list = el ? el.$el : undefined;
     }
-};
-
-const _hoisted_1 = ["id", "onClick", "aria-selected", "onMousedown"];
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_AngleUpIcon = resolveComponent("AngleUpIcon");
-  const _component_OLButton = resolveComponent("OLButton");
-  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')), [
-    createElementVNode("div", mergeProps({ class: "p-orderlist-controls" }, _ctx.ptm('controls')), [
-      renderSlot(_ctx.$slots, "controlsstart"),
-      createVNode(_component_OLButton, mergeProps({
-        type: "button",
-        onClick: $options.moveUp,
-        "aria-label": $options.moveUpAriaLabel,
-        disabled: $options.moveDisabled()
-      }, $props.moveUpButtonProps, {
-        pt: _ctx.ptm('moveUpButton')
-      }), {
-        icon: withCtx(() => [
-          renderSlot(_ctx.$slots, "moveupicon", {}, () => [
-            createVNode(_component_AngleUpIcon, normalizeProps(guardReactiveProps(_ctx.ptm('moveUpButton')['icon'])), null, 16)
-          ])
-        ]),
-        _: 3
-      }, 16, ["onClick", "aria-label", "disabled", "pt"]),
-      createVNode(_component_OLButton, mergeProps({
-        type: "button",
-        onClick: $options.moveTop,
-        "aria-label": $options.moveTopAriaLabel,
-        disabled: $options.moveDisabled()
-      }, $props.moveTopButtonProps, {
-        pt: _ctx.ptm('moveTopButton')
-      }), {
-        icon: withCtx(() => [
-          renderSlot(_ctx.$slots, "movetopicon", {}, () => [
-            createVNode(_component_AngleDoubleUpIcon, normalizeProps(guardReactiveProps(_ctx.ptm('moveTopButton')['icon'])), null, 16)
-          ])
-        ]),
-        _: 3
-      }, 16, ["onClick", "aria-label", "disabled", "pt"]),
-      createVNode(_component_OLButton, mergeProps({
-        type: "button",
-        onClick: $options.moveDown,
-        "aria-label": $options.moveDownAriaLabel,
-        disabled: $options.moveDisabled()
-      }, $props.moveDownButtonProps, {
-        pt: _ctx.ptm('moveDownButton')
-      }), {
-        icon: withCtx(() => [
-          renderSlot(_ctx.$slots, "movedownicon", {}, () => [
-            createVNode(_component_AngleDownIcon, normalizeProps(guardReactiveProps(_ctx.ptm('moveDownButton')['icon'])), null, 16)
-          ])
-        ]),
-        _: 3
-      }, 16, ["onClick", "aria-label", "disabled", "pt"]),
-      createVNode(_component_OLButton, mergeProps({
-        type: "button",
-        onClick: $options.moveBottom,
-        "aria-label": $options.moveBottomAriaLabel,
-        disabled: $options.moveDisabled()
-      }, $props.moveBottomButtonProps, {
-        pt: _ctx.ptm('moveBottomButton')
-      }), {
-        icon: withCtx(() => [
-          renderSlot(_ctx.$slots, "movebottomicon", {}, () => [
-            createVNode(_component_AngleDoubleDownIcon, normalizeProps(guardReactiveProps(_ctx.ptm('moveBottomButton')['icon'])), null, 16)
-          ])
-        ]),
-        _: 3
-      }, 16, ["onClick", "aria-label", "disabled", "pt"]),
-      renderSlot(_ctx.$slots, "controlsend")
-    ], 16),
-    createElementVNode("div", mergeProps({ class: "p-orderlist-list-container" }, _ctx.ptm('container')), [
-      (_ctx.$slots.header)
-        ? (openBlock(), createElementBlock("div", mergeProps({
-            key: 0,
-            class: "p-orderlist-header"
-          }, _ctx.ptm('header')), [
-            renderSlot(_ctx.$slots, "header")
-          ], 16))
-        : createCommentVNode("", true),
-      createVNode(TransitionGroup, mergeProps({
-        ref: $options.listRef,
-        id: $data.id + '_list',
-        name: "p-orderlist-flip",
-        tag: "ul",
-        class: "p-orderlist-list",
-        style: $props.listStyle,
-        role: "listbox",
-        "aria-multiselectable": "true",
-        tabindex: $props.tabindex,
-        "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
-        "aria-label": _ctx.ariaLabel,
-        "aria-labelledby": _ctx.ariaLabelledby,
-        onFocus: $options.onListFocus,
-        onBlur: $options.onListBlur,
-        onKeydown: $options.onListKeyDown
-      }, { ...$props.listProps, ..._ctx.ptm('list') }), {
-        default: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList($props.modelValue, (item, i) => {
-            return withDirectives((openBlock(), createElementBlock("li", mergeProps({
-              key: $options.getItemKey(item, i),
-              id: $data.id + '_' + i,
-              role: "option",
-              class: $options.itemClass(item, `${$data.id}_${i}`),
-              onClick: $event => ($options.onItemClick($event, item, i)),
-              onTouchend: _cache[0] || (_cache[0] = (...args) => ($options.onItemTouchEnd && $options.onItemTouchEnd(...args))),
-              "aria-selected": $options.isSelected(item),
-              onMousedown: $event => ($options.onOptionMouseDown(i))
-            }, $options.getPTOptions(item, 'item')), [
-              renderSlot(_ctx.$slots, "item", {
-                item: item,
-                index: i
-              })
-            ], 16, _hoisted_1)), [
-              [_directive_ripple]
-            ])
-          }), 128))
-        ]),
-        _: 3
-      }, 16, ["id", "style", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby", "onFocus", "onBlur", "onKeydown"])
-    ], 16)
-  ], 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);
+  },
+  computed: {
+    attributeSelector: function attributeSelector() {
+      return UniqueComponentId();
+    },
+    focusedOptionId: function focusedOptionId() {
+      return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
+    },
+    moveUpAriaLabel: function moveUpAriaLabel() {
+      return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveUp : undefined;
+    },
+    moveTopAriaLabel: function moveTopAriaLabel() {
+      return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveTop : undefined;
+    },
+    moveDownAriaLabel: function moveDownAriaLabel() {
+      return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveDown : undefined;
+    },
+    moveBottomAriaLabel: function moveBottomAriaLabel() {
+      return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveBottom : undefined;
     }
-  } else {
-    head.appendChild(style);
+  },
+  components: {
+    OLButton: Button,
+    AngleUpIcon: AngleUpIcon,
+    AngleDownIcon: AngleDownIcon,
+    AngleDoubleUpIcon: AngleDoubleUpIcon,
+    AngleDoubleDownIcon: AngleDoubleDownIcon
+  },
+  directives: {
+    ripple: Ripple
   }
+};
 
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _hoisted_1 = ["id", "onClick", "aria-selected", "onMousedown", "data-p-highlight", "data-p-focused"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_AngleUpIcon = resolveComponent("AngleUpIcon");
+  var _component_OLButton = resolveComponent("OLButton");
+  var _component_AngleDoubleUpIcon = resolveComponent("AngleDoubleUpIcon");
+  var _component_AngleDownIcon = resolveComponent("AngleDownIcon");
+  var _component_AngleDoubleDownIcon = resolveComponent("AngleDoubleDownIcon");
+  var _directive_ripple = resolveDirective("ripple");
+  return openBlock(), createElementBlock("div", mergeProps({
+    "class": _ctx.cx('root')
+  }, _ctx.ptm('root')), [createElementVNode("div", mergeProps({
+    "class": _ctx.cx('controls')
+  }, _ctx.ptm('controls')), [renderSlot(_ctx.$slots, "controlsstart"), createVNode(_component_OLButton, mergeProps({
+    type: "button",
+    onClick: $options.moveUp,
+    "aria-label": $options.moveUpAriaLabel,
+    disabled: $options.moveDisabled()
+  }, _objectSpread(_objectSpread({}, _ctx.moveUpButtonProps), _ctx.ptm('moveUpButton')), {
+    unstyled: _ctx.unstyled
+  }), {
+    icon: withCtx(function () {
+      return [renderSlot(_ctx.$slots, "moveupicon", {}, function () {
+        return [createVNode(_component_AngleUpIcon, normalizeProps(guardReactiveProps(_ctx.ptm('moveUpButton')['icon'])), null, 16)];
+      })];
+    }),
+    _: 3
+  }, 16, ["onClick", "aria-label", "disabled", "unstyled"]), createVNode(_component_OLButton, mergeProps({
+    type: "button",
+    onClick: $options.moveTop,
+    "aria-label": $options.moveTopAriaLabel,
+    disabled: $options.moveDisabled()
+  }, _objectSpread(_objectSpread({}, _ctx.moveTopButtonProps), _ctx.ptm('moveTopButton')), {
+    unstyled: _ctx.unstyled
+  }), {
+    icon: withCtx(function () {
+      return [renderSlot(_ctx.$slots, "movetopicon", {}, function () {
+        return [createVNode(_component_AngleDoubleUpIcon, normalizeProps(guardReactiveProps(_ctx.ptm('moveTopButton')['icon'])), null, 16)];
+      })];
+    }),
+    _: 3
+  }, 16, ["onClick", "aria-label", "disabled", "unstyled"]), createVNode(_component_OLButton, mergeProps({
+    type: "button",
+    onClick: $options.moveDown,
+    "aria-label": $options.moveDownAriaLabel,
+    disabled: $options.moveDisabled()
+  }, _objectSpread(_objectSpread({}, _ctx.moveDownButtonProps), _ctx.ptm('moveDownButton')), {
+    unstyled: _ctx.unstyled
+  }), {
+    icon: withCtx(function () {
+      return [renderSlot(_ctx.$slots, "movedownicon", {}, function () {
+        return [createVNode(_component_AngleDownIcon, normalizeProps(guardReactiveProps(_ctx.ptm('moveDownButton')['icon'])), null, 16)];
+      })];
+    }),
+    _: 3
+  }, 16, ["onClick", "aria-label", "disabled", "unstyled"]), createVNode(_component_OLButton, mergeProps({
+    type: "button",
+    onClick: $options.moveBottom,
+    "aria-label": $options.moveBottomAriaLabel,
+    disabled: $options.moveDisabled()
+  }, _objectSpread(_objectSpread({}, _ctx.moveBottomButtonProps), _ctx.ptm('moveBottomButton')), {
+    unstyled: _ctx.unstyled
+  }), {
+    icon: withCtx(function () {
+      return [renderSlot(_ctx.$slots, "movebottomicon", {}, function () {
+        return [createVNode(_component_AngleDoubleDownIcon, normalizeProps(guardReactiveProps(_ctx.ptm('moveBottomButton')['icon'])), null, 16)];
+      })];
+    }),
+    _: 3
+  }, 16, ["onClick", "aria-label", "disabled", "unstyled"]), renderSlot(_ctx.$slots, "controlsend")], 16), createElementVNode("div", mergeProps({
+    "class": _ctx.cx('container')
+  }, _ctx.ptm('container')), [_ctx.$slots.header ? (openBlock(), createElementBlock("div", mergeProps({
+    key: 0,
+    "class": _ctx.cx('header')
+  }, _ctx.ptm('header')), [renderSlot(_ctx.$slots, "header")], 16)) : createCommentVNode("", true), createVNode(TransitionGroup, mergeProps({
+    ref: $options.listRef,
+    id: $data.id + '_list',
+    name: "p-orderlist-flip",
+    tag: "ul",
+    "class": _ctx.cx('list'),
+    style: _ctx.listStyle,
+    role: "listbox",
+    "aria-multiselectable": "true",
+    tabindex: _ctx.tabindex,
+    "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
+    "aria-label": _ctx.ariaLabel,
+    "aria-labelledby": _ctx.ariaLabelledby,
+    onFocus: $options.onListFocus,
+    onBlur: $options.onListBlur,
+    onKeydown: $options.onListKeyDown
+  }, _objectSpread(_objectSpread({}, _ctx.listProps), _ctx.ptm('list'))), {
+    "default": withCtx(function () {
+      return [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modelValue, function (item, i) {
+        return withDirectives((openBlock(), createElementBlock("li", mergeProps({
+          key: $options.getItemKey(item, i),
+          id: $data.id + '_' + i,
+          role: "option",
+          "class": _ctx.cx('item', {
+            item: item,
+            id: "".concat($data.id, "_").concat(i)
+          }),
+          onClick: function onClick($event) {
+            return $options.onItemClick($event, item, i);
+          },
+          onTouchend: _cache[0] || (_cache[0] = function () {
+            return $options.onItemTouchEnd && $options.onItemTouchEnd.apply($options, arguments);
+          }),
+          "aria-selected": $options.isSelected(item),
+          onMousedown: function onMousedown($event) {
+            return $options.onOptionMouseDown(i);
+          }
+        }, $options.getPTOptions(item, 'item'), {
+          "data-p-highlight": $options.isSelected(item),
+          "data-p-focused": "".concat($data.id, "_").concat(i) === $options.focusedOptionId
+        }), [renderSlot(_ctx.$slots, "item", {
+          item: item,
+          index: i
+        })], 16, _hoisted_1)), [[_directive_ripple]]);
+      }), 128))];
+    }),
+    _: 3
+  }, 16, ["id", "class", "style", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby", "onFocus", "onBlur", "onKeydown"])], 16)], 16);
 }
 
-var css_248z = "\n.p-orderlist {\n    display: flex;\n}\n.p-orderlist-controls {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n.p-orderlist-list-container {\n    flex: 1 1 auto;\n}\n.p-orderlist-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-orderlist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n.p-orderlist.p-state-disabled .p-orderlist-item,\n.p-orderlist.p-state-disabled .p-button {\n    cursor: default;\n}\n.p-orderlist.p-state-disabled .p-orderlist-list {\n    overflow: hidden;\n}\n";
-styleInject(css_248z);
-
 script.render = render;
 
 export { script as default };