ngx-kit 4.0.0 → 6.0.0

package/types/ngx-kit-notify.d.ts

@@ -12,6 +12,7 @@ interface NgxNotifyPayload {
     options: NgxNotifyOptions;
     onClose: EventEmitter<INotifyEnd>;
     onFinish: EventEmitter<INotifyEnd>;
+    close: () => void;
 }
 interface INotifyEnd {
     id: string;
@@ -111,7 +112,6 @@ declare class NgxNotificationComponent implements OnInit, OnDestroy {
     onMouseLeave(): void;
     onTap(): void;
     escapeHtml(input?: string): string;
-    ngOnDestroyCleanup(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxNotificationComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxNotificationComponent, "ngx-notification", never, { "payload": { "alias": "payload"; "required": true; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; }; }, { "onClose": "onClose"; "onFinish": "onFinish"; }, never, never, true, never>;
 }
@@ -129,6 +129,7 @@ declare class NgxNotifyService {
     configureContainer(position: NgxNotifyOptions['position'], containerClass: string): void;
     show(message: string, description?: string, type?: NgxNotifyType, options?: NgxNotifyOptions): NgxNotifyPayload;
     private _createAndShow;
+    private close;
     private removeNode;
     private removeEl;
     private _showNextIfPossible;

package/types/ngx-kit-shared.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, EventEmitter, ElementRef, ChangeDetectorRef, InjectionToken, ComponentRef, TemplateRef, Type, ViewContainerRef, ApplicationRef, OnDestroy, EmbeddedViewRef } from '@angular/core';
+import { OnInit, OnDestroy, EventEmitter, ElementRef, ChangeDetectorRef, InjectionToken, ComponentRef, TemplateRef, Type, ViewContainerRef, ApplicationRef, EmbeddedViewRef } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors, FormControl } from '@angular/forms';
 
 interface IValue {
@@ -13,7 +13,7 @@ declare class ValueModel {
     thumb?: HTMLElement;
     color?: string;
 }
-declare class RangeSliderComponent implements OnInit, ControlValueAccessor, Validator {
+declare class RangeSliderComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {
     private changeDetectorRef;
     /**
      * The step value for the slider
@@ -57,8 +57,10 @@ declare class RangeSliderComponent implements OnInit, ControlValueAccessor, Vali
     protected _validatorOnChange: () => void;
     private sliderRect?;
     private thumbRect?;
+    private stopDrag?;
     constructor(changeDetectorRef: ChangeDetectorRef);
     ngOnInit(): void;
+    ngOnDestroy(): void;
     private generateId;
     writeValue(items?: IValue[]): void;
     validate(control: AbstractControl): ValidationErrors | null;
@@ -67,14 +69,12 @@ declare class RangeSliderComponent implements OnInit, ControlValueAccessor, Vali
     registerOnTouched(fn: any): void;
     setDisabledState?(disabled: boolean): void;
     private updateRects;
-    onDrag(ev: MouseEvent | TouchEvent): void;
     onResize(): void;
     dragStart(ev: MouseEvent | TouchEvent, index: number): void;
     addnewRangeOnSliderClick(event: MouseEvent | TouchEvent): void;
     private updateThumbPosition;
     updateAllThumbPositions(): void;
     setValueByPosition(thumb: ValueModel, thumbRec: DOMRect, sliderRec: DOMRect): void;
-    onDragEnd(ev: MouseEvent | TouchEvent): void;
     valueChanged(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RangeSliderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<RangeSliderComponent, "range-slider", never, { "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "background": { "alias": "background"; "required": false; }; "isBgTransparent": { "alias": "isBgTransparent"; "required": false; }; "addNewRangeOnClick": { "alias": "addNewRangeOnClick"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; }, { "change": "change"; "selectedIndexChange": "selectedIndexChange"; }, never, ["*"], true, never>;
@@ -85,7 +85,7 @@ interface IPosition {
     y: number;
 }
 
-declare class SaturationComponent implements ControlValueAccessor {
+declare class SaturationComponent implements ControlValueAccessor, OnDestroy {
     width?: number;
     height?: number;
     color: string;
@@ -108,7 +108,9 @@ declare class SaturationComponent implements ControlValueAccessor {
     protected _validatorOnChange: () => void;
     private saturationRect?;
     private thumbRect?;
+    private stopDrag?;
     constructor();
+    ngOnDestroy(): void;
     private updateRects;
     writeValue(val?: IPosition | null): void;
     validate(control: AbstractControl): ValidationErrors | null;
@@ -118,16 +120,14 @@ declare class SaturationComponent implements ControlValueAccessor {
     setDisabledState?(disabled: boolean): void;
     dragStart(ev: MouseEvent | TouchEvent): void;
     onResize(): void;
-    onDrag(ev: MouseEvent | TouchEvent): void;
     private updatePosition;
-    onDragEnd(ev: MouseEvent | TouchEvent): void;
     setValueByPosition(thumbRec: DOMRect, saturationRec: DOMRect): void;
     valueChanged(value: IPosition): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SaturationComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SaturationComponent, "saturation", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "color": { "alias": "color"; "required": false; }; "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; }, { "change": "change"; }, never, never, true, never>;
 }
 
-declare class SliderComponent implements OnInit, ControlValueAccessor, Validator {
+declare class SliderComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {
     step: number;
     min: number;
     max: number;
@@ -145,8 +145,11 @@ declare class SliderComponent implements OnInit, ControlValueAccessor, Validator
     protected _validatorOnChange: () => void;
     private sliderRect?;
     private thumbRect?;
+    private stopDrag?;
+    private readonly cd;
     constructor();
     ngOnInit(): void;
+    ngOnDestroy(): void;
     private updateRects;
     writeValue(val?: number | string | null): void;
     validate(control: AbstractControl): ValidationErrors | null;
@@ -155,11 +158,9 @@ declare class SliderComponent implements OnInit, ControlValueAccessor, Validator
     registerOnTouched(fn: any): void;
     setDisabledState?(disabled: boolean): void;
     dragStart(ev: MouseEvent | TouchEvent): void;
-    onDrag(ev: MouseEvent | TouchEvent): void;
     onResize(): void;
     private updatePosition;
     setValueByPosition(thumbRec: DOMRect, sliderRec: DOMRect): void;
-    onDragEnd(ev: MouseEvent | TouchEvent): void;
     valueChanged(value: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "slider", never, { "step": { "alias": "step"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "background": { "alias": "background"; "required": false; }; "isBgTransparent": { "alias": "isBgTransparent"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
@@ -172,12 +173,41 @@ declare function getOffsetPosition(evt: MouseEvent | TouchEvent, parent: HTMLEle
     y: number;
 };
 
+/**
+ * تمام کامپوننت‌های قابل‌درگ کتابخانه (saturation، slider، range-slider،
+ * box-shadow) قبلاً یک الگوی تکراری داشتن:
+ *
+ *   @HostListener('document:mousemove', ['$event'])
+ *   @HostListener('document:touchmove', ['$event'])
+ *   onDrag(ev) { if (!this.isDragging) return; ... }
+ *
+ * مشکل: این listenerها برای کل عمر کامپوننت روی `document` باقی می‌مونن —
+ * حتی وقتی اصلاً دراگی در حال انجام نیست. یعنی روی صفحه‌ای با چند تا
+ * color-picker/slider، هر حرکت موس/انگشت روی کل صفحه (نه فقط روی خودِ
+ * اسلایدر) باعث اجرای N تابع (به تعداد اینستنس‌ها) می‌شه که هرکدوم هم چرخه‌ی
+ * زون انگیولار رو تریگر می‌کنن — یک مشکل واقعی پرفورمنس، مخصوصاً در صفحاتی
+ * با چند نمونه هم‌زمان یا حرکت زیاد موس.
+ *
+ * این تابع جایگزین اون الگو می‌شه: listenerها فقط در طول یک دراگِ واقعی
+ * (بین mousedown/touchstart تا mouseup/touchend) روی document اضافه می‌شن و
+ * بلافاصله بعدش پاک می‌شن.
+ *
+ * یه فایده‌ی جانبیِ مهم دیگه هم داره: روی touchmove مقدار `{ passive: false }`
+ * ست می‌شه و preventDefault صدا زده می‌شه، پس در حین درگ کردنِ thumb روی
+ * موبایل، صفحه اسکرول نمی‌خوره (باگی که با @HostListener قبلی وجود داشت،
+ * چون هیچ‌جا preventDefault روی touchmove صدا زده نمی‌شد).
+ */
+interface DragSessionCallbacks {
+    onMove: (ev: MouseEvent | TouchEvent) => void;
+    onEnd?: (ev: MouseEvent | TouchEvent) => void;
+}
+/** با فراخوانی این تابع (مثلاً داخل dragStart) یک نشست‌ درگ شروع می‌شه. */
+declare function startDragSession({ onMove, onEnd }: DragSessionCallbacks): () => void;
+
 declare const WINDOW: InjectionToken<Window | null>;
 
 declare function randomStrnig(extraLength?: number, useNumeric?: boolean): string;
 
-declare function IsRtl(doc: Document): boolean;
-
 declare function makeConfetti(doc: Document, wrap: HTMLElement): void;
 
 declare class BrowserService {
@@ -189,6 +219,31 @@ declare class BrowserService {
     static ɵprov: i0.ɵɵInjectableDeclaration<BrowserService>;
 }
 
+type Direction = 'ltr' | 'rtl';
+/**
+ * جهت صفحه را به‌صورت خودکار و زنده تشخیص می‌دهد — بدون این‌که کاربرِ این
+ * سرویس مجبور باشد چیزی به آن بدهد. هر تغییری در attribute های dir/class
+ * روی <html> یا <body> (چه از طریق Angular، چه با یک تم‌سوییچر خارج از
+ * Angular) بلافاصله signal را آپدیت می‌کند.
+ *
+ * نکته: effect() اینجا جواب نمی‌دهد چون هیچ‌کدام از این مقادیر (attribute
+ * روی DOM) یک Signal نیستند؛ effect فقط به تغییر Signalها reactive است، نه
+ * به تغییرات دلخواه DOM. برای گوش‌دادن به تغییرات DOM باید از MutationObserver
+ * استفاده کرد و مقدار را دستی داخل یک Signal نوشت (که دقیقاً کاری است که
+ * این سرویس انجام می‌دهد).
+ */
+declare class DirectionService {
+    private readonly doc;
+    private readonly destroyRef;
+    private readonly _direction;
+    /** جهت جاری، به‌صورت Signal فقط-خواندنی. */
+    readonly direction: i0.Signal<Direction>;
+    readonly isRtl: i0.Signal<boolean>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<DirectionService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DirectionService>;
+}
+
 declare class OverlayRef<T> {
     private readonly dialogEl;
     private readonly teardownFn;
@@ -231,11 +286,11 @@ declare const FOCUSABLE_SELECTOR = "button, [href], input, select, textarea, [ta
 declare const DIALOG_OVERLAY_CLASSNAME = "ngx-ui-overlay";
 declare class OverlayService implements OnDestroy {
     private readonly overlayStacks;
-    private zIndexCounter;
     private listenersAttached;
     private resizeRafPending;
     private readonly doc;
     private readonly abortController;
+    private readonly directionService;
     ngOnDestroy(): void;
     open<T>(options: OverlayOptions<T>): OverlayRef<T>;
     openTemplate(options: TemplateOptions): OverlayRef<any>;
@@ -276,5 +331,5 @@ interface OverlayInstance {
     cleanup: () => void;
 }
 
-export { BrowserService, DIALOG_OVERLAY_CLASSNAME, FOCUSABLE_SELECTOR, IsRtl, OverlayRef, OverlayService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, WINDOW, getOffsetPosition, makeConfetti, mergeConfig, randomStrnig };
-export type { Alignment, BaseOverlayOptions, IPosition, IValue, OverlayInstance, OverlayOptions, Placement, Point, TemplateOptions };
+export { BrowserService, DIALOG_OVERLAY_CLASSNAME, DirectionService, FOCUSABLE_SELECTOR, OverlayRef, OverlayService, RangeSliderComponent, SaturationComponent, SliderComponent, ValueModel, WINDOW, getOffsetPosition, makeConfetti, mergeConfig, randomStrnig, startDragSession };
+export type { Alignment, BaseOverlayOptions, Direction, DragSessionCallbacks, IPosition, IValue, OverlayInstance, OverlayOptions, Placement, Point, TemplateOptions };

package/types/ngx-kit-time-picker.d.ts

@@ -0,0 +1,150 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, ElementRef } from '@angular/core';
+import { BrowserService } from 'ngx-kit/shared';
+import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+
+declare class NgxTimePickerConfig {
+    cancelButtonText: string;
+    confirmButtonText: string;
+    amText: string;
+    pmText: string;
+    format: '12' | '24';
+    minuteStep: number;
+    autoSwitchToMinute: boolean;
+}
+
+declare type NgxTimePickerMode = 'hour' | 'minute';
+
+declare class NgxInputTimePickerComponent implements ControlValueAccessor, Validator, OnInit {
+    protected readonly browserService: BrowserService;
+    readonly change: _angular_core.OutputEmitterRef<string | null>;
+    readonly cancel: _angular_core.OutputEmitterRef<void>;
+    protected readonly config: NgxTimePickerConfig;
+    isDisabled: boolean;
+    /**
+     * Time value.
+     *
+     * Example:
+     * 14:35
+     */
+    readonly value: _angular_core.ModelSignal<string>;
+    /**
+     * 12h or 24h.
+     */
+    readonly format: _angular_core.InputSignal<"12" | "24">;
+    readonly amOrPm: _angular_core.ModelSignal<"AM" | "PM" | undefined>;
+    /**
+     * Minute step.
+     */
+    readonly minuteStep: _angular_core.InputSignal<number>;
+    /**
+     * Whether the clock is disabled.
+     */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to automatically switch from hour to minute.
+     */
+    readonly autoSwitchToMinute: _angular_core.InputSignal<boolean>;
+    readonly clock: _angular_core.Signal<ElementRef<SVGSVGElement> | undefined>;
+    readonly mode: _angular_core.WritableSignal<NgxTimePickerMode>;
+    private dragging;
+    readonly parsedTime: _angular_core.Signal<{
+        hour: number;
+        minute: number;
+    }>;
+    readonly displayHour: _angular_core.Signal<number>;
+    readonly displayMinute: _angular_core.Signal<number>;
+    readonly hourNumbers: _angular_core.Signal<number[]>;
+    readonly minuteNumbers: _angular_core.Signal<number[]>;
+    readonly hourAngle: _angular_core.Signal<number>;
+    readonly minuteAngle: _angular_core.Signal<number>;
+    readonly currentAngle: _angular_core.Signal<number>;
+    readonly handLength: _angular_core.Signal<58 | 86>;
+    readonly handEnd: _angular_core.Signal<{
+        x: number;
+        y: number;
+    }>;
+    readonly selectedPosition: _angular_core.Signal<{
+        x: number;
+        y: number;
+    }>;
+    protected _onChange: (value: string) => void;
+    protected _onTouched: () => void;
+    protected _validatorOnChange: () => void;
+    constructor();
+    ngOnInit(): void;
+    writeValue(value: string): void;
+    validate(control: AbstractControl): ValidationErrors | null;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    registerOnValidatorChange?(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    startPointer(event: PointerEvent): void;
+    movePointer(event: PointerEvent): void;
+    endPointer(event: PointerEvent): void;
+    selectHour(hour: number): void;
+    selectMinute(minute: number): void;
+    setMode(mode: NgxTimePickerMode): void;
+    private updateFromPointer;
+    private updateHourFromAngle;
+    private updateMinuteFromAngle;
+    private setTime;
+    isSelectedHour(hour: number): boolean;
+    isSelectedMinute(minute: number): boolean;
+    formatHour(hour: number): string;
+    formatMinute(minute: number): string;
+    numberPosition(index: number, total: number, radius?: number): {
+        x: number;
+        y: number;
+    };
+    hourPosition(hour: number, inner?: boolean): {
+        x: number;
+        y: number;
+    };
+    minutePosition(minute: number): {
+        x: number;
+        y: number;
+    };
+    ok(): void;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxInputTimePickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxInputTimePickerComponent, "ngx-time-picker", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "amOrPm": { "alias": "amOrPm"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "autoSwitchToMinute": { "alias": "autoSwitchToMinute"; "required": false; "isSignal": true; }; }, { "change": "change"; "cancel": "cancel"; "value": "valueChange"; "amOrPm": "amOrPmChange"; }, never, never, true, never>;
+}
+
+declare class NgxInputTimePicker implements ControlValueAccessor, Validator {
+    private el;
+    protected readonly config: NgxTimePickerConfig;
+    openOnCLick: _angular_core.InputSignal<boolean>;
+    readonly change: _angular_core.OutputEmitterRef<string | null>;
+    protected readonly value: _angular_core.WritableSignal<string>;
+    readonly format: _angular_core.InputSignal<"12" | "24">;
+    readonly amOrPm: _angular_core.ModelSignal<"AM" | "PM" | undefined>;
+    private pickerRef?;
+    protected _onChange: (value: string | null | undefined) => void;
+    protected _onTouched: () => void;
+    protected _validatorOnChange: () => void;
+    private isDisabled;
+    private readonly overlayService;
+    private readonly viewContainerRef;
+    private readonly renderer;
+    constructor(el: ElementRef<HTMLInputElement>);
+    ngOnDestroy(): void;
+    onClick(ev: Event): void;
+    onInput(event: Event): void;
+    onBlur(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    registerOnValidatorChange?(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    toggle(): void;
+    private destroy;
+    private emitChange;
+    validate(control: AbstractControl): ValidationErrors | null;
+    protected _formatValue(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxInputTimePicker, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxInputTimePicker, "[ngxInputTimePicker]", ["ngxInputTimePicker"], { "openOnCLick": { "alias": "openOnCLick"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "amOrPm": { "alias": "amOrPm"; "required": false; "isSignal": true; }; }, { "change": "change"; "amOrPm": "amOrPmChange"; }, never, never, true, never>;
+}
+
+export { NgxInputTimePicker, NgxInputTimePickerComponent };
+export type { NgxTimePickerMode };