@progress/kendo-vue-data-tools 3.12.0 → 3.13.0-dev.202308171358

package/dist/npm/filter/GroupToolbar.js

@@ -78,9 +78,7 @@ var GroupToolbarVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var _a = this.$props,
-      fields = _a.fields,
-      filter = _a.filter;
+    var filter = this.$props.filter;
     var locService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     return h("div", {
       "class": "k-filter-toolbar"
@@ -98,78 +96,12 @@ var GroupToolbarVue2 = {
     }, this.v3 ? function () {
       return [
       // @ts-ignore function children 
-      h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
+      h(kendo_vue_buttons_1.ButtonGroup, {
+        "class": "k-toolbar-button-group"
+      }, _this.v3 ? function () {
         return [
         // @ts-ignore function children 
-        h(kendo_vue_buttons_1.ButtonGroup, _this.v3 ? function () {
-          return [
-          // @ts-ignore function children 
-          h(kendo_vue_buttons_1.Button, {
-            togglable: true,
-            attrs: _this.v3 ? undefined : {
-              togglable: true,
-              selected: filter.logic === 'and',
-              type: "button"
-            },
-            onClick: _this.onLogicAnd,
-            on: _this.v3 ? undefined : {
-              "click": _this.onLogicAnd
-            },
-            selected: filter.logic === 'and',
-            type: "button"
-          }, _this.v3 ? function () {
-            return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-          } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]),
-          // @ts-ignore function children 
-          h(kendo_vue_buttons_1.Button, {
-            togglable: true,
-            attrs: _this.v3 ? undefined : {
-              togglable: true,
-              selected: filter.logic === 'or',
-              type: "button"
-            },
-            onClick: _this.onLogicOr,
-            on: _this.v3 ? undefined : {
-              "click": _this.onLogicOr
-            },
-            selected: filter.logic === 'or',
-            type: "button"
-          }, _this.v3 ? function () {
-            return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-          } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])];
-        } : [h(kendo_vue_buttons_1.Button, {
-          togglable: true,
-          attrs: _this.v3 ? undefined : {
-            togglable: true,
-            selected: filter.logic === 'and',
-            type: "button"
-          },
-          onClick: _this.onLogicAnd,
-          on: _this.v3 ? undefined : {
-            "click": _this.onLogicAnd
-          },
-          selected: filter.logic === 'and',
-          type: "button"
-        }, _this.v3 ? function () {
-          return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-        } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]), h(kendo_vue_buttons_1.Button, {
-          togglable: true,
-          attrs: _this.v3 ? undefined : {
-            togglable: true,
-            selected: filter.logic === 'or',
-            type: "button"
-          },
-          onClick: _this.onLogicOr,
-          on: _this.v3 ? undefined : {
-            "click": _this.onLogicOr
-          },
-          selected: filter.logic === 'or',
-          type: "button"
-        }, _this.v3 ? function () {
-          return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-        } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])])];
-      } : [h(kendo_vue_buttons_1.ButtonGroup, _this.v3 ? function () {
-        return [h(kendo_vue_buttons_1.Button, {
+        h(kendo_vue_buttons_1.Button, {
           togglable: true,
           attrs: _this.v3 ? undefined : {
             togglable: true,
@@ -180,11 +112,14 @@ var GroupToolbarVue2 = {
           on: _this.v3 ? undefined : {
             "click": _this.onLogicAnd
           },
+          "class": "k-toolbar-button",
           selected: filter.logic === 'and',
           type: "button"
         }, _this.v3 ? function () {
           return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-        } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]), h(kendo_vue_buttons_1.Button, {
+        } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]),
+        // @ts-ignore function children 
+        h(kendo_vue_buttons_1.Button, {
           togglable: true,
           attrs: _this.v3 ? undefined : {
             togglable: true,
@@ -195,6 +130,7 @@ var GroupToolbarVue2 = {
           on: _this.v3 ? undefined : {
             "click": _this.onLogicOr
           },
+          "class": "k-toolbar-button",
           selected: filter.logic === 'or',
           type: "button"
         }, _this.v3 ? function () {
@@ -211,6 +147,7 @@ var GroupToolbarVue2 = {
         on: _this.v3 ? undefined : {
           "click": _this.onLogicAnd
         },
+        "class": "k-toolbar-button",
         selected: filter.logic === 'and',
         type: "button"
       }, _this.v3 ? function () {
@@ -226,32 +163,14 @@ var GroupToolbarVue2 = {
         on: _this.v3 ? undefined : {
           "click": _this.onLogicOr
         },
+        "class": "k-toolbar-button",
         selected: filter.logic === 'or',
         type: "button"
       }, _this.v3 ? function () {
         return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-      } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])])]),
+      } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])]),
       // @ts-ignore function children 
-      h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-        return [
-        // @ts-ignore function children 
-        h(kendo_vue_buttons_1.Button, {
-          title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
-          attrs: _this.v3 ? undefined : {
-            title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
-            icon: "filter-add-expression",
-            svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
-            type: "button"
-          },
-          icon: "filter-add-expression",
-          svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
-          type: "button",
-          onClick: _this.onAddExpression,
-          on: _this.v3 ? undefined : {
-            "click": _this.onAddExpression
-          }
-        })];
-      } : [h(kendo_vue_buttons_1.Button, {
+      h(kendo_vue_buttons_1.Button, {
         title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
@@ -262,32 +181,14 @@ var GroupToolbarVue2 = {
         icon: "filter-add-expression",
         svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
         type: "button",
+        "class": "k-toolbar-button",
         onClick: _this.onAddExpression,
         on: _this.v3 ? undefined : {
           "click": _this.onAddExpression
         }
-      })]),
+      }),
       // @ts-ignore function children 
-      h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-        return [
-        // @ts-ignore function children 
-        h(kendo_vue_buttons_1.Button, {
-          title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
-          attrs: _this.v3 ? undefined : {
-            title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
-            icon: "filter-add-group",
-            svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
-            type: "button"
-          },
-          icon: "filter-add-group",
-          svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
-          type: "button",
-          onClick: _this.onAddGroup,
-          on: _this.v3 ? undefined : {
-            "click": _this.onAddGroup
-          }
-        })];
-      } : [h(kendo_vue_buttons_1.Button, {
+      h(kendo_vue_buttons_1.Button, {
         title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
@@ -298,116 +199,35 @@ var GroupToolbarVue2 = {
         icon: "filter-add-group",
         svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
         type: "button",
+        "class": "k-toolbar-button",
         onClick: _this.onAddGroup,
         on: _this.v3 ? undefined : {
           "click": _this.onAddGroup
         }
-      })]),
+      }),
       // @ts-ignore function children 
-      h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-        return [
-        // @ts-ignore function children 
-        h(kendo_vue_buttons_1.Button, {
-          title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-          attrs: _this.v3 ? undefined : {
-            title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-            icon: "x",
-            svgIcon: kendo_svg_icons_1.xIcon,
-            look: "flat",
-            type: "button"
-          },
-          icon: "x",
-          svgIcon: kendo_svg_icons_1.xIcon,
-          look: "flat",
-          type: "button",
-          onClick: _this.onGroupRemove,
-          on: _this.v3 ? undefined : {
-            "click": _this.onGroupRemove
-          }
-        })];
-      } : [h(kendo_vue_buttons_1.Button, {
+      h(kendo_vue_buttons_1.Button, {
         title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
         attrs: _this.v3 ? undefined : {
           title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
           icon: "x",
           svgIcon: kendo_svg_icons_1.xIcon,
-          look: "flat",
+          fillMode: "flat",
           type: "button"
         },
         icon: "x",
         svgIcon: kendo_svg_icons_1.xIcon,
-        look: "flat",
+        fillMode: "flat",
         type: "button",
+        "class": "k-toolbar-button",
         onClick: _this.onGroupRemove,
         on: _this.v3 ? undefined : {
           "click": _this.onGroupRemove
         }
-      })])];
-    } : [h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-      return [h(kendo_vue_buttons_1.ButtonGroup, _this.v3 ? function () {
-        return [h(kendo_vue_buttons_1.Button, {
-          togglable: true,
-          attrs: _this.v3 ? undefined : {
-            togglable: true,
-            selected: filter.logic === 'and',
-            type: "button"
-          },
-          onClick: _this.onLogicAnd,
-          on: _this.v3 ? undefined : {
-            "click": _this.onLogicAnd
-          },
-          selected: filter.logic === 'and',
-          type: "button"
-        }, _this.v3 ? function () {
-          return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-        } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]), h(kendo_vue_buttons_1.Button, {
-          togglable: true,
-          attrs: _this.v3 ? undefined : {
-            togglable: true,
-            selected: filter.logic === 'or',
-            type: "button"
-          },
-          onClick: _this.onLogicOr,
-          on: _this.v3 ? undefined : {
-            "click": _this.onLogicOr
-          },
-          selected: filter.logic === 'or',
-          type: "button"
-        }, _this.v3 ? function () {
-          return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-        } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])];
-      } : [h(kendo_vue_buttons_1.Button, {
-        togglable: true,
-        attrs: _this.v3 ? undefined : {
-          togglable: true,
-          selected: filter.logic === 'and',
-          type: "button"
-        },
-        onClick: _this.onLogicAnd,
-        on: _this.v3 ? undefined : {
-          "click": _this.onLogicAnd
-        },
-        selected: filter.logic === 'and',
-        type: "button"
-      }, _this.v3 ? function () {
-        return [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])];
-      } : [locService.toLanguageString(main_1.filterAndLogic, main_1.messages[main_1.filterAndLogic])]), h(kendo_vue_buttons_1.Button, {
-        togglable: true,
-        attrs: _this.v3 ? undefined : {
-          togglable: true,
-          selected: filter.logic === 'or',
-          type: "button"
-        },
-        onClick: _this.onLogicOr,
-        on: _this.v3 ? undefined : {
-          "click": _this.onLogicOr
-        },
-        selected: filter.logic === 'or',
-        type: "button"
-      }, _this.v3 ? function () {
-        return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-      } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])])];
-    } : [h(kendo_vue_buttons_1.ButtonGroup, _this.v3 ? function () {
+      })];
+    } : [h(kendo_vue_buttons_1.ButtonGroup, {
+      "class": "k-toolbar-button-group"
+    }, _this.v3 ? function () {
       return [h(kendo_vue_buttons_1.Button, {
         togglable: true,
         attrs: _this.v3 ? undefined : {
@@ -419,6 +239,7 @@ var GroupToolbarVue2 = {
         on: _this.v3 ? undefined : {
           "click": _this.onLogicAnd
         },
+        "class": "k-toolbar-button",
         selected: filter.logic === 'and',
         type: "button"
       }, _this.v3 ? function () {
@@ -434,6 +255,7 @@ var GroupToolbarVue2 = {
         on: _this.v3 ? undefined : {
           "click": _this.onLogicOr
         },
+        "class": "k-toolbar-button",
         selected: filter.logic === 'or',
         type: "button"
       }, _this.v3 ? function () {
@@ -450,6 +272,7 @@ var GroupToolbarVue2 = {
       on: _this.v3 ? undefined : {
         "click": _this.onLogicAnd
       },
+      "class": "k-toolbar-button",
       selected: filter.logic === 'and',
       type: "button"
     }, _this.v3 ? function () {
@@ -465,28 +288,12 @@ var GroupToolbarVue2 = {
       on: _this.v3 ? undefined : {
         "click": _this.onLogicOr
       },
+      "class": "k-toolbar-button",
       selected: filter.logic === 'or',
       type: "button"
     }, _this.v3 ? function () {
       return [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])];
-    } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])])]), h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-      return [h(kendo_vue_buttons_1.Button, {
-        title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
-        attrs: _this.v3 ? undefined : {
-          title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
-          icon: "filter-add-expression",
-          svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
-          type: "button"
-        },
-        icon: "filter-add-expression",
-        svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
-        type: "button",
-        onClick: _this.onAddExpression,
-        on: _this.v3 ? undefined : {
-          "click": _this.onAddExpression
-        }
-      })];
-    } : [h(kendo_vue_buttons_1.Button, {
+    } : [locService.toLanguageString(main_1.filterOrLogic, main_1.messages[main_1.filterOrLogic])])]), h(kendo_vue_buttons_1.Button, {
       title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterAddExpression, main_1.messages[main_1.filterAddExpression]),
@@ -497,28 +304,12 @@ var GroupToolbarVue2 = {
       icon: "filter-add-expression",
       svgIcon: kendo_svg_icons_1.filterAddExpressionIcon,
       type: "button",
+      "class": "k-toolbar-button",
       onClick: _this.onAddExpression,
       on: _this.v3 ? undefined : {
         "click": _this.onAddExpression
       }
-    })]), h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-      return [h(kendo_vue_buttons_1.Button, {
-        title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
-        attrs: _this.v3 ? undefined : {
-          title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
-          icon: "filter-add-group",
-          svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
-          type: "button"
-        },
-        icon: "filter-add-group",
-        svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
-        type: "button",
-        onClick: _this.onAddGroup,
-        on: _this.v3 ? undefined : {
-          "click": _this.onAddGroup
-        }
-      })];
-    } : [h(kendo_vue_buttons_1.Button, {
+    }), h(kendo_vue_buttons_1.Button, {
       title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterAddGroup, main_1.messages[main_1.filterAddGroup]),
@@ -529,47 +320,30 @@ var GroupToolbarVue2 = {
       icon: "filter-add-group",
       svgIcon: kendo_svg_icons_1.filterAddGroupIcon,
       type: "button",
+      "class": "k-toolbar-button",
       onClick: _this.onAddGroup,
       on: _this.v3 ? undefined : {
         "click": _this.onAddGroup
       }
-    })]), h(kendo_vue_buttons_1.ToolbarItem, _this.v3 ? function () {
-      return [h(kendo_vue_buttons_1.Button, {
-        title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-        attrs: _this.v3 ? undefined : {
-          title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
-          icon: "x",
-          svgIcon: kendo_svg_icons_1.xIcon,
-          look: "flat",
-          type: "button"
-        },
-        icon: "x",
-        svgIcon: kendo_svg_icons_1.xIcon,
-        look: "flat",
-        type: "button",
-        onClick: _this.onGroupRemove,
-        on: _this.v3 ? undefined : {
-          "click": _this.onGroupRemove
-        }
-      })];
-    } : [h(kendo_vue_buttons_1.Button, {
+    }), h(kendo_vue_buttons_1.Button, {
       title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
       attrs: _this.v3 ? undefined : {
         title: locService.toLanguageString(main_1.filterClose, main_1.messages[main_1.filterClose]),
         icon: "x",
         svgIcon: kendo_svg_icons_1.xIcon,
-        look: "flat",
+        fillMode: "flat",
         type: "button"
       },
       icon: "x",
       svgIcon: kendo_svg_icons_1.xIcon,
-      look: "flat",
+      fillMode: "flat",
       type: "button",
+      "class": "k-toolbar-button",
       onClick: _this.onGroupRemove,
       on: _this.v3 ? undefined : {
         "click": _this.onGroupRemove
       }
-    })])])]);
+    })])]);
   },
   methods: {
     onGroupRemove: function onGroupRemove() {

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-data-tools',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1689689499,
+    publishDate: 1692280186,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/pager/Pager.js

@@ -31,14 +31,6 @@ var main_1 = require("../messages/main");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-/**
- * @hidden
- */
-var RESPONSIVE_BREAKPOINT_MEDIUM = 600;
-/**
- * @hidden
- */
-var RESPONSIVE_BREAKPOINT_LARGE = 768;
 /**
  * @hidden
  */
@@ -89,18 +81,23 @@ var PagerVue2 = {
       default: undefined
     }
   },
+  created: function created() {
+    this.pagerSizesIndex = 1;
+    this.pagerInfoIndex = 2;
+  },
   data: function data() {
     return {
       currentSize: 'medium',
-      currentRtl: false
+      currentRtl: false,
+      itemsToFit: undefined,
+      itemsWidths: undefined
     };
   },
   mounted: function mounted() {
     window.addEventListener('resize', this.onWindowResize);
     this.currentRtl = (0, kendo_vue_common_1.isRtl)(this.$el);
-    this.onWindowResize();
-  },
-  updated: function updated() {
+    var childsWidths = this.collectPagerChildsWidths();
+    this.itemsWidths = childsWidths;
     this.onWindowResize();
   },
   destroyed: !!isV3 ? undefined : function () {
@@ -167,17 +164,41 @@ var PagerVue2 = {
       if (!element || !this.$props.responsive || this.$props.settings.responsive === false) {
         return;
       }
-      var width = element.offsetWidth;
-      if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-        this.currentSize = 'small';
-      } else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-        this.currentSize = 'medium';
-      } else {
-        this.currentSize = 'large';
-      }
+      this.itemsToFit = this.fitChildsInParent(element, this.itemsWidths || []);
     },
     transformDimesion: function transformDimesion(initialValue) {
       return typeof initialValue === 'string' ? initialValue.endsWith('px') ? initialValue : initialValue + 'px' : initialValue + 'px';
+    },
+    collectPagerChildsWidths: function collectPagerChildsWidths() {
+      var _a;
+      var arrayChildren = Array.from(((_a = this.$el) === null || _a === void 0 ? void 0 : _a.children) || []);
+      var widths = arrayChildren.map(function (item) {
+        if (item instanceof HTMLElement) {
+          return item.offsetWidth;
+        }
+        return 0;
+      });
+      return widths;
+    },
+    fitChildsInParent: function fitChildsInParent(parent, childsWidths) {
+      var fitItems = [0];
+      var elementsWith = 0;
+      var updatedWidths = childsWidths;
+      var parentWidth = parent.offsetWidth;
+      var firstElement = childsWidths[0];
+      var buffer = 40;
+      elementsWith += firstElement;
+      for (var index = 1; index < childsWidths.length; index++) {
+        var parentChild = parent.children[index];
+        var currentElement = (parentChild === null || parentChild === void 0 ? void 0 : parentChild.offsetWidth) || childsWidths[index];
+        if ((elementsWith += currentElement) < parentWidth - buffer) {
+          fitItems.push(index);
+        } else {
+          updatedWidths[index] = currentElement;
+        }
+      }
+      this.itemsWidths = updatedWidths;
+      return fitItems;
     }
   },
   // @ts-ignore
@@ -193,18 +214,19 @@ var PagerVue2 = {
   },
   // @ts-ignore 
   render: function render(createElement) {
+    var _a, _b;
     var h = gh || createElement;
-    var _a = this.$props,
-      skip = _a.skip,
-      take = _a.take,
-      total = _a.total,
-      pageSizes = _a.pageSizes,
-      buttonCount = _a.buttonCount,
-      messagesMap = _a.messagesMap,
-      info = _a.info,
-      type = _a.type,
-      previousNext = _a.previousNext,
-      pageSizeValue = _a.pageSizeValue;
+    var _c = this.$props,
+      skip = _c.skip,
+      take = _c.take,
+      total = _c.total,
+      pageSizes = _c.pageSizes,
+      buttonCount = _c.buttonCount,
+      messagesMap = _c.messagesMap,
+      info = _c.info,
+      type = _c.type,
+      previousNext = _c.previousNext,
+      pageSizeValue = _c.pageSizeValue;
     var settings = __assign({
       pageSizes: pageSizes,
       buttonCount: buttonCount,
@@ -239,9 +261,9 @@ var PagerVue2 = {
     var changer = settings.type === 'numeric' ?
     // @ts-ignore
     h(PagerNumericButtons_1.PagerNumericButtons, {
-      responsiveSize: this.currentSize,
+      responsiveSize: this.responsive && this.itemsToFit && this.itemsToFit.length < 2 ? 'small' : 'large',
       attrs: this.v3 ? undefined : {
-        responsiveSize: this.currentSize,
+        responsiveSize: this.responsive && this.itemsToFit && this.itemsToFit.length < 2 ? 'small' : 'large',
         size: this.size,
         buttonCount: settings.buttonCount || 0,
         totalPages: this.totalPages,
@@ -441,7 +463,7 @@ var PagerVue2 = {
       "aria-controls": this.$props.ariaControls
     }, [h("div", {
       "class": 'k-pager-numbers-wrap'
-    }, [first, prev, changer, next, last]), renderPageSizes, infoElement]);
+    }, [first, prev, changer, next, last]), !(this.responsive && this.itemsToFit && !((_a = this.itemsToFit) === null || _a === void 0 ? void 0 : _a.includes(this.pagerSizesIndex))) && renderPageSizes, !(this.responsive && this.itemsToFit && !((_b = this.itemsToFit) === null || _b === void 0 ? void 0 : _b.includes(this.pagerInfoIndex))) && infoElement]);
   }
 };
 exports.PagerVue2 = PagerVue2;

package/dist/npm/pager/PagerInfo.js

@@ -51,8 +51,8 @@ var PagerInfoVue2 = {
       messageKey: main_1.pagerInfo,
       defaultMessage: main_1.messages[main_1.pagerInfo]
     };
-    return h("div", {
-      "class": "k-pager-info k-label"
+    return h("span", {
+      "class": "k-pager-info"
     }, [intlService.format(localizationService.toLanguageString(infoMessage.messageKey, infoMessage.defaultMessage), [Math.min(this.$props.skip + 1, this.$props.totalPages), Math.min(this.$props.skip + this.$props.currentPage, this.$props.totalPages), this.$props.totalPages])]);
   }
 };