ngx-kit 5.0.0 → 6.0.0

package/fesm2022/ngx-kit-shared.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, InjectionToken, PLATFORM_ID, Inject, Injectable, inject, DestroyRef, signal, computed } from '@angular/core';
+import { EventEmitter, forwardRef, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, inject, ChangeDetectorRef, InjectionToken, PLATFORM_ID, Inject, Injectable, DestroyRef, signal, computed } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, Validators } from '@angular/forms';
 
 function getOffsetPosition(evt, parent) {
@@ -24,6 +24,37 @@ function getOffsetPosition(evt, parent) {
     return position;
 }
 
+/** با فراخوانی این تابع (مثلاً داخل dragStart) یک نشست‌ درگ شروع می‌شه. */
+function startDragSession({ onMove, onEnd }) {
+    const handleMove = (ev) => {
+        if (ev.type === 'touchmove') {
+            // جلوگیری از اسکرول شدن صفحه هم‌زمان با درگ کردن روی موبایل/تاچ
+            ev.preventDefault();
+        }
+        onMove(ev);
+    };
+    const handleEnd = (ev) => {
+        stop();
+        onEnd?.(ev);
+    };
+    const stop = () => {
+        document.removeEventListener('mousemove', handleMove);
+        document.removeEventListener('touchmove', handleMove);
+        document.removeEventListener('mouseup', handleEnd);
+        document.removeEventListener('touchend', handleEnd);
+        document.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);
+    // تابع stop برگردونده می‌شه تا هم بشه دستی صداش زد (مثلاً در ngOnDestroy،
+    // اگه کامپوننت درست وسط یه درگ نابود بشه) و هم به‌صورت خودکار روی
+    // mouseup/touchend صدا زده می‌شه.
+    return stop;
+}
+
 class ValueModel {
     id;
     value;
@@ -75,10 +106,14 @@ class RangeSliderComponent {
     _validatorOnChange = () => { };
     sliderRect;
     thumbRect;
+    stopDrag;
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
     }
     ngOnInit() { }
+    ngOnDestroy() {
+        this.stopDrag?.();
+    }
     generateId() {
         let id = 'ngx-thumb-' + Math.random().toString(36).substring(2, 9);
         if (this.values.findIndex((x) => x.id == id) >= 0) {
@@ -132,11 +167,6 @@ class RangeSliderComponent {
             this.thumbRect = this.thumb.nativeElement.getBoundingClientRect();
         }
     }
-    onDrag(ev) {
-        if (!this.isDragging)
-            return;
-        this.updateThumbPosition(ev);
-    }
     onResize() {
         this.writeValue(this.values);
     }
@@ -148,6 +178,15 @@ class RangeSliderComponent {
         this.updateRects();
         this.updateThumbPosition(ev);
         this.selectedIndexChange.emit(this.selectedIndex);
+        this.stopDrag?.();
+        this.stopDrag = startDragSession({
+            onMove: (moveEv) => this.updateThumbPosition(moveEv),
+            onEnd: () => {
+                this.isDragging = false;
+                this.stopDrag = undefined;
+                this.changeDetectorRef.markForCheck();
+            },
+        });
     }
     addnewRangeOnSliderClick(event) {
         if (!this.addNewRangeOnClick)
@@ -185,6 +224,7 @@ class RangeSliderComponent {
             thumb.x = position.x;
         }
         this.setValueByPosition(thumb, thumbRec, sliderRec);
+        this.changeDetectorRef.markForCheck();
     }
     updateAllThumbPositions() {
         // wait to add thumbs
@@ -193,7 +233,8 @@ class RangeSliderComponent {
             const sliderRec = this.sliderRect;
             const thumbRec = this.thumbRect;
             for (let item of this.values) {
-                item.x = ((item.value - this.min) * (sliderRec.width - thumbRec.width)) / (this.max - this.min);
+                item.x =
+                    ((item.value - this.min) * (sliderRec.width - thumbRec.width)) / (this.max - this.min);
             }
             this.changeDetectorRef.detectChanges();
         });
@@ -209,17 +250,13 @@ class RangeSliderComponent {
             this.valueChanged();
         }
     }
-    onDragEnd(ev) {
-        this.isDragging = false;
-        // this.selectedIndex = undefined;
-    }
     valueChanged() {
         const v = this.values; // this.values.map(({ x, thumb, ...rest }) => ({ ...rest }));
         this._onChange(v);
         this.change.emit(v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RangeSliderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RangeSliderComponent, isStandalone: true, selector: "range-slider", inputs: { step: "step", min: "min", max: "max", background: "background", isBgTransparent: "isBgTransparent", addNewRangeOnClick: "addNewRangeOnClick", selectedIndex: "selectedIndex" }, outputs: { change: "change", selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "document:mousemove": "onDrag($event)", "document:touchmove": "onDrag($event)", "window:resize": "onResize()", "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: RangeSliderComponent, isStandalone: true, selector: "range-slider", inputs: { step: "step", min: "min", max: "max", background: "background", isBgTransparent: "isBgTransparent", addNewRangeOnClick: "addNewRangeOnClick", selectedIndex: "selectedIndex" }, outputs: { change: "change", selectedIndexChange: "selectedIndexChange" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RangeSliderComponent),
@@ -230,7 +267,7 @@ class RangeSliderComponent {
                 useExisting: forwardRef(() => RangeSliderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: "<div class=\"slider-container\">\r\n  <ng-content></ng-content>\r\n  <div\r\n    #slider\r\n    class=\"slider\"\r\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\r\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\r\n    [class.bg-transparent]=\"isBgTransparent\"\r\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\r\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\r\n    @for (item of values; track $index; let i = $index) {\r\n      <div\r\n        class=\"thumb\"\r\n        [class.is-active]=\"selectedIndex == i\"\r\n        #thumb\r\n        [style.left.px]=\"item.x\"\r\n        [style.background]=\"item.color\"\r\n        [title]=\"item.value\"\r\n        (mousedown)=\"dragStart($event, i)\"\r\n      (touchstart)=\"dragStart($event, i)\"></div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- {{ selectedIndex }}\r\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\r\n\r\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px rgb(89,0,255) solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true }], ngImport: i0, template: "<div class=\"slider-container\">\n  <ng-content></ng-content>\n  <div\n    #slider\n    class=\"slider\"\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\n    [class.bg-transparent]=\"isBgTransparent\"\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\n    @for (item of values; track $index; let i = $index) {\n      <div\n        class=\"thumb\"\n        [class.is-active]=\"selectedIndex == i\"\n        #thumb\n        [style.left.px]=\"item.x\"\n        [style.background]=\"item.color\"\n        [title]=\"item.value\"\n        (mousedown)=\"dragStart($event, i)\"\n        (touchstart)=\"dragStart($event, i)\"></div>\n    }\n  </div>\n</div>\n\n<!-- {{ selectedIndex }}\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px rgb(89,0,255) solid}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: RangeSliderComponent, decorators: [{
             type: Component,
@@ -245,7 +282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => RangeSliderComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"slider-container\">\r\n  <ng-content></ng-content>\r\n  <div\r\n    #slider\r\n    class=\"slider\"\r\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\r\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\r\n    [class.bg-transparent]=\"isBgTransparent\"\r\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\r\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\r\n    @for (item of values; track $index; let i = $index) {\r\n      <div\r\n        class=\"thumb\"\r\n        [class.is-active]=\"selectedIndex == i\"\r\n        #thumb\r\n        [style.left.px]=\"item.x\"\r\n        [style.background]=\"item.color\"\r\n        [title]=\"item.value\"\r\n        (mousedown)=\"dragStart($event, i)\"\r\n      (touchstart)=\"dragStart($event, i)\"></div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- {{ selectedIndex }}\r\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\r\n\r\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px rgb(89,0,255) solid}\n"] }]
+                    ], template: "<div class=\"slider-container\">\n  <ng-content></ng-content>\n  <div\n    #slider\n    class=\"slider\"\n    [class.add-range-cursor]=\"addNewRangeOnClick\"\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\n    [class.bg-transparent]=\"isBgTransparent\"\n    (mousedown)=\"addnewRangeOnSliderClick($event)\"\n    (touchstart)=\"addnewRangeOnSliderClick($event)\">\n    @for (item of values; track $index; let i = $index) {\n      <div\n        class=\"thumb\"\n        [class.is-active]=\"selectedIndex == i\"\n        #thumb\n        [style.left.px]=\"item.x\"\n        [style.background]=\"item.color\"\n        [title]=\"item.value\"\n        (mousedown)=\"dragStart($event, i)\"\n        (touchstart)=\"dragStart($event, i)\"></div>\n    }\n  </div>\n</div>\n\n<!-- {{ selectedIndex }}\n<pre dir=\"ltr\" style=\"text-align: left\">{{ values | json }}</pre> -->\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .slider.add-range-cursor{cursor:copy}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}.slider-container .thumb.is-active{outline:1px rgb(89,0,255) solid}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { step: [{
                 type: Input
             }], min: [{
@@ -270,21 +307,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             }], thumb: [{
                 type: ViewChild,
                 args: ['thumb', { static: false }]
-            }], onDrag: [{
-                type: HostListener,
-                args: ['document:mousemove', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:touchmove', ['$event']]
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
-            }], onDragEnd: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:touchend', ['$event']]
             }] } });
 
 class SaturationComponent {
@@ -307,7 +332,15 @@ class SaturationComponent {
     _validatorOnChange = () => { };
     saturationRect;
     thumbRect;
+    stopDrag;
     constructor() { }
+    ngOnDestroy() {
+        // اگه کامپوننت درست وسط یه درگ نابود بشه (مثلاً پیکر بسته بشه)، باید
+        // listenerهای document رو دستی پاک کنیم؛ برخلاف @HostListener که
+        // انگیولار خودش موقع destroy پاکش می‌کرد، این‌جا چون addEventListener
+        // دستیه، خودمون مسئول پاک‌سازی‌شیم.
+        this.stopDrag?.();
+    }
     updateRects() {
         this.saturationRect = this.saturation.nativeElement.getBoundingClientRect();
         this.thumbRect = this.thumb.nativeElement.getBoundingClientRect();
@@ -320,8 +353,12 @@ class SaturationComponent {
         this.updateRects();
         const saturationRec = this.saturationRect;
         const thumbRec = this.thumbRect;
-        this.x = ((value.x - this.min.x) * (saturationRec.width - thumbRec.width / 2)) / (this.max.x - this.min.x);
-        this.y = ((value.y - this.min.y) * (saturationRec.height - thumbRec.height / 2)) / (this.max.y - this.min.y);
+        this.x =
+            ((value.x - this.min.x) * (saturationRec.width - thumbRec.width / 2)) /
+                (this.max.x - this.min.x);
+        this.y =
+            ((value.y - this.min.y) * (saturationRec.height - thumbRec.height / 2)) /
+                (this.max.y - this.min.y);
         if (val !== value) {
             this.valueChanged(value);
         }
@@ -351,15 +388,18 @@ class SaturationComponent {
         this.isDragging = true;
         this.updateRects();
         this.updatePosition(ev);
+        this.stopDrag?.();
+        this.stopDrag = startDragSession({
+            onMove: (moveEv) => this.updatePosition(moveEv),
+            onEnd: () => {
+                this.isDragging = false;
+                this.stopDrag = undefined;
+            },
+        });
     }
     onResize() {
         this.writeValue(this.myControl.value);
     }
-    onDrag(ev) {
-        if (!this.isDragging)
-            return;
-        this.updatePosition(ev);
-    }
     updatePosition(ev) {
         if (!this.isDragging)
             return;
@@ -390,9 +430,6 @@ class SaturationComponent {
         //  this.y = this.y - thumbRec.height / 2;
         this.setValueByPosition(thumbRec, saturationRec);
     }
-    onDragEnd(ev) {
-        this.isDragging = false;
-    }
     setValueByPosition(thumbRec, saturationRec) {
         const percentageX = this.x / (saturationRec.width - thumbRec.width);
         let newValueX = this.min.x + percentageX * (this.max.x - this.min.x);
@@ -404,7 +441,9 @@ class SaturationComponent {
         newValueY = Math.round(newValueY / this.step) * this.step;
         let valueY = Math.min(Math.max(newValueY, this.min.y), this.max.y);
         const newValue = { x: valueX, y: valueY };
-        if (!this.myControl.value || this.myControl.value.x !== valueX || this.myControl.value.y !== valueY) {
+        if (!this.myControl.value ||
+            this.myControl.value.x !== valueX ||
+            this.myControl.value.y !== valueY) {
             this.valueChanged(newValue);
         }
     }
@@ -414,13 +453,13 @@ class SaturationComponent {
         this.change.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SaturationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: SaturationComponent, isStandalone: true, selector: "saturation", inputs: { width: "width", height: "height", color: "color", step: "step", min: "min", max: "max" }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onResize()", "document:mousemove": "onDrag($event)", "document:touchmove": "onDrag($event)", "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: SaturationComponent, isStandalone: true, selector: "saturation", inputs: { width: "width", height: "height", color: "color", step: "step", min: "min", max: "max" }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SaturationComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "saturation", first: true, predicate: ["saturation"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], ngImport: i0, template: "<div\r\n  class=\"saturation-container\"\r\n  [style.width.px]=\"width\"\r\n  [style.height.px]=\"height\"\r\n  (mousedown)=\"dragStart($event)\"\r\n  (touchstart)=\"dragStart($event)\">\r\n  <div class=\"saturation\" #saturation>\r\n    <div class=\"s-bg\" [style.background]=\"color\"></div>\r\n    <div class=\"s-white\"></div>\r\n    <div class=\"s-black\"></div>\r\n  </div>\r\n  <div class=\"thumb\" #thumb [style.left.px]=\"x\" [style.top.px]=\"y\"></div>\r\n</div>\r\n", styles: [".saturation-container{position:relative;width:100%;height:200px}.saturation-container .thumb{border:3px #000000 solid;box-shadow:inset 0 0 0 2px #fff;width:12px;height:12px;display:block;border-radius:10px;position:absolute;pointer-events:none;cursor:pointer}.saturation{position:absolute;inset:6px;border-radius:4px;overflow:hidden}.saturation .s-white,.saturation .s-black,.saturation .s-bg{position:absolute;inset:0}.saturation .s-white{background:linear-gradient(to right,#fff,#fff0)}.saturation .s-black{background:linear-gradient(to bottom,#0000,#000)}\n"] });
+        ], viewQueries: [{ propertyName: "saturation", first: true, predicate: ["saturation"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], ngImport: i0, template: "<div\n  class=\"saturation-container\"\n  [style.width.px]=\"width\"\n  [style.height.px]=\"height\"\n  (mousedown)=\"dragStart($event)\"\n  (touchstart)=\"dragStart($event)\">\n  <div class=\"saturation\" #saturation>\n    <div class=\"s-bg\" [style.background]=\"color\"></div>\n    <div class=\"s-white\"></div>\n    <div class=\"s-black\"></div>\n  </div>\n  <div class=\"thumb\" #thumb [style.left.px]=\"x\" [style.top.px]=\"y\"></div>\n</div>\n", styles: [".saturation-container{position:relative;width:100%;height:200px}.saturation-container .thumb{border:3px #000000 solid;box-shadow:inset 0 0 0 2px #fff;width:12px;height:12px;display:block;border-radius:10px;position:absolute;pointer-events:none;cursor:pointer}.saturation{position:absolute;inset:6px;border-radius:4px;overflow:hidden}.saturation .s-white,.saturation .s-black,.saturation .s-bg{position:absolute;inset:0}.saturation .s-white{background:linear-gradient(to right,#fff,#fff0)}.saturation .s-black{background:linear-gradient(to bottom,#0000,#000)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SaturationComponent, decorators: [{
             type: Component,
@@ -430,7 +469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => SaturationComponent),
                             multi: true,
                         },
-                    ], template: "<div\r\n  class=\"saturation-container\"\r\n  [style.width.px]=\"width\"\r\n  [style.height.px]=\"height\"\r\n  (mousedown)=\"dragStart($event)\"\r\n  (touchstart)=\"dragStart($event)\">\r\n  <div class=\"saturation\" #saturation>\r\n    <div class=\"s-bg\" [style.background]=\"color\"></div>\r\n    <div class=\"s-white\"></div>\r\n    <div class=\"s-black\"></div>\r\n  </div>\r\n  <div class=\"thumb\" #thumb [style.left.px]=\"x\" [style.top.px]=\"y\"></div>\r\n</div>\r\n", styles: [".saturation-container{position:relative;width:100%;height:200px}.saturation-container .thumb{border:3px #000000 solid;box-shadow:inset 0 0 0 2px #fff;width:12px;height:12px;display:block;border-radius:10px;position:absolute;pointer-events:none;cursor:pointer}.saturation{position:absolute;inset:6px;border-radius:4px;overflow:hidden}.saturation .s-white,.saturation .s-black,.saturation .s-bg{position:absolute;inset:0}.saturation .s-white{background:linear-gradient(to right,#fff,#fff0)}.saturation .s-black{background:linear-gradient(to bottom,#0000,#000)}\n"] }]
+                    ], template: "<div\n  class=\"saturation-container\"\n  [style.width.px]=\"width\"\n  [style.height.px]=\"height\"\n  (mousedown)=\"dragStart($event)\"\n  (touchstart)=\"dragStart($event)\">\n  <div class=\"saturation\" #saturation>\n    <div class=\"s-bg\" [style.background]=\"color\"></div>\n    <div class=\"s-white\"></div>\n    <div class=\"s-black\"></div>\n  </div>\n  <div class=\"thumb\" #thumb [style.left.px]=\"x\" [style.top.px]=\"y\"></div>\n</div>\n", styles: [".saturation-container{position:relative;width:100%;height:200px}.saturation-container .thumb{border:3px #000000 solid;box-shadow:inset 0 0 0 2px #fff;width:12px;height:12px;display:block;border-radius:10px;position:absolute;pointer-events:none;cursor:pointer}.saturation{position:absolute;inset:6px;border-radius:4px;overflow:hidden}.saturation .s-white,.saturation .s-black,.saturation .s-bg{position:absolute;inset:0}.saturation .s-white{background:linear-gradient(to right,#fff,#fff0)}.saturation .s-black{background:linear-gradient(to bottom,#0000,#000)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { width: [{
                 type: Input
             }], height: [{
@@ -454,18 +493,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
-            }], onDrag: [{
-                type: HostListener,
-                args: ['document:mousemove', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:touchmove', ['$event']]
-            }], onDragEnd: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:touchend', ['$event']]
             }] } });
 
 class SliderComponent {
@@ -486,10 +513,15 @@ class SliderComponent {
     _validatorOnChange = () => { };
     sliderRect;
     thumbRect;
+    stopDrag;
+    cd = inject(ChangeDetectorRef);
     constructor() { }
     ngOnInit() {
         this.myControl.setValidators([Validators.min(this.min), Validators.max(this.max)]);
     }
+    ngOnDestroy() {
+        this.stopDrag?.();
+    }
     updateRects() {
         this.sliderRect = this.slider.nativeElement.getBoundingClientRect();
         this.thumbRect = this.thumb.nativeElement.getBoundingClientRect();
@@ -538,11 +570,15 @@ class SliderComponent {
         this.isDragging = true;
         this.updateRects();
         this.updatePosition(ev);
-    }
-    onDrag(ev) {
-        if (!this.isDragging)
-            return;
-        this.updatePosition(ev);
+        this.stopDrag?.();
+        this.stopDrag = startDragSession({
+            onMove: (moveEv) => this.updatePosition(moveEv),
+            onEnd: () => {
+                this.isDragging = false;
+                this.stopDrag = undefined;
+                this.cd.markForCheck();
+            },
+        });
     }
     onResize() {
         this.writeValue(this.myControl.value);
@@ -566,6 +602,9 @@ class SliderComponent {
             this.x = position.x;
         }
         this.setValueByPosition(thumbRec, sliderRec);
+        // OnPush + addEventListener دستی (به‌جای HostListener) یعنی خودمون باید
+        // view رو dirty کنیم، وگرنه thumb حین درگ روی صفحه آپدیت نمی‌شه.
+        this.cd.markForCheck();
     }
     setValueByPosition(thumbRec, sliderRec) {
         const percentage = this.x / (sliderRec.width - thumbRec.width);
@@ -577,16 +616,13 @@ class SliderComponent {
             this.valueChanged(value);
         }
     }
-    onDragEnd(ev) {
-        this.isDragging = false;
-    }
     valueChanged(value) {
         this.myControl.setValue(value, { emitEvent: false });
         this._onChange(value);
         this.change.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: SliderComponent, isStandalone: true, selector: "slider", inputs: { step: "step", min: "min", max: "max", background: "background", isBgTransparent: "isBgTransparent" }, outputs: { change: "change" }, host: { listeners: { "document:mousemove": "onDrag($event)", "document:touchmove": "onDrag($event)", "window:resize": "onResize()", "document:mouseup": "onDragEnd($event)", "document:touchend": "onDragEnd($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: SliderComponent, isStandalone: true, selector: "slider", inputs: { step: "step", min: "min", max: "max", background: "background", isBgTransparent: "isBgTransparent" }, outputs: { change: "change" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SliderComponent),
@@ -597,7 +633,7 @@ class SliderComponent {
                 useExisting: forwardRef(() => SliderComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"slider-container\">\r\n  <ng-content></ng-content>\r\n  <div\r\n    #slider\r\n    class=\"slider\"\r\n    (mousedown)=\"dragStart($event)\"\r\n    (touchstart)=\"dragStart($event)\"\r\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\r\n    [class.bg-transparent]=\"isBgTransparent\">\r\n    <div class=\"thumb\" #thumb [style.left.px]=\"x\" [title]=\"myControl.value\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "thumb", first: true, predicate: ["thumb"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"slider-container\">\n  <ng-content></ng-content>\n  <div\n    #slider\n    class=\"slider\"\n    (mousedown)=\"dragStart($event)\"\n    (touchstart)=\"dragStart($event)\"\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\n    [class.bg-transparent]=\"isBgTransparent\">\n    <div class=\"thumb\" #thumb [style.left.px]=\"x\" [title]=\"myControl.value\"></div>\n  </div>\n</div>\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
@@ -612,7 +648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"slider-container\">\r\n  <ng-content></ng-content>\r\n  <div\r\n    #slider\r\n    class=\"slider\"\r\n    (mousedown)=\"dragStart($event)\"\r\n    (touchstart)=\"dragStart($event)\"\r\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\r\n    [class.bg-transparent]=\"isBgTransparent\">\r\n    <div class=\"thumb\" #thumb [style.left.px]=\"x\" [title]=\"myControl.value\"></div>\r\n  </div>\r\n</div>\r\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}\n"] }]
+                    ], template: "<div class=\"slider-container\">\n  <ng-content></ng-content>\n  <div\n    #slider\n    class=\"slider\"\n    (mousedown)=\"dragStart($event)\"\n    (touchstart)=\"dragStart($event)\"\n    [ngStyle]=\"{ '--ngx-slider-bg': background }\"\n    [class.bg-transparent]=\"isBgTransparent\">\n    <div class=\"thumb\" #thumb [style.left.px]=\"x\" [title]=\"myControl.value\"></div>\n  </div>\n</div>\n", styles: [".slider-container{max-width:100%;padding:1px 0}.slider-container .slider{position:relative;box-shadow:inset #00000013 0 0 0 1px;border-radius:10px;height:12px;width:100%;background:var(--ngx-slider-bg, rgb(140, 51, 250));margin:10px 0}.slider-container .slider.bg-transparent{background:transparent}.slider-container .slider.bg-transparent:before,.slider-container .slider.bg-transparent:after{position:absolute;inset:1px;border-radius:9px}.slider-container .slider.bg-transparent:before{content:\" \";background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.slider-container .slider.bg-transparent:after{content:\" \";background:var(--ngx-slider-bg)}.slider-container .thumb{box-shadow:#00000026 0 0 0 1px,#0000000d 0 10px 10px -5px,inset #fff 0 0 0 6px;height:var(--ngx-thumb-size, 30px);width:var(--ngx-thumb-size, 30px);display:block;border-radius:100%;top:calc(6px - var(--ngx-thumb-size, 30px) / 2);position:absolute;cursor:grab;z-index:100}\n"] }]
         }], ctorParameters: () => [], propDecorators: { step: [{
                 type: Input
             }], min: [{
@@ -631,21 +667,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             }], thumb: [{
                 type: ViewChild,
                 args: ['thumb', { static: true }]
-            }], onDrag: [{
-                type: HostListener,
-                args: ['document:mousemove', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:touchmove', ['$event']]
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
-            }], onDragEnd: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:touchend', ['$event']]
             }] } });
 
 function isPlainObject(value) {
@@ -832,7 +856,6 @@ const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:
 const DIALOG_OVERLAY_CLASSNAME = 'ngx-ui-overlay';
 class OverlayService {
     overlayStacks = [];
-    zIndexCounter = 1000;
     listenersAttached = false;
     resizeRafPending = false;
     doc = inject(DOCUMENT);
@@ -927,10 +950,6 @@ class OverlayService {
         style.maxHeight = '100vh';
         style.overflow = 'visible';
         style.visibility = 'hidden';
-        // شمارنده‌ی صعودی مستقل از تعداد فعلی دیالوگ‌های باز؛ در نسخه‌ی قبلی
-        // با استفاده از openDialogs.size محاسبه می‌شد که بعد از بستن دیالوگ‌ها
-        // می‌تونست باعث تکرار zIndex بین دو دیالوگ بشه.
-        style.zIndex = `${++this.zIndexCounter}`;
         this.doc.body.appendChild(element);
         return element;
     }
@@ -963,6 +982,21 @@ class OverlayService {
             instance.appRef.detachView(instance.embeddedView);
             instance.embeddedView.destroy();
         }
+        // قبل از remove()، دیالوگ رو با متد استاندارد close() می‌بندیم؛ این کار دو
+        // فایده داره که با remove() ساده به دست نمی‌اومدن:
+        // ۱) فوکوس به‌صورت خودکار به همون المنتی که قبل از باز شدن دیالوگ فوکوس
+        //    داشت برمی‌گرده (رفتار استاندارد close() روی <dialog>) — با remove()
+        //    ساده این اتفاق نمی‌افته و فوکوس معمولاً روی body گم می‌شه.
+        // ۲) رویداد 'close' استاندارد شلیک می‌شه، برای کدی که ممکنه به اون گوش بده.
+        // در try/catch گذاشتیمش چون در محیط تست (jsdom) این متدها mock هستن و ممکنه
+        // رفتار متفاوتی داشته باشن.
+        try {
+            if (instance.element.open)
+                instance.element.close();
+        }
+        catch {
+            /* noop */
+        }
         instance.element.remove();
         instance.onClosed?.();
     }
@@ -1094,8 +1128,17 @@ class OverlayService {
                 left = anchorRect.left;
             }
         }
-        else {
-            left = isRTL ? anchorRect.left : anchorRect.right; //- dialogRect.width;
+        else if (alignment === 'end') {
+            // انتهای دیالوگ باید با انتهای anchor یکی باشه؛ با استفاده از پراپرتی
+            // CSS «right» (به‌جای کم‌کردن دستیِ عرض از «left») این کار درست و مستقل
+            // از این‌که عرض دیالوگ چقدره انجام می‌شه (قبلاً این خط باگ داشت و دیالوگ
+            // رو بعد از anchor می‌ذاشت، نه هم‌تراز با لبه‌ی انتهاییِ آن).
+            if (isRTL) {
+                left = anchorRect.left;
+            }
+            else {
+                right = vw - anchorRect.right;
+            }
         }
         if (left !== 'auto') {
             left = Math.min(Math.max(left, margin), vw - dialogRect.width - margin);
@@ -1127,5 +1170,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BrowserService, DIALOG_OVERLAY_CLASSNAME, DirectionService, FOCUSABLE_SELECTOR, OverlayRef, OverlayService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, WINDOW, getOffsetPosition, makeConfetti, mergeConfig, randomStrnig };
+export { BrowserService, DIALOG_OVERLAY_CLASSNAME, DirectionService, FOCUSABLE_SELECTOR, OverlayRef, OverlayService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, WINDOW, getOffsetPosition, makeConfetti, mergeConfig, randomStrnig, startDragSession };
 //# sourceMappingURL=ngx-kit-shared.mjs.map