ngx-kit 7.0.1 → 7.2.0

package/dialog/README.md

@@ -1,92 +1,92 @@
-# ngx-kit/dialog
-
-Modal/dialog built on the browser's native `<dialog>` — no manual overlay, no third-party library.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Setup
-
-```ts
-// app.config.ts
-import { ApplicationConfig, importProvidersFrom } from '@angular/core';
-import { NgxDialogModule } from 'ngx-kit/dialog';
-
-export const appConfig: ApplicationConfig = {
-  providers: [importProvidersFrom(NgxDialogModule)],
-};
-```
-
-## Opening a dialog
-
-With the static API (no manual service injection needed):
-
-```ts
-import { Dialog } from 'ngx-kit/dialog';
-
-const ref = Dialog.open(MyDialogComponent, {
-  data: { userId: 42 },
-  width: '480px',
-  allowCloseOnOutsideClick: true,
-  header: { enable: true, title: 'Edit user', showCloseButton: true },
-});
-
-ref.afterClosed.subscribe((result) => console.log('Result:', result));
-```
-
-Inside the dialog's component:
-
-```ts
-@Component({ ... })
-export class MyDialogComponent {
-  private ref = inject(NgxDialogRef);
-  data = inject(NGX_DIALOG_DATA); // the data passed via config.data
-
-  save() {
-    this.ref.close({ saved: true });
-  }
-}
-```
-
-### Layout directives inside a dialog
-
-```html
-<div *ngxDialogHeader>Custom title</div>
-<div *ngxDialogBody>Main content</div>
-<div *ngxDialogFooter>
-  <button (click)="save()">Save</button>
-</div>
-```
-
-## API
-
-### `Dialog.open<T>(component, config?)`
-
-| `config` field                                              | Type       | Default     | Description                                    |
-| ----------------------------------------------------------- | ---------- | ----------- | ---------------------------------------------- |
-| `data`                                                      | `T`        | `{}`        | Data passed to the component inside the dialog |
-| `allowCloseOnOutsideClick`                                  | `boolean`  | `false`     | Close when clicking the backdrop               |
-| `containerClass`                                            | `string`   | `'ngx-kit'` | Extra class on the container                   |
-| `header.enable` / `header.title` / `header.showCloseButton` |            |             | Default header settings                        |
-| `footer.enable`                                             | `boolean`  |             | Show the default footer                        |
-| `width` / `minWidth` / `maxWidth`                           | `string`   |             | Horizontal sizing                              |
-| `height` / `minHeight` / `maxHeight`                        | `string`   |             | Vertical sizing                                |
-| `injector`                                                  | `Injector` |             | Custom injector for the inner component        |
-
-### `NgxDialogRef`
-
-| Member                         | Description                                         |
-| ------------------------------ | --------------------------------------------------- |
-| `close(result?)`               | Closes the dialog, optionally passing back a result |
-| `afterClosed: Observable<any>` | Emits `result` after the dialog closes              |
-
-## SSR note
-
-`Dialog.open(...)` is a static/global API that's perfectly safe for a typical browser app. If you're using Angular SSR, this static instance is shared across concurrent server requests — instead of the static API, inject `NgxOverlayService` directly (which is per-injector/per-request safe).
-
-## Dark mode and RTL
-
-Supported automatically (`light-dark()` + CSS logical properties).
+# ngx-kit/dialog
+
+Modal/dialog built on the browser's native `<dialog>` — no manual overlay, no third-party library.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+## Setup
+
+```ts
+// app.config.ts
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { NgxDialogModule } from 'ngx-kit/dialog';
+
+export const appConfig: ApplicationConfig = {
+  providers: [importProvidersFrom(NgxDialogModule)],
+};
+```
+
+## Opening a dialog
+
+With the static API (no manual service injection needed):
+
+```ts
+import { Dialog } from 'ngx-kit/dialog';
+
+const ref = Dialog.open(MyDialogComponent, {
+  data: { userId: 42 },
+  width: '480px',
+  allowCloseOnOutsideClick: true,
+  header: { enable: true, title: 'Edit user', showCloseButton: true },
+});
+
+ref.afterClosed.subscribe((result) => console.log('Result:', result));
+```
+
+Inside the dialog's component:
+
+```ts
+@Component({ ... })
+export class MyDialogComponent {
+  private ref = inject(NgxDialogRef);
+  data = inject(NGX_DIALOG_DATA); // the data passed via config.data
+
+  save() {
+    this.ref.close({ saved: true });
+  }
+}
+```
+
+### Layout directives inside a dialog
+
+```html
+<div *ngxDialogHeader>Custom title</div>
+<div *ngxDialogBody>Main content</div>
+<div *ngxDialogFooter>
+  <button (click)="save()">Save</button>
+</div>
+```
+
+## API
+
+### `Dialog.open<T>(component, config?)`
+
+| `config` field                                              | Type       | Default     | Description                                    |
+| ----------------------------------------------------------- | ---------- | ----------- | ---------------------------------------------- |
+| `data`                                                      | `T`        | `{}`        | Data passed to the component inside the dialog |
+| `allowCloseOnOutsideClick`                                  | `boolean`  | `false`     | Close when clicking the backdrop               |
+| `containerClass`                                            | `string`   | `'ngx-kit'` | Extra class on the container                   |
+| `header.enable` / `header.title` / `header.showCloseButton` |            |             | Default header settings                        |
+| `footer.enable`                                             | `boolean`  |             | Show the default footer                        |
+| `width` / `minWidth` / `maxWidth`                           | `string`   |             | Horizontal sizing                              |
+| `height` / `minHeight` / `maxHeight`                        | `string`   |             | Vertical sizing                                |
+| `injector`                                                  | `Injector` |             | Custom injector for the inner component        |
+
+### `NgxDialogRef`
+
+| Member                         | Description                                         |
+| ------------------------------ | --------------------------------------------------- |
+| `close(result?)`               | Closes the dialog, optionally passing back a result |
+| `afterClosed: Observable<any>` | Emits `result` after the dialog closes              |
+
+## SSR note
+
+`Dialog.open(...)` is a static/global API that's perfectly safe for a typical browser app. If you're using Angular SSR, this static instance is shared across concurrent server requests — instead of the static API, inject `NgxOverlayService` directly (which is per-injector/per-request safe).
+
+## Dark mode and RTL
+
+Supported automatically (`light-dark()` + CSS logical properties).

package/drag-resize/README.md

@@ -1,55 +1,55 @@
-# ngx-kit drag-resize
-
-## Design goals
-
-The package uses Angular 22 signals and Pointer Events. Dragging and resizing remain transform/pointer based, while drop-list sorting uses live DOM geometry.
-
-### Professional drop-list behavior
-
-When a drag starts inside a drop list:
-
-- the real item remains in its original DOM position as a hidden layout anchor;
-- exactly one placeholder preserves the item's layout space;
-- a fully styled visual clone is moved to `document.body`, so overflow/scroll containers cannot clip the drag;
-- the body preview copies computed styles recursively, including CSS custom properties and descendant styles;
-- entering, leaving and switching lists always disposes the previous placeholder before creating the next one;
-- sorting uses current DOM geometry instead of stale start-of-drag rectangles;
-- `previousIndex` is captured from the origin list and `currentIndex` is the final placeholder position;
-- dropping outside every connected list cancels the drag instead of accidentally committing it;
-- auto-scroll follows the currently hovered drop list.
-
-## Basic drop list
-
-```html
-<div NgxDropList (drop)="onDrop($event)">
-  @for (item of items; track item.id) {
-    <article NgxDraggable [data]="item">
-      {{ item.name }}
-    </article>
-  }
-</div>
-```
-
-For most UIs, wrap related lists in `NgxDropListGroup` so they are connected automatically:
-
-```html
-<div NgxDropListGroup>
-  <div NgxDropList>...</div>
-  <div NgxDropList>...</div>
-  <div NgxDropList>...</div>
-</div>
-```
-
-The emitted event follows the familiar `previousIndex/currentIndex` model, making it suitable for `moveItemInArray` / `transferArrayItem` style data updates.
-
-## Resize
-
-```html
-<article
-  NgxResizable
-  [minWidth]="120"
-  [minHeight]="80"
-  [directions]="['n','e','s','w','ne','se','sw','nw']"></article>
-```
-
-Resize is pointer based, supports all eight directions, minimum/maximum constraints and optional pixel snapping.
+# ngx-kit drag-resize
+
+## Design goals
+
+The package uses Angular 22 signals and Pointer Events. Dragging and resizing remain transform/pointer based, while drop-list sorting uses live DOM geometry.
+
+### Professional drop-list behavior
+
+When a drag starts inside a drop list:
+
+- the real item remains in its original DOM position as a hidden layout anchor;
+- exactly one placeholder preserves the item's layout space;
+- a fully styled visual clone is moved to `document.body`, so overflow/scroll containers cannot clip the drag;
+- the body preview copies computed styles recursively, including CSS custom properties and descendant styles;
+- entering, leaving and switching lists always disposes the previous placeholder before creating the next one;
+- sorting uses current DOM geometry instead of stale start-of-drag rectangles;
+- `previousIndex` is captured from the origin list and `currentIndex` is the final placeholder position;
+- dropping outside every connected list cancels the drag instead of accidentally committing it;
+- auto-scroll follows the currently hovered drop list.
+
+## Basic drop list
+
+```html
+<div NgxDropList (drop)="onDrop($event)">
+  @for (item of items; track item.id) {
+    <article NgxDraggable [data]="item">
+      {{ item.name }}
+    </article>
+  }
+</div>
+```
+
+For most UIs, wrap related lists in `NgxDropListGroup` so they are connected automatically:
+
+```html
+<div NgxDropListGroup>
+  <div NgxDropList>...</div>
+  <div NgxDropList>...</div>
+  <div NgxDropList>...</div>
+</div>
+```
+
+The emitted event follows the familiar `previousIndex/currentIndex` model, making it suitable for `moveItemInArray` / `transferArrayItem` style data updates.
+
+## Resize
+
+```html
+<article
+  NgxResizable
+  [minWidth]="120"
+  [minHeight]="80"
+  [directions]="['n','e','s','w','ne','se','sw','nw']"></article>
+```
+
+Resize is pointer based, supports all eight directions, minimum/maximum constraints and optional pixel snapping.