@den4ik92/ng2-smart-table 19.4.7 → 19.5.0

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

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { input, computed, Component, ChangeDetectionStrategy, signal, effect, inject, ElementRef, Directive, ViewContainerRef, ViewChild, output } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, signal, effect, inject, ElementRef, Directive, 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 } from 'rxjs/operators';
-import * as i1$1 from '@angular/cdk/overlay';
+import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay, OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1$1 from '@angular/cdk/portal';
+import { ComponentPortal, CdkPortal, PortalModule } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
 import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
@@ -196,6 +197,14 @@ function isObjectsIdentical(a, b) {
         return compareObjectsAsJSON(a, b);
     }
 }
+function CheckParentElementClassRecursive(element, className) {
+    if (!element)
+        return false;
+    if (element.classList.contains(className)) {
+        return true;
+    }
+    return CheckParentElementClassRecursive(element.parentElement, className);
+}
 
 class TableColumnsEditorComponent {
     constructor() {
@@ -513,12 +522,17 @@ class DataSource {
         return Promise.resolve(true);
     }
     async remove(element) {
-        this.data.update((old) => old.filter((el) => el !== element));
-        this.emitOnChanged({ action: SmartTableOnChangedEventName.remove, item: element });
+        this.data.update((old) => old.filter((el) => !isObjectsIdentical(el, element)));
+        this.emitOnChanged({ action: SmartTableOnChangedEventName.remove, item: element }, this.data());
         return Promise.resolve(true);
     }
     async update(oldItem, newItem) {
-        this.data.update((old) => old.map((el) => (el === oldItem ? newItem : el)));
+        this.data.update((old) => old.map((el) => {
+            if (isObjectsIdentical(el, oldItem)) {
+                return newItem;
+            }
+            return el;
+        }));
         this.emitOnChanged({ action: SmartTableOnChangedEventName.update, oldItem, newItem });
         return Promise.resolve(true);
     }
@@ -539,14 +553,15 @@ class DataSource {
             return;
         }
         const foundIndex = this.filters().findIndex((filter) => filter.field === newFilter.field);
+        const newSearchString = typeof newFilter.search === 'undefined' || newFilter.search === null ? '' : `${newFilter.search}`;
         if (foundIndex === -1) {
-            if (newFilter.search || typeof newFilter.search === 'boolean') {
+            if (newSearchString?.length) {
                 this.filters.set([...this.filters(), newFilter]);
             }
         }
         else {
             const filtersTemp = this.filters();
-            if (newFilter.search || typeof newFilter.search === 'boolean') {
+            if (newSearchString?.length) {
                 filtersTemp[foundIndex].search = newFilter.search;
             }
             else {
@@ -586,25 +601,26 @@ class DataSource {
             filters: this.getFilters(),
             sort: this.getSort(),
         };
-        if (eventData.action === SmartTableOnChangedEventName.remove) {
-            actionData.elements = (newElements || this.data()).filter((el) => el !== eventData.item);
-        }
         this.onChangedSource.next(actionData);
     }
 }
 
-function filterValues(value, search) {
+function exactMatch(value, search) {
+    return value.toString().toLowerCase() === search.toString().toLowerCase();
+}
+function includeMatch(value, search) {
     return value.toString().toLowerCase().includes(search.toString().toLowerCase());
 }
-async function isElementSatisfied(element, filters) {
+function isElementSatisfied(element, filters) {
     return filters.every((filter) => {
-        if (!filter.search?.length) {
+        const search = `${filter.search}`;
+        if (!search?.length) {
             return true;
         }
-        const filterFunction = filter.filter || filterValues;
+        const filterFunction = filter.filter || filter.type === 'list' ? exactMatch : includeMatch;
         try {
             const value = element[filter.field];
-            return filterFunction(value, filter.search);
+            return filterFunction(value, search);
         }
         catch {
             return false;
@@ -625,20 +641,37 @@ function compareValues(direction, a, b) {
     }
     return 0;
 }
-class LocalSorter {
-    static async sort(data, field, direction, customCompare) {
-        const dir = direction === 'asc' ? 1 : -1;
-        const compare = customCompare ? customCompare : compareValues;
-        return data.sort((a, b) => {
-            return compare.call(null, dir, a[field], b[field]);
-        });
-    }
+function localSort(data, field, direction, customCompare) {
+    const dir = direction === 'asc' ? 1 : -1;
+    const compare = customCompare ? customCompare : compareValues;
+    return data.sort((a, b) => {
+        try {
+            return compare(dir, a[field], b[field]);
+        }
+        catch {
+            return 0;
+        }
+    });
 }
 
 class LocalDataSource extends DataSource {
     constructor(data = []) {
         super();
-        this.filteredAndSorted = signal([]);
+        this.filteredAndSorted = computed(() => {
+            let list = this.data().slice(0);
+            const filters = this.filters();
+            if (filters.length) {
+                list = list.filter((element) => isElementSatisfied(element, filters));
+            }
+            if (this.sortConf()) {
+                const { field, direction, compare } = this.sortConf();
+                list = localSort(list, field, direction, compare);
+            }
+            return list;
+        });
+        this.paginatedList = computed(() => {
+            return this.paginate(this.filteredAndSorted());
+        });
         this.count = computed(() => this.filteredAndSorted().length);
         this.data.set(data);
     }
@@ -666,56 +699,21 @@ class LocalDataSource extends DataSource {
     reset(silent = false) {
         if (silent) {
             this.filters.set([]);
-            this.sortConf.set({ field: '', title: '', direction: 'asc' });
             this.pagingConf.update((old) => ({ ...old, page: 1 }));
         }
         else {
             this.setFilters([], false);
-            this.setSort({ field: '', title: '', direction: 'asc' }, false);
             if (this.pagingConf().display) {
                 this.setPage(1);
             }
         }
     }
     async emitOnChanged(event, newElements) {
-        let renderData = this.filteredAndSorted().slice(0);
-        const action = event.action;
-        if (['filter', 'refresh', 'load', 'add', 'prepend', 'appendMany'].includes(action)) {
-            renderData = await this.filter(newElements || this.data().slice(0));
-            renderData = await this.sort(renderData);
-            this.filteredAndSorted.set(renderData);
-        }
-        if (action === SmartTableOnChangedEventName.sort) {
-            renderData = await this.sort(renderData);
-            this.filteredAndSorted.set(renderData);
-        }
-        if (this.pagingConf().display &&
-            ['page', 'paging', 'refresh', 'load', 'sort', 'filter'].includes(action)) {
-            renderData = this.paginate(this.filteredAndSorted());
-        }
-        super.emitOnChanged(event, renderData);
+        super.emitOnChanged(event, this.paginatedList());
         if (this.pagingConf().display && this.isPageOutOfBounce()) {
             this.setPage(this.pagingConf().page - 1);
         }
     }
-    async sort(data) {
-        if (this.sortConf()) {
-            return LocalSorter.sort(data, this.sortConf().field, this.sortConf().direction, this.sortConf().compare);
-        }
-        return data;
-    }
-    async filter(data) {
-        if (!this.filters.length) {
-            return data;
-        }
-        const filtered = [];
-        await Promise.all(data.map(async (element) => {
-            if (await isElementSatisfied(element, this.filters())) {
-                filtered.push(element);
-            }
-        }));
-        return filtered;
-    }
     paginate(data) {
         if (this.pagingConf().display) {
             return paginateList(data, this.pagingConf().page, this.pagingConf().perPage);
@@ -1179,11 +1177,11 @@ class TbodyCreateCancelComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, rowPending: { classPropertyName: "rowPending", publicName: "rowPending", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancelEdit: "cancelEdit" }, ngImport: i0, template: "<div class=\"buttons-wrap\">\n  @if (!rowPending()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-save\"\n      [innerHTML]=\"saveButtonContent()\"\n      (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n      [innerHTML]=\"cancelButtonContent()\"\n      (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n  } @else {\n    <div style=\"display: flex; gap:0.5rem\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </div>\n  }\n</div>\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>", styles: [".buttons-wrap{display:flex;gap:.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: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, rowPending: { classPropertyName: "rowPending", publicName: "rowPending", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancelEdit: "cancelEdit" }, ngImport: i0, template: "<div class=\"buttons-wrap\">\n  @if (!rowPending()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-save\"\n      [innerHTML]=\"saveButtonContent()\"\n      (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n      [innerHTML]=\"cancelButtonContent()\"\n      (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n  } @else {\n    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n  }\n</div>\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: [".buttons-wrap{display:flex;gap:.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: TbodyCreateCancelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-st-tbody-create-cancel', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"buttons-wrap\">\n  @if (!rowPending()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-save\"\n      [innerHTML]=\"saveButtonContent()\"\n      (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n      [innerHTML]=\"cancelButtonContent()\"\n      (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n  } @else {\n    <div style=\"display: flex; gap:0.5rem\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </div>\n  }\n</div>\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>", styles: [".buttons-wrap{display:flex;gap:.5rem}\n"] }]
+            args: [{ selector: 'ng2-st-tbody-create-cancel', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"buttons-wrap\">\n  @if (!rowPending()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-save\"\n      [innerHTML]=\"saveButtonContent()\"\n      (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n      [innerHTML]=\"cancelButtonContent()\"\n      (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n  } @else {\n    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n  }\n</div>\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: [".buttons-wrap{display:flex;gap:.5rem}\n"] }]
         }] });
 
 class RowActionsComponent {
@@ -1255,11 +1253,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)=\"$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 }); }
+    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}:host{display:flex;gap:.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)=\"$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"] }]
+            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}:host{display:flex;gap:.5rem}\n"] }]
         }] });
 
 class TrowComponent {
@@ -1295,13 +1293,13 @@ class TrowComponent {
         this.row()?.isInEditing.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TrowComponent, isStandalone: true, selector: "[ng2-st-trow]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null }, isCreateRow: { classPropertyName: "isCreateRow", publicName: "isCreateRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editCancel: "editCancel", editConfirmed: "editConfirmed", deleteEmitter: "deleteEmitter", createConfirmed: "createConfirmed", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, host: { properties: { "class.ng2-smart-card": "isMobileView()" } }, ngImport: i0, template: "@if (isMobileView()) {\n  <td colspan=\"50\">\n    <div class=\"ng2-smart-card-header\">\n      <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n      <div class=\"ng2-smart-card-actions\">\n        <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n      </div>\n    </div>\n    <div class=\"ng2-smart-card-content\">\n      @for (cell of row().visibleCells(); track cell.id + $index) {\n        <div class=\"ng2-smart-card-field\">\n          <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n          <div class=\"ng2-smart-card-field-value\">\n            <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n          </div>\n        </div>\n      }\n    </div>\n  </td>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n  @if (grid().actionIsOnLeft()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n  @for (cell of row().visibleCells(); track cell.id + $index) {\n    <td\n      [class]=\"cell.columnClass\"\n      [style]=\"cell.styles\">\n      <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n    </td>\n  }\n  @if (grid().actionIsOnRight()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n}\n\n<ng-template #actions>\n  @if (isCreateRow() || row().isInEditing()) {\n    <td class=\"ng2-smart-actions\">\n      <ng2-st-tbody-create-cancel\n        [grid]=\"grid()\"\n        [rowIndex]=\"row().index || 0\"\n        (cancelEdit)=\"onCancelEdit()\"\n        (save)=\"onSave()\"\n        [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n    </td>\n  } @else {\n    @if (grid().isActionsVisible()) {\n      <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n        <ng2-row-actions\n          [grid]=\"grid()\"\n          [row]=\"row()\"\n          (customActionEmitter)=\"customActionEmitter.emit($event)\"\n          (editEmitter)=\"edit.emit()\"\n          (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n      </td>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n  @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n    <td\n      class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n      (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n      <input\n        type=\"checkbox\"\n        [id]=\"'row-' + row().index + '_select-checkbox'\"\n        class=\"form-control\"\n        [ngModel]=\"row().isSelected()\" />\n    </td>\n  }\n</ng-template>\n", styles: [":host .ng2-smart-action-multiple-select{margin-right:.5rem}:host.ng2-smart-card{display:block;margin-bottom:1rem;border-radius:.5rem;overflow:hidden;box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));background-color:var(--smart-table-bg, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-actions{margin:.5rem}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between}:host.ng2-smart-card td .ng2-smart-card-content{padding:1rem;display:grid;gap:.75rem}@media (min-width: 400px){:host.ng2-smart-card td .ng2-smart-card-content{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-label{font-weight:600;color:inherit;margin-bottom:.35rem;font-size:.9em}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-value{word-break:break-word}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "isInEditing"] }, { kind: "component", type: RowActionsComponent, selector: "ng2-row-actions", inputs: ["grid", "row"], outputs: ["editEmitter", "deleteEmitter", "customActionEmitter"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "rowIndex", "rowPending"], outputs: ["save", "cancelEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TrowComponent, isStandalone: true, selector: "[ng2-st-trow]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null }, isCreateRow: { classPropertyName: "isCreateRow", publicName: "isCreateRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editCancel: "editCancel", editConfirmed: "editConfirmed", deleteEmitter: "deleteEmitter", createConfirmed: "createConfirmed", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, host: { properties: { "class.ng2-smart-card": "isMobileView()" } }, ngImport: i0, template: "@if (isMobileView()) {\n  <td colspan=\"50\">\n    <div class=\"ng2-smart-card-header\">\n      <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n      <div class=\"ng2-smart-card-actions\">\n        <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n      </div>\n    </div>\n    <div class=\"ng2-smart-card-content\">\n      @for (cell of row().visibleCells(); track cell.id + $index) {\n        <div class=\"ng2-smart-card-field\">\n          <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n          <div class=\"ng2-smart-card-field-value\">\n            <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n          </div>\n        </div>\n      }\n    </div>\n  </td>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n  @if (grid().actionIsOnLeft()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n  @for (cell of row().visibleCells(); track cell.id + $index) {\n    <td [class]=\"cell.columnClass\" [style]=\"cell.styles\">\n      <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n    </td>\n  }\n  @if (grid().actionIsOnRight()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n}\n\n<ng-template #actions>\n  @if (isCreateRow() || row().isInEditing()) {\n    <td class=\"ng2-smart-actions\">\n      <ng2-st-tbody-create-cancel\n        [grid]=\"grid()\"\n        [rowIndex]=\"row().index || 0\"\n        (cancelEdit)=\"onCancelEdit()\"\n        (save)=\"onSave()\"\n        [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n    </td>\n  } @else {\n    @if (grid().isActionsVisible()) {\n      <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n        <ng2-row-actions\n          [grid]=\"grid()\"\n          [row]=\"row()\"\n          (customActionEmitter)=\"customActionEmitter.emit($event)\"\n          (editEmitter)=\"edit.emit()\"\n          (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n      </td>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n  @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n    <td\n      class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n      (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n      <input\n        type=\"checkbox\"\n        [id]=\"'row-' + row().index + '_select-checkbox'\"\n        class=\"form-control\"\n        [ngModel]=\"row().isSelected()\" />\n    </td>\n  }\n</ng-template>\n", styles: [":host .ng2-smart-action-multiple-select{margin-right:.5rem;text-align:center}:host.ng2-smart-card{display:block;margin-bottom:1rem;border-radius:.5rem;overflow:hidden;box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));background-color:var(--smart-table-bg, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-actions{margin:.5rem}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between}:host.ng2-smart-card td .ng2-smart-card-content{padding:1rem;display:grid;gap:.75rem}@media (min-width: 400px){:host.ng2-smart-card td .ng2-smart-card-content{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-label{font-weight:600;color:inherit;margin-bottom:.35rem;font-size:.9em}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-value{word-break:break-word}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "isInEditing"] }, { kind: "component", type: RowActionsComponent, selector: "ng2-row-actions", inputs: ["grid", "row"], outputs: ["editEmitter", "deleteEmitter", "customActionEmitter"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "rowIndex", "rowPending"], outputs: ["save", "cancelEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TrowComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ng2-st-trow]', imports: [NgTemplateOutlet, FormsModule, CellComponent, RowActionsComponent, TbodyCreateCancelComponent], host: {
                         '[class.ng2-smart-card]': 'isMobileView()',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n  <td colspan=\"50\">\n    <div class=\"ng2-smart-card-header\">\n      <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n      <div class=\"ng2-smart-card-actions\">\n        <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n      </div>\n    </div>\n    <div class=\"ng2-smart-card-content\">\n      @for (cell of row().visibleCells(); track cell.id + $index) {\n        <div class=\"ng2-smart-card-field\">\n          <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n          <div class=\"ng2-smart-card-field-value\">\n            <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n          </div>\n        </div>\n      }\n    </div>\n  </td>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n  @if (grid().actionIsOnLeft()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n  @for (cell of row().visibleCells(); track cell.id + $index) {\n    <td\n      [class]=\"cell.columnClass\"\n      [style]=\"cell.styles\">\n      <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n    </td>\n  }\n  @if (grid().actionIsOnRight()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n}\n\n<ng-template #actions>\n  @if (isCreateRow() || row().isInEditing()) {\n    <td class=\"ng2-smart-actions\">\n      <ng2-st-tbody-create-cancel\n        [grid]=\"grid()\"\n        [rowIndex]=\"row().index || 0\"\n        (cancelEdit)=\"onCancelEdit()\"\n        (save)=\"onSave()\"\n        [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n    </td>\n  } @else {\n    @if (grid().isActionsVisible()) {\n      <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n        <ng2-row-actions\n          [grid]=\"grid()\"\n          [row]=\"row()\"\n          (customActionEmitter)=\"customActionEmitter.emit($event)\"\n          (editEmitter)=\"edit.emit()\"\n          (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n      </td>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n  @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n    <td\n      class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n      (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n      <input\n        type=\"checkbox\"\n        [id]=\"'row-' + row().index + '_select-checkbox'\"\n        class=\"form-control\"\n        [ngModel]=\"row().isSelected()\" />\n    </td>\n  }\n</ng-template>\n", styles: [":host .ng2-smart-action-multiple-select{margin-right:.5rem}:host.ng2-smart-card{display:block;margin-bottom:1rem;border-radius:.5rem;overflow:hidden;box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));background-color:var(--smart-table-bg, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-actions{margin:.5rem}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between}:host.ng2-smart-card td .ng2-smart-card-content{padding:1rem;display:grid;gap:.75rem}@media (min-width: 400px){:host.ng2-smart-card td .ng2-smart-card-content{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-label{font-weight:600;color:inherit;margin-bottom:.35rem;font-size:.9em}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-value{word-break:break-word}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n  <td colspan=\"50\">\n    <div class=\"ng2-smart-card-header\">\n      <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n      <div class=\"ng2-smart-card-actions\">\n        <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n      </div>\n    </div>\n    <div class=\"ng2-smart-card-content\">\n      @for (cell of row().visibleCells(); track cell.id + $index) {\n        <div class=\"ng2-smart-card-field\">\n          <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n          <div class=\"ng2-smart-card-field-value\">\n            <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n          </div>\n        </div>\n      }\n    </div>\n  </td>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n  @if (grid().actionIsOnLeft()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n  @for (cell of row().visibleCells(); track cell.id + $index) {\n    <td [class]=\"cell.columnClass\" [style]=\"cell.styles\">\n      <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n    </td>\n  }\n  @if (grid().actionIsOnRight()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n}\n\n<ng-template #actions>\n  @if (isCreateRow() || row().isInEditing()) {\n    <td class=\"ng2-smart-actions\">\n      <ng2-st-tbody-create-cancel\n        [grid]=\"grid()\"\n        [rowIndex]=\"row().index || 0\"\n        (cancelEdit)=\"onCancelEdit()\"\n        (save)=\"onSave()\"\n        [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n    </td>\n  } @else {\n    @if (grid().isActionsVisible()) {\n      <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n        <ng2-row-actions\n          [grid]=\"grid()\"\n          [row]=\"row()\"\n          (customActionEmitter)=\"customActionEmitter.emit($event)\"\n          (editEmitter)=\"edit.emit()\"\n          (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n      </td>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n  @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n    <td\n      class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n      (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n      <input\n        type=\"checkbox\"\n        [id]=\"'row-' + row().index + '_select-checkbox'\"\n        class=\"form-control\"\n        [ngModel]=\"row().isSelected()\" />\n    </td>\n  }\n</ng-template>\n", styles: [":host .ng2-smart-action-multiple-select{margin-right:.5rem;text-align:center}:host.ng2-smart-card{display:block;margin-bottom:1rem;border-radius:.5rem;overflow:hidden;box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));background-color:var(--smart-table-bg, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-actions{margin:.5rem}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between}:host.ng2-smart-card td .ng2-smart-card-content{padding:1rem;display:grid;gap:.75rem}@media (min-width: 400px){:host.ng2-smart-card td .ng2-smart-card-content{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-label{font-weight:600;color:inherit;margin-bottom:.35rem;font-size:.9em}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-value{word-break:break-word}\n"] }]
         }] });
 
 class Ng2SmartTableTbodyComponent {
@@ -1329,6 +1327,12 @@ class Ng2SmartTableTbodyComponent {
             return this.grid().settings().noDataMessage || 'No data found';
         });
     }
+    rowClicked(row) {
+        if (row.isInEditing()) {
+            return;
+        }
+        this.userClickedRow.emit(row);
+    }
     customActionEmitted(actionName, row) {
         this.customActionEmitter.emit({
             source: this.source(),
@@ -1340,11 +1344,114 @@ class Ng2SmartTableTbodyComponent {
         return item?.id || index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editConfirmed: "editConfirmed", editCancel: "editCancel", createConfirmed: "createConfirmed", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"\n    ></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData)\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"userClickedRow.emit(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrowComponent, selector: "[ng2-st-trow]", inputs: ["grid", "source", "row", "isMobileView", "isCreateRow"], outputs: ["edit", "editCancel", "editConfirmed", "deleteEmitter", "createConfirmed", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editConfirmed: "editConfirmed", editCancel: "editCancel", createConfirmed: "createConfirmed", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData)\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"rowClicked(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrowComponent, selector: "[ng2-st-trow]", inputs: ["grid", "source", "row", "isMobileView", "isCreateRow"], outputs: ["edit", "editCancel", "editConfirmed", "deleteEmitter", "createConfirmed", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-tbody]', imports: [FormsModule, TrowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"\n    ></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData)\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"userClickedRow.emit(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n" }]
+            args: [{ selector: '[ng2-st-tbody]', imports: [FormsModule, TrowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData)\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"rowClicked(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n" }]
+        }] });
+
+class AddButtonComponent {
+    constructor() {
+        this.grid = input.required();
+        this.create = output();
+        this.isActionAdd = computed(() => {
+            const actions = this.grid().settings().actions;
+            if (!actions) {
+                return false;
+            }
+            return !!actions.add;
+        });
+        this.addNewButtonContent = computed(() => {
+            const addParams = this.grid().settings()?.add;
+            if (!addParams) {
+                return 'Add New';
+            }
+            return addParams?.addButtonContent || 'Add New';
+        });
+    }
+    onAdd(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.create.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AddButtonComponent, isStandalone: true, selector: "[ng2-st-add-button]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, host: { classAttribute: "ng2-smart-actions-title ng2-smart-actions-title-add" }, ngImport: i0, template: `
+    @if (isActionAdd()) {
+      <a
+        href="#"
+        class="ng2-smart-action ng2-smart-action-add-add"
+        [innerHTML]="addNewButtonContent()"
+        (click)="$event.preventDefault(); onAdd($event)"></a>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ng2-st-add-button]',
+                    template: `
+    @if (isActionAdd()) {
+      <a
+        href="#"
+        class="ng2-smart-action ng2-smart-action-add-add"
+        [innerHTML]="addNewButtonContent()"
+        (click)="$event.preventDefault(); onAdd($event)"></a>
+    }
+  `,
+                    host: {
+                        class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class ColumnTitleComponent {
+    constructor() {
+        this.source = input.required();
+        this.column = input.required();
+        this.currentSortDirection = computed(() => {
+            const { field, direction } = this.source().getSort();
+            return this.column().id === field ? direction : null;
+        });
+        this.currentSortDirectionSymbol = computed(() => {
+            return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
+        });
+    }
+    _sort(event) {
+        event.preventDefault();
+        const { id: field, title } = this.column();
+        this.source().setSort({
+            field,
+            title,
+            direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
+            compare: this.column().compareFunction,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (column().isSortable) {
+      <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
+        {{ column().title }}
+        <span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
+      </a>
+    } @else {
+      <span class="ng2-smart-sort">{{ column().title }}</span>
+    }
+  `, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng2-st-column-title', template: `
+    @if (column().isSortable) {
+      <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
+        {{ column().title }}
+        <span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
+      </a>
+    } @else {
+      <span class="ng2-smart-sort">{{ column().title }}</span>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"] }]
         }] });
 
 class CheckboxFilterComponent extends BaseFilterComponent {
@@ -1623,7 +1730,9 @@ class FilterComponent {
         this.inputClass = input('');
     }
     onFilter(query) {
+        const columnFilter = this.column().filter;
         this.source().addFilter({
+            type: columnFilter ? columnFilter.type : 'text',
             field: this.column().id,
             search: query,
             filter: this.column().filterFunction,
@@ -1687,107 +1796,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CustomFilterComponent, BuildInFilterComponent], styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"] }]
         }] });
 
-class AddButtonComponent {
+class MobileFiltersComponent {
     constructor() {
+        this.overlay = inject(Overlay);
+        this.contentTemplate = viewChild.required(CdkPortal);
+        this.reference = viewChild.required('reference');
         this.grid = input.required();
-        this.create = output();
-        this.isActionAdd = computed(() => {
-            const actions = this.grid().settings().actions;
-            if (!actions) {
-                return false;
-            }
-            return !!actions.add;
-        });
-        this.addNewButtonContent = computed(() => {
-            const addParams = this.grid().settings()?.add;
-            if (!addParams) {
-                return 'Add New';
-            }
-            return addParams?.addButtonContent || 'Add New';
-        });
-    }
-    onAdd(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.create.emit();
+        this.source = input.required();
+        this.filterInputClass = input.required();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AddButtonComponent, isStandalone: true, selector: "[ng2-st-add-button]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, host: { classAttribute: "ng2-smart-actions-title ng2-smart-actions-title-add" }, ngImport: i0, template: `
-    @if (isActionAdd()) {
-      <a
-        href="#"
-        class="ng2-smart-action ng2-smart-action-add-add"
-        [innerHTML]="addNewButtonContent()"
-        (click)="$event.preventDefault(); onAdd($event)"></a>
+    clearAllFilters() {
+        this.source().setFilters([]);
     }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ng2-st-add-button]',
-                    template: `
-    @if (isActionAdd()) {
-      <a
-        href="#"
-        class="ng2-smart-action ng2-smart-action-add-add"
-        [innerHTML]="addNewButtonContent()"
-        (click)="$event.preventDefault(); onAdd($event)"></a>
+    hide() {
+        this.overlayRef?.detach();
+        this.overlayRef?.dispose();
     }
-  `,
-                    host: {
-                        class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
-                    },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
-
-class ColumnTitleComponent {
-    constructor() {
-        this.source = input.required();
-        this.column = input.required();
-        this.currentSortDirection = computed(() => {
-            const { field, direction } = this.source().getSort();
-            return this.column().id === field ? direction : null;
-        });
-        this.currentSortDirectionSymbol = computed(() => {
-            return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
-        });
+    show() {
+        this.overlayRef = this.overlay.create(this.getOverlayConfig());
+        this.overlayRef.attach(this.contentTemplate());
+        this.overlayRef.backdropClick().subscribe(() => this.hide());
     }
-    _sort(event) {
-        event.preventDefault();
-        const { id: field, title } = this.column();
-        this.source().setSort({
-            field,
-            title,
-            direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
-            compare: this.column().compareFunction,
+    getOverlayConfig() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.reference())
+            .withPush(false)
+            .withPositions([
+            {
+                originX: 'start',
+                originY: 'bottom',
+                overlayX: 'end',
+                overlayY: 'top',
+            },
+        ]);
+        return new OverlayConfig({
+            positionStrategy: positionStrategy,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (column().isSortable) {
-      <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
-        {{ column().title }}
-        <span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
-      </a>
-    } @else {
-      <span class="ng2-smart-sort">{{ column().title }}</span>
-    }
-  `, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MobileFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: MobileFiltersComponent, isStandalone: true, selector: "ng2-mobile-filters", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, filterInputClass: { classPropertyName: "filterInputClass", publicName: "filterInputClass", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: CdkPortal, descendants: true, isSignal: true }, { propertyName: "reference", first: true, predicate: ["reference"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #reference class=\"filter-toggle\" (click)=\"show()\" aria-label=\"Toggle filters\">\n  <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n    <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n    <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n    <g id=\"SVGRepo_iconCarrier\">\n      <path stroke=\"#000000\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n    </g>\n  </svg>\n</button>\n\n<ng-template cdk-portal>\n  <div class=\"dropdown table-filter-dropdown\">\n    <div class=\"dropdown-header\">\n      <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n        reset all\n      </button>\n      <button type=\"button\" class=\"close-dialog-button\" (click)=\"hide()\" aria-label=\"Close dropdown\">\n        <span></span>\n      </button>\n    </div>\n    <div class=\"dropdown-content\">\n      <div class=\"ng2-smart-mobil-filters\">\n        @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n          @if (column.isFilterable) {\n            <div class=\"ng2-smart-filter\">\n              <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n              <ng2-smart-table-filter [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n              </ng2-smart-table-filter>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.filter-toggle svg{height:1rem;width:1rem}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: MobileFiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-st-column-title', template: `
-    @if (column().isSortable) {
-      <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
-        {{ column().title }}
-        <span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
-      </a>
-    } @else {
-      <span class="ng2-smart-sort">{{ column().title }}</span>
-    }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"] }]
+            args: [{ selector: 'ng2-mobile-filters', imports: [FilterComponent, PortalModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #reference class=\"filter-toggle\" (click)=\"show()\" aria-label=\"Toggle filters\">\n  <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n    <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n    <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n    <g id=\"SVGRepo_iconCarrier\">\n      <path stroke=\"#000000\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n    </g>\n  </svg>\n</button>\n\n<ng-template cdk-portal>\n  <div class=\"dropdown table-filter-dropdown\">\n    <div class=\"dropdown-header\">\n      <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n        reset all\n      </button>\n      <button type=\"button\" class=\"close-dialog-button\" (click)=\"hide()\" aria-label=\"Close dropdown\">\n        <span></span>\n      </button>\n    </div>\n    <div class=\"dropdown-content\">\n      <div class=\"ng2-smart-mobil-filters\">\n        @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n          @if (column.isFilterable) {\n            <div class=\"ng2-smart-filter\">\n              <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n              <ng2-smart-table-filter [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n              </ng2-smart-table-filter>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.filter-toggle svg{height:1rem;width:1rem}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"] }]
         }] });
 
 class TheadFiltersRowComponent {
@@ -1956,7 +2010,7 @@ class Ng2SmartTableTheadComponent {
             .dataSet.getColumns()
             .filter((column) => column.isFilterable).length);
         this.currentSortConfig = computed(() => this.source().getSort());
-        this.dropdown = signal(null);
+        this.filterDropdownIsOpen = signal(false);
         this.filterInputClass = computed(() => {
             const filterOptions = this.grid().settings()?.filter;
             if (!filterOptions) {
@@ -1965,16 +2019,8 @@ class Ng2SmartTableTheadComponent {
             return filterOptions.inputClass || '';
         });
     }
-    toggleDropdown(type) {
-        this.dropdown.update((value) => {
-            if (value === type) {
-                return null;
-            }
-            return type;
-        });
-    }
-    clearAllFilters() {
-        this.source().setFilters([]);
+    toggleDropdown(state) {
+        this.filterDropdownIsOpen.update((value) => state ?? !value);
     }
     sortByColumn(column) {
         const sort = this.currentSortConfig();
@@ -1985,26 +2031,26 @@ class Ng2SmartTableTheadComponent {
             title,
             direction: direction,
         });
-        this.dropdown.set(null);
+        this.filterDropdownIsOpen.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (isMobileView()) {\n  <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n    <th colspan=\"50\">\n      <div class=\"mobile-header-content\">\n        <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n        @if (columnsWithSortLength()) {\n          <div class=\"current-column-title\">\n            <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n              {{ currentSortConfig().title }}\n              <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n            </a>\n            @if (columnsWithSortLength() > 1) {\n              <button\n                #sortTrigger=\"cdkOverlayOrigin\"\n                cdkOverlayOrigin\n                class=\"sort-dropdown-toggle-button\"\n                (click)=\"toggleDropdown('sort')\"\n                [class.active]=\"dropdown() === 'sort'\"\n                aria-label=\"Toggle sort options\">\n                <span class=\"sort-icon\">\u25BC</span>\n              </button>\n              <ng-template\n                cdkConnectedOverlay\n                [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n                [cdkConnectedOverlayOpen]=\"dropdown() === 'sort'\"\n                [cdkConnectedOverlayWidth]=\"300\"\n                (overlayOutsideClick)=\"toggleDropdown(null)\">\n                <div class=\"dropdown\">\n                  <div class=\"dropdown-header\">\n                    <p></p>\n                    <button\n                      type=\"button\"\n                      class=\"close-dialog-button\"\n                      (click)=\"toggleDropdown(null)\"\n                      aria-label=\"Close filters\">\n                      <span></span>\n                    </button>\n                  </div>\n                  <div class=\"dropdown-content\">\n                    @for (column of columnsWithSort(); track $index) {\n                      <th class=\"titles\">\n                        <ng2-st-column-title\n                          class=\"sort-option\"\n                          [column]=\"column\"\n                          [source]=\"source()\"></ng2-st-column-title>\n                      </th>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n            }\n          </div>\n        }\n\n        <div class=\"header-actions\">\n          @if (columnsWithFiltersLength()) {\n            <button\n              #filterTrigger=\"cdkOverlayOrigin\"\n              cdkOverlayOrigin\n              class=\"filter-toggle\"\n              (click)=\"toggleDropdown('filters')\"\n              aria-label=\"Toggle filters\">\n              <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                  <path\n                    stroke=\"#000000\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n                </g>\n              </svg>\n            </button>\n\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n              [cdkConnectedOverlayOpen]=\"dropdown() === 'filters'\"\n              [cdkConnectedOverlayWidth]=\"300\"\n              (overlayOutsideClick)=\"toggleDropdown(null)\">\n              <div class=\"dropdown\">\n                <div class=\"dropdown-header\">\n                  <button\n                    type=\"button\"\n                    class=\"clear-filters-button\"\n                    (click)=\"clearAllFilters()\"\n                    aria-label=\"Close filters\">\n                    reset all\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"close-dialog-button\"\n                    (click)=\"toggleDropdown(null)\"\n                    aria-label=\"Close dropdown\">\n                    <span></span>\n                  </button>\n                </div>\n                <div class=\"dropdown-content\">\n                  <div class=\"ng2-smart-mobil-filters\">\n                    @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n                      @if (column.isFilterable) {\n                        <div class=\"ng2-smart-filter\">\n                          <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n                          <ng2-smart-table-filter\n                            [source]=\"source()\"\n                            [column]=\"column\"\n                            [inputClass]=\"filterInputClass()\">\n                          </ng2-smart-table-filter>\n                        </div>\n                      }\n                    }\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          }\n        </div>\n      </div>\n    </th>\n  </tr>\n  <!-- <tr class=\"mobile-header-bottom-row\">\n    <th colspan=\"50\" [class.dialog-active]=\"dropdown()\">\n      <div class=\"overlay\" (click)=\"toggleDropdown(null)\"></div>\n      <div class=\"dropdown\">\n        <div class=\"dropdown-header\">\n          <p></p>\n          <button type=\"button\" class=\"close-dialog-button\" (click)=\"toggleDropdown(null)\" aria-label=\"Close filters\">\n            <span></span>\n          </button>\n        </div>\n        <div class=\"dropdown-content\">\n          @for (column of columnsWithSort(); track $index) {\n            <th class=\"titles\">\n              <ng2-st-column-title class=\"sort-option\" [column]=\"column\" [source]=\"source()\"></ng2-st-column-title>\n            </th>\n          }\n        </div>\n      </div>\n    </th>\n  </tr> -->\n} @else {\n  <!-- Desktop view header -->\n  @if (!isHideHeader()) {\n    <tr\n      ng2-st-thead-titles-row\n      class=\"ng2-smart-titles\"\n      [grid]=\"grid()\"\n      [source]=\"source()\"\n      (selectAllRows)=\"selectAllRows.emit()\"></tr>\n  }\n\n  @if (!isHideSubHeader()) {\n    <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n  }\n}\n\n<ng-template #filtersRow>\n  <tr\n    ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [inputClass]=\"filterInputClass()\"\n    [withoutCreateButton]=\"isMobileView()\"\n    [source]=\"source()\"\n    (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}tr.mobile-header-top-row .mobile-header-content .filter-toggle svg{height:1rem;width:1rem}.dropdown{padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}.dropdown{z-index:1}\n"], dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["selectAllRows"] }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source", "withoutCreateButton", "inputClass"], outputs: ["create"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (isMobileView()) {\n  <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n    <th colspan=\"50\">\n      <div class=\"mobile-header-content\">\n        <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n        @if (columnsWithSortLength()) {\n          <div class=\"current-column-title\">\n            <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n              {{ currentSortConfig().title }}\n              <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n            </a>\n            @if (columnsWithSortLength() > 1) {\n              <button\n                #sortTrigger=\"cdkOverlayOrigin\"\n                cdkOverlayOrigin\n                class=\"sort-dropdown-toggle-button\"\n                (click)=\"toggleDropdown(true)\"\n                [class.active]=\"filterDropdownIsOpen()\"\n                aria-label=\"Toggle sort options\">\n                <span class=\"sort-icon\">\u25BC</span>\n              </button>\n              <ng-template\n                cdkConnectedOverlay\n                [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n                [cdkConnectedOverlayOpen]=\"filterDropdownIsOpen()\"\n                [cdkConnectedOverlayWidth]=\"300\"\n                (overlayOutsideClick)=\"toggleDropdown(false)\">\n                <div class=\"dropdown\">\n                  <div class=\"dropdown-header\">\n                    <p></p>\n                    <button\n                      type=\"button\"\n                      class=\"close-dialog-button\"\n                      (click)=\"toggleDropdown(false)\"\n                      aria-label=\"Close filters\">\n                      <span></span>\n                    </button>\n                  </div>\n                  <div class=\"dropdown-content\">\n                    @for (column of columnsWithSort(); track $index) {\n                      <th class=\"titles\">\n                        <ng2-st-column-title\n                          class=\"sort-option\"\n                          [column]=\"column\"\n                          [source]=\"source()\"></ng2-st-column-title>\n                      </th>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n            }\n          </div>\n        }\n\n        <div class=\"header-actions\">\n          @if (columnsWithFiltersLength()) {\n            <ng2-mobile-filters [grid]=\"grid()\" [source]=\"source()\" [filterInputClass]=\"filterInputClass()\">\n            </ng2-mobile-filters>\n          }\n        </div>\n      </div>\n    </th>\n  </tr>\n} @else {\n  <!-- Desktop view header -->\n  @if (!isHideHeader()) {\n    <tr\n      ng2-st-thead-titles-row\n      class=\"ng2-smart-titles\"\n      [grid]=\"grid()\"\n      [source]=\"source()\"\n      (selectAllRows)=\"selectAllRows.emit()\"></tr>\n  }\n\n  @if (!isHideSubHeader()) {\n    <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n  }\n}\n\n<ng-template #filtersRow>\n  <tr\n    ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [inputClass]=\"filterInputClass()\"\n    [withoutCreateButton]=\"isMobileView()\"\n    [source]=\"source()\"\n    (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}.dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["selectAllRows"] }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: MobileFiltersComponent, selector: "ng2-mobile-filters", inputs: ["grid", "source", "filterInputClass"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source", "withoutCreateButton", "inputClass"], outputs: ["create"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ng2-st-thead]', imports: [
                         TheadTitlesRowComponent,
                         AddButtonComponent,
-                        FilterComponent,
+                        MobileFiltersComponent,
                         ColumnTitleComponent,
                         TheadFiltersRowComponent,
                         NgTemplateOutlet,
                         OverlayModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n  <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n    <th colspan=\"50\">\n      <div class=\"mobile-header-content\">\n        <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n        @if (columnsWithSortLength()) {\n          <div class=\"current-column-title\">\n            <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n              {{ currentSortConfig().title }}\n              <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n            </a>\n            @if (columnsWithSortLength() > 1) {\n              <button\n                #sortTrigger=\"cdkOverlayOrigin\"\n                cdkOverlayOrigin\n                class=\"sort-dropdown-toggle-button\"\n                (click)=\"toggleDropdown('sort')\"\n                [class.active]=\"dropdown() === 'sort'\"\n                aria-label=\"Toggle sort options\">\n                <span class=\"sort-icon\">\u25BC</span>\n              </button>\n              <ng-template\n                cdkConnectedOverlay\n                [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n                [cdkConnectedOverlayOpen]=\"dropdown() === 'sort'\"\n                [cdkConnectedOverlayWidth]=\"300\"\n                (overlayOutsideClick)=\"toggleDropdown(null)\">\n                <div class=\"dropdown\">\n                  <div class=\"dropdown-header\">\n                    <p></p>\n                    <button\n                      type=\"button\"\n                      class=\"close-dialog-button\"\n                      (click)=\"toggleDropdown(null)\"\n                      aria-label=\"Close filters\">\n                      <span></span>\n                    </button>\n                  </div>\n                  <div class=\"dropdown-content\">\n                    @for (column of columnsWithSort(); track $index) {\n                      <th class=\"titles\">\n                        <ng2-st-column-title\n                          class=\"sort-option\"\n                          [column]=\"column\"\n                          [source]=\"source()\"></ng2-st-column-title>\n                      </th>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n            }\n          </div>\n        }\n\n        <div class=\"header-actions\">\n          @if (columnsWithFiltersLength()) {\n            <button\n              #filterTrigger=\"cdkOverlayOrigin\"\n              cdkOverlayOrigin\n              class=\"filter-toggle\"\n              (click)=\"toggleDropdown('filters')\"\n              aria-label=\"Toggle filters\">\n              <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n                <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n                <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n                <g id=\"SVGRepo_iconCarrier\">\n                  <path\n                    stroke=\"#000000\"\n                    stroke-linejoin=\"round\"\n                    stroke-width=\"2\"\n                    d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n                </g>\n              </svg>\n            </button>\n\n            <ng-template\n              cdkConnectedOverlay\n              [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n              [cdkConnectedOverlayOpen]=\"dropdown() === 'filters'\"\n              [cdkConnectedOverlayWidth]=\"300\"\n              (overlayOutsideClick)=\"toggleDropdown(null)\">\n              <div class=\"dropdown\">\n                <div class=\"dropdown-header\">\n                  <button\n                    type=\"button\"\n                    class=\"clear-filters-button\"\n                    (click)=\"clearAllFilters()\"\n                    aria-label=\"Close filters\">\n                    reset all\n                  </button>\n                  <button\n                    type=\"button\"\n                    class=\"close-dialog-button\"\n                    (click)=\"toggleDropdown(null)\"\n                    aria-label=\"Close dropdown\">\n                    <span></span>\n                  </button>\n                </div>\n                <div class=\"dropdown-content\">\n                  <div class=\"ng2-smart-mobil-filters\">\n                    @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n                      @if (column.isFilterable) {\n                        <div class=\"ng2-smart-filter\">\n                          <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n                          <ng2-smart-table-filter\n                            [source]=\"source()\"\n                            [column]=\"column\"\n                            [inputClass]=\"filterInputClass()\">\n                          </ng2-smart-table-filter>\n                        </div>\n                      }\n                    }\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          }\n        </div>\n      </div>\n    </th>\n  </tr>\n  <!-- <tr class=\"mobile-header-bottom-row\">\n    <th colspan=\"50\" [class.dialog-active]=\"dropdown()\">\n      <div class=\"overlay\" (click)=\"toggleDropdown(null)\"></div>\n      <div class=\"dropdown\">\n        <div class=\"dropdown-header\">\n          <p></p>\n          <button type=\"button\" class=\"close-dialog-button\" (click)=\"toggleDropdown(null)\" aria-label=\"Close filters\">\n            <span></span>\n          </button>\n        </div>\n        <div class=\"dropdown-content\">\n          @for (column of columnsWithSort(); track $index) {\n            <th class=\"titles\">\n              <ng2-st-column-title class=\"sort-option\" [column]=\"column\" [source]=\"source()\"></ng2-st-column-title>\n            </th>\n          }\n        </div>\n      </div>\n    </th>\n  </tr> -->\n} @else {\n  <!-- Desktop view header -->\n  @if (!isHideHeader()) {\n    <tr\n      ng2-st-thead-titles-row\n      class=\"ng2-smart-titles\"\n      [grid]=\"grid()\"\n      [source]=\"source()\"\n      (selectAllRows)=\"selectAllRows.emit()\"></tr>\n  }\n\n  @if (!isHideSubHeader()) {\n    <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n  }\n}\n\n<ng-template #filtersRow>\n  <tr\n    ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [inputClass]=\"filterInputClass()\"\n    [withoutCreateButton]=\"isMobileView()\"\n    [source]=\"source()\"\n    (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}tr.mobile-header-top-row .mobile-header-content .filter-toggle svg{height:1rem;width:1rem}.dropdown{padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}.dropdown{z-index:1}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n  <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n    <th colspan=\"50\">\n      <div class=\"mobile-header-content\">\n        <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n        @if (columnsWithSortLength()) {\n          <div class=\"current-column-title\">\n            <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n              {{ currentSortConfig().title }}\n              <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n            </a>\n            @if (columnsWithSortLength() > 1) {\n              <button\n                #sortTrigger=\"cdkOverlayOrigin\"\n                cdkOverlayOrigin\n                class=\"sort-dropdown-toggle-button\"\n                (click)=\"toggleDropdown(true)\"\n                [class.active]=\"filterDropdownIsOpen()\"\n                aria-label=\"Toggle sort options\">\n                <span class=\"sort-icon\">\u25BC</span>\n              </button>\n              <ng-template\n                cdkConnectedOverlay\n                [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n                [cdkConnectedOverlayOpen]=\"filterDropdownIsOpen()\"\n                [cdkConnectedOverlayWidth]=\"300\"\n                (overlayOutsideClick)=\"toggleDropdown(false)\">\n                <div class=\"dropdown\">\n                  <div class=\"dropdown-header\">\n                    <p></p>\n                    <button\n                      type=\"button\"\n                      class=\"close-dialog-button\"\n                      (click)=\"toggleDropdown(false)\"\n                      aria-label=\"Close filters\">\n                      <span></span>\n                    </button>\n                  </div>\n                  <div class=\"dropdown-content\">\n                    @for (column of columnsWithSort(); track $index) {\n                      <th class=\"titles\">\n                        <ng2-st-column-title\n                          class=\"sort-option\"\n                          [column]=\"column\"\n                          [source]=\"source()\"></ng2-st-column-title>\n                      </th>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n            }\n          </div>\n        }\n\n        <div class=\"header-actions\">\n          @if (columnsWithFiltersLength()) {\n            <ng2-mobile-filters [grid]=\"grid()\" [source]=\"source()\" [filterInputClass]=\"filterInputClass()\">\n            </ng2-mobile-filters>\n          }\n        </div>\n      </div>\n    </th>\n  </tr>\n} @else {\n  <!-- Desktop view header -->\n  @if (!isHideHeader()) {\n    <tr\n      ng2-st-thead-titles-row\n      class=\"ng2-smart-titles\"\n      [grid]=\"grid()\"\n      [source]=\"source()\"\n      (selectAllRows)=\"selectAllRows.emit()\"></tr>\n  }\n\n  @if (!isHideSubHeader()) {\n    <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n  }\n}\n\n<ng-template #filtersRow>\n  <tr\n    ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [inputClass]=\"filterInputClass()\"\n    [withoutCreateButton]=\"isMobileView()\"\n    [source]=\"source()\"\n    (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}.dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"] }]
         }] });
 
 class DataSet {
-    constructor(data = [], columnSettings, editorInputClass) {
+    constructor(dataList = [], columnSettings, editorInputClass) {
         this.columnSettings = columnSettings;
         this.editorInputClass = editorInputClass;
         this.data = signal([]);
@@ -2018,7 +2064,7 @@ class DataSet {
         });
         this.isAllSelected = computed(() => this.rows().every((row) => row.isSelected()));
         this.createColumns(columnSettings);
-        this.setData(data);
+        this.setData(dataList);
         this.createNewRow();
     }
     setData(data) {
@@ -2131,9 +2177,6 @@ class Grid {
         if (this.sourceOnChangedSubscription) {
             this.sourceOnChangedSubscription.unsubscribe();
         }
-        if (this.sourceOnUpdatedSubscription) {
-            this.sourceOnUpdatedSubscription.unsubscribe();
-        }
     }
     getNewRow() {
         return this.dataSet.newRow;
@@ -2242,7 +2285,7 @@ class Grid {
         }
     }
     processDataChange(event) {
-        if (event.action === 'load') {
+        if (['load', 'empty', 'refresh'].includes(event.action)) {
             this.dataSet.resetAllSelection();
         }
         if (event.action === 'update') {
@@ -2551,11 +2594,11 @@ class Ng2SmartTableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", deleteEmitter: "deleteEmitter", deleteConfirm: "deleteConfirm", edit: "edit", editConfirm: "editConfirm", editCancel: "editCancel", create: "create", createConfirm: "createConfirm", custom: "custom" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (create)=\"createEmitted()\"\n    (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    [isMobileView]=\"isMobileView()\"\n    (deleteEmitter)=\"deleEmitted($event)\"\n    (edit)=\"editEmitted($event)\"\n    (editConfirmed)=\"editConfirmed($event)\"\n    (editCancel)=\"editCanceled($event)\"\n    (createConfirmed)=\"createConfirmed()\"\n    (customActionEmitter)=\"customActionEmitted($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n  <ng2-smart-table-pager [source]=\"source()\"> </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "isMobileView"], outputs: ["selectAllRows", "create"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "rowClassFunction", "isMobileView"], outputs: ["edit", "editConfirmed", "editCancel", "createConfirmed", "deleteEmitter", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", deleteEmitter: "deleteEmitter", deleteConfirm: "deleteConfirm", edit: "edit", editConfirm: "editConfirm", editCancel: "editCancel", create: "create", createConfirm: "createConfirm", custom: "custom" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (create)=\"createEmitted()\"\n    (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    [isMobileView]=\"isMobileView()\"\n    (deleteEmitter)=\"deleEmitted($event)\"\n    (edit)=\"editEmitted($event)\"\n    (editConfirmed)=\"editConfirmed($event)\"\n    (editCancel)=\"editCanceled($event)\"\n    (createConfirmed)=\"createConfirmed()\"\n    (customActionEmitter)=\"customActionEmitted($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n  <ng2-smart-table-pager [source]=\"source()\"> </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}:host .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}:host .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}:host .close-dialog-button:after,:host .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}:host .close-dialog-button:before{rotate:45deg}:host .close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "isMobileView"], outputs: ["selectAllRows", "create"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "rowClassFunction", "isMobileView"], outputs: ["edit", "editConfirmed", "editCancel", "createConfirmed", "deleteEmitter", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-smart-table', imports: [Ng2SmartTableTheadComponent, Ng2SmartTableTbodyComponent, PagerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (create)=\"createEmitted()\"\n    (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    [isMobileView]=\"isMobileView()\"\n    (deleteEmitter)=\"deleEmitted($event)\"\n    (edit)=\"editEmitted($event)\"\n    (editConfirmed)=\"editConfirmed($event)\"\n    (editCancel)=\"editCanceled($event)\"\n    (createConfirmed)=\"createConfirmed()\"\n    (customActionEmitter)=\"customActionEmitted($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n  <ng2-smart-table-pager [source]=\"source()\"> </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}\n"] }]
+            args: [{ selector: 'ng2-smart-table', imports: [Ng2SmartTableTheadComponent, Ng2SmartTableTbodyComponent, PagerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (create)=\"createEmitted()\"\n    (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    [isMobileView]=\"isMobileView()\"\n    (deleteEmitter)=\"deleEmitted($event)\"\n    (edit)=\"editEmitted($event)\"\n    (editConfirmed)=\"editConfirmed($event)\"\n    (editCancel)=\"editCanceled($event)\"\n    (createConfirmed)=\"createConfirmed()\"\n    (customActionEmitter)=\"customActionEmitted($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n  <ng2-smart-table-pager [source]=\"source()\"> </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}:host .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}:host .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}:host .close-dialog-button:after,:host .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}:host .close-dialog-button:before{rotate:45deg}:host .close-dialog-button:after{position:absolute;rotate:-45deg}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }] });
 
 /**