ngx-kit 5.0.0 → 6.0.1

package/README.md

@@ -1,2 +1,3 @@
-# NgxInput
-## Comming Soon...
+# NgxInput
+
+## Comming Soon...

package/angle-selector/README.md

@@ -0,0 +1,34 @@
+# ngx-kit/angle-selector
+
+انتخاب‌گر زاویه (۰ تا ۳۶۰ درجه) با یه دستگیره‌ی قابل‌درگِ دایره‌ای — برای تنظیمِ جهتِ گرادیان، چرخشِ سایه، یا هر مقدارِ زاویه‌ای دیگه.
+
+## نصب
+
+```bash
+npm install ngx-kit
+```
+
+## استفاده
+
+```html
+<ngx-input-angle [(ngModel)]="angle"></ngx-input-angle>
+```
+
+یا روی یه input معمولی:
+
+```html
+<input type="number" [ngxInputAngle]="angle" (change)="angle = $event" />
+```
+
+## API
+
+| ورودی                 | نوع                           | پیش‌فرض  | توضیح                      |
+| --------------------- | ----------------------------- | -------- | -------------------------- |
+| `theme`               | `'light' \| 'dark' \| 'auto'` | `'auto'` | تمِ کامپوننت               |
+| `change` _(دایرکتیو)_ | `EventEmitter<number>`        |          | زاویه‌ی جدید (بر حسب درجه) |
+
+مقدار همیشه یه عددِ بین `0` تا `360` هست.
+
+## دارک‌مود و RTL
+
+خودکار پشتیبانی می‌شه. دستگیره با RxJS (`switchMap` + `takeUntil` + `takeUntilDestroyed`) پیاده شده، پس listenerهای درگ فقط دقیقاً حین یه درگِ واقعی فعالن.

package/box-shadow/README.md

@@ -0,0 +1,33 @@
+# ngx-kit/box-shadow
+
+ابزار بصریِ ساختِ `box-shadow`: جابه‌جاییِ سایه با درگِ ماوس/تاچ روی یه صفحه‌ی دوبعدی، به‌همراه کنترلِ بلور، پخش (spread)، و رنگ.
+
+## نصب
+
+```bash
+npm install ngx-kit
+```
+
+## استفاده
+
+```html
+<ngx-box-shadow [(ngModel)]="shadowCss"></ngx-box-shadow>
+```
+
+یا روی یه input معمولی:
+
+```html
+<input type="text" [ngxInputBoxShadow]="shadowCss" (change)="shadowCss = $event" />
+```
+
+خروجی یه رشته‌ی معتبرِ CSS مثل `0px 4px 12px 0px rgba(0,0,0,0.25)` هست.
+
+## API
+
+| ورودی                             | نوع       | پیش‌فرض | توضیح                                     |
+| --------------------------------- | --------- | ------- | ----------------------------------------- |
+| `setInputBackground` _(دایرکتیو)_ | `boolean` | `true`  | نمایش رنگِ سایه به‌عنوان پس‌زمینه‌ی input |
+
+## دارک‌مود و RTL
+
+خودکار پشتیبانی می‌شه. صفحه‌ی درگِ سایه با Pointer Capture پیاده شده (بدون نیاز به listener سراسری روی document)، پس روی موبایل هم روون کار می‌کنه.

package/color-picker/README.md

@@ -0,0 +1,52 @@
+# ngx-kit/color-picker
+
+انتخاب‌گر رنگ کامل: پیکر بصری (اشباع/فام)، ورودی RGB/HSL/CMYK/HEX، کانال آلفا، و پشتیبانی از EyeDropper API مرورگر برای برداشتن رنگ از هرجای صفحه.
+
+## نصب
+
+```bash
+npm install ngx-kit
+```
+
+## استفاده به‌عنوان کامپوننت
+
+```html
+<ngx-input-color
+  [(ngModel)]="color"
+  [outputType]="'HEX'"
+  [defaultInspector]="ColorInspector.Picker"></ngx-input-color>
+```
+
+`NgxInputColorComponent` یه `ControlValueAccessor` کامله، پس با `ngModel`، `formControl`، `formControlName` همه کار می‌کنه.
+
+## استفاده به‌عنوان دایرکتیو (روی یه input معمولی)
+
+```html
+<input type="text" [ngxInputColor]="color" (change)="color = $event" [outputType]="'RGB'" />
+```
+
+## API
+
+### `<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>`                            |          | مقدار جدید هر بار که رنگ عوض بشه                            |
+
+### فرمت‌های ورودی/خروجی
+
+مقدار می‌تونه هر کدوم از این‌ها باشه: `#rrggbb`, `#rrggbbaa` (شامل مخفف ۳ و ۴ کاراکتری با آلفا)، `rgb()`/`rgba()`، `hsl()`/`hsla()`.
+
+## EyeDropper
+
+اگه مرورگر کاربر از [EyeDropper API](https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper) پشتیبانی کنه (کروم/اج جدید)، دکمه‌ی قطره‌چکان خودکار فعال می‌شه و کاربر می‌تونه رنگ رو از هرجای صفحه (حتی بیرون از مرورگر) بردارد. در مرورگرهایی که پشتیبانی نمی‌کنن، این دکمه مخفی می‌مونه.
+
+## دارک‌مود و RTL
+
+خودکار پشتیبانی می‌شه.

package/data-table/README.md

@@ -0,0 +1,120 @@
+# ngx-kit/data-table
+
+جدول داده‌ی سیگنال‌محور با تایپ‌سیفتیِ کامل: تعریف ستون‌ها و رندررهای سفارشی طوری تایپ شدن که TypeScript خودش جلوی ستون‌های نامعتبر یا `rendererInputs` غلط رو می‌گیره. سورت (تک/چندستونه)، صفحه‌بندی، حالت lazy (سمت سرور)، و ریسایز ستون با Pointer Capture.
+
+## نصب
+
+```bash
+npm install ngx-kit
+```
+
+## راه‌اندازی رندررها (اختیاری، ولی توصیه‌شده)
+
+```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 ستون‌ها
+
+```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: 'کاربر', renderer: 'avatar', rendererInputs: { showName: true } }, // ✅ تایپ‌چک می‌شه
+  { column: 'name', title: 'نام', sortable: true },
+  { column: 'isActive', title: 'فعال', renderer: 'boolean', align: 'center' },
+]);
+```
+
+اگه `column` یه فیلدِ واقعیِ `Tenant` نباشه، یا `renderer` یه کلیدِ واقعیِ رجیستری نباشه، یا `rendererInputs` با ورودی‌های واقعیِ اون رندرر هم‌خونی نداشته باشه — کامپایل خطا می‌ده، نه فقط runtime.
+
+## استفاده در تمپلیت
+
+```html
+<ngx-table
+  [fields]="fields"
+  [data]="tenants"
+  [totalRecords]="tenants.length"
+  [pageSize]="20"
+  (sortChange)="onSortChange($event)"></ngx-table>
+```
+
+### حالت lazy (صفحه‌بندی/سورت سمت سرور)
+
+```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>`
+
+| ورودی              | نوع                               | توضیح                                                         |
+| ------------------ | --------------------------------- | ------------------------------------------------------------- |
+| `fields`           | `TableField<T, R>[]` **(اجباری)** | تعریفِ ستون‌ها (از `defineFields`)                            |
+| `data`             | `readonly T[]` **(اجباری)**       | دیتای صفحه‌ی جاری                                             |
+| `totalRecords`     | `number` **(اجباری)**             | تعداد کل ردیف‌ها (برای صفحه‌بندی)                             |
+| `pageSize`         | `number`                          | پیش‌فرض از `provideTable`                                     |
+| `lazy`             | `boolean`                         | اگه `true`، سورت/صفحه‌بندی رو خودِ اپ مدیریت می‌کنه (نه جدول) |
+| `loading`          | `boolean`                         | نمایش وضعیتِ بارگذاری                                         |
+| `showRecordNumber` | `boolean`                         | نمایش ستونِ شماره‌ی ردیف                                      |
+
+### خروجی‌ها
+
+| خروجی          | نوع                                | توضیح                                                                         |
+| -------------- | ---------------------------------- | ----------------------------------------------------------------------------- |
+| `sortChange`   | `SortMeta<T>[]`                    | تغییرِ سورت (حالت غیر-lazy)                                                   |
+| `lazyLoad`     | `LazyLoadEvent<T>`                 | صفحه/سورتِ جدید (حالت lazy) — شاملِ `pageIndex`, `pageSize`, `first`, `sorts` |
+| `columnResize` | `{ field: string; width: number }` | تغییرِ عرضِ ستون                                                              |
+
+### تعریفِ یه رندررِ سفارشی
+
+```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); // این خودکار به rendererInputs اضافه می‌شه
+}
+```
+
+## دارک‌مود و RTL
+
+خودکار پشتیبانی می‌شه.

package/date-picker/README.md

@@ -0,0 +1,74 @@
+# ngx-kit/date-picker
+
+انتخاب‌گر تاریخ با پشتیبانی از چهار تقویم: میلادی، جلالی (شمسی)، هجری قمری، و چینی — با یه معماریِ آداپترمحور که اضافه‌کردنِ تقویم‌های دیگه رو هم ممکن می‌کنه. یه کامپوننتِ تقویمِ مستقل (`ngx-calendar`) هم داره که بدون input قابل‌استفاده‌ست.
+
+## نصب
+
+```bash
+npm install ngx-kit
+```
+
+## راه‌اندازی
+
+آداپترهای تقویم باید provide بشن (پیش‌فرض هر چهارتاش رو با هم می‌ده؛ اگه فقط بعضی‌هاشون رو لازم دارید، bundle سبک‌تر می‌مونه چون هرکدوم لازی import می‌شن):
+
+```ts
+// app.config.ts
+import { provideDateAdapters } from 'ngx-kit/date-picker';
+
+export const appConfig: ApplicationConfig = {
+  providers: [provideDateAdapters()],
+};
+```
+
+## استفاده
+
+```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]`
+
+| ورودی              | نوع                                                                     | پیش‌فرض        | توضیح                                                                                  |
+| ------------------ | ----------------------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------- |
+| `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` استاندارد جاوااسکریپت، مستقل از تقویمِ نمایشی) |
+
+### `getLocals()`
+
+لیستِ لوکیل‌های فعلاً ثبت‌شده رو برمی‌گردونه (برای مثال برای پرکردنِ یه `<select>` انتخابِ زبان):
+
+```ts
+availableLocals = getLocals(); // ['en', 'fa', 'hi', 'zh']
+```
+
+### افزودن یه تقویمِ سفارشی
+
+```ts
+provideDateAdapters({ locale: 'ja', useClass: MyJapaneseAdapter });
+```
+
+`MyJapaneseAdapter` باید اینترفیس `IDateAdapter` رو پیاده کنه.
+
+## نکته‌ی پرفورمنس
+
+تقویم‌های هجری و چینی (که جدولی/نجومی‌ان، نه فرمولی مثلِ میلادی/جلالی) نتایجِ محاسبات‌شون رو داخلی cache می‌کنن — چون رندر یه ماهِ تقویم، برای هر خانه‌ی روز جدا محاسبه‌ی تاریخ رو صدا می‌زنه؛ بدون کش، این می‌تونست برای سال‌های دور از امروز چند صد میلی‌ثانیه طول بکشه.
+
+## دارک‌مود و RTL
+
+خودکار پشتیبانی می‌شه (تقویمِ جلالی/هجری به‌طور طبیعی هم RTL هستن).

package/dialog/README.md

@@ -1,169 +1,94 @@
-# NgxDialog
-
-🎉 Open angular component as a dialog(popup) in Angular Framework without Cdk Material
-
-## 📦Demo
-
-[🚀demo](https://mr-samani.web.app/demo/dialog)
-
-## Install
-
-- NPM: npm i @mr-samani/ngx-dialog
-- YARN: yarn add @mr-samani/ngx-dialog
-
-## Usage
-
-Import `NgxDialogModule` to your working module
-
-```
-import { NgxDialogModule } from  'ngx-dialog';
-
-@NgModule({
-  imports: [
-    NgxDialogModule
-  ]
-})
-export class AppModule { }
-
-```
-
-## For open dialog
-
-```
-import { Component, OnInit } from '@angular/core';
-import { NgxOverlayService } from 'ngx-dialog';
-import { ModalComponent } from './modal/modal.component';
-
-@Component({
-  selector: 'app-demo',
-  templateUrl: './demo.component.html',
-  styleUrls: ['./demo.component.scss']
-})
-export class DemoComponent implements OnInit {
-
-  constructor(
-    private ngxDialog: NgxOverlayService
-  ) { }
-
-  ngOnInit(): void {
-  }
-
-
-  openDialog() {
-    this.ngxDialog.open(ModalComponent, {
-      data: {
-        a: 123
-      },
-      containerClass: 'my dialog ',
-      allowCloseOnOutsideClick: true,
-      maxWidth: '80%',
-      maxHeight: '80%'
-    }).afterClosed.subscribe((r: any) => {
-      console.log('closed result=', r);
-    });
-  }
-
-}
-```
-
-## Modal component
-
-```
-import { JsonPipe } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
-import { NgxDialogConfig, DIALOG_REF, NgxOverlayService } from 'ngx-dialog';
-
-@Component({
-  selector: 'app-modal',
-  templateUrl: './modal.component.html',
-  styleUrls: ['./modal.component.scss']
-})
-export class ModalComponent implements OnInit {
-  data: any;
-  private dialogRef = inject(DIALOG_REF);
-
-  constructor(
-    public config: NgxDialogConfig,
-    private ngxDialog: NgxOverlayService
-  ) {
-    this.data = config.data;
-  }
-
-  ngOnInit(): void {
-  }
-
-  ok() {
-    alert('param=' + new JsonPipe().transform(this.data));
-  }
-
-  cancel() {
-    this.dialogRef.close(this.data);
-  }
-
-
-  openNewDialog() {
-    this.ngxDialog.open(ModalComponent, {
-      data: {
-        a: this.data.a + 1
-      }
-    }).afterClosed.subscribe((r: any) => {
-      console.log('child closed result=', r);
-    });
-  }
-
-}
-```
-
-## Modal html
-
-```
-<div ngx-dialog-header [showCloseButton]="true">
-    header
-</div>
-<div ngx-dialog-body>
-    <p>modal works!</p>
-    {{data|json}}
-</div>
-<div ngx-dialog-footer [align]="'space-between'">
-    <div>
-        <button (click)="ok()" type="button" class="btn btn-primary mx-1">ok</button>
-        <button (click)="cancel()" type="button" class="btn btn-warning mx-1">cancel</button>
-    </div>
-
-    <button (click)="openNewDialog()" type="button" class="btn btn-info mx-1">open New Dialog</button>
-</div>
-```
-
-## For create draggable dialog:
-
-you can use NgxDragableResizable library
-[🚀npm](https://www.npmjs.com/package/ngx-dragable-resizable)
-and change dialog header to:
-
-```
- <div ngx-dialog-header [showCloseButton]="true" NgxDragableResizable [dragRootElement]="'.ngx-dialog'">
-       header
- </div>
-```
-
-## Dialog config
-
-| Name                       | Type    | Default | Description                                                |
-| -------------------------- | ------- | ------- | ---------------------------------------------------------- |
-| [data]                     | any     | {}      | Pass data to modal component                               |
-| [allowCloseOnOutsideClick] | boolean | false   | The user can close the modal by clicking outside the modal |
-| [containerClass]           | string  | null    | Css class name                                             |
-| [header]                   | string  | null    | Header config                                              |
-| [footer]                   | string  | null    | Footer config                                              |
-| [width]                    | string  | ""      | Width of dialog                                            |
-| [minWidth]                 | string  | ""      | Minimum width of dialog                                    |
-| [maxWidth]                 | string  | ""      | Maximum width of dialog                                    |
-| [height]                   | string  | ""      | Height of dialog                                           |
-| [minHeight]                | string  | ""      | Minimum height of dialog                                   |
-| [maxHeight]                | string  | ""      | Maximum height of dialog                                   |
-
-## Author
-
-💻Mohammadreza samani | FrontEnd Developer
-
-[❤️Buy me a coffee 😉](https://www.buymeacoffee.com/mrsamani/ngxdragableresizable)
+# ngx-kit/dialog
+
+مودال/دیالوگ روی پایه‌ی `<dialog>` بومیِ مرورگر — بدون overlay دستی، بدون کتابخونه‌ی جانبی.
+
+> ⚠️ اگه نسخه‌ی قبلیِ این README رو دیدید که از `DIALOG_REF` یا `ngx-dialog-header` یا پکیج جدای `ngx-dialog` حرف می‌زد — اون مال یه نسخه‌ی خیلی قدیمی‌تر بوده و با API فعلی هم‌خونی نداره. این نسخه به‌روزه.
+
+## نصب
+
+```bash
+npm install ngx-kit
+```
+
+## راه‌اندازی
+
+```ts
+// app.config.ts
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
+import { NgxDialogModule } from 'ngx-kit/dialog';
+
+export const appConfig: ApplicationConfig = {
+  providers: [importProvidersFrom(NgxDialogModule)],
+};
+```
+
+## باز کردن یه دیالوگ
+
+با API استاتیک (بدون تزریق دستیِ سرویس):
+
+```ts
+import { Dialog } from 'ngx-kit/dialog';
+
+const ref = Dialog.open(MyDialogComponent, {
+  data: { userId: 42 },
+  width: '480px',
+  allowCloseOnOutsideClick: true,
+  header: { enable: true, title: 'ویرایش کاربر', showCloseButton: true },
+});
+
+ref.afterClosed.subscribe((result) => console.log('نتیجه:', result));
+```
+
+داخل کامپوننتِ دیالوگ:
+
+```ts
+@Component({ ... })
+export class MyDialogComponent {
+  private ref = inject(NgxDialogRef);
+  data = inject(NGX_DIALOG_DATA); // دیتایی که با config.data پاس داده شده
+
+  save() {
+    this.ref.close({ saved: true });
+  }
+}
+```
+
+### دایرکتیوهای layout داخل دیالوگ
+
+```html
+<div *ngxDialogHeader>عنوانِ سفارشی</div>
+<div *ngxDialogBody>محتوای اصلی</div>
+<div *ngxDialogFooter>
+  <button (click)="save()">ذخیره</button>
+</div>
+```
+
+## API
+
+### `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` |             | تزریق‌کننده‌ی سفارشی برای کامپوننتِ داخلی          |
+
+### `NgxDialogRef`
+
+| عضو                            | توضیح                                     |
+| ------------------------------ | ----------------------------------------- |
+| `close(result?)`               | بستن دیالوگ، با ارسال یه نتیجه‌ی اختیاری  |
+| `afterClosed: Observable<any>` | با `result` صدا زده می‌شه بعد از بسته‌شدن |
+
+## نکته‌ی SSR
+
+`Dialog.open(...)` یه API استاتیک/سراسریه که برای اپ‌های معمولیِ مرورگری کاملاً امنه. اگه از Angular SSR استفاده می‌کنید، این static instance بینِ درخواست‌های هم‌زمانِ سرور مشترکه — به‌جای API استاتیک، مستقیماً `NgxOverlayService` رو تزریق و ازش استفاده کنید (که per-injector/per-request امنه).
+
+## دارک‌مود و RTL
+
+خودکار پشتیبانی می‌شه (`light-dark()` + CSS logical properties).