@den4ik92/ng2-smart-table 19.3.1 → 19.4.0

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

@@ -1,26 +1,25 @@
 import * as i0 from '@angular/core';
-import { input, Component, output, signal, effect, computed, inject, ElementRef, Directive, ViewContainerRef, ViewChild, ChangeDetectionStrategy, Input, ChangeDetectorRef, DestroyRef } from '@angular/core';
+import { input, computed, Component, ChangeDetectionStrategy, output, signal, effect, inject, ElementRef, Directive, ViewContainerRef, ViewChild } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { distinctUntilChanged, debounceTime, takeUntil, switchMap, map } from 'rxjs/operators';
+import { distinctUntilChanged, debounceTime, takeUntil, switchMap, take } from 'rxjs/operators';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject } from 'rxjs';
 import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
 import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class BaseEditorComponent {
     constructor() {
         this.cell = input.required();
-        this.inputClass = input('');
+        this.inputClass = computed(() => this.cell().column.editorInputClass);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: BaseEditorComponent, isStandalone: true, selector: "ng2-editor-base-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: BaseEditorComponent, isStandalone: true, selector: "ng2-editor-base-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseEditorComponent, decorators: [{
             type: Component,
-            args: [{ template: '', selector: 'ng2-editor-base-component' }]
+            args: [{ template: '', selector: 'ng2-editor-base-component', changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 class BaseFilterComponent {
@@ -54,11 +53,11 @@ class BaseFilterComponent {
         this.filter.emit(query);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BaseFilterComponent, decorators: [{
             type: Component,
-            args: [{ template: '', selector: 'ng2-base-filter-component' }]
+            args: [{ template: '', selector: 'ng2-base-filter-component', changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
 
 /**
@@ -175,12 +174,26 @@ function getLocalStorage(key) {
         return null;
     }
 }
-function promiseDelay(time) {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            resolve();
-        }, time);
-    });
+function compareObjectsAsJSON(a, b) {
+    return JSON.stringify(a) === JSON.stringify(b);
+}
+function isObjectsIdentical(a, b) {
+    let compareIdKey = null;
+    if ('uuid' in a) {
+        compareIdKey = 'uuid';
+    }
+    else if ('id' in a) {
+        compareIdKey = 'id';
+    }
+    if (!compareIdKey) {
+        return compareObjectsAsJSON(a, b);
+    }
+    try {
+        return a[compareIdKey] === b[compareIdKey];
+    }
+    catch {
+        return compareObjectsAsJSON(a, b);
+    }
 }
 
 class TableColumnsEditorComponent {
@@ -215,11 +228,11 @@ class TableColumnsEditorComponent {
         this.stateHasChanged.set(JSON.stringify(this.grid()?.currentColumnsSortState) !== JSON.stringify(this.currentState));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n  <div class=\"sort-card-header\">\n    <h6>Table columns setup</h6>\n  </div>\n  <div class=\"sort-card-body\">\n    <div\n      class=\"list\"\n      cdkDropList\n      [cdkDropListData]=\"currentState\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      @for (column of currentState; track column.key + i; let i = $index) {\n\n      <div\n        cdkDrag\n        [cdkDragLockAxis]=\"'y'\"\n        [cdkDragStartDelay]=\"300\"\n        [cdkDragDisabled]=\"column.moveDisabled\"\n        class=\"drag-row\"\n        #dragRow\n        [style.--drag-row-height]=\"50\"\n      >\n        <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n        <div class=\"index-cell\">\n          {{ i + 1 }}\n        </div>\n        <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n          <span></span>\n          <input\n            [disabled]=\"column.moveDisabled\"\n            [id]=\"'sort-column-checkbox-' + i\"\n            title=\"Active state. If checked the column will be displayed\"\n            type=\"checkbox\"\n            class=\"sort-column-checkbox-input\"\n            [checked]=\"!column.hide\"\n            (change)=\"setVisibility(i)\"\n          />\n          <span></span>\n        </label>\n        {{ column.title }}\n      </div>\n      }\n    </div>\n  </div>\n  @if (stateHasChanged()) {\n  <div class=\"sort-card-footer\">\n    <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n    <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n  </div>\n  }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n  <div class=\"sort-card-header\">\n    <h6>Table columns setup</h6>\n  </div>\n  <div class=\"sort-card-body\">\n    <div\n      class=\"list\"\n      cdkDropList\n      [cdkDropListData]=\"currentState\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      @for (column of currentState; track column.key + i; let i = $index) {\n\n      <div\n        cdkDrag\n        [cdkDragLockAxis]=\"'y'\"\n        [cdkDragStartDelay]=\"300\"\n        [cdkDragDisabled]=\"column.moveDisabled\"\n        class=\"drag-row\"\n        #dragRow\n        [style.--drag-row-height]=\"50\"\n      >\n        <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n        <div class=\"index-cell\">\n          {{ i + 1 }}\n        </div>\n        <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n          <span></span>\n          <input\n            [disabled]=\"column.moveDisabled\"\n            [id]=\"'sort-column-checkbox-' + i\"\n            title=\"Active state. If checked the column will be displayed\"\n            type=\"checkbox\"\n            class=\"sort-column-checkbox-input\"\n            [checked]=\"!column.hide\"\n            (change)=\"setVisibility(i)\"\n          />\n          <span></span>\n        </label>\n        {{ column.title }}\n      </div>\n      }\n    </div>\n  </div>\n  @if (stateHasChanged()) {\n  <div class=\"sort-card-footer\">\n    <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n    <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n  </div>\n  }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-table-columns-editor', imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], template: "<div class=\"sort-card\">\n  <div class=\"sort-card-header\">\n    <h6>Table columns setup</h6>\n  </div>\n  <div class=\"sort-card-body\">\n    <div\n      class=\"list\"\n      cdkDropList\n      [cdkDropListData]=\"currentState\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      @for (column of currentState; track column.key + i; let i = $index) {\n\n      <div\n        cdkDrag\n        [cdkDragLockAxis]=\"'y'\"\n        [cdkDragStartDelay]=\"300\"\n        [cdkDragDisabled]=\"column.moveDisabled\"\n        class=\"drag-row\"\n        #dragRow\n        [style.--drag-row-height]=\"50\"\n      >\n        <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n        <div class=\"index-cell\">\n          {{ i + 1 }}\n        </div>\n        <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n          <span></span>\n          <input\n            [disabled]=\"column.moveDisabled\"\n            [id]=\"'sort-column-checkbox-' + i\"\n            title=\"Active state. If checked the column will be displayed\"\n            type=\"checkbox\"\n            class=\"sort-column-checkbox-input\"\n            [checked]=\"!column.hide\"\n            (change)=\"setVisibility(i)\"\n          />\n          <span></span>\n        </label>\n        {{ column.title }}\n      </div>\n      }\n    </div>\n  </div>\n  @if (stateHasChanged()) {\n  <div class=\"sort-card-footer\">\n    <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n    <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n  </div>\n  }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
+            args: [{ selector: 'ng2-table-columns-editor', imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sort-card\">\n  <div class=\"sort-card-header\">\n    <h6>Table columns setup</h6>\n  </div>\n  <div class=\"sort-card-body\">\n    <div\n      class=\"list\"\n      cdkDropList\n      [cdkDropListData]=\"currentState\"\n      (cdkDropListDropped)=\"drop($event)\"\n    >\n      @for (column of currentState; track column.key + i; let i = $index) {\n\n      <div\n        cdkDrag\n        [cdkDragLockAxis]=\"'y'\"\n        [cdkDragStartDelay]=\"300\"\n        [cdkDragDisabled]=\"column.moveDisabled\"\n        class=\"drag-row\"\n        #dragRow\n        [style.--drag-row-height]=\"50\"\n      >\n        <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n        <div class=\"index-cell\">\n          {{ i + 1 }}\n        </div>\n        <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n          <span></span>\n          <input\n            [disabled]=\"column.moveDisabled\"\n            [id]=\"'sort-column-checkbox-' + i\"\n            title=\"Active state. If checked the column will be displayed\"\n            type=\"checkbox\"\n            class=\"sort-column-checkbox-input\"\n            [checked]=\"!column.hide\"\n            (change)=\"setVisibility(i)\"\n          />\n          <span></span>\n        </label>\n        {{ column.title }}\n      </div>\n      }\n    </div>\n  </div>\n  @if (stateHasChanged()) {\n  <div class=\"sort-card-footer\">\n    <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n    <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n  </div>\n  }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
         }], ctorParameters: () => [] });
 
 class SmartTableColumnEditorDirective {
@@ -253,7 +266,7 @@ class SmartTableColumnEditorDirective {
         this.overlayRef?.dispose();
         this.destroy$.next();
     }
-    buttclicked() {
+    buttonClicked() {
         this.showDropdown();
     }
     getOverlayConfig() {
@@ -306,40 +319,37 @@ class SmartTableColumnEditorDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: SmartTableColumnEditorDirective, isStandalone: true, selector: "[ng2SmartTableColumnEditor]", inputs: { tableComponent: { classPropertyName: "tableComponent", publicName: "tableComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "buttclicked()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: SmartTableColumnEditorDirective, isStandalone: true, selector: "[ng2SmartTableColumnEditor]", inputs: { tableComponent: { classPropertyName: "tableComponent", publicName: "tableComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "buttonClicked()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ng2SmartTableColumnEditor]',
                     host: {
-                        '(click)': 'buttclicked()',
+                        '(click)': 'buttonClicked()',
                     },
                 }]
         }] });
 
 class Cell {
-    constructor(value, row, column, dataSet) {
+    constructor(value, row, column) {
         this.value = value;
         this.row = row;
         this.column = column;
-        this.dataSet = dataSet;
-        this.prepareValue = (value) => value;
         this.newValue = '';
+        this.columnClass = '';
+        this.styles = '';
+        this.title = '';
+        this.id = '';
+        this.columnClass = column.class;
         this.newValue = value;
-    }
-    getColumn() {
-        return this.column;
-    }
-    getColumnClass() {
-        return this.column.class;
-    }
-    getRow() {
-        return this.row;
+        this.styles = column.styles;
+        this.title = column.title;
+        this.id = column.id;
     }
     getValue() {
-        const prepare = this.column.valuePrepareFunction || this.prepareValue;
-        return prepare.call(null, this.value, this.row.getData(), this);
+        const prepare = this.column.valuePrepareFunction;
+        return !prepare ? this.value : prepare.call(null, this.value, this.row.rowData, this);
     }
     getNotPrepareValue() {
         return this.value;
@@ -347,18 +357,12 @@ class Cell {
     setValue(value) {
         this.newValue = value;
     }
-    getId() {
-        return this.getColumn().id;
-    }
-    getTitle() {
-        return this.getColumn().title;
-    }
     isEditable() {
-        if (this.getRow().index === -1) {
-            return this.getColumn().isAddable;
+        if (this.row.index === -1) {
+            return this.column.isAddable;
         }
         else {
-            return this.getColumn().isEditable;
+            return this.column.isEditable;
         }
     }
 }
@@ -371,7 +375,7 @@ class Column {
         this.title = '';
         this.type = 'text';
         this.class = '';
-        this.width = '';
+        this.editorInputClass = '';
         this.hide = false;
         this.isSortable = false;
         this.isEditable = true;
@@ -380,9 +384,10 @@ class Column {
         this.sortDirection = 'asc';
         this.editor = false;
         this.filter = false;
+        this.editorInputClass = dataSet.editorInputClass;
         this.title = settings.title;
         this.class = settings.class || '';
-        this.width = settings.width || '';
+        this.styles = settings.style || '';
         this.hide = !!settings.hide;
         this.type = settings.type;
         if (settings?.editor) {
@@ -397,7 +402,7 @@ class Column {
         this.isFilterable = typeof settings.filter === 'undefined' ? true : !!settings['filter'];
         this.isSortable = settings.sort ?? true;
         this.isEditable = settings.editable ?? true;
-        this.isAddable = settings.addable ?? false;
+        this.isAddable = settings.addable ?? true;
         this.sortDirection = settings.sortDirection || 'asc';
         this.compareFunction = settings.compareFunction;
         this.valuePrepareFunction = settings.valuePrepareFunction;
@@ -421,43 +426,33 @@ class Column {
 }
 
 class Row {
-    constructor(index, data, _dataSet) {
+    constructor(index, rowData, columns) {
         this.index = index;
-        this.data = data;
-        this._dataSet = _dataSet;
+        this.rowData = rowData;
+        this.columns = columns;
         this.pending = signal(false);
         this.isSelected = signal(false);
         this.isInEditing = signal(false);
         this.cells = signal([]);
-        this.visibleCells = computed(() => this.cells().filter((cell) => !cell.getColumn().hide));
+        this.visibleCells = computed(() => this.cells().filter((cell) => !cell.column.hide));
         this.process();
     }
-    getCell(column) {
-        return this.cells().find((el) => el.getColumn() === column);
-    }
-    getData() {
-        return this.data;
-    }
     getNewData() {
-        const values = Object.assign({}, this.data);
-        this.cells().forEach((cell) => (values[cell.getColumn().id] = cell.newValue));
+        const values = Object.assign({}, this.rowData);
+        this.cells().forEach((cell) => (values[cell.column.id] = cell.newValue));
         return values;
     }
-    setData(data) {
-        this.data = data;
+    setData(rowData) {
+        this.rowData = rowData;
         this.process();
     }
     process() {
-        const cells = this._dataSet
-            .getColumns()
-            .map((column) => this.createCell(column));
+        const cells = this.columns.map((column) => this.createCell(column));
         this.cells.set(cells);
     }
     createCell(column) {
-        const value = typeof this.data[column.id] === "undefined"
-            ? ""
-            : this.data[column.id];
-        return new Cell(value, this, column, this._dataSet);
+        const value = typeof this.rowData[column.id] === 'undefined' ? '' : this.rowData[column.id];
+        return new Cell(value, this, column);
     }
 }
 
@@ -481,8 +476,8 @@ var SmartTableOnChangedEventName;
 class DataSource {
     constructor() {
         this.onChangedSource = new Subject();
-        this.sortConf = { field: '', direction: 'asc' };
-        this.filters = [];
+        this.sortConf = signal({ field: '', title: '', direction: 'desc' });
+        this.filters = signal([]);
         this.pagingConf = signal({
             page: 1,
             perPage: 100,
@@ -491,6 +486,8 @@ class DataSource {
             perPageSelect: [],
         });
         this.data = signal([]);
+        this.getSort = computed(() => this.sortConf());
+        this.getFilters = computed(() => this.filters());
     }
     refresh() {
         this.emitOnChanged({ action: SmartTableOnChangedEventName.refresh });
@@ -507,12 +504,12 @@ class DataSource {
         return Promise.resolve(true);
     }
     async appendMany(elements) {
-        this.data.update((old) => [...old, ...elements,]);
+        this.data.update((old) => [...old, ...elements]);
         this.emitOnChanged({ action: SmartTableOnChangedEventName.appendMany, newItems: elements });
         return Promise.resolve(true);
     }
     async add(element) {
-        this.data.update((old) => [...old, element,]);
+        this.data.update((old) => [...old, element]);
         this.emitOnChanged({ action: SmartTableOnChangedEventName.add, newItems: [element] });
         return Promise.resolve(true);
     }
@@ -532,7 +529,7 @@ class DataSource {
         return Promise.resolve(true);
     }
     setSort(conf, doEmit = true) {
-        this.sortConf = conf;
+        this.sortConf.set(conf);
         this.pagingConf.update((old) => ({ ...old, page: 1 }));
         if (doEmit) {
             this.emitOnChanged({ action: SmartTableOnChangedEventName.sort });
@@ -542,19 +539,21 @@ class DataSource {
         if (!newFilter.field) {
             return;
         }
-        const foundIndex = this.filters.findIndex((filter) => filter.field === newFilter.field);
+        const foundIndex = this.filters().findIndex((filter) => filter.field === newFilter.field);
         if (foundIndex === -1) {
             if (newFilter.search) {
-                this.filters.push(newFilter);
+                this.filters.set([...this.filters(), newFilter]);
             }
         }
         else {
+            const filtersTemp = this.filters();
             if (newFilter.search) {
-                this.filters[foundIndex].search = newFilter.search;
+                filtersTemp[foundIndex].search = newFilter.search;
             }
             else {
-                this.filters.splice(foundIndex, 1);
+                filtersTemp.splice(foundIndex, 1);
             }
+            this.filters.set([...filtersTemp]);
         }
         this.pagingConf.update((old) => ({ ...old, page: 1 }));
         if (doEmit) {
@@ -562,7 +561,7 @@ class DataSource {
         }
     }
     setFilters(newFilters, doEmit = true) {
-        this.filters = [...newFilters];
+        this.filters.set([...newFilters]);
         this.pagingConf.update((old) => ({ ...old, page: 1 }));
         if (doEmit) {
             this.emitOnChanged({ action: SmartTableOnChangedEventName.filter });
@@ -629,7 +628,7 @@ function compareValues(direction, a, b) {
 }
 class LocalSorter {
     static async sort(data, field, direction, customCompare) {
-        const dir = direction === "asc" ? 1 : -1;
+        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]);
@@ -667,24 +666,18 @@ class LocalDataSource extends DataSource {
     }
     reset(silent = false) {
         if (silent) {
-            this.filters = [];
-            this.sortConf = { field: '', direction: 'asc' };
+            this.filters.set([]);
+            this.sortConf.set({ field: '', title: '', direction: 'asc' });
             this.pagingConf.update((old) => ({ ...old, page: 1 }));
         }
         else {
             this.setFilters([], false);
-            this.setSort({ field: '', direction: 'asc' }, false);
+            this.setSort({ field: '', title: '', direction: 'asc' }, false);
             if (this.pagingConf().display) {
                 this.setPage(1);
             }
         }
     }
-    getSort() {
-        return this.sortConf;
-    }
-    getFilters() {
-        return this.filters;
-    }
     async emitOnChanged(event, newElements) {
         let renderData = this.filteredAndSorted().slice(0);
         const action = event.action;
@@ -707,8 +700,8 @@ class LocalDataSource extends DataSource {
         }
     }
     async sort(data) {
-        if (this.sortConf) {
-            return LocalSorter.sort(data, this.sortConf.field, this.sortConf.direction, this.sortConf.compare);
+        if (this.sortConf()) {
+            return LocalSorter.sort(data, this.sortConf().field, this.sortConf().direction, this.sortConf().compare);
         }
         return data;
     }
@@ -718,7 +711,7 @@ class LocalDataSource extends DataSource {
         }
         const filtered = [];
         await Promise.all(data.map(async (element) => {
-            if (await isElementSatisfied(element, this.filters)) {
+            if (await isElementSatisfied(element, this.filters())) {
                 filtered.push(element);
             }
         }));
@@ -748,12 +741,6 @@ class ServerDataSource extends DataSource {
     getAll() {
         return Promise.resolve(this.data());
     }
-    getSort() {
-        return this.sortConf;
-    }
-    getFilters() {
-        return this.filters;
-    }
     emitOnChanged(eventData, newElements) {
         if ([
             SmartTableOnChangedEventName.filter,
@@ -763,12 +750,12 @@ class ServerDataSource extends DataSource {
             SmartTableOnChangedEventName.refresh,
         ].includes(eventData.action)) {
             this.paramPrepareFunction({
-                sort: this.sortConf,
-                filters: this.filters,
+                sort: this.sortConf(),
+                filters: this.filters(),
                 page: this.pagingConf().page,
                 limit: this.pagingConf().perPage,
             })
-                .pipe(switchMap((params) => this.requestFunction(params)))
+                .pipe(switchMap((params) => this.requestFunction(params)), take(1))
                 .subscribe((res) => {
                 this.data.set(res.data);
                 this.pagingConf.update((old) => ({ ...old, total: res.total }));
@@ -833,21 +820,21 @@ class PagerComponent {
         this.source().setPaging(1, +target.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (shouldShow()) {\n<div class=\"ng2-smart-pagination-wrap\">\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <div></div>\n  }\n  <nav class=\"ng2-smart-pagination-nav\">\n    <ul class=\"ng2-smart-pagination pagination\">\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : paginate(1)\"\n          aria-label=\"First\">\n          <span aria-hidden=\"true\">&laquo;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-prev\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : prev()\"\n          aria-label=\"Prev\">\n          <span aria-hidden=\"true\">&lt;</span>\n        </a>\n      </li>\n      @for (page of pages(); track $index) {\n      <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n        @if (currentPage() === page || isString(page)) {\n        <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n        } @else {\n        <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"paginate(page)\">{{ page }}</a>\n        }\n      </li>\n      }\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-next\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : next()\"\n          aria-label=\"Next\">\n          <span aria-hidden=\"true\">&gt;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : paginate(lastPage())\"\n          aria-label=\"Last\">\n          <span aria-hidden=\"true\">&raquo;</span>\n        </a>\n      </li>\n    </ul>\n  </nav>\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <nav class=\"ng2-smart-pagination-per-page\">\n    <label for=\"per-page\"> Per Page: </label>\n    <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n      @for (item of pagingConf().perPageSelect; track $index) {\n      <option [value]=\"item\">{{ item }}</option>\n      }\n    </select>\n  </nav>\n  }\n</div>\n\n}\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (shouldShow()) {\n<div class=\"ng2-smart-pagination-wrap\">\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <div></div>\n  }\n  <nav class=\"ng2-smart-pagination-nav\">\n    <ul class=\"ng2-smart-pagination pagination\">\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : paginate(1)\"\n          aria-label=\"First\">\n          <span aria-hidden=\"true\">&laquo;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-prev\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : prev()\"\n          aria-label=\"Prev\">\n          <span aria-hidden=\"true\">&lt;</span>\n        </a>\n      </li>\n      @for (page of pages(); track $index) {\n      <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n        @if (currentPage() === page || isString(page)) {\n        <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n        } @else {\n        <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"paginate(page)\">{{ page }}</a>\n        }\n      </li>\n      }\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-next\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : next()\"\n          aria-label=\"Next\">\n          <span aria-hidden=\"true\">&gt;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : paginate(lastPage())\"\n          aria-label=\"Last\">\n          <span aria-hidden=\"true\">&raquo;</span>\n        </a>\n      </li>\n    </ul>\n  </nav>\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <nav class=\"ng2-smart-pagination-per-page\">\n    <label for=\"per-page\"> Per Page: </label>\n    <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n      @for (item of pagingConf().perPageSelect; track $index) {\n      <option [value]=\"item\">{{ item }}</option>\n      }\n    </select>\n  </nav>\n  }\n</div>\n\n}\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-smart-table-pager', standalone: true, imports: [FormsModule], template: "@if (shouldShow()) {\n<div class=\"ng2-smart-pagination-wrap\">\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <div></div>\n  }\n  <nav class=\"ng2-smart-pagination-nav\">\n    <ul class=\"ng2-smart-pagination pagination\">\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : paginate(1)\"\n          aria-label=\"First\">\n          <span aria-hidden=\"true\">&laquo;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-prev\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : prev()\"\n          aria-label=\"Prev\">\n          <span aria-hidden=\"true\">&lt;</span>\n        </a>\n      </li>\n      @for (page of pages(); track $index) {\n      <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n        @if (currentPage() === page || isString(page)) {\n        <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n        } @else {\n        <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"paginate(page)\">{{ page }}</a>\n        }\n      </li>\n      }\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-next\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : next()\"\n          aria-label=\"Next\">\n          <span aria-hidden=\"true\">&gt;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : paginate(lastPage())\"\n          aria-label=\"Last\">\n          <span aria-hidden=\"true\">&raquo;</span>\n        </a>\n      </li>\n    </ul>\n  </nav>\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <nav class=\"ng2-smart-pagination-per-page\">\n    <label for=\"per-page\"> Per Page: </label>\n    <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n      @for (item of pagingConf().perPageSelect; track $index) {\n      <option [value]=\"item\">{{ item }}</option>\n      }\n    </select>\n  </nav>\n  }\n</div>\n\n}\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"] }]
+            args: [{ selector: 'ng2-smart-table-pager', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "@if (shouldShow()) {\n<div class=\"ng2-smart-pagination-wrap\">\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <div></div>\n  }\n  <nav class=\"ng2-smart-pagination-nav\">\n    <ul class=\"ng2-smart-pagination pagination\">\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : paginate(1)\"\n          aria-label=\"First\">\n          <span aria-hidden=\"true\">&laquo;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-prev\"\n          href=\"#\"\n          (click)=\"currentPage() === 1 ? false : prev()\"\n          aria-label=\"Prev\">\n          <span aria-hidden=\"true\">&lt;</span>\n        </a>\n      </li>\n      @for (page of pages(); track $index) {\n      <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n        @if (currentPage() === page || isString(page)) {\n        <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n        } @else {\n        <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"paginate(page)\">{{ page }}</a>\n        }\n      </li>\n      }\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link page-link-next\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : next()\"\n          aria-label=\"Next\">\n          <span aria-hidden=\"true\">&gt;</span>\n        </a>\n      </li>\n      <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n        <a\n          class=\"ng2-smart-page-link page-link\"\n          href=\"#\"\n          (click)=\"currentPage() === lastPage() ? false : paginate(lastPage())\"\n          aria-label=\"Last\">\n          <span aria-hidden=\"true\">&raquo;</span>\n        </a>\n      </li>\n    </ul>\n  </nav>\n  @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n  <nav class=\"ng2-smart-pagination-per-page\">\n    <label for=\"per-page\"> Per Page: </label>\n    <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n      @for (item of pagingConf().perPageSelect; track $index) {\n      <option [value]=\"item\">{{ item }}</option>\n      }\n    </select>\n  </nav>\n  }\n</div>\n\n}\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"] }]
         }] });
 
 class CheckboxEditorComponent extends BaseEditorComponent {
     constructor() {
         super();
         this.trueVal = computed(() => {
-            return this.cell().getColumn().getEditorConfig()?.true || true;
+            return this.cell().column.getEditorConfig()?.true || true;
         });
         this.falseVal = computed(() => {
-            return this.cell().getColumn().getEditorConfig()?.false || false;
+            return this.cell().column.getEditorConfig()?.false || false;
         });
     }
     onChange(event) {
@@ -859,11 +846,11 @@ class CheckboxEditorComponent extends BaseEditorComponent {
       [class]="inputClass()"
       type="checkbox"
       class="form-control"
-      [name]="cell().getId()"
+      [name]="cell().id"
       [disabled]="!cell().isEditable()"
       (change)="onChange($event)"
       [checked]="cell().getValue() === trueVal()" />
-  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }); }
+  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
             type: Component,
@@ -872,11 +859,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       [class]="inputClass()"
       type="checkbox"
       class="form-control"
-      [name]="cell().getId()"
+      [name]="cell().id"
       [disabled]="!cell().isEditable()"
       (change)="onChange($event)"
       [checked]="cell().getValue() === trueVal()" />
-  `, standalone: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }], ctorParameters: () => [] });
 
 class InputEditorComponent extends BaseEditorComponent {
@@ -886,10 +873,10 @@ class InputEditorComponent extends BaseEditorComponent {
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
-      [name]="cell().getId()"
-      [placeholder]="cell().getTitle()"
+      [name]="cell().id"
+      [placeholder]="cell().title"
       [disabled]="!cell().isEditable()" />
-  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, decorators: [{
             type: Component,
@@ -898,10 +885,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
-      [name]="cell().getId()"
-      [placeholder]="cell().getTitle()"
+      [name]="cell().id"
+      [placeholder]="cell().title"
       [disabled]="!cell().isEditable()" />
-  `, standalone: true, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }] });
 
 class SelectEditorComponent extends BaseEditorComponent {
@@ -911,15 +898,15 @@ class SelectEditorComponent extends BaseEditorComponent {
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
-      [name]="cell().getId()"
+      [name]="cell().id"
       [disabled]="!cell().isEditable()">
-      @for (option of cell().getColumn().getEditorConfig()?.list; track $index) {
-      <option [value]="option.value" [selected]="option.value === cell().getValue()">
-        {{ option.title }}
-      </option>
+      @for (option of cell().column.getEditorConfig()?.list; track $index) {
+        <option [value]="option.value" [selected]="option.value === cell().getValue()">
+          {{ option.title }}
+        </option>
       }
     </select>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, decorators: [{
             type: Component,
@@ -930,16 +917,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
-      [name]="cell().getId()"
+      [name]="cell().id"
       [disabled]="!cell().isEditable()">
-      @for (option of cell().getColumn().getEditorConfig()?.list; track $index) {
-      <option [value]="option.value" [selected]="option.value === cell().getValue()">
-        {{ option.title }}
-      </option>
+      @for (option of cell().column.getEditorConfig()?.list; track $index) {
+        <option [value]="option.value" [selected]="option.value === cell().getValue()">
+          {{ option.title }}
+        </option>
       }
     </select>
   `,
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormsModule],
                 }]
         }] });
@@ -951,11 +938,11 @@ class TextareaEditorComponent extends BaseEditorComponent {
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
-      [name]="cell().getId()"
+      [name]="cell().id"
       [disabled]="!cell().isEditable()"
-      [placeholder]="cell().getTitle()">
+      [placeholder]="cell().title">
     </textarea>
-  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, decorators: [{
             type: Component,
@@ -964,18 +951,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       [class]="inputClass()"
       class="form-control"
       [(ngModel)]="cell().newValue"
-      [name]="cell().getId()"
+      [name]="cell().id"
       [disabled]="!cell().isEditable()"
-      [placeholder]="cell().getTitle()">
+      [placeholder]="cell().title">
     </textarea>
-  `, standalone: true, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }] });
 
 class BuildInEditorComponent extends BaseEditorComponent {
     constructor() {
         super(...arguments);
         this.editorType = computed(() => {
-            const editor = this.cell().getColumn().editor;
+            const editor = this.cell().column.editor;
             if (editor) {
                 return editor.type || 'text';
             }
@@ -983,16 +970,16 @@ class BuildInEditorComponent extends BaseEditorComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BuildInEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BuildInEditorComponent, isStandalone: true, selector: "ng2-table-cell-build-in-editor", usesInheritance: true, ngImport: i0, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (editorType()) {\n    @case ('list') {\n      <ng2-select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-select-editor>\n    }\n    @case ('textarea') {\n      <ng2-textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-textarea-editor>\n    }\n    @case ('checkbox') {\n      <ng2-checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-checkbox-editor>\n    }\n    @default {\n      <ng2-input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </ng2-input-editor>\n  }\n}\n</div>", dependencies: [{ kind: "component", type: SelectEditorComponent, selector: "ng2-select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "ng2-textarea-editor" }, { kind: "component", type: CheckboxEditorComponent, selector: "ng2-checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "ng2-input-editor" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BuildInEditorComponent, isStandalone: true, selector: "ng2-table-cell-build-in-editor", usesInheritance: true, ngImport: i0, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (editorType()) {\n    @case ('list') {\n      <ng2-select-editor [cell]=\"cell()\"> </ng2-select-editor>\n    }\n    @case ('textarea') {\n      <ng2-textarea-editor [cell]=\"cell()\"> </ng2-textarea-editor>\n    }\n    @case ('checkbox') {\n      <ng2-checkbox-editor [cell]=\"cell()\"> </ng2-checkbox-editor>\n    }\n    @default {\n      <ng2-input-editor [cell]=\"cell()\"> </ng2-input-editor>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: SelectEditorComponent, selector: "ng2-select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "ng2-textarea-editor" }, { kind: "component", type: CheckboxEditorComponent, selector: "ng2-checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "ng2-input-editor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BuildInEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-table-cell-build-in-editor', imports: [SelectEditorComponent, TextareaEditorComponent, CheckboxEditorComponent, InputEditorComponent], standalone: true, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (editorType()) {\n    @case ('list') {\n      <ng2-select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-select-editor>\n    }\n    @case ('textarea') {\n      <ng2-textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-textarea-editor>\n    }\n    @case ('checkbox') {\n      <ng2-checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </ng2-checkbox-editor>\n    }\n    @default {\n      <ng2-input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </ng2-input-editor>\n  }\n}\n</div>" }]
+            args: [{ selector: 'ng2-table-cell-build-in-editor', imports: [SelectEditorComponent, TextareaEditorComponent, CheckboxEditorComponent, InputEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (editorType()) {\n    @case ('list') {\n      <ng2-select-editor [cell]=\"cell()\"> </ng2-select-editor>\n    }\n    @case ('textarea') {\n      <ng2-textarea-editor [cell]=\"cell()\"> </ng2-textarea-editor>\n    }\n    @case ('checkbox') {\n      <ng2-checkbox-editor [cell]=\"cell()\"> </ng2-checkbox-editor>\n    }\n    @default {\n      <ng2-input-editor [cell]=\"cell()\"> </ng2-input-editor>\n    }\n  }\n</div>\n" }]
         }] });
 
 class CustomEditComponent extends BaseEditorComponent {
     ngOnChanges(changes) {
-        const editor = this.cell().getColumn().editor;
+        const editor = this.cell().column.editor;
         if (this.customComponent) {
             if (this.customComponent?.instance && 'ngOnChanges' in this.customComponent.instance) {
                 try {
@@ -1008,7 +995,6 @@ class CustomEditComponent extends BaseEditorComponent {
         if (this.cell() && !this.customComponent && editor && editor.type == 'custom') {
             this.customComponent = this.dynamicTarget?.createComponent(editor.component);
             this.customComponent?.setInput('cell', this.cell());
-            this.customComponent?.setInput('inputClass', this.inputClass());
         }
     }
     ngOnDestroy() {
@@ -1017,14 +1003,14 @@ class CustomEditComponent extends BaseEditorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomEditComponent, isStandalone: true, selector: "ng2-table-cell-custom-editor", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ` <ng-template #dynamicTarget></ng-template> `, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomEditComponent, isStandalone: true, selector: "ng2-table-cell-custom-editor", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ` <ng-template #dynamicTarget></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-table-cell-custom-editor',
                     template: ` <ng-template #dynamicTarget></ng-template> `,
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { dynamicTarget: [{
                 type: ViewChild,
@@ -1034,25 +1020,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 class EditCellComponent {
     constructor() {
         this.cell = input.required();
-        this.inputClass = input('');
     }
+    // readonly inputClass = input('');
     getEditorType() {
-        const editor = this.cell().getColumn().editor;
+        const editor = this.cell().column.editor;
         if (editor) {
             return editor.type;
         }
         return 'text';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: EditCellComponent, isStandalone: true, selector: "ng2-table-cell-edit-mode", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: EditCellComponent, isStandalone: true, selector: "ng2-table-cell-edit-mode", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div>
-      @switch (getEditorType()) { @case ('custom') {
-      <ng2-table-cell-custom-editor [cell]="cell()" [inputClass]="inputClass()"> </ng2-table-cell-custom-editor>
-      } @default {
-      <ng2-table-cell-build-in-editor [cell]="cell()" [inputClass]="inputClass()"> </ng2-table-cell-build-in-editor>
-      } }
+      @switch (getEditorType()) {
+        @case ('custom') {
+          <ng2-table-cell-custom-editor [cell]="cell()"> </ng2-table-cell-custom-editor>
+        }
+        @default {
+          <ng2-table-cell-build-in-editor [cell]="cell()"> </ng2-table-cell-build-in-editor>
+        }
+      }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "ng2-table-cell-custom-editor" }, { kind: "component", type: BuildInEditorComponent, selector: "ng2-table-cell-build-in-editor" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "ng2-table-cell-custom-editor" }, { kind: "component", type: BuildInEditorComponent, selector: "ng2-table-cell-build-in-editor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellComponent, decorators: [{
             type: Component,
@@ -1060,14 +1049,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     selector: 'ng2-table-cell-edit-mode',
                     template: `
     <div>
-      @switch (getEditorType()) { @case ('custom') {
-      <ng2-table-cell-custom-editor [cell]="cell()" [inputClass]="inputClass()"> </ng2-table-cell-custom-editor>
-      } @default {
-      <ng2-table-cell-build-in-editor [cell]="cell()" [inputClass]="inputClass()"> </ng2-table-cell-build-in-editor>
-      } }
+      @switch (getEditorType()) {
+        @case ('custom') {
+          <ng2-table-cell-custom-editor [cell]="cell()"> </ng2-table-cell-custom-editor>
+        }
+        @default {
+          <ng2-table-cell-build-in-editor [cell]="cell()"> </ng2-table-cell-build-in-editor>
+        }
+      }
     </div>
   `,
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CustomEditComponent, BuildInEditorComponent],
                 }]
         }] });
@@ -1079,23 +1071,21 @@ class CustomViewComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CustomViewComponent, isStandalone: true, selector: "ng2-custom-view-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ng-template
     *ngComponentOutlet="
-      cell().getColumn().renderComponent;
-      inputs: { rowData: cell().getRow().getData(), value: cell().getValue() }
-    "
-  ></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+      cell().column.renderComponent;
+      inputs: { rowData: cell().row.rowData, value: cell().getValue() }
+    "></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-custom-view-component",
+                    selector: 'ng2-custom-view-component',
                     template: `<ng-template
     *ngComponentOutlet="
-      cell().getColumn().renderComponent;
-      inputs: { rowData: cell().getRow().getData(), value: cell().getValue() }
-    "
-  ></ng-template>`,
+      cell().column.renderComponent;
+      inputs: { rowData: cell().row.rowData, value: cell().getValue() }
+    "></ng-template>`,
                     imports: [NgComponentOutlet],
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
@@ -1106,33 +1096,40 @@ class ViewCellComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewCellComponent, isStandalone: true, selector: "ng2-table-cell-view-mode", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     <div>
-      @switch (cell().getColumn().type) { @case ('custom') {
-      <ng2-custom-view-component [cell]="cell()"></ng2-custom-view-component>
-      } @case ('html') {
-      <div [innerHTML]="cell().getValue()"></div>
-      } @default {
-      <div>{{ cell().getValue() }}</div>
-      } }
+      @switch (cell().column.type) {
+        @case ('custom') {
+          <ng2-custom-view-component [cell]="cell()"></ng2-custom-view-component>
+        }
+        @case ('html') {
+          <div [innerHTML]="cell().getValue()"></div>
+        }
+        @default {
+          <div>{{ cell().getValue() }}</div>
+        }
+      }
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: CustomViewComponent, selector: "ng2-custom-view-component", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewCellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-table-cell-view-mode",
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'ng2-table-cell-view-mode',
                     template: `
     <div>
-      @switch (cell().getColumn().type) { @case ('custom') {
-      <ng2-custom-view-component [cell]="cell()"></ng2-custom-view-component>
-      } @case ('html') {
-      <div [innerHTML]="cell().getValue()"></div>
-      } @default {
-      <div>{{ cell().getValue() }}</div>
-      } }
+      @switch (cell().column.type) {
+        @case ('custom') {
+          <ng2-custom-view-component [cell]="cell()"></ng2-custom-view-component>
+        }
+        @case ('html') {
+          <div [innerHTML]="cell().getValue()"></div>
+        }
+        @default {
+          <div>{{ cell().getValue() }}</div>
+        }
+      }
     </div>
   `,
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [CustomViewComponent],
                 }]
         }] });
@@ -1140,38 +1137,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 class CellComponent {
     constructor() {
         this.cell = input.required();
-        this.inputClass = input('');
         this.isInEditing = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CellComponent, isStandalone: true, selector: "ng2-smart-table-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, isInEditing: { classPropertyName: "isInEditing", publicName: "isInEditing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CellComponent, isStandalone: true, selector: "ng2-smart-table-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, isInEditing: { classPropertyName: "isInEditing", publicName: "isInEditing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (!isInEditing()) {
-    <ng2-table-cell-view-mode [cell]="cell()"></ng2-table-cell-view-mode>
+      <ng2-table-cell-view-mode [cell]="cell()"></ng2-table-cell-view-mode>
     } @else {
-    <ng2-table-cell-edit-mode
-      [cell]="cell()"
-      [inputClass]="inputClass()"
-    >
-    </ng2-table-cell-edit-mode>
+      <ng2-table-cell-edit-mode [cell]="cell()"> </ng2-table-cell-edit-mode>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ViewCellComponent, selector: "ng2-table-cell-view-mode", inputs: ["cell"] }, { kind: "component", type: EditCellComponent, selector: "ng2-table-cell-edit-mode", inputs: ["cell", "inputClass"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ViewCellComponent, selector: "ng2-table-cell-view-mode", inputs: ["cell"] }, { kind: "component", type: EditCellComponent, selector: "ng2-table-cell-edit-mode", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-smart-table-cell",
+                    selector: 'ng2-smart-table-cell',
                     template: `
     @if (!isInEditing()) {
-    <ng2-table-cell-view-mode [cell]="cell()"></ng2-table-cell-view-mode>
+      <ng2-table-cell-view-mode [cell]="cell()"></ng2-table-cell-view-mode>
     } @else {
-    <ng2-table-cell-edit-mode
-      [cell]="cell()"
-      [inputClass]="inputClass()"
-    >
-    </ng2-table-cell-edit-mode>
+      <ng2-table-cell-edit-mode [cell]="cell()"> </ng2-table-cell-edit-mode>
     }
   `,
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ViewCellComponent, EditCellComponent],
                 }]
         }] });
@@ -1179,806 +1167,353 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 class TbodyCreateCancelComponent {
     constructor() {
         this.grid = input.required();
-        this.row = input.required();
-        this.editConfirm = input.required();
-        this.editCancel = input.required();
+        this.rowIndex = input();
+        this.rowPending = input(false);
+        this.save = output();
+        this.cancelEdit = output();
         this.cancelButtonContent = computed(() => {
             const edit = this.grid().settings().edit;
-            return edit ? edit.cancelButtonContent || "Cancel" : "Cancel";
+            return edit ? edit.cancelButtonContent || 'Cancel' : 'Cancel';
         });
         this.saveButtonContent = computed(() => {
             const edit = this.grid().settings().edit;
-            return edit ? edit.saveButtonContent || "Update" : "Update";
+            return edit ? edit.saveButtonContent || 'Save' : 'Save';
+        });
+    }
+    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 }); }
+}
+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"] }]
+        }] });
+
+class RowActionsComponent {
+    constructor() {
+        this.grid = input.required();
+        this.row = input.required();
+        this.editEmitter = output();
+        this.deleteEmitter = output();
+        this.customActionEmitter = output();
+        this.customActions = computed(() => {
+            const { actions } = this.grid().settings();
+            if (!actions || !actions.custom) {
+                return [];
+            }
+            const list = actions.custom.filter((action) => !action.hasPermissionFunction ? true : action.hasPermissionFunction(this.row().rowData));
+            return list;
+        });
+        this.isActionEditActive = computed(() => {
+            const actions = this.grid().settings().actions;
+            const editConfig = this.grid().settings().edit;
+            if (!actions || !actions.edit) {
+                return false;
+            }
+            if (!editConfig || !editConfig.hasPermissionFunction) {
+                return true;
+            }
+            return editConfig.hasPermissionFunction(this.row().rowData);
+        });
+        this.isActionDeleteActive = computed(() => {
+            const actions = this.grid().settings().actions;
+            const deleteConfig = this.grid().settings().delete;
+            if (!actions || !actions.delete) {
+                return false;
+            }
+            if (!deleteConfig || !deleteConfig.hasPermissionFunction) {
+                return true;
+            }
+            return deleteConfig.hasPermissionFunction(this.row().rowData);
+        });
+        this.isExternalMode = computed(() => {
+            return this.grid().settings().mode === 'external';
+        });
+        this.editRowButtonContent = computed(() => {
+            const edit = this.grid().settings().edit;
+            return edit ? edit.editButtonContent || 'Edit' : 'Edit';
         });
+        this.deleteRowButtonContent = computed(() => {
+            const deleteConfig = this.grid().settings().delete;
+            return deleteConfig ? deleteConfig.deleteButtonContent || 'Delete' : 'Delete';
+        });
+        this.allActionsCountArray = computed(() => {
+            let length = this.customActions().length;
+            length += this.isActionDeleteActive() ? 1 : 0;
+            length += this.isActionEditActive() ? 1 : 0;
+            return new Array(length).fill('');
+        });
+    }
+    onCustom(action) {
+        this.customActionEmitter.emit(action.name);
     }
-    onSave(event) {
+    onEdit(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.grid().save(this.row(), this.editConfirm());
+        this.editEmitter.emit();
     }
-    onCancelEdit(event) {
+    onDelete(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.editCancel().emit(true);
-        this.row().isInEditing.set(false);
+        this.deleteEmitter.emit();
     }
-    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 }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, editConfirm: { classPropertyName: "editConfirm", publicName: "editConfirm", isSignal: true, isRequired: true, transformFunction: null }, editCancel: { classPropertyName: "editCancel", publicName: "editCancel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (!row().pending()) {
-    <a
-      href="#"
-      [id]="'row-' + row().index + '_editing-confirm-button'"
-      class="ng2-smart-action ng2-smart-action-edit-save"
-      [innerHTML]="saveButtonContent()"
-      (click)="onSave($event)"
-    ></a>
-    <a
-      href="#"
-      [id]="'row-' + row().index + '_editing-cancel-button'"
-      class="ng2-smart-action ng2-smart-action-edit-cancel"
-      [innerHTML]="cancelButtonContent()"
-      (click)="onCancelEdit($event)"
-    ></a>
-    } @else {
-    <div style="display: flex;">
-      <svg
-        role="none"
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem;"
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
-        <path
-          fill="#e9e9e9"
-          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"
-        >
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite"
-          />
-        </path>
-      </svg>
-      <svg
-        role="none"
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem; "
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
-        <path
-          fill="#e9e9e9"
-          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"
-        >
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite"
-          />
-        </path>
-      </svg>
-    </div>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: RowActionsComponent, isStandalone: true, selector: "ng2-row-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editEmitter: "editEmitter", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter" }, ngImport: i0, template: "@if (!row().pending()) {\n  @if (isActionEditActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-edit-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n      [innerHTML]=\"editRowButtonContent()\"\n      (click)=\"onEdit($event)\"></a>\n  }\n  @if (isActionDeleteActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-delete-button'\"\n      class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n      [innerHTML]=\"deleteRowButtonContent()\"\n      (click)=\"onDelete($event)\"></a>\n  }\n  @for (action of customActions(); track action.name) {\n    <a\n      [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n      href=\"#\"\n      class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n      [innerHTML]=\"action.title\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n  }\n} @else {\n  @for (item of allActionsCountArray(); track $index) {\n    <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n  }\n}\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RowActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng2-row-actions', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) {\n  @if (isActionEditActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-edit-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n      [innerHTML]=\"editRowButtonContent()\"\n      (click)=\"onEdit($event)\"></a>\n  }\n  @if (isActionDeleteActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-delete-button'\"\n      class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n      [innerHTML]=\"deleteRowButtonContent()\"\n      (click)=\"onDelete($event)\"></a>\n  }\n  @for (action of customActions(); track action.name) {\n    <a\n      [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n      href=\"#\"\n      class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n      [innerHTML]=\"action.title\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n  }\n} @else {\n  @for (item of allActionsCountArray(); track $index) {\n    <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n  }\n}\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"] }]
+        }] });
+
+class TrowComponent {
+    constructor() {
+        this.grid = input.required();
+        this.source = input.required();
+        this.row = input.required();
+        this.isMobileView = input(false);
+        this.isCreateRow = input(false);
+        this.edit = output();
+        this.editCancel = output();
+        this.editConfirmed = output();
+        this.deleteEmitter = output();
+        this.createConfirmed = output();
+        this.customActionEmitter = output();
+        this.userClickedRow = output();
+        this.multipleSelectRow = output();
+    }
+    onSave() {
+        if (this.isCreateRow()) {
+            this.createConfirmed.emit();
+        }
+        else {
+            this.editConfirmed.emit();
+        }
+    }
+    onCancelEdit() {
+        if (this.isCreateRow()) {
+            this.grid().createFormShown.set(false);
+            return;
+        }
+        this.editCancel.emit();
+        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  } @else {\n    <p></p>\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 rgba(215, 215, 215, .568627451));background-color:var(--table-card-background-color, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between;padding:.5rem}: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  } @else {\n    <p></p>\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 rgba(215, 215, 215, .568627451));background-color:var(--table-card-background-color, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between;padding:.5rem}: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 {
+    constructor() {
+        this.grid = input.required();
+        this.source = input.required();
+        this.rowClassFunction = input(() => '');
+        this.isMobileView = input(false);
+        this.edit = output();
+        this.editConfirmed = output();
+        this.editCancel = output();
+        this.createConfirmed = output();
+        this.deleteEmitter = output();
+        this.customActionEmitter = output();
+        this.userClickedRow = output();
+        this.multipleSelectRow = output();
+        // readonly editInputClass = computed<string>(() => {
+        //   const editOptions = this.grid().settings().edit;
+        //   if (!editOptions) {
+        //     return '';
+        //   }
+        //   return editOptions.inputClass || '';
+        // });
+        this.noDataMessage = computed(() => {
+            return this.grid().settings().noDataMessage || 'No data found';
+        });
+    }
+    customActionEmitted(actionName, row) {
+        this.customActionEmitter.emit({
+            source: this.source(),
+            data: row.rowData,
+            action: actionName,
+        });
+    }
+    trackByIdOrIndex(index, item) {
+        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 }); }
+}
+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" }]
+        }] });
+
+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)="onAdd($event)"></a>
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "ng2-st-tbody-create-cancel",
+                    selector: '[ng2-st-add-button]',
                     template: `
-    @if (!row().pending()) {
-    <a
-      href="#"
-      [id]="'row-' + row().index + '_editing-confirm-button'"
-      class="ng2-smart-action ng2-smart-action-edit-save"
-      [innerHTML]="saveButtonContent()"
-      (click)="onSave($event)"
-    ></a>
-    <a
-      href="#"
-      [id]="'row-' + row().index + '_editing-cancel-button'"
-      class="ng2-smart-action ng2-smart-action-edit-cancel"
-      [innerHTML]="cancelButtonContent()"
-      (click)="onCancelEdit($event)"
-    ></a>
-    } @else {
-    <div style="display: flex;">
-      <svg
-        role="none"
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem;"
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
-        <path
-          fill="#e9e9e9"
-          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"
-        >
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite"
-          />
-        </path>
-      </svg>
-      <svg
-        role="none"
-        (click)="$event.stopPropagation()"
-        style="height: 2rem; width: 2rem; "
-        version="1.1"
-        id="L9"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        x="0px"
-        y="0px"
-        viewBox="0 0 100 100"
-        enable-background="new 0 0 0 0"
-        xml:space="preserve"
-      >
-        <path
-          fill="#e9e9e9"
-          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"
-        >
-          <animateTransform
-            attributeName="transform"
-            attributeType="XML"
-            type="rotate"
-            dur="1s"
-            from="0 50 50"
-            to="360 50 50"
-            repeatCount="indefinite"
-          />
-        </path>
-      </svg>
-    </div>
+    @if (isActionAdd()) {
+      <a
+        href="#"
+        class="ng2-smart-action ng2-smart-action-add-add"
+        [innerHTML]="addNewButtonContent()"
+        (click)="onAdd($event)"></a>
     }
   `,
-                    standalone: true,
+                    host: {
+                        class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
+                    },
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
-class DataSet {
-    constructor(data = [], columnSettings) {
-        this.columnSettings = columnSettings;
-        this.data = signal([]);
-        this.columns = signal([]);
-        this.rows = signal([]);
-        this.selectedRows = new Set();
-        this.getColumns = computed(() => this.columns());
-        this.getVisibleColumns = computed(() => this.columns().filter((column) => !column.hide));
-        this.getRows = computed(() => {
-            return this.rows();
+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.isAllSelected = computed(() => this.rows().every((row) => row.isSelected()));
-        this.createColumns(columnSettings);
-        this.setData(data);
-        this.createNewRow();
-    }
-    setData(data) {
-        this.data.set(data);
-        this.createRows();
-    }
-    setColumnsConfig(columnSettings) {
-        this.columnSettings = columnSettings;
-        this.createColumns(columnSettings);
-        this.createRows();
-    }
-    getFirstRow() {
-        return this.rows()[0];
-    }
-    getLastRow() {
-        return this.rows()[this.rows().length - 1];
-    }
-    findRowByData(data) {
-        return this.rows().find((row) => row.getData() === data);
-    }
-    setSelectAll(state) {
-        this.rows().forEach((row) => {
-            row.isSelected.set(state);
-            this.storeSelectedRow(row);
+        this.currentSortDirectionSymbol = computed(() => {
+            return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
         });
     }
-    deselectAll() {
-        this.rows().forEach((row) => {
-            row.isSelected.set(false);
+    _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,
         });
-        // we need to clear selectedRow field because no one row selected
-        this.selectedRows.clear();
     }
-    selectRow(row, state) {
-        row.isSelected.set(state);
-        this.storeSelectedRow(row);
+    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>
     }
-    multipleSelectRow(row) {
-        row.isSelected.set(!row.isSelected());
-        this.storeSelectedRow(row);
-        return row;
+  `, 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>
     }
-    getSelectedRowsData() {
-        return [...this.selectedRows];
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"] }]
+        }] });
+
+class CheckboxFilterComponent extends BaseFilterComponent {
+    constructor() {
+        super();
+        this.filterIsActive = computed(() => this.query() !== null);
+        this.currentState = computed(() => {
+            const valuesConfig = this.getValuesConfig(this.column().getFilterConfig());
+            return this.query() === valuesConfig.trueVal ? true : this.query() === valuesConfig.falseVal ? false : false;
+        });
     }
-    createNewRow() {
-        this.newRow = new Row(-1, {}, this);
-        this.newRow.isInEditing.set(true);
+    getValuesConfig(filterConfig) {
+        try {
+            const { true: trueVal, false: falseVal } = filterConfig;
+            return { trueVal: trueVal || true, falseVal: falseVal ?? false };
+        }
+        catch {
+            return { trueVal: true, falseVal: false };
+        }
     }
-    /**
-     * Create columns by mapping from the settings
-     * @param settings
-     * @private
-     */
-    createColumns(columnsParams) {
-        const columns = columnsParams.map((params) => new Column(params.key, params, this));
-        this.columns.set(columns);
-    }
-    /**
-     * Create rows based on current data prepared in data source
-     * @private
-     */
-    createRows() {
-        const rows = this.data().map((el, index) => {
-            const row = new Row(index, el, this);
-            row.isSelected.set(this.selectedRows.has(row.getData()));
-            return row;
-        });
-        this.rows.set(rows);
-    }
-    storeSelectedRow(row) {
-        if (row.isSelected()) {
-            this.selectedRows.add(row.getData());
-        }
-        else {
-            this.selectedRows.delete(row.getData());
-        }
-    }
-}
-
-class Grid {
-    constructor(source, settings) {
-        this.createFormShown = false;
-        this.currentColumnsSortState = [];
-        this.settings = signal({});
-        this.isMultiSelectVisible = computed(() => {
-            return this.settings().selectMode === 'multi';
-        });
-        this.isActionsVisible = computed(() => {
-            const actions = this.settings().actions;
-            if (!actions)
-                return false;
-            return actions.add || actions.edit || actions.delete || !!actions?.custom?.length;
-        });
-        this.actionIsOnLeft = computed(() => {
-            return (this.settings().actionsPosition || 'left') === 'left';
-        });
-        this.actionIsOnRight = computed(() => {
-            return this.settings().actionsPosition === 'right';
-        });
-        this.setSource(source, settings);
-        this.setSettings(settings);
-    }
-    setColumnsSortedEmitter(emitter) {
-        this.columnsSortedEmitter = emitter;
-    }
-    detach() {
-        if (this.sourceOnChangedSubscription) {
-            this.sourceOnChangedSubscription.unsubscribe();
-        }
-        if (this.sourceOnUpdatedSubscription) {
-            this.sourceOnUpdatedSubscription.unsubscribe();
-        }
-    }
-    getNewRow() {
-        return this.dataSet.newRow;
-    }
-    setSettings(settings) {
-        this.updateSettingsAndDataSet(settings);
-        if (settings.columnSort) {
-            this.setColumnsSortState(settings.columns);
-        }
-    }
-    getDataSet() {
-        return this.dataSet;
-    }
-    getSetting(name, defaultValue) {
-        return getDeepFromObject(this.settings(), name, defaultValue);
-    }
-    selectRow(row, state) {
-        this.dataSet.selectRow(row, state);
-    }
-    multipleSelectRow(row) {
-        this.dataSet.multipleSelectRow(row);
-    }
-    edit(row) {
-        row.isInEditing.set(true);
-    }
-    create(row, confirmEmitter) {
-        row.pending.set(true);
-        const deferred = new Deferred();
-        deferred.promise
-            .then((newData) => {
-            row.pending.set(false);
-            newData = newData || row.getNewData();
-            this.source.prepend(newData).then(() => {
-                this.createFormShown = false;
-                this.dataSet.createNewRow();
-            });
-        })
-            .catch((err) => {
-            row.pending.set(false);
-        });
-        if (this.getSetting('add.confirmCreate', false)) {
-            confirmEmitter.emit({
-                newData: row.getNewData(),
-                source: this.source,
-                confirm: deferred,
-            });
-        }
-        else {
-            deferred.resolve(false);
-            row.pending.set(false);
-        }
-    }
-    save(row, confirmEmitter) {
-        row.pending.set(true);
-        const deferred = new Deferred();
-        deferred.promise
-            .then((newData) => {
-            row.pending.set(false);
-            newData = newData || row.getNewData();
-            this.source.update(row.getData(), newData).then(() => {
-                row.isInEditing.set(false);
-            });
-        })
-            .catch(() => {
-            row.pending.set(false);
-            row.isInEditing.set(false);
-        });
-        if (this.getSetting('edit.confirmSave', false)) {
-            confirmEmitter.emit({
-                data: row.getData(),
-                newData: row.getNewData(),
-                source: this.source,
-                confirm: deferred,
-            });
-        }
-        else {
-            deferred.resolve(false);
-            row.pending.set(false);
-        }
-    }
-    delete(row, confirmEmitter) {
-        row.pending.set(true);
-        const deferred = new Deferred();
-        deferred.promise
-            .then(() => {
-            row.pending.set(false);
-            this.source.remove(row.getData());
-        })
-            .catch(() => {
-            row.pending.set(false);
-            // doing nothing
-        });
-        if (this.getSetting('delete.confirmDelete', true)) {
-            confirmEmitter.emit({
-                data: row.getData(),
-                source: this.source,
-                confirm: deferred,
-            });
-        }
-        else {
-            deferred.resolve(false);
-            row.pending.set(false);
-        }
-        if (row.isSelected()) {
-            this.dataSet.selectRow(row, false);
-        }
-    }
-    processDataChange(event) {
-        if (event.action === 'load') {
-            this.dataSet.deselectAll();
-        }
-        if (event.action === 'update') {
-            const changedRow = this.dataSet.findRowByData(event.oldItem);
-            if (changedRow) {
-                changedRow.setData(event.newItem || event.oldItem);
-            }
-            return;
-        }
-        this.dataSet.setData(event.elements);
-    }
-    prepareSource(source, initialSort, initialPaging) {
-        const preparedSource = source || new LocalDataSource();
-        if (initialSort && !source?.getSort().field) {
-            preparedSource.setSort(initialSort, false);
-        }
-        if (initialPaging && initialPaging?.display) {
-            preparedSource.pagingConf.update((old) => ({
-                ...old,
-                ...initialPaging,
-            }));
-        }
-        return preparedSource;
-    }
-    getInitialSort(columns) {
-        if (!columns || !columns.length) {
-            return false;
-        }
-        const defaultSortColumn = columns?.find((column) => column.sortDirection);
-        if (!defaultSortColumn) {
-            return false;
-        }
-        return {
-            field: defaultSortColumn.key,
-            direction: defaultSortColumn.sortDirection || 'asc',
-            compare: defaultSortColumn.compareFunction,
-        };
-    }
-    getSelectedRowsData() {
-        return this.dataSet.getSelectedRowsData();
-    }
-    selectAllRows(status) {
-        this.dataSet.setSelectAll(status);
-    }
-    getFirstRow() {
-        return this.dataSet.getFirstRow();
-    }
-    getLastRow() {
-        return this.dataSet.getLastRow();
-    }
-    updateSettingsAndDataSet(settings, emittedEvent = 'refresh') {
-        this.settings.set(settings);
-        if (this.dataSet) {
-            this.dataSet.setColumnsConfig(settings.columns);
-        }
-        else {
-            this.dataSet = new DataSet([], settings.columns);
-        }
-        if (this.source) {
-            this.source.pagingConf.update((old) => ({
-                ...old,
-                display: this.getSetting('pager.display'),
-            }));
-            if (emittedEvent === 'columnRefresh') {
-                this.source.columnRefresh();
-            }
-            else {
-                this.source.refresh();
-            }
-        }
-    }
-    setSource(source, settings) {
-        const initialSort = this.getInitialSort(settings?.columns);
-        this.source = this.prepareSource(source, initialSort, settings?.pager || false);
-        this.detach();
-        this.sourceOnChangedSubscription = this.source.onChanged().subscribe((changes) => this.processDataChange(changes));
-    }
-    // ------------------------------- column sort
-    async getSortedTableColumns(newState, columns) {
-        const sortedArray = [];
-        newState.forEach((item2) => {
-            const index = columns.findIndex((item1) => item1.key === item2.key && item1.title === item2.title);
-            if (index > -1) {
-                sortedArray.push({ ...columns[index], hide: !!item2.hide });
-            }
-        });
-        return Promise.resolve(sortedArray);
-    }
-    async applyColumnsSortState(state, emitEvent = true) {
-        this.currentColumnsSortState = this.getMergedColumnStates(state);
-        this.updateSettingsAndDataSet({
-            ...this.settings(),
-            columns: await this.getSortedTableColumns(this.currentColumnsSortState, this.settings()?.columns),
-        }, 'columnRefresh');
-        if (this.columnStateStorageKey) {
-            setLocalStorage(this.columnStateStorageKey, this.currentColumnsSortState);
-        }
-        if (emitEvent) {
-            this.columnsSortedEmitter.emit(this.currentColumnsSortState);
-        }
-    }
-    setColumnsSortState(columns) {
-        const columnsState = this.getColumnsStateFromSettings(columns);
-        if (this.columnStateStorageKey) {
-            const storageState = getLocalStorage(this.columnStateStorageKey);
-            if (!storageState) {
-                this.currentColumnsSortState = columnsState;
-                setLocalStorage(this.columnStateStorageKey, columnsState);
-                return;
-            }
-            const merged = this.getMergedColumnStates(storageState, columnsState);
-            this.applyColumnsSortState(merged, false);
-            return;
-        }
-        this.applyColumnsSortState(columnsState, false);
-    }
-    getColumnsStateFromSettings(columns) {
-        return (columns || this.settings().columns || []).map((column) => ({
-            key: column.key,
-            title: column.title,
-            hide: !!column.hide,
-            moveDisabled: !!column.moveDisabled,
-        }));
-    }
-    getMergedColumnStates(newState, columnsState) {
-        const columnsSettings = columnsState || this.getColumnsStateFromSettings();
-        // merge new columns state with state from storage
-        const filtered = [];
-        newState.forEach((state) => {
-            const fined = columnsSettings.find((column) => column.title === state.title && column.key === state.key);
-            if (fined) {
-                filtered.push({ ...fined, hide: fined.moveDisabled ? fined.hide : state.hide });
-            }
-        });
-        // find new columns witch not exist in storage state
-        const newColumns = columnsSettings.filter((state) => {
-            return !filtered.some((column) => column.title === state.title && column.key === state.key);
-        });
-        return [...filtered, ...newColumns];
-    }
-    get columnStateStorageKey() {
-        return this.settings().columnSortStorageKey;
-    }
-}
-
-class TbodyCustomComponent {
-    constructor() {
-        this.custom = output();
-    }
-    onCustom(action) {
-        this.custom.emit({
-            action: action.name,
-            data: this.row.getData(),
-            source: this.source,
-        });
-    }
-    customActions() {
-        return this.grid.getSetting('actions.custom');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCustomComponent, isStandalone: true, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
-    @for (action of customActions(); track $index) { @if(!action.hasPermissionFunction ? true :
-    action.hasPermissionFunction(row.getData())) {
-    <a
-      [id]="'row-' + row.index + '_action-' + action.name + '-button'"
-      href="#"
-      class="ng2-smart-action ng2-smart-action-custom-custom"
-      [innerHTML]="action.title"
-      (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"></a>
-    } }
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCustomComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ng2-st-tbody-custom',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @for (action of customActions(); track $index) { @if(!action.hasPermissionFunction ? true :
-    action.hasPermissionFunction(row.getData())) {
-    <a
-      [id]="'row-' + row.index + '_action-' + action.name + '-button'"
-      href="#"
-      class="ng2-smart-action ng2-smart-action-custom-custom"
-      [innerHTML]="action.title"
-      (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"></a>
-    } }
-  `,
-                    standalone: true,
-                }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }] } });
-
-class TbodyEditDeleteComponent {
-    constructor() {
-        this.cdr = inject(ChangeDetectorRef);
-        this.grid = input.required();
-        this.row = input.required();
-        this.source = input.required();
-        this.deleteConfirm = input.required();
-        this.edit = output();
-        this.delete = output();
-        this.isActionEdit = computed(() => {
-            const actions = this.grid().settings().actions;
-            return actions ? !!actions.edit : false;
-        });
-        this.isActionDelete = computed(() => {
-            const actions = this.grid().settings().actions;
-            return actions ? !!actions.delete : false;
-        });
-        this.isExternalMode = computed(() => {
-            return this.grid().settings().mode === 'external';
-        });
-        this.canDeleteFunction = computed(() => {
-            const deleteConfig = this.grid().settings().delete;
-            return deleteConfig ? deleteConfig.hasPermissionFunction || ((data) => true) : (data) => true;
-        });
-        this.canEditFunction = computed(() => {
-            const edit = this.grid().settings().edit;
-            return edit ? edit.hasPermissionFunction || ((data) => true) : (data) => true;
-        });
-        this.editRowButtonContent = computed(() => {
-            const edit = this.grid().settings().edit;
-            return edit ? edit.editButtonContent || 'Edit' : 'Edit';
-        });
-        this.deleteRowButtonContent = computed(() => {
-            const deleteConfig = this.grid().settings().delete;
-            return deleteConfig ? deleteConfig.deleteButtonContent || 'Delete' : 'Delete';
-        });
-    }
-    onEdit(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.edit.emit({
-            data: this.row().getData(),
-            source: this.source,
-        });
-        if (!this.isExternalMode()) {
-            this.grid().edit(this.row());
-        }
-    }
-    onDelete(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.isExternalMode()) {
-            this.delete.emit({
-                data: this.row().getData(),
-                source: this.source(),
-            });
-        }
-        else {
-            this.grid().delete(this.row(), this.deleteConfirm());
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyEditDeleteComponent, isStandalone: true, selector: "ng2-st-tbody-edit-delete", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, deleteConfirm: { classPropertyName: "deleteConfirm", publicName: "deleteConfirm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { edit: "edit", delete: "delete" }, ngImport: i0, template: "@if (!row().pending()) { @if (isActionEdit() && canEditFunction()(row().getData())) {\n<a\n  href=\"#\"\n  [id]=\"'row-' + row().index + '_action-edit-button'\"\n  class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n  [innerHTML]=\"editRowButtonContent()\"\n  (click)=\"onEdit($event)\"></a>\n} @if (isActionDelete() && canDeleteFunction()(row().getData())) {\n<a\n  href=\"#\"\n  [id]=\"'row-' + row().index + '_action-delete-button'\"\n  class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n  [innerHTML]=\"deleteRowButtonContent()\"\n  (click)=\"onDelete($event)\"></a>\n} } @else {\n<div style=\"display: flex\">\n  @if (isActionEdit()) {\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  } @if (isActionDelete()) {\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  }\n</div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng2-st-tbody-edit-delete', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) { @if (isActionEdit() && canEditFunction()(row().getData())) {\n<a\n  href=\"#\"\n  [id]=\"'row-' + row().index + '_action-edit-button'\"\n  class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n  [innerHTML]=\"editRowButtonContent()\"\n  (click)=\"onEdit($event)\"></a>\n} @if (isActionDelete() && canDeleteFunction()(row().getData())) {\n<a\n  href=\"#\"\n  [id]=\"'row-' + row().index + '_action-delete-button'\"\n  class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n  [innerHTML]=\"deleteRowButtonContent()\"\n  (click)=\"onDelete($event)\"></a>\n} } @else {\n<div style=\"display: flex\">\n  @if (isActionEdit()) {\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  } @if (isActionDelete()) {\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  }\n</div>\n}\n" }]
-        }] });
-
-class Ng2SmartTableTbodyComponent {
-    constructor() {
-        this.grid = input.required();
-        this.source = input.required();
-        this.deleteConfirm = input.required();
-        this.createConfirm = input.required();
-        this.editConfirm = input.required();
-        this.rowClassFunction = input(() => '');
-        this.save = output();
-        this.edit = output();
-        this.editCancel = output();
-        this.delete = output();
-        this.custom = output();
-        this.edited = output();
-        this.userSelectRow = output();
-        this.userClickedRow = output();
-        this.multipleSelectRow = output();
-        this.editInputClass = computed(() => {
-            const editOptions = this.grid().settings().edit;
-            if (!editOptions) {
-                return '';
-            }
-            return editOptions.inputClass || '';
-        });
-        this.noDataMessage = computed(() => {
-            return this.grid().settings().noDataMessage || 'No data found';
-        });
-    }
-    trackByIdOrIndex(index, item) {
-        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 }, deleteConfirm: { classPropertyName: "deleteConfirm", publicName: "deleteConfirm", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: true, isRequired: true, transformFunction: null }, editConfirm: { classPropertyName: "editConfirm", publicName: "editConfirm", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction()(row)\"\n  [class.selected]=\"row.isSelected()\">\n  @if (grid().isMultiSelectVisible()) {\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  } @if (grid().actionIsOnLeft()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  } @for (cell of row.visibleCells(); track cell.getId() + $index) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell [cell]=\"cell\" [inputClass]=\"editInputClass()\" [isInEditing]=\"row.isInEditing()\">\n    </ng2-smart-table-cell>\n  </td>\n  } @if (grid().actionIsOnRight()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n</tr>\n\n<ng-template #actions>\n  @if (row.isInEditing()) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid()\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm()\"\n      [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing() && grid().isActionsVisible() ) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid()\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source()\"></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid()\"\n      [deleteConfirm]=\"deleteConfirm()\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      [row]=\"row\"\n      [source]=\"source()\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</ng-template>\n} @empty {\n<tr>\n  <td colspan=\"50\">\n    {{ noDataMessage() }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm"], outputs: ["edit", "delete"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "inputClass", "isInEditing"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[ng2-st-tbody]', standalone: true, imports: [
-                        FormsModule,
-                        TbodyCustomComponent,
-                        TbodyEditDeleteComponent,
-                        TbodyCreateCancelComponent,
-                        NgTemplateOutlet,
-                        CellComponent,
-                    ], template: "@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction()(row)\"\n  [class.selected]=\"row.isSelected()\">\n  @if (grid().isMultiSelectVisible()) {\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  } @if (grid().actionIsOnLeft()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  } @for (cell of row.visibleCells(); track cell.getId() + $index) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell [cell]=\"cell\" [inputClass]=\"editInputClass()\" [isInEditing]=\"row.isInEditing()\">\n    </ng2-smart-table-cell>\n  </td>\n  } @if (grid().actionIsOnRight()) {\n  <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n</tr>\n\n<ng-template #actions>\n  @if (row.isInEditing()) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid()\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm()\"\n      [editCancel]=\"editCancel\"></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing() && grid().isActionsVisible() ) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid()\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source()\"></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid()\"\n      [deleteConfirm]=\"deleteConfirm()\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      [row]=\"row\"\n      [source]=\"source()\">\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</ng-template>\n} @empty {\n<tr>\n  <td colspan=\"50\">\n    {{ noDataMessage() }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"] }]
-        }] });
-
-class CheckboxFilterComponent extends BaseFilterComponent {
-    constructor() {
-        super();
-        this.filterActive = false;
-        this.trueVal = true;
-        this.falseVal = false;
-    }
-    ngOnInit() {
-        const filterConfig = this.column().getFilterConfig();
-        try {
-            const { true: trueVal, false: falseVal } = filterConfig;
-            this.trueVal = trueVal ?? true;
-            this.falseVal = falseVal ?? false;
-        }
-        catch {
-            // do nothing
-        }
-        this.changesSubscription = this.inputControl.valueChanges
-            .pipe(distinctUntilChanged(), debounceTime(this.delay))
-            .subscribe((checked) => {
-            this.filterActive = true;
-            const value = checked ? this.trueVal : this.falseVal;
-            this.setFilter(value);
-        });
-    }
-    ngOnChanges({ query }) {
-        if (query) {
-            this.inputControl?.setValue(query.currentValue === this.trueVal, { emitEvent: false });
-        }
+    setCheckFilter(state) {
+        const { trueVal, falseVal } = this.getValuesConfig(this.column().getFilterConfig());
+        const value = state ? trueVal : falseVal;
+        this.setFilter(value);
     }
     resetFilter(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.inputControl.setValue(false, { emitEvent: false });
-        this.filterActive = false;
         this.setFilter(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CheckboxFilterComponent, isStandalone: true, selector: "ng2-checkbox-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-    <input type="checkbox" [formControl]="inputControl" [class]="inputClass()" class="form-control" />
-    @if (filterActive) {
-    <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CheckboxFilterComponent, isStandalone: true, selector: "ng2-checkbox-filter", usesInheritance: true, ngImport: i0, template: `
+    <div class="checkbox-filter-wrapper">
+      <input
+        [id]="column().id"
+        type="checkbox"
+        [ngModel]="currentState()"
+        (ngModelChange)="setCheckFilter($event)"
+        [class]="inputClass()"
+        class="form-control" />
+      <label [for]="column().id">{{ column().title }}</label>
+      @if (filterIsActive()) {
+        <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
+      }
+    </div>
+  `, isInline: true, styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'ng2-checkbox-filter',
-                    template: `
-    <input type="checkbox" [formControl]="inputControl" [class]="inputClass()" class="form-control" />
-    @if (filterActive) {
-    <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
-    }
-  `,
-                    standalone: true,
-                    imports: [FormsModule, ReactiveFormsModule],
-                }]
+            args: [{ selector: 'ng2-checkbox-filter', template: `
+    <div class="checkbox-filter-wrapper">
+      <input
+        [id]="column().id"
+        type="checkbox"
+        [ngModel]="currentState()"
+        (ngModelChange)="setCheckFilter($event)"
+        [class]="inputClass()"
+        class="form-control" />
+      <label [for]="column().id">{{ column().title }}</label>
+      @if (filterIsActive()) {
+        <a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule], styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"] }]
         }], ctorParameters: () => [] });
 
 class InputFilterComponent extends BaseFilterComponent {
@@ -1990,7 +1525,7 @@ class InputFilterComponent extends BaseFilterComponent {
       class="form-control"
       type="text"
       placeholder="{{ column().title }}" />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputFilterComponent, decorators: [{
             type: Component,
@@ -2004,7 +1539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
       type="text"
       placeholder="{{ column().title }}" />
   `,
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormsModule, ReactiveFormsModule],
                 }]
         }] });
@@ -2015,12 +1550,12 @@ class SelectFilterComponent extends BaseFilterComponent {
     <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
       <option value="">{{ column().getFilterConfig().selectText }}</option>
       @for (option of column().getFilterConfig().list; track $index) {
-      <option [value]="option.value">
-        {{ option.title }}
-      </option>
+        <option [value]="option.value">
+          {{ option.title }}
+        </option>
       }
     </select>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, decorators: [{
             type: Component,
@@ -2030,13 +1565,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
       <option value="">{{ column().getFilterConfig().selectText }}</option>
       @for (option of column().getFilterConfig().list; track $index) {
-      <option [value]="option.value">
-        {{ option.title }}
-      </option>
+        <option [value]="option.value">
+          {{ option.title }}
+        </option>
       }
     </select>
   `,
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [FormsModule, ReactiveFormsModule],
                 }]
         }] });
@@ -2051,65 +1586,73 @@ class BuildInFilterComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BuildInFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: BuildInFilterComponent, isStandalone: true, selector: "ng2-build-in-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: `
-    @switch (column().getFilterType()) { @case ('list') {
-    <ng2-select-filter
-      [query]="query()"
-      [class]="inputClass()"
-      [source]="source()"
-      [column]="column()"
-      (filter)="filter.emit($event)">
-    </ng2-select-filter>
-    } @case ('checkbox') {
-    <ng2-checkbox-filter
-      [query]="query()"
-      [source]="source()"
-      [class]="inputClass()"
-      [column]="column()"
-      (filter)="filter.emit($event)">
-    </ng2-checkbox-filter>
-    } @default {
-    <ng2-input-filter
-      [query]="query()"
-      [source]="source()"
-      [class]="inputClass()"
-      [column]="column()"
-      (filter)="filter.emit($event)">
-    </ng2-input-filter>
-    } }
-  `, isInline: true, dependencies: [{ kind: "component", type: SelectFilterComponent, selector: "ng2-select-filter" }, { kind: "component", type: CheckboxFilterComponent, selector: "ng2-checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "ng2-input-filter" }] }); }
+    @switch (column().getFilterType()) {
+      @case ('list') {
+        <ng2-select-filter
+          [query]="query()"
+          [class]="inputClass()"
+          [source]="source()"
+          [column]="column()"
+          (filter)="filter.emit($event)">
+        </ng2-select-filter>
+      }
+      @case ('checkbox') {
+        <ng2-checkbox-filter
+          [query]="query()"
+          [source]="source()"
+          [class]="inputClass()"
+          [column]="column()"
+          (filter)="filter.emit($event)">
+        </ng2-checkbox-filter>
+      }
+      @default {
+        <ng2-input-filter
+          [query]="query()"
+          [source]="source()"
+          [class]="inputClass()"
+          [column]="column()"
+          (filter)="filter.emit($event)">
+        </ng2-input-filter>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: SelectFilterComponent, selector: "ng2-select-filter" }, { kind: "component", type: CheckboxFilterComponent, selector: "ng2-checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "ng2-input-filter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: BuildInFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-build-in-table-filter',
                     template: `
-    @switch (column().getFilterType()) { @case ('list') {
-    <ng2-select-filter
-      [query]="query()"
-      [class]="inputClass()"
-      [source]="source()"
-      [column]="column()"
-      (filter)="filter.emit($event)">
-    </ng2-select-filter>
-    } @case ('checkbox') {
-    <ng2-checkbox-filter
-      [query]="query()"
-      [source]="source()"
-      [class]="inputClass()"
-      [column]="column()"
-      (filter)="filter.emit($event)">
-    </ng2-checkbox-filter>
-    } @default {
-    <ng2-input-filter
-      [query]="query()"
-      [source]="source()"
-      [class]="inputClass()"
-      [column]="column()"
-      (filter)="filter.emit($event)">
-    </ng2-input-filter>
-    } }
+    @switch (column().getFilterType()) {
+      @case ('list') {
+        <ng2-select-filter
+          [query]="query()"
+          [class]="inputClass()"
+          [source]="source()"
+          [column]="column()"
+          (filter)="filter.emit($event)">
+        </ng2-select-filter>
+      }
+      @case ('checkbox') {
+        <ng2-checkbox-filter
+          [query]="query()"
+          [source]="source()"
+          [class]="inputClass()"
+          [column]="column()"
+          (filter)="filter.emit($event)">
+        </ng2-checkbox-filter>
+      }
+      @default {
+        <ng2-input-filter
+          [query]="query()"
+          [source]="source()"
+          [class]="inputClass()"
+          [column]="column()"
+          (filter)="filter.emit($event)">
+        </ng2-input-filter>
+      }
+    }
   `,
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [SelectFilterComponent, CheckboxFilterComponent, InputFilterComponent],
                 }]
         }] });
@@ -2155,14 +1698,14 @@ class CustomFilterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CustomFilterComponent, isStandalone: true, selector: "ng2-custom-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CustomFilterComponent, isStandalone: true, selector: "ng2-custom-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-custom-table-filter',
                     template: `<ng-template #dynamicTarget></ng-template>`,
-                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }], propDecorators: { dynamicTarget: [{
                 type: ViewChild,
@@ -2171,540 +1714,685 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class FilterComponent {
     constructor() {
-        this.query = signal('');
+        this.query = computed(() => {
+            const columnFilter = this.source()
+                .getFilters()
+                .find((filter) => filter.field === this.column().id);
+            return columnFilter?.search ?? null;
+        });
         this.column = input.required();
         this.source = input.required();
         this.inputClass = input('');
-        this.destroyRef = inject(DestroyRef);
     }
-    ngOnInit() {
-        this.source()
-            .onChanged()
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(({ filters }) => {
-            if (!filters.length) {
-                return;
+    onFilter(query) {
+        this.source().addFilter({
+            field: this.column().id,
+            search: query,
+            filter: this.column().filterFunction,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterComponent, isStandalone: true, selector: "ng2-smart-table-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (column().isFilterable) {
+      <div class="ng2-smart-filter">
+        @switch (column().getFilterType()) {
+          @case ('custom') {
+            <ng2-custom-table-filter
+              [query]="query()"
+              [column]="column()"
+              [source]="source()"
+              [inputClass]="inputClass()"
+              (filter)="onFilter($event)">
+            </ng2-custom-table-filter>
+          }
+          @default {
+            <ng2-build-in-table-filter
+              [query]="query()"
+              [column]="column()"
+              [source]="source()"
+              [inputClass]="inputClass()"
+              (filter)="onFilter($event)">
+            </ng2-build-in-table-filter>
+          }
+        }
+      </div>
+    }
+  `, isInline: true, 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"], dependencies: [{ kind: "component", type: CustomFilterComponent, selector: "ng2-custom-table-filter", inputs: ["query", "inputClass", "source", "column"], outputs: ["filter"] }, { kind: "component", type: BuildInFilterComponent, selector: "ng2-build-in-table-filter", inputs: ["query", "inputClass", "source", "column"], outputs: ["filter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng2-smart-table-filter', template: `
+    @if (column().isFilterable) {
+      <div class="ng2-smart-filter">
+        @switch (column().getFilterType()) {
+          @case ('custom') {
+            <ng2-custom-table-filter
+              [query]="query()"
+              [column]="column()"
+              [source]="source()"
+              [inputClass]="inputClass()"
+              (filter)="onFilter($event)">
+            </ng2-custom-table-filter>
+          }
+          @default {
+            <ng2-build-in-table-filter
+              [query]="query()"
+              [column]="column()"
+              [source]="source()"
+              [inputClass]="inputClass()"
+              (filter)="onFilter($event)">
+            </ng2-build-in-table-filter>
+          }
+        }
+      </div>
+    }
+  `, 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 TheadFiltersRowComponent {
+    constructor() {
+        this.grid = input.required();
+        this.source = input.required();
+        this.withoutCreateButton = input(false);
+        this.create = output();
+        this.filterInputClass = computed(() => {
+            const filterOptions = this.grid().settings()?.filter;
+            if (!filterOptions) {
+                return '';
             }
-            const columnFilter = filters.find((filter) => filter.field === this.column().id);
-            if (!columnFilter) {
-                return;
+            return filterOptions.inputClass || '';
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFiltersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, withoutCreateButton: { classPropertyName: "withoutCreateButton", publicName: "withoutCreateButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
+    @if (grid().isMultiSelectVisible()) {
+      <th></th>
+    }
+    @if (grid().actionIsOnLeft() && grid().isActionsVisible() && !withoutCreateButton()) {
+      <th ng2-st-add-button [grid]="grid()" (create)="create.emit()"></th>
+    }
+    @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
+      <th class="ng2-smart-th {{ column.id }}">
+        <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
+        </ng2-smart-table-filter>
+      </th>
+    }
+    @if (grid().actionIsOnRight() && grid().isActionsVisible() && !withoutCreateButton()) {
+      <th ng2-st-add-button [grid]="grid()" (create)="create.emit()"></th>
+    }
+  `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ng2-st-thead-filters-row]',
+                    template: `
+    @if (grid().isMultiSelectVisible()) {
+      <th></th>
+    }
+    @if (grid().actionIsOnLeft() && grid().isActionsVisible() && !withoutCreateButton()) {
+      <th ng2-st-add-button [grid]="grid()" (create)="create.emit()"></th>
+    }
+    @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
+      <th class="ng2-smart-th {{ column.id }}">
+        <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
+        </ng2-smart-table-filter>
+      </th>
+    }
+    @if (grid().actionIsOnRight() && grid().isActionsVisible() && !withoutCreateButton()) {
+      <th ng2-st-add-button [grid]="grid()" (create)="create.emit()"></th>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AddButtonComponent, FilterComponent],
+                }]
+        }] });
+
+class ActionsTitleComponent {
+    constructor() {
+        this.grid = input.required();
+        this.actionsColumnTitle = computed(() => {
+            const actions = this.grid().settings().actions;
+            if (!actions) {
+                return 'Actions';
+            }
+            return actions.columnTitle || 'Actions';
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: ActionsTitleComponent, isStandalone: true, selector: "[ng2-st-actions-title]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ng2-smart-actions" }, ngImport: i0, template: ` <div class="ng2-smart-title">{{ actionsColumnTitle() }}</div> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsTitleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ng2-st-actions-title]',
+                    template: ` <div class="ng2-smart-title">{{ actionsColumnTitle() }}</div> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'ng2-smart-actions',
+                    },
+                }]
+        }] });
+
+class CheckboxSelectAllComponent {
+    constructor() {
+        this.grid = input.required();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CheckboxSelectAllComponent, isStandalone: true, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected()" /> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ng2-st-checkbox-select-all]',
+                    template: ` <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected()" /> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormsModule],
+                }]
+        }] });
+
+class TheadTitlesRowComponent {
+    constructor() {
+        this.grid = input.required();
+        this.source = input.required();
+        this.selectAllRows = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows" }, ngImport: i0, template: `
+    @if (grid().isMultiSelectVisible()) {
+      <th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
+    }
+    @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
+      <th ng2-st-actions-title [grid]="grid()"></th>
+    }
+    @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
+      <th class="ng2-smart-th {{ column.id }}" [class]="column.class">
+        <ng2-st-column-title [source]="source()" [column]="column"></ng2-st-column-title>
+      </th>
+    }
+    @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
+      <th ng2-st-actions-title [grid]="grid()"></th>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[ng2-st-thead-titles-row]',
+                    template: `
+    @if (grid().isMultiSelectVisible()) {
+      <th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
+    }
+    @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
+      <th ng2-st-actions-title [grid]="grid()"></th>
+    }
+    @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
+      <th class="ng2-smart-th {{ column.id }}" [class]="column.class">
+        <ng2-st-column-title [source]="source()" [column]="column"></ng2-st-column-title>
+      </th>
+    }
+    @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
+      <th ng2-st-actions-title [grid]="grid()"></th>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CheckboxSelectAllComponent, ActionsTitleComponent, ColumnTitleComponent],
+                }]
+        }] });
+
+class Ng2SmartTableTheadComponent {
+    constructor() {
+        this.grid = input.required();
+        this.source = input.required();
+        this.isMobileView = input(false);
+        this.selectAllRows = output();
+        this.create = output();
+        this.isHideHeader = computed(() => {
+            return this.grid().settings()?.hideHeader || false;
+        });
+        this.isHideSubHeader = computed(() => {
+            return this.grid().settings()?.hideSubHeader || false;
+        });
+        this.columnsWithSort = computed(() => this.grid()
+            .dataSet.getColumns()
+            .filter((column) => column.isSortable));
+        this.currentSortConfig = computed(() => this.source().getSort());
+        this.dropdown = signal(null);
+    }
+    toggleDropdown(type) {
+        this.dropdown.update((value) => {
+            if (value === type) {
+                return null;
             }
-            this.query.set(columnFilter.search);
+            return type;
+        });
+    }
+    clearAllFilters() {
+        this.source().setFilters([]);
+    }
+    sortByColumn(column) {
+        const sort = this.currentSortConfig();
+        const { id: field, title } = column || { id: sort.field, title: sort.title };
+        const direction = field === sort.field ? (sort.direction === 'asc' ? 'desc' : 'asc') : 'asc';
+        this.source().setSort({
+            field,
+            title,
+            direction: direction,
+        });
+        this.dropdown.set(null);
+    }
+    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        <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          <button\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        </div>\n        <div class=\"header-actions\">\n          <button class=\"filter-toggle\" (click)=\"toggleDropdown('filters')\" 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        </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          @if (dropdown() === 'filters') {\n          <button type=\"button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n            reset all\n          </button>\n        } @else {\n          <p></p>\n        }\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          @if (dropdown() === 'sort') {\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          }\n          @if (dropdown() === 'filters') {\n            <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\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<!-- Template for filters row to be used in mobile dialog -->\n<ng-template #filtersRow>\n  <tr\n    ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\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}tr.mobile-header-bottom-row{position:relative}tr.mobile-header-bottom-row .dropdown{position:absolute;opacity:0;pointer-events:none;top:1rem;left:50%;translate:-50%;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--table-header-dropdown-background, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px rgba(215, 215, 215, .568627451));z-index:10;max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto;transition:opacity .3s ease}tr.mobile-header-bottom-row .dialog-active .dropdown{opacity:1;pointer-events:all}tr.mobile-header-bottom-row .dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}tr.mobile-header-bottom-row .dropdown-content{display:flex;flex-direction:column}tr.mobile-header-bottom-row .dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}tr.mobile-header-bottom-row .dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--table-border-primary, #d5d5d5)}tr.mobile-header-bottom-row .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}tr.mobile-header-bottom-row .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}tr.mobile-header-bottom-row .close-dialog-button:after,tr.mobile-header-bottom-row .close-dialog-button:before{content:\"\";display:block;background-color:var(--table-header-dropdown-close-button-color, #000);height:2px;width:1rem;border-radius:2px}tr.mobile-header-bottom-row .close-dialog-button:before{rotate:45deg}tr.mobile-header-bottom-row .close-dialog-button:after{position:absolute;rotate:-45deg}.overlay{position:fixed;background:var(--table-header-dropdown-overlay-background, rgba(203, 203, 203, .3254901961));inset:0;z-index:-20}.dialog-active .overlay{z-index:2}.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: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source", "withoutCreateButton"], outputs: ["create"] }, { 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: Ng2SmartTableTheadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: '[ng2-st-thead]', imports: [
+                        TheadTitlesRowComponent,
+                        AddButtonComponent,
+                        ColumnTitleComponent,
+                        TheadFiltersRowComponent,
+                        NgTemplateOutlet,
+                    ], 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        <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          <button\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        </div>\n        <div class=\"header-actions\">\n          <button class=\"filter-toggle\" (click)=\"toggleDropdown('filters')\" 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        </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          @if (dropdown() === 'filters') {\n          <button type=\"button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n            reset all\n          </button>\n        } @else {\n          <p></p>\n        }\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          @if (dropdown() === 'sort') {\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          }\n          @if (dropdown() === 'filters') {\n            <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\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<!-- Template for filters row to be used in mobile dialog -->\n<ng-template #filtersRow>\n  <tr\n    ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\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}tr.mobile-header-bottom-row{position:relative}tr.mobile-header-bottom-row .dropdown{position:absolute;opacity:0;pointer-events:none;top:1rem;left:50%;translate:-50%;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--table-header-dropdown-background, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px rgba(215, 215, 215, .568627451));z-index:10;max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto;transition:opacity .3s ease}tr.mobile-header-bottom-row .dialog-active .dropdown{opacity:1;pointer-events:all}tr.mobile-header-bottom-row .dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}tr.mobile-header-bottom-row .dropdown-content{display:flex;flex-direction:column}tr.mobile-header-bottom-row .dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}tr.mobile-header-bottom-row .dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--table-border-primary, #d5d5d5)}tr.mobile-header-bottom-row .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}tr.mobile-header-bottom-row .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}tr.mobile-header-bottom-row .close-dialog-button:after,tr.mobile-header-bottom-row .close-dialog-button:before{content:\"\";display:block;background-color:var(--table-header-dropdown-close-button-color, #000);height:2px;width:1rem;border-radius:2px}tr.mobile-header-bottom-row .close-dialog-button:before{rotate:45deg}tr.mobile-header-bottom-row .close-dialog-button:after{position:absolute;rotate:-45deg}.overlay{position:fixed;background:var(--table-header-dropdown-overlay-background, rgba(203, 203, 203, .3254901961));inset:0;z-index:-20}.dialog-active .overlay{z-index:2}.dropdown{z-index:1}\n"] }]
+        }] });
+
+class DataSet {
+    constructor(data = [], columnSettings, editorInputClass) {
+        this.columnSettings = columnSettings;
+        this.editorInputClass = editorInputClass;
+        this.data = signal([]);
+        this.columns = signal([]);
+        this.rows = signal([]);
+        this.selectedRowsData = [];
+        this.getColumns = computed(() => this.columns());
+        this.getVisibleColumns = computed(() => this.columns().filter((column) => !column.hide));
+        this.getRows = computed(() => {
+            return this.rows();
+        });
+        this.isAllSelected = computed(() => this.rows().every((row) => row.isSelected()));
+        this.createColumns(columnSettings);
+        this.setData(data);
+        this.createNewRow();
+    }
+    setData(data) {
+        this.data.set(data);
+        this.createRows();
+    }
+    setColumnsConfig(columnSettings) {
+        this.columnSettings = columnSettings;
+        this.createColumns(columnSettings);
+        this.createRows();
+    }
+    findRowByData(data) {
+        return this.rows().find((row) => isObjectsIdentical(row.rowData, data));
+    }
+    setSelectAll(state) {
+        this.rows().forEach((row) => {
+            row.isSelected.set(state);
+            this.storeSelectedRow(row);
+        });
+    }
+    resetAllSelection() {
+        this.rows().forEach((row) => {
+            row.isSelected.set(false);
         });
+        // we need to clear selectedRow field because no one row selected
+        this.selectedRowsData = [];
+    }
+    selectRow(row, state) {
+        row.isSelected.set(state);
+        this.storeSelectedRow(row);
+    }
+    multipleSelectRow(row) {
+        row.isSelected.set(!row.isSelected());
+        this.storeSelectedRow(row);
+        return row;
+    }
+    getSelectedRowsData() {
+        return this.selectedRowsData;
+    }
+    createNewRow() {
+        this.newRow = new Row(-1, {}, this.getColumns());
+        this.newRow.isInEditing.set(true);
+    }
+    /**
+     * Create columns by mapping from the settings
+     * @param settings
+     * @private
+     */
+    createColumns(columnsParams) {
+        const columns = columnsParams.map((params) => new Column(params.key, params, this));
+        this.columns.set(columns);
     }
-    onFilter(query) {
-        this.source().addFilter({
-            field: this.column().id,
-            search: query,
-            filter: this.column().filterFunction,
+    /**
+     * Create rows based on current data prepared in data source
+     * @private
+     */
+    createRows() {
+        const rows = this.data().map((el, index) => {
+            const row = new Row(index, el, this.getColumns());
+            row.isSelected.set(this.isSelectedHasRow(el));
+            return row;
         });
+        this.rows.set(rows);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterComponent, isStandalone: true, selector: "ng2-smart-table-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    @if (column().isFilterable) {
-    <div class="ng2-smart-filter">
-      @switch (column().getFilterType()) { @case ('custom') {
-      <ng2-custom-table-filter
-        [query]="query()"
-        [column]="column()"
-        [source]="source()"
-        [inputClass]="inputClass()"
-        (filter)="onFilter($event)">
-      </ng2-custom-table-filter>
-      } @default {
-      <ng2-build-in-table-filter
-        [query]="query()"
-        [column]="column()"
-        [source]="source()"
-        [inputClass]="inputClass()"
-        (filter)="onFilter($event)">
-      </ng2-build-in-table-filter>
-      } }
-    </div>
+    isSelectedHasRow(data) {
+        return this.selectedRowsData.some((rowData) => isObjectsIdentical(rowData, data));
     }
-  `, isInline: true, 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"], dependencies: [{ kind: "component", type: CustomFilterComponent, selector: "ng2-custom-table-filter", inputs: ["query", "inputClass", "source", "column"], outputs: ["filter"] }, { kind: "component", type: BuildInFilterComponent, selector: "ng2-build-in-table-filter", inputs: ["query", "inputClass", "source", "column"], outputs: ["filter"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng2-smart-table-filter', template: `
-    @if (column().isFilterable) {
-    <div class="ng2-smart-filter">
-      @switch (column().getFilterType()) { @case ('custom') {
-      <ng2-custom-table-filter
-        [query]="query()"
-        [column]="column()"
-        [source]="source()"
-        [inputClass]="inputClass()"
-        (filter)="onFilter($event)">
-      </ng2-custom-table-filter>
-      } @default {
-      <ng2-build-in-table-filter
-        [query]="query()"
-        [column]="column()"
-        [source]="source()"
-        [inputClass]="inputClass()"
-        (filter)="onFilter($event)">
-      </ng2-build-in-table-filter>
-      } }
-    </div>
+    storeSelectedRow(row) {
+        if (row.isSelected()) {
+            if (this.isSelectedHasRow(row.rowData)) {
+                //check if row already in selected array to prevent duplicate
+                return;
+            }
+            this.selectedRowsData.push(row.rowData);
+        }
+        else {
+            const index = this.selectedRowsData.findIndex((rowData) => isObjectsIdentical(rowData, row));
+            this.selectedRowsData.splice(index, 1);
+        }
     }
-  `, standalone: true, 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 {
-    constructor() {
-        this.grid = input.required();
-        this.source = input.required();
-        this.create = output();
-        this.isActionAdd = computed(() => {
-            const actions = this.grid().settings().actions;
-            if (!actions) {
+class Grid {
+    constructor(source, settings) {
+        this.currentColumnsSortState = [];
+        this.settings = signal({});
+        this.createFormShown = signal(false);
+        this.isMultiSelectVisible = computed(() => {
+            return this.settings().selectMode === 'multi';
+        });
+        this.isActionsVisible = computed(() => {
+            const actions = this.settings().actions;
+            if (!actions)
                 return false;
-            }
-            return !!actions.add;
+            return actions.edit || actions.delete || !!actions?.custom?.length;
         });
-        this.addNewButtonContent = computed(() => {
-            const addParams = this.grid().settings()?.add;
-            if (!addParams) {
-                return 'Add New';
-            }
-            return addParams?.addButtonContent || 'Add New';
+        this.actionIsOnLeft = computed(() => {
+            return (this.settings().actionsPosition || 'left') === 'left';
+        });
+        this.actionIsOnRight = computed(() => {
+            return this.settings().actionsPosition === 'right';
         });
+        this.setSource(source, settings);
+        this.setSettings(settings);
     }
-    onAdd(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        if (this.grid().getSetting('mode') === 'external') {
-            this.create.emit({
-                source: this.source(),
-            });
+    setColumnsSortedEmitter(emitter) {
+        this.columnsSortedEmitter = emitter;
+    }
+    detach() {
+        if (this.sourceOnChangedSubscription) {
+            this.sourceOnChangedSubscription.unsubscribe();
         }
-        else {
-            this.grid().createFormShown = true;
+        if (this.sourceOnUpdatedSubscription) {
+            this.sourceOnUpdatedSubscription.unsubscribe();
         }
     }
-    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 }, source: { classPropertyName: "source", publicName: "source", 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)="onAdd($event)"></a>
+    getNewRow() {
+        return this.dataSet.newRow;
     }
-  `, isInline: true }); }
-}
-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)="onAdd($event)"></a>
+    setSettings(settings) {
+        this.updateSettingsAndDataSet(settings);
+        if (settings.columnSort) {
+            this.setColumnsSortState(settings.columns);
+        }
     }
-  `,
-                    host: {
-                        class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
-                    },
-                    standalone: true,
-                }]
-        }] });
-
-class TheadFiltersRowComponent {
-    constructor() {
-        this.grid = input.required();
-        this.source = input.required();
-        this.create = output();
-        this.filterInputClass = computed(() => {
-            const filterOptions = this.grid().settings()?.filter;
-            if (!filterOptions) {
-                return '';
-            }
-            return filterOptions.inputClass || '';
-        });
+    getDataSet() {
+        return this.dataSet;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFiltersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
-    @if (grid().isMultiSelectVisible()) {
-    <th></th>
-    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <th ng2-st-add-button [source]="source()" [grid]="grid()" (create)="create.emit($event)"></th>
-    } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
-    <th class="ng2-smart-th {{ column.id }}">
-      <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
-      </ng2-smart-table-filter>
-    </th>
-    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <th ng2-st-add-button [grid]="grid()" [source]="source()" (create)="create.emit($event)"></th>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ng2-st-thead-filters-row]',
-                    template: `
-    @if (grid().isMultiSelectVisible()) {
-    <th></th>
-    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <th ng2-st-add-button [source]="source()" [grid]="grid()" (create)="create.emit($event)"></th>
-    } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
-    <th class="ng2-smart-th {{ column.id }}">
-      <ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="filterInputClass()">
-      </ng2-smart-table-filter>
-    </th>
-    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <th ng2-st-add-button [grid]="grid()" [source]="source()" (create)="create.emit($event)"></th>
+    getSetting(name, defaultValue) {
+        return getDeepFromObject(this.settings(), name, defaultValue);
     }
-  `,
-                    standalone: true,
-                    imports: [AddButtonComponent, FilterComponent],
-                }]
-        }] });
-
-class ActionsComponent {
-    constructor() {
-        this.grid = input.required();
-        this.create = output();
-        this.createButtonContent = computed(() => {
-            const addOptions = this.grid().settings().add;
-            if (!addOptions) {
-                return "Create";
-            }
-            return addOptions?.createButtonContent || "Create";
-        });
-        this.cancelButtonContent = computed(() => {
-            const addOptions = this.grid().settings().add;
-            if (!addOptions) {
-                return "Cancel";
-            }
-            return addOptions?.cancelButtonContent || "Cancel";
+    selectRow(row, state) {
+        this.dataSet.selectRow(row, state);
+    }
+    multipleSelectRow(row) {
+        this.dataSet.multipleSelectRow(row);
+    }
+    edit(row) {
+        row.isInEditing.set(true);
+    }
+    create(row, confirmEmitter) {
+        row.pending.set(true);
+        const deferred = new Deferred();
+        deferred.promise
+            .then((newData) => {
+            row.pending.set(false);
+            newData = newData || row.getNewData();
+            this.source.prepend(newData).then(() => {
+                this.createFormShown.set(false);
+                this.dataSet.createNewRow();
+            });
+        })
+            .catch(() => {
+            row.pending.set(false);
         });
+        if (this.getSetting('add.confirmCreate', false)) {
+            confirmEmitter.emit({
+                newData: row.getNewData(),
+                source: this.source,
+                confirm: deferred,
+            });
+        }
+        else {
+            deferred.resolve();
+            row.pending.set(false);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: ActionsComponent, isStandalone: true, selector: "ng2-st-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
-    <a
-      href="#"
-      class="ng2-smart-action ng2-smart-action-add-create"
-      [innerHTML]="createButtonContent()"
-      (click)="$event.preventDefault(); create.emit($event)"
-    ></a>
-    <a
-      href="#"
-      class="ng2-smart-action ng2-smart-action-add-cancel"
-      [innerHTML]="cancelButtonContent()"
-      (click)="$event.preventDefault(); grid().createFormShown = false"
-    ></a>
-  `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "ng2-st-actions",
-                    template: `
-    <a
-      href="#"
-      class="ng2-smart-action ng2-smart-action-add-create"
-      [innerHTML]="createButtonContent()"
-      (click)="$event.preventDefault(); create.emit($event)"
-    ></a>
-    <a
-      href="#"
-      class="ng2-smart-action ng2-smart-action-add-cancel"
-      [innerHTML]="cancelButtonContent()"
-      (click)="$event.preventDefault(); grid().createFormShown = false"
-    ></a>
-  `,
-                    standalone: true,
-                }]
-        }] });
-
-class TheadFormRowComponent {
-    constructor() {
-        this.grid = input.required();
-        this.create = output();
-        this.addInputClass = computed(() => {
-            const addOptions = this.grid().settings()?.add;
-            if (!addOptions) {
-                return '';
-            }
-            return addOptions.inputClass || '';
+    save(row, confirmEmitter) {
+        row.pending.set(true);
+        const deferred = new Deferred();
+        deferred.promise
+            .then((newData) => {
+            row.pending.set(false);
+            newData = newData || row.getNewData();
+            this.source.update(row.rowData, newData).then(() => {
+                row.isInEditing.set(false);
+            });
+        })
+            .catch(() => {
+            row.pending.set(false);
+            row.isInEditing.set(false);
         });
+        if (this.getSetting('edit.confirmSave', false)) {
+            confirmEmitter.emit({
+                data: row.rowData,
+                newData: row.getNewData(),
+                source: this.source,
+                confirm: deferred,
+            });
+        }
+        else {
+            deferred.resolve();
+            row.pending.set(false);
+        }
     }
-    onCreate(event) {
-        event.stopPropagation();
-        this.grid().create(this.grid().getNewRow(), this.createConfirm);
+    delete(row, confirmEmitter) {
+        row.pending.set(true);
+        const deferred = new Deferred();
+        deferred.promise
+            .then(() => {
+            row.pending.set(false);
+            this.source.remove(row.rowData);
+        })
+            .catch(() => {
+            row.pending.set(false);
+            // doing nothing
+        });
+        if (this.getSetting('delete.confirmDelete', true)) {
+            confirmEmitter.emit({
+                data: row.rowData,
+                source: this.source,
+                confirm: deferred,
+            });
+        }
+        else {
+            deferred.resolve(null);
+            row.pending.set(false);
+        }
+        if (row.isSelected()) {
+            this.dataSet.selectRow(row, false);
+        }
     }
-    getVisibleCells() {
-        return (this.grid().getNewRow().cells() || []).filter((cell) => !cell.getColumn().hide);
+    processDataChange(event) {
+        if (event.action === 'load') {
+            this.dataSet.resetAllSelection();
+        }
+        if (event.action === 'update') {
+            const changedRow = this.dataSet.findRowByData(event.oldItem);
+            if (changedRow) {
+                changedRow.setData(event.newItem || event.oldItem);
+            }
+            return;
+        }
+        this.dataSet.setData(event.elements);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFormRowComponent, isStandalone: true, selector: "[ng2-st-thead-form-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
-    @if (grid().isMultiSelectVisible()) {
-    <td></td>
-    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <td class="ng2-smart-actions">
-      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
-    </td>
-    } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
-    <td>
-      <ng2-smart-table-cell
-        [cell]="cell"
-        [inputClass]="addInputClass()"
-        [isInEditing]="grid().getNewRow().isInEditing()">
-      </ng2-smart-table-cell>
-    </td>
-    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <td class="ng2-smart-actions">
-      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
-    </td>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "inputClass", "isInEditing"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFormRowComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ng2-st-thead-form-row]',
-                    template: `
-    @if (grid().isMultiSelectVisible()) {
-    <td></td>
-    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <td class="ng2-smart-actions">
-      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
-    </td>
-    } @for (cell of getVisibleCells(); track cell.getId()+ $index) {
-    <td>
-      <ng2-smart-table-cell
-        [cell]="cell"
-        [inputClass]="addInputClass()"
-        [isInEditing]="grid().getNewRow().isInEditing()">
-      </ng2-smart-table-cell>
-    </td>
-    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <td class="ng2-smart-actions">
-      <ng2-st-actions [grid]="grid()" (create)="onCreate($event)"></ng2-st-actions>
-    </td>
+    prepareSource(source, initialSort, initialPaging) {
+        const preparedSource = source || new LocalDataSource();
+        if (initialSort && !source?.getSort().field) {
+            preparedSource.setSort(initialSort, false);
+        }
+        if (initialPaging && initialPaging?.display) {
+            preparedSource.pagingConf.update((old) => ({
+                ...old,
+                ...initialPaging,
+            }));
+        }
+        return preparedSource;
     }
-  `,
-                    standalone: true,
-                    imports: [ActionsComponent, CellComponent],
-                }]
-        }], propDecorators: { createConfirm: [{
-                type: Input
-            }] } });
-
-class ActionsTitleComponent {
-    constructor() {
-        this.grid = input.required();
-        this.actionsColumnTitle = computed(() => {
-            const actions = this.grid().settings().actions;
-            if (!actions) {
-                return "Actions";
-            }
-            return actions.columnTitle || "Actions";
-        });
+    getInitialSort(columns) {
+        if (!columns || !columns.length) {
+            return false;
+        }
+        const defaultSortColumn = columns?.find((column) => column.sortDirection);
+        if (!defaultSortColumn) {
+            return false;
+        }
+        return {
+            field: defaultSortColumn.key,
+            title: defaultSortColumn.title,
+            direction: defaultSortColumn.sortDirection || 'asc',
+            compare: defaultSortColumn.compareFunction,
+        };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: ActionsTitleComponent, isStandalone: true, selector: "[ng2-st-actions-title]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ng2-smart-actions" }, ngImport: i0, template: ` <div class="ng2-smart-title">{{ actionsColumnTitle() }}</div> `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "[ng2-st-actions-title]",
-                    template: ` <div class="ng2-smart-title">{{ actionsColumnTitle() }}</div> `,
-                    standalone: true,
-                    host: {
-                        class: "ng2-smart-actions",
-                    },
-                }]
-        }] });
-
-class CheckboxSelectAllComponent {
-    constructor() {
-        this.grid = input.required();
+    getSelectedRowsData() {
+        return this.dataSet.getSelectedRowsData();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CheckboxSelectAllComponent, isStandalone: true, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected()" />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "[ng2-st-checkbox-select-all]",
-                    template: `
-    <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected()" />
-  `,
-                    standalone: true,
-                    imports: [FormsModule],
-                }]
-        }] });
-
-class TitleComponent {
-    constructor() {
-        this.source = input.required();
-        this.column = input.required();
-        this.destroyRef = inject(DestroyRef);
-        this.currentSortDirection = signal('');
+    selectAllRows(status) {
+        this.dataSet.setSelectAll(status);
     }
-    ngOnInit() {
-        this.source()
-            .onChanged()
-            .pipe(map(({ sort }) => {
-            if (sort.field === this.column().id) {
-                return sort.direction;
+    updateSettingsAndDataSet(settings, emittedEvent = 'refresh') {
+        this.settings.set(settings);
+        if (this.dataSet) {
+            this.dataSet.setColumnsConfig(settings.columns);
+        }
+        else {
+            const editorInputClass = settings.edit ? settings.edit.inputClass || '' : '';
+            this.dataSet = new DataSet([], settings.columns, editorInputClass);
+        }
+        if (this.source) {
+            this.source.pagingConf.update((old) => ({
+                ...old,
+                display: this.getSetting('pager.display'),
+            }));
+            if (emittedEvent === 'columnRefresh') {
+                this.source.columnRefresh();
             }
             else {
-                return '';
+                this.source.refresh();
             }
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe(this.currentSortDirection.set);
-    }
-    _sort(event) {
-        event.preventDefault();
-        this.source().setSort({
-            field: this.column().id,
-            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: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TitleComponent, isStandalone: true, selector: "ng2-smart-table-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" [class]="currentSortDirection()">
-      {{ column().title }}
-    </a>
-    } @else {
-    <span class="ng2-smart-sort">{{ column().title }}</span>
+    setSource(source, settings) {
+        const initialSort = this.getInitialSort(settings?.columns);
+        this.source = this.prepareSource(source, initialSort, settings?.pager || false);
+        this.detach();
+        this.sourceOnChangedSubscription = this.source.onChanged().subscribe((changes) => this.processDataChange(changes));
     }
-  `, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TitleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng2-smart-table-title', template: `
-    @if (column().isSortable) {
-    <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort" [class]="currentSortDirection()">
-      {{ column().title }}
-    </a>
-    } @else {
-    <span class="ng2-smart-sort">{{ column().title }}</span>
+    // ------------------------------- column sort
+    async getSortedTableColumns(newState, columns) {
+        const sortedArray = [];
+        newState.forEach((item2) => {
+            const index = columns.findIndex((item1) => item1.key === item2.key && item1.title === item2.title);
+            if (index > -1) {
+                sortedArray.push({ ...columns[index], hide: !!item2.hide });
+            }
+        });
+        return Promise.resolve(sortedArray);
     }
-  `, standalone: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"] }]
-        }] });
-
-class ColumnTitleComponent {
-    constructor() {
-        this.source = input.required();
-        this.column = input.required();
+    async applyColumnsSortState(state, emitEvent = true) {
+        this.currentColumnsSortState = this.getMergedColumnStates(state);
+        this.updateSettingsAndDataSet({
+            ...this.settings(),
+            columns: await this.getSortedTableColumns(this.currentColumnsSortState, this.settings()?.columns),
+        }, 'columnRefresh');
+        if (this.columnStateStorageKey) {
+            setLocalStorage(this.columnStateStorageKey, this.currentColumnsSortState);
+        }
+        if (emitEvent) {
+            this.columnsSortedEmitter.emit(this.currentColumnsSortState);
+        }
     }
-    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.1.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: `
-    <div class="ng2-smart-title">
-      <ng2-smart-table-title [source]="source()" [column]="column()"></ng2-smart-table-title>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["source", "column"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ng2-st-column-title',
-                    template: `
-    <div class="ng2-smart-title">
-      <ng2-smart-table-title [source]="source()" [column]="column()"></ng2-smart-table-title>
-    </div>
-  `,
-                    standalone: true,
-                    imports: [TitleComponent],
-                }]
-        }] });
-
-class TheadTitlesRowComponent {
-    constructor() {
-        this.grid = input.required();
-        this.source = input.required();
-        this.selectAllRows = output();
+    setColumnsSortState(columns) {
+        const columnsState = this.getColumnsStateFromSettings(columns);
+        if (this.columnStateStorageKey) {
+            const storageState = getLocalStorage(this.columnStateStorageKey);
+            if (!storageState) {
+                this.currentColumnsSortState = columnsState;
+                setLocalStorage(this.columnStateStorageKey, columnsState);
+                return;
+            }
+            const merged = this.getMergedColumnStates(storageState, columnsState);
+            this.applyColumnsSortState(merged, false);
+            return;
+        }
+        this.applyColumnsSortState(columnsState, false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows" }, ngImport: i0, template: `
-    @if (grid().isMultiSelectVisible()) {
-    <th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
-    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-
-    <th ng2-st-actions-title [grid]="grid()"></th>
-    } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
-    <th class="ng2-smart-th {{ column.id }}" [class]="column.class" [style.width]="column.width">
-      <ng2-st-column-title [source]="source()" [column]="column"></ng2-st-column-title>
-    </th>
-    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <th ng2-st-actions-title [grid]="grid()"></th>
-    }
-  `, isInline: true, dependencies: [{ kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ng2-st-thead-titles-row]',
-                    template: `
-    @if (grid().isMultiSelectVisible()) {
-    <th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
-    } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-
-    <th ng2-st-actions-title [grid]="grid()"></th>
-    } @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
-    <th class="ng2-smart-th {{ column.id }}" [class]="column.class" [style.width]="column.width">
-      <ng2-st-column-title [source]="source()" [column]="column"></ng2-st-column-title>
-    </th>
-    } @if (grid().actionIsOnRight() && grid().isActionsVisible()) {
-    <th ng2-st-actions-title [grid]="grid()"></th>
+    getColumnsStateFromSettings(columns) {
+        return (columns || this.settings().columns || []).map((column) => ({
+            key: column.key,
+            title: column.title,
+            hide: !!column.hide,
+            moveDisabled: !!column.moveDisabled,
+        }));
     }
-  `,
-                    standalone: true,
-                    imports: [CheckboxSelectAllComponent, ActionsTitleComponent, ColumnTitleComponent],
-                }]
-        }] });
-
-class Ng2SmartTableTheadComponent {
-    constructor() {
-        this.grid = input.required();
-        this.source = input.required();
-        this.selectAllRows = output();
-        this.create = output();
-        this.isHideHeader = computed(() => {
-            return this.grid().settings()?.hideHeader || false;
+    getMergedColumnStates(newState, columnsState) {
+        const columnsSettings = columnsState || this.getColumnsStateFromSettings();
+        // merge new columns state with state from storage
+        const filtered = [];
+        newState.forEach((state) => {
+            const fined = columnsSettings.find((column) => column.title === state.title && column.key === state.key);
+            if (fined) {
+                filtered.push({ ...fined, hide: fined.moveDisabled ? fined.hide : state.hide });
+            }
         });
-        this.isHideSubHeader = computed(() => {
-            return this.grid().settings()?.hideSubHeader || false;
+        // find new columns witch not exist in storage state
+        const newColumns = columnsSettings.filter((state) => {
+            return !filtered.some((column) => column.title === state.title && column.key === state.key);
         });
+        return [...filtered, ...newColumns];
+    }
+    get columnStateStorageKey() {
+        return this.settings().columnSortStorageKey;
     }
-    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 }, createConfirm: { classPropertyName: "createConfirm", publicName: "createConfirm", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (!isHideHeader()) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (selectAllRows)=\"selectAllRows.emit()\">\n  </tr>\n}\n\n@if (!isHideSubHeader()) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (create)=\"create.emit($event)\">\n  </tr>\n}\n\n@if (grid().createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid()\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n", dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["selectAllRows"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "createConfirm"], outputs: ["create"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
-            type: Component,
-            args: [{ selector: '[ng2-st-thead]', standalone: true, imports: [TheadTitlesRowComponent, TheadFiltersRowComponent, TheadFormRowComponent], template: "@if (!isHideHeader()) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (selectAllRows)=\"selectAllRows.emit()\">\n  </tr>\n}\n\n@if (!isHideSubHeader()) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    (create)=\"create.emit($event)\">\n  </tr>\n}\n\n@if (grid().createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid()\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n" }]
-        }], propDecorators: { createConfirm: [{
-                type: Input
-            }] } });
 
 class Ng2SmartTableComponent {
-    constructor() {
+    constructor(elementRef, ngZone) {
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
         this.source = input.required();
         this.settings = input.required();
         this.multiRowSelect = output();
         this.rowClicked = output();
         this.columnsSorted = output();
-        this.delete = output();
+        this.deleteEmitter = output();
+        this.deleteConfirm = output();
         this.edit = output();
+        this.editConfirm = output();
         this.editCancel = output();
         this.create = output();
-        this.custom = output();
-        this.deleteConfirm = output();
-        this.editConfirm = output();
         this.createConfirm = output();
+        this.custom = output();
         this.tableClass = computed(() => {
             return this.settings().attr?.class || '';
         });
@@ -2716,8 +2404,18 @@ class Ng2SmartTableComponent {
             return pager ? pager.display : false;
         });
         this.rowClassFunction = computed(() => {
-            return this.settings().rowClassFunction || (() => '');
+            const settings = this.settings();
+            return settings.rowClassFunction ? (rowData) => settings.rowClassFunction(rowData) : () => '';
+        });
+        this.isMobileView = signal(false);
+        this.tableWidthMobileBreakpoint = computed(() => {
+            return this.settings().tableWidthMobileBreakpoint;
         });
+        this.isExternalMode = computed(() => {
+            return this.grid.settings().mode === 'external';
+        });
+        this.resizeObserver = null;
+        this.resizeDebounceTimer = null;
     }
     ngOnChanges({ settings }) {
         if (this.grid) {
@@ -2729,8 +2427,12 @@ class Ng2SmartTableComponent {
             this.initGrid();
         }
     }
+    ngAfterViewInit() {
+        this.setupResizeObserver();
+    }
     ngOnDestroy() {
         this.grid.detach();
+        this.destroyResizeObserver();
     }
     multipleSelectRow(row) {
         this.grid.multipleSelectRow(row);
@@ -2745,29 +2447,105 @@ class Ng2SmartTableComponent {
     }
     emitUserRowClicked(row) {
         this.rowClicked.emit({
-            data: row ? row.getData() : null,
+            data: row ? row.rowData : null,
             source: this.source(),
         });
     }
+    customActionEmitted(event) {
+        this.custom.emit(event);
+    }
+    editEmitted(row) {
+        if (this.isExternalMode()) {
+            this.edit.emit({
+                data: row.rowData,
+                source: this.source(),
+            });
+            return;
+        }
+        row.isInEditing.set(true);
+    }
+    editConfirmed(row) {
+        this.grid.save(row, this.editConfirm);
+    }
+    editCanceled(row) {
+        this.editCancel.emit({ data: row.rowData, source: this.source() });
+    }
+    createEmitted() {
+        if (this.isExternalMode()) {
+            this.create.emit({ data: this.grid.getNewRow().getNewData(), source: this.source() });
+        }
+        else {
+            this.grid.createFormShown.set(true);
+        }
+    }
+    createConfirmed() {
+        this.grid.create(this.grid.getNewRow(), this.createConfirm);
+    }
+    deleEmitted(row) {
+        if (this.isExternalMode()) {
+            this.deleteEmitter.emit({
+                data: row.rowData,
+                source: this.source(),
+            });
+        }
+        else {
+            this.grid.delete(row, this.deleteConfirm);
+        }
+    }
     initGrid() {
         this.grid = new Grid(this.source(), this.settings());
         this.grid.setColumnsSortedEmitter(this.columnsSorted);
     }
     emitUserSelectRow(row) {
         this.multiRowSelect.emit({
-            data: row ? row.getData() : null,
+            data: row ? row.rowData : null,
             isSelected: row ? row.isSelected() : false,
             source: this.source(),
             selected: this.grid.dataSet.getSelectedRowsData(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, deps: [], 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", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [createConfirm]=\"createConfirm\"\n    (create)=\"create.emit($event)\"\n    (selectAllRows)=\"onSelectAllRows()\"\n  ></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [createConfirm]=\"createConfirm\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"\n  ></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n<ng2-smart-table-pager [source]=\"source()\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["selectAllRows", "create"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "createConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    setupResizeObserver() {
+        if (typeof ResizeObserver === 'undefined' || !this.tableWidthMobileBreakpoint()) {
+            return;
+        }
+        this.resizeObserver = new ResizeObserver((entries) => {
+            if (this.resizeDebounceTimer) {
+                clearTimeout(this.resizeDebounceTimer);
+            }
+            this.resizeDebounceTimer = setTimeout(() => {
+                this.ngZone.run(() => {
+                    for (const entry of entries) {
+                        const breakpoint = this.tableWidthMobileBreakpoint();
+                        if (breakpoint) {
+                            const containerWidth = entry.contentRect.width;
+                            this.isMobileView.set(containerWidth < breakpoint);
+                        }
+                    }
+                });
+            }, 20);
+        });
+        const hostElement = this.elementRef.nativeElement;
+        if (hostElement) {
+            this.resizeObserver.observe(hostElement);
+        }
+    }
+    destroyResizeObserver() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.resizeDebounceTimer) {
+            clearTimeout(this.resizeDebounceTimer);
+            this.resizeDebounceTimer = null;
+        }
+    }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-smart-table', standalone: true, imports: [Ng2SmartTableTheadComponent, Ng2SmartTableTbodyComponent, PagerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [createConfirm]=\"createConfirm\"\n    (create)=\"create.emit($event)\"\n    (selectAllRows)=\"onSelectAllRows()\"\n  ></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [createConfirm]=\"createConfirm\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"\n  ></tbody>\n</table>\n\n@if (isPagerDisplay()) {\n<ng2-smart-table-pager [source]=\"source()\">\n</ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\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%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }] });
 
 /**
  * Generated bundle index. Do not edit.