@progress/kendo-angular-pager 20.0.0-develop.3 → 20.0.0-develop.4

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1755793072,
-    version: '20.0.0-develop.3',
+    publishDate: 1755865380,
+    version: '20.0.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/pager/pager.component.mjs

@@ -7,7 +7,7 @@ import { PagerTemplateDirective } from "./pager-template.directive";
 import { anyChanged, isChanged, isDocumentAvailable, Keys, normalizeNumpadKeys, replaceMessagePlaceholder, ResizeSensorComponent } from "@progress/kendo-angular-common";
 import { PagerContextService } from "./pager-context.service";
 import { Subscription } from "rxjs";
-import { DEFAULT_PAGE_SIZE_VALUES, getStylingClasses, DEFAULT_SIZE, calculatePadding, createMeasurementSpan, copyComputedStyles, positionOffScreen, getAllFocusableChildren } from '../util';
+import { DEFAULT_PAGE_SIZE_VALUES, getStylingClasses, DEFAULT_SIZE, calculatePadding, calculateGap, createMeasurementSpan, copyComputedStyles, positionOffScreen, getAllFocusableChildren } from '../util';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -87,6 +87,10 @@ export class PagerComponent {
         if (input && newWidth !== this.pagerDimensions.inputWidth) {
             this.pagerDimensions.inputWidth = newWidth;
         }
+        if (input?.nativeElement && !this.pagerDimensions.gapPageText) {
+            const innerStyledElement = input.nativeElement.querySelector('.k-pager-input');
+            this.pagerDimensions.gapPageText = calculateGap(innerStyledElement);
+        }
     }
     pagerInputComponent;
     set pageSizes(sizes) {
@@ -313,6 +317,7 @@ export class PagerComponent {
         infoTextWidth: 0,
         gapNumbersSizes: 0,
         gapSizesInfo: 0,
+        gapPageText: 0,
         width: 0
     };
     constructor(pagerContext, element, localization, renderer, ngZone, cdr, navigationService) {
@@ -607,7 +612,7 @@ export class PagerComponent {
                 return;
         }
         if (!this.showPageText && (!this.showPageSizes || (this.isElementVisible(pagerPageSizes) && this.showItemsText))) {
-            const addPageText = currentWidth + this.pagerDimensions.pageTextWidth;
+            const addPageText = currentWidth + this.pagerDimensions.pageTextWidth + this.pagerDimensions.gapPageText;
             if (checkOverflow && addPageText > availableWidth)
                 return;
             this.ngZone.run(() => this.showPageText = true);

package/esm2022/util.mjs

@@ -77,6 +77,16 @@ export const calculatePadding = (element) => {
     const gapSizesInfo = gapNumbersSizes;
     return { padding, gapNumbersSizes, gapSizesInfo };
 };
+/**
+ * @hidden
+ */
+export const calculateGap = (element) => {
+    if (!element || !isDocumentAvailable()) {
+        return 0;
+    }
+    const computedStyle = window.getComputedStyle(element);
+    return parseFloat(computedStyle.gap) || 0;
+};
 /**
  * @hidden
  */

package/fesm2022/progress-kendo-angular-pager.mjs

@@ -449,6 +449,16 @@ const calculatePadding = (element) => {
     const gapSizesInfo = gapNumbersSizes;
     return { padding, gapNumbersSizes, gapSizesInfo };
 };
+/**
+ * @hidden
+ */
+const calculateGap = (element) => {
+    if (!element || !isDocumentAvailable()) {
+        return 0;
+    }
+    const computedStyle = window.getComputedStyle(element);
+    return parseFloat(computedStyle.gap) || 0;
+};
 /**
  * @hidden
  */
@@ -1509,8 +1519,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1755793072,
-    version: '20.0.0-develop.3',
+    publishDate: 1755865380,
+    version: '20.0.0-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1576,6 +1586,10 @@ class PagerComponent {
         if (input && newWidth !== this.pagerDimensions.inputWidth) {
             this.pagerDimensions.inputWidth = newWidth;
         }
+        if (input?.nativeElement && !this.pagerDimensions.gapPageText) {
+            const innerStyledElement = input.nativeElement.querySelector('.k-pager-input');
+            this.pagerDimensions.gapPageText = calculateGap(innerStyledElement);
+        }
     }
     pagerInputComponent;
     set pageSizes(sizes) {
@@ -1802,6 +1816,7 @@ class PagerComponent {
         infoTextWidth: 0,
         gapNumbersSizes: 0,
         gapSizesInfo: 0,
+        gapPageText: 0,
         width: 0
     };
     constructor(pagerContext, element, localization, renderer, ngZone, cdr, navigationService) {
@@ -2096,7 +2111,7 @@ class PagerComponent {
                 return;
         }
         if (!this.showPageText && (!this.showPageSizes || (this.isElementVisible(pagerPageSizes) && this.showItemsText))) {
-            const addPageText = currentWidth + this.pagerDimensions.pageTextWidth;
+            const addPageText = currentWidth + this.pagerDimensions.pageTextWidth + this.pagerDimensions.gapPageText;
             if (checkOverflow && addPageText > availableWidth)
                 return;
             this.ngZone.run(() => this.showPageText = true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-pager",
-  "version": "20.0.0-develop.3",
+  "version": "20.0.0-develop.4",
   "description": "Kendo UI Angular Pager",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -17,7 +17,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1755793072,
+      "publishDate": 1755865380,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -27,16 +27,16 @@
     "@angular/core": "16 - 20",
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "20.0.0-develop.3",
-    "@progress/kendo-angular-dropdowns": "20.0.0-develop.3",
-    "@progress/kendo-angular-inputs": "20.0.0-develop.3",
-    "@progress/kendo-angular-icons": "20.0.0-develop.3",
-    "@progress/kendo-angular-l10n": "20.0.0-develop.3",
+    "@progress/kendo-angular-common": "20.0.0-develop.4",
+    "@progress/kendo-angular-dropdowns": "20.0.0-develop.4",
+    "@progress/kendo-angular-inputs": "20.0.0-develop.4",
+    "@progress/kendo-angular-icons": "20.0.0-develop.4",
+    "@progress/kendo-angular-l10n": "20.0.0-develop.4",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "20.0.0-develop.3"
+    "@progress/kendo-angular-schematics": "20.0.0-develop.4"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-pager.mjs",

package/schematics/ngAdd/index.js

@@ -4,14 +4,14 @@ const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
     const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'PagerModule', package: 'pager', peerDependencies: {
             // Peers of inputs and dropdowns
-            '@progress/kendo-angular-treeview': '20.0.0-develop.3',
-            '@progress/kendo-angular-intl': '20.0.0-develop.3',
-            '@progress/kendo-angular-navigation': '20.0.0-develop.3',
-            '@progress/kendo-angular-popup': '20.0.0-develop.3',
+            '@progress/kendo-angular-treeview': '20.0.0-develop.4',
+            '@progress/kendo-angular-intl': '20.0.0-develop.4',
+            '@progress/kendo-angular-navigation': '20.0.0-develop.4',
+            '@progress/kendo-angular-popup': '20.0.0-develop.4',
             '@progress/kendo-drawing': '^1.5.12',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-buttons': '20.0.0-develop.3',
-            '@progress/kendo-angular-dialog': '20.0.0-develop.3',
+            '@progress/kendo-angular-buttons': '20.0.0-develop.4',
+            '@progress/kendo-angular-dialog': '20.0.0-develop.4',
             // Peer dependency of icons
             '@progress/kendo-svg-icons': '^4.0.0'
         } });

package/util.d.ts

@@ -44,6 +44,10 @@ export declare const calculatePadding: (element: HTMLElement) => {
     gapNumbersSizes: number;
     gapSizesInfo: number;
 };
+/**
+ * @hidden
+ */
+export declare const calculateGap: (element: HTMLElement) => number;
 /**
  * @hidden
  */