@progress/kendo-angular-common 23.3.0-develop.9 → 23.3.1-develop.1

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

@@ -369,6 +369,9 @@ const hasFocusableParent = (element, container) => {
 };
 
 const isVisible = (element) => {
+    if (!isDocumentAvailable() || !element?.getBoundingClientRect) {
+        return false;
+    }
     const rect = element.getBoundingClientRect();
     const hasSize = rect.width > 0 && rect.height > 0;
     const hasPosition = rect.x !== 0 && rect.y !== 0;
@@ -555,17 +558,39 @@ class ResizeService {
 }
 
 // eslint-disable import/no-deprecated
-// TODO:NG13 CSP
-const div = (style) => {
+const applyStyles = (el, styles) => {
+    for (const prop in styles) {
+        el.style.setProperty(prop, styles[prop]);
+    }
+};
+const div = (styles) => {
     const el = document.createElement('div');
-    el.style.cssText = style;
+    applyStyles(el, styles);
     return el;
 };
 const computedProp = (elem, prop) => getComputedStyle(elem, null).getPropertyValue(prop);
-const WRAP_STYLE = 'position: absolute; display: block; left: 0; top: 0; right: 0; bottom: 0; z-index: -1;' +
-    'overflow: hidden; visibility: hidden;';
-const EXPAND_CHILD_STYLE = 'position: absolute; left: 0; top: 0; transition: 0s;';
-const SHRINK_CHILD_STYLE = EXPAND_CHILD_STYLE + 'width: 200%; height: 200%;';
+const WRAP_STYLES = {
+    'position': 'absolute',
+    'display': 'block',
+    'left': '0',
+    'top': '0',
+    'right': '0',
+    'bottom': '0',
+    'z-index': '-1',
+    'overflow': 'hidden',
+    'visibility': 'hidden'
+};
+const EXPAND_CHILD_STYLES = {
+    'position': 'absolute',
+    'left': '0',
+    'top': '0',
+    'transition': '0s'
+};
+const SHRINK_CHILD_STYLES = {
+    ...EXPAND_CHILD_STYLES,
+    'width': '200%',
+    'height': '200%'
+};
 class ResizeCompatService extends ResizeService {
     element;
     ngZone;
@@ -620,14 +645,14 @@ class ResizeCompatService extends ResizeService {
     }
     render() {
         const element = this.element?.nativeElement;
-        element.style.cssText = WRAP_STYLE;
+        applyStyles(element, WRAP_STYLES);
         element.setAttribute('dir', 'ltr');
-        this.expand = div(WRAP_STYLE);
-        this.expandChild = div(EXPAND_CHILD_STYLE);
+        this.expand = div(WRAP_STYLES);
+        this.expandChild = div(EXPAND_CHILD_STYLES);
         this.expand.appendChild(this.expandChild);
         element.appendChild(this.expand);
-        this.shrink = div(WRAP_STYLE);
-        const shrinkChild = div(SHRINK_CHILD_STYLE);
+        this.shrink = div(WRAP_STYLES);
+        const shrinkChild = div(SHRINK_CHILD_STYLES);
         this.shrink.appendChild(shrinkChild);
         element.appendChild(this.shrink);
     }
@@ -1649,40 +1674,99 @@ 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.overflow = 'scroll';
+        outer.style.overflowX = 'hidden';
+        outer.style.zoom = '1';
+        outer.style.clear = 'both';
+        outer.style.display = 'block';
+        outer.style.width = '100px';
+        outer.style.visibility = 'hidden';
+        inner.style.width = '100%';
+        inner.style.display = 'block';
+        outer.appendChild(inner);
+        document.body.appendChild(outer);
+        cachedScrollbarWidth = outer.getBoundingClientRect().width - inner.getBoundingClientRect().width;
+        document.body.removeChild(outer);
+    }
+    return cachedScrollbarWidth;
+};
+/**
+ * @hidden
+ */
+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 ScrollbarWidthService {
+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 +2121,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.9",
+  "version": "23.3.1-develop.1",
   "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.9"
+    "@progress/kendo-angular-schematics": "23.3.1-develop.1"
   },
   "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>;
 }