primevue 3.29.2 → 3.30.1

package/paginator/paginator.js

@@ -1,5 +1,5 @@
 this.primevue = this.primevue || {};
-this.primevue.paginator = (function (BaseComponent, utils, vue, AngleDoubleLeftIcon, Ripple, Dropdown, InputNumber, AngleDoubleRightIcon, AngleRightIcon, AngleLeftIcon) {
+this.primevue.paginator = (function (utils, BaseComponent, usestyle, vue, AngleDoubleLeftIcon, Ripple, Dropdown, InputNumber, AngleDoubleRightIcon, AngleRightIcon, AngleLeftIcon) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -13,911 +13,881 @@ this.primevue.paginator = (function (BaseComponent, utils, vue, AngleDoubleLeftI
     var AngleRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleRightIcon);
     var AngleLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleLeftIcon);
 
+    function _typeof$1(obj) { "@babel/helpers - typeof"; return _typeof$1 = "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$1(obj); }
+    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$1(key) === "symbol" ? key : String(key); }
+    function _toPrimitive(input, hint) { if (_typeof$1(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$1(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+    var styles = "\n.p-paginator-default {\n    display: flex;\n}\n\n.p-paginator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n\n.p-paginator-left-content {\n    margin-right: auto;\n}\n\n.p-paginator-right-content {\n    margin-left: auto;\n}\n\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev,\n.p-paginator-current {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    user-select: none;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-paginator-element:focus {\n    z-index: 1;\n    position: relative;\n}\n";
+    var classes = {
+      paginator: function paginator(_ref) {
+        var instance = _ref.instance,
+          key = _ref.key;
+        return ['p-paginator p-component', _defineProperty({
+          'p-paginator-default': !instance.hasBreakpoints()
+        }, "p-paginator-".concat(key), instance.hasBreakpoints())];
+      },
+      start: 'p-paginator-left-content',
+      end: 'p-paginator-right-content',
+      firstPageButton: function firstPageButton(_ref3) {
+        var instance = _ref3.instance;
+        return ['p-paginator-first p-paginator-element p-link', {
+          'p-disabled': instance.$attrs.disabled
+        }];
+      },
+      firstPageIcon: 'p-paginator-icon',
+      previousPageButton: function previousPageButton(_ref4) {
+        var instance = _ref4.instance;
+        return ['p-paginator-prev p-paginator-element p-link', {
+          'p-disabled': instance.$attrs.disabled
+        }];
+      },
+      previousPageIcon: 'p-paginator-icon',
+      nextPageButton: function nextPageButton(_ref5) {
+        var instance = _ref5.instance;
+        return ['p-paginator-next p-paginator-element p-link', {
+          'p-disabled': instance.$attrs.disabled
+        }];
+      },
+      nextPageIcon: 'p-paginator-icon',
+      lastPageButton: function lastPageButton(_ref6) {
+        var instance = _ref6.instance;
+        return ['p-paginator-last p-paginator-element p-link', {
+          'p-disabled': instance.$attrs.disabled
+        }];
+      },
+      lastPageIcon: 'p-paginator-icon',
+      pages: 'p-paginator-pages',
+      pageButton: function pageButton(_ref7) {
+        var props = _ref7.props,
+          pageLink = _ref7.pageLink;
+        return ['p-paginator-page p-paginator-element p-link', {
+          'p-highlight': pageLink - 1 === props.page
+        }];
+      },
+      current: 'p-paginator-current',
+      rowPerPageDropdown: 'p-paginator-rpp-options',
+      jumpToPageDropdown: 'p-paginator-page-options',
+      jumpToPageInput: 'p-paginator-page-input'
+    };
+    var _useStyle = usestyle.useStyle(styles, {
+        name: 'paginator',
+        manual: true
+      }),
+      loadStyle = _useStyle.load;
+    var script$a = {
+      name: 'BasePaginator',
+      "extends": BaseComponent__default["default"],
+      props: {
+        totalRecords: {
+          type: Number,
+          "default": 0
+        },
+        rows: {
+          type: Number,
+          "default": 0
+        },
+        first: {
+          type: Number,
+          "default": 0
+        },
+        pageLinkSize: {
+          type: Number,
+          "default": 5
+        },
+        rowsPerPageOptions: {
+          type: Array,
+          "default": null
+        },
+        template: {
+          type: [Object, String],
+          "default": 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
+        },
+        currentPageReportTemplate: {
+          type: null,
+          "default": '({currentPage} of {totalPages})'
+        },
+        alwaysShow: {
+          type: Boolean,
+          "default": true
+        }
+      },
+      css: {
+        classes: classes,
+        loadStyle: loadStyle
+      },
+      provide: function provide() {
+        return {
+          $parentInstance: this
+        };
+      }
+    };
+
     var script$9 = {
-        name: 'CurrentPageReport',
-        extends: BaseComponent__default["default"],
-        props: {
-            pageCount: {
-                type: Number,
-                default: 0
-            },
-            currentPage: {
-                type: Number,
-                default: 0
-            },
-            page: {
-                type: Number,
-                default: 0
-            },
-            first: {
-                type: Number,
-                default: 0
-            },
-            rows: {
-                type: Number,
-                default: 0
-            },
-            totalRecords: {
-                type: Number,
-                default: 0
-            },
-            template: {
-                type: String,
-                default: '({currentPage} of {totalPages})'
-            }
-        },
-        computed: {
-            text() {
-                let text = this.template
-                    .replace('{currentPage}', this.currentPage)
-                    .replace('{totalPages}', this.pageCount)
-                    .replace('{first}', this.pageCount > 0 ? this.first + 1 : 0)
-                    .replace('{last}', Math.min(this.first + this.rows, this.totalRecords))
-                    .replace('{rows}', this.rows)
-                    .replace('{totalRecords}', this.totalRecords);
-
-                return text;
-            }
+      name: 'CurrentPageReport',
+      hostName: 'Paginator',
+      "extends": BaseComponent__default["default"],
+      props: {
+        pageCount: {
+          type: Number,
+          "default": 0
+        },
+        currentPage: {
+          type: Number,
+          "default": 0
+        },
+        page: {
+          type: Number,
+          "default": 0
+        },
+        first: {
+          type: Number,
+          "default": 0
+        },
+        rows: {
+          type: Number,
+          "default": 0
+        },
+        totalRecords: {
+          type: Number,
+          "default": 0
+        },
+        template: {
+          type: String,
+          "default": '({currentPage} of {totalPages})'
+        }
+      },
+      computed: {
+        text: function text() {
+          var text = this.template.replace('{currentPage}', this.currentPage).replace('{totalPages}', this.pageCount).replace('{first}', this.pageCount > 0 ? this.first + 1 : 0).replace('{last}', Math.min(this.first + this.rows, this.totalRecords)).replace('{rows}', this.rows).replace('{totalRecords}', this.totalRecords);
+          return text;
         }
+      }
     };
 
     function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: "p-paginator-current" }, _ctx.ptm('current')), vue.toDisplayString($options.text), 17))
+      return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+        "class": _ctx.cx('current')
+      }, _ctx.ptm('current')), vue.toDisplayString($options.text), 17);
     }
 
     script$9.render = render$9;
 
     var script$8 = {
-        name: 'FirstPageLink',
-        extends: BaseComponent__default["default"],
-        props: {
-            template: {
-                type: Function,
-                default: null
-            }
-        },
-        methods: {
-            getPTOptions(key) {
-                return this.ptm(key, {
-                    context: {
-                        disabled: this.$attrs.disabled
-                    }
-                });
-            }
-        },
-        computed: {
-            containerClass() {
-                return [
-                    'p-paginator-first p-paginator-element p-link',
-                    {
-                        'p-disabled': this.$attrs.disabled
-                    }
-                ];
+      name: 'FirstPageLink',
+      hostName: 'Paginator',
+      "extends": BaseComponent__default["default"],
+      props: {
+        template: {
+          type: Function,
+          "default": null
+        }
+      },
+      methods: {
+        getPTOptions: function getPTOptions(key) {
+          return this.ptm(key, {
+            context: {
+              disabled: this.$attrs.disabled
             }
-        },
-        components: {
-            AngleDoubleLeftIcon: AngleDoubleLeftIcon__default["default"]
-        },
-        directives: {
-            ripple: Ripple__default["default"]
+          });
         }
+      },
+      components: {
+        AngleDoubleLeftIcon: AngleDoubleLeftIcon__default["default"]
+      },
+      directives: {
+        ripple: Ripple__default["default"]
+      }
     };
 
     function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-      const _directive_ripple = vue.resolveDirective("ripple");
-
+      var _directive_ripple = vue.resolveDirective("ripple");
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
-        class: $options.containerClass,
+        "class": _ctx.cx('firstPageButton'),
         type: "button"
-      }, $options.getPTOptions('firstPageButton')), [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleLeftIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('firstPageIcon')), null, 16))
-      ], 16)), [
-        [_directive_ripple]
-      ])
+      }, $options.getPTOptions('firstPageButton')), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleLeftIcon'), vue.mergeProps({
+        "class": _ctx.cx('firstPageIcon')
+      }, $options.getPTOptions('firstPageIcon')), null, 16, ["class"]))], 16)), [[_directive_ripple]]);
     }
 
     script$8.render = render$8;
 
     var script$7 = {
-        name: 'JumpToPageDropdown',
-        extends: BaseComponent__default["default"],
-        emits: ['page-change'],
-        props: {
-            page: Number,
-            pageCount: Number,
-            disabled: Boolean
-        },
-        methods: {
-            onChange(value) {
-                this.$emit('page-change', value);
-            }
-        },
-        computed: {
-            pageOptions() {
-                let opts = [];
-
-                for (let i = 0; i < this.pageCount; i++) {
-                    opts.push({ label: String(i + 1), value: i });
-                }
-
-                return opts;
-            }
-        },
-        components: {
-            JTPDropdown: Dropdown__default["default"]
+      name: 'JumpToPageDropdown',
+      hostName: 'Paginator',
+      "extends": BaseComponent__default["default"],
+      emits: ['page-change'],
+      props: {
+        page: Number,
+        pageCount: Number,
+        disabled: Boolean
+      },
+      methods: {
+        onChange: function onChange(value) {
+          this.$emit('page-change', value);
         }
+      },
+      computed: {
+        pageOptions: function pageOptions() {
+          var opts = [];
+          for (var i = 0; i < this.pageCount; i++) {
+            opts.push({
+              label: String(i + 1),
+              value: i
+            });
+          }
+          return opts;
+        }
+      },
+      components: {
+        JTPDropdown: Dropdown__default["default"]
+      }
     };
 
     function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_JTPDropdown = vue.resolveComponent("JTPDropdown");
-
-      return (vue.openBlock(), vue.createBlock(_component_JTPDropdown, {
+      var _component_JTPDropdown = vue.resolveComponent("JTPDropdown");
+      return vue.openBlock(), vue.createBlock(_component_JTPDropdown, {
         modelValue: $props.page,
         options: $options.pageOptions,
         optionLabel: "label",
         optionValue: "value",
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
-        class: "p-paginator-page-options",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+          return $options.onChange($event);
+        }),
+        "class": vue.normalizeClass(_ctx.cx('jumpToPageDropdown')),
         disabled: $props.disabled,
-        pt: _ctx.ptm('JTPDropdown')
-      }, null, 8, ["modelValue", "options", "disabled", "pt"]))
+        unstyled: _ctx.unstyled,
+        pt: _ctx.ptm('jumpToPageDropdown'),
+        "data-pc-section": "jumptopagedropdown"
+      }, null, 8, ["modelValue", "options", "class", "disabled", "unstyled", "pt"]);
     }
 
     script$7.render = render$7;
 
     var script$6 = {
-        name: 'JumpToPageInput',
-        extends: BaseComponent__default["default"],
-        inheritAttrs: false,
-        emits: ['page-change'],
-        props: {
-            page: Number,
-            pageCount: Number,
-            disabled: Boolean
-        },
-        data() {
-            return {
-                d_page: this.page
-            };
-        },
-        watch: {
-            page(newValue) {
-                this.d_page = newValue;
-            }
-        },
-        methods: {
-            onChange(value) {
-                if (value !== this.page) {
-                    this.d_page = value;
-                    this.$emit('page-change', value - 1);
-                }
-            }
-        },
-        computed: {
-            inputArialabel() {
-                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.jumpToPageInputLabel : undefined;
-            }
-        },
-        components: {
-            JTPInput: InputNumber__default["default"]
+      name: 'JumpToPageInput',
+      hostName: 'Paginator',
+      "extends": BaseComponent__default["default"],
+      inheritAttrs: false,
+      emits: ['page-change'],
+      props: {
+        page: Number,
+        pageCount: Number,
+        disabled: Boolean
+      },
+      data: function data() {
+        return {
+          d_page: this.page
+        };
+      },
+      watch: {
+        page: function page(newValue) {
+          this.d_page = newValue;
+        }
+      },
+      methods: {
+        onChange: function onChange(value) {
+          if (value !== this.page) {
+            this.d_page = value;
+            this.$emit('page-change', value - 1);
+          }
         }
+      },
+      computed: {
+        inputArialabel: function inputArialabel() {
+          return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.jumpToPageInputLabel : undefined;
+        }
+      },
+      components: {
+        JTPInput: InputNumber__default["default"]
+      }
     };
 
     function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_JTPInput = vue.resolveComponent("JTPInput");
-
-      return (vue.openBlock(), vue.createBlock(_component_JTPInput, {
+      var _component_JTPInput = vue.resolveComponent("JTPInput");
+      return vue.openBlock(), vue.createBlock(_component_JTPInput, {
         ref: "jtpInput",
         modelValue: $data.d_page,
-        class: "p-paginator-page-input",
+        "class": vue.normalizeClass(_ctx.cx('jumpToPageInput')),
         "aria-label": $options.inputArialabel,
         disabled: $props.disabled,
         "onUpdate:modelValue": $options.onChange,
-        pt: _ctx.ptm('JTPInput')
-      }, null, 8, ["modelValue", "aria-label", "disabled", "onUpdate:modelValue", "pt"]))
+        unstyled: _ctx.unstyled,
+        pt: _ctx.ptm('jumpToPageInput'),
+        "data-pc-section": "jumptopageinput"
+      }, null, 8, ["modelValue", "class", "aria-label", "disabled", "onUpdate:modelValue", "unstyled", "pt"]);
     }
 
     script$6.render = render$6;
 
     var script$5 = {
-        name: 'LastPageLink',
-        extends: BaseComponent__default["default"],
-        props: {
-            template: {
-                type: Function,
-                default: null
-            }
-        },
-        methods: {
-            getPTOptions(key) {
-                return this.ptm(key, {
-                    context: {
-                        disabled: this.$attrs.disabled
-                    }
-                });
-            }
-        },
-        computed: {
-            containerClass() {
-                return [
-                    'p-paginator-last p-paginator-element p-link',
-                    {
-                        'p-disabled': this.$attrs.disabled
-                    }
-                ];
+      name: 'LastPageLink',
+      hostName: 'Paginator',
+      "extends": BaseComponent__default["default"],
+      props: {
+        template: {
+          type: Function,
+          "default": null
+        }
+      },
+      methods: {
+        getPTOptions: function getPTOptions(key) {
+          return this.ptm(key, {
+            context: {
+              disabled: this.$attrs.disabled
             }
-        },
-        components: {
-            AngleDoubleRightIcon: AngleDoubleRightIcon__default["default"]
-        },
-        directives: {
-            ripple: Ripple__default["default"]
+          });
         }
+      },
+      components: {
+        AngleDoubleRightIcon: AngleDoubleRightIcon__default["default"]
+      },
+      directives: {
+        ripple: Ripple__default["default"]
+      }
     };
 
     function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-      const _directive_ripple = vue.resolveDirective("ripple");
-
+      var _directive_ripple = vue.resolveDirective("ripple");
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
-        class: $options.containerClass,
+        "class": _ctx.cx('lastPageButton'),
         type: "button"
-      }, $options.getPTOptions('lastPageButton')), [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleRightIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('lastPageIcon')), null, 16))
-      ], 16)), [
-        [_directive_ripple]
-      ])
+      }, $options.getPTOptions('lastPageButton')), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleRightIcon'), vue.mergeProps({
+        "class": _ctx.cx('lastPageIcon')
+      }, $options.getPTOptions('lastPageIcon')), null, 16, ["class"]))], 16)), [[_directive_ripple]]);
     }
 
     script$5.render = render$5;
 
     var script$4 = {
-        name: 'NextPageLink',
-        extends: BaseComponent__default["default"],
-        props: {
-            template: {
-                type: Function,
-                default: null
-            }
-        },
-        methods: {
-            getPTOptions(key) {
-                return this.ptm(key, {
-                    context: {
-                        disabled: this.$attrs.disabled
-                    }
-                });
-            }
-        },
-        computed: {
-            containerClass() {
-                return [
-                    'p-paginator-next p-paginator-element p-link',
-                    {
-                        'p-disabled': this.$attrs.disabled
-                    }
-                ];
+      name: 'NextPageLink',
+      hostName: 'Paginator',
+      "extends": BaseComponent__default["default"],
+      props: {
+        template: {
+          type: Function,
+          "default": null
+        }
+      },
+      methods: {
+        getPTOptions: function getPTOptions(key) {
+          return this.ptm(key, {
+            context: {
+              disabled: this.$attrs.disabled
             }
-        },
-        components: {
-            AngleRightIcon: AngleRightIcon__default["default"]
-        },
-        directives: {
-            ripple: Ripple__default["default"]
+          });
         }
+      },
+      components: {
+        AngleRightIcon: AngleRightIcon__default["default"]
+      },
+      directives: {
+        ripple: Ripple__default["default"]
+      }
     };
 
     function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-      const _directive_ripple = vue.resolveDirective("ripple");
-
+      var _directive_ripple = vue.resolveDirective("ripple");
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
-        class: $options.containerClass,
+        "class": _ctx.cx('nextPageButton'),
         type: "button"
-      }, $options.getPTOptions('nextPageButton')), [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleRightIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('nextPageIcon')), null, 16))
-      ], 16)), [
-        [_directive_ripple]
-      ])
+      }, $options.getPTOptions('nextPageButton')), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleRightIcon'), vue.mergeProps({
+        "class": _ctx.cx('nextPageIcon')
+      }, $options.getPTOptions('nextPageIcon')), null, 16, ["class"]))], 16)), [[_directive_ripple]]);
     }
 
     script$4.render = render$4;
 
     var script$3 = {
-        name: 'PageLinks',
-        extends: BaseComponent__default["default"],
-        inheritAttrs: false,
-        emits: ['click'],
-        props: {
-            value: Array,
-            page: Number
-        },
-        methods: {
-            getPTOptions(pageLink, key) {
-                return this.ptm(key, {
-                    context: {
-                        active: pageLink === this.page
-                    }
-                });
-            },
-            onPageLinkClick(event, pageLink) {
-                this.$emit('click', {
-                    originalEvent: event,
-                    value: pageLink
-                });
-            },
-            ariaPageLabel(value) {
-                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
+      name: 'PageLinks',
+      hostName: 'Paginator',
+      "extends": BaseComponent__default["default"],
+      inheritAttrs: false,
+      emits: ['click'],
+      props: {
+        value: Array,
+        page: Number
+      },
+      methods: {
+        getPTOptions: function getPTOptions(pageLink, key) {
+          return this.ptm(key, {
+            context: {
+              active: pageLink === this.page
             }
+          });
         },
-        directives: {
-            ripple: Ripple__default["default"]
+        onPageLinkClick: function onPageLinkClick(event, pageLink) {
+          this.$emit('click', {
+            originalEvent: event,
+            value: pageLink
+          });
+        },
+        ariaPageLabel: function ariaPageLabel(value) {
+          return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
         }
+      },
+      directives: {
+        ripple: Ripple__default["default"]
+      }
     };
 
-    const _hoisted_1 = ["aria-label", "aria-current", "onClick"];
-
+    var _hoisted_1 = ["aria-label", "aria-current", "onClick", "data-p-highlight"];
     function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-      const _directive_ripple = vue.resolveDirective("ripple");
-
-      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: "p-paginator-pages" }, _ctx.ptm('pages')), [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.value, (pageLink) => {
-          return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
-            key: pageLink,
-            class: ['p-paginator-page p-paginator-element p-link', { 'p-highlight': pageLink - 1 === $props.page }],
-            type: "button",
-            "aria-label": $options.ariaPageLabel(pageLink),
-            "aria-current": pageLink - 1 === $props.page ? 'page' : undefined,
-            onClick: $event => ($options.onPageLinkClick($event, pageLink))
-          }, $options.getPTOptions(pageLink - 1, 'pageButton')), [
-            vue.createTextVNode(vue.toDisplayString(pageLink), 1)
-          ], 16, _hoisted_1)), [
-            [_directive_ripple]
-          ])
-        }), 128))
-      ], 16))
+      var _directive_ripple = vue.resolveDirective("ripple");
+      return vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+        "class": _ctx.cx('pages')
+      }, _ctx.ptm('pages')), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.value, function (pageLink) {
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+          key: pageLink,
+          "class": _ctx.cx('pageButton', {
+            pageLink: pageLink
+          }),
+          type: "button",
+          "aria-label": $options.ariaPageLabel(pageLink),
+          "aria-current": pageLink - 1 === $props.page ? 'page' : undefined,
+          onClick: function onClick($event) {
+            return $options.onPageLinkClick($event, pageLink);
+          }
+        }, $options.getPTOptions(pageLink - 1, 'pageButton'), {
+          "data-p-highlight": pageLink - 1 === $props.page
+        }), [vue.createTextVNode(vue.toDisplayString(pageLink), 1)], 16, _hoisted_1)), [[_directive_ripple]]);
+      }), 128))], 16);
     }
 
     script$3.render = render$3;
 
     var script$2 = {
-        name: 'PrevPageLink',
-        extends: BaseComponent__default["default"],
-        props: {
-            template: {
-                type: Function,
-                default: null
-            }
-        },
-        methods: {
-            getPTOptions(key) {
-                return this.ptm(key, {
-                    context: {
-                        disabled: this.$attrs.disabled
-                    }
-                });
-            }
-        },
-        computed: {
-            containerClass() {
-                return [
-                    'p-paginator-prev p-paginator-element p-link',
-                    {
-                        'p-disabled': this.$attrs.disabled
-                    }
-                ];
+      name: 'PrevPageLink',
+      hostName: 'Paginator',
+      "extends": BaseComponent__default["default"],
+      props: {
+        template: {
+          type: Function,
+          "default": null
+        }
+      },
+      methods: {
+        getPTOptions: function getPTOptions(key) {
+          return this.ptm(key, {
+            context: {
+              disabled: this.$attrs.disabled
             }
-        },
-        components: {
-            AngleLeftIcon: AngleLeftIcon__default["default"]
-        },
-        directives: {
-            ripple: Ripple__default["default"]
+          });
         }
+      },
+      components: {
+        AngleLeftIcon: AngleLeftIcon__default["default"]
+      },
+      directives: {
+        ripple: Ripple__default["default"]
+      }
     };
 
     function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-      const _directive_ripple = vue.resolveDirective("ripple");
-
+      var _directive_ripple = vue.resolveDirective("ripple");
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
-        class: $options.containerClass,
+        "class": _ctx.cx('previousPageButton'),
         type: "button"
-      }, $options.getPTOptions('prevPageButton')), [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleLeftIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('prevPageIcon')), null, 16))
-      ], 16)), [
-        [_directive_ripple]
-      ])
+      }, $options.getPTOptions('previousPageButton')), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleLeftIcon'), vue.mergeProps({
+        "class": _ctx.cx('previousPageIcon')
+      }, $options.getPTOptions('previousPageIcon')), null, 16, ["class"]))], 16)), [[_directive_ripple]]);
     }
 
     script$2.render = render$2;
 
     var script$1 = {
-        name: 'RowsPerPageDropdown',
-        extends: BaseComponent__default["default"],
-        emits: ['rows-change'],
-        props: {
-            options: Array,
-            rows: Number,
-            disabled: Boolean
-        },
-        methods: {
-            onChange(value) {
-                this.$emit('rows-change', value);
-            }
-        },
-        computed: {
-            rowsOptions() {
-                let opts = [];
-
-                if (this.options) {
-                    for (let i = 0; i < this.options.length; i++) {
-                        opts.push({ label: String(this.options[i]), value: this.options[i] });
-                    }
-                }
-
-                return opts;
+      name: 'RowsPerPageDropdown',
+      hostName: 'Paginator',
+      "extends": BaseComponent__default["default"],
+      emits: ['rows-change'],
+      props: {
+        options: Array,
+        rows: Number,
+        disabled: Boolean
+      },
+      methods: {
+        onChange: function onChange(value) {
+          this.$emit('rows-change', value);
+        }
+      },
+      computed: {
+        rowsOptions: function rowsOptions() {
+          var opts = [];
+          if (this.options) {
+            for (var i = 0; i < this.options.length; i++) {
+              opts.push({
+                label: String(this.options[i]),
+                value: this.options[i]
+              });
             }
-        },
-        components: {
-            RPPDropdown: Dropdown__default["default"]
+          }
+          return opts;
         }
+      },
+      components: {
+        RPPDropdown: Dropdown__default["default"]
+      }
     };
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_RPPDropdown = vue.resolveComponent("RPPDropdown");
-
-      return (vue.openBlock(), vue.createBlock(_component_RPPDropdown, {
+      var _component_RPPDropdown = vue.resolveComponent("RPPDropdown");
+      return vue.openBlock(), vue.createBlock(_component_RPPDropdown, {
         modelValue: $props.rows,
         options: $options.rowsOptions,
         optionLabel: "label",
         optionValue: "value",
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
-        class: "p-paginator-rpp-options",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
+          return $options.onChange($event);
+        }),
+        "class": vue.normalizeClass(_ctx.cx('rowPerPageDropdown')),
         disabled: $props.disabled,
-        pt: _ctx.ptm('RPPDropdown')
-      }, null, 8, ["modelValue", "options", "disabled", "pt"]))
+        unstyled: _ctx.unstyled,
+        pt: _ctx.ptm('rowPerPageDropdown'),
+        "data-pc-section": "rowperpagedropdown"
+      }, null, 8, ["modelValue", "options", "class", "disabled", "unstyled", "pt"]);
     }
 
     script$1.render = render$1;
 
+    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 _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 _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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+    function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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 _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; }
+    function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+    function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
     var script = {
-        name: 'Paginator',
-        extends: BaseComponent__default["default"],
-        emits: ['update:first', 'update:rows', 'page'],
-        props: {
-            totalRecords: {
-                type: Number,
-                default: 0
-            },
-            rows: {
-                type: Number,
-                default: 0
-            },
-            first: {
-                type: Number,
-                default: 0
-            },
-            pageLinkSize: {
-                type: Number,
-                default: 5
-            },
-            rowsPerPageOptions: {
-                type: Array,
-                default: null
-            },
-            template: {
-                type: [Object, String],
-                default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
-            },
-            currentPageReportTemplate: {
-                type: null,
-                default: '({currentPage} of {totalPages})'
-            },
-            alwaysShow: {
-                type: Boolean,
-                default: true
-            }
-        },
-        data() {
-            return {
-                d_first: this.first,
-                d_rows: this.rows
+      name: 'Paginator',
+      "extends": script$a,
+      emits: ['update:first', 'update:rows', 'page'],
+      data: function data() {
+        return {
+          d_first: this.first,
+          d_rows: this.rows
+        };
+      },
+      watch: {
+        first: function first(newValue) {
+          this.d_first = newValue;
+        },
+        rows: function rows(newValue) {
+          this.d_rows = newValue;
+        },
+        totalRecords: function totalRecords(newValue) {
+          if (this.page > 0 && newValue && this.d_first >= newValue) {
+            this.changePage(this.pageCount - 1);
+          }
+        }
+      },
+      mounted: function mounted() {
+        this.setPaginatorAttribute();
+        this.createStyle();
+      },
+      methods: {
+        changePage: function changePage(p) {
+          var pc = this.pageCount;
+          if (p >= 0 && p < pc) {
+            this.d_first = this.d_rows * p;
+            var state = {
+              page: p,
+              first: this.d_first,
+              rows: this.d_rows,
+              pageCount: pc
             };
-        },
-        watch: {
-            first(newValue) {
-                this.d_first = newValue;
-            },
-            rows(newValue) {
-                this.d_rows = newValue;
-            },
-            totalRecords(newValue) {
-                if (this.page > 0 && newValue && this.d_first >= newValue) {
-                    this.changePage(this.pageCount - 1);
-                }
+            this.$emit('update:first', this.d_first);
+            this.$emit('update:rows', this.d_rows);
+            this.$emit('page', state);
+          }
+        },
+        changePageToFirst: function changePageToFirst(event) {
+          if (!this.isFirstPage) {
+            this.changePage(0);
+          }
+          event.preventDefault();
+        },
+        changePageToPrev: function changePageToPrev(event) {
+          this.changePage(this.page - 1);
+          event.preventDefault();
+        },
+        changePageLink: function changePageLink(event) {
+          this.changePage(event.value - 1);
+          event.originalEvent.preventDefault();
+        },
+        changePageToNext: function changePageToNext(event) {
+          this.changePage(this.page + 1);
+          event.preventDefault();
+        },
+        changePageToLast: function changePageToLast(event) {
+          if (!this.isLastPage) {
+            this.changePage(this.pageCount - 1);
+          }
+          event.preventDefault();
+        },
+        onRowChange: function onRowChange(value) {
+          this.d_rows = value;
+          this.changePage(this.page);
+        },
+        createStyle: function createStyle() {
+          var _this = this;
+          if (this.hasBreakpoints() && !this.isUnstyled) {
+            this.styleElement = document.createElement('style');
+            this.styleElement.type = 'text/css';
+            document.head.appendChild(this.styleElement);
+            var innerHTML = '';
+            var keys = Object.keys(this.template);
+            var sortedBreakpoints = {};
+            keys.sort(function (a, b) {
+              return parseInt(a) - parseInt(b);
+            }).forEach(function (key) {
+              sortedBreakpoints[key] = _this.template[key];
+            });
+            for (var _i = 0, _Object$entries = Object.entries(Object.entries(sortedBreakpoints)); _i < _Object$entries.length; _i++) {
+              var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+                index = _Object$entries$_i[0],
+                _Object$entries$_i$ = _slicedToArray(_Object$entries$_i[1], 1),
+                key = _Object$entries$_i$[0];
+              var minValue = Object.entries(sortedBreakpoints)[index - 1] ? "and (min-width:".concat(Object.keys(sortedBreakpoints)[index - 1], ")") : '';
+              if (key === 'default') {
+                innerHTML += "\n                            @media screen ".concat(minValue, " {\n                                .paginator[").concat(this.attributeSelector, "],\n                                .p-paginator-default{\n                                    display: flex !important;\n                                }\n                            }\n                        ");
+              } else {
+                innerHTML += "\n                        .paginator[".concat(this.attributeSelector, "], .p-paginator-").concat(key, " {\n                                display: none !important;\n                            }\n                        @media screen ").concat(minValue, " and (max-width: ").concat(key, ") {\n                            .paginator[").concat(this.attributeSelector, "], .p-paginator-").concat(key, " {\n                                display: flex !important;\n                            }\n                            .paginator[").concat(this.attributeSelector, "],\n                            .p-paginator-default{\n                                display: none !important;\n                            }\n                        }\n                    ");
+              }
             }
-        },
-        mounted() {
-            this.setPaginatorAttribute();
-            this.createStyle();
-        },
-        methods: {
-            changePage(p) {
-                const pc = this.pageCount;
-
-                if (p >= 0 && p < pc) {
-                    this.d_first = this.d_rows * p;
-                    const state = {
-                        page: p,
-                        first: this.d_first,
-                        rows: this.d_rows,
-                        pageCount: pc
-                    };
-
-                    this.$emit('update:first', this.d_first);
-                    this.$emit('update:rows', this.d_rows);
-                    this.$emit('page', state);
-                }
-            },
-
-            changePageToFirst(event) {
-                if (!this.isFirstPage) {
-                    this.changePage(0);
-                }
-
-                event.preventDefault();
-            },
-            changePageToPrev(event) {
-                this.changePage(this.page - 1);
-                event.preventDefault();
-            },
-            changePageLink(event) {
-                this.changePage(event.value - 1);
-                event.originalEvent.preventDefault();
-            },
-            changePageToNext(event) {
-                this.changePage(this.page + 1);
-                event.preventDefault();
-            },
-            changePageToLast(event) {
-                if (!this.isLastPage) {
-                    this.changePage(this.pageCount - 1);
-                }
-
-                event.preventDefault();
-            },
-            onRowChange(value) {
-                this.d_rows = value;
-                this.changePage(this.page);
-            },
-            createStyle() {
-                if (this.hasBreakpoints()) {
-                    this.styleElement = document.createElement('style');
-                    this.styleElement.type = 'text/css';
-                    document.head.appendChild(this.styleElement);
-
-                    let innerHTML = '';
-
-                    const keys = Object.keys(this.template);
-                    const sortedBreakpoints = {};
-
-                    keys.sort((a, b) => parseInt(a) - parseInt(b)).forEach((key) => {
-                        sortedBreakpoints[key] = this.template[key];
-                    });
-
-                    for (const [index, [key]] of Object.entries(Object.entries(sortedBreakpoints))) {
-                        const minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${Object.keys(sortedBreakpoints)[index - 1]})` : '';
-
-                        if (key === 'default') {
-                            innerHTML += `
-                            @media screen ${minValue} {
-                                .paginator[${this.attributeSelector}],
-                                .p-paginator-default{
-                                    display: flex !important;
-                                }
-                            }
-                        `;
-                        } else {
-                            innerHTML += `
-                        .paginator[${this.attributeSelector}], .p-paginator-${key} {
-                                display: none !important;
-                            }
-                        @media screen ${minValue} and (max-width: ${key}) {
-                            .paginator[${this.attributeSelector}], .p-paginator-${key} {
-                                display: flex !important;
-                            }
-                            .paginator[${this.attributeSelector}],
-                            .p-paginator-default{
-                                display: none !important;
-                            }
-                        }
-                    `;
-                        }
-                    }
-
-                    this.styleElement.innerHTML = innerHTML;
-                }
-            },
-            hasBreakpoints() {
-                return typeof this.template === 'object';
-            },
-            getPaginatorClasses(key) {
-                return [
-                    {
-                        'p-paginator-default': !this.hasBreakpoints(),
-                        [`p-paginator-${key}`]: this.hasBreakpoints()
-                    }
-                ];
-            },
-            setPaginatorAttribute() {
-                if (this.$refs.paginator && this.$refs.paginator.length >= 0) {
-                    [...this.$refs.paginator].forEach((el) => {
-                        el.setAttribute(this.attributeSelector, '');
-                    });
-                }
-            },
-            getAriaLabel(labelType) {
-                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria[labelType] : undefined;
+            this.styleElement.innerHTML = innerHTML;
+          }
+        },
+        hasBreakpoints: function hasBreakpoints() {
+          return _typeof(this.template) === 'object';
+        },
+        setPaginatorAttribute: function setPaginatorAttribute() {
+          var _this2 = this;
+          if (this.$refs.paginator && this.$refs.paginator.length >= 0) {
+            _toConsumableArray(this.$refs.paginator).forEach(function (el) {
+              el.setAttribute(_this2.attributeSelector, '');
+            });
+          }
+        },
+        getAriaLabel: function getAriaLabel(labelType) {
+          return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria[labelType] : undefined;
+        }
+      },
+      computed: {
+        templateItems: function templateItems() {
+          var keys = {};
+          if (this.hasBreakpoints()) {
+            keys = this.template;
+            if (!keys["default"]) {
+              keys["default"] = 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown';
             }
-        },
-        computed: {
-            templateItems() {
-                let keys = {};
-
-                if (this.hasBreakpoints()) {
-                    keys = this.template;
-
-                    if (!keys.default) {
-                        keys.default = 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown';
-                    }
-
-                    for (const item in keys) {
-                        keys[item] = this.template[item].split(' ').map((value) => {
-                            return value.trim();
-                        });
-                    }
-
-                    return keys;
-                }
-
-                keys['default'] = this.template.split(' ').map((value) => {
-                    return value.trim();
-                });
-
-                return keys;
-            },
-            page() {
-                return Math.floor(this.d_first / this.d_rows);
-            },
-            pageCount() {
-                return Math.ceil(this.totalRecords / this.d_rows);
-            },
-            isFirstPage() {
-                return this.page === 0;
-            },
-            isLastPage() {
-                return this.page === this.pageCount - 1;
-            },
-            calculatePageLinkBoundaries() {
-                const numberOfPages = this.pageCount;
-                const visiblePages = Math.min(this.pageLinkSize, numberOfPages);
-
-                //calculate range, keep current in middle if necessary
-                let start = Math.max(0, Math.ceil(this.page - visiblePages / 2));
-                let end = Math.min(numberOfPages - 1, start + visiblePages - 1);
-
-                //check when approaching to last page
-                const delta = this.pageLinkSize - (end - start + 1);
-
-                start = Math.max(0, start - delta);
-
-                return [start, end];
-            },
-            pageLinks() {
-                let pageLinks = [];
-                let boundaries = this.calculatePageLinkBoundaries;
-                let start = boundaries[0];
-                let end = boundaries[1];
-
-                for (var i = start; i <= end; i++) {
-                    pageLinks.push(i + 1);
-                }
-
-                return pageLinks;
-            },
-            currentState() {
-                return {
-                    page: this.page,
-                    first: this.d_first,
-                    rows: this.d_rows
-                };
-            },
-            empty() {
-                return this.pageCount === 0;
-            },
-            currentPage() {
-                return this.pageCount > 0 ? this.page + 1 : 0;
-            },
-            attributeSelector() {
-                return utils.UniqueComponentId();
+            for (var item in keys) {
+              keys[item] = this.template[item].split(' ').map(function (value) {
+                return value.trim();
+              });
             }
-        },
-        components: {
-            CurrentPageReport: script$9,
-            FirstPageLink: script$8,
-            LastPageLink: script$5,
-            NextPageLink: script$4,
-            PageLinks: script$3,
-            PrevPageLink: script$2,
-            RowsPerPageDropdown: script$1,
-            JumpToPageDropdown: script$7,
-            JumpToPageInput: script$6
+            return keys;
+          }
+          keys['default'] = this.template.split(' ').map(function (value) {
+            return value.trim();
+          });
+          return keys;
+        },
+        page: function page() {
+          return Math.floor(this.d_first / this.d_rows);
+        },
+        pageCount: function pageCount() {
+          return Math.ceil(this.totalRecords / this.d_rows);
+        },
+        isFirstPage: function isFirstPage() {
+          return this.page === 0;
+        },
+        isLastPage: function isLastPage() {
+          return this.page === this.pageCount - 1;
+        },
+        calculatePageLinkBoundaries: function calculatePageLinkBoundaries() {
+          var numberOfPages = this.pageCount;
+          var visiblePages = Math.min(this.pageLinkSize, numberOfPages);
+
+          //calculate range, keep current in middle if necessary
+          var start = Math.max(0, Math.ceil(this.page - visiblePages / 2));
+          var end = Math.min(numberOfPages - 1, start + visiblePages - 1);
+
+          //check when approaching to last page
+          var delta = this.pageLinkSize - (end - start + 1);
+          start = Math.max(0, start - delta);
+          return [start, end];
+        },
+        pageLinks: function pageLinks() {
+          var pageLinks = [];
+          var boundaries = this.calculatePageLinkBoundaries;
+          var start = boundaries[0];
+          var end = boundaries[1];
+          for (var i = start; i <= end; i++) {
+            pageLinks.push(i + 1);
+          }
+          return pageLinks;
+        },
+        currentState: function currentState() {
+          return {
+            page: this.page,
+            first: this.d_first,
+            rows: this.d_rows
+          };
+        },
+        empty: function empty() {
+          return this.pageCount === 0;
+        },
+        currentPage: function currentPage() {
+          return this.pageCount > 0 ? this.page + 1 : 0;
+        },
+        attributeSelector: function attributeSelector() {
+          return utils.UniqueComponentId();
         }
+      },
+      components: {
+        CurrentPageReport: script$9,
+        FirstPageLink: script$8,
+        LastPageLink: script$5,
+        NextPageLink: script$4,
+        PageLinks: script$3,
+        PrevPageLink: script$2,
+        RowsPerPageDropdown: script$1,
+        JumpToPageDropdown: script$7,
+        JumpToPageInput: script$6
+      }
     };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_FirstPageLink = vue.resolveComponent("FirstPageLink");
-      const _component_PrevPageLink = vue.resolveComponent("PrevPageLink");
-      const _component_NextPageLink = vue.resolveComponent("NextPageLink");
-      const _component_LastPageLink = vue.resolveComponent("LastPageLink");
-      const _component_PageLinks = vue.resolveComponent("PageLinks");
-      const _component_CurrentPageReport = vue.resolveComponent("CurrentPageReport");
-      const _component_RowsPerPageDropdown = vue.resolveComponent("RowsPerPageDropdown");
-      const _component_JumpToPageDropdown = vue.resolveComponent("JumpToPageDropdown");
-      const _component_JumpToPageInput = vue.resolveComponent("JumpToPageInput");
-
-      return ($props.alwaysShow ? true : $options.pageLinks && $options.pageLinks.length > 1)
-        ? (vue.openBlock(), vue.createElementBlock("nav", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.ptm('root'))), [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.templateItems, (value, key) => {
-              return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-                key: key,
-                ref_for: true,
-                ref: "paginator",
-                class: ["p-paginator p-component", $options.getPaginatorClasses(key)]
-              }, _ctx.ptm('paginator')), [
-                (_ctx.$slots.start)
-                  ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-                      key: 0,
-                      class: "p-paginator-left-content"
-                    }, _ctx.ptm('left')), [
-                      vue.renderSlot(_ctx.$slots, "start", { state: $options.currentState })
-                    ], 16))
-                  : vue.createCommentVNode("", true),
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value, (item) => {
-                  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
-                    (item === 'FirstPageLink')
-                      ? (vue.openBlock(), vue.createBlock(_component_FirstPageLink, {
-                          key: 0,
-                          "aria-label": $options.getAriaLabel('firstPageLabel'),
-                          template: _ctx.$slots.firstpagelinkicon,
-                          onClick: _cache[0] || (_cache[0] = $event => ($options.changePageToFirst($event))),
-                          disabled: $options.isFirstPage || $options.empty,
-                          pt: _ctx.pt
-                        }, null, 8, ["aria-label", "template", "disabled", "pt"]))
-                      : (item === 'PrevPageLink')
-                        ? (vue.openBlock(), vue.createBlock(_component_PrevPageLink, {
-                            key: 1,
-                            "aria-label": $options.getAriaLabel('prevPageLabel'),
-                            template: _ctx.$slots.prevpagelinkicon,
-                            onClick: _cache[1] || (_cache[1] = $event => ($options.changePageToPrev($event))),
-                            disabled: $options.isFirstPage || $options.empty,
-                            pt: _ctx.pt
-                          }, null, 8, ["aria-label", "template", "disabled", "pt"]))
-                        : (item === 'NextPageLink')
-                          ? (vue.openBlock(), vue.createBlock(_component_NextPageLink, {
-                              key: 2,
-                              "aria-label": $options.getAriaLabel('nextPageLabel'),
-                              template: _ctx.$slots.nextpagelinkicon,
-                              onClick: _cache[2] || (_cache[2] = $event => ($options.changePageToNext($event))),
-                              disabled: $options.isLastPage || $options.empty,
-                              pt: _ctx.pt
-                            }, null, 8, ["aria-label", "template", "disabled", "pt"]))
-                          : (item === 'LastPageLink')
-                            ? (vue.openBlock(), vue.createBlock(_component_LastPageLink, {
-                                key: 3,
-                                "aria-label": $options.getAriaLabel('lastPageLabel'),
-                                template: _ctx.$slots.lastpagelinkicon,
-                                onClick: _cache[3] || (_cache[3] = $event => ($options.changePageToLast($event))),
-                                disabled: $options.isLastPage || $options.empty,
-                                pt: _ctx.pt
-                              }, null, 8, ["aria-label", "template", "disabled", "pt"]))
-                            : (item === 'PageLinks')
-                              ? (vue.openBlock(), vue.createBlock(_component_PageLinks, {
-                                  key: 4,
-                                  "aria-label": $options.getAriaLabel('pageLabel'),
-                                  value: $options.pageLinks,
-                                  page: $options.page,
-                                  onClick: _cache[4] || (_cache[4] = $event => ($options.changePageLink($event))),
-                                  pt: _ctx.pt
-                                }, null, 8, ["aria-label", "value", "page", "pt"]))
-                              : (item === 'CurrentPageReport')
-                                ? (vue.openBlock(), vue.createBlock(_component_CurrentPageReport, {
-                                    key: 5,
-                                    "aria-live": "polite",
-                                    template: $props.currentPageReportTemplate,
-                                    currentPage: $options.currentPage,
-                                    page: $options.page,
-                                    pageCount: $options.pageCount,
-                                    first: $data.d_first,
-                                    rows: $data.d_rows,
-                                    totalRecords: $props.totalRecords,
-                                    pt: _ctx.pt
-                                  }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords", "pt"]))
-                                : (item === 'RowsPerPageDropdown' && $props.rowsPerPageOptions)
-                                  ? (vue.openBlock(), vue.createBlock(_component_RowsPerPageDropdown, {
-                                      key: 6,
-                                      "aria-label": $options.getAriaLabel('rowsPerPageLabel'),
-                                      rows: $data.d_rows,
-                                      options: $props.rowsPerPageOptions,
-                                      onRowsChange: _cache[5] || (_cache[5] = $event => ($options.onRowChange($event))),
-                                      disabled: $options.empty,
-                                      pt: _ctx.pt
-                                    }, null, 8, ["aria-label", "rows", "options", "disabled", "pt"]))
-                                  : (item === 'JumpToPageDropdown')
-                                    ? (vue.openBlock(), vue.createBlock(_component_JumpToPageDropdown, {
-                                        key: 7,
-                                        "aria-label": $options.getAriaLabel('jumpToPageDropdownLabel'),
-                                        page: $options.page,
-                                        pageCount: $options.pageCount,
-                                        onPageChange: _cache[6] || (_cache[6] = $event => ($options.changePage($event))),
-                                        disabled: $options.empty,
-                                        pt: _ctx.pt
-                                      }, null, 8, ["aria-label", "page", "pageCount", "disabled", "pt"]))
-                                    : (item === 'JumpToPageInput')
-                                      ? (vue.openBlock(), vue.createBlock(_component_JumpToPageInput, {
-                                          key: 8,
-                                          page: $options.currentPage,
-                                          onPageChange: _cache[7] || (_cache[7] = $event => ($options.changePage($event))),
-                                          disabled: $options.empty,
-                                          pt: _ctx.pt
-                                        }, null, 8, ["page", "disabled", "pt"]))
-                                      : vue.createCommentVNode("", true)
-                  ], 64))
-                }), 128)),
-                (_ctx.$slots.end)
-                  ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-                      key: 1,
-                      class: "p-paginator-right-content"
-                    }, _ctx.ptm('end')), [
-                      vue.renderSlot(_ctx.$slots, "end", { state: $options.currentState })
-                    ], 16))
-                  : vue.createCommentVNode("", true)
-              ], 16))
-            }), 128))
-          ], 16))
-        : vue.createCommentVNode("", true)
-    }
-
-    function styleInject(css, ref) {
-      if ( ref === void 0 ) ref = {};
-      var insertAt = ref.insertAt;
-
-      if (!css || typeof document === 'undefined') { return; }
-
-      var head = document.head || document.getElementsByTagName('head')[0];
-      var style = document.createElement('style');
-      style.type = 'text/css';
-
-      if (insertAt === 'top') {
-        if (head.firstChild) {
-          head.insertBefore(style, head.firstChild);
-        } else {
-          head.appendChild(style);
-        }
-      } else {
-        head.appendChild(style);
-      }
-
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css;
-      } else {
-        style.appendChild(document.createTextNode(css));
-      }
+      var _component_FirstPageLink = vue.resolveComponent("FirstPageLink");
+      var _component_PrevPageLink = vue.resolveComponent("PrevPageLink");
+      var _component_NextPageLink = vue.resolveComponent("NextPageLink");
+      var _component_LastPageLink = vue.resolveComponent("LastPageLink");
+      var _component_PageLinks = vue.resolveComponent("PageLinks");
+      var _component_CurrentPageReport = vue.resolveComponent("CurrentPageReport");
+      var _component_RowsPerPageDropdown = vue.resolveComponent("RowsPerPageDropdown");
+      var _component_JumpToPageDropdown = vue.resolveComponent("JumpToPageDropdown");
+      var _component_JumpToPageInput = vue.resolveComponent("JumpToPageInput");
+      return (_ctx.alwaysShow ? true : $options.pageLinks && $options.pageLinks.length > 1) ? (vue.openBlock(), vue.createElementBlock("nav", vue.normalizeProps(vue.mergeProps({
+        key: 0
+      }, _ctx.ptm('paginatorWrapper'))), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.templateItems, function (value, key) {
+        return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: key,
+          ref_for: true,
+          ref: "paginator",
+          "class": _ctx.cx('paginator', {
+            key: key
+          })
+        }, _ctx.ptm('root'), {
+          "data-pc-name": "paginator"
+        }), [_ctx.$slots.start ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 0,
+          "class": _ctx.cx('start')
+        }, _ctx.ptm('start')), [vue.renderSlot(_ctx.$slots, "start", {
+          state: $options.currentState
+        })], 16)) : vue.createCommentVNode("", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value, function (item) {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: item
+          }, [item === 'FirstPageLink' ? (vue.openBlock(), vue.createBlock(_component_FirstPageLink, {
+            key: 0,
+            "aria-label": $options.getAriaLabel('firstPageLabel'),
+            template: _ctx.$slots.firstpagelinkicon,
+            onClick: _cache[0] || (_cache[0] = function ($event) {
+              return $options.changePageToFirst($event);
+            }),
+            disabled: $options.isFirstPage || $options.empty,
+            pt: _ctx.pt
+          }, null, 8, ["aria-label", "template", "disabled", "pt"])) : item === 'PrevPageLink' ? (vue.openBlock(), vue.createBlock(_component_PrevPageLink, {
+            key: 1,
+            "aria-label": $options.getAriaLabel('prevPageLabel'),
+            template: _ctx.$slots.prevpagelinkicon,
+            onClick: _cache[1] || (_cache[1] = function ($event) {
+              return $options.changePageToPrev($event);
+            }),
+            disabled: $options.isFirstPage || $options.empty,
+            pt: _ctx.pt
+          }, null, 8, ["aria-label", "template", "disabled", "pt"])) : item === 'NextPageLink' ? (vue.openBlock(), vue.createBlock(_component_NextPageLink, {
+            key: 2,
+            "aria-label": $options.getAriaLabel('nextPageLabel'),
+            template: _ctx.$slots.nextpagelinkicon,
+            onClick: _cache[2] || (_cache[2] = function ($event) {
+              return $options.changePageToNext($event);
+            }),
+            disabled: $options.isLastPage || $options.empty,
+            pt: _ctx.pt
+          }, null, 8, ["aria-label", "template", "disabled", "pt"])) : item === 'LastPageLink' ? (vue.openBlock(), vue.createBlock(_component_LastPageLink, {
+            key: 3,
+            "aria-label": $options.getAriaLabel('lastPageLabel'),
+            template: _ctx.$slots.lastpagelinkicon,
+            onClick: _cache[3] || (_cache[3] = function ($event) {
+              return $options.changePageToLast($event);
+            }),
+            disabled: $options.isLastPage || $options.empty,
+            pt: _ctx.pt
+          }, null, 8, ["aria-label", "template", "disabled", "pt"])) : item === 'PageLinks' ? (vue.openBlock(), vue.createBlock(_component_PageLinks, {
+            key: 4,
+            "aria-label": $options.getAriaLabel('pageLabel'),
+            value: $options.pageLinks,
+            page: $options.page,
+            onClick: _cache[4] || (_cache[4] = function ($event) {
+              return $options.changePageLink($event);
+            }),
+            pt: _ctx.pt
+          }, null, 8, ["aria-label", "value", "page", "pt"])) : item === 'CurrentPageReport' ? (vue.openBlock(), vue.createBlock(_component_CurrentPageReport, {
+            key: 5,
+            "aria-live": "polite",
+            template: _ctx.currentPageReportTemplate,
+            currentPage: $options.currentPage,
+            page: $options.page,
+            pageCount: $options.pageCount,
+            first: $data.d_first,
+            rows: $data.d_rows,
+            totalRecords: _ctx.totalRecords,
+            pt: _ctx.pt
+          }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords", "pt"])) : item === 'RowsPerPageDropdown' && _ctx.rowsPerPageOptions ? (vue.openBlock(), vue.createBlock(_component_RowsPerPageDropdown, {
+            key: 6,
+            "aria-label": $options.getAriaLabel('rowsPerPageLabel'),
+            rows: $data.d_rows,
+            options: _ctx.rowsPerPageOptions,
+            onRowsChange: _cache[5] || (_cache[5] = function ($event) {
+              return $options.onRowChange($event);
+            }),
+            disabled: $options.empty,
+            unstyled: _ctx.unstyled,
+            pt: _ctx.pt
+          }, null, 8, ["aria-label", "rows", "options", "disabled", "unstyled", "pt"])) : item === 'JumpToPageDropdown' ? (vue.openBlock(), vue.createBlock(_component_JumpToPageDropdown, {
+            key: 7,
+            "aria-label": $options.getAriaLabel('jumpToPageDropdownLabel'),
+            page: $options.page,
+            pageCount: $options.pageCount,
+            onPageChange: _cache[6] || (_cache[6] = function ($event) {
+              return $options.changePage($event);
+            }),
+            disabled: $options.empty,
+            unstyled: _ctx.unstyled,
+            pt: _ctx.pt
+          }, null, 8, ["aria-label", "page", "pageCount", "disabled", "unstyled", "pt"])) : item === 'JumpToPageInput' ? (vue.openBlock(), vue.createBlock(_component_JumpToPageInput, {
+            key: 8,
+            page: $options.currentPage,
+            onPageChange: _cache[7] || (_cache[7] = function ($event) {
+              return $options.changePage($event);
+            }),
+            disabled: $options.empty,
+            unstyled: _ctx.unstyled,
+            pt: _ctx.pt
+          }, null, 8, ["page", "disabled", "unstyled", "pt"])) : vue.createCommentVNode("", true)], 64);
+        }), 128)), _ctx.$slots.end ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 1,
+          "class": _ctx.cx('end')
+        }, _ctx.ptm('end')), [vue.renderSlot(_ctx.$slots, "end", {
+          state: $options.currentState
+        })], 16)) : vue.createCommentVNode("", true)], 16);
+      }), 128))], 16)) : vue.createCommentVNode("", true);
     }
 
-    var css_248z = "\n.p-paginator-default {\n    display: flex;\n}\n.p-paginator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n}\n.p-paginator-left-content {\n    margin-right: auto;\n}\n.p-paginator-right-content {\n    margin-left: auto;\n}\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev,\n.p-paginator-current {\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n    user-select: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-paginator-element:focus {\n    z-index: 1;\n    position: relative;\n}\n";
-    styleInject(css_248z);
-
     script.render = render;
 
     return script;
 
-})(primevue.basecomponent, primevue.utils, Vue, primevue.icons.angledoubleleft, primevue.ripple, primevue.dropdown, primevue.inputnumber, primevue.icons.angledoubleright, primevue.icons.angleright, primevue.icons.angleleft);
+})(primevue.utils, primevue.basecomponent, primevue.usestyle, Vue, primevue.icons.angledoubleleft, primevue.ripple, primevue.dropdown, primevue.inputnumber, primevue.icons.angledoubleright, primevue.icons.angleright, primevue.icons.angleleft);