ngx-kit 7.1.0 → 7.3.0

package/data-table/README.md

@@ -1,120 +1,120 @@
-# ngx-kit/data-table
-
-A signal-based data table with full type-safety: column and custom renderer definitions are typed so TypeScript itself catches invalid columns or a wrong `rendererInputs`. Single/multi-column sorting, pagination, lazy (server-side) mode, and column resizing via Pointer Capture.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Registering renderers (optional, but recommended)
-
-```ts
-// app.config.ts
-import { provideTable, defineRenderers } from 'ngx-kit/data-table';
-import { AvatarCellRenderer, BooleanCellRenderer } from './cell-renderers';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideTable({
-      renderers: defineRenderers({ avatar: AvatarCellRenderer, boolean: BooleanCellRenderer }),
-      column: { minWidth: 80, maxWidth: 480, defaultWidth: 160 },
-    }),
-  ],
-};
-```
-
-## Type-safe column definitions
-
-```ts
-interface Tenant {
-  avatarUrl: string;
-  name: string;
-  isActive: boolean;
-}
-
-const renderers = defineRenderers({ avatar: AvatarCellRenderer, boolean: BooleanCellRenderer });
-
-const fields = defineFields<Tenant, typeof renderers>(renderers, [
-  { column: 'avatarUrl', title: 'User', renderer: 'avatar', rendererInputs: { showName: true } }, // ✅ type-checked
-  { column: 'name', title: 'Name', sortable: true },
-  { column: 'isActive', title: 'Active', renderer: 'boolean', align: 'center' },
-]);
-```
-
-If `column` isn't a real field of `Tenant`, or `renderer` isn't a real key of the registry, or `rendererInputs` doesn't match that renderer's actual inputs — it's a compile error, not a runtime one.
-
-## Usage in a template
-
-```html
-<ngx-table
-  [fields]="fields"
-  [data]="tenants"
-  [totalRecords]="tenants.length"
-  [pageSize]="20"
-  (sortChange)="onSortChange($event)"></ngx-table>
-```
-
-### Lazy mode (server-side pagination/sorting)
-
-```html
-<ngx-table
-  [fields]="fields"
-  [data]="page"
-  [totalRecords]="total"
-  [lazy]="true"
-  (lazyLoad)="fetchPage($event)"></ngx-table>
-```
-
-```ts
-fetchPage(ev: LazyLoadEvent<Tenant>) {
-  // ev.pageIndex, ev.pageSize, ev.first, ev.sorts
-  this.api.getTenants(ev).subscribe((res) => { this.page = res.data; this.total = res.total; });
-}
-```
-
-## API
-
-### `<ngx-table>` inputs
-
-| Input              | Type                                | Description                                                    |
-| ------------------ | ----------------------------------- | -------------------------------------------------------------- |
-| `fields`           | `TableField<T, R>[]` **(required)** | Column definitions (from `defineFields`)                       |
-| `data`             | `readonly T[]` **(required)**       | Current page's data                                            |
-| `totalRecords`     | `number` **(required)**             | Total row count (for pagination)                               |
-| `pageSize`         | `number`                            | Defaults from `provideTable`                                   |
-| `lazy`             | `boolean`                           | If `true`, your app manages sorting/pagination (not the table) |
-| `loading`          | `boolean`                           | Shows a loading state                                          |
-| `showRecordNumber` | `boolean`                           | Shows a row-number column                                      |
-
-### Outputs
-
-| Output         | Type                               | Description                                                                    |
-| -------------- | ---------------------------------- | ------------------------------------------------------------------------------ |
-| `sortChange`   | `SortMeta<T>[]`                    | Sort change (non-lazy mode)                                                    |
-| `lazyLoad`     | `LazyLoadEvent<T>`                 | New page/sort (lazy mode) — includes `pageIndex`, `pageSize`, `first`, `sorts` |
-| `columnResize` | `{ field: string; width: number }` | A column's width changed                                                       |
-
-### Defining a custom renderer
-
-```ts
-@Component({
-  standalone: true,
-  selector: 'app-avatar-cell',
-  template: `
-    <img [src]="value()" />
-    <span *ngIf="showName()">{{ row().name }}</span>
-  `,
-})
-export class AvatarCellRenderer implements CellRendererComponent<string, Tenant> {
-  value = input.required<string>();
-  row = input.required<Tenant>();
-  field = input.required<TableFieldBase<Tenant>>();
-  showName = input(false); // automatically usable in rendererInputs for this column
-}
-```
-
-## Dark mode and RTL
-
-Supported automatically.
+# ngx-kit/data-table
+
+A signal-based data table with full type-safety: column and custom renderer definitions are typed so TypeScript itself catches invalid columns or a wrong `rendererInputs`. Single/multi-column sorting, pagination, lazy (server-side) mode, and column resizing via Pointer Capture.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+## Registering renderers (optional, but recommended)
+
+```ts
+// app.config.ts
+import { provideTable, defineRenderers } from 'ngx-kit/data-table';
+import { AvatarCellRenderer, BooleanCellRenderer } from './cell-renderers';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTable({
+      renderers: defineRenderers({ avatar: AvatarCellRenderer, boolean: BooleanCellRenderer }),
+      column: { minWidth: 80, maxWidth: 480, defaultWidth: 160 },
+    }),
+  ],
+};
+```
+
+## Type-safe column definitions
+
+```ts
+interface Tenant {
+  avatarUrl: string;
+  name: string;
+  isActive: boolean;
+}
+
+const renderers = defineRenderers({ avatar: AvatarCellRenderer, boolean: BooleanCellRenderer });
+
+const fields = defineFields<Tenant, typeof renderers>(renderers, [
+  { column: 'avatarUrl', title: 'User', renderer: 'avatar', rendererInputs: { showName: true } }, // ✅ type-checked
+  { column: 'name', title: 'Name', sortable: true },
+  { column: 'isActive', title: 'Active', renderer: 'boolean', align: 'center' },
+]);
+```
+
+If `column` isn't a real field of `Tenant`, or `renderer` isn't a real key of the registry, or `rendererInputs` doesn't match that renderer's actual inputs — it's a compile error, not a runtime one.
+
+## Usage in a template
+
+```html
+<ngx-table
+  [fields]="fields"
+  [data]="tenants"
+  [totalRecords]="tenants.length"
+  [pageSize]="20"
+  (sortChange)="onSortChange($event)"></ngx-table>
+```
+
+### Lazy mode (server-side pagination/sorting)
+
+```html
+<ngx-table
+  [fields]="fields"
+  [data]="page"
+  [totalRecords]="total"
+  [lazy]="true"
+  (lazyLoad)="fetchPage($event)"></ngx-table>
+```
+
+```ts
+fetchPage(ev: LazyLoadEvent<Tenant>) {
+  // ev.pageIndex, ev.pageSize, ev.first, ev.sorts
+  this.api.getTenants(ev).subscribe((res) => { this.page = res.data; this.total = res.total; });
+}
+```
+
+## API
+
+### `<ngx-table>` inputs
+
+| Input              | Type                                | Description                                                    |
+| ------------------ | ----------------------------------- | -------------------------------------------------------------- |
+| `fields`           | `TableField<T, R>[]` **(required)** | Column definitions (from `defineFields`)                       |
+| `data`             | `readonly T[]` **(required)**       | Current page's data                                            |
+| `totalRecords`     | `number` **(required)**             | Total row count (for pagination)                               |
+| `pageSize`         | `number`                            | Defaults from `provideTable`                                   |
+| `lazy`             | `boolean`                           | If `true`, your app manages sorting/pagination (not the table) |
+| `loading`          | `boolean`                           | Shows a loading state                                          |
+| `showRecordNumber` | `boolean`                           | Shows a row-number column                                      |
+
+### Outputs
+
+| Output         | Type                               | Description                                                                    |
+| -------------- | ---------------------------------- | ------------------------------------------------------------------------------ |
+| `sortChange`   | `SortMeta<T>[]`                    | Sort change (non-lazy mode)                                                    |
+| `lazyLoad`     | `LazyLoadEvent<T>`                 | New page/sort (lazy mode) — includes `pageIndex`, `pageSize`, `first`, `sorts` |
+| `columnResize` | `{ field: string; width: number }` | A column's width changed                                                       |
+
+### Defining a custom renderer
+
+```ts
+@Component({
+  standalone: true,
+  selector: 'app-avatar-cell',
+  template: `
+    <img [src]="value()" />
+    <span *ngIf="showName()">{{ row().name }}</span>
+  `,
+})
+export class AvatarCellRenderer implements CellRendererComponent<string, Tenant> {
+  value = input.required<string>();
+  row = input.required<Tenant>();
+  field = input.required<TableFieldBase<Tenant>>();
+  showName = input(false); // automatically usable in rendererInputs for this column
+}
+```
+
+## Dark mode and RTL
+
+Supported automatically.

package/date-picker/README.md

@@ -1,74 +1,74 @@
-# ngx-kit/date-picker
-
-A date picker supporting four calendar systems: Gregorian, Jalali (Persian), Hijri (Islamic), and Chinese — built on an adapter-based architecture that also makes it possible to add other calendars. It also ships a standalone calendar component (`ngx-calendar`) usable without any inputs.
-
-## Install
-
-```bash
-npm install ngx-kit
-```
-
-## Setup
-
-Calendar adapters need to be provided (the default provides all four; if you only need some of them, the bundle stays smaller since each is lazily imported):
-
-```ts
-// app.config.ts
-import { provideDateAdapters } from 'ngx-kit/date-picker';
-
-export const appConfig: ApplicationConfig = {
-  providers: [provideDateAdapters()],
-};
-```
-
-## Usage
-
-```html
-<input
-  type="text"
-  [ngxInputDatePicker]="date"
-  (change)="date = $event"
-  [locale]="'fa'"
-  [displayFormat]="'yyyy/MM/dd'" />
-```
-
-```html
-<ngx-calendar [locale]="'fa'" [theme]="'auto'"></ngx-calendar>
-```
-
-## API
-
-### `[ngxInputDatePicker]`
-
-| Input               | Type                                                                       | Default        | Description                                                                                   |
-| ------------------- | -------------------------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------- |
-| `locale`            | `string` (`'en'`, `'fa'`, `'hi'`, `'zh'`, or any custom registered locale) | `'en'`         | Which calendar to use                                                                         |
-| `theme`             | `'light' \| 'dark' \| 'auto'`                                              | `'auto'`       |                                                                                               |
-| `displayFormat`     | `string`                                                                   | `'yyyy/MM/dd'` | Text display format for the date                                                              |
-| `min` / `max`       | `Date`                                                                     |                | Allowed range                                                                                 |
-| `config`            | `NgxDatePickerConfig`                                                      |                | Show/hide and text for the "today"/"clear" buttons, custom icon templates                     |
-| `change` _(output)_ | `EventEmitter<Date>`                                                       |                | The selected date (always a standard JavaScript `Date`, regardless of the displayed calendar) |
-
-### `getLocals()`
-
-Returns the list of currently registered locales (e.g. to populate a language `<select>`):
-
-```ts
-availableLocals = getLocals(); // ['en', 'fa', 'hi', 'zh']
-```
-
-### Adding a custom calendar
-
-```ts
-provideDateAdapters({ locale: 'ja', useClass: MyJapaneseAdapter });
-```
-
-`MyJapaneseAdapter` must implement the `IDateAdapter` interface.
-
-## Performance note
-
-The Hijri and Chinese calendars (which are table/astronomical-based, unlike the formulaic Gregorian/Jalali ones) cache their computation results internally — since rendering a calendar month calls the date computation separately for every day cell, without caching this could take several hundred milliseconds for years far from today.
-
-## Dark mode and RTL
-
-Supported automatically (the Jalali/Hijri calendars are naturally RTL too).
+# ngx-kit/date-picker
+
+A date picker supporting four calendar systems: Gregorian, Jalali (Persian), Hijri (Islamic), and Chinese — built on an adapter-based architecture that also makes it possible to add other calendars. It also ships a standalone calendar component (`ngx-calendar`) usable without any inputs.
+
+## Install
+
+```bash
+npm install ngx-kit
+```
+
+## Setup
+
+Calendar adapters need to be provided (the default provides all four; if you only need some of them, the bundle stays smaller since each is lazily imported):
+
+```ts
+// app.config.ts
+import { provideDateAdapters } from 'ngx-kit/date-picker';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideDateAdapters()],
+};
+```
+
+## Usage
+
+```html
+<input
+  type="text"
+  [ngxInputDatePicker]="date"
+  (change)="date = $event"
+  [locale]="'fa'"
+  [displayFormat]="'yyyy/MM/dd'" />
+```
+
+```html
+<ngx-calendar [locale]="'fa'" [theme]="'auto'"></ngx-calendar>
+```
+
+## API
+
+### `[ngxInputDatePicker]`
+
+| Input               | Type                                                                       | Default        | Description                                                                                   |
+| ------------------- | -------------------------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------- |
+| `locale`            | `string` (`'en'`, `'fa'`, `'hi'`, `'zh'`, or any custom registered locale) | `'en'`         | Which calendar to use                                                                         |
+| `theme`             | `'light' \| 'dark' \| 'auto'`                                              | `'auto'`       |                                                                                               |
+| `displayFormat`     | `string`                                                                   | `'yyyy/MM/dd'` | Text display format for the date                                                              |
+| `min` / `max`       | `Date`                                                                     |                | Allowed range                                                                                 |
+| `config`            | `NgxDatePickerConfig`                                                      |                | Show/hide and text for the "today"/"clear" buttons, custom icon templates                     |
+| `change` _(output)_ | `EventEmitter<Date>`                                                       |                | The selected date (always a standard JavaScript `Date`, regardless of the displayed calendar) |
+
+### `getLocals()`
+
+Returns the list of currently registered locales (e.g. to populate a language `<select>`):
+
+```ts
+availableLocals = getLocals(); // ['en', 'fa', 'hi', 'zh']
+```
+
+### Adding a custom calendar
+
+```ts
+provideDateAdapters({ locale: 'ja', useClass: MyJapaneseAdapter });
+```
+
+`MyJapaneseAdapter` must implement the `IDateAdapter` interface.
+
+## Performance note
+
+The Hijri and Chinese calendars (which are table/astronomical-based, unlike the formulaic Gregorian/Jalali ones) cache their computation results internally — since rendering a calendar month calls the date computation separately for every day cell, without caching this could take several hundred milliseconds for years far from today.
+
+## Dark mode and RTL
+
+Supported automatically (the Jalali/Hijri calendars are naturally RTL too).

package/dialog/README.md

@@ -1,92 +1,122 @@
-# 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
+
+مودال/دیالوگ که کاملاً روی `ngx-kit/overlay` سوار شده - نه `<dialog>` بومی (پشتیبانی مرورگرها)، نه یک استک DOM جدا برای هر دیالوگ. تمام رفتار مشترک (بک‌دراپ، وسط‌چین کردن، فوکوس‌تِرپ، بستن با Escape/کلیک بیرون، قفل اسکرول صفحه، رندر در top layer با Popover API) از `OverlayService` می‌آید؛ این ماژول فقط لایه‌ی «دیالوگ» رو روش اضافه می‌کنه: کانفیگ، تزریق داده، هدر/بادی/فوتر، و یک دیالوگ تایید/اعلان آماده.
+
+هر بیلدینگ‌بلاک (پنل، دایرکتیوهای هدر/فوتر/بادی، دیالوگ تایید) کاملاً **standalone** و **signal-based** است - بدون NgModule، بدون `ChangeDetectorRef.detectChanges()` دستی، سازگار با zoneless.
+
+## نصب و راه‌اندازی
+
+```bash
+npm install ngx-kit
+```
+
+```ts
+// app.config.ts
+import { ApplicationConfig } from '@angular/core';
+import { provideNgxDialog } from 'ngx-kit/dialog';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideNgxDialog()],
+};
+```
+
+## باز کردن یک دیالوگ
+
+با API استاتیک (بدون نیاز به inject دستی):
+
+```ts
+import { Dialog } from 'ngx-kit/dialog';
+
+const ref = Dialog.open<{ saved: boolean }>(EditUserComponent, {
+  data: { userId: 42 },
+  size: 'md',
+  header: { enable: true, title: 'ویرایش کاربر' },
+});
+
+ref.afterClosed.subscribe((result) => console.log('نتیجه:', result));
+```
+
+یا با تزریق مستقیم سرویس (توصیه‌شده برای SSR - پایین‌تر ببینید):
+
+```ts
+private dialog = inject(NgxDialogService);
+this.dialog.open(EditUserComponent, { data: { userId: 42 } });
+```
+
+داخل کامپوننت محتوای دیالوگ:
+
+```ts
+@Component({ standalone: true, ... })
+export class EditUserComponent {
+  private ref = inject<NgxDialogRef<{ saved: boolean }>>(DIALOG_REF);
+  data = inject<{ userId: number }>(DIALOG_DATA);
+
+  save() {
+    this.ref.close({ saved: true });
+  }
+}
+```
+
+### دایرکتیوهای layout داخل کامپوننت محتوا
+
+```html
+<div *ngxDialogHeader>عنوان سفارشی</div>
+<div *ngxDialogBody>محتوای اصلی، اسکرول‌پذیر</div>
+<div *ngxDialogFooter align="end">
+  <button (click)="save()">ذخیره</button>
+</div>
+```
+
+یا به‌جای نوشتن این‌ها دستی، از هدر/فوتر خودکار استفاده کنید (بخش API رو ببینید) - اما هر دو رو با هم استفاده نکنید.
+
+## API
+
+### `NgxDialogService.open<R, DataType>(component, config?)` / `Dialog.open(...)`
+
+| فیلد `config`                                      | نوع                                        | پیش‌فرض                               | توضیح                                                                             |
+| -------------------------------------------------- | ------------------------------------------ | ------------------------------------- | --------------------------------------------------------------------------------- |
+| `data`                                             | `DataType`                                 | `{}`                                  | از طریق `DIALOG_DATA` به کامپوننت محتوا می‌رسه                                    |
+| `size`                                             | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`   | -                                     | یک پریست عرض/ماکس-عرض                                                             |
+| `width` / `minWidth` / `maxWidth`                  | `string`                                   | -                                     | اندازه‌ی دستی (روی پریست `size` اولویت داره)                                      |
+| `height` / `minHeight` / `maxHeight`               | `string`                                   | -                                     |                                                                                   |
+| `panelClass` / `backdropClass`                     | `string \| string[]`                       | `'ngx-kit'` / `'ngx-dialog-backdrop'` | کلاس اضافه روی پنل/بک‌دراپ                                                        |
+| `header.enable` / `.title` / `.showCloseButton`    | -                                          | `false`                               | هدر خودکار (اگه خودتون `*ngxDialogHeader` بذارید، این رو فعال نکنید)              |
+| `footer.enable` / `.closeText` / `.align`          | -                                          | `false`                               | فوتر خودکار با یک دکمه‌ی بستن                                                     |
+| `closeOnOutsideClick`                              | `boolean`                                  | `false`                               | کلیک بیرون از پنل ببندتش                                                          |
+| `closeOnEscape`                                    | `boolean`                                  | `true`                                | Escape ببندتش                                                                     |
+| `disableClose`                                     | `boolean`                                  | `false`                               | معادل ست کردن هر دوی بالا روی `false` - فقط با کد قابل بسته‌شدنه                  |
+| `beforeClose`                                      | `() => boolean`                            | -                                     | گارد سینک قبل از بسته‌شدن با Escape/کلیک بیرون (نه برای `dialogRef.close()` دستی) |
+| `lockBodyScroll`                                   | `boolean`                                  | `true`                                | جلوگیری از اسکرول صفحه‌ی پشت دیالوگ                                               |
+| `autoFocus` / `restoreFocus`                       | `boolean`                                  | `true`                                |                                                                                   |
+| `usePopover`                                       | `boolean`                                  | `true`                                | رندر با Popover API (fallback خودکار در مرورگرهای قدیمی)                          |
+| `role`                                             | `'dialog' \| 'alertdialog'`                | `'dialog'`                            |                                                                                   |
+| `ariaLabel` / `ariaLabelledby` / `ariaDescribedby` | `string`                                   | -                                     |                                                                                   |
+| `animation`                                        | `'zoom' \| 'fade' \| 'slide-up' \| 'none'` | `'zoom'`                              |                                                                                   |
+| `injector`                                         | `Injector`                                 | -                                     | Injector والد برای کامپوننت محتوا                                                 |
+
+### `NgxDialogRef<R>`
+
+| عضو                  | توضیح                                                                |
+| -------------------- | -------------------------------------------------------------------- |
+| `close(result?)`     | دیالوگ رو می‌بنده؛ ایمن در برابر فراخوانی تکراری                     |
+| `afterClosed`        | `Observable<R \| undefined>` - دقیقاً یک‌بار، بعد از حذف کامل از DOM |
+| `closing` / `closed` | سیگنال‌های `boolean` برای وضعیت لحظه‌ای                              |
+| `beforeClose`        | همون گارد بالا؛ می‌تونید بعد از باز شدن هم عوضش کنید                 |
+
+### `NgxDialogService`
+
+| عضو                         | توضیح                                            |
+| --------------------------- | ------------------------------------------------ |
+| `open(component, config?)`  | دیالوگ رو باز می‌کنه، `NgxDialogRef` برمی‌گردونه |
+| `confirm(options)`          | `Observable<boolean>`                            |
+| `alert(options)`            | `Observable<void>`                               |
+| `closeAll()`                | همه‌ی دیالوگ‌های باز رو می‌بنده                  |
+| `openDialogs` / `openCount` | سیگنال‌های ریدانلی برای دیالوگ‌های باز فعلی      |
+
+## نکته‌ی SSR
+
+`Dialog.open(...)` یک نمونه‌ی استاتیک/global نگه می‌داره که برای یک اپ مرورکری معمولی کاملاً امنه. اگه از Angular SSR استفاده می‌کنید، این نمونه‌ی استاتیک بین درخواست‌های هم‌زمان سرور مشترکه - به‌جای API استاتیک، مستقیماً `NgxDialogService` رو inject کنید (که per-injector/per-request امنه). `provideNgxDialog()` عمداً روی سرور این نمونه‌ی استاتیک رو ست نمی‌کنه تا این باگ به‌جای رخ‌دادن خاموش، فوراً با خطای «service not initialized» مشخص بشه.
+
+## دارک‌مود و RTL
+
+خودکار پشتیبانی می‌شه (`light-dark()` + جهت از طریق `DirectionService` که `ngx-kit/overlay` براش استفاده می‌کنه).