ngx-kit 1.0.0 → 2.0.1

package/fesm2022/{ngx-input-shared.mjs → 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, PLATFORM_ID, Inject, Injectable, inject } from '@angular/core';
+import { EventEmitter, forwardRef, HostListener, ViewChild, Output, Input, ChangeDetectionStrategy, Component, InjectionToken, PLATFORM_ID, Inject, Injectable, inject } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, Validators } from '@angular/forms';
 
 function getOffsetPosition(evt, parent) {
@@ -648,6 +648,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 args: ['document:touchend', ['$event']]
             }] } });
 
+const WINDOW = new InjectionToken('WINDOW', {
+    factory: () => (typeof window !== 'undefined' ? window : null),
+});
+
+function randomStrnig(extraLength = 4, useNumeric = false) {
+    const len = Math.max(0, Math.floor(extraLength));
+    if (len === 0)
+        return '';
+    let charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    if (useNumeric) {
+        charset += '0123456789';
+    }
+    const cryptoObj = typeof globalThis !== 'undefined'
+        ? globalThis.crypto
+        : undefined;
+    const out = new Array(len);
+    if (cryptoObj?.getRandomValues) {
+        const bytes = new Uint8Array(len);
+        cryptoObj.getRandomValues(bytes);
+        for (let i = 0; i < len; i++) {
+            out[i] = charset[bytes[i] % charset.length];
+        }
+    }
+    else {
+        for (let i = 0; i < len; i++) {
+            out[i] = charset[Math.floor(Math.random() * charset.length)];
+        }
+    }
+    return `${Date.now().toString(36)}-${out.join('')}`;
+}
+
 class BrowserService {
     platformId;
     constructor(platformId) {
@@ -674,14 +705,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     args: [PLATFORM_ID]
                 }] }] });
 
-class DialogOverlayRef {
-    componentRef;
+class OverlayRef {
     dialogEl;
     teardownFn;
-    constructor(componentRef, dialogEl, teardownFn) {
-        this.componentRef = componentRef;
+    componentRef;
+    templateRef;
+    constructor(dialogEl, teardownFn, componentRef, templateRef) {
         this.dialogEl = dialogEl;
         this.teardownFn = teardownFn;
+        this.componentRef = componentRef;
+        this.templateRef = templateRef;
     }
     close() {
         this.teardownFn();
@@ -691,128 +724,236 @@ class DialogOverlayRef {
     }
 }
 
-class DialogService {
-    openDialogs = new Map();
-    idCounter = 0;
-    globalKeyDownAdded = false;
-    globalResizeAdded = false;
-    globalClickAdded = false;
-    globalKeyDownListener;
-    globalResizeListener;
-    globalClickListener;
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const DIALOG_OVERLAY_CLASSNAME = 'ngx-ui-overlay';
+class OverlayService {
+    overlayStacks = [];
+    zIndexCounter = 1000;
+    listenersAttached = false;
+    resizeRafPending = false;
     doc = inject(DOCUMENT);
-    constructor() {
-        this.globalKeyDownListener = (e) => {
-            if (e.key === 'Escape') {
-                const lastDialog = this.getLastDialog();
-                if (lastDialog) {
-                    lastDialog.cleanup();
-                }
-            }
-        };
-        this.globalResizeListener = () => {
-            this.repositionAll();
-        };
-        this.globalClickListener = (e) => {
-            this.handleClickOnBackdrop(e);
-        };
-    }
+    abortController = new AbortController();
     ngOnDestroy() {
         this.closeAll();
-    }
-    handleGlobalListeners() {
-        // مطمئن شویم لیسنرها فقط یک بار اضافه شده‌اند
-        if (!this.globalKeyDownAdded) {
-            this.doc.addEventListener('keydown', this.globalKeyDownListener);
-            this.globalKeyDownAdded = true;
-        }
-        if (!this.globalResizeAdded) {
-            window.addEventListener('resize', this.globalResizeListener);
-            this.globalResizeAdded = true;
-        }
-        if (!this.globalClickAdded) {
-            this.doc.addEventListener('click', this.globalClickListener);
-            this.globalClickAdded = true;
-        }
+        this.abortController.abort();
     }
     open(options) {
-        const { anchor, component, viewContainerRef, configure, onClosed } = options;
+        const { anchor, point, component, viewContainerRef, configure, onClosed, placement, alignment, margin, } = options;
         if (!viewContainerRef) {
-            throw new Error('ViewContainerRef is required to render dialog content.');
-        }
-        this.handleGlobalListeners();
-        const id = ++this.idCounter;
-        const dialogElement = this.doc.createElement('dialog');
-        dialogElement.style.position = 'absolute';
-        dialogElement.style.outline = 'none';
-        dialogElement.style.padding = '0';
-        dialogElement.style.margin = '0';
-        dialogElement.style.border = 'none';
-        dialogElement.style.background = 'transparent';
-        dialogElement.style.maxWidth = '100vw';
-        dialogElement.style.maxHeight = '100vh';
-        dialogElement.style.overflow = 'visible';
-        dialogElement.style.zIndex = `${1000 + this.openDialogs.size}`;
-        this.doc.body.appendChild(dialogElement);
+            throw new Error('ViewContainerRef is required to render overlay content.');
+        }
+        this.attachGlobalListeners();
+        const element = this.createDialogElement();
         const componentRef = viewContainerRef.createComponent(component);
         if (componentRef.location.nativeElement) {
-            dialogElement.appendChild(componentRef.location.nativeElement);
-        }
-        // تابع پاک‌سازی اختصاصی برای این دیالوگ
-        const cleanup = () => {
-            if (!this.openDialogs.has(id))
-                return; // جلوگیری از پاک‌سازی مجدد
-            this.openDialogs.delete(id);
-            if (componentRef.location.nativeElement?.parentNode) {
-                componentRef.location.nativeElement.remove();
-            }
-            componentRef.destroy();
-            dialogElement.remove();
-            onClosed?.();
+            element.appendChild(componentRef.location.nativeElement);
+        }
+        const instance = {
+            element,
+            anchor,
+            point,
+            placementConfig: this.resolvePlacementConfig(placement, alignment, margin),
+            componentRef,
+            onClosed,
+            rafId: null,
+            focusTimeoutId: null,
+            cleanup: () => { },
         };
+        instance.cleanup = () => this.destroyInstance(instance);
+        this.overlayStacks.push(instance);
+        element.showModal();
+        const ref = new OverlayRef(element, instance.cleanup, componentRef);
+        configure?.(componentRef.instance, ref);
+        this.scheduleInitialLayout(instance);
+        return ref;
+    }
+    openTemplate(options) {
+        const { anchor, point, template, appRef, configure, onClosed, placement, alignment, margin } = options;
+        this.attachGlobalListeners();
+        const element = this.createDialogElement();
+        const view = template.createEmbeddedView({});
+        appRef.attachView(view);
+        element.append(...view.rootNodes);
         const instance = {
-            id,
+            element,
             anchor,
-            element: dialogElement,
-            componentRef: componentRef,
-            options: options,
-            cleanup,
+            point,
+            placementConfig: this.resolvePlacementConfig(placement, alignment, margin),
+            embeddedView: view,
+            appRef,
+            onClosed,
+            rafId: null,
+            focusTimeoutId: null,
+            cleanup: () => { },
         };
-        this.openDialogs.set(id, instance);
-        dialogElement.showModal();
-        if (configure) {
-            const ref = new DialogOverlayRef(componentRef, dialogElement, cleanup);
-            configure(componentRef.instance, ref);
-        }
-        requestAnimationFrame(() => {
+        instance.cleanup = () => this.destroyInstance(instance);
+        this.overlayStacks.push(instance);
+        element.showModal();
+        const ref = new OverlayRef(element, instance.cleanup, undefined, template);
+        configure?.(instance, ref);
+        this.scheduleInitialLayout(instance);
+        return ref;
+    }
+    closeAll() {
+        // اسنپ‌شات می‌گیریم چون cleanup حین اجرا آرایه‌ی اصلی رو تغییر می‌ده
+        [...this.overlayStacks].forEach((instance) => instance.cleanup());
+    }
+    // ---------------------------------------------------------------------
+    // lifecycle
+    // ---------------------------------------------------------------------
+    resolvePlacementConfig(placement, alignment, margin) {
+        return {
+            placement: placement ?? 'auto',
+            alignment: alignment ?? 'start',
+            margin: margin ?? 8,
+        };
+    }
+    createDialogElement() {
+        const element = this.doc.createElement('dialog');
+        element.className = DIALOG_OVERLAY_CLASSNAME;
+        const style = element.style;
+        style.position = 'absolute';
+        style.outline = 'none';
+        style.padding = '0';
+        style.margin = '0';
+        style.border = 'none';
+        style.background = 'transparent';
+        style.maxWidth = '100vw';
+        style.maxHeight = '100vh';
+        style.overflow = 'visible';
+        style.visibility = 'hidden';
+        // شمارنده‌ی صعودی مستقل از تعداد فعلی دیالوگ‌های باز؛ در نسخه‌ی قبلی
+        // با استفاده از openDialogs.size محاسبه می‌شد که بعد از بستن دیالوگ‌ها
+        // می‌تونست باعث تکرار zIndex بین دو دیالوگ بشه.
+        style.zIndex = `${++this.zIndexCounter}`;
+        this.doc.body.appendChild(element);
+        return element;
+    }
+    scheduleInitialLayout(instance) {
+        instance.rafId = requestAnimationFrame(() => {
+            instance.rafId = null;
             this.positionDialog(instance);
         });
-        setTimeout(() => {
-            const focusable = dialogElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-            if (focusable) {
-                focusable.focus();
-            }
+        instance.focusTimeoutId = setTimeout(() => {
+            instance.focusTimeoutId = null;
+            const focusable = instance.element.querySelector(FOCUSABLE_SELECTOR);
+            focusable?.focus();
         }, 0);
-        const ref = new DialogOverlayRef(componentRef, dialogElement, cleanup);
-        return ref;
     }
+    destroyInstance(instance) {
+        const index = this.overlayStacks.indexOf(instance);
+        if (index === -1)
+            return; // جلوگیری از پاک‌سازی دوباره
+        this.overlayStacks.splice(index, 1);
+        // لغو کارهای زمان‌بندی‌شده‌ای که هنوز اجرا نشدن (نشتی حافظه در نسخه‌ی قبلی)
+        if (instance.rafId !== null)
+            cancelAnimationFrame(instance.rafId);
+        if (instance.focusTimeoutId !== null)
+            clearTimeout(instance.focusTimeoutId);
+        if (instance.componentRef) {
+            instance.componentRef.location.nativeElement?.remove();
+            instance.componentRef.destroy();
+        }
+        if (instance.embeddedView && instance.appRef) {
+            instance.appRef.detachView(instance.embeddedView);
+            instance.embeddedView.destroy();
+        }
+        instance.element.remove();
+        instance.onClosed?.();
+    }
+    // ---------------------------------------------------------------------
+    // global listeners (فقط یک‌بار در کل عمر سرویس attach می‌شن)
+    // ---------------------------------------------------------------------
+    attachGlobalListeners() {
+        if (this.listenersAttached)
+            return;
+        this.listenersAttached = true;
+        const { signal } = this.abortController;
+        this.doc.addEventListener('keydown', this.onGlobalKeyDown, { signal });
+        window.addEventListener('resize', this.onGlobalResize, { signal, passive: true });
+        this.doc.addEventListener('click', this.onGlobalPointerEvent, { signal });
+        this.doc.addEventListener('contextmenu', this.onGlobalPointerEvent, { signal });
+    }
+    onGlobalKeyDown = (e) => {
+        if (e.key !== 'Escape')
+            return;
+        this.getLastDialog()?.cleanup();
+    };
+    onGlobalResize = () => {
+        // چند رویداد resize پشت‌سرهم فقط یک reposition واقعی اجرا می‌کنن
+        if (this.resizeRafPending)
+            return;
+        this.resizeRafPending = true;
+        requestAnimationFrame(() => {
+            this.resizeRafPending = false;
+            this.repositionAll();
+        });
+    };
+    onGlobalPointerEvent = (e) => {
+        this.handleClickOnBackdrop(e);
+    };
+    handleClickOnBackdrop(event) {
+        const lastDialog = this.getLastDialog();
+        if (!lastDialog || !lastDialog.element.open)
+            return;
+        // کلیک باید دقیقاً روی خودِ دیالوگ (بک‌دراپ) باشه، نه محتوای داخلش
+        if (event.target !== lastDialog.element)
+            return;
+        // اگه فرم داخل دیالوگه، با کلیک بیرون بسته نشه
+        if (lastDialog.element.querySelector('form'))
+            return;
+        const rect = lastDialog.element.getBoundingClientRect();
+        const clickWasInsideDialog = rect.top <= event.clientY &&
+            event.clientY <= rect.bottom &&
+            rect.left <= event.clientX &&
+            event.clientX <= rect.right;
+        const anchRect = lastDialog.anchor.getBoundingClientRect();
+        const clickWasInsideAnchor = anchRect.top <= event.clientY &&
+            event.clientY <= anchRect.bottom &&
+            anchRect.left <= event.clientX &&
+            event.clientX <= anchRect.right;
+        if (!clickWasInsideDialog) {
+            if (event.type == 'contextmenu' && lastDialog.point && clickWasInsideAnchor) {
+                event.preventDefault();
+                lastDialog.point = {
+                    x: event.clientX,
+                    y: event.clientY,
+                };
+                this.positionDialog(lastDialog);
+            }
+            else {
+                lastDialog.cleanup();
+            }
+        }
+    }
+    getLastDialog() {
+        return this.overlayStacks[this.overlayStacks.length - 1];
+    }
+    // ---------------------------------------------------------------------
+    // positioning
+    // ---------------------------------------------------------------------
     repositionAll() {
-        Array.from(this.openDialogs.values()).forEach((instance) => {
-            if (instance.anchor && instance.element.isConnected) {
+        this.overlayStacks.forEach((instance) => {
+            if (instance.element.isConnected) {
                 this.positionDialog(instance);
             }
         });
     }
-    positionDialog(dialogInstance) {
-        const anchor = dialogInstance.anchor;
-        const dialog = dialogInstance.element;
-        const { placement, alignment, margin = 8 } = dialogInstance.options;
-        if (!anchor || !dialog)
+    positionDialog(instance) {
+        const { anchor, element: dialog, placementConfig, point } = instance;
+        const { placement, alignment, margin } = placementConfig;
+        if (!dialog.isConnected)
             return;
-        const anchorRect = anchor.getBoundingClientRect();
+        let anchorRect;
+        if (point) {
+            anchorRect = new DOMRect(point.x, point.y, 0, 0);
+        }
+        else {
+            anchorRect = anchor.getBoundingClientRect();
+        }
         const dialogRect = dialog.getBoundingClientRect();
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
+        const vw = Math.min(document.body.clientWidth, window.innerWidth);
+        const vh = Math.min(document.body.clientHeight, window.innerHeight);
         const isRTL = getComputedStyle(this.doc.documentElement).direction === 'rtl';
         let top = 0;
         let left = 'auto';
@@ -820,8 +961,8 @@ class DialogService {
         const spaceBelow = vh - anchorRect.bottom;
         const spaceAbove = anchorRect.top;
         let verticalPos = 'above';
-        //  vertical position
-        if (placement === 'bottom' || (placement === 'auto' && spaceBelow >= dialogRect.height + margin)) {
+        if (placement === 'bottom' ||
+            (placement === 'auto' && spaceBelow >= dialogRect.height + margin)) {
             top = anchorRect.bottom + margin;
             verticalPos = 'above';
             if (top + dialogRect.height > vh - margin) {
@@ -837,13 +978,11 @@ class DialogService {
                 verticalPos = 'above';
             }
         }
-        //  horizontal position
         if (alignment === 'center') {
             left = anchorRect.left + anchorRect.width / 2 - dialogRect.width / 2;
         }
         else if (alignment === 'start') {
             if (isRTL) {
-                left = 'auto';
                 right = vw - anchorRect.right;
             }
             else {
@@ -851,65 +990,31 @@ class DialogService {
             }
         }
         else {
-            // end
-            left = isRTL ? anchorRect.left : anchorRect.right - dialogRect.width;
-        }
-        if (left != 'auto' && left < margin) {
-            left = margin;
-        }
-        if (left != 'auto' && left + dialogRect.width > vw - margin) {
-            left = vw - dialogRect.width - margin;
-        }
-        dialog.className = `tips-${verticalPos}`;
-        dialog.style.top = `${top}px`;
-        dialog.style.left = left != 'auto' ? `${left}px` : left;
-        dialog.style.right = right != 'auto' ? `${right}px` : right;
-        dialog.style.transform = 'none';
-    }
-    getLastDialog() {
-        if (this.openDialogs.size === 0)
-            return undefined;
-        const lastKey = Array.from(this.openDialogs.keys()).pop();
-        return lastKey ? this.openDialogs.get(lastKey) : undefined;
-    }
-    closeAll() {
-        const ids = Array.from(this.openDialogs.keys());
-        ids.forEach((id) => {
-            const instance = this.openDialogs.get(id);
-            instance?.cleanup();
-        });
-    }
-    handleClickOnBackdrop(event) {
-        const target = event.target;
-        const lastDialog = this.getLastDialog();
-        if (!lastDialog)
-            return;
-        // The click target _must_ be the dialog element itself, and not elements underneath or inside.
-        if (target !== lastDialog.element || !lastDialog.element?.open)
-            return;
-        // If the dialog contains a form, do not close the dialog when clicking outside of the dialog
-        if (lastDialog.element.querySelector('form'))
-            return;
-        const rect = lastDialog.element.getBoundingClientRect();
-        const clickWasInsideDialog = rect.top <= event.clientY &&
-            event.clientY <= rect.top + rect.height &&
-            rect.left <= event.clientX &&
-            event.clientX <= rect.left + rect.width;
-        if (!clickWasInsideDialog) {
-            lastDialog.cleanup();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogService, providedIn: 'root' });
+            left = isRTL ? anchorRect.left : anchorRect.right; //- dialogRect.width;
+        }
+        if (left !== 'auto') {
+            left = Math.min(Math.max(left, margin), vw - dialogRect.width - margin);
+        }
+        dialog.className = `${DIALOG_OVERLAY_CLASSNAME} tips-${verticalPos}`;
+        dialog.style.top = `${top + window.scrollY}px`;
+        dialog.style.left = left !== 'auto' ? `${left + window.scrollX}px` : 'auto';
+        dialog.style.right = right !== 'auto' ? `${right + window.scrollX}px` : 'auto';
+        dialog.style.transformOrigin = verticalPos == 'above' ? 'left top' : 'left bottom';
+        // dialog.style.transform = 'none';
+        dialog.style.visibility = 'visible';
+        dialog.style.animation = 'menu-enter 120ms cubic-bezier(0, 0, 0.2, 1)';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OverlayService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BrowserService, DialogOverlayRef, DialogService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, getOffsetPosition };
-//# sourceMappingURL=ngx-input-shared.mjs.map
+export { BrowserService, DIALOG_OVERLAY_CLASSNAME, FOCUSABLE_SELECTOR, OverlayRef, OverlayService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, WINDOW, getOffsetPosition, randomStrnig };
+//# sourceMappingURL=ngx-kit-shared.mjs.map