@den4ik92/ng2-smart-table 19.6.42 → 19.6.45

package/fesm2022/den4ik92-ng2-smart-table.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, signal, effect, inject, ElementRef, Directive, untracked, ViewContainerRef, ViewChild, output, viewChild } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, effect, signal, inject, ElementRef, Directive, untracked, ViewContainerRef, ViewChild, output, viewChild } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { distinctUntilChanged, debounceTime, takeUntil, switchMap, take, finalize } from 'rxjs/operators';
@@ -27,12 +27,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class BaseFilterComponent {
     constructor() {
         this.delay = 300;
-        this.query = input('');
+        this.query = input(null);
         this.inputClass = input('');
         this.source = input.required();
         this.column = input.required();
         this.filterEmitter = input.required();
         this.inputControl = new UntypedFormControl();
+        this.placeholder = '';
+        effect(() => {
+            this.inputControl?.setValue(this.query(), { emitEvent: false });
+        });
     }
     ngOnDestroy() {
         if (this.changesSubscription) {
@@ -45,22 +49,18 @@ class BaseFilterComponent {
             .subscribe((value) => {
             this.setFilter(value);
         });
-    }
-    ngOnChanges({ query }) {
-        if (query) {
-            this.inputControl?.setValue(query.currentValue, { emitEvent: false });
-        }
+        this.placeholder = this.column()?.getFilterConfig()?.placeholder || this.column()?.getFilterConfig()?.selectText;
     }
     setFilter(query) {
         this.filterEmitter().emit(query);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterEmitter: { classPropertyName: "filterEmitter", publicName: "filterEmitter", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterEmitter: { classPropertyName: "filterEmitter", publicName: "filterEmitter", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseFilterComponent, decorators: [{
             type: Component,
             args: [{ template: '', selector: 'ng2-base-filter-component', changeDetection: ChangeDetectionStrategy.OnPush }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Extending object that entered in first argument.
@@ -411,8 +411,8 @@ class Column {
         if (settings.type === 'custom' && settings.renderComponent) {
             this.renderComponent = settings.renderComponent;
         }
-        if (settings.type === 'custom' && settings.renderComponentInputs) {
-            this.renderComponentInputs = settings.renderComponentInputs;
+        if (settings.type === 'custom' && settings.inputs) {
+            this.renderComponentInputs = settings.inputs;
         }
         this.isFilterable = !!settings['filter'];
         this.isSortable = settings.sort ?? false;
@@ -426,7 +426,7 @@ class Column {
         if (this.editor) {
             return this.editor?.config;
         }
-        return false;
+        return undefined;
     }
     getFilterType() {
         return this.filter && this.filter.type;
@@ -435,7 +435,7 @@ class Column {
         if (this.filter) {
             return this.filter?.config;
         }
-        return false;
+        return undefined;
     }
 }
 
@@ -498,8 +498,8 @@ class DataSource {
             perPageSelect: [],
         });
         this.data = signal([]);
-        this.getSort = computed(() => this.sortConf());
-        this.getFilters = computed(() => this.filters());
+        this.getSort = this.sortConf;
+        this.getFilters = this.filters;
     }
     refresh() {
         this.emitOnChanged({ action: SmartTableOnChangedEventName.refresh });
@@ -560,7 +560,9 @@ class DataSource {
             return;
         }
         const foundIndex = this.filters().findIndex((filter) => filter.field === newFilter.field);
-        const newSearchString = typeof newFilter.search === 'undefined' || newFilter.search === null ? '' : `${newFilter.search}`;
+        const newSearchString = typeof newFilter.search === 'undefined' || newFilter.search === null || newFilter.search === 'null'
+            ? ''
+            : `${newFilter.search}`;
         if (foundIndex === -1) {
             if (newSearchString?.length) {
                 this.filters.set([...this.filters(), newFilter]);
@@ -861,18 +863,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class CheckboxEditorComponent extends BaseEditorComponent {
     constructor() {
-        super();
-        this.trueVal = computed(() => {
-            return this.cell().column.getEditorConfig()?.true || true;
-        });
-        this.falseVal = computed(() => {
-            return this.cell().column.getEditorConfig()?.false || false;
-        });
+        super(...arguments);
+        this.trueVal = true;
+        this.falseVal = false;
+    }
+    ngOnInit() {
+        this.trueVal = this.cell().column.getEditorConfig()?.true || true;
+        this.falseVal = this.cell().column.getEditorConfig()?.false || false;
     }
     onChange(event) {
-        this.cell().setNewValue(event.target.checked ? this.trueVal() : this.falseVal());
+        this.cell().setNewValue(event.target.checked ? this.trueVal : this.falseVal);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CheckboxEditorComponent, isStandalone: true, selector: "ng2-checkbox-editor", usesInheritance: true, ngImport: i0, template: `
     <input
       [class]="inputClass()"
@@ -881,7 +883,7 @@ class CheckboxEditorComponent extends BaseEditorComponent {
       [name]="cell().id"
       [disabled]="!cell().isEditable()"
       (change)="onChange($event)"
-      [checked]="cell().getValue() === trueVal()" />
+      [checked]="cell().getValue() === trueVal" />
   `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
@@ -894,9 +896,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
       [name]="cell().id"
       [disabled]="!cell().isEditable()"
       (change)="onChange($event)"
-      [checked]="cell().getValue() === trueVal()" />
+      [checked]="cell().getValue() === trueVal" />
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class InputEditorComponent extends BaseEditorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -905,7 +907,7 @@ class InputEditorComponent extends BaseEditorComponent {
       type="text"
       [class]="inputClass()"
       class="form-control"
-      [ngModel]="cell().getValue()"
+      [ngModel]="cell().newValue()"
       (ngModelChange)="cell().setNewValue($event)"
       [name]="cell().id"
       [placeholder]="cell().title"
@@ -919,7 +921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
       type="text"
       [class]="inputClass()"
       class="form-control"
-      [ngModel]="cell().getValue()"
+      [ngModel]="cell().newValue()"
       (ngModelChange)="cell().setNewValue($event)"
       [name]="cell().id"
       [placeholder]="cell().title"
@@ -933,7 +935,7 @@ class SelectEditorComponent extends BaseEditorComponent {
     <select
       [class]="inputClass()"
       class="form-control"
-      [ngModel]="cell().getValue()"
+      [ngModel]="cell().newValue()"
       (ngModelChange)="cell().setNewValue($event)"
       [name]="cell().id"
       [disabled]="!cell().isEditable()">
@@ -953,7 +955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
     <select
       [class]="inputClass()"
       class="form-control"
-      [ngModel]="cell().getValue()"
+      [ngModel]="cell().newValue()"
       (ngModelChange)="cell().setNewValue($event)"
       [name]="cell().id"
       [disabled]="!cell().isEditable()">
@@ -975,7 +977,7 @@ class TextareaEditorComponent extends BaseEditorComponent {
     <textarea
       [class]="inputClass()"
       class="form-control"
-      [ngModel]="cell().getValue()"
+      [ngModel]="cell().newValue()"
       (ngModelChange)="cell().setNewValue($event)"
       [name]="cell().id"
       [disabled]="!cell().isEditable()"
@@ -989,7 +991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
     <textarea
       [class]="inputClass()"
       class="form-control"
-      [ngModel]="cell().getValue()"
+      [ngModel]="cell().newValue()"
       (ngModelChange)="cell().setNewValue($event)"
       [name]="cell().id"
       [disabled]="!cell().isEditable()"
@@ -1061,7 +1063,6 @@ class EditCellComponent {
     constructor() {
         this.cell = input.required();
     }
-    // readonly inputClass = input('');
     getEditorType() {
         const editor = this.cell().column.editor;
         if (editor) {
@@ -1503,7 +1504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class CheckboxFilterComponent extends BaseFilterComponent {
     constructor() {
-        super();
+        super(...arguments);
         this.filterIsActive = computed(() => this.query() !== null);
         this.currentState = computed(() => {
             const valuesConfig = this.getValuesConfig(this.column().getFilterConfig());
@@ -1529,7 +1530,7 @@ class CheckboxFilterComponent extends BaseFilterComponent {
         event.stopPropagation();
         this.setFilter(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CheckboxFilterComponent, isStandalone: true, selector: "ng2-checkbox-filter", usesInheritance: true, ngImport: i0, template: `
     <div class="checkbox-filter-wrapper">
       <input
@@ -1545,7 +1546,7 @@ class CheckboxFilterComponent extends BaseFilterComponent {
         }}</a>
       }
     </div>
-  `, isInline: true, styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "19.2.14", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
             type: Component,
@@ -1564,8 +1565,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }}</a>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule], styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"] }]
-        }], ctorParameters: () => [] });
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"] }]
+        }] });
 
 class InputFilterComponent extends BaseFilterComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -1575,8 +1576,8 @@ class InputFilterComponent extends BaseFilterComponent {
       [formControl]="inputControl"
       class="form-control"
       type="text"
-      placeholder="{{ column().title }}" />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+      placeholder="{{ placeholder || column().title }}" />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputFilterComponent, decorators: [{
             type: Component,
@@ -1588,25 +1589,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
       [formControl]="inputControl"
       class="form-control"
       type="text"
-      placeholder="{{ column().title }}" />
+      placeholder="{{ placeholder || column().title }}" />
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, ReactiveFormsModule],
+                    imports: [ReactiveFormsModule],
                 }]
         }] });
 
 class SelectFilterComponent extends BaseFilterComponent {
+    constructor() {
+        super(...arguments);
+        this.optionsList = signal([]);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const config = this.column().getFilterConfig();
+        this.optionsList.set(config?.list || []);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", usesInheritance: true, ngImport: i0, template: `
     <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
-      <option value="">{{ column().getFilterConfig().selectText || 'all' }}</option>
-      @for (option of column().getFilterConfig().list; track $index) {
+      <option [value]="null">{{ placeholder || 'all' }}</option>
+      @for (option of optionsList(); track $index) {
         <option [value]="option.value">
           {{ option.title }}
         </option>
       }
     </select>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectFilterComponent, decorators: [{
             type: Component,
@@ -1614,8 +1624,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     selector: 'ng2-select-filter',
                     template: `
     <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
-      <option value="">{{ column().getFilterConfig().selectText || 'all' }}</option>
-      @for (option of column().getFilterConfig().list; track $index) {
+      <option [value]="null">{{ placeholder || 'all' }}</option>
+      @for (option of optionsList(); track $index) {
         <option [value]="option.value">
           {{ option.title }}
         </option>
@@ -1623,13 +1633,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
     </select>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, ReactiveFormsModule],
+                    imports: [ReactiveFormsModule],
                 }]
         }] });
 
 class BuildInFilterComponent {
     constructor() {
-        this.query = input('');
+        this.query = input(null);
         this.inputClass = input('');
         this.source = input.required();
         this.column = input.required();
@@ -1710,33 +1720,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class CustomFilterComponent {
     constructor() {
-        this.customFilterComponent = computed(() => {
-            const columnFilter = this.column().filter;
-            if (!columnFilter || columnFilter.type !== 'custom') {
-                return null;
-            }
-            return columnFilter.component;
-        });
-        this.query = input('');
+        this.query = input(null);
         this.inputClass = input('');
         this.source = input.required();
         this.column = input.required();
         this.filter = output();
+        this.componentInputs = computed(() => {
+            let inputs = {
+                query: this.query(),
+                inputClass: this.inputClass(),
+                source: this.source(),
+                column: this.column(),
+                filterEmitter: this.filter,
+            };
+            const columnFilter = this.column().filter;
+            if (columnFilter && columnFilter.type === 'custom') {
+                if (columnFilter.config?.inputs) {
+                    inputs = { ...inputs, ...columnFilter.config?.inputs };
+                }
+            }
+            return inputs;
+        });
+    }
+    ngOnInit() {
+        const columnFilter = this.column().filter;
+        if (columnFilter && columnFilter.type === 'custom') {
+            this.customFilterComponent = columnFilter.component;
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CustomFilterComponent, isStandalone: true, selector: "ng2-custom-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: `
-    @if (customFilterComponent(); as component) {
-      <ng-template
-        *ngComponentOutlet="
-          component;
-          inputs: {
-            query: query(),
-            inputClass: inputClass(),
-            source: source(),
-            column: column(),
-            filterEmitter: filter,
-          }
-        "></ng-template>
+    @if (customFilterComponent) {
+      <ng-template *ngComponentOutlet="customFilterComponent; inputs: componentInputs()"></ng-template>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1746,18 +1761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     selector: 'ng2-custom-table-filter',
                     imports: [NgComponentOutlet],
                     template: `
-    @if (customFilterComponent(); as component) {
-      <ng-template
-        *ngComponentOutlet="
-          component;
-          inputs: {
-            query: query(),
-            inputClass: inputClass(),
-            source: source(),
-            column: column(),
-            filterEmitter: filter,
-          }
-        "></ng-template>
+    @if (customFilterComponent) {
+      <ng-template *ngComponentOutlet="customFilterComponent; inputs: componentInputs()"></ng-template>
     }
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1766,15 +1771,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class FilterComponent {
     constructor() {
+        this.column = input.required();
+        this.source = input.required();
+        this.inputClass = input('');
         this.query = computed(() => {
             const columnFilter = this.source()
                 .getFilters()
                 .find((filter) => filter.field === this.column().id);
             return columnFilter?.search ?? null;
         });
-        this.column = input.required();
-        this.source = input.required();
-        this.inputClass = input('');
     }
     onFilter(query) {
         const columnFilter = this.column().filter;
@@ -2537,7 +2542,7 @@ class Ng2SmartTableComponent {
          * <div #paginationSlot>
          * </div>
          * inside component
-         * readonly paginationContainerRef = viewChild<'paginationSlot', ViewContainerRef>('paginationSlot', {
+         * readonly paginationContainerRef = viewChild('paginationSlot', {
          *  read: ViewContainerRef,
          * });
          */