ngx-kit 7.1.0 → 7.3.0

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { TemplateRef, InjectionToken, Type, EventEmitter, ElementRef, OnInit, Provider, ViewContainerRef, Renderer2 } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
 import * as ngx_kit_date_picker from 'ngx-kit/date-picker';
-import { OverlayService } from 'ngx-kit/shared';
+import { OverlayService } from 'ngx-kit/core';
 
 declare class NgxDatePickerConfig {
     previousButtonTemplate?: TemplateRef<any>;
@@ -28,6 +28,17 @@ interface CalendarDate {
     date?: Date;
 }
 
+declare const DATE_ADAPTERS: InjectionToken<DateAdapterRegistration[]>;
+interface DateAdapterRegistration {
+    locale: string;
+    useClass: Type<IDateAdapter>;
+}
+declare const DEFAULT_DATE_ADAPTERS: readonly DateAdapterRegistration[];
+declare function getLocals(): string[];
+type DateFormatPreset = 'full' | 'long' | 'medium' | 'short';
+type DateFormat = string;
+type FormatType = DateFormatPreset | DateFormat;
+
 interface IDateAdapter {
     get longMonths(): string[];
     get narrowDays(): string[];
@@ -73,19 +84,11 @@ interface IDateAdapter {
      */
     lastDateofLastMonth(year: number, month: number): number;
     getDate(date: CalendarDate): Date;
-    formatDate(date: CalendarDate, format: string): string | null;
+    formatDate(date: CalendarDate, format: FormatType): string | null;
     getStartOf(date: Date | null, t: DatePickerView): Date | null;
     getLastOf(date: Date | null, t: DatePickerView): Date | null;
 }
 
-declare const DATE_ADAPTERS: InjectionToken<DateAdapterRegistration[]>;
-interface DateAdapterRegistration {
-    locale: string;
-    useClass: Type<IDateAdapter>;
-}
-declare const DEFAULT_DATE_ADAPTERS: readonly DateAdapterRegistration[];
-declare function getLocals(): string[];
-
 declare class DateAdapterRegistry {
     adapters: DateAdapterRegistration[];
     resolve(locale: string): ngx_kit_date_picker.IDateAdapter;
@@ -109,7 +112,7 @@ declare class NgxInputDatePicker implements ControlValueAccessor, Validator {
     /**
      * display format in input
      */
-    displayFormat: string;
+    displayFormat: FormatType;
     private min;
     /** The minimum valid date. */
     set setMin(value: Date | null | undefined);
@@ -558,4 +561,4 @@ declare class NgxInputDateRangePicker implements ControlValueAccessor, Validator
 }
 
 export { DATE_ADAPTERS, DEFAULT_DATE_ADAPTERS, DateModel, DateViewDay, DateViewMonth, DateViewWeek, DateViewYear, NgxCalendarComponent, NgxDatePickerConfig, NgxDateRangePickerComponent, NgxInputDatePicker, NgxInputDatePickerComponent, NgxInputDateRangePicker, createDateRange, getLocals, isCompleteDateRange, isDateInPreviewRange, isDateInRange, normalizeDateRange, provideDateAdapters };
-export type { CalendarDate, CalendarDayColumn, CalendarEventChange, CalendarEventInteractionType, CalendarMonthEventSegment, CalendarTimedEvent, DateAdapterRegistration, IDateAdapter, MsEventViewer, MsEvents, NgxDateRange };
+export type { CalendarDate, CalendarDayColumn, CalendarEventChange, CalendarEventInteractionType, CalendarMonthEventSegment, CalendarTimedEvent, DateAdapterRegistration, DateFormat, DateFormatPreset, FormatType, IDateAdapter, MsEventViewer, MsEvents, NgxDateRange };

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

@@ -1,140 +1,241 @@
-import * as i0 from '@angular/core';
-import { Injector, ElementRef, OnInit, AfterViewInit, OnDestroy, Type, ComponentRef, ApplicationRef, EnvironmentInjector, Renderer2, InjectionToken } from '@angular/core';
-import * as rxjs from 'rxjs';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, Injector, EnvironmentProviders, Type, InjectionToken } from '@angular/core';
+import * as ngx_kit_dialog from 'ngx-kit/dialog';
 import { Observable } from 'rxjs';
-import * as i5 from '@angular/common';
+import { OverlayRef } from 'ngx-kit/core';
+import * as i1 from 'ngx-kit/drag-resize';
 
+type NgxDialogFooterAlign = 'start' | 'end' | 'center' | 'space-between' | 'space-around';
+declare class NgxDialogFooter implements OnInit, OnDestroy {
+    readonly align: _angular_core.InputSignal<NgxDialogFooterAlign>;
+    private readonly el;
+    private readonly dialogRef;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDialogFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDialogFooter, "ngx-dialog-footer,[ngxDialogFooter]", ["ngxDialogFooter"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type NgxDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+interface NgxDialogHeaderConfig {
+    enable?: boolean;
+    title?: string;
+    showCloseButton?: boolean;
+    showMaximizeButton?: boolean;
+}
+interface NgxDialogFooterConfig {
+    enable?: boolean;
+    /** Text for the auto-generated close button. Default: 'Close'. */
+    closeText?: string;
+    align?: NgxDialogFooterAlign;
+}
+/**
+ * BREAKING CHANGE from the previous version of this config:
+ * - `allowCloseOnOutsideClick` -> `closeOnOutsideClick` (naming now matches
+ *   `ngx-kit/overlay`'s options, which this service is built directly on).
+ * - `header`/`footer` are now actually wired up (previously declared but
+ *   unused) - set `enable: true` to get an automatic header/footer without
+ *   having to place the `ngxDialogHeader`/`ngxDialogFooter` directives
+ *   yourself inside the content component.
+ */
 declare class NgxDialogConfig<DataType = any> {
-    /**
-     * pass data to dialog
-     */
-    data?: DataType | any;
-    /** close dialog on outside click
-     * - default false */
-    allowCloseOnOutsideClick?: boolean;
-    /**
-     * container class
-     * - You can separate the list of classes with a space
-     * - for example:"`my class one two three ...`"
-     *
-     * TODO: must set with public config setter
-     */
-    containerClass?: string | undefined;
-    header?: {
-        enable?: true;
-        title?: '';
-        showCloseButton?: true;
-    };
-    footer?: {
-        enable?: true;
-    };
+    /** Data made available to the content component (and to `ngx-dialog-panel`
+     * itself) via the `DIALOG_DATA` injection token. */
+    data?: DataType;
+    /** Named size preset - sets sensible min/max width bounds. Combine with
+     * `width`/`maxWidth`/... for full manual control. */
+    size?: NgxDialogSize;
     width?: string;
     minWidth?: string;
     maxWidth?: string;
     height?: string;
     minHeight?: string;
     maxHeight?: string;
-    /** parent injector */
+    /** Extra class(es) on the dialog panel (the `ngx-dialog-panel` host). */
+    panelClass?: string | string[];
+    /** Extra class(es) on the backdrop element behind the panel. */
+    backdropClass?: string | string[];
+    header?: NgxDialogHeaderConfig;
+    footer?: NgxDialogFooterConfig;
+    /** Close when clicking outside the panel. Default: false (modal by default). */
+    closeOnOutsideClick?: boolean;
+    /** Close on Escape. Default: true. */
+    closeOnEscape?: boolean;
+    /** Shorthand for `closeOnOutsideClick: false, closeOnEscape: false` - the
+     * dialog can then only be closed programmatically (e.g. via its own
+     * buttons calling `dialogRef.close()`). */
+    disableClose?: boolean;
+    /** Synchronous guard consulted before Escape/outside-click would close the
+     * dialog - return `false` to block it (e.g. unsaved changes). Does not
+     * affect a programmatic `dialogRef.close()` call. */
+    beforeClose?: () => boolean;
+    /** Prevent the page behind the dialog from scrolling while it's open. Default: true. */
+    lockBodyScroll?: boolean;
+    /** Move focus into the dialog on open. Default: true. */
+    autoFocus?: boolean;
+    /** Restore focus to the previously focused element on close. Default: true. */
+    restoreFocus?: boolean;
+    /** Render via the native Popover API when supported. Default: true. */
+    usePopover?: boolean;
+    role?: 'dialog' | 'alertdialog';
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    /** Entry animation for the panel. Default: 'zoom'. */
+    animation?: 'zoom' | 'fade' | 'slide-up' | 'none';
+    /** Parent injector for the content component (and `ngx-dialog-panel`
+     * itself). Defaults to the root injector. */
     injector?: Injector;
-    constructor();
+    constructor(init?: Partial<NgxDialogConfig<DataType>>);
 }
 
-declare class NgxDialogRef {
-    dialog?: ElementRef<HTMLElement>;
-    header?: ElementRef<HTMLElement>;
-    footer?: ElementRef<HTMLElement>;
-    body?: ElementRef<HTMLElement>;
+declare function provideNgxDialog(config?: NgxDialogConfig): EnvironmentProviders;
+
+declare class NgxDialogRef<R = any> {
+    readonly id: string;
+    /** true from the moment `close()` is called, even before teardown finishes. */
+    readonly closing: _angular_core.WritableSignal<boolean>;
+    /** true once the dialog has been fully removed from the DOM. */
+    readonly closed: _angular_core.WritableSignal<boolean>;
     private readonly _afterClosed;
-    afterClosed: Observable<any>;
-    id?: string;
-    close(result?: any): void;
+    /** Emits the result exactly once, after the dialog has been fully torn down. */
+    readonly afterClosed: Observable<R | undefined>;
+    /** @internal set by the layout directives; read by NgxDialogBody to size itself. */
+    readonly headerEl: _angular_core.WritableSignal<HTMLElement | null>;
+    /** @internal */
+    readonly footerEl: _angular_core.WritableSignal<HTMLElement | null>;
+    /** @internal */
+    readonly bodyEl: _angular_core.WritableSignal<HTMLElement | null>;
+    /** @internal the dialog panel's own host element. */
+    readonly panelEl: _angular_core.WritableSignal<HTMLElement | null>;
+    /** Optional synchronous guard - return `false` to prevent Escape/outside-click from closing. */
+    beforeClose?: () => boolean;
+    private overlayRef?;
+    private result;
+    /** @internal used by NgxDialogService right after creating the overlay. */
+    _attachOverlayRef(ref: OverlayRef<unknown>): void;
+    /** @internal used by the header/footer/body directives and the panel component. */
+    _setHeaderElement(el: HTMLElement | null): void;
+    /** @internal */
+    _setFooterElement(el: HTMLElement | null): void;
+    /** @internal */
+    _setBodyElement(el: HTMLElement | null): void;
+    /** @internal */
+    _setPanelElement(el: HTMLElement | null): void;
+    /** Closes the dialog and emits `result` on `afterClosed` once torn down. Idempotent. */
+    close(result?: R): void;
+    /** @internal called by NgxDialogService's `onClosed` callback once the overlay is fully torn down. */
+    _finalizeClose(): void;
 }
 
-declare class NgxDialogComponent implements OnInit, AfterViewInit, OnDestroy {
-    config?: NgxDialogConfig;
-    component: Type<any>;
-    private readonly _onClose;
-    onClose: rxjs.Observable<void>;
-    ngxDialog?: ElementRef<HTMLElement>;
-    _dialogRef: NgxDialogRef;
-    private cd;
+/**
+ * The dialog "panel" shell. It no longer owns the backdrop, centering,
+ * focus trap, Escape handling or outside-click handling - all of that now
+ * lives in `OverlayService`, which this component is rendered inside of.
+ * This is intentionally a thin, fully signal-driven shell: no
+ * `AfterViewInit`, no manual `ChangeDetectorRef.detectChanges()`, no
+ * imperative style writes. Angular schedules change detection automatically
+ * whenever a signal read from the template changes, including in zoneless
+ * apps.
+ */
+declare class NgxDialogComponent {
+    protected readonly dialogRef: NgxDialogRef<any>;
+    protected readonly config: ngx_kit_dialog.NgxDialogConfig<any>;
+    protected readonly content: _angular_core.Type<any>;
+    protected readonly sizeClass: _angular_core.Signal<string>;
     constructor();
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    onOverlayClicked(evt: MouseEvent): void;
-    onDialogClicked(evt: MouseEvent): void;
-    close(): void;
-    setStyle(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxDialogComponent, "ng-component", never, {}, {}, never, never, false, never>;
-}
-
-declare class NgxOverlayService {
-    private appRef;
-    private injector;
-    private envInjector;
-    dialogComponentRefs: ComponentRef<NgxDialogComponent>[];
-    _defaultOptions: NgxDialogConfig | undefined;
-    constructor(appRef: ApplicationRef, injector: Injector, envInjector: EnvironmentInjector);
-    open(component: Type<any>, config?: NgxDialogConfig): NgxDialogRef;
-    private _open;
-    private removeDialogComponentFromBody;
-    private appendDialogComponentToBody;
-    closeAll(): void;
-    private get getDialogId();
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxOverlayService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<NgxOverlayService>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxDialogComponent, "ngx-dialog-panel", never, {}, {}, never, never, true, never>;
 }
 
-declare class NgxDialogHeaderDirective implements OnInit {
-    _el: ElementRef<HTMLElement>;
-    private _document;
-    showCloseButton: boolean;
-    private _dialogRef;
-    constructor(_el: ElementRef<HTMLElement>, _document: Document);
+declare class NgxDialogHeader implements OnInit {
+    private config;
+    readonly showCloseButton: _angular_core.InputSignal<boolean>;
+    readonly showMaximizeButton: _angular_core.InputSignal<boolean>;
+    private readonly el;
+    private readonly document;
+    private readonly dialogRef;
+    private readonly drag;
+    private isMaximized;
     ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDialogHeaderDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDialogHeaderDirective, "ngx-dialog-header,[ngxDialogHeader]", ["ngxDialogHeader"], { "showCloseButton": { "alias": "showCloseButton"; "required": false; }; }, {}, never, never, false, never>;
+    private fullScreen;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDialogHeader, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDialogHeader, "ngx-dialog-header,[ngxDialogHeader]", ["ngxDialogHeader"], { "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "showMaximizeButton": { "alias": "showMaximizeButton"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.NgxDraggable; inputs: {}; outputs: {}; }]>;
 }
 
-declare class NgxDialogFooterDirective implements OnInit {
-    _el: ElementRef<HTMLElement>;
-    align: 'start' | 'end' | 'space-between' | 'center' | 'space-around';
-    private _dialogRef;
-    constructor(_el: ElementRef<HTMLElement>);
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDialogFooterDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDialogFooterDirective, "ngx-dialog-footer,[ngxDialogFooter]", ["ngxDialogFooter"], { "align": { "alias": "align"; "required": false; }; }, {}, never, never, false, never>;
+/**
+ * Why this can't be pure CSS flexbox: the header/body/footer elements are
+ * *grandchildren* of the dialog panel (panel -> `*ngComponentOutlet`'s host
+ * element -> header/body/footer), not direct children, because the content
+ * component that hosts them is arbitrary and we don't control its own host
+ * styling. `display:flex;flex-direction:column` on the panel therefore can't
+ * size the body against the header/footer through that extra layer, so we
+ * measure and set an explicit `max-height` instead, driven by a
+ * `ResizeObserver` on the panel (not a `window:resize` listener, so it also
+ * reacts to the dialog itself changing size, e.g. via `config.size`).
+ */
+declare class NgxDialogBody {
+    private readonly el;
+    private readonly renderer;
+    private readonly dialogRef;
+    private readonly destroyRef;
+    constructor();
+    private recomputeHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDialogBody, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxDialogBody, "ngx-dialog-body,[ngxDialogBody]", ["ngxDialogBody"], {}, {}, never, never, true, never>;
 }
 
-declare class NgxDialogBodyDirective implements AfterViewInit {
-    _el: ElementRef<HTMLElement>;
-    private _renderer;
-    height?: number;
-    private _dialogRef;
-    constructor(_el: ElementRef<HTMLElement>, _renderer: Renderer2);
-    ngAfterViewInit(): void;
-    onWindowResize(ev?: Event): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDialogBodyDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgxDialogBodyDirective, "ngx-dialog-body,[ngxDialogBody]", ["ngxDialogBody"], {}, {}, never, never, false, never>;
+declare class NgxDialogModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDialogModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NgxDialogModule, never, [typeof NgxDialogComponent, typeof NgxDialogHeader, typeof NgxDialogFooter, typeof NgxDialogBody], [typeof NgxDialogComponent, typeof NgxDialogHeader, typeof NgxDialogFooter, typeof NgxDialogBody]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgxDialogModule>;
 }
 
-declare class NgxDialogModule {
-    private readonly platformId;
-    constructor(parentModule: NgxDialogModule | null, service: NgxOverlayService);
-    static ɵfac: i0.ɵɵFactoryDeclaration<NgxDialogModule, [{ optional: true; skipSelf: true; }, null]>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<NgxDialogModule, [typeof NgxDialogComponent, typeof NgxDialogHeaderDirective, typeof NgxDialogFooterDirective, typeof NgxDialogBodyDirective], [typeof i5.CommonModule], [typeof NgxDialogComponent, typeof NgxDialogHeaderDirective, typeof NgxDialogFooterDirective, typeof NgxDialogBodyDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<NgxDialogModule>;
+declare class NgxDialogService {
+    private readonly overlay;
+    private readonly injector;
+    private readonly _openRefs;
+    /** Every currently open dialog, oldest first. */
+    readonly openDialogs: _angular_core.Signal<NgxDialogRef<any>[]>;
+    /** How many dialogs are currently open. */
+    readonly openCount: _angular_core.Signal<number>;
+    readonly defaultConfig: NgxDialogConfig<any>;
+    /**
+     * Opens `content` inside a dialog panel and returns a ref you can use to
+     * close it and read the result back (`afterClosed`).
+     */
+    open<R = any, DataType = any>(content: Type<any>, config?: Partial<NgxDialogConfig<DataType>>): NgxDialogRef<R>;
+    /** Closes every currently open dialog (ignores `disableClose`/guards - use sparingly, e.g. on logout). */
+    closeAll(): void;
+    private applySizing;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxDialogService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NgxDialogService>;
 }
 
+/**
+ * Static convenience API over `NgxDialogService`, so you can call
+ * `Dialog.open(...)` from anywhere without injecting the service manually.
+ *
+ * SSR note: the instance backing this static class is process-wide, not
+ * per-request, so it is deliberately left unset on the server (see
+ * `provideNgxDialog()`). Inject `NgxDialogService` directly in SSR code paths.
+ */
 declare class Dialog {
     private static serviceInstance;
-    static _setService(svc: NgxOverlayService): void;
-    static open<DataType>(component: Type<any>, config?: NgxDialogConfig<DataType>): NgxDialogRef;
+    /** @internal set by `provideNgxDialog()`'s environment initializer. */
+    static _setService(svc: NgxDialogService): void;
+    private static get service();
+    static open<R = any, DataType = any>(component: Type<any>, config?: Partial<NgxDialogConfig<DataType>>): NgxDialogRef<R>;
+    static closeAll(): void;
 }
 
 declare const DIALOG_DATA: InjectionToken<any>;
-declare const DIALOG_REF: InjectionToken<NgxDialogRef>;
+declare const DIALOG_REF: InjectionToken<NgxDialogRef<any>>;
+/** The resolved config for the dialog currently being rendered. */
+declare const NGX_DIALOG_DEFAULT_CONFIG: NgxDialogConfig<any>;
+declare const NGX_DIALOG_CONFIG: InjectionToken<NgxDialogConfig<any>>;
+/** The arbitrary content component passed to `open()`, projected via `*ngComponentOutlet`. */
+declare const DIALOG_CONTENT: InjectionToken<Type<any>>;
 
-export { DIALOG_DATA, DIALOG_REF, Dialog, NgxDialogBodyDirective, NgxDialogComponent, NgxDialogConfig, NgxDialogFooterDirective, NgxDialogHeaderDirective, NgxDialogModule };
+export { DIALOG_CONTENT, DIALOG_DATA, DIALOG_REF, Dialog, NGX_DIALOG_CONFIG, NGX_DIALOG_DEFAULT_CONFIG, NgxDialogBody, NgxDialogComponent, NgxDialogConfig, NgxDialogFooter, NgxDialogHeader, NgxDialogModule, NgxDialogService, provideNgxDialog };
+export type { NgxDialogFooterAlign, NgxDialogFooterConfig, NgxDialogHeaderConfig, NgxDialogSize };