ngx-kit 7.0.0 → 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.0",
+  "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-grid-layout.d.ts

@@ -123,6 +123,24 @@ declare function trySwap<T extends LayoutNode>(items: readonly T[], id: string,
 declare function compact<T extends LayoutNode>(items: readonly T[], mode: CompactMode): T[];
 /** Highest occupied row (0-based, exclusive) across all items — drives the grid's auto-height. */
 declare function maxOccupiedRow(items: readonly LayoutNode[]): number;
+/**
+ * Finds a cell for `config` that doesn't collide with any existing item.
+ * Tries the requested (x, y) first; if that's already occupied, scans
+ * forward in reading order (row by row, top to bottom, left to right — the
+ * caller is responsible for any RTL flipping when it turns this back into
+ * pixels) for the first gap large enough to fit it.
+ *
+ * This is what a newly-registered item (or one whose config changes to a
+ * position that's no longer free) should go through instead of silently
+ * overlapping whatever's already there: unlike a drag/resize, registering an
+ * item isn't a deliberate "make room for me" gesture, so relocating the new
+ * item to open space reads far better than shoving already-placed items
+ * around to accommodate it.
+ */
+declare function findFreeSpot<T extends LayoutNode>(items: readonly T[], config: GridItemConfig, cols: number, excludeId?: string): {
+    x: number;
+    y: number;
+};
 
 /**
  * All pixel <-> grid-cell math lives here, in one RTL-aware place.
@@ -173,7 +191,6 @@ declare class GridLayoutService {
     readonly height: _angular_core.Signal<number>;
     readonly layout: _angular_core.Signal<LayoutOutput[]>;
     readonly columns: _angular_core.Signal<number>;
-    /** Resolves `rtl: 'auto'` against the attached element's *actual* computed direction. */
     readonly rtl: _angular_core.Signal<boolean>;
     private rtlTick;
     private layoutListener?;
@@ -187,23 +204,7 @@ declare class GridLayoutService {
     setOptions(value: Partial<IGridLayoutOptions>): void;
     setEditMode(value: boolean): void;
     setItems(items: GridItemState[]): void;
-    /**
-     * Registers a new item, or refreshes the DOM element reference of one that's
-     * already tracked. Adding an item can shift the whole layout (compaction /
-     * push), so that path settles. Merely re-supplying the same element on an
-     * already-known id has no geometric effect, so it is a deliberate no-op —
-     * skipping it is what keeps a per-item `effect()` that calls this on every
-     * change-detection pass from re-triggering `settle()` indefinitely.
-     */
     registerItem(item: GridItemState): void;
-    /**
-     * Updates an item's config. Only writes the signal and re-settles the layout
-     * when the *value* actually changed. Without this guard, any caller that
-     * supplies a structurally-equal but referentially-new config object (e.g. a
-     * template bound to a `computed()` layout) would cause an unconditional
-     * `items.set()` on every run — which produces new output objects, which
-     * feed back into that same new config reference, forever.
-     */
     updateItemConfig(id: string, config: GridItemConfig): void;
     unregisterItem(id: string): void;
     /** Called once the grid surface element exists (e.g. from `ngAfterViewInit`). */
@@ -246,8 +247,8 @@ declare class NgxGridLayoutComponent implements AfterViewInit, OnDestroy {
     readonly editMode: _angular_core.InputSignal<boolean>;
     readonly layoutChange: _angular_core.OutputEmitterRef<LayoutOutput[]>;
     /** Explicit direction override. Leave unset to inherit the page/host direction automatically. */
-    readonly dir: _angular_core.InputSignal<"ltr" | "rtl" | undefined>;
-    readonly dirOverride: _angular_core.InputSignal<"ltr" | "rtl" | undefined>;
+    readonly dir: _angular_core.InputSignal<"rtl" | "ltr" | undefined>;
+    readonly dirOverride: _angular_core.InputSignal<"rtl" | "ltr" | undefined>;
     readonly service: GridLayoutService;
     private readonly el;
     private surface?;
@@ -306,5 +307,5 @@ declare class NgxGridLayoutModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<NgxGridLayoutModule>;
 }
 
-export { GridItemConfig, GridLayoutOptions, GridLayoutService, NgxGridItemComponent, NgxGridLayoutComponent, NgxGridLayoutModule, colToLeft, collides, compact, computeMetrics, getAllCollisions, getFirstCollision, gridItemConfigsEqual, leftToCol, maxOccupiedRow, moveItem, normalizeGridItem, placeItem, rowToTop, spanToHeightPx, spanToWidthPx, topToRow, trySwap };
+export { GridItemConfig, GridLayoutOptions, GridLayoutService, NgxGridItemComponent, NgxGridLayoutComponent, NgxGridLayoutModule, colToLeft, collides, compact, computeMetrics, findFreeSpot, getAllCollisions, getFirstCollision, gridItemConfigsEqual, leftToCol, maxOccupiedRow, moveItem, normalizeGridItem, placeItem, rowToTop, spanToHeightPx, spanToWidthPx, topToRow, trySwap };
 export type { CompactMode, GridFlow, GridItemState, GridMetrics, IGridBackgroundCfg, IGridLayoutOptions, LayoutNode, LayoutOutput, MoveOptions };