@progress/kendo-angular-common 23.3.0-develop.11 → 23.3.0-develop.12

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

@@ -1649,40 +1649,92 @@ class PreventableEvent {
 
 const canCreateElement = () => isDocumentAvailable() && document.createElement;
 const propName = '--kendo-scrollbar-width';
+let cachedScrollbarWidth = null;
+let cachedPixelRatio;
+let cachedRtlScrollLeft = null;
 /**
  * @hidden
  */
 const scrollbarWidth = () => {
-    let scrollbarWidth = 0;
-    if (canCreateElement()) {
-        const div = document.createElement('div');
-        div.style.cssText = 'overflow:scroll;overflow-x:hidden;zoom:1;clear:both;display:block';
-        div.innerHTML = ' ';
-        document.body.appendChild(div);
-        scrollbarWidth = div.offsetWidth - div.scrollWidth;
-        document.body.removeChild(div);
-    }
-    return scrollbarWidth;
+    if (cachedScrollbarWidth === null && canCreateElement()) {
+        cachedPixelRatio = window.devicePixelRatio || 1;
+        const outer = document.createElement('div');
+        const inner = document.createElement('div');
+        outer.style.cssText = 'overflow:scroll;overflow-x:hidden;zoom:1;clear:both;display:block;width:100px;visibility:hidden';
+        inner.style.cssText = 'width:100%;display:block';
+        outer.appendChild(inner);
+        document.body.appendChild(outer);
+        cachedScrollbarWidth = outer.getBoundingClientRect().width - inner.getBoundingClientRect().width;
+        document.body.removeChild(outer);
+    }
+    return cachedScrollbarWidth;
 };
 /**
  * @hidden
  */
-class ScrollbarWidthService {
+const rtlScrollLeft = () => {
+    if (cachedRtlScrollLeft === null && canCreateElement()) {
+        const outer = document.createElement('div');
+        outer.style.direction = 'rtl';
+        outer.style.display = 'block';
+        outer.style.clear = 'both';
+        outer.style.width = '100px';
+        outer.style.visibility = 'hidden';
+        outer.style.position = 'absolute';
+        outer.style.left = '-10000px';
+        outer.style.overflow = 'scroll';
+        outer.style.zoom = '1';
+        const inner = document.createElement('div');
+        inner.style.width = '200px';
+        inner.style.height = '1px';
+        outer.append(inner);
+        document.body.appendChild(outer);
+        const initial = outer.scrollLeft;
+        outer.scrollLeft = -1;
+        cachedRtlScrollLeft = outer.scrollLeft < 0 ? outer.scrollLeft : initial;
+        document.body.removeChild(outer);
+    }
+    return cachedRtlScrollLeft;
+};
+/**
+ * @hidden
+ */
+class ScrollbarService {
     changes = new EventEmitter();
-    constructor() {
+    subscription;
+    constructor(ngZone) {
         if (typeof window !== 'undefined' && isDocumentAvailable()) {
             document.body.style.setProperty(propName, `${scrollbarWidth()}px`);
+            ngZone.runOutsideAngular(() => {
+                this.subscription = fromEvent(window, 'resize').pipe(auditTime(100)).subscribe(() => {
+                    if (cachedPixelRatio !== window.devicePixelRatio) {
+                        cachedScrollbarWidth = null;
+                        document.body.style.setProperty(propName, `${scrollbarWidth()}px`);
+                        this.changes.emit();
+                    }
+                });
+            });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollbarWidthService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollbarWidthService, providedIn: 'root' });
+    get scrollbarWidth() {
+        return scrollbarWidth();
+    }
+    get rtlScrollLeft() {
+        return rtlScrollLeft();
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+        this.subscription = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollbarService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollbarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollbarWidthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: ScrollbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: i0.NgZone }] });
 
 /**
  * @hidden
@@ -2037,5 +2089,5 @@ const replaceMessagePlaceholder = (message, name, value) => (message ?? '').repl
  * Generated bundle index. Do not edit.
  */
 
-export { DraggableDirective, EventsOutsideAngularDirective, KENDO_ADORNMENTS, KENDO_COMMON, KENDO_DRAGGABLE, KENDO_EVENTS, KENDO_RESIZESENSOR, KENDO_TEMPLATE_CONTEXT, KENDO_TOGGLEBUTTONTABSTOP, KENDO_WATERMARK, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ScrollbarWidthService, SeparatorComponent, SuffixTemplateDirective, TemplateContextDirective, ToggleButtonTabStopDirective, WatermarkOverlayComponent, anyChanged, applyAttributes, areObjectsEqual, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, firefoxMaxHeight, focusableSelector, getLicenseMessage, getter, guid, hasClasses, hasFocusableParent, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isSet, isString, isVisible, matchesClasses, matchesNodeName, normalizeKeys, parseAttributes, parseCSSClassNames, processCssValue, removeHTMLAttributes, replaceMessagePlaceholder, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, setter, shouldShowValidationUI, splitStringToArray };
+export { ScrollbarService as BrowserSupportService, DraggableDirective, EventsOutsideAngularDirective, KENDO_ADORNMENTS, KENDO_COMMON, KENDO_DRAGGABLE, KENDO_EVENTS, KENDO_RESIZESENSOR, KENDO_TEMPLATE_CONTEXT, KENDO_TOGGLEBUTTONTABSTOP, KENDO_WATERMARK, KendoInput, Keys, MultiTabStop, PrefixTemplateDirective, PreventableEvent, ResizeBatchService, ResizeCompatService, ResizeObserverService, ResizeSensorComponent, ScrollbarService, SeparatorComponent, SuffixTemplateDirective, TemplateContextDirective, ToggleButtonTabStopDirective, WatermarkOverlayComponent, anyChanged, applyAttributes, areObjectsEqual, closest, closestBySelector, closestInScope, contains, findElement, findFocusable, findFocusableChild, firefoxMaxHeight, focusableSelector, getLicenseMessage, getter, guid, hasClasses, hasFocusableParent, hasObservers, isChanged, isControlRequired, isDocumentAvailable, isFirefox, isFocusable, isFocusableWithTabKey, isObject, isObjectPresent, isPresent, isSafari, isSet, isString, isVisible, matchesClasses, matchesNodeName, normalizeKeys, parseAttributes, parseCSSClassNames, processCssValue, removeHTMLAttributes, replaceMessagePlaceholder, rtlScrollLeft, rtlScrollPosition, scrollbarWidth, setHTMLAttributes, setter, shouldShowValidationUI, splitStringToArray };
 

package/index.d.ts

@@ -17,7 +17,7 @@ export * from './utils/setter';
 export * from './watermark';
 export * from './adornments';
 export { PreventableEvent } from './preventable-event';
-export { ScrollbarWidthService, scrollbarWidth } from './utils/scrollbar-width.service';
+export { ScrollbarService, ScrollbarService as BrowserSupportService, scrollbarWidth, rtlScrollLeft } from './utils/scrollbar.service';
 export * from './toggle-button-tab-stop';
 export * from './directives';
 export * from './template-context';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-common",
-  "version": "23.3.0-develop.11",
+  "version": "23.3.0-develop.12",
   "description": "Kendo UI for Angular - Utility Package",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,7 +23,7 @@
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-draggable": "^3.0.2",
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "23.3.0-develop.11"
+    "@progress/kendo-angular-schematics": "23.3.0-develop.12"
   },
   "publishConfig": {
     "access": "public"

package/utils/{scrollbar-width.service.d.ts → scrollbar.service.d.ts}

@@ -2,7 +2,7 @@
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -11,9 +11,17 @@ export declare const scrollbarWidth: () => number;
 /**
  * @hidden
  */
-export declare class ScrollbarWidthService {
+export declare const rtlScrollLeft: () => number;
+/**
+ * @hidden
+ */
+export declare class ScrollbarService implements OnDestroy {
     changes: EventEmitter<any>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollbarWidthService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ScrollbarWidthService>;
+    private subscription;
+    constructor(ngZone: NgZone);
+    get scrollbarWidth(): number;
+    get rtlScrollLeft(): number;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ScrollbarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ScrollbarService>;
 }