ngx-kit 9.2.4 → 9.3.0

package/core/README.md

@@ -65,29 +65,8 @@ const browser = inject(BrowserService);
 browser.prefersDarkMode; // boolean — read once at service construction time
 ```
 
-## Utilities
 
-### `startDragSession(callbacks)`
 
-Replaces the problematic `@HostListener('document:mousemove', ...)` pattern, which keeps a listener attached to `document` for the entire lifetime of the component — even when nothing is being dragged (a real performance issue on pages with many simultaneous instances). This function only adds a listener for the duration of an actual drag and removes it itself; `touchmove` is handled with `{passive: false}`, so dragging on mobile doesn't also scroll the page.
-
-```ts
-import { startDragSession } from 'ngx-kit/core';
-
-let stop: (() => void) | undefined;
-
-function onPointerDown(ev: MouseEvent | TouchEvent) {
-  stop?.();
-  stop = startDragSession({
-    onMove: (ev) => {
-      /* update position */
-    },
-    onEnd: () => {
-      stop = undefined;
-    },
-  });
-}
-```
 
 > If your component is `OnPush` and uses `startDragSession` (instead of `@HostListener`), make sure to call `ChangeDetectorRef.markForCheck()` inside `onMove`/`onEnd` yourself — unlike `@HostListener`, which automatically marks the view dirty, a manual `addEventListener` does not.
 

package/fesm2022/ngx-kit-core.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
-import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { CommonModule, isPlatformBrowser, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, InjectionToken, PLATFORM_ID, Inject, Injectable, DestroyRef, signal, computed, ApplicationRef, EnvironmentInjector, Injector, createComponent } from '@angular/core';
+import { EventEmitter, inject, DOCUMENT, forwardRef, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, ChangeDetectorRef, InjectionToken, PLATFORM_ID, Inject, Injectable, DestroyRef, signal, computed, ApplicationRef, EnvironmentInjector, Injector, createComponent } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, Validators } from '@angular/forms';
 
 function getOffsetPosition(evt, parent) {
@@ -25,7 +25,7 @@ function getOffsetPosition(evt, parent) {
 }
 
 /** با فراخوانی این تابع (مثلاً داخل dragStart) یک نشست‌ درگ شروع می‌شه. */
-function startDragSession({ onMove, onEnd }) {
+function startDragSession({ doc, onMove, onEnd }) {
     const handleMove = (ev) => {
         if (ev.type === 'touchmove') {
             // جلوگیری از اسکرول شدن صفحه هم‌زمان با درگ کردن روی موبایل/تاچ
@@ -38,17 +38,17 @@ function startDragSession({ onMove, onEnd }) {
         onEnd?.(ev);
     };
     const stop = () => {
-        document.removeEventListener('mousemove', handleMove);
-        document.removeEventListener('touchmove', handleMove);
-        document.removeEventListener('mouseup', handleEnd);
-        document.removeEventListener('touchend', handleEnd);
-        document.removeEventListener('touchcancel', handleEnd);
+        doc.removeEventListener('mousemove', handleMove);
+        doc.removeEventListener('touchmove', handleMove);
+        doc.removeEventListener('mouseup', handleEnd);
+        doc.removeEventListener('touchend', handleEnd);
+        doc.removeEventListener('touchcancel', handleEnd);
     };
-    document.addEventListener('mousemove', handleMove);
-    document.addEventListener('touchmove', handleMove, { passive: false });
-    document.addEventListener('mouseup', handleEnd);
-    document.addEventListener('touchend', handleEnd);
-    document.addEventListener('touchcancel', handleEnd);
+    doc.addEventListener('mousemove', handleMove);
+    doc.addEventListener('touchmove', handleMove, { passive: false });
+    doc.addEventListener('mouseup', handleEnd);
+    doc.addEventListener('touchend', handleEnd);
+    doc.addEventListener('touchcancel', handleEnd);
     // تابع stop برگردونده می‌شه تا هم بشه دستی صداش زد (مثلاً در ngOnDestroy،
     // اگه کامپوننت درست وسط یه درگ نابود بشه) و هم به‌صورت خودکار روی
     // mouseup/touchend صدا زده می‌شه.
@@ -107,6 +107,7 @@ class RangeSliderComponent {
     sliderRect;
     thumbRect;
     stopDrag;
+    doc = inject(DOCUMENT);
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
     }
@@ -180,6 +181,7 @@ class RangeSliderComponent {
         this.selectedIndexChange.emit(this.selectedIndex);
         this.stopDrag?.();
         this.stopDrag = startDragSession({
+            doc: this.doc,
             onMove: (moveEv) => this.updateThumbPosition(moveEv),
             onEnd: () => {
                 this.isDragging = false;
@@ -333,6 +335,7 @@ class SaturationComponent {
     saturationRect;
     thumbRect;
     stopDrag;
+    doc = inject(DOCUMENT);
     constructor() { }
     ngOnDestroy() {
         // اگه کامپوننت درست وسط یه درگ نابود بشه (مثلاً پیکر بسته بشه)، باید
@@ -390,6 +393,7 @@ class SaturationComponent {
         this.updatePosition(ev);
         this.stopDrag?.();
         this.stopDrag = startDragSession({
+            doc: this.doc,
             onMove: (moveEv) => this.updatePosition(moveEv),
             onEnd: () => {
                 this.isDragging = false;
@@ -515,6 +519,7 @@ class SliderComponent {
     thumbRect;
     stopDrag;
     cd = inject(ChangeDetectorRef);
+    doc = inject(DOCUMENT);
     constructor() { }
     ngOnInit() {
         this.myControl.setValidators([Validators.min(this.min), Validators.max(this.max)]);
@@ -572,6 +577,7 @@ class SliderComponent {
         this.updatePosition(ev);
         this.stopDrag?.();
         this.stopDrag = startDragSession({
+            doc: this.doc,
             onMove: (moveEv) => this.updatePosition(moveEv),
             onEnd: () => {
                 this.isDragging = false;
@@ -1146,7 +1152,7 @@ function resolveDirection(doc) {
  * این سرویس انجام می‌دهد).
  */
 class DirectionService {
-    doc = inject(DOCUMENT);
+    doc = inject(DOCUMENT$1);
     destroyRef = inject(DestroyRef);
     _direction = signal(resolveDirection(this.doc), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_direction" }] : /* istanbul ignore next */ []));
@@ -1209,7 +1215,7 @@ const DIALOG_OVERLAY_CLASSNAME = 'ngx-ui-overlay';
 const OVERLAY_HOST_CLASSNAME = 'ngx-ui-overlay-host';
 const BASE_Z_INDEX = 1000;
 class OverlayService {
-    document = inject(DOCUMENT);
+    document = inject(DOCUMENT$1);
     directionService = inject(DirectionService);
     platformId = inject(PLATFORM_ID);
     applicationRef = inject(ApplicationRef);