ngx-kit 8.4.1 → 9.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-kit",
-  "version": "8.4.1",
+  "version": "9.0.0",
   "description": "Angular input components",
   "author": "Mohammadreza Samani <mr.samani1368@gmail.com>",
   "license": "MIT",
@@ -13,7 +13,43 @@
     "url": "https://github.com/mr-samani/ngx-kit/issues"
   },
   "keywords": [
-    "angular"
+    "angular",
+    "i18n",
+    "translate",
+    "signals",
+    "lazy",
+    "scopes",
+    "input-color",
+    "color-picker",
+    "gradient-picker",
+    "select-angle",
+    "date-picker",
+    "calendar",
+    "file",
+    "drop-zone",
+    "image-viewer",
+    "draggable",
+    "resizable",
+    "kanban-view",
+    "drag-drop",
+    "shadow",
+    "message",
+    "notify",
+    "alert",
+    "dialog",
+    "modal",
+    "time-picker",
+    "tooltip",
+    "data-table",
+    "table",
+    "pagination",
+    "drop-zone",
+    "image-editor",
+    "media-control",
+    "media-player",
+    "audio-player",
+    "infinit-scroll",
+    "virtual-scroll"
   ],
   "peerDependencies": {
     "@angular/common": ">=22.0.0",
@@ -23,6 +59,9 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
+  "bin": {
+    "ngx-lazy-i18n-extract": "./lazy-i18n/bin/extract.mjs"
+  },
   "module": "fesm2022/ngx-kit.mjs",
   "typings": "types/ngx-kit.d.ts",
   "exports": {
@@ -93,6 +132,10 @@
       "types": "./types/ngx-kit-infinite-scroll.d.ts",
       "default": "./fesm2022/ngx-kit-infinite-scroll.mjs"
     },
+    "./lazy-i18n": {
+      "types": "./types/ngx-kit-lazy-i18n.d.ts",
+      "default": "./fesm2022/ngx-kit-lazy-i18n.mjs"
+    },
     "./media-control": {
       "types": "./types/ngx-kit-media-control.d.ts",
       "default": "./fesm2022/ngx-kit-media-control.mjs"

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

@@ -390,8 +390,6 @@ interface BaseOverlayOptions<T = any> {
     autoFocus?: boolean;
     /** Restore focus to the previously focused element when the overlay closes. Default: true. */
     restoreFocus?: boolean;
-    /** Prevent the page behind the overlay from scrolling while it's open. Default: false. */
-    lockBodyScroll?: boolean;
     /** Extra class(es) applied to the backdrop element. */
     backdropClass?: string | string[];
     /** Extra class(es) applied to the overlay panel element. */
@@ -436,7 +434,6 @@ declare class OverlayService {
     private readonly overlayStack;
     private globalListenersAttached;
     private layoutRaf;
-    private bodyScrollLockCount;
     private previousBodyOverflow;
     private previousBodyPaddingRight;
     private get isBrowser();
@@ -449,23 +446,20 @@ declare class OverlayService {
     private createTemplateInstance;
     private pushInstance;
     private createHostElement;
-    private createBackdropElement;
     private createOverlayElement;
     private addClasses;
     private renderHost;
     private destroyInstance;
+    private observeOverlayResize;
     private resolveUsePopover;
     private showHostPopover;
     private hideHostPopover;
     private supportsPopover;
-    private lockBodyScroll;
-    private unlockBodyScroll;
     private attachGlobalListeners;
     private detachGlobalListeners;
     private readonly onDocumentKeydown;
     private readonly onDocumentClick;
     private readonly onDocumentContextMenu;
-    private readonly onDocumentScroll;
     private readonly onWindowResize;
     private scheduleReposition;
     private scheduleInitialLayout;

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnInit, OnDestroy, Injector, EnvironmentProviders, EnvironmentInjector, Type, InjectionToken } from '@angular/core';
+import { OnInit, OnDestroy, Injector, EnvironmentProviders, EnvironmentInjector, InjectionToken, Type } from '@angular/core';
 import * as ngx_kit_dialog from 'ngx-kit/dialog';
 import { Observable } from 'rxjs';
 import { OverlayRef } from 'ngx-kit/core';
@@ -73,8 +73,6 @@ declare class NgxDialogConfig<DataType = any> {
      * 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. */
@@ -169,24 +167,11 @@ declare class NgxDialogHeader implements OnInit {
     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: {}; }]>;
 }
 
-/**
- * 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>;
 }
@@ -197,6 +182,13 @@ declare class NgxDialogModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgxDialogModule>;
 }
 
+declare const DIALOG_DATA: InjectionToken<any>;
+declare const DIALOG_REF: InjectionToken<NgxDialogRef<any>>;
+/** The resolved config for the dialog currently being rendered. */
+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>>;
+
 declare class NgxDialogService {
     private readonly overlay;
     private readonly injector;
@@ -219,30 +211,5 @@ declare class NgxDialogService {
     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;
-    private static readonly openRefs;
-    /** @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<any>>;
-/** The resolved config for the dialog currently being rendered. */
-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_CONTENT, DIALOG_DATA, DIALOG_REF, Dialog, NGX_DIALOG_CONFIG, NgxDialogBody, NgxDialogComponent, NgxDialogConfig, NgxDialogFooter, NgxDialogHeader, NgxDialogModule, NgxDialogService, provideNgxDialog };
+export { DIALOG_CONTENT, DIALOG_DATA, DIALOG_REF, NGX_DIALOG_CONFIG, NgxDialogBody, NgxDialogComponent, NgxDialogConfig, NgxDialogFooter, NgxDialogHeader, NgxDialogModule, NgxDialogService, provideNgxDialog };
 export type { NgxDialogFooterAlign, NgxDialogFooterConfig, NgxDialogHeaderConfig, NgxDialogSize };

package/types/ngx-kit-lazy-i18n.d.ts

@@ -0,0 +1,213 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Type, PipeTransform, Signal, EnvironmentProviders } from '@angular/core';
+import { Observable } from 'rxjs';
+import { CanActivateChildFn } from '@angular/router';
+
+/** A (possibly nested) translation file as returned by the server. */
+interface Dictionary {
+    [key: string]: string | number | boolean | null | Dictionary | Array<unknown>;
+}
+type Params = Record<string, unknown>;
+type TranslateFn = (key: string, params?: Params) => string;
+type MissingHandler = (key: string, lang: string) => string;
+type Transpiler = (value: string, params: Params | undefined, lang: string) => string;
+interface I18nLoader {
+    /** `scope === undefined` means the global file. */
+    load(lang: string, scope?: string): Observable<Dictionary> | Promise<Dictionary>;
+}
+declare class I18nConfig {
+    /** All supported languages. */
+    langs: string[];
+    defaultLang: string;
+    /** Looked up (in order) when a key is empty/missing in the active language. */
+    fallbackLangs?: string[];
+    /** Default `'key'` (returns the key itself). */
+    missing?: 'key' | 'empty' | MissingHandler;
+    /** Log each missing key once. Default: `isDevMode()`. */
+    warnMissing?: boolean;
+    /** Replace the default `{{ name }}` interpolation (ICU, plurals, ...). */
+    transpile?: Transpiler;
+    /** Custom loader class (must be `@Injectable({providedIn:'root'})` or constructible without args). Default: HTTP. */
+    loader?: Type<I18nLoader>;
+    /** Default HTTP loader: base URL. Default `'/i18n'` -> `/i18n/fa`, `/i18n/setting/fa`. */
+    baseUrl?: string;
+    /** Default HTTP loader: file extension appended to the URL, e.g. `'.json'`. Default `'.json'`. */
+    fileExtension?: string;
+    /** Default HTTP loader: full control over the URL. */
+    url?: (lang: string, scope?: string) => string;
+    /** Retries per failed request. Default `1`. */
+    retries?: number;
+    /** localStorage key used to remember the language. `null` disables. Default `'lazy-i18n.lang'`. */
+    storageKey?: string | null;
+    /** Pick the initial language from `navigator.languages` when nothing is stored. Default `false`. */
+    detectBrowserLang?: boolean;
+    /** Keep `<html lang dir>` in sync. Default `true`. */
+    manageDocument?: boolean;
+}
+declare const I18N_CONFIG: InjectionToken<I18nConfig>;
+declare const I18N_LOADER: InjectionToken<I18nLoader>;
+
+/**
+ * `{{ 'orders.title' | tr }}`  /  `{{ 'hello' | tr: { name } }}`
+ *
+ * Impure on purpose (it must follow signals), but memoised: when key, params and the
+ * service revision are unchanged it returns the cached string in O(1) with no lookup.
+ */
+declare class TrPipe implements PipeTransform {
+    private readonly svc;
+    private k?;
+    private p?;
+    private rev;
+    private out;
+    transform(key: string | null | undefined, params?: Params): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TrPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TrPipe, "tr", true>;
+}
+
+interface TrContext {
+    $implicit: TranslateFn;
+    t: TranslateFn;
+    lang: Signal<string>;
+}
+/**
+ * Structural directive. The view is created ONCE; `t` reads signals, so only the bindings that use it update.
+ *
+ *   <ng-container *tr="let t; prefix: 'orders'">
+ *     <h1>{{ t('title') }}</h1>            <!-- orders.title -->
+ *   </ng-container>
+ */
+declare class TrDirective {
+    private readonly tpl;
+    private readonly vcr;
+    private readonly svc;
+    private readonly prefix;
+    /** `prefix: 'orders'` in the microsyntax. */
+    set trPrefix(v: string | undefined);
+    static ngTemplateContextGuard(_dir: TrDirective, _ctx: unknown): _ctx is TrContext;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TrDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TrDirective, "[tr],[translate]", never, { "trPrefix": { "alias": "trPrefix"; "required": false; }; }, {}, never, never, true, never>;
+}
+/**
+ * Attribute directive.
+ *   <span trKey="orders.title"></span>
+ *   <input trKey="form.name" trAttr="placeholder" />
+ *   <p trKey="hello" [trParams]="{ name: user.name }"></p>
+ */
+declare class TrKeyDirective {
+    private readonly key;
+    private readonly params;
+    private readonly attr;
+    private readonly prefix;
+    set trKey(v: string | undefined);
+    set trParams(v: Params | undefined);
+    set trAttr(v: string | undefined);
+    set trPrefix(v: string | undefined);
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<TrKeyDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TrKeyDirective, "[trKey]", never, { "trKey": { "alias": "trKey"; "required": false; }; "trParams": { "alias": "trParams"; "required": false; }; "trAttr": { "alias": "trAttr"; "required": false; }; "trPrefix": { "alias": "trPrefix"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/** Flatten a nested dictionary into `target` (dot-separated keys). Non-string leaves are stringified. */
+declare function flatten(dict: Dictionary, target?: Map<string, string>, onConflict?: (key: string) => void, prefix?: string): Map<string, string>;
+/** `Hello {{ name }}` + `{name:'Ali'}` -> `Hello Ali`. Unknown placeholders are left untouched. */
+declare function interpolate(text: string, params?: Params): string;
+/** Identity function the extractor recognises: `const k = marker('orders.title')`. */
+declare function marker<T extends string>(key: T): T;
+
+/** Default loader: GET `{baseUrl}/{lang}` and `{baseUrl}/{scope}/{lang}`. Goes through your HttpClient interceptors. */
+declare class HttpI18nLoader implements I18nLoader {
+    private readonly http;
+    private readonly cfg;
+    load(lang: string, scope?: string): Observable<Dictionary>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HttpI18nLoader, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<HttpI18nLoader>;
+}
+
+declare class I18nService {
+    private readonly cfg;
+    private readonly loader;
+    private readonly doc;
+    private readonly _lang;
+    private readonly _rev;
+    /** Active language (reactive). */
+    readonly lang: Signal<string>;
+    /** Bumps whenever the active language or any dictionary changes. */
+    readonly revision: Signal<number>;
+    readonly dir: Signal<"rtl" | "ltr">;
+    readonly langs: readonly string[];
+    private readonly fallbacks;
+    private readonly warn;
+    private readonly dicts;
+    private readonly loaded;
+    private readonly inflight;
+    private readonly scopes;
+    private readonly pending;
+    private readonly warned;
+    private useToken;
+    /** Translate. Reads signals, so it is reactive inside `computed`, `effect` and templates. */
+    t(key: string, params?: Params): string;
+    /** Same as `t`, but never creates a reactive dependency. */
+    instant(key: string, params?: Params): string;
+    /** `computed` signal for one key. `params` may be a function reading other signals. */
+    select(key: string, params?: Params | (() => Params)): Signal<string>;
+    /** True when the key has a non-empty value in the active language or a fallback. */
+    has(key: string): boolean;
+    /** Returns every key below `prefix` as a nested object (values are raw, not interpolated). */
+    getObject(prefix: string): Dictionary;
+    private lookup;
+    private resolve;
+    private onMissing;
+    /**
+     * Load global + all registered scopes (and fallback languages) for `lang`, THEN activate it.
+     * Nothing renders half-translated and no "missing" flash occurs.
+     */
+    use(lang: string): Promise<void>;
+    /** Download a language without activating it. */
+    preload(lang: string): Promise<void>;
+    /** Language to start with: stored > browser (opt-in) > default. */
+    detectInitialLang(): string;
+    /** Register a scope and start loading it for the active language. Idempotent. Used by `provideI18nScope`. */
+    registerScope(scope: string): void;
+    /** Resolves once every scope registered so far is available. Never rejects. */
+    whenReady(): Promise<void>;
+    /** Manually set translations (tests, SSR transfer state, ...). */
+    setTranslation(lang: string, dict: Dictionary, merge?: boolean): void;
+    private merge;
+    private fetch;
+    private loadLang;
+    private isComplete;
+    private storageKey;
+    private persist;
+    private applyDocument;
+    static ɵfac: i0.ɵɵFactoryDeclaration<I18nService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<I18nService>;
+}
+
+/**
+ * ```ts
+ * provideHttpClient(),
+ * provideI18n({ langs: ['fa', 'en'], defaultLang: 'fa', fallbackLangs: ['en'] })
+ * ```
+ * The global dictionary of the initial language is loaded before the app starts.
+ */
+declare function provideI18n(config: I18nConfig): EnvironmentProviders;
+
+/**
+ * Put in `route.providers`. Runs when the route injector is created (before guards),
+ * so loading starts as early as possible. Child routes need nothing.
+ */
+declare function provideI18nScope(scope: string | string[]): EnvironmentProviders;
+/** Put ONCE on the root path-less route: `canActivateChild: [i18nReadyGuard]`. Waits for every registered scope. */
+declare const i18nReadyGuard: CanActivateChildFn;
+
+/** `readonly title = translateSignal('orders.title')`  (injection context) */
+declare function translateSignal(key: string, params?: Params | (() => Params)): Signal<string>;
+/** `const t = injectT();  computed(() => t('a.b'))` — reactive translate function. */
+declare function injectT(): TranslateFn;
+
+/** `imports: [TR]` brings the pipe and both directives into a standalone component. */
+declare const TR: readonly [typeof TrPipe, typeof TrDirective, typeof TrKeyDirective];
+
+export { HttpI18nLoader, I18N_CONFIG, I18N_LOADER, I18nConfig, I18nService, TR, TrDirective, TrKeyDirective, TrPipe, flatten, i18nReadyGuard, injectT, interpolate, marker, provideI18n, provideI18nScope, translateSignal };
+export type { Dictionary, I18nLoader, MissingHandler, Params, TrContext, TranslateFn, Transpiler };

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, OnDestroy, ElementRef, ApplicationRef } from '@angular/core';
+import { TemplateRef, OnDestroy, ApplicationRef, ElementRef } from '@angular/core';
 import { OverlayRef, Placement, Alignment, OverlayService } from 'ngx-kit/core';
 
 interface MenuContext {
@@ -16,14 +16,14 @@ declare class NgxMenuPanel implements MenuContext {
 }
 
 declare class NgxMenu implements OnDestroy {
-    private el;
-    private appRef;
-    private overlayService;
     ngxMenu: i0.InputSignal<NgxMenuPanel>;
     placement: i0.InputSignal<Placement | undefined>;
     alignment: i0.InputSignal<Alignment | undefined>;
     private containerRef?;
-    constructor(el: ElementRef, appRef: ApplicationRef, overlayService: OverlayService);
+    protected readonly overlay: OverlayService;
+    protected readonly appRef: ApplicationRef;
+    protected readonly el: ElementRef<HTMLElement>;
+    constructor();
     ngOnDestroy(): void;
     onClick(ev: Event): void;
     private toggleContainer;
@@ -33,13 +33,13 @@ declare class NgxMenu implements OnDestroy {
 }
 
 declare class NgxContextMenu implements OnDestroy {
-    private el;
-    private appRef;
-    private overlayService;
     ngxContextMenu: i0.InputSignal<NgxMenuPanel>;
     private containerRef?;
     private readonly boundOnClick;
-    constructor(el: ElementRef<HTMLElement>, appRef: ApplicationRef, overlayService: OverlayService);
+    protected readonly overlay: OverlayService;
+    protected readonly appRef: ApplicationRef;
+    protected readonly el: ElementRef<HTMLElement>;
+    constructor();
     ngOnDestroy(): void;
     onClick(ev: PointerEvent): void;
     private toggleContainer;