@nexterajs/ui 0.0.1 → 0.1.0

package/fesm2022/nexterajs-ui-styling.mjs

@@ -1,9 +1,12 @@
 import { FlexibleConnectedPositionStrategy } from '@angular/cdk/overlay';
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, NgZone, Injectable, makeEnvironmentProviders, provideEnvironmentInitializer, ElementRef, DestroyRef, Input, Directive } from '@angular/core';
 
 /**
  * Marker class carried by every nxe surface — component hosts and CDK overlay panes alike.
  *
- * It is the nxe counterpart of DevExtreme's `.dx-widget` base and is what gives a surface its
+ * It is the nxe counterpart of DevExtreme's `.nxe-widget` base and is what gives a surface its
  * font family/size/weight/line-height (see styling/_widget.scss).
  *
  * It matters most on overlays: a CDK pane is appended to `<body>`, so a portaled dropdown
@@ -31,7 +34,7 @@ function nxePane(...extra) {
  *
  * DevExtreme drew dropdowns flush against the editor — no border on the shared edge — and moved
  * that seam to the other side when the popup flipped up
- * (`.dx-overlay-content.dx-dropdowneditor-overlay-flipped { border-top-width:1px; border-bottom-width:0 }`).
+ * (`.nxe-overlay-content.nxe-dropdowneditor-overlay-flipped { border-top-width:1px; border-bottom-width:0 }`).
  * CDK does not emit any equivalent hook, so panels need this to reproduce it.
  *
  * Returns the subscription; callers dispose it with the overlay.
@@ -49,11 +52,573 @@ function trackPaneFlip(overlayRef) {
     });
 }
 
+/**
+ * Migration aid: re-emit the old `dx-*` class names alongside the library's `nxe-*` ones.
+ *
+ * The library dropped the `dx-` prefix from its DOM. Applications that still style themselves
+ * with rules like `.dx-datagrid .dx-row > td { padding: 4px }` would silently lose that styling,
+ * and no stylesheet can fix it: CSS cannot alias a class, so a rule keyed on `.dx-datagrid` will
+ * never match an element that only says `nxe-datagrid`. The class has to be back on the element.
+ *
+ * So this mirrors them at runtime. Provide it once and unmigrated stylesheets keep working
+ * unchanged; provide nothing and the library costs nothing, which is the point of it being
+ * opt-in. `tools/dx-compat/rewrite-styles.mjs` rewrites an application's own stylesheets when it
+ * is ready to drop the flag — this is a bridge, not a destination.
+ *
+ * ```ts
+ * bootstrapApplication(AppComponent, { providers: [provideNxeDxCompat()] });
+ * ```
+ */
+class NxeDxCompatService {
+    document = inject(DOCUMENT);
+    ngZone = inject(NgZone);
+    observer;
+    /** Our own writes retrigger the observer; this stops it chasing its own tail. */
+    mirroring = false;
+    start() {
+        if (this.observer || typeof MutationObserver === 'undefined' || !this.document.body) {
+            return;
+        }
+        this.mirrorSubtree(this.document.body);
+        // Outside Angular: this reacts to the DOM the framework just wrote, and must not itself
+        // schedule change detection.
+        this.ngZone.runOutsideAngular(() => {
+            this.observer = new MutationObserver((records) => this.onMutations(records));
+            this.observer.observe(this.document.body, {
+                subtree: true,
+                childList: true,
+                attributes: true,
+                attributeFilter: ['class'],
+            });
+        });
+    }
+    stop() {
+        this.observer?.disconnect();
+        this.observer = undefined;
+    }
+    onMutations(records) {
+        if (this.mirroring) {
+            return;
+        }
+        this.mirroring = true;
+        try {
+            for (const record of records) {
+                if (record.type === 'attributes' && record.target instanceof Element) {
+                    this.mirrorElement(record.target);
+                }
+                record.addedNodes.forEach((node) => {
+                    if (node instanceof Element) {
+                        this.mirrorSubtree(node);
+                    }
+                });
+            }
+        }
+        finally {
+            this.mirroring = false;
+        }
+    }
+    mirrorSubtree(root) {
+        const wasMirroring = this.mirroring;
+        this.mirroring = true;
+        try {
+            this.mirrorElement(root);
+            root.querySelectorAll('*').forEach((el) => this.mirrorElement(el));
+        }
+        finally {
+            this.mirroring = wasMirroring;
+        }
+    }
+    /** Keep `dx-x` present exactly while `nxe-x` is, so a removed state class is removed here too. */
+    mirrorElement(el) {
+        const list = el.classList;
+        const wanted = new Set();
+        for (const cls of Array.from(list)) {
+            if (cls.startsWith('nxe-')) {
+                wanted.add(`dx-${cls.slice(4)}`);
+            }
+        }
+        if (!wanted.size && !Array.from(list).some((c) => c.startsWith('dx-'))) {
+            return;
+        }
+        for (const cls of Array.from(list)) {
+            if (cls.startsWith('dx-') && !wanted.has(cls)) {
+                list.remove(cls);
+            }
+        }
+        for (const cls of wanted) {
+            if (!list.contains(cls)) {
+                list.add(cls);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDxCompatService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDxCompatService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDxCompatService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Opt into the `dx-*` compatibility classes. See {@link NxeDxCompatService} for why this is a
+ * runtime mirror rather than a stylesheet.
+ */
+function provideNxeDxCompat() {
+    return makeEnvironmentProviders([
+        provideEnvironmentInitializer(() => inject(NxeDxCompatService).start()),
+    ]);
+}
+
+const CLASS = {
+    host: 'nxe-scrollbar',
+    activeX: 'nxe-scrollbar--active-x',
+    activeY: 'nxe-scrollbar--active-y',
+    scrollingX: 'nxe-scrollbar--scrolling-x',
+    scrollingY: 'nxe-scrollbar--scrolling-y',
+    focus: 'nxe-scrollbar--focus',
+    clicking: 'nxe-scrollbar--clicking',
+    railX: 'nxe-scrollbar__rail-x',
+    railY: 'nxe-scrollbar__rail-y',
+    thumbX: 'nxe-scrollbar__thumb-x',
+    thumbY: 'nxe-scrollbar__thumb-y',
+};
+/** How long the `--scrolling-*` class lingers after the last scroll event, as the original did. */
+const SCROLLING_CLASS_LINGER_MS = 1000;
+/**
+ * `[nxeScrollbar]` — a container with custom overlay scrollbars.
+ *
+ * This replaces a Perfect Scrollbar wrapper, and reproduces its DOM and its rendering exactly:
+ * two absolutely-positioned rails, each holding a thumb, sized and offset from the host's own
+ * scroll geometry. The stylesheet (`@nexterajs/ui/styles/_scrollbar.scss`) is a value-for-value
+ * port, so applications that restyle the rails keep their appearance unchanged.
+ *
+ * **What is different, deliberately:** the original set `overflow: hidden` and reimplemented
+ * wheel, touch, keyboard and momentum scrolling in JavaScript. Here the element scrolls natively
+ * and only the native scrollbar is hidden — the rails are painted from the `scroll` event. That is
+ * less code and better behaviour on touch and trackpads, and it is invisible: a hidden native
+ * scrollbar takes no layout width, exactly like the overlay rails it replaces.
+ *
+ * The host carries `nxe-scrollbar` while enabled, which is the marker callers branch on.
+ */
+class NxeScrollbarDirective {
+    elementRef = inject(ElementRef);
+    zone = inject(NgZone);
+    destroyRef = inject(DestroyRef);
+    nxeScrollbar = true;
+    nxeScrollbarOptions = null;
+    options = {};
+    animation = null;
+    railX;
+    railY;
+    thumbX;
+    thumbY;
+    resizeObserver;
+    mutationObserver;
+    scrollingXTimer = null;
+    scrollingYTimer = null;
+    teardown = [];
+    initialised = false;
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    ngOnInit() {
+        if (this.nxeScrollbar)
+            this.init();
+    }
+    ngOnChanges(changes) {
+        if ('nxeScrollbarOptions' in changes) {
+            // A spread, not a deep merge: every option on this interface is a flat scalar.
+            this.options = { ...this.options, ...(changes['nxeScrollbarOptions'].currentValue ?? {}) };
+            if (this.initialised)
+                this.update();
+        }
+        if ('nxeScrollbar' in changes && !changes['nxeScrollbar'].firstChange) {
+            if (this.nxeScrollbar)
+                this.init();
+            else
+                this.dispose();
+        }
+    }
+    ngOnDestroy() {
+        this.dispose();
+    }
+    isEnabled() {
+        return this.nxeScrollbar;
+    }
+    /**
+     * Recompute rail and thumb geometry. Call after changing content the directive cannot observe.
+     *
+     * This reproduces the original's arithmetic exactly, down to how it rounds — the requirement was
+     * no visual difference, and each of these is worth a pixel:
+     * - the container is measured from `getBoundingClientRect()` rounded, not from `clientHeight`;
+     * - sizes and offsets are **truncated** (the original ran them through `parseInt`), not rounded;
+     * - `scrollTop` is floored before it is used;
+     * - the thumb offset is clamped so it cannot overhang the end of the rail.
+     */
+    update() {
+        if (!this.initialised)
+            return;
+        const el = this.element;
+        const rect = el.getBoundingClientRect();
+        const containerWidth = Math.round(rect.width);
+        const containerHeight = Math.round(rect.height);
+        const contentWidth = el.scrollWidth;
+        const contentHeight = el.scrollHeight;
+        const roundedScrollTop = Math.floor(el.scrollTop);
+        const activeX = this.options.suppressScrollX !== true && containerWidth < contentWidth;
+        const activeY = this.options.suppressScrollY !== true && containerHeight < contentHeight;
+        el.classList.toggle(CLASS.activeX, activeX);
+        el.classList.toggle(CLASS.activeY, activeY);
+        if (activeX && this.railX && this.thumbX) {
+            const railWidth = containerWidth;
+            const thumbWidth = this.clampThumb(trunc((railWidth * containerWidth) / contentWidth));
+            let left = trunc((el.scrollLeft * (railWidth - thumbWidth)) / (contentWidth - containerWidth));
+            if (left >= railWidth - thumbWidth)
+                left = railWidth - thumbWidth;
+            // The rails follow the scroll offset so they stay pinned to the visible edge: the host is
+            // the scrolling box, so an absolutely-positioned child would otherwise travel with content.
+            this.railX.style.left = `${el.scrollLeft}px`;
+            this.railX.style.bottom = `${-roundedScrollTop}px`;
+            this.railX.style.width = `${railWidth}px`;
+            this.thumbX.style.left = `${left}px`;
+            this.thumbX.style.width = `${thumbWidth}px`;
+        }
+        if (activeY && this.railY && this.thumbY) {
+            const railHeight = containerHeight;
+            const thumbHeight = this.clampThumb(trunc((railHeight * containerHeight) / contentHeight));
+            let top = trunc((roundedScrollTop * (railHeight - thumbHeight)) / (contentHeight - containerHeight));
+            if (top >= railHeight - thumbHeight)
+                top = railHeight - thumbHeight;
+            this.railY.style.top = `${roundedScrollTop}px`;
+            this.railY.style.right = `${-el.scrollLeft}px`;
+            this.railY.style.height = `${railHeight}px`;
+            this.thumbY.style.top = `${top}px`;
+            this.thumbY.style.height = `${thumbHeight}px`;
+        }
+    }
+    /** Kept for parity with the wrapper this replaces; teardown also happens in ngOnDestroy. */
+    destroy() {
+        this.dispose();
+    }
+    isScrollableX() {
+        return this.element.classList.contains(CLASS.activeX);
+    }
+    isScrollableY() {
+        return this.element.classList.contains(CLASS.activeY);
+    }
+    geometry(prefix = 'scroll') {
+        const el = this.element;
+        return {
+            x: el[`${prefix}Left`],
+            y: el[`${prefix}Top`],
+            w: el[`${prefix}Width`],
+            h: el[`${prefix}Height`],
+        };
+    }
+    /** -1 at the start of an axis, 1 at its end, 0 anywhere between. */
+    position(absolute = false) {
+        const el = this.element;
+        if (absolute)
+            return { x: el.scrollLeft, y: el.scrollTop };
+        return {
+            x: reach(el.scrollLeft, el.scrollWidth - el.clientWidth),
+            y: reach(el.scrollTop, el.scrollHeight - el.clientHeight),
+        };
+    }
+    scrollTo(x, y, speed) {
+        if (y == null && speed == null) {
+            this.animateScrolling('scrollTop', x, speed);
+            return;
+        }
+        if (x != null)
+            this.animateScrolling('scrollLeft', x, speed);
+        if (y != null)
+            this.animateScrolling('scrollTop', y, speed);
+    }
+    scrollToX(x, speed) {
+        this.animateScrolling('scrollLeft', x, speed);
+    }
+    scrollToY(y, speed) {
+        this.animateScrolling('scrollTop', y, speed);
+    }
+    scrollToTop(offset = 0, speed) {
+        this.animateScrolling('scrollTop', offset, speed);
+    }
+    scrollToBottom(offset = 0, speed) {
+        const top = this.element.scrollHeight - this.element.clientHeight;
+        this.animateScrolling('scrollTop', top - offset, speed);
+    }
+    scrollToLeft(offset = 0, speed) {
+        this.animateScrolling('scrollLeft', offset, speed);
+    }
+    scrollToRight(offset = 0, speed) {
+        const left = this.element.scrollWidth - this.element.clientWidth;
+        this.animateScrolling('scrollLeft', left - offset, speed);
+    }
+    /**
+     * Bring the first descendant matching `selector` into view.
+     *
+     * `ignoreVisible` skips the scroll when the target already sits inside the viewport less the
+     * offset, so an item that is merely low on screen is not yanked to the top on every change.
+     */
+    scrollToElement(selector, offset = 0, ignoreVisible = false, speed) {
+        const target = this.element.querySelector(selector);
+        if (!target)
+            return;
+        const targetRect = target.getBoundingClientRect();
+        const hostRect = this.element.getBoundingClientRect();
+        if (this.isScrollableX()) {
+            const visible = ignoreVisible && targetRect.right <= hostRect.right - Math.abs(offset);
+            if (!visible) {
+                const position = targetRect.left - hostRect.left + this.element.scrollLeft;
+                this.animateScrolling('scrollLeft', position + offset, speed);
+            }
+        }
+        if (this.isScrollableY()) {
+            const visible = ignoreVisible && targetRect.bottom <= hostRect.bottom - Math.abs(offset);
+            if (!visible) {
+                const position = targetRect.top - hostRect.top + this.element.scrollTop;
+                this.animateScrolling('scrollTop', position + offset, speed);
+            }
+        }
+    }
+    /**
+     * Move one axis to `value`, easing over `speed` ms when one is given.
+     *
+     * The easing bails as soon as the position stops matching what it last wrote, so a user who
+     * grabs the wheel mid-flight takes over instead of fighting the animation.
+     */
+    animateScrolling(axis, value, speed) {
+        this.cancelAnimation();
+        const el = this.element;
+        if (!speed || typeof window === 'undefined') {
+            el[axis] = value;
+            this.update();
+            return;
+        }
+        if (value === el[axis])
+            return;
+        let scrollCount = 0;
+        let previousTimestamp = performance.now();
+        let previousValue = el[axis];
+        const half = (previousValue - value) / 2;
+        const step = (timestamp) => {
+            scrollCount += Math.PI / (speed / (timestamp - previousTimestamp));
+            if (el[axis] !== previousValue) {
+                this.animation = null;
+                return;
+            }
+            if (scrollCount >= Math.PI) {
+                el[axis] = value;
+                this.animation = null;
+                this.update();
+                return;
+            }
+            el[axis] = Math.round(value + half + half * Math.cos(scrollCount));
+            previousValue = el[axis];
+            previousTimestamp = timestamp;
+            this.animation = window.requestAnimationFrame(step);
+        };
+        this.animation = window.requestAnimationFrame(step);
+    }
+    // ---------------------------------------------------------------------------------------------
+    init() {
+        if (this.initialised)
+            return;
+        const el = this.element;
+        el.classList.add(CLASS.host);
+        this.railX = this.buildRail(CLASS.railX, CLASS.thumbX);
+        this.thumbX = this.railX.firstElementChild;
+        this.railY = this.buildRail(CLASS.railY, CLASS.thumbY);
+        this.thumbY = this.railY.firstElementChild;
+        el.appendChild(this.railX);
+        el.appendChild(this.railY);
+        // Scroll and resize fire far too often to be worth a change-detection pass each: nothing here
+        // touches component state, only inline styles on elements the directive owns.
+        this.zone.runOutsideAngular(() => {
+            this.on(el, 'scroll', () => this.onScroll());
+            this.on(el, 'focus', () => el.classList.add(CLASS.focus), true);
+            this.on(el, 'blur', () => el.classList.remove(CLASS.focus), true);
+            this.bindThumbDrag(this.thumbX, this.railX, 'x');
+            this.bindThumbDrag(this.thumbY, this.railY, 'y');
+            if (typeof ResizeObserver !== 'undefined') {
+                this.resizeObserver = new ResizeObserver(() => this.update());
+                this.resizeObserver.observe(el);
+                // Observing the first child catches content growing taller inside a fixed-height host,
+                // which resizing the host alone never reports.
+                if (el.firstElementChild)
+                    this.resizeObserver.observe(el.firstElementChild);
+            }
+            if (typeof MutationObserver !== 'undefined') {
+                this.mutationObserver = new MutationObserver(() => this.update());
+                this.mutationObserver.observe(el, { childList: true, subtree: true, characterData: true });
+            }
+        });
+        this.initialised = true;
+        this.update();
+        this.destroyRef.onDestroy(() => this.dispose());
+    }
+    buildRail(railClass, thumbClass) {
+        const rail = document.createElement('div');
+        rail.className = railClass;
+        const thumb = document.createElement('div');
+        thumb.className = thumbClass;
+        rail.appendChild(thumb);
+        return rail;
+    }
+    onScroll() {
+        this.update();
+        const el = this.element;
+        if (this.isScrollableX()) {
+            el.classList.add(CLASS.scrollingX);
+            if (this.scrollingXTimer)
+                clearTimeout(this.scrollingXTimer);
+            this.scrollingXTimer = setTimeout(() => el.classList.remove(CLASS.scrollingX), SCROLLING_CLASS_LINGER_MS);
+        }
+        if (this.isScrollableY()) {
+            el.classList.add(CLASS.scrollingY);
+            if (this.scrollingYTimer)
+                clearTimeout(this.scrollingYTimer);
+            this.scrollingYTimer = setTimeout(() => el.classList.remove(CLASS.scrollingY), SCROLLING_CLASS_LINGER_MS);
+        }
+    }
+    bindThumbDrag(thumb, rail, axis) {
+        this.on(thumb, 'pointerdown', (event) => {
+            const pointerEvent = event;
+            pointerEvent.stopPropagation();
+            pointerEvent.preventDefault();
+            const el = this.element;
+            rail.classList.add(CLASS.clicking);
+            thumb.setPointerCapture(pointerEvent.pointerId);
+            const startPointer = axis === 'x' ? pointerEvent.clientX : pointerEvent.clientY;
+            const startScroll = axis === 'x' ? el.scrollLeft : el.scrollTop;
+            const railSize = axis === 'x' ? el.clientWidth : el.clientHeight;
+            const thumbSize = axis === 'x' ? thumb.offsetWidth : thumb.offsetHeight;
+            const travel = axis === 'x' ? el.scrollWidth - el.clientWidth : el.scrollHeight - el.clientHeight;
+            const onMove = (moveEvent) => {
+                const delta = (axis === 'x' ? moveEvent.clientX : moveEvent.clientY) - startPointer;
+                const trackable = railSize - thumbSize;
+                if (trackable <= 0)
+                    return;
+                const next = startScroll + (delta * travel) / trackable;
+                if (axis === 'x')
+                    el.scrollLeft = next;
+                else
+                    el.scrollTop = next;
+            };
+            const onUp = (upEvent) => {
+                rail.classList.remove(CLASS.clicking);
+                thumb.releasePointerCapture(upEvent.pointerId);
+                thumb.removeEventListener('pointermove', onMove);
+                thumb.removeEventListener('pointerup', onUp);
+                thumb.removeEventListener('pointercancel', onUp);
+            };
+            thumb.addEventListener('pointermove', onMove);
+            thumb.addEventListener('pointerup', onUp);
+            thumb.addEventListener('pointercancel', onUp);
+        });
+        // A click on the rail itself jumps the thumb to that point, as the original did.
+        this.on(rail, 'pointerdown', (event) => {
+            const pointerEvent = event;
+            if (pointerEvent.target !== rail)
+                return;
+            const el = this.element;
+            const railRect = rail.getBoundingClientRect();
+            const thumbSize = axis === 'x' ? thumb.offsetWidth : thumb.offsetHeight;
+            const offset = axis === 'x'
+                ? pointerEvent.clientX - railRect.left
+                : pointerEvent.clientY - railRect.top;
+            const railSize = axis === 'x' ? railRect.width : railRect.height;
+            const travel = axis === 'x' ? el.scrollWidth - el.clientWidth : el.scrollHeight - el.clientHeight;
+            const trackable = railSize - thumbSize;
+            if (trackable <= 0)
+                return;
+            const next = ((offset - thumbSize / 2) * travel) / trackable;
+            if (axis === 'x')
+                el.scrollLeft = next;
+            else
+                el.scrollTop = next;
+        });
+    }
+    /** Only the configured bounds, and only when set — the same shape the original's clamp had. */
+    clampThumb(size) {
+        const min = this.options.minScrollbarLength;
+        const max = this.options.maxScrollbarLength;
+        let result = size;
+        if (min)
+            result = Math.max(result, min);
+        if (max)
+            result = Math.min(result, max);
+        return result;
+    }
+    on(target, type, handler, capture = false) {
+        target.addEventListener(type, handler, capture);
+        this.teardown.push(() => target.removeEventListener(type, handler, capture));
+    }
+    dispose() {
+        if (!this.initialised)
+            return;
+        this.initialised = false;
+        this.cancelAnimation();
+        for (const off of this.teardown)
+            off();
+        this.teardown = [];
+        this.resizeObserver?.disconnect();
+        this.mutationObserver?.disconnect();
+        this.resizeObserver = undefined;
+        this.mutationObserver = undefined;
+        if (this.scrollingXTimer)
+            clearTimeout(this.scrollingXTimer);
+        if (this.scrollingYTimer)
+            clearTimeout(this.scrollingYTimer);
+        this.railX?.remove();
+        this.railY?.remove();
+        this.railX = this.railY = this.thumbX = this.thumbY = undefined;
+        this.element.classList.remove(CLASS.host, CLASS.activeX, CLASS.activeY, CLASS.scrollingX, CLASS.scrollingY, CLASS.focus);
+    }
+    cancelAnimation() {
+        if (this.animation !== null) {
+            window.cancelAnimationFrame(this.animation);
+            this.animation = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeScrollbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.5", type: NxeScrollbarDirective, isStandalone: true, selector: "[nxeScrollbar]", inputs: { nxeScrollbar: ["nxeScrollbar", "nxeScrollbar", coerceEnabled], nxeScrollbarOptions: "nxeScrollbarOptions" }, exportAs: ["nxeScrollbar"], usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeScrollbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[nxeScrollbar]',
+                    exportAs: 'nxeScrollbar',
+                }]
+        }], propDecorators: { nxeScrollbar: [{
+                type: Input,
+                args: [{ transform: coerceEnabled }]
+            }], nxeScrollbarOptions: [{
+                type: Input
+            }] } });
+/** `<div nxeScrollbar>` sets the empty string; treat that as on, like any boolean attribute. */
+function coerceEnabled(value) {
+    return value !== false && value !== 'false' && value != null;
+}
+/** `parseInt`-style truncation toward zero, with NaN folded to 0 — what the original used. */
+function trunc(value) {
+    return Math.trunc(value) || 0;
+}
+function reach(offset, max) {
+    if (max <= 0)
+        return 0;
+    if (offset <= 0)
+        return -1;
+    if (offset >= max)
+        return 1;
+    return 0;
+}
+
 // @nexterajs/ui/styling — public API.
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NXE_PANE_FLIPPED_CLASS, NXE_WIDGET_CLASS, nxePane, trackPaneFlip };
+export { NXE_PANE_FLIPPED_CLASS, NXE_WIDGET_CLASS, NxeDxCompatService, NxeScrollbarDirective, nxePane, provideNxeDxCompat, trackPaneFlip };
 //# sourceMappingURL=nexterajs-ui-styling.mjs.map