ngx-kit 6.0.0 → 6.0.2

package/angle-selector/README.md

@@ -1,20 +1,20 @@
 # ngx-kit/angle-selector
 
-انتخاب‌گر زاویه (۰ تا ۳۶۰ درجه) با یه دستگیره‌ی قابل‌درگِ دایره‌ای — برای تنظیمِ جهتِ گرادیان، چرخشِ سایه، یا هر مقدارِ زاویه‌ای دیگه.
+An angle picker (0 to 360 degrees) with a draggable circular handle — for setting a gradient's direction, a shadow's rotation, or any other angular value.
 
-## نصب
+## Install
 
 ```bash
 npm install ngx-kit
 ```
 
-## استفاده
+## Usage
 
 ```html
 <ngx-input-angle [(ngModel)]="angle"></ngx-input-angle>
 ```
 
-یا روی یه input معمولی:
+Or on a plain input:
 
 ```html
 <input type="number" [ngxInputAngle]="angle" (change)="angle = $event" />
@@ -22,13 +22,13 @@ npm install ngx-kit
 
 ## API
 
-| ورودی                 | نوع                           | پیش‌فرض  | توضیح                      |
-| --------------------- | ----------------------------- | -------- | -------------------------- |
-| `theme`               | `'light' \| 'dark' \| 'auto'` | `'auto'` | تمِ کامپوننت               |
-| `change` _(دایرکتیو)_ | `EventEmitter<number>`        |          | زاویه‌ی جدید (بر حسب درجه) |
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Component theme |
+| `change` *(directive)* | `EventEmitter<number>` | | The new angle (in degrees) |
 
-مقدار همیشه یه عددِ بین `0` تا `360` هست.
+The value is always a number between `0` and `360`.
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه. دستگیره با RxJS (`switchMap` + `takeUntil` + `takeUntilDestroyed`) پیاده شده، پس listenerهای درگ فقط دقیقاً حین یه درگِ واقعی فعالن.
+Supported automatically. The handle is implemented with RxJS (`switchMap` + `takeUntil` + `takeUntilDestroyed`), so drag listeners are only ever active during an actual drag.

package/box-shadow/README.md

@@ -1,33 +1,33 @@
 # ngx-kit/box-shadow
 
-ابزار بصریِ ساختِ `box-shadow`: جابه‌جاییِ سایه با درگِ ماوس/تاچ روی یه صفحه‌ی دوبعدی، به‌همراه کنترلِ بلور، پخش (spread)، و رنگ.
+A visual `box-shadow` builder: drag the shadow's offset on a 2D pad with mouse/touch, plus controls for blur, spread, and color.
 
-## نصب
+## Install
 
 ```bash
 npm install ngx-kit
 ```
 
-## استفاده
+## Usage
 
 ```html
 <ngx-box-shadow [(ngModel)]="shadowCss"></ngx-box-shadow>
 ```
 
-یا روی یه input معمولی:
+Or on a plain input:
 
 ```html
 <input type="text" [ngxInputBoxShadow]="shadowCss" (change)="shadowCss = $event" />
 ```
 
-خروجی یه رشته‌ی معتبرِ CSS مثل `0px 4px 12px 0px rgba(0,0,0,0.25)` هست.
+The output is a valid CSS string like `0px 4px 12px 0px rgba(0,0,0,0.25)`.
 
 ## API
 
-| ورودی                             | نوع       | پیش‌فرض | توضیح                                     |
-| --------------------------------- | --------- | ------- | ----------------------------------------- |
-| `setInputBackground` _(دایرکتیو)_ | `boolean` | `true`  | نمایش رنگِ سایه به‌عنوان پس‌زمینه‌ی input |
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `setInputBackground` *(directive)* | `boolean` | `true` | Shows the shadow color as the input's background |
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه. صفحه‌ی درگِ سایه با Pointer Capture پیاده شده (بدون نیاز به listener سراسری روی document)، پس روی موبایل هم روون کار می‌کنه.
+Supported automatically. The shadow-offset pad is implemented with Pointer Capture (no global `document` listener needed), so it works smoothly on mobile too.

package/color-picker/README.md

@@ -1,25 +1,22 @@
 # ngx-kit/color-picker
 
-انتخاب‌گر رنگ کامل: پیکر بصری (اشباع/فام)، ورودی RGB/HSL/CMYK/HEX، کانال آلفا، و پشتیبانی از EyeDropper API مرورگر برای برداشتن رنگ از هرجای صفحه.
+A complete color picker: a visual picker (saturation/hue), RGB/HSL/CMYK/HEX inputs, an alpha channel, and support for the browser's EyeDropper API to pick a color from anywhere on the screen.
 
-## نصب
+## Install
 
 ```bash
 npm install ngx-kit
 ```
 
-## استفاده به‌عنوان کامپوننت
+## Usage as a component
 
 ```html
-<ngx-input-color
-  [(ngModel)]="color"
-  [outputType]="'HEX'"
-  [defaultInspector]="ColorInspector.Picker"></ngx-input-color>
+<ngx-input-color [(ngModel)]="color" [outputType]="'HEX'" [defaultInspector]="ColorInspector.Picker"></ngx-input-color>
 ```
 
-`NgxInputColorComponent` یه `ControlValueAccessor` کامله، پس با `ngModel`، `formControl`، `formControlName` همه کار می‌کنه.
+`NgxInputColorComponent` is a full `ControlValueAccessor`, so it works with `ngModel`, `formControl`, and `formControlName`.
 
-## استفاده به‌عنوان دایرکتیو (روی یه input معمولی)
+## Usage as a directive (on a plain input)
 
 ```html
 <input type="text" [ngxInputColor]="color" (change)="color = $event" [outputType]="'RGB'" />
@@ -29,24 +26,24 @@ npm install ngx-kit
 
 ### `<ngx-input-color>` / `[ngxInputColor]`
 
-| ورودی                                      | نوع                                               | پیش‌فرض  | توضیح                                                       |
-| ------------------------------------------ | ------------------------------------------------- | -------- | ----------------------------------------------------------- |
-| `theme`                                    | `'light' \| 'dark' \| 'auto'`                     | `'auto'` | `'auto'` یعنی از `prefers-color-scheme` مرورگر پیروی می‌کنه |
-| `simpleMode`                               | `boolean`                                         | `false`  | حالت جمع‌وجورتر UI                                          |
-| `outputType`                               | `'HEX' \| 'RGB' \| 'HSL' \| 'HSV' \| 'CMYK'`      | `'HEX'`  | فرمتِ رشته‌ی خروجی                                          |
-| `defaultInspector`                         | `ColorInspector` (`Picker \| RGB \| HSL \| CMYK`) | `Picker` | تبِ پیش‌فرضِ باز                                            |
-| `useAlphaChannel`                          | `boolean`                                         | `true`   | نمایش/عدم‌نمایش کانال شفافیت                                |
-| `setInputBackgroundColor` _(فقط دایرکتیو)_ | `boolean`                                         | `true`   | پس‌زمینه‌ی خودِ input رو به رنگ انتخاب‌شده تنظیم می‌کنه     |
-| `change` _(خروجی، فقط دایرکتیو)_           | `EventEmitter<string>`                            |          | مقدار جدید هر بار که رنگ عوض بشه                            |
+| Input | Type | Default | Description |
+| --- | --- | --- | --- |
+| `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | `'auto'` follows the browser's `prefers-color-scheme` |
+| `simpleMode` | `boolean` | `false` | A more compact UI |
+| `outputType` | `'HEX' \| 'RGB' \| 'HSL' \| 'HSV' \| 'CMYK'` | `'HEX'` | Output string format |
+| `defaultInspector` | `ColorInspector` (`Picker \| RGB \| HSL \| CMYK`) | `Picker` | Which tab is open by default |
+| `useAlphaChannel` | `boolean` | `true` | Show/hide the alpha (transparency) channel |
+| `setInputBackgroundColor` *(directive only)* | `boolean` | `true` | Sets the input's own background to the selected color |
+| `change` *(output, directive only)* | `EventEmitter<string>` | | The new value whenever the color changes |
 
-### فرمت‌های ورودی/خروجی
+### Input/output formats
 
-مقدار می‌تونه هر کدوم از این‌ها باشه: `#rrggbb`, `#rrggbbaa` (شامل مخفف ۳ و ۴ کاراکتری با آلفا)، `rgb()`/`rgba()`، `hsl()`/`hsla()`.
+The value can be any of: `#rrggbb`, `#rrggbbaa` (including 3- and 4-character shorthand with alpha), `rgb()`/`rgba()`, `hsl()`/`hsla()`.
 
 ## EyeDropper
 
-اگه مرورگر کاربر از [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) پشتیبانی کنه (کروم/اج جدید)، دکمه‌ی قطره‌چکان خودکار فعال می‌شه و کاربر می‌تونه رنگ رو از هرجای صفحه (حتی بیرون از مرورگر) بردارد. در مرورگرهایی که پشتیبانی نمی‌کنن، این دکمه مخفی می‌مونه.
+If the user's browser supports the [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) (recent Chrome/Edge), the eyedropper button is enabled automatically and the user can pick a color from anywhere on the page (even outside the browser). On browsers without support, the button stays hidden.
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه.
+Supported automatically.

package/data-table/README.md

@@ -1,14 +1,14 @@
 # ngx-kit/data-table
 
-جدول داده‌ی سیگنال‌محور با تایپ‌سیفتیِ کامل: تعریف ستون‌ها و رندررهای سفارشی طوری تایپ شدن که TypeScript خودش جلوی ستون‌های نامعتبر یا `rendererInputs` غلط رو می‌گیره. سورت (تک/چندستونه)، صفحه‌بندی، حالت lazy (سمت سرور)، و ریسایز ستون با Pointer Capture.
+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
@@ -25,7 +25,7 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
-## تعریفِ type-safe ستون‌ها
+## Type-safe column definitions
 
 ```ts
 interface Tenant {
@@ -37,15 +37,15 @@ interface Tenant {
 const renderers = defineRenderers({ avatar: AvatarCellRenderer, boolean: BooleanCellRenderer });
 
 const fields = defineFields<Tenant, typeof renderers>(renderers, [
-  { column: 'avatarUrl', title: 'کاربر', renderer: 'avatar', rendererInputs: { showName: true } }, // ✅ تایپ‌چک می‌شه
-  { column: 'name', title: 'نام', sortable: true },
-  { column: 'isActive', title: 'فعال', renderer: 'boolean', align: 'center' },
+  { 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' },
 ]);
 ```
 
-اگه `column` یه فیلدِ واقعیِ `Tenant` نباشه، یا `renderer` یه کلیدِ واقعیِ رجیستری نباشه، یا `rendererInputs` با ورودی‌های واقعیِ اون رندرر هم‌خونی نداشته باشه — کامپایل خطا می‌ده، نه فقط runtime.
+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
@@ -53,18 +53,14 @@ const fields = defineFields<Tenant, typeof renderers>(renderers, [
   [data]="tenants"
   [totalRecords]="tenants.length"
   [pageSize]="20"
-  (sortChange)="onSortChange($event)"></ngx-table>
+  (sortChange)="onSortChange($event)"
+></ngx-table>
 ```
 
-### حالت lazy (صفحه‌بندی/سورت سمت سرور)
+### Lazy mode (server-side pagination/sorting)
 
 ```html
-<ngx-table
-  [fields]="fields"
-  [data]="page"
-  [totalRecords]="total"
-  [lazy]="true"
-  (lazyLoad)="fetchPage($event)"></ngx-table>
+<ngx-table [fields]="fields" [data]="page" [totalRecords]="total" [lazy]="true" (lazyLoad)="fetchPage($event)"></ngx-table>
 ```
 
 ```ts
@@ -76,45 +72,42 @@ fetchPage(ev: LazyLoadEvent<Tenant>) {
 
 ## API
 
-### ورودی‌های `<ngx-table>`
+### `<ngx-table>` inputs
 
-| ورودی              | نوع                               | توضیح                                                         |
-| ------------------ | --------------------------------- | ------------------------------------------------------------- |
-| `fields`           | `TableField<T, R>[]` **(اجباری)** | تعریفِ ستون‌ها (از `defineFields`)                            |
-| `data`             | `readonly T[]` **(اجباری)**       | دیتای صفحه‌ی جاری                                             |
-| `totalRecords`     | `number` **(اجباری)**             | تعداد کل ردیف‌ها (برای صفحه‌بندی)                             |
-| `pageSize`         | `number`                          | پیش‌فرض از `provideTable`                                     |
-| `lazy`             | `boolean`                         | اگه `true`، سورت/صفحه‌بندی رو خودِ اپ مدیریت می‌کنه (نه جدول) |
-| `loading`          | `boolean`                         | نمایش وضعیتِ بارگذاری                                         |
-| `showRecordNumber` | `boolean`                         | نمایش ستونِ شماره‌ی ردیف                                      |
+| 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
 
-| خروجی          | نوع                                | توضیح                                                                         |
-| -------------- | ---------------------------------- | ----------------------------------------------------------------------------- |
-| `sortChange`   | `SortMeta<T>[]`                    | تغییرِ سورت (حالت غیر-lazy)                                                   |
-| `lazyLoad`     | `LazyLoadEvent<T>`                 | صفحه/سورتِ جدید (حالت lazy) — شاملِ `pageIndex`, `pageSize`, `first`, `sorts` |
-| `columnResize` | `{ field: string; width: number }` | تغییرِ عرضِ ستون                                                              |
+| 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>
-  `,
+  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); // این خودکار به rendererInputs اضافه می‌شه
+  showName = input(false); // automatically usable in rendererInputs for this column
 }
 ```
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه.
+Supported automatically.

package/date-picker/README.md

@@ -1,16 +1,16 @@
 # ngx-kit/date-picker
 
-انتخاب‌گر تاریخ با پشتیبانی از چهار تقویم: میلادی، جلالی (شمسی)، هجری قمری، و چینی — با یه معماریِ آداپترمحور که اضافه‌کردنِ تقویم‌های دیگه رو هم ممکن می‌کنه. یه کامپوننتِ تقویمِ مستقل (`ngx-calendar`) هم داره که بدون input قابل‌استفاده‌ست.
+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
 
-آداپترهای تقویم باید provide بشن (پیش‌فرض هر چهارتاش رو با هم می‌ده؛ اگه فقط بعضی‌هاشون رو لازم دارید، bundle سبک‌تر می‌مونه چون هرکدوم لازی import می‌شن):
+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
@@ -21,15 +21,10 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
-## استفاده
+## Usage
 
 ```html
-<input
-  type="text"
-  [ngxInputDatePicker]="date"
-  (change)="date = $event"
-  [locale]="'fa'"
-  [displayFormat]="'yyyy/MM/dd'" />
+<input type="text" [ngxInputDatePicker]="date" (change)="date = $event" [locale]="'fa'" [displayFormat]="'yyyy/MM/dd'" />
 ```
 
 ```html
@@ -40,35 +35,35 @@ export const appConfig: ApplicationConfig = {
 
 ### `[ngxInputDatePicker]`
 
-| ورودی              | نوع                                                                     | پیش‌فرض        | توضیح                                                                                  |
-| ------------------ | ----------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------- |
-| `locale`           | `string` (`'en'`, `'fa'`, `'hi'`, `'zh'`, یا هر لوکیلِ سفارشیِ ثبت‌شده) | `'en'`         | تقویمی که استفاده می‌شه                                                                |
-| `theme`            | `'light' \| 'dark' \| 'auto'`                                           | `'auto'`       |                                                                                        |
-| `displayFormat`    | `string`                                                                | `'yyyy/MM/dd'` | فرمتِ نمایشِ متنیِ تاریخ                                                               |
-| `min` / `max`      | `Date`                                                                  |                | محدوده‌ی مجاز                                                                          |
-| `config`           | `NgxDatePickerConfig`                                                   |                | نمایش/متنِ دکمه‌های «امروز»/«پاک کردن»، تمپلیت‌های سفارشیِ آیکون‌ها                    |
-| `change` _(خروجی)_ | `EventEmitter<Date>`                                                    |                | تاریخِ انتخاب‌شده (همیشه یه شیءِ `Date` استاندارد جاوااسکریپت، مستقل از تقویمِ نمایشی) |
+| 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()`
 
-لیستِ لوکیل‌های فعلاً ثبت‌شده رو برمی‌گردونه (برای مثال برای پرکردنِ یه `<select>` انتخابِ زبان):
+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` باید اینترفیس `IDateAdapter` رو پیاده کنه.
+`MyJapaneseAdapter` must implement the `IDateAdapter` interface.
 
-## نکته‌ی پرفورمنس
+## Performance note
 
-تقویم‌های هجری و چینی (که جدولی/نجومی‌ان، نه فرمولی مثلِ میلادی/جلالی) نتایجِ محاسبات‌شون رو داخلی cache می‌کنن — چون رندر یه ماهِ تقویم، برای هر خانه‌ی روز جدا محاسبه‌ی تاریخ رو صدا می‌زنه؛ بدون کش، این می‌تونست برای سال‌های دور از امروز چند صد میلی‌ثانیه طول بکشه.
+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.
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه (تقویمِ جلالی/هجری به‌طور طبیعی هم RTL هستن).
+Supported automatically (the Jalali/Hijri calendars are naturally RTL too).

package/dialog/README.md

@@ -1,16 +1,14 @@
 # ngx-kit/dialog
 
-مودال/دیالوگ روی پایه‌ی `<dialog>` بومیِ مرورگر — بدون overlay دستی، بدون کتابخونه‌ی جانبی.
+Modal/dialog built on the browser's native `<dialog>` — no manual overlay, no third-party library.
 
-> ⚠️ اگه نسخه‌ی قبلیِ این README رو دیدید که از `DIALOG_REF` یا `ngx-dialog-header` یا پکیج جدای `ngx-dialog` حرف می‌زد — اون مال یه نسخه‌ی خیلی قدیمی‌تر بوده و با API فعلی هم‌خونی نداره. این نسخه به‌روزه.
-
-## نصب
+## Install
 
 ```bash
 npm install ngx-kit
 ```
 
-## راه‌اندازی
+## Setup
 
 ```ts
 // app.config.ts
@@ -22,9 +20,9 @@ export const appConfig: ApplicationConfig = {
 };
 ```
 
-## باز کردن یه دیالوگ
+## Opening a dialog
 
-با API استاتیک (بدون تزریق دستیِ سرویس):
+With the static API (no manual service injection needed):
 
 ```ts
 import { Dialog } from 'ngx-kit/dialog';
@@ -33,19 +31,19 @@ const ref = Dialog.open(MyDialogComponent, {
   data: { userId: 42 },
   width: '480px',
   allowCloseOnOutsideClick: true,
-  header: { enable: true, title: 'ویرایش کاربر', showCloseButton: true },
+  header: { enable: true, title: 'Edit user', showCloseButton: true },
 });
 
-ref.afterClosed.subscribe((result) => console.log('نتیجه:', result));
+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); // دیتایی که با config.data پاس داده شده
+  data = inject(NGX_DIALOG_DATA); // the data passed via config.data
 
   save() {
     this.ref.close({ saved: true });
@@ -53,13 +51,13 @@ export class MyDialogComponent {
 }
 ```
 
-### دایرکتیوهای layout داخل دیالوگ
+### Layout directives inside a dialog
 
 ```html
-<div *ngxDialogHeader>عنوانِ سفارشی</div>
-<div *ngxDialogBody>محتوای اصلی</div>
+<div *ngxDialogHeader>Custom title</div>
+<div *ngxDialogBody>Main content</div>
 <div *ngxDialogFooter>
-  <button (click)="save()">ذخیره</button>
+  <button (click)="save()">Save</button>
 </div>
 ```
 
@@ -67,28 +65,28 @@ export class MyDialogComponent {
 
 ### `Dialog.open<T>(component, config?)`
 
-| فیلدِ `config`                                              | نوع        | پیش‌فرض     | توضیح                                              |
-| ----------------------------------------------------------- | ---------- | ----------- | -------------------------------------------------- |
-| `data`                                                      | `T`        | `{}`        | دیتایی که به کامپوننتِ داخلِ دیالوگ پاس داده می‌شه |
-| `allowCloseOnOutsideClick`                                  | `boolean`  | `false`     | بستن با کلیک روی backdrop                          |
-| `containerClass`                                            | `string`   | `'ngx-kit'` | کلاسِ اضافی روی container                          |
-| `header.enable` / `header.title` / `header.showCloseButton` |            |             | تنظیمات هدرِ پیش‌فرض                               |
-| `footer.enable`                                             | `boolean`  |             | نمایش فوتر پیش‌فرض                                 |
-| `width` / `minWidth` / `maxWidth`                           | `string`   |             | ابعاد افقی                                         |
-| `height` / `minHeight` / `maxHeight`                        | `string`   |             | ابعاد عمودی                                        |
-| `injector`                                                  | `Injector` |             | تزریق‌کننده‌ی سفارشی برای کامپوننتِ داخلی          |
+| `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`
 
-| عضو                            | توضیح                                     |
-| ------------------------------ | ----------------------------------------- |
-| `close(result?)`               | بستن دیالوگ، با ارسال یه نتیجه‌ی اختیاری  |
-| `afterClosed: Observable<any>` | با `result` صدا زده می‌شه بعد از بسته‌شدن |
+| Member | Description |
+| --- | --- |
+| `close(result?)` | Closes the dialog, optionally passing back a result |
+| `afterClosed: Observable<any>` | Emits `result` after the dialog closes |
 
-## نکته‌ی SSR
+## SSR note
 
-`Dialog.open(...)` یه API استاتیک/سراسریه که برای اپ‌های معمولیِ مرورگری کاملاً امنه. اگه از Angular SSR استفاده می‌کنید، این static instance بینِ درخواست‌های هم‌زمانِ سرور مشترکه — به‌جای API استاتیک، مستقیماً `NgxOverlayService` رو تزریق و ازش استفاده کنید (که per-injector/per-request امنه).
+`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).
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه (`light-dark()` + CSS logical properties).
+Supported automatically (`light-dark()` + CSS logical properties).