ngx-kit 6.0.1 → 6.1.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, input, inject, TemplateRef, Directive, output, HostListener, model, computed, effect, ChangeDetectionStrategy, Component, signal, DestroyRef, ContentChildren } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, input, inject, TemplateRef, Directive, output, ElementRef, HostListener, model, computed, effect, ChangeDetectionStrategy, Component, signal, DestroyRef, ContentChildren } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -34,7 +34,7 @@ function defineFields(_renderers, fields) {
 }
 
 const NGX_TABLE_CONFIG_DEFAULT = {
-    showRecordNumber: true,
+    showRecordNumber: false,
     hoverable: true,
     multiSort: true,
     resizable: true,
@@ -48,6 +48,7 @@ const NGX_TABLE_CONFIG_DEFAULT = {
     },
     renderers: {},
     formatters: {},
+    lazy: false,
 };
 /** به هر نمونه‌ی ngx-table تزریق می‌شود. با provideTable() مقداردهی کنید. */
 const NGX_TABLE_CONFIG = new InjectionToken('ngx-table-config', {
@@ -169,6 +170,7 @@ class ColumnResize {
     direction = input('ltr', { ...(ngDevMode ? { debugName: "direction" } : /* istanbul ignore next */ {}), alias: 'ngxColumnResizeDir' });
     resizing = output();
     resizeEnd = output();
+    elementRef = inject((ElementRef));
     dragging = false;
     startX = 0;
     baseWidth = 0;
@@ -177,7 +179,12 @@ class ColumnResize {
         event.stopPropagation();
         this.dragging = true;
         this.startX = event.clientX;
-        this.baseWidth = this.startWidth();
+        // اندازه‌ی واقعیِ رندرشده‌ی ستون رو می‌گیریم، نه فقط input ورودی — چون
+        // ستون‌هایی که width صریح ندارن (flex:1 1 0، فضای باقی‌مونده رو پر
+        // می‌کنن) هیچ عرض عددیِ از‌پیش‌شناخته‌شده‌ای ندارن؛ تنها منبع درستِ
+        // «عرض فعلی» برای شروع محاسبه‌ی درگ، خودِ DOM هست.
+        const measured = this.elementRef.nativeElement.parentElement?.getBoundingClientRect().width;
+        this.baseWidth = measured && measured > 0 ? measured : this.startWidth();
         event.target.setPointerCapture(event.pointerId);
     }
     onPointerMove(event) {
@@ -342,18 +349,23 @@ class NgxTable {
     ...(ngDevMode ? [{ debugName: "showRecordNumber" }] : /* istanbul ignore next */ []));
     operations = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "operations" }] : /* istanbul ignore next */ []));
-    operationWidth = input(60, /* @ts-ignore */
+    operationWidth = input(80, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "operationWidth" }] : /* istanbul ignore next */ []));
-    numWidth = input(60, /* @ts-ignore */
+    numWidth = input(80, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "numWidth" }] : /* istanbul ignore next */ []));
     pageSize = input(this.paginationConfig.defaultPageSize, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    page = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageChange = output();
     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 */
+    lazy = input(this.config.lazy, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "lazy" }] : /* istanbul ignore next */ []));
+    resizable = input(this.config.resizable, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
     /** پیش‌فرض بر اساس ایندکس؛ برای جلوگیری از گم‌شدن state سطرها هنگام سورت،
      *  یک شناسه‌ی یکتا بدهید: [trackBy]="(i, row) => row.id" */
     trackBy = input((index) => index, /* @ts-ignore */
@@ -363,8 +375,8 @@ class NgxTable {
     sortChange = output();
     columnResize = output();
     // ------------------------------------------------------------ int. state
-    page = signal(1, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+    pageIndex = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
     pageSizeS = signal(this.paginationConfig.defaultPageSize, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageSizeS" }] : /* istanbul ignore next */ []));
     sorts = signal([], /* @ts-ignore */
@@ -384,19 +396,29 @@ class NgxTable {
     constructor() {
         effect(() => {
             const ps = this.pageSize();
-            if (ps)
-                this.pageSizeS.set(ps);
+            this.pageSizeS.set(ps);
+            const pi = this.page();
+            this.pageIndex.set(pi);
         });
-        // برای هر ستونِ تازه‌دیده‌شده یک عرض seed کن؛ ستون‌هایی که کاربر دستی
-        // ریسایز کرده دیگر هیچ‌وقت دوباره نوشته نمی‌شوند.
+        // برای هر ستونِ تازه‌دیده‌شده که width عددیِ صریح دارد، یک عرض seed کن؛
+        // ستون‌هایی که کاربر دستی ریسایز کرده دیگر هیچ‌وقت دوباره نوشته نمی‌شوند.
+        // مهم: ستون‌هایی که اصلاً width ندارند (یا width رشته‌ای مثل '20%' دارند)
+        // عمداً اینجا seed نمی‌شوند — قبلاً همه‌ی ستون‌ها با یک defaultWidth ثابت
+        // seed می‌شدند که باعث می‌شد جدول با flex:0 0 روی هر ستون هیچ‌وقت واقعاً
+        // 100% عرض رو پر نکنه، حتی وقتی کاربر عمداً یک ستون رو بدون width گذاشته
+        // بود تا فضای باقی‌مونده رو خودش پر کنه.
         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;
+                if (this.manuallyResized.has(f.column))
+                    continue;
+                if (f.column in next)
+                    continue;
+                if (typeof f.width === 'number') {
+                    next[f.column] = f.width;
                     changed = true;
                 }
             }
@@ -405,9 +427,10 @@ class NgxTable {
         });
     }
     ngOnInit() {
-        if (this.lazy()) {
-            this.lazyLoad.emit({ first: 0, pageIndex: 1, pageSize: this.pageSizeS(), sorts: [] });
-        }
+        // نیاز به این نیست در لود خود صفحه بندی paginate را صدا میزند
+        // if (this.lazy()) {
+        //   this.lazyLoad.emit({ first: 0, pageIndex: 1, pageSize: this.pageSizeS(), sorts: [] });
+        // }
     }
     ngAfterContentInit() {
         this.syncTemplateMap();
@@ -449,7 +472,7 @@ class NgxTable {
     pagedData = computed(() => {
         if (this.lazy())
             return this.sortedData();
-        const start = (this.page() - 1) * this.pageSizeS();
+        const start = (this.pageIndex() - 1) * this.pageSizeS();
         return this.sortedData().slice(start, start + this.pageSizeS());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pagedData" }] : /* istanbul ignore next */ []));
@@ -470,7 +493,7 @@ class NgxTable {
     }
     /** بدون mutation روی داده‌ی ورودی: شماره‌ی ردیف صرفاً از روی page/pageSize/rowIndex محاسبه می‌شود. */
     recordNumber(rowIndex) {
-        return (this.page() - 1) * this.pageSizeS() + rowIndex + 1;
+        return (this.pageIndex() - 1) * this.pageSizeS() + rowIndex + 1;
     }
     // -------------------------------------------------------------- سورت
     sortDirectionFor(column) {
@@ -506,32 +529,51 @@ class NgxTable {
             next = [];
         }
         this.sorts.set(next);
-        this.page.set(1);
+        this.pageIndex.set(1);
+        this.pageChange.emit(this.pageIndex());
         this.sortChange.emit(next);
         this.emitLazyIfNeeded();
     }
     // ------------------------------------------------------------ صفحه‌بندی
     onPaginate(event) {
-        this.page.set(event.page);
+        this.pageIndex.set(event.page);
         this.pageSizeS.set(event.pageSize);
+        this.pageChange.emit(this.pageIndex());
         this.emitLazyIfNeeded();
     }
     emitLazyIfNeeded() {
         if (!this.lazy())
             return;
-        const pageIndex = this.page();
+        const pageIndex = this.pageIndex();
         const pageSize = this.pageSizeS();
         this.lazyLoad.emit({
             pageIndex,
             pageSize,
             first: (pageIndex - 1) * pageSize,
             sorts: this.sorts(),
+            sorting: this.sorts()
+                ?.map((s) => `${s.field} ${s.direction}`)
+                .join(','),
         });
     }
     // -------------------------------------------------------------- ریسایز
     columnWidth(column) {
         return this.widths()[column] ?? this.config.column.defaultWidth;
     }
+    /**
+     * مقدار CSS `flex` واقعیِ این ستون:
+     *  - اگه دستی ریسایز شده یا width عددی داره → `0 0 <px>` (ثابت، بدون رشد/کوچک‌شدن)
+     *  - اگه width رشته‌ای داره (مثلاً '20%') → `0 0 <رشته>` (ثابت، هر واحد CSS معتبری)
+     *  - اگه اصلاً width نداره → `1 1 0` (رشد می‌کنه تا فضای باقی‌مونده‌ی جدول رو پر کنه)
+     */
+    columnFlex(field) {
+        const resized = this.widths()[field.column];
+        if (resized != null)
+            return `0 0 ${resized}px`;
+        if (typeof field.width === 'string')
+            return `0 0 ${field.width}`;
+        return '1 1 0';
+    }
     columnMin(field) {
         return field.minWidth ?? this.config.column.minWidth;
     }
@@ -539,7 +581,7 @@ class NgxTable {
         return field.maxWidth ?? this.config.column.maxWidth;
     }
     isResizable(field) {
-        return (field.resizable ?? this.config.resizable) !== false;
+        return (field.resizable ?? this.resizable()) !== false;
     }
     onColumnResizing(column, width) {
         this.widths.update((w) => ({ ...w, [column]: width }));
@@ -604,14 +646,14 @@ class NgxTable {
         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 });
+    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 }, page: { classPropertyName: "page", publicName: "page", 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 }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", 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]=\"columnFlex(f)\"\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]=\"columnFlex(f)\">\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;min-inline-size:0;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: [{
+                    }, 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]=\"columnFlex(f)\"\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]=\"columnFlex(f)\">\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;min-inline-size:0;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 }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], 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 }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", 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]
             }] } });