primevue 3.29.2 → 3.30.0

package/picklist/picklist.js

@@ -1,10 +1,9 @@
 this.primevue = this.primevue || {};
-this.primevue.picklist = (function (BaseComponent, Button, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, Ripple, utils, vue) {
+this.primevue.picklist = (function (Button, AngleDoubleDownIcon, AngleDoubleLeftIcon, AngleDoubleRightIcon, AngleDoubleUpIcon, AngleDownIcon, AngleLeftIcon, AngleRightIcon, AngleUpIcon, Ripple, utils, BaseComponent, usestyle, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
     var AngleDoubleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleDoubleDownIcon);
     var AngleDoubleLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleDoubleLeftIcon);
@@ -15,1136 +14,1088 @@ this.primevue.picklist = (function (BaseComponent, Button, AngleDoubleDownIcon,
     var AngleRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleRightIcon);
     var AngleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleUpIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
 
+    var styles = "\n.p-picklist {\n    display: flex;\n}\n\n.p-picklist-buttons {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n}\n\n.p-picklist-list-wrapper {\n    flex: 1 1 50%;\n}\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\n.p-picklist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\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";
+    var classes = {
+      root: function root(_ref) {
+        var props = _ref.props;
+        return ['p-picklist p-component', {
+          'p-picklist-striped': props.stripedRows
+        }];
+      },
+      sourceControls: 'p-picklist-buttons p-picklist-source-controls',
+      sourceWrapper: 'p-picklist-list-wrapper p-picklist-source-wrapper',
+      sourceHeader: 'p-picklist-header',
+      sourceList: 'p-picklist-list p-picklist-source-list',
+      item: function item(_ref2) {
+        var instance = _ref2.instance,
+          _item = _ref2.item,
+          id = _ref2.id,
+          listIndex = _ref2.listIndex;
+        return ['p-picklist-item', {
+          'p-highlight': instance.isSelected(_item, listIndex),
+          'p-focus': id === instance.focusedOptionId
+        }];
+      },
+      buttons: 'p-picklist-buttons p-picklist-transfer-buttons',
+      targetWrapper: 'p-picklist-list-wrapper p-picklist-target-wrapper',
+      targetHeader: 'p-picklist-header',
+      targetList: 'p-picklist-list p-picklist-target',
+      targetControls: 'p-picklist-buttons p-picklist-target-controls'
+    };
+    var _useStyle = usestyle.useStyle(styles, {
+        name: 'picklist',
+        manual: true
+      }),
+      loadStyle = _useStyle.load;
+    var script$1 = {
+      name: 'BasePickList',
+      "extends": BaseComponent__default["default"],
+      props: {
+        modelValue: {
+          type: Array,
+          "default": function _default() {
+            return [[], []];
+          }
+        },
+        selection: {
+          type: Array,
+          "default": function _default() {
+            return [[], []];
+          }
+        },
+        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
+        }
+      },
+      css: {
+        classes: classes,
+        loadStyle: loadStyle
+      },
+      provide: function provide() {
+        return {
+          $parentInstance: this
+        };
+      }
+    };
+
+    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: 'PickList',
-        extends: BaseComponent__default["default"],
-        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
+      name: 'PickList',
+      "extends": script$1,
+      emits: ['update:modelValue', 'reorder', 'update:selection', 'selection-change', 'move-to-target', 'move-to-source', 'move-all-to-target', 'move-all-to-source', 'focus', 'blur'],
+      itemTouched: false,
+      reorderDirection: null,
+      styleElement: null,
+      media: null,
+      mediaChangeListener: null,
+      data: function data() {
+        return {
+          id: this.$attrs.id,
+          d_selection: this.selection,
+          focused: {
+            sourceList: false,
+            targetList: false
+          },
+          focusedOptionIndex: -1,
+          viewChanged: false
+        };
+      },
+      watch: {
+        '$attrs.id': function $attrsId(newValue) {
+          this.id = newValue || utils.UniqueComponentId();
+        },
+        selection: function selection(newValue) {
+          this.d_selection = newValue;
+        },
+        breakpoint: function breakpoint(newValue) {
+          this.destroyMedia();
+          this.initMedia();
+        }
+      },
+      updated: function updated() {
+        if (this.reorderDirection) {
+          this.updateListScroll(this.$refs.sourceList.$el);
+          this.updateListScroll(this.$refs.targetList.$el);
+          this.reorderDirection = null;
+        }
+      },
+      beforeUnmount: function beforeUnmount() {
+        this.destroyStyle();
+        this.destroyMedia();
+      },
+      mounted: function mounted() {
+        this.id = this.id || utils.UniqueComponentId();
+        if (this.responsive) {
+          this.createStyle();
+          this.initMedia();
+        }
+      },
+      methods: {
+        getItemKey: function getItemKey(item, index) {
+          return this.dataKey ? utils.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
             }
+          });
         },
-        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
-            };
+        isSelected: function isSelected(item, listIndex) {
+          return utils.ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
+        },
+        onListFocus: function onListFocus(event, listType) {
+          var selectedFirstItem = utils.DomHandler.findSingle(this.$refs[listType].$el, '[data-p-highlight="true"]');
+          var findIndex = utils.ObjectUtils.findIndexInList(selectedFirstItem, this.$refs[listType].$el.children);
+          this.focused[listType] = true;
+          var index = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : selectedFirstItem ? findIndex : -1;
+          this.changeFocusedOptionIndex(index, listType);
+          this.$emit('focus', event);
+        },
+        onListBlur: function onListBlur(event, listType) {
+          this.focused[listType] = false;
+          this.focusedOptionIndex = -1;
+          this.$emit('blur', event);
+        },
+        onOptionMouseDown: function onOptionMouseDown(index, listType) {
+          this.focused[listType] = true;
+          this.focusedOptionIndex = index;
         },
-        watch: {
-            '$attrs.id': function (newValue) {
-                this.id = newValue || utils.UniqueComponentId();
-            },
-            selection(newValue) {
-                this.d_selection = newValue;
-            },
-            breakpoint(newValue) {
-                this.destroyMedia();
-                this.initMedia();
+        moveUp: function moveUp(event, listIndex) {
+          if (this.d_selection && this.d_selection[listIndex]) {
+            var valueList = _toConsumableArray(this.modelValue[listIndex]);
+            var selectionList = this.d_selection[listIndex];
+            for (var i = 0; i < selectionList.length; i++) {
+              var selectedItem = selectionList[i];
+              var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, valueList);
+              if (selectedItemIndex !== 0) {
+                var movedItem = valueList[selectedItemIndex];
+                var temp = valueList[selectedItemIndex - 1];
+                valueList[selectedItemIndex - 1] = movedItem;
+                valueList[selectedItemIndex] = temp;
+              } else {
+                break;
+              }
             }
+            var value = _toConsumableArray(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
+            });
+          }
         },
-        updated() {
-            if (this.reorderDirection) {
-                this.updateListScroll(this.$refs.sourceList.$el);
-                this.updateListScroll(this.$refs.targetList.$el);
-                this.reorderDirection = null;
+        moveTop: function moveTop(event, listIndex) {
+          if (this.d_selection) {
+            var valueList = _toConsumableArray(this.modelValue[listIndex]);
+            var selectionList = this.d_selection[listIndex];
+            for (var i = 0; i < selectionList.length; i++) {
+              var selectedItem = selectionList[i];
+              var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, valueList);
+              if (selectedItemIndex !== 0) {
+                var movedItem = valueList.splice(selectedItemIndex, 1)[0];
+                valueList.unshift(movedItem);
+              } else {
+                break;
+              }
             }
+            var value = _toConsumableArray(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
+            });
+          }
         },
-        beforeUnmount() {
-            this.destroyStyle();
-            this.destroyMedia();
+        moveDown: function moveDown(event, listIndex) {
+          if (this.d_selection) {
+            var valueList = _toConsumableArray(this.modelValue[listIndex]);
+            var selectionList = this.d_selection[listIndex];
+            for (var i = selectionList.length - 1; i >= 0; i--) {
+              var selectedItem = selectionList[i];
+              var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, valueList);
+              if (selectedItemIndex !== valueList.length - 1) {
+                var movedItem = valueList[selectedItemIndex];
+                var temp = valueList[selectedItemIndex + 1];
+                valueList[selectedItemIndex + 1] = movedItem;
+                valueList[selectedItemIndex] = temp;
+              } else {
+                break;
+              }
+            }
+            var value = _toConsumableArray(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
+            });
+          }
         },
-        mounted() {
-            this.id = this.id || utils.UniqueComponentId();
-
-            if (this.responsive) {
-                this.createStyle();
-                this.initMedia();
+        moveBottom: function moveBottom(event, listIndex) {
+          if (this.d_selection) {
+            var valueList = _toConsumableArray(this.modelValue[listIndex]);
+            var selectionList = this.d_selection[listIndex];
+            for (var i = selectionList.length - 1; i >= 0; i--) {
+              var selectedItem = selectionList[i];
+              var selectedItemIndex = utils.ObjectUtils.findIndexInList(selectedItem, valueList);
+              if (selectedItemIndex !== valueList.length - 1) {
+                var movedItem = valueList.splice(selectedItemIndex, 1)[0];
+                valueList.push(movedItem);
+              } else {
+                break;
+              }
             }
+            var value = _toConsumableArray(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
+            });
+          }
         },
-        methods: {
-            getItemKey(item, index) {
-                return this.dataKey ? utils.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 utils.ObjectUtils.findIndexInList(item, this.d_selection[listIndex]) != -1;
-            },
-            onListFocus(event, listType) {
-                const selectedFirstItem = utils.DomHandler.findSingle(this.$refs[listType].$el, 'li.p-picklist-item.p-highlight');
-                const findIndex = utils.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 = utils.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 = utils.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 = utils.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 = utils.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 (utils.ObjectUtils.findIndexInList(selectedItem, targetList) == -1) {
-                            targetList.push(sourceList.splice(utils.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 (utils.ObjectUtils.findIndexInList(selectedItem, sourceList) == -1) {
-                            sourceList.push(targetList.splice(utils.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 = utils.ObjectUtils.findIndexInList(item, this.d_selection);
-                const selected = selectedIndex != -1;
-                const metaSelection = this.itemTouched ? false : this.metaKeySelection;
-                const selectedId = utils.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 = utils.DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
-                const focusedItem = utils.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 = utils.DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
-                    const selectedItemIndex = utils.ObjectUtils.findIndexInList(this.d_selection[listId][0], [...this.modelValue[listId]]);
-                    const focusedItem = utils.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 = utils.DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
-                    const focusedItem = utils.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 = utils.DomHandler.find(this.$refs[listType].$el, 'li.p-picklist-item');
-
-                if (event.ctrlKey && event.shiftKey) {
-                    const listId = listType === 'sourceList' ? 0 : 1;
-                    const focusedItem = utils.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 = utils.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 = utils.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 = utils.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 = utils.DomHandler.findSingle(this.$refs[listType].$el, `li[id="${id}"]`);
-
-                if (element) {
-                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
-                }
-            },
-            updateListScroll(listElement) {
-                const listItems = utils.DomHandler.find(listElement, '.p-picklist-item.p-highlight');
-
-                if (listItems && listItems.length) {
-                    switch (this.reorderDirection) {
-                        case 'up':
-                            utils.DomHandler.scrollInView(listElement, listItems[0]);
-                            break;
-
-                        case 'top':
-                            listElement.scrollTop = 0;
-                            break;
-
-                        case 'down':
-                            utils.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 utils.ObjectUtils.isEmpty(this[list]);
-            },
-            moveSourceDisabled() {
-                return utils.ObjectUtils.isEmpty(this.targetList);
-            },
-            itemClass(item, id, listIndex) {
-                return ['p-picklist-item', { 'p-highlight': this.isSelected(item, listIndex), 'p-focus': id === this.focusedOptionId }];
+        moveToTarget: function moveToTarget(event) {
+          var selection = this.d_selection && this.d_selection[0] ? this.d_selection[0] : null;
+          var sourceList = _toConsumableArray(this.modelValue[0]);
+          var targetList = _toConsumableArray(this.modelValue[1]);
+          if (selection) {
+            for (var i = 0; i < selection.length; i++) {
+              var selectedItem = selection[i];
+              if (utils.ObjectUtils.findIndexInList(selectedItem, targetList) == -1) {
+                targetList.push(sourceList.splice(utils.ObjectUtils.findIndexInList(selectedItem, sourceList), 1)[0]);
+              }
+            }
+            var value = _toConsumableArray(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: function moveAllToTarget(event) {
+          if (this.modelValue[0]) {
+            var sourceList = _toConsumableArray(this.modelValue[0]);
+            var targetList = _toConsumableArray(this.modelValue[1]);
+            this.$emit('move-all-to-target', {
+              originalEvent: event,
+              items: sourceList
+            });
+            targetList = [].concat(_toConsumableArray(targetList), _toConsumableArray(sourceList));
+            sourceList = [];
+            var value = _toConsumableArray(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: function moveToSource(event) {
+          var selection = this.d_selection && this.d_selection[1] ? this.d_selection[1] : null;
+          var sourceList = _toConsumableArray(this.modelValue[0]);
+          var targetList = _toConsumableArray(this.modelValue[1]);
+          if (selection) {
+            for (var i = 0; i < selection.length; i++) {
+              var selectedItem = selection[i];
+              if (utils.ObjectUtils.findIndexInList(selectedItem, sourceList) == -1) {
+                sourceList.push(targetList.splice(utils.ObjectUtils.findIndexInList(selectedItem, targetList), 1)[0]);
+              }
             }
+            var value = _toConsumableArray(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
+            });
+          }
         },
-        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 utils.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;
+        moveAllToSource: function moveAllToSource(event) {
+          if (this.modelValue[1]) {
+            var sourceList = _toConsumableArray(this.modelValue[0]);
+            var targetList = _toConsumableArray(this.modelValue[1]);
+            this.$emit('move-all-to-source', {
+              originalEvent: event,
+              items: targetList
+            });
+            sourceList = [].concat(_toConsumableArray(sourceList), _toConsumableArray(targetList));
+            targetList = [];
+            var value = _toConsumableArray(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: function onItemClick(event, item, index, listIndex) {
+          var listType = listIndex === 0 ? 'sourceList' : 'targetList';
+          this.itemTouched = false;
+          var selectionList = this.d_selection[listIndex];
+          var selectedIndex = utils.ObjectUtils.findIndexInList(item, this.d_selection);
+          var selected = selectedIndex != -1;
+          var metaSelection = this.itemTouched ? false : this.metaKeySelection;
+          var selectedId = utils.DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]')[index].getAttribute('id');
+          this.focusedOptionIndex = selectedId;
+          var _selection;
+          if (metaSelection) {
+            var metaKey = event.metaKey || event.ctrlKey;
+            if (selected && metaKey) {
+              _selection = selectionList.filter(function (val, index) {
+                return index !== selectedIndex;
+              });
+            } else {
+              _selection = metaKey ? selectionList ? _toConsumableArray(selectionList) : [] : [];
+              _selection.push(item);
+            }
+          } else {
+            if (selected) {
+              _selection = selectionList.filter(function (val, index) {
+                return index !== selectedIndex;
+              });
+            } else {
+              _selection = selectionList ? _toConsumableArray(selectionList) : [];
+              _selection.push(item);
             }
+          }
+          var newSelection = _toConsumableArray(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: function onItemDblClick(event, item, listIndex) {
+          if (listIndex === 0) this.moveToTarget(event);else if (listIndex === 1) this.moveToSource(event);
+        },
+        onItemTouchEnd: function onItemTouchEnd() {
+          this.itemTouched = true;
+        },
+        onItemKeyDown: function 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 = _toConsumableArray(this.modelValue);
+                this.$emit('update:selection', this.d_selection);
+              }
+          }
         },
-        components: {
-            PLButton: Button__default["default"],
-            AngleRightIcon: AngleRightIcon__default["default"],
-            AngleLeftIcon: AngleLeftIcon__default["default"],
-            AngleDownIcon: AngleDownIcon__default["default"],
-            AngleUpIcon: AngleUpIcon__default["default"],
-            AngleDoubleRightIcon: AngleDoubleRightIcon__default["default"],
-            AngleDoubleLeftIcon: AngleDoubleLeftIcon__default["default"],
-            AngleDoubleDownIcon: AngleDoubleDownIcon__default["default"],
-            AngleDoubleUpIcon: AngleDoubleUpIcon__default["default"]
-        },
-        directives: {
-            ripple: Ripple__default["default"]
+        onArrowDownKey: function onArrowDownKey(event, listType) {
+          var optionIndex = this.findNextOptionIndex(this.focusedOptionIndex, listType);
+          this.changeFocusedOptionIndex(optionIndex, listType);
+          if (event.shiftKey) {
+            this.onEnterKey(event, listType);
+          }
+          event.preventDefault();
+        },
+        onArrowUpKey: function onArrowUpKey(event, listType) {
+          var optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex, listType);
+          this.changeFocusedOptionIndex(optionIndex, listType);
+          if (event.shiftKey) {
+            this.onEnterKey(event, listType);
+          }
+          event.preventDefault();
+        },
+        onEnterKey: function onEnterKey(event, listType) {
+          var items = utils.DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]');
+          var focusedItem = utils.DomHandler.findSingle(this.$refs[listType].$el, "[data-pc-section=\"item\"][id=".concat(this.focusedOptionIndex, "]"));
+          var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+            return item === focusedItem;
+          });
+          var listId = listType === 'sourceList' ? 0 : 1;
+          this.onItemClick(event, this.modelValue[listId][matchedOptionIndex], matchedOptionIndex, listId);
+          event.preventDefault();
+        },
+        onSpaceKey: function onSpaceKey(event, listType) {
+          event.preventDefault();
+          if (event.shiftKey) {
+            var listId = listType === 'sourceList' ? 0 : 1;
+            var items = utils.DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]');
+            var selectedItemIndex = utils.ObjectUtils.findIndexInList(this.d_selection[listId][0], _toConsumableArray(this.modelValue[listId]));
+            var focusedItem = utils.DomHandler.findSingle(this.$refs[listType].$el, "[data-pc-section=\"item\"][id=".concat(this.focusedOptionIndex, "]"));
+            var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+              return item === focusedItem;
+            });
+            this.d_selection[listId] = _toConsumableArray(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: function onHomeKey(event, listType) {
+          if (event.ctrlKey && event.shiftKey) {
+            var listId = listType === 'sourceList' ? 0 : 1;
+            var items = utils.DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]');
+            var focusedItem = utils.DomHandler.findSingle(this.$refs[listType].$el, "[data-pc-section=\"item\"][id=".concat(this.focusedOptionIndex, "]"));
+            var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+              return item === focusedItem;
+            });
+            this.d_selection[listId] = _toConsumableArray(this.modelValue[listId]).slice(0, matchedOptionIndex + 1);
+            this.$emit('update:selection', this.d_selection);
+          } else {
+            this.changeFocusedOptionIndex(0, listType);
+          }
+          event.preventDefault();
+        },
+        onEndKey: function onEndKey(event, listType) {
+          var items = utils.DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]');
+          if (event.ctrlKey && event.shiftKey) {
+            var listId = listType === 'sourceList' ? 0 : 1;
+            var focusedItem = utils.DomHandler.findSingle(this.$refs[listType].$el, "[data-pc-section=\"item\"][id=".concat(this.focusedOptionIndex, "]"));
+            var matchedOptionIndex = _toConsumableArray(items).findIndex(function (item) {
+              return item === focusedItem;
+            });
+            this.d_selection[listId] = _toConsumableArray(this.modelValue[listId]).slice(matchedOptionIndex, items.length);
+            this.$emit('update:selection', this.d_selection);
+          } else {
+            this.changeFocusedOptionIndex(items.length - 1, listType);
+          }
+          event.preventDefault();
+        },
+        findNextOptionIndex: function findNextOptionIndex(index, listType) {
+          var items = utils.DomHandler.find(this.$refs[listType].$el, '[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, listType) {
+          var items = utils.DomHandler.find(this.$refs[listType].$el, '[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, listType) {
+          var items = utils.DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]');
+          var 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: function scrollInView(id, listType) {
+          var element = utils.DomHandler.findSingle(this.$refs[listType].$el, "[data-pc-section=\"item\"][id=\"".concat(id, "\"]"));
+          if (element) {
+            element.scrollIntoView && element.scrollIntoView({
+              block: 'nearest',
+              inline: 'start'
+            });
+          }
+        },
+        updateListScroll: function updateListScroll(listElement) {
+          var listItems = utils.DomHandler.find(listElement, '[data-pc-section="item"][data-p-highlight="true"]');
+          if (listItems && listItems.length) {
+            switch (this.reorderDirection) {
+              case 'up':
+                utils.DomHandler.scrollInView(listElement, listItems[0]);
+                break;
+              case 'top':
+                listElement.scrollTop = 0;
+                break;
+              case 'down':
+                utils.DomHandler.scrollInView(listElement, listItems[listItems.length - 1]);
+                break;
+              case 'bottom':
+                listElement.scrollTop = listElement.scrollHeight;
+                break;
+            }
+          }
+        },
+        initMedia: function initMedia() {
+          this.media = window.matchMedia("(max-width: ".concat(this.breakpoint, ")"));
+          this.viewChanged = this.media.matches;
+          this.bindMediaChangeListener();
+        },
+        destroyMedia: function destroyMedia() {
+          this.unbindMediaChangeListener();
+        },
+        bindMediaChangeListener: function bindMediaChangeListener() {
+          var _this = this;
+          if (this.media && !this.mediaChangeListener) {
+            this.mediaChangeListener = function (event) {
+              _this.viewChanged = event.matches;
+            };
+            this.media.addEventListener('change', this.mediaChangeListener);
+          }
+        },
+        unbindMediaChangeListener: function unbindMediaChangeListener() {
+          if (this.media && this.mediaChangeListener) {
+            this.media.removeEventListener('change', this.mediaChangeListener);
+            this.mediaChangeListener = null;
+          }
+        },
+        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-picklist[").concat(this.attributeSelector, "] {\n        flex-direction: column;\n    }\n\n    .p-picklist[").concat(this.attributeSelector, "] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[").concat(this.attributeSelector, "] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[").concat(this.attributeSelector, "] .p-picklist-buttons .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(index) {
+          if (!this.d_selection[index] || !this.d_selection[index].length) {
+            return true;
+          }
+        },
+        moveAllDisabled: function moveAllDisabled(list) {
+          return utils.ObjectUtils.isEmpty(this[list]);
+        },
+        moveSourceDisabled: function moveSourceDisabled() {
+          return utils.ObjectUtils.isEmpty(this.targetList);
         }
-    };
-
-    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 = vue.resolveComponent("AngleUpIcon");
-      const _component_PLButton = vue.resolveComponent("PLButton");
-      const _component_AngleDoubleUpIcon = vue.resolveComponent("AngleDoubleUpIcon");
-      const _component_AngleDownIcon = vue.resolveComponent("AngleDownIcon");
-      const _component_AngleDoubleDownIcon = vue.resolveComponent("AngleDoubleDownIcon");
-      const _directive_ripple = vue.resolveDirective("ripple");
-
-      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
-        ($props.showSourceControls)
-          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-              key: 0,
-              class: "p-picklist-buttons p-picklist-source-controls"
-            }, _ctx.ptm('sourceControls')), [
-              vue.renderSlot(_ctx.$slots, "sourcecontrolsstart"),
-              vue.createVNode(_component_PLButton, vue.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: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "moveupicon", {}, () => [
-                    vue.createVNode(_component_AngleUpIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('sourceMoveUpButton')['icon'])), null, 16)
-                  ])
-                ]),
-                _: 3
-              }, 16, ["aria-label", "disabled", "pt"]),
-              vue.createVNode(_component_PLButton, vue.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: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "movetopicon", {}, () => [
-                    vue.createVNode(_component_AngleDoubleUpIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('sourceMoveTopButton')['icon'])), null, 16)
-                  ])
-                ]),
-                _: 3
-              }, 16, ["aria-label", "disabled", "pt"]),
-              vue.createVNode(_component_PLButton, vue.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: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "movedownicon", {}, () => [
-                    vue.createVNode(_component_AngleDownIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('sourceMoveDownButton')['icon'])), null, 16)
-                  ])
-                ]),
-                _: 3
-              }, 16, ["aria-label", "disabled", "pt"]),
-              vue.createVNode(_component_PLButton, vue.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: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "movebottomicon", {}, () => [
-                    vue.createVNode(_component_AngleDoubleDownIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('sourceMoveBottomButton')['icon'])), null, 16)
-                  ])
-                ]),
-                _: 3
-              }, 16, ["aria-label", "disabled", "pt"]),
-              vue.renderSlot(_ctx.$slots, "sourcecontrolsend")
-            ], 16))
-          : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", vue.mergeProps({ class: "p-picklist-list-wrapper p-picklist-source-wrapper" }, _ctx.ptm('sourceWrapper')), [
-          (_ctx.$slots.sourceheader)
-            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-                key: 0,
-                class: "p-picklist-header"
-              }, _ctx.ptm('sourceHeader')), [
-                vue.renderSlot(_ctx.$slots, "sourceheader")
-              ], 16))
-            : vue.createCommentVNode("", true),
-          vue.createVNode(vue.TransitionGroup, vue.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: vue.withCtx(() => [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.sourceList, (item, i) => {
-                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", vue.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')), [
-                  vue.renderSlot(_ctx.$slots, "item", {
-                    item: item,
-                    index: i
-                  })
-                ], 16, _hoisted_1)), [
-                  [_directive_ripple]
-                ])
-              }), 128))
-            ]),
-            _: 3
-          }, 16, ["id", "style", "aria-activedescendant", "tabindex"])
-        ], 16),
-        vue.createElementVNode("div", vue.mergeProps({ class: "p-picklist-buttons p-picklist-transfer-buttons" }, _ctx.ptm('buttons')), [
-          vue.renderSlot(_ctx.$slots, "movecontrolsstart"),
-          vue.createVNode(_component_PLButton, vue.mergeProps({
-            "aria-label": $options.moveToTargetAriaLabel,
-            type: "button",
-            onClick: $options.moveToTarget,
-            disabled: $options.moveDisabled(0)
-          }, $props.moveToTargetProps, {
-            pt: _ctx.ptm('moveToTargetButton')
-          }), {
-            icon: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "movetotargeticon", { viewChanged: $data.viewChanged }, () => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('moveToTargetButton')['icon'])), null, 16))
-              ])
-            ]),
-            _: 3
-          }, 16, ["aria-label", "onClick", "disabled", "pt"]),
-          vue.createVNode(_component_PLButton, vue.mergeProps({
-            "aria-label": $options.moveAllToTargetAriaLabel,
-            type: "button",
-            onClick: $options.moveAllToTarget,
-            disabled: $options.moveAllDisabled('sourceList')
-          }, $props.moveAllToTargetProps, {
-            pt: _ctx.ptm('moveAllToTargetButton')
-          }), {
-            icon: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "movealltotargeticon", { viewChanged: $data.viewChanged }, () => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('moveAllToTargetButton')['icon'])), null, 16))
-              ])
-            ]),
-            _: 3
-          }, 16, ["aria-label", "onClick", "disabled", "pt"]),
-          vue.createVNode(_component_PLButton, vue.mergeProps({
-            "aria-label": $options.moveToSourceAriaLabel,
-            type: "button",
-            onClick: $options.moveToSource,
-            disabled: $options.moveDisabled(1)
-          }, $props.moveToSourceProps, {
-            pt: _ctx.ptm('moveToSourceButton')
-          }), {
-            icon: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "movetosourceicon", { viewChanged: $data.viewChanged }, () => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('moveToSourceButton')['icon'])), null, 16))
-              ])
-            ]),
-            _: 3
-          }, 16, ["aria-label", "onClick", "disabled", "pt"]),
-          vue.createVNode(_component_PLButton, vue.mergeProps({
-            "aria-label": $options.moveAllToSourceAriaLabel,
-            type: "button",
-            onClick: $options.moveAllToSource,
-            disabled: $options.moveSourceDisabled('targetList')
-          }, $props.moveAllToSourceProps, {
-            pt: _ctx.ptm('moveAllToSourceButton')
-          }), {
-            icon: vue.withCtx(() => [
-              vue.renderSlot(_ctx.$slots, "movealltosourceicon", { viewChanged: $data.viewChanged }, () => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('moveAllToSourceButton')['icon'])), null, 16))
-              ])
-            ]),
-            _: 3
-          }, 16, ["aria-label", "onClick", "disabled", "pt"]),
-          vue.renderSlot(_ctx.$slots, "movecontrolsend")
-        ], 16),
-        vue.createElementVNode("div", vue.mergeProps({ class: "p-picklist-list-wrapper p-picklist-target-wrapper" }, _ctx.ptm('targetWrapper')), [
-          (_ctx.$slots.targetheader)
-            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-                key: 0,
-                class: "p-picklist-header"
-              }, _ctx.ptm('targetHeader')), [
-                vue.renderSlot(_ctx.$slots, "targetheader")
-              ], 16))
-            : vue.createCommentVNode("", true),
-          vue.createVNode(vue.TransitionGroup, vue.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: vue.withCtx(() => [
-              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.targetList, (item, i) => {
-                return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", vue.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')), [
-                  vue.renderSlot(_ctx.$slots, "item", {
-                    item: item,
-                    index: i
-                  })
-                ], 16, _hoisted_2)), [
-                  [_directive_ripple]
-                ])
-              }), 128))
-            ]),
-            _: 3
-          }, 16, ["id", "style", "aria-activedescendant", "tabindex"])
-        ], 16),
-        ($props.showTargetControls)
-          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-              key: 1,
-              class: "p-picklist-buttons p-picklist-target-controls"
-            }, _ctx.ptm('targetControls')), [
-              vue.renderSlot(_ctx.$slots, "targetcontrolsstart"),
-              vue.createVNode(_component_PLButton, vue.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: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "moveupicon", {}, () => [
-                    vue.createVNode(_component_AngleUpIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('targetMoveUpButton')['icon'])), null, 16)
-                  ])
-                ]),
-                _: 3
-              }, 16, ["aria-label", "disabled", "pt"]),
-              vue.createVNode(_component_PLButton, vue.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: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "movetopicon", {}, () => [
-                    vue.createVNode(_component_AngleDoubleUpIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('targetMoveTopButton')['icon'])), null, 16)
-                  ])
-                ]),
-                _: 3
-              }, 16, ["aria-label", "disabled", "pt"]),
-              vue.createVNode(_component_PLButton, vue.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: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "movedownicon", {}, () => [
-                    vue.createVNode(_component_AngleDownIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('targetMoveDownButton')['icon'])), null, 16)
-                  ])
-                ]),
-                _: 3
-              }, 16, ["aria-label", "disabled", "pt"]),
-              vue.createVNode(_component_PLButton, vue.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: vue.withCtx(() => [
-                  vue.renderSlot(_ctx.$slots, "movebottomicon", {}, () => [
-                    vue.createVNode(_component_AngleDoubleDownIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('targetMoveBottomButton')['icon'])), null, 16)
-                  ])
-                ]),
-                _: 3
-              }, 16, ["aria-label", "disabled", "pt"]),
-              vue.renderSlot(_ctx.$slots, "targetcontrolsend")
-            ], 16))
-          : vue.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);
+      },
+      computed: {
+        idSource: function idSource() {
+          return "".concat(this.id, "_source");
+        },
+        idTarget: function idTarget() {
+          return "".concat(this.id, "_target");
+        },
+        focusedOptionId: function focusedOptionId() {
+          return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
+        },
+        sourceList: function sourceList() {
+          return this.modelValue && this.modelValue[0] ? this.modelValue[0] : null;
+        },
+        targetList: function targetList() {
+          return this.modelValue && this.modelValue[1] ? this.modelValue[1] : null;
+        },
+        attributeSelector: function attributeSelector() {
+          return utils.UniqueComponentId();
+        },
+        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;
+        },
+        moveToTargetAriaLabel: function moveToTargetAriaLabel() {
+          return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveToTarget : undefined;
+        },
+        moveAllToTargetAriaLabel: function moveAllToTargetAriaLabel() {
+          return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveAllToTarget : undefined;
+        },
+        moveToSourceAriaLabel: function moveToSourceAriaLabel() {
+          return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveToSource : undefined;
+        },
+        moveAllToSourceAriaLabel: function moveAllToSourceAriaLabel() {
+          return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.moveAllToSource : undefined;
         }
-      } else {
-        head.appendChild(style);
+      },
+      components: {
+        PLButton: Button__default["default"],
+        AngleRightIcon: AngleRightIcon__default["default"],
+        AngleLeftIcon: AngleLeftIcon__default["default"],
+        AngleDownIcon: AngleDownIcon__default["default"],
+        AngleUpIcon: AngleUpIcon__default["default"],
+        AngleDoubleRightIcon: AngleDoubleRightIcon__default["default"],
+        AngleDoubleLeftIcon: AngleDoubleLeftIcon__default["default"],
+        AngleDoubleDownIcon: AngleDoubleDownIcon__default["default"],
+        AngleDoubleUpIcon: AngleDoubleUpIcon__default["default"]
+      },
+      directives: {
+        ripple: Ripple__default["default"]
       }
+    };
 
-      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", "onDblclick", "onMousedown", "aria-selected", "data-p-highlight", "data-p-focused"];
+    var _hoisted_2 = ["id", "onClick", "onDblclick", "onMousedown", "aria-selected", "data-p-highlight", "data-p-focused"];
+    function render(_ctx, _cache, $props, $setup, $data, $options) {
+      var _component_AngleUpIcon = vue.resolveComponent("AngleUpIcon");
+      var _component_PLButton = vue.resolveComponent("PLButton");
+      var _component_AngleDoubleUpIcon = vue.resolveComponent("AngleDoubleUpIcon");
+      var _component_AngleDownIcon = vue.resolveComponent("AngleDownIcon");
+      var _component_AngleDoubleDownIcon = vue.resolveComponent("AngleDoubleDownIcon");
+      var _directive_ripple = vue.resolveDirective("ripple");
+      return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        "class": _ctx.cx('root')
+      }, _ctx.ptm('root')), [_ctx.showSourceControls ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        key: 0,
+        "class": _ctx.cx('sourceControls')
+      }, _ctx.ptm('sourceControls')), [vue.renderSlot(_ctx.$slots, "sourcecontrolsstart"), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveUpAriaLabel,
+        disabled: $options.moveDisabled(0),
+        type: "button",
+        onClick: _cache[0] || (_cache[0] = function ($event) {
+          return $options.moveUp($event, 0);
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.moveUpButtonProps), _ctx.ptm('sourceMoveUpButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "moveupicon", {}, function () {
+            return [vue.createVNode(_component_AngleUpIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('sourceMoveUpButton')['icon'])), null, 16)];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "disabled", "unstyled"]), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveTopAriaLabel,
+        disabled: $options.moveDisabled(0),
+        type: "button",
+        onClick: _cache[1] || (_cache[1] = function ($event) {
+          return $options.moveTop($event, 0);
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.moveTopButtonProps), _ctx.ptm('sourceMoveTopButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movetopicon", {}, function () {
+            return [vue.createVNode(_component_AngleDoubleUpIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('sourceMoveTopButton')['icon'])), null, 16)];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "disabled", "unstyled"]), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveDownAriaLabel,
+        disabled: $options.moveDisabled(0),
+        type: "button",
+        onClick: _cache[2] || (_cache[2] = function ($event) {
+          return $options.moveDown($event, 0);
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.moveDownButtonProps), _ctx.ptm('sourceMoveDownButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movedownicon", {}, function () {
+            return [vue.createVNode(_component_AngleDownIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('sourceMoveDownButton')['icon'])), null, 16)];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "disabled", "unstyled"]), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveBottomAriaLabel,
+        disabled: $options.moveDisabled(0),
+        type: "button",
+        onClick: _cache[3] || (_cache[3] = function ($event) {
+          return $options.moveBottom($event, 0);
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.moveBottomButtonProps), _ctx.ptm('sourceMoveBottomButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movebottomicon", {}, function () {
+            return [vue.createVNode(_component_AngleDoubleDownIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('sourceMoveBottomButton')['icon'])), null, 16)];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "disabled", "unstyled"]), vue.renderSlot(_ctx.$slots, "sourcecontrolsend")], 16)) : vue.createCommentVNode("", true), vue.createElementVNode("div", vue.mergeProps({
+        "class": _ctx.cx('sourceWrapper')
+      }, _ctx.ptm('sourceWrapper')), [_ctx.$slots.sourceheader ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        key: 0,
+        "class": _ctx.cx('sourceHeader')
+      }, _ctx.ptm('sourceHeader')), [vue.renderSlot(_ctx.$slots, "sourceheader")], 16)) : vue.createCommentVNode("", true), vue.createVNode(vue.TransitionGroup, vue.mergeProps({
+        ref: "sourceList",
+        id: $options.idSource + '_list',
+        name: "p-picklist-flip",
+        tag: "ul",
+        "class": _ctx.cx('sourceList'),
+        style: _ctx.listStyle,
+        role: "listbox",
+        "aria-multiselectable": "true",
+        "aria-activedescendant": $data.focused['sourceList'] ? $options.focusedOptionId : undefined,
+        tabindex: $options.sourceList && $options.sourceList.length > 0 ? _ctx.tabindex : -1,
+        onFocus: _cache[5] || (_cache[5] = function ($event) {
+          return $options.onListFocus($event, 'sourceList');
+        }),
+        onBlur: _cache[6] || (_cache[6] = function ($event) {
+          return $options.onListBlur($event, 'sourceList');
+        }),
+        onKeydown: _cache[7] || (_cache[7] = function ($event) {
+          return $options.onItemKeyDown($event, 'sourceList');
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.sourceListProps), _ctx.ptm('sourceList'))), {
+        "default": vue.withCtx(function () {
+          return [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.sourceList, function (item, i) {
+            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+              key: $options.getItemKey(item, i),
+              id: $options.idSource + '_' + i,
+              "class": _ctx.cx('item', {
+                item: item,
+                id: "".concat($options.idSource, "_").concat(i),
+                listIndex: 0
+              }),
+              onClick: function onClick($event) {
+                return $options.onItemClick($event, item, i, 0);
+              },
+              onDblclick: function onDblclick($event) {
+                return $options.onItemDblClick($event, item, 0);
+              },
+              onTouchend: _cache[4] || (_cache[4] = function () {
+                return $options.onItemTouchEnd && $options.onItemTouchEnd.apply($options, arguments);
+              }),
+              onMousedown: function onMousedown($event) {
+                return $options.onOptionMouseDown(i, 'sourceList');
+              },
+              role: "option",
+              "aria-selected": $options.isSelected(item, 0)
+            }, $options.getPTOptions(item, 'item'), {
+              "data-p-highlight": $options.isSelected(item, 0),
+              "data-p-focused": "".concat($data.id, "_").concat(i) === $options.focusedOptionId
+            }), [vue.renderSlot(_ctx.$slots, "item", {
+              item: item,
+              index: i
+            })], 16, _hoisted_1)), [[_directive_ripple]]);
+          }), 128))];
+        }),
+        _: 3
+      }, 16, ["id", "class", "style", "aria-activedescendant", "tabindex"])], 16), vue.createElementVNode("div", vue.mergeProps({
+        "class": _ctx.cx('buttons')
+      }, _ctx.ptm('buttons')), [vue.renderSlot(_ctx.$slots, "movecontrolsstart"), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveToTargetAriaLabel,
+        type: "button",
+        onClick: $options.moveToTarget,
+        disabled: $options.moveDisabled(0)
+      }, _objectSpread(_objectSpread({}, _ctx.moveToTargetProps), _ctx.ptm('moveToTargetButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movetotargeticon", {
+            viewChanged: $data.viewChanged
+          }, function () {
+            return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('moveToTargetButton')['icon'])), null, 16))];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "onClick", "disabled", "unstyled"]), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveAllToTargetAriaLabel,
+        type: "button",
+        onClick: $options.moveAllToTarget,
+        disabled: $options.moveAllDisabled('sourceList')
+      }, _objectSpread(_objectSpread({}, _ctx.moveAllToTargetProps), _ctx.ptm('moveAllToTargetButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movealltotargeticon", {
+            viewChanged: $data.viewChanged
+          }, function () {
+            return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('moveAllToTargetButton')['icon'])), null, 16))];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "onClick", "disabled", "unstyled"]), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveToSourceAriaLabel,
+        type: "button",
+        onClick: $options.moveToSource,
+        disabled: $options.moveDisabled(1)
+      }, _objectSpread(_objectSpread({}, _ctx.moveToSourceProps), _ctx.ptm('moveToSourceButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movetosourceicon", {
+            viewChanged: $data.viewChanged
+          }, function () {
+            return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('moveToSourceButton')['icon'])), null, 16))];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "onClick", "disabled", "unstyled"]), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveAllToSourceAriaLabel,
+        type: "button",
+        onClick: $options.moveAllToSource,
+        disabled: $options.moveSourceDisabled('targetList')
+      }, _objectSpread(_objectSpread({}, _ctx.moveAllToSourceProps), _ctx.ptm('moveAllToSourceButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movealltosourceicon", {
+            viewChanged: $data.viewChanged
+          }, function () {
+            return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('moveAllToSourceButton')['icon'])), null, 16))];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "onClick", "disabled", "unstyled"]), vue.renderSlot(_ctx.$slots, "movecontrolsend")], 16), vue.createElementVNode("div", vue.mergeProps({
+        "class": _ctx.cx('targetWrapper')
+      }, _ctx.ptm('targetWrapper')), [_ctx.$slots.targetheader ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        key: 0,
+        "class": _ctx.cx('targetHeader')
+      }, _ctx.ptm('targetHeader')), [vue.renderSlot(_ctx.$slots, "targetheader")], 16)) : vue.createCommentVNode("", true), vue.createVNode(vue.TransitionGroup, vue.mergeProps({
+        ref: "targetList",
+        id: $options.idTarget + '_list',
+        name: "p-picklist-flip",
+        tag: "ul",
+        "class": _ctx.cx('targetList'),
+        style: _ctx.listStyle,
+        role: "listbox",
+        "aria-multiselectable": "true",
+        "aria-activedescendant": $data.focused['targetList'] ? $options.focusedOptionId : undefined,
+        tabindex: $options.targetList && $options.targetList.length > 0 ? _ctx.tabindex : -1,
+        onFocus: _cache[10] || (_cache[10] = function ($event) {
+          return $options.onListFocus($event, 'targetList');
+        }),
+        onBlur: _cache[11] || (_cache[11] = function ($event) {
+          return $options.onListBlur($event, 'targetList');
+        }),
+        onKeydown: _cache[12] || (_cache[12] = function ($event) {
+          return $options.onItemKeyDown($event, 'targetList');
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.targetListProps), _ctx.ptm('targetList'))), {
+        "default": vue.withCtx(function () {
+          return [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.targetList, function (item, i) {
+            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+              key: $options.getItemKey(item, i),
+              id: $options.idTarget + '_' + i,
+              "class": _ctx.cx('item', {
+                item: item,
+                id: "".concat($options.idTarget, "_").concat(i),
+                listIndex: 1
+              }),
+              onClick: function onClick($event) {
+                return $options.onItemClick($event, item, i, 1);
+              },
+              onDblclick: function onDblclick($event) {
+                return $options.onItemDblClick($event, item, 1);
+              },
+              onKeydown: _cache[8] || (_cache[8] = function ($event) {
+                return $options.onItemKeyDown($event, 'targetList');
+              }),
+              onMousedown: function onMousedown($event) {
+                return $options.onOptionMouseDown(i, 'targetList');
+              },
+              onTouchend: _cache[9] || (_cache[9] = function () {
+                return $options.onItemTouchEnd && $options.onItemTouchEnd.apply($options, arguments);
+              }),
+              role: "option",
+              "aria-selected": $options.isSelected(item, 1)
+            }, $options.getPTOptions(item, 'item'), {
+              "data-p-highlight": $options.isSelected(item, 1),
+              "data-p-focused": "".concat($data.id, "_").concat(i) === $options.focusedOptionId
+            }), [vue.renderSlot(_ctx.$slots, "item", {
+              item: item,
+              index: i
+            })], 16, _hoisted_2)), [[_directive_ripple]]);
+          }), 128))];
+        }),
+        _: 3
+      }, 16, ["id", "class", "style", "aria-activedescendant", "tabindex"])], 16), _ctx.showTargetControls ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        key: 1,
+        "class": _ctx.cx('targetControls')
+      }, _ctx.ptm('targetControls')), [vue.renderSlot(_ctx.$slots, "targetcontrolsstart"), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveUpAriaLabel,
+        disabled: $options.moveDisabled(1),
+        type: "button",
+        onClick: _cache[13] || (_cache[13] = function ($event) {
+          return $options.moveUp($event, 1);
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.moveUpButtonProps), _ctx.ptm('targetMoveUpButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "moveupicon", {}, function () {
+            return [vue.createVNode(_component_AngleUpIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('targetMoveUpButton')['icon'])), null, 16)];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "disabled", "unstyled"]), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveTopAriaLabel,
+        disabled: $options.moveDisabled(1),
+        type: "button",
+        onClick: _cache[14] || (_cache[14] = function ($event) {
+          return $options.moveTop($event, 1);
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.moveTopButtonProps), _ctx.ptm('targetMoveTopButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movetopicon", {}, function () {
+            return [vue.createVNode(_component_AngleDoubleUpIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('targetMoveTopButton')['icon'])), null, 16)];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "disabled", "unstyled"]), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveDownAriaLabel,
+        disabled: $options.moveDisabled(1),
+        type: "button",
+        onClick: _cache[15] || (_cache[15] = function ($event) {
+          return $options.moveDown($event, 1);
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.moveDownButtonProps), _ctx.ptm('targetMoveDownButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movedownicon", {}, function () {
+            return [vue.createVNode(_component_AngleDownIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('targetMoveDownButton')['icon'])), null, 16)];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "disabled", "unstyled"]), vue.createVNode(_component_PLButton, vue.mergeProps({
+        "aria-label": $options.moveBottomAriaLabel,
+        disabled: $options.moveDisabled(1),
+        type: "button",
+        onClick: _cache[16] || (_cache[16] = function ($event) {
+          return $options.moveBottom($event, 1);
+        })
+      }, _objectSpread(_objectSpread({}, _ctx.moveBottomButtonProps), _ctx.ptm('targetMoveBottomButton')), {
+        unstyled: _ctx.unstyled
+      }), {
+        icon: vue.withCtx(function () {
+          return [vue.renderSlot(_ctx.$slots, "movebottomicon", {}, function () {
+            return [vue.createVNode(_component_AngleDoubleDownIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('targetMoveBottomButton')['icon'])), null, 16)];
+          })];
+        }),
+        _: 3
+      }, 16, ["aria-label", "disabled", "unstyled"]), vue.renderSlot(_ctx.$slots, "targetcontrolsend")], 16)) : vue.createCommentVNode("", true)], 16);
     }
 
-    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;
 
     return script;
 
-})(primevue.basecomponent, primevue.button, primevue.icons.angledoubledown, primevue.icons.angledoubleleft, primevue.icons.angledoubleright, primevue.icons.angledoubleup, primevue.icons.angledown, primevue.icons.angleleft, primevue.icons.angleright, primevue.icons.angleup, primevue.ripple, primevue.utils, Vue);
+})(primevue.button, primevue.icons.angledoubledown, primevue.icons.angledoubleleft, primevue.icons.angledoubleright, primevue.icons.angledoubleup, primevue.icons.angledown, primevue.icons.angleleft, primevue.icons.angleright, primevue.icons.angleup, primevue.ripple, primevue.utils, primevue.basecomponent, primevue.usestyle, Vue);