@den4ik92/ng2-smart-table 19.4.3 → 19.4.5

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, ChangeDetectionStrategy, output, signal, effect, inject, ElementRef, Directive, ViewContainerRef, ViewChild } from '@angular/core';
+import { input, computed, Component, ChangeDetectionStrategy, signal, effect, inject, ElementRef, Directive, ViewContainerRef, ViewChild, output } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { distinctUntilChanged, debounceTime, takeUntil, switchMap, take } from 'rxjs/operators';
@@ -29,7 +29,7 @@ class BaseFilterComponent {
         this.inputClass = input('');
         this.source = input.required();
         this.column = input.required();
-        this.filter = output();
+        this.filterEmitter = input.required();
         this.inputControl = new UntypedFormControl();
     }
     ngOnDestroy() {
@@ -50,10 +50,10 @@ class BaseFilterComponent {
         }
     }
     setFilter(query) {
-        this.filter.emit(query);
+        this.filterEmitter().emit(query);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", 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 } }, outputs: { filter: "filter" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFilterComponent, decorators: [{
             type: Component,
@@ -1255,11 +1255,11 @@ class RowActionsComponent {
         this.deleteEmitter.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: RowActionsComponent, isStandalone: true, selector: "ng2-row-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editEmitter: "editEmitter", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter" }, ngImport: i0, template: "@if (!row().pending()) {\n  @if (isActionEditActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-edit-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n      [innerHTML]=\"editRowButtonContent()\"\n      (click)=\"onEdit($event)\"></a>\n  }\n  @if (isActionDeleteActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-delete-button'\"\n      class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n      [innerHTML]=\"deleteRowButtonContent()\"\n      (click)=\"onDelete($event)\"></a>\n  }\n  @for (action of customActions(); track action.name) {\n    <a\n      [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n      href=\"#\"\n      class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n      [innerHTML]=\"action.title\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n  }\n} @else {\n  @for (item of allActionsCountArray(); track $index) {\n    <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n  }\n}\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: RowActionsComponent, isStandalone: true, selector: "ng2-row-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editEmitter: "editEmitter", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter" }, ngImport: i0, template: "@if (!row().pending()) {\n  @if (isActionEditActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-edit-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n      [innerHTML]=\"editRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault();onEdit($event)\"></a>\n  }\n  @if (isActionDeleteActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-delete-button'\"\n      class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n      [innerHTML]=\"deleteRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault();onDelete($event)\"></a>\n  }\n  @for (action of customActions(); track action.name) {\n    <a\n      [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n      href=\"#\"\n      class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n      [innerHTML]=\"action.title\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n  }\n} @else {\n  @for (item of allActionsCountArray(); track $index) {\n    <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n  }\n}\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RowActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-row-actions', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) {\n  @if (isActionEditActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-edit-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n      [innerHTML]=\"editRowButtonContent()\"\n      (click)=\"onEdit($event)\"></a>\n  }\n  @if (isActionDeleteActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-delete-button'\"\n      class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n      [innerHTML]=\"deleteRowButtonContent()\"\n      (click)=\"onDelete($event)\"></a>\n  }\n  @for (action of customActions(); track action.name) {\n    <a\n      [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n      href=\"#\"\n      class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n      [innerHTML]=\"action.title\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n  }\n} @else {\n  @for (item of allActionsCountArray(); track $index) {\n    <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n  }\n}\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"] }]
+            args: [{ selector: 'ng2-row-actions', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) {\n  @if (isActionEditActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-edit-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n      [innerHTML]=\"editRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault();onEdit($event)\"></a>\n  }\n  @if (isActionDeleteActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-delete-button'\"\n      class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n      [innerHTML]=\"deleteRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault();onDelete($event)\"></a>\n  }\n  @for (action of customActions(); track action.name) {\n    <a\n      [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n      href=\"#\"\n      class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n      [innerHTML]=\"action.title\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n  }\n} @else {\n  @for (item of allActionsCountArray(); track $index) {\n    <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n  }\n}\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"] }]
         }] });
 
 class TrowComponent {
@@ -1386,7 +1386,9 @@ class CheckboxFilterComponent extends BaseFilterComponent {
         [class]="inputClass()"
         class="form-control" />
       @if (filterIsActive()) {
-        <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
+        <a href="#" (click)="$event.preventDefault(); resetFilter($event)">{{
+          column().getFilterConfig()?.resetText || 'reset'
+        }}</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 }); }
@@ -1403,7 +1405,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         [class]="inputClass()"
         class="form-control" />
       @if (filterIsActive()) {
-        <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
+        <a href="#" (click)="$event.preventDefault(); resetFilter($event)">{{
+          column().getFilterConfig()?.resetText || 'reset'
+        }}</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"] }]
@@ -1441,7 +1445,7 @@ class SelectFilterComponent extends BaseFilterComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", usesInheritance: true, ngImport: i0, template: `
     <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
-      <option value="null">{{ column().getFilterConfig().selectText || 'all' }}</option>
+      <option value="">{{ column().getFilterConfig().selectText || 'all' }}</option>
       @for (option of column().getFilterConfig().list; track $index) {
         <option [value]="option.value">
           {{ option.title }}
@@ -1456,7 +1460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     selector: 'ng2-select-filter',
                     template: `
     <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
-      <option value="null">{{ column().getFilterConfig().selectText || 'all' }}</option>
+      <option value="">{{ column().getFilterConfig().selectText || 'all' }}</option>
       @for (option of column().getFilterConfig().list; track $index) {
         <option [value]="option.value">
           {{ option.title }}
@@ -1486,7 +1490,7 @@ class BuildInFilterComponent {
           [class]="inputClass()"
           [source]="source()"
           [column]="column()"
-          (filter)="filter.emit($event)">
+          [filterEmitter]="filter">
         </ng2-select-filter>
       }
       @case ('checkbox') {
@@ -1495,7 +1499,7 @@ class BuildInFilterComponent {
           [source]="source()"
           [class]="inputClass()"
           [column]="column()"
-          (filter)="filter.emit($event)">
+          [filterEmitter]="filter">
         </ng2-checkbox-filter>
       }
       @default {
@@ -1504,7 +1508,7 @@ class BuildInFilterComponent {
           [source]="source()"
           [class]="inputClass()"
           [column]="column()"
-          (filter)="filter.emit($event)">
+          [filterEmitter]="filter">
         </ng2-input-filter>
       }
     }
@@ -1522,7 +1526,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
           [class]="inputClass()"
           [source]="source()"
           [column]="column()"
-          (filter)="filter.emit($event)">
+          [filterEmitter]="filter">
         </ng2-select-filter>
       }
       @case ('checkbox') {
@@ -1531,7 +1535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
           [source]="source()"
           [class]="inputClass()"
           [column]="column()"
-          (filter)="filter.emit($event)">
+          [filterEmitter]="filter">
         </ng2-checkbox-filter>
       }
       @default {
@@ -1540,7 +1544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
           [source]="source()"
           [class]="inputClass()"
           [column]="column()"
-          (filter)="filter.emit($event)">
+          [filterEmitter]="filter">
         </ng2-input-filter>
       }
     }
@@ -1552,58 +1556,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 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.inputClass = input('');
         this.source = input.required();
         this.column = input.required();
         this.filter = output();
     }
-    ngOnChanges(changes) {
-        if (this.customComponent) {
-            if (this.customComponent?.instance && 'ngOnChanges' in this.customComponent.instance) {
-                try {
-                    const onChanges = this.customComponent.instance.ngOnChanges;
-                    onChanges(changes);
-                }
-                catch {
-                    // do nothing
-                }
-            }
-            return;
-        }
-        const columnFilter = this.column().filter;
-        if (columnFilter && columnFilter.type === 'custom') {
-            this.customComponent = this.dynamicTarget?.createComponent(columnFilter?.component);
-            // set @Inputs and @Outputs of custom component
-            this.customComponent?.setInput('query', this.query());
-            this.customComponent?.setInput('column', this.column());
-            this.customComponent?.setInput('source', this.source());
-            this.customComponent?.setInput('inputClass', this.inputClass());
-            this.filterSubscription = this.customComponent?.instance.filter.subscribe((event) => this.filter.emit(event));
-        }
-    }
-    ngOnDestroy() {
-        if (this.customComponent) {
-            this.customComponent.destroy();
-        }
-        if (this.filterSubscription) {
-            this.filterSubscription.unsubscribe();
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", 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" }, viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-custom-table-filter',
-                    template: `<ng-template #dynamicTarget></ng-template>`,
+                    imports: [NgComponentOutlet],
+                    template: `
+    @if (customFilterComponent(); as component) {
+      <ng-template
+        *ngComponentOutlet="
+          component;
+          inputs: {
+            query: query(),
+            inputClass: inputClass(),
+            source: source(),
+            column: column(),
+            filterEmitter: filter,
+          }
+        "></ng-template>
+    }
+  `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { dynamicTarget: [{
-                type: ViewChild,
-                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
-            }] } });
+        }] });
 
 class FilterComponent {
     constructor() {
@@ -1713,7 +1718,7 @@ class AddButtonComponent {
         href="#"
         class="ng2-smart-action ng2-smart-action-add-add"
         [innerHTML]="addNewButtonContent()"
-        (click)="onAdd($event)"></a>
+        (click)="$event.preventDefault(); onAdd($event)"></a>
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1727,7 +1732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         href="#"
         class="ng2-smart-action ng2-smart-action-add-add"
         [innerHTML]="addNewButtonContent()"
-        (click)="onAdd($event)"></a>
+        (click)="$event.preventDefault(); onAdd($event)"></a>
     }
   `,
                     host: {