ngx-kit 3.2.0 → 5.0.0

package/fesm2022/ngx-kit-data-table.mjs

@@ -0,0 +1,619 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, input, inject, TemplateRef, Directive, output, HostListener, model, computed, effect, ChangeDetectionStrategy, Component, signal, ContentChildren } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { DirectionService } from 'ngx-kit/shared';
+
+/**
+ * Identity helper: یک رجیستری رندرر را با inference کامل تعریف می‌کند.
+ * همین آبجکت باید هم در provideTable({ renderers }) و هم در defineFields(renderers, ...)
+ * استفاده شود تا کلیدها (و ورودی‌های اضافه‌ی هر رندرر) در کل پروژه type-check شوند.
+ */
+function defineRenderers(registry) {
+    return registry;
+}
+/**
+ * Identity helper برای تعریف ستون‌های یک جدول با inference و type-check کامل
+ * نسبت به هم مدل داده (T) و هم رجیستری رندررها (R).
+ *
+ * @example
+ * const renderers = defineRenderers({ avatar: AvatarCellRenderer, boolean: BooleanCellRenderer });
+ *
+ * const fields = defineFields<Tenant, typeof renderers>(renderers, [
+ *   { column: 'avatarUrl', title: 'کاربر', renderer: 'avatar', rendererInputs: { showName: true } }, // ✅
+ *   { column: 'avatarUrl', title: 'کاربر', renderer: 'avatar', rendererInputs: { showName: 'x' } },  // ❌ باید boolean باشد
+ *   { column: 'isActive',  title: 'فعال', renderer: 'bool' },                                        // ❌ کلید رجیستری نیست
+ *   { column: 'ageXYZ',    title: '...' },                                                            // ❌ فیلد Tenant نیست
+ * ]);
+ */
+function defineFields(_renderers, fields) {
+    return fields;
+}
+
+const NGX_TABLE_CONFIG_DEFAULT = {
+    showRecordNumber: true,
+    hoverable: true,
+    multiSort: true,
+    resizable: true,
+    stickyHeader: true,
+    stripedRows: true,
+    column: { minWidth: 60, maxWidth: 600, defaultWidth: 150 },
+    labels: {
+        noData: 'There is no data to display!',
+        loading: 'Loading...',
+        operation: 'Operation',
+    },
+    renderers: {},
+    formatters: {},
+};
+/** به هر نمونه‌ی ngx-table تزریق می‌شود. با provideTable() مقداردهی کنید. */
+const NGX_TABLE_CONFIG = new InjectionToken('ngx-table-config', {
+    factory: () => NGX_TABLE_CONFIG_DEFAULT,
+});
+
+const NGX_PAGINATION_CONFIG_DEFAULT = {
+    defaultPageSize: 10,
+    pageSizeOptions: [5, 10, 20, 30, 50, 100],
+    labels: {
+        first: 'First',
+        last: 'Last',
+        next: 'Next',
+        previous: 'Previous',
+        showing: 'Showing',
+        to: 'to',
+        of: 'of',
+        results: 'results',
+        pageSize: 'Page Size',
+    },
+};
+const NGX_PAGINATION_CONFIG = new InjectionToken('ngx-pagination-config', {
+    factory: () => NGX_PAGINATION_CONFIG_DEFAULT,
+});
+
+function mergeTableConfig(base, override) {
+    if (!override)
+        return base;
+    return {
+        ...base,
+        ...override,
+        column: { ...base.column, ...override.column },
+        labels: { ...base.labels, ...override.labels },
+        renderers: { ...base.renderers, ...override.renderers },
+        formatters: { ...base.formatters, ...override.formatters },
+    };
+}
+/**
+ * کانفیگ سراسری <ngx-table>: جهت پیش‌فرض، حداقل/حداکثر عرض ستون، فعال بودن
+ * پیش‌فرض سورت چندستونه، و از همه مهم‌تر رجیستری رندررها.
+ *
+ * @example
+ * provideTable({
+ *   renderers: defineRenderers({ avatar: AvatarCellRenderer, boolean: BooleanCellRenderer }),
+ *   column: { minWidth: 80, maxWidth: 480, defaultWidth: 160 },
+ * })
+ */
+function provideTable(options) {
+    return makeEnvironmentProviders([
+        { provide: NGX_TABLE_CONFIG, useValue: mergeTableConfig(NGX_TABLE_CONFIG_DEFAULT, options) },
+    ]);
+}
+
+function mergePaginationConfig(base, override) {
+    if (!override)
+        return base;
+    return {
+        ...base,
+        ...override,
+        labels: { ...base.labels, ...override.labels },
+    };
+}
+function providePagination(options) {
+    return makeEnvironmentProviders([
+        {
+            provide: NGX_PAGINATION_CONFIG,
+            useValue: mergePaginationConfig(NGX_PAGINATION_CONFIG_DEFAULT, options),
+        },
+    ]);
+}
+
+/**
+ * برای projection قالب سفارشی یک ستون بدون این‌که مجبور باشید cellTemplate را
+ * از طریق ViewChild به آبجکت ستون وصل کنید:
+ *
+ *   <ngx-table [fields]="fields" [data]="rows()">
+ *     <ng-template ngxTableCell="userName" let-row let-value="value">
+ *       <strong>{{ value }}</strong>
+ *     </ng-template>
+ *   </ngx-table>
+ *
+ * مهم: چون این دایرکتیو در تمپلیت *کامپوننت مصرف‌کننده* (نه ngx-table) استفاده
+ * می‌شود، باید آن را در آرایه‌ی imports همان کامپوننت (standalone) وارد کنید:
+ *   imports: [NgxTable, TableCell]
+ *
+ * محدودیت شناخته‌شده: context این تمپلیت (row/value) از نوع T دقیق نیست
+ * (چون TemplateRef اینجا به‌صورت پویا از ContentChildren جمع‌آوری می‌شود و
+ * اطلاعات جنریک T در آن نقطه از بین می‌رود). برای type-safety کامل روی
+ * row/value، از field.cellTemplate به همراه @ViewChild استفاده کنید (به README
+ * بخش «Cell Template کاملاً Type-Safe» مراجعه کنید).
+ */
+class TableCell {
+    column = input.required({ ...(ngDevMode ? { debugName: "column" } : /* istanbul ignore next */ {}), alias: 'ngxTableCell' });
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: TableCell, isStandalone: true, selector: "ng-template[ngxTableCell]", inputs: { column: { classPropertyName: "column", publicName: "ngxTableCell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TableCell, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[ngxTableCell]',
+                    standalone: true,
+                }]
+        }], propDecorators: { column: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxTableCell", required: true }] }] } });
+
+/**
+ * دستگیره‌ی درگ برای ریسایز ستون. روی لبه‌ی «انتهای منطقی» (inline-end) قرار
+ * می‌گیرد، یعنی خودش زیر [dir="rtl"] جابه‌جا می‌شود؛ فقط جهت محاسبه‌ی دلتا هم
+ * برعکس می‌شود تا حس درگ همیشه طبیعی باشد.
+ *
+ * مقدار نهایی توسط جدول در یک Map از عرض‌ها ذخیره می‌شود (نه در استایل مستقیم
+ * ستون)، به همراه علامت‌گذاری «دستی ریسایز شده» — یعنی بعد از این، هیچ
+ * re-render یا تغییر داده‌ای این عرض را از بین نمی‌برد.
+ */
+class ColumnResize {
+    startWidth = input.required({ ...(ngDevMode ? { debugName: "startWidth" } : /* istanbul ignore next */ {}), alias: 'ngxColumnResizeWidth' });
+    minWidth = input(40, { ...(ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {}), alias: 'ngxColumnResizeMin' });
+    maxWidth = input(1000, { ...(ngDevMode ? { debugName: "maxWidth" } : /* istanbul ignore next */ {}), alias: 'ngxColumnResizeMax' });
+    direction = input('ltr', { ...(ngDevMode ? { debugName: "direction" } : /* istanbul ignore next */ {}), alias: 'ngxColumnResizeDir' });
+    resizing = output();
+    resizeEnd = output();
+    dragging = false;
+    startX = 0;
+    baseWidth = 0;
+    onPointerDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dragging = true;
+        this.startX = event.clientX;
+        this.baseWidth = this.startWidth();
+        event.target.setPointerCapture(event.pointerId);
+    }
+    onPointerMove(event) {
+        if (!this.dragging)
+            return;
+        this.resizing.emit(this.computeWidth(event.clientX));
+    }
+    onPointerUp(event) {
+        if (!this.dragging)
+            return;
+        this.dragging = false;
+        this.resizeEnd.emit(this.computeWidth(event.clientX));
+    }
+    computeWidth(clientX) {
+        const delta = clientX - this.startX;
+        const signedDelta = this.direction() === 'rtl' ? -delta : delta;
+        const raw = this.baseWidth + signedDelta;
+        return Math.min(this.maxWidth(), Math.max(this.minWidth(), raw));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnResize, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.4", type: ColumnResize, isStandalone: true, selector: "[ngxColumnResize]", inputs: { startWidth: { classPropertyName: "startWidth", publicName: "ngxColumnResizeWidth", isSignal: true, isRequired: true, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "ngxColumnResizeMin", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "ngxColumnResizeMax", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "ngxColumnResizeDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resizing: "resizing", resizeEnd: "resizeEnd" }, host: { attributes: { "role": "separator", "aria-orientation": "vertical" }, listeners: { "pointerdown": "onPointerDown($event)", "pointermove": "onPointerMove($event)", "pointerup": "onPointerUp($event)", "pointercancel": "onPointerUp($event)" }, classAttribute: "ngx-table__resize-handle" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnResize, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngxColumnResize]',
+                    standalone: true,
+                    host: {
+                        class: 'ngx-table__resize-handle',
+                        role: 'separator',
+                        'aria-orientation': 'vertical',
+                    },
+                }]
+        }], propDecorators: { startWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxColumnResizeWidth", required: true }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxColumnResizeMin", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxColumnResizeMax", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "ngxColumnResizeDir", required: false }] }], resizing: [{ type: i0.Output, args: ["resizing"] }], resizeEnd: [{ type: i0.Output, args: ["resizeEnd"] }], onPointerDown: [{
+                type: HostListener,
+                args: ['pointerdown', ['$event']]
+            }], onPointerMove: [{
+                type: HostListener,
+                args: ['pointermove', ['$event']]
+            }], onPointerUp: [{
+                type: HostListener,
+                args: ['pointerup', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['pointercancel', ['$event']]
+            }] } });
+
+class NgxPagination {
+    config = inject(NGX_PAGINATION_CONFIG);
+    total = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    page = model(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageSize = model(this.config.defaultPageSize, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input(this.config.pageSizeOptions, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    labels = input(this.config.labels, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    siblingCount = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "siblingCount" }] : /* istanbul ignore next */ []));
+    boundaryCount = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boundaryCount" }] : /* istanbul ignore next */ []));
+    paginate = output();
+    totalPages = computed(() => Math.max(1, Math.ceil(this.total() / this.pageSize())), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalPages" }] : /* istanbul ignore next */ []));
+    firstItem = computed(() => this.total() === 0 ? 0 : (this.page() - 1) * this.pageSize() + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "firstItem" }] : /* istanbul ignore next */ []));
+    lastItem = computed(() => Math.min(this.firstItem() + this.pageSize() - 1, this.total()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lastItem" }] : /* istanbul ignore next */ []));
+    pages = computed(() => this.buildPages(this.page(), this.totalPages(), this.siblingCount(), this.boundaryCount()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // هر تغییری در page/pageSize را برای مصرف‌کننده امیت کن.
+        effect(() => {
+            this.paginate.emit({ page: this.page(), pageSize: this.pageSize() });
+        });
+        // اگر بعد از کوچک‌شدن total، صفحه‌ی جاری خارج از بازه افتاد، اصلاحش کن.
+        effect(() => {
+            const max = this.totalPages();
+            if (this.page() > max)
+                this.page.set(max);
+        });
+    }
+    buildPages(current, total, sibling = 1, boundary = 1) {
+        const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+        const totalNumbers = sibling * 2 + boundary * 2 + 3;
+        if (total <= totalNumbers)
+            return range(1, total);
+        const leftSibling = Math.max(current - sibling, boundary + 2);
+        const rightSibling = Math.min(current + sibling, total - boundary - 1);
+        const showLeftDots = leftSibling > boundary + 2;
+        const showRightDots = rightSibling < total - boundary - 1;
+        const pages = [];
+        pages.push(...range(1, boundary));
+        if (showLeftDots)
+            pages.push('...');
+        else
+            pages.push(...range(boundary + 1, leftSibling - 1));
+        pages.push(...range(leftSibling, rightSibling));
+        if (showRightDots)
+            pages.push('...');
+        else
+            pages.push(...range(rightSibling + 1, total - boundary));
+        pages.push(...range(total - boundary + 1, total));
+        return pages;
+    }
+    next() {
+        this.page.update((p) => Math.min(p + 1, this.totalPages()));
+    }
+    previous() {
+        this.page.update((p) => Math.max(1, p - 1));
+    }
+    first() {
+        this.page.set(1);
+    }
+    last() {
+        this.page.set(this.totalPages());
+    }
+    goto(page) {
+        if (typeof page !== 'number' || Number.isNaN(page))
+            return;
+        this.page.set(page);
+    }
+    onPageSizeChange(value) {
+        this.pageSize.set(Number(value));
+        this.page.set(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPagination, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxPagination, isStandalone: true, selector: "ngx-pagination", inputs: { total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange", paginate: "paginate" }, ngImport: i0, template: "<nav class=\"ngx-pagination\">\n  <div class=\"ngx-pagination__summary\">\n    {{ labels().showing }}\n    <span class=\"fw-semibold\">{{ firstItem() }}</span>\n    {{ labels().to }}\n    <span class=\"fw-semibold\">{{ lastItem() }}</span>\n    {{ labels().of }}\n    <span class=\"fw-semibold\">{{ total() }}</span>\n    {{ labels().results }}\n  </div>\n\n  <div class=\"ngx-pagination__controls\">\n    <ul class=\"ngx-pagination__list\">\n      <li [class.disabled]=\"page() === 1\" [title]=\"labels().first\">\n        <a (click)=\"first()\" class=\"icon\">\u00AB</a>\n      </li>\n      <li [class.disabled]=\"page() === 1\" [title]=\"labels().previous\">\n        <a (click)=\"previous()\" class=\"icon\">\u2039</a>\n      </li>\n\n      @for (item of pages(); track $index) {\n        <li class=\"ngx-pagination__page-num\" [class.active]=\"item === page()\">\n          @if (item !== page() && item !== '...') {\n            <a (click)=\"goto(+item)\">{{ item }}</a>\n          }\n          @if (item === page() || item === '...') {\n            <span>{{ item }}</span>\n          }\n        </li>\n      }\n\n      <li [class.disabled]=\"page() === totalPages()\" [title]=\"labels().next\">\n        <a (click)=\"next()\" class=\"icon\">\u203A</a>\n      </li>\n      <li [class.disabled]=\"page() === totalPages()\" [title]=\"labels().last\">\n        <a (click)=\"last()\" class=\"icon\">\u00BB</a>\n      </li>\n    </ul>\n\n    <div class=\"ngx-pagination__page-size\">\n      <span>{{ labels().pageSize }}:</span>\n      <select [ngModel]=\"pageSize()\" (ngModelChange)=\"onPageSizeChange($event)\">\n        @for (opt of pageSizeOptions(); track opt) {\n          <option [value]=\"opt\" [selected]=\"opt === pageSize()\">{{ opt }}</option>\n        }\n      </select>\n    </div>\n  </div>\n</nav>\n", styles: [".ngx-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.625rem 1rem;font-size:.8125rem}.ngx-pagination__controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.ngx-pagination__list{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.ngx-pagination__list li{min-width:1.75rem;height:1.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}.ngx-pagination__list li a,.ngx-pagination__list li span{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer;border-radius:6px;-webkit-user-select:none;user-select:none}.ngx-pagination__list li a.icon,.ngx-pagination__list li span.icon{font-size:20px;font-family:Courier New,Courier,monospace}.ngx-pagination__list li.active a,.ngx-pagination__list li.active span{background:var(--ngx-table-accent, #4f46e5);color:#fff;cursor:default}.ngx-pagination__list li.disabled{opacity:.4;pointer-events:none}.ngx-pagination__list li:hover:not(.active):not(.disabled) a{background:color-mix(in srgb,var(--ngx-table-accent, #4f46e5) 12%,transparent)}.ngx-pagination__page-size{display:flex;align-items:center;gap:.5rem}.ngx-pagination__page-size select{border-radius:6px;padding:.25rem .5rem;font-size:.8125rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxPagination, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-pagination', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ngx-pagination\">\n  <div class=\"ngx-pagination__summary\">\n    {{ labels().showing }}\n    <span class=\"fw-semibold\">{{ firstItem() }}</span>\n    {{ labels().to }}\n    <span class=\"fw-semibold\">{{ lastItem() }}</span>\n    {{ labels().of }}\n    <span class=\"fw-semibold\">{{ total() }}</span>\n    {{ labels().results }}\n  </div>\n\n  <div class=\"ngx-pagination__controls\">\n    <ul class=\"ngx-pagination__list\">\n      <li [class.disabled]=\"page() === 1\" [title]=\"labels().first\">\n        <a (click)=\"first()\" class=\"icon\">\u00AB</a>\n      </li>\n      <li [class.disabled]=\"page() === 1\" [title]=\"labels().previous\">\n        <a (click)=\"previous()\" class=\"icon\">\u2039</a>\n      </li>\n\n      @for (item of pages(); track $index) {\n        <li class=\"ngx-pagination__page-num\" [class.active]=\"item === page()\">\n          @if (item !== page() && item !== '...') {\n            <a (click)=\"goto(+item)\">{{ item }}</a>\n          }\n          @if (item === page() || item === '...') {\n            <span>{{ item }}</span>\n          }\n        </li>\n      }\n\n      <li [class.disabled]=\"page() === totalPages()\" [title]=\"labels().next\">\n        <a (click)=\"next()\" class=\"icon\">\u203A</a>\n      </li>\n      <li [class.disabled]=\"page() === totalPages()\" [title]=\"labels().last\">\n        <a (click)=\"last()\" class=\"icon\">\u00BB</a>\n      </li>\n    </ul>\n\n    <div class=\"ngx-pagination__page-size\">\n      <span>{{ labels().pageSize }}:</span>\n      <select [ngModel]=\"pageSize()\" (ngModelChange)=\"onPageSizeChange($event)\">\n        @for (opt of pageSizeOptions(); track opt) {\n          <option [value]=\"opt\" [selected]=\"opt === pageSize()\">{{ opt }}</option>\n        }\n      </select>\n    </div>\n  </div>\n</nav>\n", styles: [".ngx-pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:.625rem 1rem;font-size:.8125rem}.ngx-pagination__controls{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.ngx-pagination__list{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0;padding:0}.ngx-pagination__list li{min-width:1.75rem;height:1.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:6px}.ngx-pagination__list li a,.ngx-pagination__list li span{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer;border-radius:6px;-webkit-user-select:none;user-select:none}.ngx-pagination__list li a.icon,.ngx-pagination__list li span.icon{font-size:20px;font-family:Courier New,Courier,monospace}.ngx-pagination__list li.active a,.ngx-pagination__list li.active span{background:var(--ngx-table-accent, #4f46e5);color:#fff;cursor:default}.ngx-pagination__list li.disabled{opacity:.4;pointer-events:none}.ngx-pagination__list li:hover:not(.active):not(.disabled) a{background:color-mix(in srgb,var(--ngx-table-accent, #4f46e5) 12%,transparent)}.ngx-pagination__page-size{display:flex;align-items:center;gap:.5rem}.ngx-pagination__page-size select{border-radius:6px;padding:.25rem .5rem;font-size:.8125rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], paginate: [{ type: i0.Output, args: ["paginate"] }] } });
+
+/**
+ * جدول داده‌ی جنریک و Type-Safe.
+ *
+ * `T` از روی چیزی که به [data] بایند می‌کنید استنتاج می‌شود؛ `field.column` در
+ * `TableField<T, R>` محدود به `keyof T` است، و اگر از defineFields(renderers, ...)
+ * استفاده کنید، `field.renderer` محدود به کلیدهای رجیستری و `rendererInputs`
+ * دقیقاً همان ورودی‌های اضافه‌ی همان renderer است.
+ *
+ * دو حالت:
+ *  - کلاینت‌ساید (پیش‌فرض): [data] کل آرایه است؛ سورت/صفحه‌بندی داخلی و روی
+ *    یک computed خالص انجام می‌شود (بدون mutation روی آبجکت‌های شما).
+ *  - lazy: [lazy]="true" + [totalRecords]؛ [data] فقط صفحه‌ی جاری است؛ به
+ *    (lazyLoad) گوش بدهید.
+ */
+class NgxTable {
+    config = inject(NGX_TABLE_CONFIG);
+    paginationConfig = inject(NGX_PAGINATION_CONFIG);
+    // ---------------------------------------------------------------- inputs
+    fields = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    totalRecords = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalRecords" }] : /* istanbul ignore next */ []));
+    showRecordNumber = input(this.config.showRecordNumber, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showRecordNumber" }] : /* istanbul ignore next */ []));
+    operations = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "operations" }] : /* istanbul ignore next */ []));
+    operationWidth = input(60, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operationWidth" }] : /* istanbul ignore next */ []));
+    numWidth = input(60, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "numWidth" }] : /* istanbul ignore next */ []));
+    pageSize = input(this.paginationConfig.defaultPageSize, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    multiSort = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiSort" }] : /* istanbul ignore next */ []));
+    lazy = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    /** پیش‌فرض بر اساس ایندکس؛ برای جلوگیری از گم‌شدن state سطرها هنگام سورت،
+     *  یک شناسه‌ی یکتا بدهید: [trackBy]="(i, row) => row.id" */
+    trackBy = input((index) => index, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackBy" }] : /* istanbul ignore next */ []));
+    // --------------------------------------------------------------- outputs
+    lazyLoad = output();
+    sortChange = output();
+    columnResize = output();
+    // ------------------------------------------------------------ int. state
+    page = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageSizeS = signal(this.paginationConfig.defaultPageSize, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSizeS" }] : /* istanbul ignore next */ []));
+    sorts = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sorts" }] : /* istanbul ignore next */ []));
+    widths = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widths" }] : /* istanbul ignore next */ []));
+    manuallyResized = new Set();
+    rendererInputsCache = new Map();
+    cellTemplates;
+    templateMap = new Map();
+    resolvedMultiSort = computed(() => this.multiSort() ?? this.config.multiSort, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedMultiSort" }] : /* istanbul ignore next */ []));
+    directionService = inject(DirectionService);
+    resolvedDirection = computed(() => this.directionService.direction(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const ps = this.pageSize();
+            if (ps)
+                this.pageSizeS.set(ps);
+        });
+        // برای هر ستونِ تازه‌دیده‌شده یک عرض seed کن؛ ستون‌هایی که کاربر دستی
+        // ریسایز کرده دیگر هیچ‌وقت دوباره نوشته نمی‌شوند.
+        effect(() => {
+            const cols = this.fields();
+            const current = this.widths();
+            let changed = false;
+            const next = { ...current };
+            for (const f of cols) {
+                if (!(f.column in next) && !this.manuallyResized.has(f.column)) {
+                    next[f.column] = f.width ?? this.config.column.defaultWidth;
+                    changed = true;
+                }
+            }
+            if (changed)
+                this.widths.set(next);
+        });
+    }
+    ngOnInit() {
+        if (this.lazy()) {
+            this.lazyLoad.emit({ first: 0, pageIndex: 1, pageSize: this.pageSizeS(), sorts: [] });
+        }
+    }
+    ngAfterContentInit() {
+        this.syncTemplateMap();
+        this.cellTemplates.changes.subscribe(() => this.syncTemplateMap());
+    }
+    syncTemplateMap() {
+        this.templateMap.clear();
+        this.cellTemplates.forEach((cell) => {
+            // نکته‌ی مهم: cell.column() باید فراخوانی شود (سیگنال است)، نه cell.column.name.
+            this.templateMap.set(cell.column(), cell.templateRef);
+        });
+    }
+    // ------------------------------------------------------------- داده‌ها
+    sortedData = computed(() => {
+        if (this.lazy())
+            return this.data();
+        const sorts = this.sorts();
+        if (sorts.length === 0)
+            return this.data();
+        const copy = [...this.data()];
+        copy.sort((a, b) => {
+            for (const s of sorts) {
+                const cmp = this.compare(a[s.field], b[s.field]);
+                if (cmp !== 0)
+                    return s.direction === 'asc' ? cmp : -cmp;
+            }
+            return 0;
+        });
+        return copy;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
+    totalCount = computed(() => this.lazy() ? this.totalRecords() : this.data().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
+    pagedData = computed(() => {
+        if (this.lazy())
+            return this.sortedData();
+        const start = (this.page() - 1) * this.pageSizeS();
+        return this.sortedData().slice(start, start + this.pageSizeS());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagedData" }] : /* istanbul ignore next */ []));
+    compare(a, b) {
+        if (a == null && b == null)
+            return 0;
+        if (a == null)
+            return -1;
+        if (b == null)
+            return 1;
+        if (typeof a === 'number' && typeof b === 'number')
+            return a - b;
+        if (typeof a === 'boolean' && typeof b === 'boolean')
+            return a === b ? 0 : a ? 1 : -1;
+        if (a instanceof Date && b instanceof Date)
+            return a.getTime() - b.getTime();
+        return String(a).localeCompare(String(b));
+    }
+    /** بدون mutation روی داده‌ی ورودی: شماره‌ی ردیف صرفاً از روی page/pageSize/rowIndex محاسبه می‌شود. */
+    recordNumber(rowIndex) {
+        return (this.page() - 1) * this.pageSizeS() + rowIndex + 1;
+    }
+    // -------------------------------------------------------------- سورت
+    sortDirectionFor(column) {
+        return this.sorts().find((s) => s.field === column)?.direction ?? null;
+    }
+    onHeaderClick(field, event) {
+        if (!field.sortable)
+            return;
+        const column = field.column;
+        const current = this.sorts();
+        const existingIndex = current.findIndex((s) => s.field === column);
+        const isMultiGesture = this.resolvedMultiSort() && (event.shiftKey || event.ctrlKey || event.metaKey);
+        let next;
+        if (isMultiGesture) {
+            next = [...current];
+            if (existingIndex === -1) {
+                next.push({ field: column, direction: 'asc' });
+            }
+            else if (next[existingIndex].direction === 'asc') {
+                next[existingIndex] = { field: column, direction: 'desc' };
+            }
+            else {
+                next.splice(existingIndex, 1);
+            }
+        }
+        else if (existingIndex === -1 || current.length > 1) {
+            next = [{ field: column, direction: 'asc' }];
+        }
+        else if (current[0].direction === 'asc') {
+            next = [{ field: column, direction: 'desc' }];
+        }
+        else {
+            next = [];
+        }
+        this.sorts.set(next);
+        this.page.set(1);
+        this.sortChange.emit(next);
+        this.emitLazyIfNeeded();
+    }
+    // ------------------------------------------------------------ صفحه‌بندی
+    onPaginate(event) {
+        this.page.set(event.page);
+        this.pageSizeS.set(event.pageSize);
+        this.emitLazyIfNeeded();
+    }
+    emitLazyIfNeeded() {
+        if (!this.lazy())
+            return;
+        const pageIndex = this.page();
+        const pageSize = this.pageSizeS();
+        this.lazyLoad.emit({
+            pageIndex,
+            pageSize,
+            first: (pageIndex - 1) * pageSize,
+            sorts: this.sorts(),
+        });
+    }
+    // -------------------------------------------------------------- ریسایز
+    columnWidth(column) {
+        return this.widths()[column] ?? this.config.column.defaultWidth;
+    }
+    columnMin(field) {
+        return field.minWidth ?? this.config.column.minWidth;
+    }
+    columnMax(field) {
+        return field.maxWidth ?? this.config.column.maxWidth;
+    }
+    isResizable(field) {
+        return (field.resizable ?? this.config.resizable) !== false;
+    }
+    onColumnResizing(column, width) {
+        this.widths.update((w) => ({ ...w, [column]: width }));
+    }
+    onColumnResizeEnd(column, width) {
+        this.manuallyResized.add(column);
+        this.widths.update((w) => ({ ...w, [column]: width }));
+        this.columnResize.emit({ field: column, width });
+    }
+    // --------------------------------------------------------------- سلول‌ها
+    getTemplate(column) {
+        const fromDirective = this.templateMap.get(column);
+        if (fromDirective)
+            return fromDirective;
+        const fromFieldConfig = this.fields().find((f) => f.column === column)?.cellTemplate;
+        return fromFieldConfig ?? null;
+    }
+    getRenderer(field) {
+        if (!field.renderer)
+            return null;
+        // نکته: نوع دقیق field.renderer (که به کلیدهای رجیستری محدود است) در
+        // defineFields() چک می‌شود؛ اینجا فقط یک lookup رانتایم ساده لازم است.
+        return this.config.renderers[field.renderer] ?? null;
+    }
+    getCellValue(row, field) {
+        return row[field.column];
+    }
+    formatCellValue(row, field) {
+        const value = this.getCellValue(row, field);
+        if (typeof field.formatter === 'function') {
+            return this.stringify(field.formatter(value, row, field));
+        }
+        if (typeof field.formatter === 'string') {
+            const formatter = this.config.formatters[field.formatter];
+            if (formatter)
+                return this.stringify(formatter(value, row, field));
+        }
+        return this.stringify(value);
+    }
+    stringify(value) {
+        return value == null ? '' : String(value);
+    }
+    /** ورودی‌های renderer را به‌ازای هر (field, row) کش می‌کند تا هر Change
+     *  Detection یک آبجکت جدید ساخته نشود؛ با WeakMap، وقتی row از حافظه خارج
+     *  شود (مثلاً بعد از عوض‌شدن صفحه)، entry آن هم خودکار پاک می‌شود. */
+    getRendererInputs(row, field) {
+        let fieldCache = this.rendererInputsCache.get(field);
+        if (!fieldCache) {
+            fieldCache = new WeakMap();
+            this.rendererInputsCache.set(field, fieldCache);
+        }
+        let inputs = fieldCache.get(row);
+        if (!inputs) {
+            inputs = {
+                value: this.getCellValue(row, field),
+                row,
+                field,
+                ...(field.renderer ? field.rendererInputs : undefined),
+            };
+            fieldCache.set(row, inputs);
+        }
+        return inputs;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxTable, isStandalone: true, selector: "ngx-table", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, totalRecords: { classPropertyName: "totalRecords", publicName: "totalRecords", isSignal: true, isRequired: true, transformFunction: null }, showRecordNumber: { classPropertyName: "showRecordNumber", publicName: "showRecordNumber", isSignal: true, isRequired: false, transformFunction: null }, operations: { classPropertyName: "operations", publicName: "operations", isSignal: true, isRequired: false, transformFunction: null }, operationWidth: { classPropertyName: "operationWidth", publicName: "operationWidth", isSignal: true, isRequired: false, transformFunction: null }, numWidth: { classPropertyName: "numWidth", publicName: "numWidth", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, multiSort: { classPropertyName: "multiSort", publicName: "multiSort", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lazyLoad: "lazyLoad", sortChange: "sortChange", columnResize: "columnResize" }, host: { classAttribute: "ngx-table-host" }, queries: [{ propertyName: "cellTemplates", predicate: TableCell }], ngImport: i0, template: "<div class=\"ngx-table-wrapper\" [class.ngx-table--loading]=\"loading()\">\n  <div class=\"ngx-table-scroll\">\n    <div\n      class=\"ngx-table\"\n      [class.ngx-table--striped]=\"config.stripedRows\"\n      [class.ngx-table--hover]=\"config.hoverable\"\n      role=\"table\">\n      <div class=\"thead-mrs\" [class.thead-mrs--sticky]=\"config.stickyHeader\" role=\"rowgroup\">\n        <div class=\"tr-mrs\" role=\"row\">\n          @if (operations()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n              {{ config.labels.operation }}\n            </div>\n          }\n          @if (showRecordNumber()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n              #\n            </div>\n          }\n\n          @for (f of fields(); track f.column) {\n            <div\n              class=\"th-mrs\"\n              role=\"columnheader\"\n              [class.th-mrs--sortable]=\"f.sortable\"\n              [style.flex]=\"'0 0 ' + columnWidth(f.column) + 'px'\"\n              [attr.aria-sort]=\"\n                sortDirectionFor(f.column) === 'asc'\n                  ? 'ascending'\n                  : sortDirectionFor(f.column) === 'desc'\n                    ? 'descending'\n                    : null\n              \"\n              (click)=\"onHeaderClick(f, $event)\">\n              <span class=\"th-mrs__title\">{{ f.title }}</span>\n\n              @if (f.sortable) {\n                <span class=\"sort-icon\" [class.active]=\"sortDirectionFor(f.column) !== null\">\n                  @if (sortDirectionFor(f.column) === 'asc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H96V448c0 17.7 14.3 32 32 32s32-14.3 32-32V224h64c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z\" />\n                    </svg>\n                  } @else if (sortDirectionFor(f.column) === 'desc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 470.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H224V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V288H96c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" />\n                    </svg>\n                  } @else {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l96 96c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H224v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V192H96c-12.9 0-24.6-7.8-29.6-19.8s-2.3-25.7 6.9-34.9l96-96zM32 400c0-17.7 14.3-32 32-32H256c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32z\"\n                        opacity=\".35\" />\n                    </svg>\n                  }\n                </span>\n              }\n\n              @if (isResizable(f)) {\n                <span\n                  ngxColumnResize\n                  [ngxColumnResizeWidth]=\"columnWidth(f.column)\"\n                  [ngxColumnResizeMin]=\"columnMin(f)\"\n                  [ngxColumnResizeMax]=\"columnMax(f)\"\n                  [ngxColumnResizeDir]=\"resolvedDirection()\"\n                  (resizing)=\"onColumnResizing(f.column, $event)\"\n                  (resizeEnd)=\"onColumnResizeEnd(f.column, $event)\"\n                  (click)=\"$event.stopPropagation()\"></span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"tbody-mrs\" role=\"rowgroup\">\n        @if (!loading() && pagedData().length === 0) {\n          <div class=\"no-data\">{{ config.labels.noData }}</div>\n        }\n\n        @for (row of pagedData(); track trackBy()($index, row); let rowIndex = $index) {\n          <div class=\"tr-mrs\" role=\"row\">\n            @if (operations()) {\n              <div\n                class=\"td-mrs operations\"\n                role=\"cell\"\n                [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n                <div class=\"cel\">\n                  <span class=\"cell-title\">{{ config.labels.operation }}:</span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"operations()!\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n                </div>\n              </div>\n            }\n\n            @if (showRecordNumber()) {\n              <div class=\"td-mrs operations\" role=\"cell\" [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n                <div class=\"cel\">{{ recordNumber(rowIndex) }}</div>\n              </div>\n            }\n\n            @for (f of fields(); track f.column) {\n              @let template = getTemplate(f.column);\n              @let renderer = getRenderer(f);\n\n              <div class=\"td-mrs\" role=\"cell\" [style.flex]=\"'0 0 ' + columnWidth(f.column) + 'px'\">\n                <div class=\"cel\" [class.wrap]=\"f.wrap\">\n                  <span class=\"cell-title\">{{ f.title }}</span>\n\n                  @if (template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        row: row,\n                        value: getCellValue(row, f),\n                        rowIndex: rowIndex,\n                        field: f,\n                      }\"></ng-container>\n                  } @else if (renderer) {\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        renderer;\n                        inputs: getRendererInputs(row, f)\n                      \"></ng-container>\n                  } @else {\n                    {{ formatCellValue(row, f) }}\n                  }\n\n                  @if (f.prefix) {\n                    <span>{{ f.prefix }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (loading()) {\n      <div class=\"loading-container\">\n        <div class=\"loading\">{{ config.labels.loading }}</div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngx-pagination\n  [page]=\"page()\"\n  [pageSize]=\"pageSizeS()\"\n  [total]=\"totalCount()\"\n  (paginate)=\"onPaginate($event)\"></ngx-pagination>\n", styles: [":host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #18181b);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111114);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #1e1b4b);--ngx-table-text: light-dark(#1e293b, #e4e4e7);--ngx-table-radius: 12px;display:block;color:var(--ngx-table-text)}.ngx-table-wrapper{position:relative;border:1px solid var(--ngx-table-border);border-radius:var(--ngx-table-radius);overflow:hidden;background:var(--ngx-table-row-bg)}.ngx-table-scroll{overflow:auto;max-height:75vh}.ngx-table-scroll::-webkit-scrollbar{height:10px;width:10px}.ngx-table-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ngx-table-border) 60%,gray);border-radius:8px}.ngx-table{display:flex;flex-direction:column;min-width:100%;width:max-content}.thead-mrs{display:flex;flex-direction:column;z-index:2}.thead-mrs--sticky{position:sticky;top:0}.tr-mrs{display:flex;align-items:stretch}.th-mrs,.td-mrs{position:relative;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--ngx-table-border);border-inline-end:1px solid var(--ngx-table-border)}.th-mrs:last-child,.td-mrs:last-child{border-inline-end:none}.th-mrs{display:flex;align-items:center;gap:.375rem;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg);font-weight:600;font-size:.8125rem;letter-spacing:.02em;padding:.75rem 1rem;-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis}.th-mrs--sortable{cursor:pointer}.th-mrs--sortable:hover{color:var(--ngx-table-accent)}.th-mrs.operations{justify-content:center}.th-mrs__title{overflow:hidden;text-overflow:ellipsis}.sort-icon{width:.75rem;height:.75rem;flex:none;opacity:.4;display:inline-flex}.sort-icon svg{width:100%;height:100%}.sort-icon.active{opacity:1}.ngx-table__resize-handle,[ngxColumnResize]{position:absolute;top:0;bottom:0;inset-inline-end:-3px;width:6px;cursor:col-resize;touch-action:none;z-index:3}.ngx-table__resize-handle:hover,.ngx-table__resize-handle:active,[ngxColumnResize]:hover,[ngxColumnResize]:active{background:var(--ngx-table-accent);opacity:.5}.td-mrs{display:flex;align-items:center;padding:.75rem 1rem;font-size:.875rem}.td-mrs.operations{justify-content:center}.cel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.25rem}.cel.wrap{white-space:normal}.cell-title{display:none;font-weight:600;color:var(--ngx-table-header-fg)}.ngx-table--striped .tbody-mrs .tr-mrs:nth-child(2n){background:var(--ngx-table-row-alt-bg)}.ngx-table--hover .tbody-mrs .tr-mrs:hover{background:var(--ngx-table-row-hover-bg)}.tr-mrs{transition:background-color .15s ease}.no-data{padding:2.5rem 1rem;text-align:center;color:#94a3b8;font-size:.875rem}.loading-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ngx-table-row-bg) 75%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.loading{font-size:.875rem;color:var(--ngx-table-accent)}@media(max-width:768px){.ngx-table-scroll{overflow:visible;max-height:none}.ngx-table{width:100%}.thead-mrs{display:none}.tbody-mrs{display:flex;flex-direction:column;gap:.75rem;padding:.75rem}.tr-mrs{flex-direction:column;border:1px solid var(--ngx-table-border);border-radius:10px;overflow:hidden}.td-mrs{flex:1 1 auto!important;width:100%;border-inline-end:none;justify-content:space-between}.cel{justify-content:flex-end;white-space:normal;text-align:end}.cell-title{display:inline}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxPagination, selector: "ngx-pagination", inputs: ["total", "page", "pageSize", "pageSizeOptions", "labels", "siblingCount", "boundaryCount"], outputs: ["pageChange", "pageSizeChange", "paginate"] }, { kind: "directive", type: ColumnResize, selector: "[ngxColumnResize]", inputs: ["ngxColumnResizeWidth", "ngxColumnResizeMin", "ngxColumnResizeMax", "ngxColumnResizeDir"], outputs: ["resizing", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-table', standalone: true, imports: [CommonModule, NgxPagination, ColumnResize], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ngx-table-host',
+                    }, template: "<div class=\"ngx-table-wrapper\" [class.ngx-table--loading]=\"loading()\">\n  <div class=\"ngx-table-scroll\">\n    <div\n      class=\"ngx-table\"\n      [class.ngx-table--striped]=\"config.stripedRows\"\n      [class.ngx-table--hover]=\"config.hoverable\"\n      role=\"table\">\n      <div class=\"thead-mrs\" [class.thead-mrs--sticky]=\"config.stickyHeader\" role=\"rowgroup\">\n        <div class=\"tr-mrs\" role=\"row\">\n          @if (operations()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n              {{ config.labels.operation }}\n            </div>\n          }\n          @if (showRecordNumber()) {\n            <div\n              class=\"th-mrs operations\"\n              role=\"columnheader\"\n              [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n              #\n            </div>\n          }\n\n          @for (f of fields(); track f.column) {\n            <div\n              class=\"th-mrs\"\n              role=\"columnheader\"\n              [class.th-mrs--sortable]=\"f.sortable\"\n              [style.flex]=\"'0 0 ' + columnWidth(f.column) + 'px'\"\n              [attr.aria-sort]=\"\n                sortDirectionFor(f.column) === 'asc'\n                  ? 'ascending'\n                  : sortDirectionFor(f.column) === 'desc'\n                    ? 'descending'\n                    : null\n              \"\n              (click)=\"onHeaderClick(f, $event)\">\n              <span class=\"th-mrs__title\">{{ f.title }}</span>\n\n              @if (f.sortable) {\n                <span class=\"sort-icon\" [class.active]=\"sortDirectionFor(f.column) !== null\">\n                  @if (sortDirectionFor(f.column) === 'asc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H96V448c0 17.7 14.3 32 32 32s32-14.3 32-32V224h64c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z\" />\n                    </svg>\n                  } @else if (sortDirectionFor(f.column) === 'desc') {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 470.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H224V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V288H96c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" />\n                    </svg>\n                  } @else {\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\">\n                      <path\n                        fill=\"currentColor\"\n                        d=\"M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l96 96c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H224v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V192H96c-12.9 0-24.6-7.8-29.6-19.8s-2.3-25.7 6.9-34.9l96-96zM32 400c0-17.7 14.3-32 32-32H256c17.7 0 32 14.3 32 32s-14.3 32-32 32H64c-17.7 0-32-14.3-32-32z\"\n                        opacity=\".35\" />\n                    </svg>\n                  }\n                </span>\n              }\n\n              @if (isResizable(f)) {\n                <span\n                  ngxColumnResize\n                  [ngxColumnResizeWidth]=\"columnWidth(f.column)\"\n                  [ngxColumnResizeMin]=\"columnMin(f)\"\n                  [ngxColumnResizeMax]=\"columnMax(f)\"\n                  [ngxColumnResizeDir]=\"resolvedDirection()\"\n                  (resizing)=\"onColumnResizing(f.column, $event)\"\n                  (resizeEnd)=\"onColumnResizeEnd(f.column, $event)\"\n                  (click)=\"$event.stopPropagation()\"></span>\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <div class=\"tbody-mrs\" role=\"rowgroup\">\n        @if (!loading() && pagedData().length === 0) {\n          <div class=\"no-data\">{{ config.labels.noData }}</div>\n        }\n\n        @for (row of pagedData(); track trackBy()($index, row); let rowIndex = $index) {\n          <div class=\"tr-mrs\" role=\"row\">\n            @if (operations()) {\n              <div\n                class=\"td-mrs operations\"\n                role=\"cell\"\n                [style.flex]=\"'0 0 ' + operationWidth() + 'px'\">\n                <div class=\"cel\">\n                  <span class=\"cell-title\">{{ config.labels.operation }}:</span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"operations()!\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row }\"></ng-container>\n                </div>\n              </div>\n            }\n\n            @if (showRecordNumber()) {\n              <div class=\"td-mrs operations\" role=\"cell\" [style.flex]=\"'0 0 ' + numWidth() + 'px'\">\n                <div class=\"cel\">{{ recordNumber(rowIndex) }}</div>\n              </div>\n            }\n\n            @for (f of fields(); track f.column) {\n              @let template = getTemplate(f.column);\n              @let renderer = getRenderer(f);\n\n              <div class=\"td-mrs\" role=\"cell\" [style.flex]=\"'0 0 ' + columnWidth(f.column) + 'px'\">\n                <div class=\"cel\" [class.wrap]=\"f.wrap\">\n                  <span class=\"cell-title\">{{ f.title }}</span>\n\n                  @if (template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: row,\n                        row: row,\n                        value: getCellValue(row, f),\n                        rowIndex: rowIndex,\n                        field: f,\n                      }\"></ng-container>\n                  } @else if (renderer) {\n                    <ng-container\n                      *ngComponentOutlet=\"\n                        renderer;\n                        inputs: getRendererInputs(row, f)\n                      \"></ng-container>\n                  } @else {\n                    {{ formatCellValue(row, f) }}\n                  }\n\n                  @if (f.prefix) {\n                    <span>{{ f.prefix }}</span>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    </div>\n\n    @if (loading()) {\n      <div class=\"loading-container\">\n        <div class=\"loading\">{{ config.labels.loading }}</div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngx-pagination\n  [page]=\"page()\"\n  [pageSize]=\"pageSizeS()\"\n  [total]=\"totalCount()\"\n  (paginate)=\"onPaginate($event)\"></ngx-pagination>\n", styles: [":host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #18181b);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111114);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #1e1b4b);--ngx-table-text: light-dark(#1e293b, #e4e4e7);--ngx-table-radius: 12px;display:block;color:var(--ngx-table-text)}.ngx-table-wrapper{position:relative;border:1px solid var(--ngx-table-border);border-radius:var(--ngx-table-radius);overflow:hidden;background:var(--ngx-table-row-bg)}.ngx-table-scroll{overflow:auto;max-height:75vh}.ngx-table-scroll::-webkit-scrollbar{height:10px;width:10px}.ngx-table-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ngx-table-border) 60%,gray);border-radius:8px}.ngx-table{display:flex;flex-direction:column;min-width:100%;width:max-content}.thead-mrs{display:flex;flex-direction:column;z-index:2}.thead-mrs--sticky{position:sticky;top:0}.tr-mrs{display:flex;align-items:stretch}.th-mrs,.td-mrs{position:relative;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--ngx-table-border);border-inline-end:1px solid var(--ngx-table-border)}.th-mrs:last-child,.td-mrs:last-child{border-inline-end:none}.th-mrs{display:flex;align-items:center;gap:.375rem;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg);font-weight:600;font-size:.8125rem;letter-spacing:.02em;padding:.75rem 1rem;-webkit-user-select:none;user-select:none;white-space:nowrap;text-overflow:ellipsis}.th-mrs--sortable{cursor:pointer}.th-mrs--sortable:hover{color:var(--ngx-table-accent)}.th-mrs.operations{justify-content:center}.th-mrs__title{overflow:hidden;text-overflow:ellipsis}.sort-icon{width:.75rem;height:.75rem;flex:none;opacity:.4;display:inline-flex}.sort-icon svg{width:100%;height:100%}.sort-icon.active{opacity:1}.ngx-table__resize-handle,[ngxColumnResize]{position:absolute;top:0;bottom:0;inset-inline-end:-3px;width:6px;cursor:col-resize;touch-action:none;z-index:3}.ngx-table__resize-handle:hover,.ngx-table__resize-handle:active,[ngxColumnResize]:hover,[ngxColumnResize]:active{background:var(--ngx-table-accent);opacity:.5}.td-mrs{display:flex;align-items:center;padding:.75rem 1rem;font-size:.875rem}.td-mrs.operations{justify-content:center}.cel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:.25rem}.cel.wrap{white-space:normal}.cell-title{display:none;font-weight:600;color:var(--ngx-table-header-fg)}.ngx-table--striped .tbody-mrs .tr-mrs:nth-child(2n){background:var(--ngx-table-row-alt-bg)}.ngx-table--hover .tbody-mrs .tr-mrs:hover{background:var(--ngx-table-row-hover-bg)}.tr-mrs{transition:background-color .15s ease}.no-data{padding:2.5rem 1rem;text-align:center;color:#94a3b8;font-size:.875rem}.loading-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ngx-table-row-bg) 75%,transparent);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.loading{font-size:.875rem;color:var(--ngx-table-accent)}@media(max-width:768px){.ngx-table-scroll{overflow:visible;max-height:none}.ngx-table{width:100%}.thead-mrs{display:none}.tbody-mrs{display:flex;flex-direction:column;gap:.75rem;padding:.75rem}.tr-mrs{flex-direction:column;border:1px solid var(--ngx-table-border);border-radius:10px;overflow:hidden}.td-mrs{flex:1 1 auto!important;width:100%;border-inline-end:none;justify-content:space-between}.cel{justify-content:flex-end;white-space:normal;text-align:end}.cell-title{display:inline}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], totalRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalRecords", required: true }] }], showRecordNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRecordNumber", required: false }] }], operations: [{ type: i0.Input, args: [{ isSignal: true, alias: "operations", required: false }] }], operationWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "operationWidth", required: false }] }], numWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "numWidth", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], multiSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSort", required: false }] }], lazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazy", required: false }] }], trackBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackBy", required: false }] }], lazyLoad: [{ type: i0.Output, args: ["lazyLoad"] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], columnResize: [{ type: i0.Output, args: ["columnResize"] }], cellTemplates: [{
+                type: ContentChildren,
+                args: [TableCell]
+            }] } });
+
+// types
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ColumnResize, NGX_PAGINATION_CONFIG, NGX_PAGINATION_CONFIG_DEFAULT, NGX_TABLE_CONFIG, NGX_TABLE_CONFIG_DEFAULT, NgxPagination, NgxTable, TableCell, defineFields, defineRenderers, providePagination, provideTable };
+//# sourceMappingURL=ngx-kit-data-table.mjs.map