ngx-kit 6.0.1 → 6.0.2

package/message/README.md

@@ -1,70 +1,70 @@
 # ngx-kit/message
 
-دیالوگ‌های alert/confirm (شبیه SweetAlert)، با API استاتیک قابل‌فراخوانی از هرجای اپ.
+Alert/confirm dialogs (SweetAlert-style), with a static API callable from anywhere in the app.
 
-## نصب
+## Install
 
 ```bash
 npm install ngx-kit
 ```
 
-## راه‌اندازی
+## Setup
 
-``` typescript
+```ts
 // app.config.ts
 import { provideMessage } from 'ngx-kit/message';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideMessage({ confirmButtonText: 'باشه' /* پیش‌فرض‌های سراسری */ })],
+  providers: [provideMessage({ confirmButtonText: 'OK' /* global defaults */ })],
 };
 ```
 
-## استفاده
+## Usage
 
 ```ts
 import { MSG } from 'ngx-kit/message';
 
-MSG.success('ذخیره شد!', 'تغییرات با موفقیت ثبت شدن.');
-MSG.error('خطا', 'مشکلی پیش اومد.');
-MSG.warning('هشدار', 'مطمئنید؟');
-MSG.info('اطلاع', 'این یه پیامِ اطلاعاتیه.');
-MSG.question('سؤال', 'ادامه بدیم؟');
-MSG.loading('در حال پردازش…');
+MSG.success('Saved!', 'Your changes were saved successfully.');
+MSG.error('Error', 'Something went wrong.');
+MSG.warning('Warning', 'Are you sure?');
+MSG.info('Heads up', 'This is an informational message.');
+MSG.question('Question', 'Continue?');
+MSG.loading('Processing…');
 
-// کنترلِ کامل روی گزینه‌ها:
+// full control over options:
 const result = MSG.show({
-  title: 'حذف شود؟',
-  text: 'این عمل قابل بازگشت نیست.',
+  title: 'Delete this?',
+  text: 'This action cannot be undone.',
   showCancelButton: true,
   showDenyButton: true,
-  confirmButtonText: 'بله، حذف کن',
+  confirmButtonText: 'Yes, delete it',
 });
 result.afterClose.subscribe((r) => console.log(r));
 ```
 
 ## API
 
-### `MSG` (و alias آن `Modal`)
+### `MSG` (and its alias `Modal`)
 
-| متد                                                               | امضا                       | توضیح           |
-| ----------------------------------------------------------------- | -------------------------- | --------------- |
-| `show(options?)`                                                  | `IMessageOptions`          | کنترلِ کامل     |
-| `info` / `success` / `warning` / `error` / `question` / `loading` | `(title, text?, options?)` | میان‌برهای رایج |
+| Method | Signature | Description |
+| --- | --- | --- |
+| `show(options?)` | `IMessageOptions` | Full control |
+| `info` / `success` / `warning` / `error` / `question` / `loading` | `(title, text?, options?)` | Common shortcuts |
 
-### `IMessageOptions` (مهم‌ترین فیلدها)
+### `IMessageOptions` (key fields)
 
-| فیلد                                                        | نوع           | پیش‌فرض                      | توضیح                                                                                                             |
-| ----------------------------------------------------------- | ------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------- |
-| `title` / `text` / `html`                                   | `string`      |                              | محتوا (`html` سنیتایز نمی‌شه — مسئولیتِ escape با خودتونه)                                                        |
-| `icon`                                                      | `MessageIcon` |                              | آیکونِ نمایشی                                                                                                     |
-| `showConfirmButton` / `showDenyButton` / `showCancelButton` | `boolean`     | `true` / `false` / `false`   |                                                                                                                   |
-| `confirmButtonText` / `denyButtonText` / `cancelButtonText` | `string`      | `'OK'` / `'No'` / `'Cancel'` |                                                                                                                   |
-| `allowOutsideClick` / `allowEscapeKey` / `allowEnterKey`    | `boolean`     | `true`                       | نحوه‌ی بستنِ پیام                                                                                                 |
-| `showCloseButton`                                           | `boolean`     | `false`                      | دکمه‌ی ✕                                                                                                          |
-| `useOverlay`                                                | `boolean`     |                              | برای وقتی که داخل یه دیالوگِ دیگه (مثلاً Angular Material) استفاده می‌شه، لایه‌ی نمایشی رو به بالاترین سطح می‌بره |
+| Field | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` / `text` / `html` | `string` | | Content (`html` is not sanitized — escaping is your responsibility) |
+| `icon` | `MessageIcon` | | Icon shown |
+| `showConfirmButton` / `showDenyButton` / `showCancelButton` | `boolean` | `true` / `false` / `false` | |
+| `confirmButtonText` / `denyButtonText` / `cancelButtonText` | `string` | `'OK'` / `'No'` / `'Cancel'` | |
+| `allowOutsideClick` / `allowEscapeKey` / `allowEnterKey` | `boolean` | `true` | How the message can be dismissed |
+| `showCloseButton` | `boolean` | `false` | The ✕ button |
+| `useOverlay` | `boolean` | | For when it's used inside another dialog (e.g. Angular Material), raises the display layer to the top |
 
-اگه چند پیام هم‌زمان باز باشن، Escape/Enter فقط روی **آخرین (بالاترین) پیام** اثر می‌کنه، نه همه‌شون.
+If several messages are open at once, Escape/Enter only affect the **last (topmost) message**, not all of them.
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه.
+Supported automatically.

package/notify/README.md

@@ -1,56 +1,58 @@
 # ngx-kit/notify
 
-نوتیفیکیشن/toast گوشه‌ی صفحه، با API استاتیک، صف‌بندیِ خودکار (وقتی تعداد از حد مجاز بیشتر بشه)، و مکث‌کردنِ تایمر روی هاور.
+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 })],
+  providers: [
+    provideNotify({ timeout: 4000, position: 'top-center', dismissible: true }),
+  ],
 };
 ```
 
-## استفاده
+## Usage
 
 ```ts
 import { Notify } from 'ngx-kit/notify';
 
-Notify.success('ذخیره شد');
-Notify.error('پیام رو نتونستیم ارسال کنیم', 'دوباره تلاش کنید');
-Notify.warning('اتصال ضعیف است');
-Notify.info('نسخه‌ی جدید موجوده', undefined, { timeout: 8000 });
+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?)`                 |
+| `info` / `success` / `warning` / `error` | `(message, description?, options?)` |
 
 ### `NgxNotifyOptions`
 
-| فیلد           | نوع                     | پیش‌فرض        | توضیح                                                      |
-| -------------- | ----------------------- | -------------- | ---------------------------------------------------------- |
-| `timeout`      | `number` (ms)           | `3000`         | مدتِ نمایش قبل از بسته‌شدنِ خودکار                         |
-| `position`     | `NgxNotifyPositionType` | `'top-center'` | گوشه/مرکزِ نمایش                                           |
-| `maxVisible`   | `number`                | `10`           | بیشتر از این تعداد صف می‌شن، نه هم‌پوشانی                  |
-| `allowHtml`    | `boolean`               | `false`        | اگه `true`، پیام به‌عنوان HTML رندر می‌شه (سنیتایز نمی‌شه) |
-| `pauseOnHover` | `boolean`               | `true`         | تایمر با هاور موس متوقف می‌شه                              |
-| `dismissible`  | `boolean`               | `true`         | نمایشِ دکمه‌ی بستن                                         |
-| `closeOnTap`   | `boolean`               | `true`         | با کلیک روی خودِ نوتیفیکیشن بسته بشه                       |
+| 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 |
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-خودکار پشتیبانی می‌شه.
+Supported automatically.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-kit",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "Angular input components",
   "author": "Mohammadreza Samani <mr.samani1368@gmail.com>",
   "license": "MIT",

package/shared/README.md

@@ -1,27 +1,27 @@
 # ngx-kit/shared
 
-ابزارها و سرویس‌های مشترکی که بقیه‌ی بسته‌های `ngx-kit` روشون بنا شدن: مدیریت اورلی/دیالوگ، تشخیص جهت صفحه (RTL/LTR)، تشخیص تنظیمات مرورگر، و چند کامپوننت پایه‌ی قابل‌استفاده‌ی مجدد (اسلایدر، رنج‌اسلایدر، صفحه‌ی اشباع رنگ).
+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).
 
-معمولاً مستقیم به این پکیج نیازی ندارید — بقیه‌ی بسته‌ها به‌صورت خودکار بهش وابسته‌ان. ولی اگه دارید یه کامپوننت سفارشی می‌سازید که باید با بقیه‌ی کتابخونه هم‌خونی داشته باشه (دارک‌مود، RTL، درگ‌وپرفورمنس)، از همین ابزارها استفاده کنید.
+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
 ```
 
-سبک‌های پایه (شامل `color-scheme` که دارک‌مود رو فعال می‌کنه) رو یک‌بار در سراسر اپ ایمپورت کنید:
+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`
 
-موتور اصلی پشتِ همه‌ی چیزهای شناور کتابخونه (منو، دیالوگ، پاپ‌آپ‌های رنگ/گرادیان/زاویه). یک المنت انگولاری رو داخل یک `<dialog>` بومیِ مرورگر (`showModal()`) نمایش می‌ده و نسبت به یک anchor موقعیت‌دهی می‌کنه.
+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';
@@ -38,20 +38,20 @@ const ref = overlay.open({
   margin: 8,
 });
 
-ref.close(); // OverlayRef.close() آرگومان یا afterClosed نداره؛ برای اون‌جور رفتار (نتیجه‌ی بازگشتی، افترکلوز) از ngx-kit/dialog استفاده کنید که روی همین سرویس بنا شده
+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:
 
-- **موقعیت‌دهی هوشمند**: اگه فضای کافی پایین anchor نباشه، خودکار بالا می‌ره (`placement:'auto'`).
-- **بستن با کلیک بیرون**: با تشخیص کلیک روی backdrop، نه با listener سراسری روی document.
-- **پشته‌بندی درست**: چند اورلیِ هم‌زمان (مثلاً یه منوی زیرمنو‌دار) درست کار می‌کنن؛ Escape فقط آخرین (بالاترین) اورلی رو می‌بنده.
-- **بازگشتِ فوکوس**: بعد از بسته‌شدن، فوکوس به همون المنتی که قبلش فوکوس داشت برمی‌گرده (دسترس‌پذیری).
-- **RTL خودکار**: alignment و placement بر اساس جهت واقعیِ صفحه (نه فقط یه فرض ثابت) حساب می‌شن.
+- **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`
 
-یه سیگنال (`isRtl(): boolean`) که با `MutationObserver` روی attribute-ی `dir` عنصر `<html>` گوش می‌ده و به‌محض تغییرش، ری‌اکتیو آپدیت می‌شه — یعنی اگه اپ شما زبان رو runtime عوض کنه، همه‌چیز خودکار هماهنگ می‌مونه.
+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);
@@ -62,14 +62,14 @@ direction.isRtl(); // signal<boolean>
 
 ```ts
 const browser = inject(BrowserService);
-browser.prefersDarkMode; // boolean — یه‌بار در لحظه‌ی ساخت سرویس خونده می‌شه
+browser.prefersDarkMode; // boolean — read once at service construction time
 ```
 
-## ابزارهای Utility
+## Utilities
 
 ### `startDragSession(callbacks)`
 
-جایگزینِ الگوی مشکل‌دارِ `@HostListener('document:mousemove', ...)` که listener رو برای کل عمر کامپوننت روی `document` نگه می‌داره (حتی وقتی دراگی در جریان نیست — یه مشکل واقعیِ پرفورمنس روی صفحاتی با چند نمونه‌ی هم‌زمان). این تابع فقط در طول یک درگِ واقعی، listener اضافه می‌کنه و خودش پاک می‌کنه؛ `touchmove` هم با `{passive:false}` مدیریت می‌شه، پس درگ‌کردن روی موبایل صفحه رو اسکرول نمی‌کنه.
+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';
@@ -80,7 +80,7 @@ function onPointerDown(ev: MouseEvent | TouchEvent) {
   stop?.();
   stop = startDragSession({
     onMove: (ev) => {
-      /* آپدیت موقعیت */
+      /* update position */
     },
     onEnd: () => {
       stop = undefined;
@@ -89,29 +89,29 @@ function onPointerDown(ev: MouseEvent | TouchEvent) {
 }
 ```
 
-> اگه کامپوننت‌تون `OnPush` هست و از `startDragSession` (به‌جای `@HostListener`) استفاده می‌کنید، حتماً داخل `onMove`/`onEnd` خودتون `ChangeDetectorRef.markForCheck()` رو صدا بزنید — برخلاف `@HostListener` که خودکار view رو dirty می‌کنه، `addEventListener` دستی این کار رو نمی‌کنه.
+> 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)`
 
-موقعیت pointer/touch رو نسبت به گوشه‌ی بالا-چپِ یه المنت مشخص برمی‌گردونه؛ برای پیاده‌سازیِ کامپوننت‌های درگ‌محور (اسلایدر، انتخاب‌گر رنگ و ...) استفاده می‌شه.
+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)`
 
-ادغام عمیقِ دو آبجکت کانفیگ (برای الگوی `provideXxx({...})` که همه‌ی کتابخونه ازش استفاده می‌کنه).
+Deep-merges two config objects (for the `provideXxx({...})` pattern used throughout the library).
 
-## کامپوننت‌های پایه
+## Base components
 
-اینا رو مستقیم هم می‌شه استفاده کرد، ولی بیشتر به‌عنوان بلوک‌های سازنده‌ی کامپوننت‌های دیگه (مثل `color-picker`, `box-shadow`) طراحی شدن:
+These can be used directly, but they're mostly designed as building blocks for other components (like `color-picker`, `box-shadow`):
 
-| کامپوننت               | Selector             | توضیح                                                               |
-| ---------------------- | -------------------- | ------------------------------------------------------------------- |
-| `SliderComponent`      | `slider`             | اسلایدر تک‌مقداره، `ControlValueAccessor`، `[min]`/`[max]`/`[step]` |
-| `RangeSliderComponent` | `range-slider`       | اسلایدر بازه‌ای (دو thumb)                                          |
-| `SaturationComponent`  | داخلی (color-picker) | صفحه‌ی دوبعدیِ انتخاب اشباع/روشنایی رنگ                             |
+| 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 |
 
-## دارک‌مود و RTL
+## Dark mode and RTL
 
-هر دو مستقیماً روی `ngx-kit/shared` تکیه دارن:
+Both rely directly on `ngx-kit/shared`:
 
-- **دارک‌مود**: از تابع CSS بومیِ `light-dark()` استفاده می‌شه. برای این‌که کار کنه، باید `color-scheme: light dark` (یا `only light`/`only dark` برای force کردن دستی) روی `:root` ست بشه — این کار با ایمپورت‌کردن `ngx-kit/styles/all.css` خودکار انجام می‌شه. برای force کردن دستیِ تم (مستقل از `prefers-color-scheme` سیستم)، `data-ngx-theme="dark"` یا `"light"` رو روی `<html>`/`<body>` بذارید.
-- **RTL**: با `dir="rtl"` روی `<html>` فعال می‌شه؛ همه‌جای کتابخونه از CSS logical properties (`inset-inline-start` و ...) استفاده شده، پس نیازی به استایل جداگانه نیست.
+- **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

@@ -0,0 +1,95 @@
+# 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-data-table.d.ts

@@ -21,7 +21,8 @@ interface PageState {
 }
 /** هر بار سرور باید صفحه‌ی جدید را (در حالت lazy) واکشی کند، امیت می‌شود. */
 interface LazyLoadEvent<T> extends PageState {
-    sorts: SortMeta<T>[];
+    sorts?: SortMeta<T>[];
+    sorting?: string;
 }
 
 interface PaginationLabel {
@@ -59,7 +60,7 @@ type RendererExtraInputs<C extends Type<any>> = {
     [K in keyof InstanceOf<C> as K extends 'value' | 'row' | 'field' ? never : InstanceOf<C>[K] extends () => any ? K : never]?: UnwrapSignal<InstanceOf<C>[K]>;
 };
 type ColumnAlign = 'start' | 'center' | 'end';
-type TableCellFormatter<T extends object = object> = (value: unknown, row: T, field: TableFieldBase<T>) => unknown;
+type TableCellFormatter<T extends object = object> = (value: any, row: T, field: TableFieldBase<T>) => any;
 interface CellTemplateContext<T extends object> {
     $implicit: T;
     row: T;
@@ -71,7 +72,14 @@ interface CellTemplateContext<T extends object> {
 interface TableFieldBase<T extends object> {
     column: Extract<keyof T, string>;
     title: string;
-    width?: number;
+    /**
+     * عرضِ این ستون. عدد یعنی پیکسل (`160` = `160px`)؛ رشته یعنی هر مقدار
+     * معتبرِ CSS length برای flex-basis (`'20%'`, `'12rem'`, ...). اگه اصلاً
+     * ندید، این ستون flex می‌شه (`flex: 1 1 0`) و فضای باقی‌مونده‌ی جدول رو پر
+     * می‌کنه — دقیقاً برخلافِ ستون‌هایی که width دارن (که `flex: 0 0 <width>`
+     * می‌گیرن و ثابت می‌مونن).
+     */
+    width?: number | string;
     minWidth?: number;
     maxWidth?: number;
     resizable?: boolean;
@@ -144,6 +152,7 @@ type ResolvedTableOptions = Required<Omit<NgxTableOptions, 'labels' | 'renderers
     labels: Required<TableLabels>;
     renderers: RendererRegistry;
     formatters: Readonly<Record<string, TableCellFormatter<any>>>;
+    lazy: boolean;
 };
 
 declare const NGX_TABLE_CONFIG_DEFAULT: ResolvedTableOptions;
@@ -210,6 +219,7 @@ declare class ColumnResize {
     readonly direction: _angular_core.InputSignal<"ltr" | "rtl">;
     readonly resizing: _angular_core.OutputEmitterRef<number>;
     readonly resizeEnd: _angular_core.OutputEmitterRef<number>;
+    private readonly elementRef;
     private dragging;
     private startX;
     private baseWidth;
@@ -248,9 +258,12 @@ declare class NgxTable<T extends object> implements OnInit, AfterContentInit {
     readonly operationWidth: _angular_core.InputSignal<number>;
     readonly numWidth: _angular_core.InputSignal<number>;
     readonly pageSize: _angular_core.InputSignal<number>;
+    readonly page: _angular_core.InputSignal<number>;
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly multiSort: _angular_core.InputSignal<boolean | undefined>;
     readonly lazy: _angular_core.InputSignal<boolean>;
+    readonly resizable: _angular_core.InputSignal<boolean>;
     /** پیش‌فرض بر اساس ایندکس؛ برای جلوگیری از گم‌شدن state سطرها هنگام سورت،
      *  یک شناسه‌ی یکتا بدهید: [trackBy]="(i, row) => row.id" */
     readonly trackBy: _angular_core.InputSignal<(index: number, row: T) => unknown>;
@@ -260,7 +273,7 @@ declare class NgxTable<T extends object> implements OnInit, AfterContentInit {
         field: string;
         width: number;
     }>;
-    protected readonly page: _angular_core.WritableSignal<number>;
+    protected readonly pageIndex: _angular_core.WritableSignal<number>;
     protected readonly pageSizeS: _angular_core.WritableSignal<number>;
     protected readonly sorts: _angular_core.WritableSignal<SortMeta<T>[]>;
     protected readonly widths: _angular_core.WritableSignal<Record<string, number>>;
@@ -287,6 +300,13 @@ declare class NgxTable<T extends object> implements OnInit, AfterContentInit {
     protected onPaginate(event: PageEvent): void;
     private emitLazyIfNeeded;
     protected columnWidth(column: string): number;
+    /**
+     * مقدار CSS `flex` واقعیِ این ستون:
+     *  - اگه دستی ریسایز شده یا width عددی داره → `0 0 <px>` (ثابت، بدون رشد/کوچک‌شدن)
+     *  - اگه width رشته‌ای داره (مثلاً '20%') → `0 0 <رشته>` (ثابت، هر واحد CSS معتبری)
+     *  - اگه اصلاً width نداره → `1 1 0` (رشد می‌کنه تا فضای باقی‌مونده‌ی جدول رو پر کنه)
+     */
+    protected columnFlex(field: TableField<T, any>): string;
     protected columnMin(field: TableField<T, any>): number;
     protected columnMax(field: TableField<T, any>): number;
     protected isResizable(field: TableField<T, any>): boolean;
@@ -302,7 +322,7 @@ declare class NgxTable<T extends object> implements OnInit, AfterContentInit {
      *  شود (مثلاً بعد از عوض‌شدن صفحه)، entry آن هم خودکار پاک می‌شود. */
     protected getRendererInputs(row: T, field: TableField<T, any>): Record<string, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxTable<any>, "ngx-table", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": true; "isSignal": true; }; "showRecordNumber": { "alias": "showRecordNumber"; "required": false; "isSignal": true; }; "operations": { "alias": "operations"; "required": false; "isSignal": true; }; "operationWidth": { "alias": "operationWidth"; "required": false; "isSignal": true; }; "numWidth": { "alias": "numWidth"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "multiSort": { "alias": "multiSort"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; }, { "lazyLoad": "lazyLoad"; "sortChange": "sortChange"; "columnResize": "columnResize"; }, ["cellTemplates"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxTable<any>, "ngx-table", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "totalRecords": { "alias": "totalRecords"; "required": true; "isSignal": true; }; "showRecordNumber": { "alias": "showRecordNumber"; "required": false; "isSignal": true; }; "operations": { "alias": "operations"; "required": false; "isSignal": true; }; "operationWidth": { "alias": "operationWidth"; "required": false; "isSignal": true; }; "numWidth": { "alias": "numWidth"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "multiSort": { "alias": "multiSort"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "lazyLoad": "lazyLoad"; "sortChange": "sortChange"; "columnResize": "columnResize"; }, ["cellTemplates"], never, true, never>;
 }
 
 declare class NgxPagination {