ngx-kit 8.3.8 → 8.4.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, ElementRef, 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, Injectable, 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';
@@ -33,6 +33,25 @@ function defineFields(_renderers, fields) {
     return fields;
 }
 
+var DynamicDataFilterOperator;
+(function (DynamicDataFilterOperator) {
+    DynamicDataFilterOperator[DynamicDataFilterOperator["Equal"] = 0] = "Equal";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["NotEqual"] = 1] = "NotEqual";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["Contains"] = 2] = "Contains";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["StartsWith"] = 3] = "StartsWith";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["EndsWith"] = 4] = "EndsWith";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["GreaterThan"] = 5] = "GreaterThan";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["GreaterThanOrEqual"] = 6] = "GreaterThanOrEqual";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["LessThan"] = 7] = "LessThan";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["LessThanOrEqual"] = 8] = "LessThanOrEqual";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["Between"] = 9] = "Between";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["In"] = 10] = "In";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["IsNull"] = 11] = "IsNull";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["IsNotNull"] = 12] = "IsNotNull";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["IsEmpty"] = 13] = "IsEmpty";
+    DynamicDataFilterOperator[DynamicDataFilterOperator["IsNotEmpty"] = 14] = "IsNotEmpty";
+})(DynamicDataFilterOperator || (DynamicDataFilterOperator = {}));
+
 const NGX_PAGINATION_CONFIG_DEFAULT = {
     defaultPageSize: 10,
     pageSizeOptions: [5, 10, 20, 30, 50, 100],
@@ -54,6 +73,31 @@ class TableLocalization {
     noData = 'There is no data to display!';
     loading = 'Loading...';
     operation = 'Operation';
+    // Filters
+    filter = 'Filter';
+    clearFilter = 'Clear';
+    applyFilter = 'Apply';
+    search = 'Search...';
+    selectAll = 'Select All';
+    from = 'From';
+    to = 'To';
+    trueText = 'Yes';
+    falseText = 'No';
+    // Operators
+    opEqual = 'Equals';
+    opNotEqual = 'Does not equal';
+    opContains = 'Contains';
+    opStartsWith = 'Starts with';
+    opEndsWith = 'Ends with';
+    opGreaterThan = 'Greater than';
+    opGreaterThanOrEqual = 'Greater than or equal';
+    opLessThan = 'Less than';
+    opLessThanOrEqual = 'Less than or equal';
+    opBetween = 'Between';
+    opIsNull = 'Is null';
+    opIsNotNull = 'Is not null';
+    opIsEmpty = 'Is empty';
+    opIsNotEmpty = 'Is not empty';
 }
 
 const NGX_TABLE_CONFIG = new InjectionToken('NGX_TABLE_CONFIG', {
@@ -326,24 +370,369 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             args: [{ selector: 'ngx-pagination', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ngx-pagination\">\n  <div class=\"ngx-pagination__summary\">\n    {{ lables.showing }}\n    <span class=\"fw-semibold\">{{ firstItem() }}</span>\n    {{ lables.to }}\n    <span class=\"fw-semibold\">{{ lastItem() }}</span>\n    {{ lables.of }}\n    <span class=\"fw-semibold\">{{ total() }}</span>\n    {{ lables.results }}\n  </div>\n\n  <div class=\"ngx-pagination__controls\">\n    <ul class=\"ngx-pagination__list\">\n      <li [class.disabled]=\"page() === 1\" [title]=\"lables.first\">\n        <a (click)=\"first()\" class=\"icon\">\u00AB</a>\n      </li>\n      <li [class.disabled]=\"page() === 1\" [title]=\"lables.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]=\"lables.next\">\n        <a (click)=\"next()\" class=\"icon\">\u203A</a>\n      </li>\n      <li [class.disabled]=\"page() === totalPages()\" [title]=\"lables.last\">\n        <a (click)=\"last()\" class=\"icon\">\u00BB</a>\n      </li>\n    </ul>\n\n    <div class=\"ngx-pagination__page-size\">\n      <span>{{ lables.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 }] }], 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 ColumnFilterService {
+    applyFilters(data, filters) {
+        const activeFilters = Object.values(filters).filter((f) => this.isFilterActive(f));
+        if (activeFilters.length === 0)
+            return [...data];
+        return data.filter((item) => activeFilters.every((filter) => this.evaluateFilter(item, filter)));
+    }
+    isFilterActive(filter) {
+        if (!filter)
+            return false;
+        const { operator, value, valueTo } = filter;
+        const noValueOps = [
+            DynamicDataFilterOperator.IsNull,
+            DynamicDataFilterOperator.IsNotNull,
+            DynamicDataFilterOperator.IsEmpty,
+            DynamicDataFilterOperator.IsNotEmpty,
+        ];
+        if (noValueOps.includes(operator))
+            return true;
+        if (operator === DynamicDataFilterOperator.Between) {
+            return (value !== undefined &&
+                value !== null &&
+                value !== '' &&
+                valueTo !== undefined &&
+                valueTo !== null &&
+                valueTo !== '');
+        }
+        if (operator === DynamicDataFilterOperator.In) {
+            return Array.isArray(value) && value.length > 0;
+        }
+        return value !== undefined && value !== null && value !== '';
+    }
+    evaluateFilter(item, filter) {
+        const rawVal = item?.[filter.field];
+        const op = filter.operator;
+        const target = filter.value;
+        const targetTo = filter.valueTo;
+        if (op === DynamicDataFilterOperator.IsNull)
+            return rawVal === null || rawVal === undefined;
+        if (op === DynamicDataFilterOperator.IsNotNull)
+            return rawVal !== null && rawVal !== undefined;
+        if (op === DynamicDataFilterOperator.IsEmpty)
+            return rawVal === '' || rawVal === null || rawVal === undefined;
+        if (op === DynamicDataFilterOperator.IsNotEmpty)
+            return rawVal !== '' && rawVal !== null && rawVal !== undefined;
+        if (rawVal === null || rawVal === undefined)
+            return false;
+        if (rawVal instanceof Date || (typeof rawVal === 'string' && !isNaN(Date.parse(rawVal)) && isNaN(Number(rawVal)))) {
+            const itemTime = new Date(rawVal).getTime();
+            const targetTime = target ? new Date(target).getTime() : NaN;
+            const targetToTime = targetTo ? new Date(targetTo).getTime() : NaN;
+            if (!isNaN(itemTime)) {
+                switch (op) {
+                    case DynamicDataFilterOperator.Equal:
+                        return new Date(rawVal).toDateString() === new Date(target).toDateString();
+                    case DynamicDataFilterOperator.GreaterThan:
+                        return itemTime > targetTime;
+                    case DynamicDataFilterOperator.GreaterThanOrEqual:
+                        return itemTime >= targetTime;
+                    case DynamicDataFilterOperator.LessThan:
+                        return itemTime < targetTime;
+                    case DynamicDataFilterOperator.LessThanOrEqual:
+                        return itemTime <= targetTime;
+                    case DynamicDataFilterOperator.Between:
+                        return itemTime >= targetTime && itemTime <= targetToTime;
+                }
+            }
+        }
+        switch (op) {
+            case DynamicDataFilterOperator.Equal:
+                return String(rawVal).trim().toLowerCase() === String(target).trim().toLowerCase();
+            case DynamicDataFilterOperator.NotEqual:
+                return String(rawVal).trim().toLowerCase() !== String(target).trim().toLowerCase();
+            case DynamicDataFilterOperator.Contains:
+                return String(rawVal).toLowerCase().includes(String(target).toLowerCase());
+            case DynamicDataFilterOperator.StartsWith:
+                return String(rawVal).toLowerCase().startsWith(String(target).toLowerCase());
+            case DynamicDataFilterOperator.EndsWith:
+                return String(rawVal).toLowerCase().endsWith(String(target).toLowerCase());
+            case DynamicDataFilterOperator.GreaterThan:
+                return Number(rawVal) > Number(target);
+            case DynamicDataFilterOperator.GreaterThanOrEqual:
+                return Number(rawVal) >= Number(target);
+            case DynamicDataFilterOperator.LessThan:
+                return Number(rawVal) < Number(target);
+            case DynamicDataFilterOperator.LessThanOrEqual:
+                return Number(rawVal) <= Number(target);
+            case DynamicDataFilterOperator.Between:
+                return Number(rawVal) >= Number(target) && Number(rawVal) <= Number(targetTo);
+            case DynamicDataFilterOperator.In:
+                return Array.isArray(target)
+                    ? target.some((t) => String(t).toLowerCase() === String(rawVal).toLowerCase())
+                    : false;
+            default:
+                return true;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnFilterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ColumnFilterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class NgxColumnFilter {
+    labels = inject(NGX_TABLE_I18N);
+    elementRef = inject(ElementRef);
+    tableEl = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableEl" }] : /* istanbul ignore next */ []));
+    field = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    config = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "config" }] : /* istanbul ignore next */ []));
+    currentFilter = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentFilter" }] : /* istanbul ignore next */ []));
+    distinctValues = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "distinctValues" }] : /* istanbul ignore next */ []));
+    applyFilter = output();
+    clearFilter = output();
+    isOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    filterType = computed(() => this.config()?.type ?? 'text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
+    selectedOperator = signal(DynamicDataFilterOperator.Contains, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedOperator" }] : /* istanbul ignore next */ []));
+    filterValue = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterValue" }] : /* istanbul ignore next */ []));
+    filterValueTo = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterValueTo" }] : /* istanbul ignore next */ []));
+    selectedEnumValues = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedEnumValues" }] : /* istanbul ignore next */ []));
+    enumSearchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enumSearchQuery" }] : /* istanbul ignore next */ []));
+    operators = computed(() => {
+        const type = this.filterType();
+        const l = this.labels;
+        if (type === 'number') {
+            return [
+                { label: l.opEqual, value: DynamicDataFilterOperator.Equal },
+                { label: l.opNotEqual, value: DynamicDataFilterOperator.NotEqual },
+                { label: l.opGreaterThan, value: DynamicDataFilterOperator.GreaterThan },
+                { label: l.opGreaterThanOrEqual, value: DynamicDataFilterOperator.GreaterThanOrEqual },
+                { label: l.opLessThan, value: DynamicDataFilterOperator.LessThan },
+                { label: l.opLessThanOrEqual, value: DynamicDataFilterOperator.LessThanOrEqual },
+                { label: l.opBetween, value: DynamicDataFilterOperator.Between },
+                { label: l.opIsNull, value: DynamicDataFilterOperator.IsNull },
+                { label: l.opIsNotNull, value: DynamicDataFilterOperator.IsNotNull },
+            ];
+        }
+        if (type === 'date') {
+            return [
+                { label: l.opEqual, value: DynamicDataFilterOperator.Equal },
+                { label: l.opGreaterThan, value: DynamicDataFilterOperator.GreaterThan },
+                { label: l.opLessThan, value: DynamicDataFilterOperator.LessThan },
+                { label: l.opBetween, value: DynamicDataFilterOperator.Between },
+                { label: l.opIsNull, value: DynamicDataFilterOperator.IsNull },
+                { label: l.opIsNotNull, value: DynamicDataFilterOperator.IsNotNull },
+            ];
+        }
+        if (type === 'boolean') {
+            return [
+                { label: l.opEqual, value: DynamicDataFilterOperator.Equal },
+                { label: l.opIsNull, value: DynamicDataFilterOperator.IsNull },
+                { label: l.opIsNotNull, value: DynamicDataFilterOperator.IsNotNull },
+            ];
+        }
+        // Default: text
+        return [
+            { label: l.opContains, value: DynamicDataFilterOperator.Contains },
+            { label: l.opStartsWith, value: DynamicDataFilterOperator.StartsWith },
+            { label: l.opEndsWith, value: DynamicDataFilterOperator.EndsWith },
+            { label: l.opEqual, value: DynamicDataFilterOperator.Equal },
+            { label: l.opNotEqual, value: DynamicDataFilterOperator.NotEqual },
+            { label: l.opIsEmpty, value: DynamicDataFilterOperator.IsEmpty },
+            { label: l.opIsNotEmpty, value: DynamicDataFilterOperator.IsNotEmpty },
+            { label: l.opIsNull, value: DynamicDataFilterOperator.IsNull },
+            { label: l.opIsNotNull, value: DynamicDataFilterOperator.IsNotNull },
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "operators" }] : /* istanbul ignore next */ []));
+    enumOptions = computed(() => {
+        const cfg = this.config();
+        if (cfg?.options && cfg.options.length > 0)
+            return cfg.options;
+        const values = this.distinctValues();
+        return values
+            .filter((v) => v !== null && v !== undefined && v !== '')
+            .map((v) => ({ label: String(v), value: v }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "enumOptions" }] : /* istanbul ignore next */ []));
+    filteredEnumOptions = computed(() => {
+        const q = this.enumSearchQuery().trim().toLowerCase();
+        const opts = this.enumOptions();
+        if (!q)
+            return opts;
+        return opts.filter((o) => o.label.toLowerCase().includes(q));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredEnumOptions" }] : /* istanbul ignore next */ []));
+    isNoValueOperator = computed(() => {
+        const op = this.selectedOperator();
+        return [
+            DynamicDataFilterOperator.IsNull,
+            DynamicDataFilterOperator.IsNotNull,
+            DynamicDataFilterOperator.IsEmpty,
+            DynamicDataFilterOperator.IsNotEmpty,
+        ].includes(op);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isNoValueOperator" }] : /* istanbul ignore next */ []));
+    toggleDropdown(event) {
+        event.stopPropagation();
+        const nextState = !this.isOpen();
+        if (nextState) {
+            this.syncStateFromInput();
+            this.isOpen.set(true);
+            this.updatePosition();
+        }
+        else {
+            this.isOpen.set(false);
+        }
+    }
+    updatePosition() {
+        if (!this.isOpen())
+            return;
+        setTimeout(() => {
+            const popover = this.elementRef.nativeElement.querySelector('.filter-popover');
+            if (!popover)
+                return;
+            // پیدا کردن کانتینر اسکرول جدول
+            const containerEl = this.tableEl()?.nativeElement ??
+                this.elementRef.nativeElement.closest('.ngx-table-scroll') ??
+                this.elementRef.nativeElement.closest('.ngx-table-wrapper');
+            if (!containerEl) {
+                popover.style.visibility = 'visible';
+                return;
+            }
+            // ۱. ریست کردن ترنسفورم قبلی تا موقعیت واقعی بدون تغییر سنجیده شود
+            popover.style.transform = 'none';
+            const rect = popover.getBoundingClientRect();
+            const container = containerEl.getBoundingClientRect();
+            const margin = 6; // فاصله ایمن از لبه جدول
+            let x = 0;
+            const threshold = 10;
+            // اگر از لبه سمت راست کانتینر بیرون زده باشد (حالت ستون‌های آخر):
+            if (rect.right > container.right - margin) {
+                // شیفت به سمت چپ (مقدار منفی)
+                x = container.right - margin - rect.right - threshold;
+            }
+            // اگر از لبه سمت چپ بیرون زده باشد:
+            else if (rect.left < container.left + margin) {
+                // شیفت به سمت راست (مقدار مثبت)
+                x = container.left + margin - rect.left + threshold;
+            }
+            // اطمینان از اینکه شیفت به چپ، باعث خروج از سمت چپ کانتینر نشود
+            if (rect.left + x < container.left + margin) {
+                x = container.left + margin - rect.left;
+            }
+            // ۲. اعمال جابجایی
+            if (x !== 0) {
+                popover.style.transform = `translateX(${Math.round(x)}px)`;
+            }
+            else {
+                popover.style.transform = 'none';
+            }
+            // ۳. نمایش پاپ‌آپ پس از تنظیم موقعیت بدون پرش تصویر (Flicker)
+            popover.style.visibility = 'visible';
+        }, 0);
+    }
+    syncStateFromInput() {
+        const cur = this.currentFilter();
+        const type = this.filterType();
+        if (cur) {
+            this.selectedOperator.set(cur.operator);
+            if (type === 'enum' && Array.isArray(cur.value)) {
+                this.selectedEnumValues.set(new Set(cur.value));
+            }
+            else {
+                this.filterValue.set(cur.value ?? '');
+                this.filterValueTo.set(cur.valueTo ?? '');
+            }
+        }
+        else {
+            const defaultOp = this.config()?.defaultOperator ??
+                (type === 'number' || type === 'date' || type === 'boolean'
+                    ? DynamicDataFilterOperator.Equal
+                    : DynamicDataFilterOperator.Contains);
+            this.selectedOperator.set(defaultOp);
+            this.filterValue.set('');
+            this.filterValueTo.set('');
+            if (type === 'enum') {
+                this.selectedEnumValues.set(new Set(this.enumOptions().map((o) => o.value)));
+            }
+        }
+    }
+    onApply() {
+        const type = this.filterType();
+        let value = this.filterValue();
+        let operator = this.selectedOperator();
+        if (type === 'enum') {
+            operator = DynamicDataFilterOperator.In;
+            value = Array.from(this.selectedEnumValues());
+        }
+        this.applyFilter.emit({
+            field: this.field(),
+            operator,
+            value,
+            valueTo: this.selectedOperator() === DynamicDataFilterOperator.Between
+                ? this.filterValueTo()
+                : undefined,
+        });
+        this.isOpen.set(false);
+    }
+    onClear() {
+        this.filterValue.set('');
+        this.filterValueTo.set('');
+        this.selectedEnumValues.set(new Set());
+        this.clearFilter.emit(this.field());
+        this.isOpen.set(false);
+    }
+    toggleEnumSelection(val) {
+        const current = new Set(this.selectedEnumValues());
+        if (current.has(val))
+            current.delete(val);
+        else
+            current.add(val);
+        this.selectedEnumValues.set(current);
+    }
+    toggleSelectAll(checked) {
+        if (checked) {
+            this.selectedEnumValues.set(new Set(this.enumOptions().map((o) => o.value)));
+        }
+        else {
+            this.selectedEnumValues.set(new Set());
+        }
+    }
+    onDocumentClick(event) {
+        if (this.isOpen() && !this.elementRef.nativeElement.contains(event.target)) {
+            this.isOpen.set(false);
+        }
+    }
+    onEscape() {
+        if (this.isOpen())
+            this.isOpen.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NgxColumnFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NgxColumnFilter, isStandalone: true, selector: "ngx-column-filter", inputs: { tableEl: { classPropertyName: "tableEl", publicName: "tableEl", isSignal: true, isRequired: true, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, currentFilter: { classPropertyName: "currentFilter", publicName: "currentFilter", isSignal: true, isRequired: false, transformFunction: null }, distinctValues: { classPropertyName: "distinctValues", publicName: "distinctValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { applyFilter: "applyFilter", clearFilter: "clearFilter" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div class=\"ngx-col-filter\" (click)=\"$event.stopPropagation()\">\n  <button\n    type=\"button\"\n    class=\"filter-trigger\"\n    [class.active]=\"!!currentFilter()\"\n    [title]=\"labels.filter\"\n    (click)=\"toggleDropdown($event)\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"funnel-icon\">\n      <path\n        fill=\"currentColor\"\n        d=\"M3.9 54.9C10.5 36.5 28 24 47.6 24H464.4c19.6 0 37.1 12.5 43.7 30.9c6.6 18.4 0 38.8-16.1 49.9L320 223.5V432c0 13.5-8.4 25.5-21.1 30.2s-27 1.1-35.8-9.1l-64-75.1c-4.7-5.5-7.1-12.6-7.1-19.8V223.5L4.1 104.8C-1.9 93.7-2.6 73.3 3.9 54.9z\" />\n    </svg>\n  </button>\n\n  @if (isOpen()) {\n    <div class=\"filter-popover\" role=\"dialog\">\n      @if (filterType() !== 'enum') {\n        <div class=\"filter-section\">\n          <label class=\"filter-label\">{{ labels.filter }}:</label>\n          <select\n            class=\"filter-select\"\n            [ngModel]=\"selectedOperator()\"\n            (ngModelChange)=\"selectedOperator.set($event)\">\n            @for (op of operators(); track op.value) {\n              <option [ngValue]=\"op.value\">{{ op.label }}</option>\n            }\n          </select>\n        </div>\n\n        @if (!isNoValueOperator()) {\n          <div class=\"filter-section\">\n            @if (filterType() === 'number') {\n              <input\n                type=\"number\"\n                class=\"filter-input\"\n                [placeholder]=\"labels.search\"\n                [ngModel]=\"filterValue()\"\n                (ngModelChange)=\"filterValue.set($event)\" />\n              @if (selectedOperator() === 9) {\n                <input\n                  type=\"number\"\n                  class=\"filter-input mt-1\"\n                  [placeholder]=\"labels.to\"\n                  [ngModel]=\"filterValueTo()\"\n                  (ngModelChange)=\"filterValueTo.set($event)\" />\n              }\n            } @else if (filterType() === 'date') {\n              <input\n                type=\"date\"\n                class=\"filter-input\"\n                [ngModel]=\"filterValue()\"\n                (ngModelChange)=\"filterValue.set($event)\" />\n              @if (selectedOperator() === 9) {\n                <input\n                  type=\"date\"\n                  class=\"filter-input mt-1\"\n                  [ngModel]=\"filterValueTo()\"\n                  (ngModelChange)=\"filterValueTo.set($event)\" />\n              }\n            } @else if (filterType() === 'boolean') {\n              <select\n                class=\"filter-select\"\n                [ngModel]=\"filterValue()\"\n                (ngModelChange)=\"filterValue.set($event)\">\n                <option [ngValue]=\"true\">{{ labels.trueText }}</option>\n                <option [ngValue]=\"false\">{{ labels.falseText }}</option>\n              </select>\n            } @else {\n              <input\n                type=\"text\"\n                class=\"filter-input\"\n                [placeholder]=\"labels.search\"\n                [ngModel]=\"filterValue()\"\n                (ngModelChange)=\"filterValue.set($event)\" />\n            }\n          </div>\n        }\n      } @else {\n        <!-- Excel-like Set Filter (Enum) -->\n        <div class=\"filter-section\">\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"labels.search\"\n            [ngModel]=\"enumSearchQuery()\"\n            (ngModelChange)=\"enumSearchQuery.set($event)\" />\n        </div>\n        <div class=\"filter-set-list\">\n          <label class=\"filter-set-item font-bold\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"selectedEnumValues().size === enumOptions().length\"\n              (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            <span>({{ labels.selectAll }})</span>\n          </label>\n          @for (opt of filteredEnumOptions(); track opt.value) {\n            <label class=\"filter-set-item\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedEnumValues().has(opt.value)\"\n                (change)=\"toggleEnumSelection(opt.value)\" />\n              <span>{{ opt.label }}</span>\n            </label>\n          }\n        </div>\n      }\n\n      <div class=\"filter-actions\">\n        <button type=\"button\" class=\"btn-clear\" (click)=\"onClear()\">\n          {{ labels.clearFilter }}\n        </button>\n        <button type=\"button\" class=\"btn-apply\" (click)=\"onApply()\">\n          {{ labels.applyFilter }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ngx-col-filter{position:relative;display:inline-flex;align-items:center}.filter-trigger{background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:inherit;opacity:.35;transition:opacity .15s ease,color .15s ease}.filter-trigger:hover{opacity:.8}.filter-trigger.active{opacity:1;color:var(--ngx-table-accent, #4f46e5)}.filter-trigger .funnel-icon{width:.8rem;height:.8rem}.filter-popover{position:absolute;top:calc(100% + 6px);inset-inline-start:-10px;z-index:100;width:220px;background:var(--ngx-table-row-bg, #ffffff);border:1px solid var(--ngx-table-border, #e5e7eb);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-radius:8px;padding:.75rem;display:flex;flex-direction:column;gap:.625rem;font-size:.8125rem;color:var(--ngx-table-text, #1e293b);cursor:default;box-sizing:border-box;visibility:hidden}.filter-section{display:flex;flex-direction:column;gap:.25rem}.filter-label{font-weight:500;font-size:.75rem;color:#64748b}.filter-select,.filter-input{width:100%;box-sizing:border-box;padding:.375rem .5rem;border-radius:6px;border:1px solid var(--ngx-table-border, #d1d5db);background:var(--ngx-table-row-bg, #ffffff);color:inherit;font-size:.8125rem}.filter-select:focus,.filter-input:focus{outline:none;border-color:var(--ngx-table-accent, #4f46e5)}.mt-1{margin-top:.375rem}.filter-set-list{max-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem;padding:.25rem;border:1px solid var(--ngx-table-border, #e5e7eb);border-radius:6px}.filter-set-item{display:flex;align-items:center;gap:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.75rem}.filter-set-item.font-bold{font-weight:600}.filter-actions{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.25rem;border-top:1px solid var(--ngx-table-border, #e5e7eb)}.filter-actions button{padding:.3rem .6rem;border-radius:4px;font-size:.75rem;cursor:pointer;border:none;font-weight:500}.filter-actions .btn-clear{background:transparent;color:#64748b}.filter-actions .btn-clear:hover{background:#f1f5f9}.filter-actions .btn-apply{background:var(--ngx-table-accent, #4f46e5);color:#fff}.filter-actions .btn-apply:hover{filter:brightness(.95)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { 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: NgxColumnFilter, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngx-column-filter', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-col-filter\" (click)=\"$event.stopPropagation()\">\n  <button\n    type=\"button\"\n    class=\"filter-trigger\"\n    [class.active]=\"!!currentFilter()\"\n    [title]=\"labels.filter\"\n    (click)=\"toggleDropdown($event)\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" class=\"funnel-icon\">\n      <path\n        fill=\"currentColor\"\n        d=\"M3.9 54.9C10.5 36.5 28 24 47.6 24H464.4c19.6 0 37.1 12.5 43.7 30.9c6.6 18.4 0 38.8-16.1 49.9L320 223.5V432c0 13.5-8.4 25.5-21.1 30.2s-27 1.1-35.8-9.1l-64-75.1c-4.7-5.5-7.1-12.6-7.1-19.8V223.5L4.1 104.8C-1.9 93.7-2.6 73.3 3.9 54.9z\" />\n    </svg>\n  </button>\n\n  @if (isOpen()) {\n    <div class=\"filter-popover\" role=\"dialog\">\n      @if (filterType() !== 'enum') {\n        <div class=\"filter-section\">\n          <label class=\"filter-label\">{{ labels.filter }}:</label>\n          <select\n            class=\"filter-select\"\n            [ngModel]=\"selectedOperator()\"\n            (ngModelChange)=\"selectedOperator.set($event)\">\n            @for (op of operators(); track op.value) {\n              <option [ngValue]=\"op.value\">{{ op.label }}</option>\n            }\n          </select>\n        </div>\n\n        @if (!isNoValueOperator()) {\n          <div class=\"filter-section\">\n            @if (filterType() === 'number') {\n              <input\n                type=\"number\"\n                class=\"filter-input\"\n                [placeholder]=\"labels.search\"\n                [ngModel]=\"filterValue()\"\n                (ngModelChange)=\"filterValue.set($event)\" />\n              @if (selectedOperator() === 9) {\n                <input\n                  type=\"number\"\n                  class=\"filter-input mt-1\"\n                  [placeholder]=\"labels.to\"\n                  [ngModel]=\"filterValueTo()\"\n                  (ngModelChange)=\"filterValueTo.set($event)\" />\n              }\n            } @else if (filterType() === 'date') {\n              <input\n                type=\"date\"\n                class=\"filter-input\"\n                [ngModel]=\"filterValue()\"\n                (ngModelChange)=\"filterValue.set($event)\" />\n              @if (selectedOperator() === 9) {\n                <input\n                  type=\"date\"\n                  class=\"filter-input mt-1\"\n                  [ngModel]=\"filterValueTo()\"\n                  (ngModelChange)=\"filterValueTo.set($event)\" />\n              }\n            } @else if (filterType() === 'boolean') {\n              <select\n                class=\"filter-select\"\n                [ngModel]=\"filterValue()\"\n                (ngModelChange)=\"filterValue.set($event)\">\n                <option [ngValue]=\"true\">{{ labels.trueText }}</option>\n                <option [ngValue]=\"false\">{{ labels.falseText }}</option>\n              </select>\n            } @else {\n              <input\n                type=\"text\"\n                class=\"filter-input\"\n                [placeholder]=\"labels.search\"\n                [ngModel]=\"filterValue()\"\n                (ngModelChange)=\"filterValue.set($event)\" />\n            }\n          </div>\n        }\n      } @else {\n        <!-- Excel-like Set Filter (Enum) -->\n        <div class=\"filter-section\">\n          <input\n            type=\"text\"\n            class=\"filter-input\"\n            [placeholder]=\"labels.search\"\n            [ngModel]=\"enumSearchQuery()\"\n            (ngModelChange)=\"enumSearchQuery.set($event)\" />\n        </div>\n        <div class=\"filter-set-list\">\n          <label class=\"filter-set-item font-bold\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"selectedEnumValues().size === enumOptions().length\"\n              (change)=\"toggleSelectAll($any($event.target).checked)\" />\n            <span>({{ labels.selectAll }})</span>\n          </label>\n          @for (opt of filteredEnumOptions(); track opt.value) {\n            <label class=\"filter-set-item\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedEnumValues().has(opt.value)\"\n                (change)=\"toggleEnumSelection(opt.value)\" />\n              <span>{{ opt.label }}</span>\n            </label>\n          }\n        </div>\n      }\n\n      <div class=\"filter-actions\">\n        <button type=\"button\" class=\"btn-clear\" (click)=\"onClear()\">\n          {{ labels.clearFilter }}\n        </button>\n        <button type=\"button\" class=\"btn-apply\" (click)=\"onApply()\">\n          {{ labels.applyFilter }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".ngx-col-filter{position:relative;display:inline-flex;align-items:center}.filter-trigger{background:none;border:none;cursor:pointer;padding:2px 4px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:inherit;opacity:.35;transition:opacity .15s ease,color .15s ease}.filter-trigger:hover{opacity:.8}.filter-trigger.active{opacity:1;color:var(--ngx-table-accent, #4f46e5)}.filter-trigger .funnel-icon{width:.8rem;height:.8rem}.filter-popover{position:absolute;top:calc(100% + 6px);inset-inline-start:-10px;z-index:100;width:220px;background:var(--ngx-table-row-bg, #ffffff);border:1px solid var(--ngx-table-border, #e5e7eb);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-radius:8px;padding:.75rem;display:flex;flex-direction:column;gap:.625rem;font-size:.8125rem;color:var(--ngx-table-text, #1e293b);cursor:default;box-sizing:border-box;visibility:hidden}.filter-section{display:flex;flex-direction:column;gap:.25rem}.filter-label{font-weight:500;font-size:.75rem;color:#64748b}.filter-select,.filter-input{width:100%;box-sizing:border-box;padding:.375rem .5rem;border-radius:6px;border:1px solid var(--ngx-table-border, #d1d5db);background:var(--ngx-table-row-bg, #ffffff);color:inherit;font-size:.8125rem}.filter-select:focus,.filter-input:focus{outline:none;border-color:var(--ngx-table-accent, #4f46e5)}.mt-1{margin-top:.375rem}.filter-set-list{max-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem;padding:.25rem;border:1px solid var(--ngx-table-border, #e5e7eb);border-radius:6px}.filter-set-item{display:flex;align-items:center;gap:.375rem;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:.75rem}.filter-set-item.font-bold{font-weight:600}.filter-actions{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.25rem;border-top:1px solid var(--ngx-table-border, #e5e7eb)}.filter-actions button{padding:.3rem .6rem;border-radius:4px;font-size:.75rem;cursor:pointer;border:none;font-weight:500}.filter-actions .btn-clear{background:transparent;color:#64748b}.filter-actions .btn-clear:hover{background:#f1f5f9}.filter-actions .btn-apply{background:var(--ngx-table-accent, #4f46e5);color:#fff}.filter-actions .btn-apply:hover{filter:brightness(.95)}\n"] }]
+        }], propDecorators: { tableEl: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableEl", required: true }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], currentFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentFilter", required: false }] }], distinctValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinctValues", required: false }] }], applyFilter: [{ type: i0.Output, args: ["applyFilter"] }], clearFilter: [{ type: i0.Output, args: ["clearFilter"] }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 class NgxTable {
     config = inject(NGX_TABLE_CONFIG);
     labels = inject(NGX_TABLE_I18N);
     paginationConfig = inject(NGX_PAGINATION_CONFIG);
+    columnFilterService = inject(ColumnFilterService);
     // ---------------------------------------------------------------- inputs
     fields = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
@@ -374,15 +763,15 @@ class NgxTable {
     ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
     height = input('75dvh', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "height" }] : /* 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();
+    filterChange = output();
     // ------------------------------------------------------------ int. state
+    elementRef = inject(ElementRef);
     pageIndex = signal(1, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
     pageSizeS = signal(this.paginationConfig.defaultPageSize, /* @ts-ignore */
@@ -391,6 +780,8 @@ class NgxTable {
     ...(ngDevMode ? [{ debugName: "sorts" }] : /* istanbul ignore next */ []));
     widths = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "widths" }] : /* istanbul ignore next */ []));
+    activeFilters = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFilters" }] : /* istanbul ignore next */ []));
     manuallyResized = new Set();
     rendererInputsCache = new Map();
     cellTemplates;
@@ -403,18 +794,9 @@ class NgxTable {
     ...(ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
-            const ps = this.pageSize();
-            this.pageSizeS.set(ps);
-            const pi = this.page();
-            this.pageIndex.set(pi);
+            this.pageSizeS.set(this.pageSize());
+            this.pageIndex.set(this.page());
         });
-        // برای هر ستونِ تازه‌دیده‌شده که width عددیِ صریح دارد، یک عرض seed کن؛
-        // ستون‌هایی که کاربر دستی ریسایز کرده دیگر هیچ‌وقت دوباره نوشته نمی‌شوند.
-        // مهم: ستون‌هایی که اصلاً width ندارند (یا width رشته‌ای مثل '20%' دارند)
-        // عمداً اینجا seed نمی‌شوند — قبلاً همه‌ی ستون‌ها با یک defaultWidth ثابت
-        // seed می‌شدند که باعث می‌شد جدول با flex:0 0 روی هر ستون هیچ‌وقت واقعاً
-        // 100% عرض رو پر نکنه، حتی وقتی کاربر عمداً یک ستون رو بدون width گذاشته
-        // بود تا فضای باقی‌مونده رو خودش پر کنه.
         effect(() => {
             const cols = this.fields();
             const current = this.widths();
@@ -434,17 +816,9 @@ class NgxTable {
                 this.widths.set(next);
         });
     }
-    ngOnInit() {
-        // نیاز به این نیست در لود خود صفحه بندی paginate را صدا میزند
-        // if (this.lazy()) {
-        //   this.lazyLoad.emit({ first: 0, pageIndex: 1, pageSize: this.pageSizeS(), sorts: [] });
-        // }
-    }
+    ngOnInit() { }
     ngAfterContentInit() {
         this.syncTemplateMap();
-        // این Observable خودش کامل نمی‌شه (EventEmitter ساده‌ست، نه یه stream که
-        // روی destroy کامپوننت تموم بشه)؛ بدون takeUntilDestroyed، این subscribe
-        // برای همیشه فعال می‌موند و رفرنس کامپوننت رو زنده نگه می‌داشت.
         this.cellTemplates.changes
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.syncTemplateMap());
@@ -452,18 +826,25 @@ class NgxTable {
     syncTemplateMap() {
         this.templateMap.clear();
         this.cellTemplates.forEach((cell) => {
-            // نکته‌ی مهم: cell.column() باید فراخوانی شود (سیگنال است)، نه cell.column.name.
             this.templateMap.set(cell.column(), cell.templateRef);
         });
     }
-    // ------------------------------------------------------------- داده‌ها
+    // ------------------------------------------------------------- داده‌ها (فیلتر ➔ سورت ➔ صفحه‌بندی)
+    filteredData = computed(() => {
+        const raw = this.data();
+        if (this.lazy())
+            return raw;
+        return this.columnFilterService.applyFilters(raw, this.activeFilters());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredData" }] : /* istanbul ignore next */ []));
     sortedData = computed(() => {
+        const source = this.filteredData();
         if (this.lazy())
-            return this.data();
+            return source;
         const sorts = this.sorts();
         if (sorts.length === 0)
-            return this.data();
-        const copy = [...this.data()];
+            return source;
+        const copy = [...source];
         copy.sort((a, b) => {
             for (const s of sorts) {
                 const cmp = this.compare(a[s.field], b[s.field]);
@@ -475,7 +856,7 @@ class NgxTable {
         return copy;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sortedData" }] : /* istanbul ignore next */ []));
-    totalCount = computed(() => this.lazy() ? this.totalRecords() : this.data().length, /* @ts-ignore */
+    totalCount = computed(() => this.lazy() ? this.totalRecords() : this.filteredData().length, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
     pagedData = computed(() => {
         if (this.lazy())
@@ -499,7 +880,6 @@ class NgxTable {
             return a.getTime() - b.getTime();
         return String(a).localeCompare(String(b));
     }
-    /** بدون mutation روی داده‌ی ورودی: شماره‌ی ردیف صرفاً از روی page/pageSize/rowIndex محاسبه می‌شود. */
     recordNumber(rowIndex) {
         return (this.pageIndex() - 1) * this.pageSizeS() + rowIndex + 1;
     }
@@ -542,6 +922,40 @@ class NgxTable {
         this.sortChange.emit(next);
         this.emitLazyIfNeeded();
     }
+    // ------------------------------------------------------------ فیلتر
+    isFilterable(field) {
+        return field.filterable === true || !!field.filterConfig?.enabled;
+    }
+    getFilterState(column) {
+        const f = this.activeFilters()[column];
+        return this.columnFilterService.isFilterActive(f) ? f : null;
+    }
+    getDistinctValues(column) {
+        const raw = this.data();
+        if (!raw || raw.length === 0)
+            return [];
+        return Array.from(new Set(raw.map((r) => r[column])));
+    }
+    onFilterApply(state) {
+        this.activeFilters.update((prev) => ({ ...prev, [state.field]: state }));
+        this.pageIndex.set(1);
+        this.pageChange.emit(1);
+        const activeList = Object.values(this.activeFilters()).filter((f) => this.columnFilterService.isFilterActive(f));
+        this.filterChange.emit(activeList);
+        this.emitLazyIfNeeded();
+    }
+    onFilterClear(field) {
+        this.activeFilters.update((prev) => {
+            const copy = { ...prev };
+            delete copy[field];
+            return copy;
+        });
+        this.pageIndex.set(1);
+        this.pageChange.emit(1);
+        const activeList = Object.values(this.activeFilters()).filter((f) => this.columnFilterService.isFilterActive(f));
+        this.filterChange.emit(activeList);
+        this.emitLazyIfNeeded();
+    }
     // ------------------------------------------------------------ صفحه‌بندی
     onPaginate(event) {
         this.pageIndex.set(event.page);
@@ -554,6 +968,7 @@ class NgxTable {
             return;
         const pageIndex = this.pageIndex();
         const pageSize = this.pageSizeS();
+        const activeFilterList = Object.values(this.activeFilters()).filter((f) => this.columnFilterService.isFilterActive(f));
         this.lazyLoad.emit({
             pageIndex,
             pageSize,
@@ -562,18 +977,13 @@ class NgxTable {
             sorting: this.sorts()
                 ?.map((s) => `${s.field} ${s.direction}`)
                 .join(','),
+            filters: activeFilterList,
         });
     }
     // -------------------------------------------------------------- ریسایز
     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)
@@ -610,8 +1020,6 @@ class NgxTable {
     getRenderer(field) {
         if (!field.renderer)
             return null;
-        // نکته: نوع دقیق field.renderer (که به کلیدهای رجیستری محدود است) در
-        // defineFields() چک می‌شود؛ اینجا فقط یک lookup رانتایم ساده لازم است.
         return this.config.renderers[field.renderer] ?? null;
     }
     getCellValue(row, field) {
@@ -632,9 +1040,6 @@ class NgxTable {
     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) {
@@ -654,15 +1059,15 @@ 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 }, 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 }, height: { classPropertyName: "height", publicName: "height", 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: { properties: { "style.--ngx-table-scroll-height": "height()" }, 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              {{ 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 !== false\"\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 !== false) {\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\">{{ 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\">{{ 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\">{{ 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: ["@charset \"UTF-8\";:host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #1a1a26);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111118);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #7dc4fb27);--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:var(--ngx-table-scroll-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;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg)}.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;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{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.loading-container .loading{border:5px rgba(88,84,84,.82) solid;border-radius:10px;padding:18px 25px;background:#3b3b3bab;color:#fff}.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", "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 }, height: { classPropertyName: "height", publicName: "height", 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", filterChange: "filterChange" }, host: { properties: { "style.--ngx-table-scroll-height": "height()" }, 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              {{ 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 !== false\"\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 !== false) {\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 (isFilterable(f)) {\n                <ngx-column-filter\n                  [tableEl]=\"elementRef\"\n                  [field]=\"f.column\"\n                  [config]=\"f.filterConfig\"\n                  [currentFilter]=\"getFilterState(f.column)\"\n                  [distinctValues]=\"getDistinctValues(f.column)\"\n                  (applyFilter)=\"onFilterApply($event)\"\n                  (clearFilter)=\"onFilterClear($event)\"></ngx-column-filter>\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\">{{ 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\">{{ 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\">{{ labels.loading }}</div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngx-pagination\n  [page]=\"pageIndex()\"\n  [pageSize]=\"pageSizeS()\"\n  [total]=\"totalCount()\"\n  (paginate)=\"onPaginate($event)\"></ngx-pagination>\n", styles: ["@charset \"UTF-8\";:host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #1a1a26);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111118);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #7dc4fb27);--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;height:var(--ngx-table-scroll-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;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg)}.thead-mrs--sticky{position:sticky;top:0}.tr-mrs{display:flex;align-items:stretch}.th-mrs,.td-mrs{position:relative;box-sizing:border-box;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;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{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.loading-container .loading{border:5px rgba(88,84,84,.82) solid;border-radius:10px;padding:18px 25px;background:#3b3b3bab;color:#fff}.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", "siblingCount", "boundaryCount"], outputs: ["pageChange", "pageSizeChange", "paginate"] }, { kind: "directive", type: ColumnResize, selector: "[ngxColumnResize]", inputs: ["ngxColumnResizeWidth", "ngxColumnResizeMin", "ngxColumnResizeMax", "ngxColumnResizeDir"], outputs: ["resizing", "resizeEnd"] }, { kind: "component", type: NgxColumnFilter, selector: "ngx-column-filter", inputs: ["tableEl", "field", "config", "currentFilter", "distinctValues"], outputs: ["applyFilter", "clearFilter"] }], 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: {
+            args: [{ selector: 'ngx-table', standalone: true, imports: [CommonModule, NgxPagination, ColumnResize, NgxColumnFilter], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ngx-table-host',
                         '[style.--ngx-table-scroll-height]': 'height()',
-                    }, 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              {{ 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 !== false\"\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 !== false) {\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\">{{ 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\">{{ 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\">{{ 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: ["@charset \"UTF-8\";:host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #1a1a26);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111118);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #7dc4fb27);--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:var(--ngx-table-scroll-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;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg)}.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;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{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.loading-container .loading{border:5px rgba(88,84,84,.82) solid;border-radius:10px;padding:18px 25px;background:#3b3b3bab;color:#fff}.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 }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", 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              {{ 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 !== false\"\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 !== false) {\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 (isFilterable(f)) {\n                <ngx-column-filter\n                  [tableEl]=\"elementRef\"\n                  [field]=\"f.column\"\n                  [config]=\"f.filterConfig\"\n                  [currentFilter]=\"getFilterState(f.column)\"\n                  [distinctValues]=\"getDistinctValues(f.column)\"\n                  (applyFilter)=\"onFilterApply($event)\"\n                  (clearFilter)=\"onFilterClear($event)\"></ngx-column-filter>\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\">{{ 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\">{{ 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\">{{ labels.loading }}</div>\n      </div>\n    }\n  </div>\n</div>\n\n<ngx-pagination\n  [page]=\"pageIndex()\"\n  [pageSize]=\"pageSizeS()\"\n  [total]=\"totalCount()\"\n  (paginate)=\"onPaginate($event)\"></ngx-pagination>\n", styles: ["@charset \"UTF-8\";:host{--ngx-table-accent: light-dark(#4f46e5, #818cf8);--ngx-table-border: light-dark(#e5e7eb, #27272a);--ngx-table-header-bg: light-dark(#f8fafc, #1a1a26);--ngx-table-header-fg: light-dark(#334155, #d4d4d8);--ngx-table-row-bg: light-dark(#ffffff, #111118);--ngx-table-row-alt-bg: light-dark(#f9fafb, #17171b);--ngx-table-row-hover-bg: light-dark(#eef2ff, #7dc4fb27);--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;height:var(--ngx-table-scroll-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;background:var(--ngx-table-header-bg);color:var(--ngx-table-header-fg)}.thead-mrs--sticky{position:sticky;top:0}.tr-mrs{display:flex;align-items:stretch}.th-mrs,.td-mrs{position:relative;box-sizing:border-box;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;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{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.loading-container .loading{border:5px rgba(88,84,84,.82) solid;border-radius:10px;padding:18px 25px;background:#3b3b3bab;color:#fff}.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 }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", 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"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], cellTemplates: [{
                 type: ContentChildren,
                 args: [TableCell]
             }] } });
@@ -673,5 +1078,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ColumnResize, NGX_PAGINATION_CONFIG, NGX_PAGINATION_I18N, NGX_TABLE_CONFIG, NGX_TABLE_I18N, NgxPagination, NgxTable, PaginationLocalization, TableCell, TableLocalization, defineFields, defineRenderers, providePagination, provideTable };
+export { ColumnFilterService, ColumnResize, DynamicDataFilterOperator, NGX_PAGINATION_CONFIG, NGX_PAGINATION_I18N, NGX_TABLE_CONFIG, NGX_TABLE_I18N, NgxColumnFilter, NgxPagination, NgxTable, PaginationLocalization, TableCell, TableLocalization, defineFields, defineRenderers, providePagination, provideTable };
 //# sourceMappingURL=ngx-kit-data-table.mjs.map