ngx-kit 7.0.1 → 7.1.0

package/notify/README.md

@@ -1,56 +1,56 @@
-# ngx-kit/notify
-
-Corner toast notifications, with a static API, automatic queueing (once the visible count exceeds the limit), and the timer pausing on hover.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Setup
-
-```ts
-// app.config.ts
-import { provideNotify } from 'ngx-kit/notify';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideNotify({ timeout: 4000, position: 'top-center', dismissible: true })],
-};
-```
-
-## Usage
-
-```ts
-import { Notify } from 'ngx-kit/notify';
-
-Notify.success('Saved');
-Notify.error("We couldn't send your message", 'Try again');
-Notify.warning('Weak connection');
-Notify.info('A new version is available', undefined, { timeout: 8000 });
-```
-
-## API
-
-### `Notify`
-
-| Method                                        | Signature                                           |
-| --------------------------------------------- | --------------------------------------------------- |
-| `show(type, message, description?, options?)` | `type: 'info' \| 'success' \| 'warning' \| 'error'` |
-| `info` / `success` / `warning` / `error`      | `(message, description?, options?)`                 |
-
-### `NgxNotifyOptions`
-
-| Field          | Type                    | Default        | Description                                                   |
-| -------------- | ----------------------- | -------------- | ------------------------------------------------------------- |
-| `timeout`      | `number` (ms)           | `3000`         | How long it's shown before auto-dismissing                    |
-| `position`     | `NgxNotifyPositionType` | `'top-center'` | Corner/center to display in                                   |
-| `maxVisible`   | `number`                | `10`           | Beyond this count, notifications queue instead of overlapping |
-| `allowHtml`    | `boolean`               | `false`        | If `true`, the message is rendered as HTML (not sanitized)    |
-| `pauseOnHover` | `boolean`               | `true`         | The timer pauses while the mouse hovers                       |
-| `dismissible`  | `boolean`               | `true`         | Show a close button                                           |
-| `closeOnTap`   | `boolean`               | `true`         | Clicking the notification itself closes it                    |
-
-## Dark mode and RTL
-
-Supported automatically.
+# ngx-kit/notify
+
+Corner toast notifications, with a static API, automatic queueing (once the visible count exceeds the limit), and the timer pausing on hover.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+## Setup
+
+```ts
+// app.config.ts
+import { provideNotify } from 'ngx-kit/notify';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideNotify({ timeout: 4000, position: 'top-center', dismissible: true })],
+};
+```
+
+## Usage
+
+```ts
+import { Notify } from 'ngx-kit/notify';
+
+Notify.success('Saved');
+Notify.error("We couldn't send your message", 'Try again');
+Notify.warning('Weak connection');
+Notify.info('A new version is available', undefined, { timeout: 8000 });
+```
+
+## API
+
+### `Notify`
+
+| Method                                        | Signature                                           |
+| --------------------------------------------- | --------------------------------------------------- |
+| `show(type, message, description?, options?)` | `type: 'info' \| 'success' \| 'warning' \| 'error'` |
+| `info` / `success` / `warning` / `error`      | `(message, description?, options?)`                 |
+
+### `NgxNotifyOptions`
+
+| Field          | Type                    | Default        | Description                                                   |
+| -------------- | ----------------------- | -------------- | ------------------------------------------------------------- |
+| `timeout`      | `number` (ms)           | `3000`         | How long it's shown before auto-dismissing                    |
+| `position`     | `NgxNotifyPositionType` | `'top-center'` | Corner/center to display in                                   |
+| `maxVisible`   | `number`                | `10`           | Beyond this count, notifications queue instead of overlapping |
+| `allowHtml`    | `boolean`               | `false`        | If `true`, the message is rendered as HTML (not sanitized)    |
+| `pauseOnHover` | `boolean`               | `true`         | The timer pauses while the mouse hovers                       |
+| `dismissible`  | `boolean`               | `true`         | Show a close button                                           |
+| `closeOnTap`   | `boolean`               | `true`         | Clicking the notification itself closes it                    |
+
+## Dark mode and RTL
+
+Supported automatically.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-kit",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "description": "Angular input components",
   "author": "Mohammadreza Samani <mr.samani1368@gmail.com>",
   "license": "MIT",
@@ -89,6 +89,10 @@
       "types": "./types/ngx-kit-image-editor.d.ts",
       "default": "./fesm2022/ngx-kit-image-editor.mjs"
     },
+    "./infinite-scroll": {
+      "types": "./types/ngx-kit-infinite-scroll.d.ts",
+      "default": "./fesm2022/ngx-kit-infinite-scroll.mjs"
+    },
     "./menu": {
       "types": "./types/ngx-kit-menu.d.ts",
       "default": "./fesm2022/ngx-kit-menu.mjs"

package/shared/README.md

@@ -1,117 +1,117 @@
-# ngx-kit/shared
-
-Shared utilities and services that the rest of the `ngx-kit` packages are built on: overlay/dialog management, page-direction (RTL/LTR) detection, browser-preference detection, and a few reusable base components (slider, range slider, color-saturation panel).
-
-You usually won't need this package directly — the other packages depend on it automatically. But if you're building a custom component that should stay consistent with the rest of the library (dark mode, RTL, drag performance), use these same utilities.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-Import the base styles (which enable dark mode via `color-scheme`) once, app-wide:
-
-```scss
-// styles.scss
-@import 'ngx-kit/styles/all.css';
-```
-
-## Services
-
-### `OverlayService`
-
-The engine behind everything floating in the library (menus, dialogs, the color/gradient/angle picker popups). Renders an Angular component inside a native `<dialog>` (`showModal()`) and positions it relative to an anchor.
-
-```ts
-import { OverlayService } from 'ngx-kit/shared';
-
-const overlay = inject(OverlayService);
-const viewContainerRef = inject(ViewContainerRef);
-
-const ref = overlay.open({
-  component: MyComponent,
-  viewContainerRef,
-  anchor: buttonElementRef.nativeElement,
-  placement: 'bottom', // 'top' | 'bottom' | 'auto'
-  alignment: 'start', // 'start' | 'center' | 'end'
-  margin: 8,
-});
-
-ref.close(); // OverlayRef.close() takes no argument and has no afterClosed; for that (return value, afterClosed) use ngx-kit/dialog, which is built on top of this service
-```
-
-What's handled for you automatically:
-
-- **Smart positioning**: if there isn't enough room below the anchor, it flips above (`placement: 'auto'`).
-- **Click-outside dismissal**: detected via the backdrop click, not a global `document` listener.
-- **Correct stacking**: multiple simultaneous overlays (e.g. a menu with a submenu) work correctly; Escape only closes the last (topmost) overlay.
-- **Focus restoration**: after closing, focus returns to whatever had focus before the overlay opened (accessibility).
-- **Automatic RTL**: alignment and placement are computed against the page's actual direction (not a fixed assumption).
-
-### `DirectionService`
-
-A signal (`isRtl(): boolean`) that watches the `<html>` element's `dir` attribute with a `MutationObserver` and updates reactively the moment it changes — so if your app switches languages at runtime, everything stays in sync automatically.
-
-```ts
-const direction = inject(DirectionService);
-direction.isRtl(); // signal<boolean>
-```
-
-### `BrowserService`
-
-```ts
-const browser = inject(BrowserService);
-browser.prefersDarkMode; // boolean — read once at service construction time
-```
-
-## Utilities
-
-### `startDragSession(callbacks)`
-
-Replaces the problematic `@HostListener('document:mousemove', ...)` pattern, which keeps a listener attached to `document` for the entire lifetime of the component — even when nothing is being dragged (a real performance issue on pages with many simultaneous instances). This function only adds a listener for the duration of an actual drag and removes it itself; `touchmove` is handled with `{passive: false}`, so dragging on mobile doesn't also scroll the page.
-
-```ts
-import { startDragSession } from 'ngx-kit/shared';
-
-let stop: (() => void) | undefined;
-
-function onPointerDown(ev: MouseEvent | TouchEvent) {
-  stop?.();
-  stop = startDragSession({
-    onMove: (ev) => {
-      /* update position */
-    },
-    onEnd: () => {
-      stop = undefined;
-    },
-  });
-}
-```
-
-> If your component is `OnPush` and uses `startDragSession` (instead of `@HostListener`), make sure to call `ChangeDetectorRef.markForCheck()` inside `onMove`/`onEnd` yourself — unlike `@HostListener`, which automatically marks the view dirty, a manual `addEventListener` does not.
-
-### `getOffsetPosition(event, element)`
-
-Returns the pointer/touch position relative to an element's top-left corner; used to implement drag-based components (sliders, color pickers, etc.).
-
-### `mergeConfig(base, override)`
-
-Deep-merges two config objects (for the `provideXxx({...})` pattern used throughout the library).
-
-## Base components
-
-These can be used directly, but they're mostly designed as building blocks for other components (like `color-picker`, `box-shadow`):
-
-| Component              | Selector                | Description                                                           |
-| ---------------------- | ----------------------- | --------------------------------------------------------------------- |
-| `SliderComponent`      | `slider`                | Single-value slider, `ControlValueAccessor`, `[min]`/`[max]`/`[step]` |
-| `RangeSliderComponent` | `range-slider`          | Range slider (two thumbs)                                             |
-| `SaturationComponent`  | internal (color-picker) | 2D saturation/lightness picker panel                                  |
-
-## Dark mode and RTL
-
-Both rely directly on `ngx-kit/shared`:
-
-- **Dark mode**: uses the native CSS `light-dark()` function. For it to work, `color-scheme: light dark` (or `only light`/`only dark` to force it manually) must be set on `:root` — this happens automatically when you import `ngx-kit/styles/all.css`. To force a theme manually (independent of the OS's `prefers-color-scheme`), set `data-ngx-theme="dark"` or `"light"` on `<html>`/`<body>`.
-- **RTL**: enabled via `dir="rtl"` on `<html>`; the whole library uses CSS logical properties (`inset-inline-start`, etc.), so no separate styling is needed.
+# ngx-kit/shared
+
+Shared utilities and services that the rest of the `ngx-kit` packages are built on: overlay/dialog management, page-direction (RTL/LTR) detection, browser-preference detection, and a few reusable base components (slider, range slider, color-saturation panel).
+
+You usually won't need this package directly — the other packages depend on it automatically. But if you're building a custom component that should stay consistent with the rest of the library (dark mode, RTL, drag performance), use these same utilities.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+Import the base styles (which enable dark mode via `color-scheme`) once, app-wide:
+
+```scss
+// styles.scss
+@import 'ngx-kit/styles/all.css';
+```
+
+## Services
+
+### `OverlayService`
+
+The engine behind everything floating in the library (menus, dialogs, the color/gradient/angle picker popups). Renders an Angular component inside a native `<dialog>` (`showModal()`) and positions it relative to an anchor.
+
+```ts
+import { OverlayService } from 'ngx-kit/shared';
+
+const overlay = inject(OverlayService);
+const viewContainerRef = inject(ViewContainerRef);
+
+const ref = overlay.open({
+  component: MyComponent,
+  viewContainerRef,
+  anchor: buttonElementRef.nativeElement,
+  placement: 'bottom', // 'top' | 'bottom' | 'auto'
+  alignment: 'start', // 'start' | 'center' | 'end'
+  margin: 8,
+});
+
+ref.close(); // OverlayRef.close() takes no argument and has no afterClosed; for that (return value, afterClosed) use ngx-kit/dialog, which is built on top of this service
+```
+
+What's handled for you automatically:
+
+- **Smart positioning**: if there isn't enough room below the anchor, it flips above (`placement: 'auto'`).
+- **Click-outside dismissal**: detected via the backdrop click, not a global `document` listener.
+- **Correct stacking**: multiple simultaneous overlays (e.g. a menu with a submenu) work correctly; Escape only closes the last (topmost) overlay.
+- **Focus restoration**: after closing, focus returns to whatever had focus before the overlay opened (accessibility).
+- **Automatic RTL**: alignment and placement are computed against the page's actual direction (not a fixed assumption).
+
+### `DirectionService`
+
+A signal (`isRtl(): boolean`) that watches the `<html>` element's `dir` attribute with a `MutationObserver` and updates reactively the moment it changes — so if your app switches languages at runtime, everything stays in sync automatically.
+
+```ts
+const direction = inject(DirectionService);
+direction.isRtl(); // signal<boolean>
+```
+
+### `BrowserService`
+
+```ts
+const browser = inject(BrowserService);
+browser.prefersDarkMode; // boolean — read once at service construction time
+```
+
+## Utilities
+
+### `startDragSession(callbacks)`
+
+Replaces the problematic `@HostListener('document:mousemove', ...)` pattern, which keeps a listener attached to `document` for the entire lifetime of the component — even when nothing is being dragged (a real performance issue on pages with many simultaneous instances). This function only adds a listener for the duration of an actual drag and removes it itself; `touchmove` is handled with `{passive: false}`, so dragging on mobile doesn't also scroll the page.
+
+```ts
+import { startDragSession } from 'ngx-kit/shared';
+
+let stop: (() => void) | undefined;
+
+function onPointerDown(ev: MouseEvent | TouchEvent) {
+  stop?.();
+  stop = startDragSession({
+    onMove: (ev) => {
+      /* update position */
+    },
+    onEnd: () => {
+      stop = undefined;
+    },
+  });
+}
+```
+
+> If your component is `OnPush` and uses `startDragSession` (instead of `@HostListener`), make sure to call `ChangeDetectorRef.markForCheck()` inside `onMove`/`onEnd` yourself — unlike `@HostListener`, which automatically marks the view dirty, a manual `addEventListener` does not.
+
+### `getOffsetPosition(event, element)`
+
+Returns the pointer/touch position relative to an element's top-left corner; used to implement drag-based components (sliders, color pickers, etc.).
+
+### `mergeConfig(base, override)`
+
+Deep-merges two config objects (for the `provideXxx({...})` pattern used throughout the library).
+
+## Base components
+
+These can be used directly, but they're mostly designed as building blocks for other components (like `color-picker`, `box-shadow`):
+
+| Component              | Selector                | Description                                                           |
+| ---------------------- | ----------------------- | --------------------------------------------------------------------- |
+| `SliderComponent`      | `slider`                | Single-value slider, `ControlValueAccessor`, `[min]`/`[max]`/`[step]` |
+| `RangeSliderComponent` | `range-slider`          | Range slider (two thumbs)                                             |
+| `SaturationComponent`  | internal (color-picker) | 2D saturation/lightness picker panel                                  |
+
+## Dark mode and RTL
+
+Both rely directly on `ngx-kit/shared`:
+
+- **Dark mode**: uses the native CSS `light-dark()` function. For it to work, `color-scheme: light dark` (or `only light`/`only dark` to force it manually) must be set on `:root` — this happens automatically when you import `ngx-kit/styles/all.css`. To force a theme manually (independent of the OS's `prefers-color-scheme`), set `data-ngx-theme="dark"` or `"light"` on `<html>`/`<body>`.
+- **RTL**: enabled via `dir="rtl"` on `<html>`; the whole library uses CSS logical properties (`inset-inline-start`, etc.), so no separate styling is needed.

package/time-picker/README.md

@@ -1,89 +1,89 @@
-# ngx-kit/time-picker
-
-An analog clock time picker (MUI-style), usable either inline or as a popup attached to a text input, with 12h/24h format support and a configurable minute step.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Setup (optional)
-
-```ts
-// app.config.ts
-import { provideTimePicker } from 'ngx-kit/time-picker';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideTimePicker({
-      format: '24',
-      minuteStep: 5,
-      confirmButtonText: 'Done',
-    }),
-  ],
-};
-```
-
-`provideTimePicker` only needs the fields you want to override — everything else falls back to the defaults (`confirmButtonText: 'Ok'`, `cancelButtonText: 'Cancel'`, `amText: 'AM'`, `pmText: 'PM'`, `format: '12'`, `minuteStep: 1`, `autoSwitchToMinute: true`).
-
-## Usage — popup attached to an input
-
-```html
-<input type="text" formControlName="time" ngxInputTimePicker #dp="ngxInputTimePicker" />
-<button (click)="dp.toggle()">Open</button>
-```
-
-`[ngxInputTimePicker]` is a full `ControlValueAccessor` + `Validator`, so it works with `ngModel`/`formControl`/`formControlName`. The value is always a string in `HH:MM` (24h) form, e.g. `'14:35'`.
-
-If the typed text isn't a valid time, the control gets a `{ invalid: true }` error (in addition to whatever built-in validators like `Validators.required` you add yourself):
-
-```html
-@if (form.get('time')?.hasError('invalid')) {
-<div class="text-danger">Invalid time</div>
-} @if (form.get('time')?.hasError('required')) {
-<div class="text-danger">Time is required</div>
-}
-```
-
-## Usage — inline (always visible)
-
-```html
-<ngx-time-picker format="24" [(value)]="time" (change)="onTimeChange($event)"></ngx-time-picker>
-```
-
-## API
-
-### `[ngxInputTimePicker]`
-
-| Input         | Type           | Default     | Description                                     |
-| ------------- | -------------- | ----------- | ----------------------------------------------- |
-| `openOnCLick` | `boolean`      | `true`      | Open the popup when the input itself is clicked |
-| `format`      | `'12' \| '24'` | from config |                                                 |
-
-| Output   | Type                           | Description                           |
-| -------- | ------------------------------ | ------------------------------------- |
-| `change` | `EventEmitter<string \| null>` | Emitted when the user confirms a time |
-
-| Member     | Description                                  |
-| ---------- | -------------------------------------------- |
-| `toggle()` | Opens the popup if closed, closes it if open |
-
-### `<ngx-time-picker>`
-
-| Input                    | Type           | Default     | Description                                                  |
-| ------------------------ | -------------- | ----------- | ------------------------------------------------------------ |
-| `value` (model, two-way) | `string`       | `'12:00'`   | Bind with `[(value)]`                                        |
-| `format`                 | `'12' \| '24'` | from config |                                                              |
-| `minuteStep`             | `number`       | from config |                                                              |
-| `disabled`               | `boolean`      | `false`     |                                                              |
-| `autoSwitchToMinute`     | `boolean`      | from config | Switch to minute-selection mode right after picking the hour |
-
-| Output   | Type                           | Description                      |
-| -------- | ------------------------------ | -------------------------------- |
-| `change` | `EventEmitter<string \| null>` | Emitted when "OK" is pressed     |
-| `cancel` | `EventEmitter<void>`           | Emitted when "Cancel" is pressed |
-
-## Dark mode and RTL
-
-Supported automatically.
+# ngx-kit/time-picker
+
+An analog clock time picker (MUI-style), usable either inline or as a popup attached to a text input, with 12h/24h format support and a configurable minute step.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+## Setup (optional)
+
+```ts
+// app.config.ts
+import { provideTimePicker } from 'ngx-kit/time-picker';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTimePicker({
+      format: '24',
+      minuteStep: 5,
+      confirmButtonText: 'Done',
+    }),
+  ],
+};
+```
+
+`provideTimePicker` only needs the fields you want to override — everything else falls back to the defaults (`confirmButtonText: 'Ok'`, `cancelButtonText: 'Cancel'`, `amText: 'AM'`, `pmText: 'PM'`, `format: '12'`, `minuteStep: 1`, `autoSwitchToMinute: true`).
+
+## Usage — popup attached to an input
+
+```html
+<input type="text" formControlName="time" ngxInputTimePicker #dp="ngxInputTimePicker" />
+<button (click)="dp.toggle()">Open</button>
+```
+
+`[ngxInputTimePicker]` is a full `ControlValueAccessor` + `Validator`, so it works with `ngModel`/`formControl`/`formControlName`. The value is always a string in `HH:MM` (24h) form, e.g. `'14:35'`.
+
+If the typed text isn't a valid time, the control gets a `{ invalid: true }` error (in addition to whatever built-in validators like `Validators.required` you add yourself):
+
+```html
+@if (form.get('time')?.hasError('invalid')) {
+<div class="text-danger">Invalid time</div>
+} @if (form.get('time')?.hasError('required')) {
+<div class="text-danger">Time is required</div>
+}
+```
+
+## Usage — inline (always visible)
+
+```html
+<ngx-time-picker format="24" [(value)]="time" (change)="onTimeChange($event)"></ngx-time-picker>
+```
+
+## API
+
+### `[ngxInputTimePicker]`
+
+| Input         | Type           | Default     | Description                                     |
+| ------------- | -------------- | ----------- | ----------------------------------------------- |
+| `openOnCLick` | `boolean`      | `true`      | Open the popup when the input itself is clicked |
+| `format`      | `'12' \| '24'` | from config |                                                 |
+
+| Output   | Type                           | Description                           |
+| -------- | ------------------------------ | ------------------------------------- |
+| `change` | `EventEmitter<string \| null>` | Emitted when the user confirms a time |
+
+| Member     | Description                                  |
+| ---------- | -------------------------------------------- |
+| `toggle()` | Opens the popup if closed, closes it if open |
+
+### `<ngx-time-picker>`
+
+| Input                    | Type           | Default     | Description                                                  |
+| ------------------------ | -------------- | ----------- | ------------------------------------------------------------ |
+| `value` (model, two-way) | `string`       | `'12:00'`   | Bind with `[(value)]`                                        |
+| `format`                 | `'12' \| '24'` | from config |                                                              |
+| `minuteStep`             | `number`       | from config |                                                              |
+| `disabled`               | `boolean`      | `false`     |                                                              |
+| `autoSwitchToMinute`     | `boolean`      | from config | Switch to minute-selection mode right after picking the hour |
+
+| Output   | Type                           | Description                      |
+| -------- | ------------------------------ | -------------------------------- |
+| `change` | `EventEmitter<string \| null>` | Emitted when "OK" is pressed     |
+| `cancel` | `EventEmitter<void>`           | Emitted when "Cancel" is pressed |
+
+## Dark mode and RTL
+
+Supported automatically.

package/types/ngx-kit-infinite-scroll.d.ts

@@ -0,0 +1,86 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit } from '@angular/core';
+
+type NgxInfiniteScrollDirection = 'up' | 'down' | 'both';
+interface NgxInfiniteScrollEvent {
+    direction: 'up' | 'down';
+    distance: number;
+    target: HTMLElement;
+    root: HTMLElement | null;
+}
+
+declare class NgxInfiniteScroll implements AfterViewInit {
+    readonly infiniteScrollDistance: _angular_core.InputSignalWithTransform<number, string | number | null | undefined>;
+    readonly infiniteScrollDisabled: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    readonly infiniteScrollImmediateCheck: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    readonly infiniteScrollMinInterval: _angular_core.InputSignalWithTransform<number, string | number | null | undefined>;
+    readonly infiniteScrollUpDistance: _angular_core.InputSignalWithTransform<number | null, number | null>;
+    readonly infiniteScrollDownDistance: _angular_core.InputSignalWithTransform<number | null, number | null>;
+    readonly infiniteScrollDirection: _angular_core.InputSignal<NgxInfiniteScrollDirection>;
+    readonly infiniteScrollContainer: _angular_core.InputSignal<string | HTMLElement | null>;
+    readonly infiniteScrollRoot: _angular_core.InputSignal<HTMLElement | null>;
+    readonly scrollWindow: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    readonly fromRoot: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    /** Preserve the visual scroll position when older content is prepended. */
+    readonly infiniteScrollMaintainScrollPosition: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    /** Optional CSS scroll behavior used while compensating a prepend. */
+    readonly infiniteScrollPreserveScrollBehavior: _angular_core.InputSignal<ScrollBehavior>;
+    readonly scrolled: _angular_core.OutputEmitterRef<NgxInfiniteScrollEvent>;
+    readonly scrolledUp: _angular_core.OutputEmitterRef<NgxInfiniteScrollEvent>;
+    readonly scrolledDown: _angular_core.OutputEmitterRef<NgxInfiniteScrollEvent>;
+    readonly scrollStartReached: _angular_core.OutputEmitterRef<NgxInfiniteScrollEvent>;
+    readonly scrollEndReached: _angular_core.OutputEmitterRef<NgxInfiniteScrollEvent>;
+    private readonly hostRef;
+    private readonly zone;
+    private readonly destroyRef;
+    private readonly platformId;
+    private readonly ready;
+    private previousConfiguration?;
+    private observer?;
+    private resizeObserver?;
+    private mutationObserver?;
+    private topSentinel?;
+    private bottomSentinel?;
+    private root;
+    private lastTriggerAt;
+    private armedUp;
+    private armedDown;
+    private destroyRequested;
+    private prependFrame;
+    private prependSnapshot?;
+    constructor();
+    ngAfterViewInit(): void;
+    /**
+     * Re-check the sentinels after application code has appended/prepended data.
+     * Usually not needed, but useful for custom rendering pipelines.
+     */
+    check(): void;
+    /**
+     * Explicitly finish a pending prepend operation.
+     * Useful when an application knows exactly when its async batch has rendered.
+     */
+    completePrepend(): void;
+    private sameConfiguration;
+    private setup;
+    private trigger;
+    private allowsDirection;
+    private resolveRoot;
+    private buildRootMargin;
+    private createSentinel;
+    private scheduleCheck;
+    private checkVisibilityDirectly;
+    private distanceFor;
+    private getDocumentScroller;
+    private getScrollMetrics;
+    private capturePrependSnapshot;
+    private watchPrepend;
+    private tryCompensatePrepend;
+    private cancelPrependWatcher;
+    private destroyObserver;
+    private clearSentinels;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxInfiniteScroll, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgxInfiniteScroll, "[infiniteScroll]", ["infiniteScroll"], { "infiniteScrollDistance": { "alias": "infiniteScrollDistance"; "required": false; "isSignal": true; }; "infiniteScrollDisabled": { "alias": "infiniteScrollDisabled"; "required": false; "isSignal": true; }; "infiniteScrollImmediateCheck": { "alias": "infiniteScrollImmediateCheck"; "required": false; "isSignal": true; }; "infiniteScrollMinInterval": { "alias": "infiniteScrollMinInterval"; "required": false; "isSignal": true; }; "infiniteScrollUpDistance": { "alias": "infiniteScrollUpDistance"; "required": false; "isSignal": true; }; "infiniteScrollDownDistance": { "alias": "infiniteScrollDownDistance"; "required": false; "isSignal": true; }; "infiniteScrollDirection": { "alias": "infiniteScrollDirection"; "required": false; "isSignal": true; }; "infiniteScrollContainer": { "alias": "infiniteScrollContainer"; "required": false; "isSignal": true; }; "infiniteScrollRoot": { "alias": "infiniteScrollRoot"; "required": false; "isSignal": true; }; "scrollWindow": { "alias": "scrollWindow"; "required": false; "isSignal": true; }; "fromRoot": { "alias": "fromRoot"; "required": false; "isSignal": true; }; "infiniteScrollMaintainScrollPosition": { "alias": "infiniteScrollMaintainScrollPosition"; "required": false; "isSignal": true; }; "infiniteScrollPreserveScrollBehavior": { "alias": "infiniteScrollPreserveScrollBehavior"; "required": false; "isSignal": true; }; }, { "scrolled": "scrolled"; "scrolledUp": "scrolledUp"; "scrolledDown": "scrolledDown"; "scrollStartReached": "scrollStartReached"; "scrollEndReached": "scrollEndReached"; }, never, never, true, never>;
+}
+
+export { NgxInfiniteScroll as InfiniteScroll, NgxInfiniteScroll };
+export type { NgxInfiniteScrollDirection, NgxInfiniteScrollEvent };