@den4ik92/ng2-smart-table 19.1.0 → 19.1.2

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

@@ -15,11 +15,11 @@ class DefaultEditor {
         this.inputClass = input("");
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: DefaultEditor, isStandalone: true, selector: "ng-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: DefaultEditor, isStandalone: true, selector: "ng2-default-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditor, decorators: [{
             type: Component,
-            args: [{ template: "" }]
+            args: [{ template: "", selector: 'ng2-default-editor-base-component' }]
         }] });
 
 class DefaultFilter {
@@ -39,11 +39,11 @@ class DefaultFilter {
         this.filter.emit(this.query);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: DefaultFilter, isStandalone: true, selector: "ng-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: false, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: DefaultFilter, isStandalone: true, selector: "ng2-default-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: false, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilter, decorators: [{
             type: Component,
-            args: [{ template: '' }]
+            args: [{ template: '', selector: 'ng2-default-base-filter-component' }]
         }], propDecorators: { query: [{
                 type: Input
             }] } });
@@ -195,11 +195,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: "ngx-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; 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; 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "ngx-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; 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], 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; 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 {
@@ -283,26 +283,25 @@ 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: "[smartTableColumnEditor]", 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": "buttclicked()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: "[smartTableColumnEditor]",
+                    selector: "[ng2SmartTableColumnEditor]",
                     host: {
                         "(click)": "buttclicked()",
                     },
                 }]
         }] });
 
-function prepareValue(value) { return value; }
 class Cell {
-    static { this.PREPARE = prepareValue; }
     constructor(value, row, column, dataSet) {
         this.value = value;
         this.row = row;
         this.column = column;
         this.dataSet = dataSet;
+        this.prepareValue = (value) => value;
         this.newValue = '';
         this.newValue = value;
     }
@@ -316,9 +315,12 @@ class Cell {
         return this.row;
     }
     getValue() {
-        const prepare = this.column.getValuePrepareFunction() || Cell.PREPARE;
+        const prepare = this.column.getValuePrepareFunction() || this.prepareValue;
         return prepare.call(null, this.value, this.row.getData(), this);
     }
+    getNotPrepareValue() {
+        return this.value;
+    }
     setValue(value) {
         this.newValue = value;
     }
@@ -594,7 +596,7 @@ function compareValues(direction, a, b) {
 }
 class LocalSorter {
     static 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]);
@@ -1164,11 +1166,11 @@ class EditCellDefaultComponent {
         this.inputClass = input('');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: EditCellDefaultComponent, isStandalone: true, selector: "ng-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: EditCellDefaultComponent, isStandalone: true, selector: "ng2-edit-cell-default-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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefaultComponent, decorators: [{
             type: Component,
-            args: [{ template: '' }]
+            args: [{ template: '', selector: 'ng2-edit-cell-default-base-component' }]
         }] });
 
 class CustomEditComponent extends EditCellDefaultComponent {
@@ -1196,12 +1198,12 @@ class CustomEditComponent extends EditCellDefaultComponent {
         }
     }
     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: "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "table-cell-custom-editor",
+                    selector: "ng2-table-cell-custom-editor",
                     template: ` <ng-template #dynamicTarget></ng-template> `,
                     standalone: true,
                 }]
@@ -1224,7 +1226,7 @@ class CheckboxEditorComponent extends DefaultEditor {
         this.cell().newValue = event.target.checked ? this.trueVal() : this.falseVal();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CheckboxEditorComponent, isStandalone: true, selector: "checkbox-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CheckboxEditorComponent, isStandalone: true, selector: "ng2-checkbox-editor", usesInheritance: true, ngImport: i0, template: `
     <input
       [class]="inputClass()"
       type="checkbox"
@@ -1240,7 +1242,7 @@ class CheckboxEditorComponent extends DefaultEditor {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "checkbox-editor", template: `
+            args: [{ selector: "ng2-checkbox-editor", template: `
     <input
       [class]="inputClass()"
       type="checkbox"
@@ -1260,7 +1262,7 @@ class InputEditorComponent extends DefaultEditor {
         super();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputEditorComponent, isStandalone: true, selector: "input-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputEditorComponent, isStandalone: true, selector: "ng2-input-editor", usesInheritance: true, ngImport: i0, template: `
     <input
       [class]="inputClass()"
       class="form-control"
@@ -1273,7 +1275,7 @@ class InputEditorComponent extends DefaultEditor {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "input-editor", template: `
+            args: [{ selector: "ng2-input-editor", template: `
     <input
       [class]="inputClass()"
       class="form-control"
@@ -1290,7 +1292,7 @@ class SelectEditorComponent extends DefaultEditor {
         super();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectEditorComponent, isStandalone: true, selector: "select-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectEditorComponent, isStandalone: true, selector: "ng2-select-editor", usesInheritance: true, ngImport: i0, template: `
     <select
       [class]="inputClass()"
       class="form-control"
@@ -1312,7 +1314,7 @@ class SelectEditorComponent extends DefaultEditor {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "select-editor",
+                    selector: "ng2-select-editor",
                     template: `
     <select
       [class]="inputClass()"
@@ -1341,7 +1343,7 @@ class TextareaEditorComponent extends DefaultEditor {
         super();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: TextareaEditorComponent, isStandalone: true, selector: "textarea-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: TextareaEditorComponent, isStandalone: true, selector: "ng2-textarea-editor", usesInheritance: true, ngImport: i0, template: `
     <textarea
       [class]="inputClass()"
       class="form-control"
@@ -1355,7 +1357,7 @@ class TextareaEditorComponent extends DefaultEditor {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "textarea-editor", template: `
+            args: [{ selector: "ng2-textarea-editor", template: `
     <textarea
       [class]="inputClass()"
       class="form-control"
@@ -1380,16 +1382,16 @@ class DefaultEditComponent extends EditCellDefaultComponent {
         return "text";
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultEditComponent, isStandalone: true, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </input-editor>\n  }\n}\n</div>", dependencies: [{ kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }, { kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultEditComponent, isStandalone: true, selector: "ng2-table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (getEditorType()) {\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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: "table-cell-default-editor", imports: [
+            args: [{ selector: "ng2-table-cell-default-editor", imports: [
                         SelectEditorComponent,
                         TextareaEditorComponent,
                         CheckboxEditorComponent,
                         InputEditorComponent,
-                    ], standalone: true, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell()\"\n        [inputClass]=\"inputClass()\">\n    </input-editor>\n  }\n}\n</div>" }]
+                    ], standalone: true, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n  @switch (getEditorType()) {\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>" }]
         }], ctorParameters: () => [] });
 
 class EditCellComponent {
@@ -1405,42 +1407,36 @@ class EditCellComponent {
         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: "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 }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div>
       @switch (getEditorType()) { @case ('custom') {
-      <table-cell-custom-editor
-        [cell]="cell()"
-        [inputClass]="inputClass()"
-      >
-      </table-cell-custom-editor>
+      <ng2-table-cell-custom-editor [cell]="cell()" [inputClass]="inputClass()">
+      </ng2-table-cell-custom-editor>
       } @default {
-      <table-cell-default-editor
+      <ng2-table-cell-default-editor
         [cell]="cell()"
         [inputClass]="inputClass()"
       >
-      </table-cell-default-editor>
+      </ng2-table-cell-default-editor>
       } }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "table-cell-custom-editor" }, { kind: "component", type: DefaultEditComponent, selector: "table-cell-default-editor" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "ng2-table-cell-custom-editor" }, { kind: "component", type: DefaultEditComponent, selector: "ng2-table-cell-default-editor" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "table-cell-edit-mode",
+                    selector: "ng2-table-cell-edit-mode",
                     template: `
     <div>
       @switch (getEditorType()) { @case ('custom') {
-      <table-cell-custom-editor
-        [cell]="cell()"
-        [inputClass]="inputClass()"
-      >
-      </table-cell-custom-editor>
+      <ng2-table-cell-custom-editor [cell]="cell()" [inputClass]="inputClass()">
+      </ng2-table-cell-custom-editor>
       } @default {
-      <table-cell-default-editor
+      <ng2-table-cell-default-editor
         [cell]="cell()"
         [inputClass]="inputClass()"
       >
-      </table-cell-default-editor>
+      </ng2-table-cell-default-editor>
       } }
     </div>
   `,
@@ -1454,7 +1450,7 @@ class CustomViewComponent {
         this.cell = input.required();
     }
     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: "custom-view-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ng-template
+    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() }
@@ -1464,7 +1460,7 @@ class CustomViewComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "custom-view-component",
+                    selector: "ng2-custom-view-component",
                     template: `<ng-template
     *ngComponentOutlet="
       cell().getColumn().renderComponent;
@@ -1481,27 +1477,27 @@ class ViewCellComponent {
         this.cell = input.required();
     }
     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: "table-cell-view-mode", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    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') {
-      <custom-view-component [cell]="cell()"></custom-view-component>
+      <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: "custom-view-component", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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: "table-cell-view-mode",
+                    selector: "ng2-table-cell-view-mode",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <div>
       @switch (cell().getColumn().type) { @case ('custom') {
-      <custom-view-component [cell]="cell()"></custom-view-component>
+      <ng2-custom-view-component [cell]="cell()"></ng2-custom-view-component>
       } @case ('html') {
       <div [innerHTML]="cell().getValue()"></div>
       } @default {
@@ -1523,15 +1519,15 @@ class CellComponent {
     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: `
     @if (!isInEditing()) {
-    <table-cell-view-mode [cell]="cell()"></table-cell-view-mode>
+    <ng2-table-cell-view-mode [cell]="cell()"></ng2-table-cell-view-mode>
     } @else {
-    <table-cell-edit-mode
+    <ng2-table-cell-edit-mode
       [cell]="cell()"
       [inputClass]="inputClass()"
     >
-    </table-cell-edit-mode>
+    </ng2-table-cell-edit-mode>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: ["cell"] }, { kind: "component", type: EditCellComponent, selector: "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", "inputClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
@@ -1539,13 +1535,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     selector: "ng2-smart-table-cell",
                     template: `
     @if (!isInEditing()) {
-    <table-cell-view-mode [cell]="cell()"></table-cell-view-mode>
+    <ng2-table-cell-view-mode [cell]="cell()"></ng2-table-cell-view-mode>
     } @else {
-    <table-cell-edit-mode
+    <ng2-table-cell-edit-mode
       [cell]="cell()"
       [inputClass]="inputClass()"
     >
-    </table-cell-edit-mode>
+    </ng2-table-cell-edit-mode>
     }
   `,
                     standalone: true,
@@ -1812,9 +1808,9 @@ class DataSet {
      * @param settings
      * @private
      */
-    createColumns(settings) {
-        settings.forEach((columnSettings) => {
-            this.columns.push(new Column(columnSettings.key, columnSettings, this));
+    createColumns(columnsParams) {
+        columnsParams.forEach((params) => {
+            this.columns.push(new Column(params.key, params, this));
         });
     }
     /**
@@ -2202,17 +2198,23 @@ class TbodyEditDeleteComponent {
         this.delete = output();
         this.isActionEdit = false;
         this.isActionDelete = false;
+        this.isExternalMode = false;
         this.editRowButtonContent = "Edit";
         this.deleteRowButtonContent = "Delete";
         effect(() => {
             const settings = this.grid().settings();
             const actions = settings.actions;
-            if (!actions)
-                return;
-            this.isActionDelete = !!actions.delete;
-            this.isActionEdit = !!actions.edit;
-            this.editRowButtonContent = settings.edit ? settings.edit.editButtonContent || "Edit" : "Edit";
-            this.deleteRowButtonContent = settings.delete ? settings.delete.deleteButtonContent || "Delete" : "Delete";
+            if (actions) {
+                this.isActionDelete = !!actions.delete;
+                this.isActionEdit = !!actions.edit;
+            }
+            this.isExternalMode = settings.mode === 'external';
+            this.editRowButtonContent = settings.edit
+                ? settings.edit.editButtonContent || "Edit"
+                : "Edit";
+            this.deleteRowButtonContent = settings.delete
+                ? settings.delete.deleteButtonContent || "Delete"
+                : "Delete";
             this.cdr.detectChanges();
         });
     }
@@ -2223,12 +2225,22 @@ class TbodyEditDeleteComponent {
             data: this.row().getData(),
             source: this.source,
         });
-        this.grid().edit(this.row());
+        if (!this.isExternalMode) {
+            this.grid().edit(this.row());
+        }
     }
     onDelete(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.grid().delete(this.row(), this.deleteConfirm());
+        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: `
@@ -2472,11 +2484,11 @@ class FilterDefault {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: FilterDefault, isStandalone: true, selector: "ng-component", 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 }, query: { classPropertyName: "query", publicName: "query", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: FilterDefault, isStandalone: true, selector: "ng2-filter-default-component", 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 }, query: { classPropertyName: "query", publicName: "query", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDefault, decorators: [{
             type: Component,
-            args: [{ template: '' }]
+            args: [{ template: '', selector: 'ng2-filter-default-component' }]
         }], propDecorators: { query: [{
                 type: Input
             }] } });
@@ -2508,12 +2520,12 @@ class CustomFilterComponent extends FilterDefault {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomFilterComponent, isStandalone: true, selector: "custom-table-filter", 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: CustomFilterComponent, isStandalone: true, selector: "ng2-custom-table-filter", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "custom-table-filter",
+                    selector: "ng2-custom-table-filter",
                     template: `<ng-template #dynamicTarget></ng-template>`,
                     standalone: true,
                 }]
@@ -2551,7 +2563,7 @@ class CheckboxFilterComponent extends DefaultFilter {
         this.setFilter();
     }
     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: "checkbox-filter", usesInheritance: true, ngImport: i0, template: `
+    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: `
     <input
       type="checkbox"
       [formControl]="inputControl"
@@ -2568,7 +2580,7 @@ class CheckboxFilterComponent extends DefaultFilter {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "checkbox-filter",
+                    selector: "ng2-checkbox-filter",
                     template: `
     <input
       type="checkbox"
@@ -2609,7 +2621,7 @@ class InputFilterComponent extends DefaultFilter {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputFilterComponent, isStandalone: true, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputFilterComponent, isStandalone: true, selector: "ng2-input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <input
       [class]="inputClass()"
       [formControl]="inputControl"
@@ -2622,7 +2634,7 @@ class InputFilterComponent extends DefaultFilter {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "input-filter",
+                    selector: "ng2-input-filter",
                     template: `
     <input
       [class]="inputClass()"
@@ -2649,7 +2661,7 @@ class SelectFilterComponent extends DefaultFilter {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectFilterComponent, isStandalone: true, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
     <select [class]="inputClass()"
       class="form-control"
       #inputControl
@@ -2667,7 +2679,7 @@ class SelectFilterComponent extends DefaultFilter {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'select-filter',
+                    selector: 'ng2-select-filter',
                     template: `
     <select [class]="inputClass()"
       class="form-control"
@@ -2692,63 +2704,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 
 class DefaultFilterComponent extends FilterDefault {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultFilterComponent, isStandalone: true, selector: "default-table-filter", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultFilterComponent, isStandalone: true, selector: "ng2-default-table-filter", usesInheritance: true, ngImport: i0, template: `
     @switch (column().getFilterType()) { @case ('list') {
-    <select-filter
+    <ng2-select-filter
       [query]="query"
       [class]="inputClass()"
       [column]="column()"
       (filter)="onFilter($event)"
     >
-    </select-filter>
+    </ng2-select-filter>
     } @case ('checkbox') {
-    <checkbox-filter
+    <ng2-checkbox-filter
       [query]="query"
       [class]="inputClass()"
       [column]="column()"
       (filter)="onFilter($event)"
     >
-    </checkbox-filter>
+    </ng2-checkbox-filter>
     } @default {
-    <input-filter
+    <ng2-input-filter
       [query]="query"
       [class]="inputClass()"
       [column]="column()"
       (filter)="onFilter($event)"
     >
-    </input-filter>
+    </ng2-input-filter>
     } }
-  `, isInline: true, dependencies: [{ kind: "component", type: SelectFilterComponent, selector: "select-filter" }, { kind: "component", type: CheckboxFilterComponent, selector: "checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: "default-table-filter",
+                    selector: "ng2-default-table-filter",
                     template: `
     @switch (column().getFilterType()) { @case ('list') {
-    <select-filter
+    <ng2-select-filter
       [query]="query"
       [class]="inputClass()"
       [column]="column()"
       (filter)="onFilter($event)"
     >
-    </select-filter>
+    </ng2-select-filter>
     } @case ('checkbox') {
-    <checkbox-filter
+    <ng2-checkbox-filter
       [query]="query"
       [class]="inputClass()"
       [column]="column()"
       (filter)="onFilter($event)"
     >
-    </checkbox-filter>
+    </ng2-checkbox-filter>
     } @default {
-    <input-filter
+    <ng2-input-filter
       [query]="query"
       [class]="inputClass()"
       [column]="column()"
       (filter)="onFilter($event)"
     >
-    </input-filter>
+    </ng2-input-filter>
     } }
   `,
                     standalone: true,
@@ -2789,27 +2801,27 @@ class FilterComponent extends FilterDefault {
         <div class="ng2-smart-filter">
           @switch (column().getFilterType()) {
             @case ('custom') {
-              <custom-table-filter
+              <ng2-custom-table-filter
                 [query]="query"
                 [column]="column()"
                 [source]="source()"
                 [inputClass]="inputClass()"
                 (filter)="onFilter($event)">
-              </custom-table-filter>
+              </ng2-custom-table-filter>
             }
             @default {
-              <default-table-filter
+              <ng2-default-table-filter
                 [query]="query"
                 [column]="column()"
                 [source]="source()"
                 [inputClass]="inputClass()"
                 (filter)="onFilter($event)">
-              </default-table-filter>
+              </ng2-default-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: "custom-table-filter" }, { kind: "component", type: DefaultFilterComponent, selector: "default-table-filter" }] }); }
+      `, 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" }, { kind: "component", type: DefaultFilterComponent, selector: "ng2-default-table-filter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -2818,22 +2830,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         <div class="ng2-smart-filter">
           @switch (column().getFilterType()) {
             @case ('custom') {
-              <custom-table-filter
+              <ng2-custom-table-filter
                 [query]="query"
                 [column]="column()"
                 [source]="source()"
                 [inputClass]="inputClass()"
                 (filter)="onFilter($event)">
-              </custom-table-filter>
+              </ng2-custom-table-filter>
             }
             @default {
-              <default-table-filter
+              <ng2-default-table-filter
                 [query]="query"
                 [column]="column()"
                 [source]="source()"
                 [inputClass]="inputClass()"
                 (filter)="onFilter($event)">
-              </default-table-filter>
+              </ng2-default-table-filter>
             }
           }
         </div>
@@ -2844,6 +2856,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
 class AddButtonComponent {
     constructor() {
         this.grid = input.required();
+        this.source = input.required();
         this.create = output();
         this.isActionAdd = computed(() => {
             const actions = this.grid().settings().actions;
@@ -2863,16 +2876,17 @@ class AddButtonComponent {
     onAdd(event) {
         event.preventDefault();
         event.stopPropagation();
-        // if (this.grid.getSetting("mode") === "external") {
-        //   this.create.emit({
-        //     source: this.source,
-        //   });
-        // } else {
-        this.grid().createFormShown = true;
-        // }
+        if (this.grid().getSetting("mode") === "external") {
+            this.create.emit({
+                source: this.source(),
+            });
+        }
+        else {
+            this.grid().createFormShown = true;
+        }
     }
     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: `
+    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="#"
@@ -2926,7 +2940,12 @@ class TheadFiltersRowComponent {
     @if (grid().isMultiSelectVisible()) {
     <th></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <th ng2-st-add-button [grid]="grid()" (create)="create.emit($event)"></th>
+    <th
+      ng2-st-add-button
+      [source]="source()"
+      [grid]="grid()"
+      (create)="create.emit($event)"
+    ></th>
     } @for (column of getVisibleColumns(); track column.id) {
     <th class="ng2-smart-th {{ column.id }}">
       <ng2-smart-table-filter
@@ -2941,10 +2960,11 @@ class TheadFiltersRowComponent {
     <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"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter" }] }); }
+  `, 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, decorators: [{
             type: Component,
@@ -2954,7 +2974,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     @if (grid().isMultiSelectVisible()) {
     <th></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
-    <th ng2-st-add-button [grid]="grid()" (create)="create.emit($event)"></th>
+    <th
+      ng2-st-add-button
+      [source]="source()"
+      [grid]="grid()"
+      (create)="create.emit($event)"
+    ></th>
     } @for (column of getVisibleColumns(); track column.id) {
     <th class="ng2-smart-th {{ column.id }}">
       <ng2-smart-table-filter
@@ -2969,6 +2994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     <th
       ng2-st-add-button
       [grid]="grid()"
+      [source]="source()"
       (create)="create.emit($event)"
     ></th>
     }
@@ -3150,9 +3176,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
         }] });
 
 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: "14.0.0", version: "19.0.3", type: CheckboxSelectAllComponent, isStandalone: true, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: "grid", source: "source" }, ngImport: i0, template: `
-    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected" />
+    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: [{
@@ -3160,20 +3189,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
             args: [{
                     selector: "[ng2-st-checkbox-select-all]",
                     template: `
-    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected" />
+    <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected" />
   `,
                     standalone: true,
                     imports: [FormsModule],
                 }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }] } });
+        }] });
 
 class TitleComponent {
     constructor() {
         this.currentDirection = "";
+        this.source = input.required();
+        this.column = input.required();
         this.sort = output();
         this.dataChangedSub = false;
     }
@@ -3182,9 +3209,9 @@ class TitleComponent {
             if (!changes["source"].firstChange && this.dataChangedSub) {
                 this.dataChangedSub.unsubscribe();
             }
-            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
-                const sortConf = this.source.getSort();
-                if (sortConf.length > 0 && sortConf[0]["field"] === this.column.id) {
+            this.dataChangedSub = this.source().onChanged().subscribe((dataChanges) => {
+                const sortConf = this.source().getSort();
+                if (sortConf.length > 0 && sortConf[0]["field"] === this.column().id) {
                     this.currentDirection = sortConf[0]["direction"];
                 }
                 else {
@@ -3193,14 +3220,19 @@ class TitleComponent {
             });
         }
     }
+    ngOnDestroy() {
+        if (this.dataChangedSub) {
+            this.dataChangedSub?.unsubscribe();
+        }
+    }
     _sort(event) {
         event.preventDefault();
         this.changeSortDirection();
-        this.source.setSort([
+        this.source().setSort([
             {
-                field: this.column.id,
+                field: this.column().id,
                 direction: this.currentDirection === "desc" ? "desc" : "asc",
-                compare: this.column.getCompareFunction(),
+                compare: this.column().getCompareFunction(),
             },
         ]);
         this.sort.emit(null);
@@ -3211,62 +3243,60 @@ class TitleComponent {
             this.currentDirection = newDirection;
         }
         else {
-            this.currentDirection = this.column.sortDirection;
+            this.currentDirection = this.column().sortDirection;
         }
         return this.currentDirection;
     }
     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: { column: "column", source: "source" }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (column.isSortable) {
+    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 } }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0, template: `
+    @if (column().isSortable) {
     <a
       href="#"
       (click)="_sort($event)"
       class="ng2-smart-sort-link sort"
       [class]="currentDirection"
     >
-      {{ column.title }}
+      {{ column().title }}
     </a>
     } @else {
-    <span class="ng2-smart-sort">{{ column.title }}</span>
+    <span class="ng2-smart-sort">{{ column().title }}</span>
     }
   `, isInline: true, styles: ["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) {
+    @if (column().isSortable) {
     <a
       href="#"
       (click)="_sort($event)"
       class="ng2-smart-sort-link sort"
       [class]="currentDirection"
     >
-      {{ column.title }}
+      {{ column().title }}
     </a>
     } @else {
-    <span class="ng2-smart-sort">{{ column.title }}</span>
+    <span class="ng2-smart-sort">{{ column().title }}</span>
     }
   `, standalone: true, styles: ["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"] }]
-        }], propDecorators: { column: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }] } });
+        }] });
 
 class ColumnTitleComponent {
     constructor() {
+        this.source = input.required();
+        this.column = input.required();
         this.sort = output();
     }
     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: "14.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, ngImport: i0, template: `
+    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 } }, outputs: { sort: "sort" }, ngImport: i0, template: `
     <div class="ng2-smart-title">
       <ng2-smart-table-title
-        [source]="source"
-        [column]="column"
+        [source]="source()"
+        [column]="column()"
         (sort)="sort.emit($event)"
       ></ng2-smart-table-title>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["column", "source"], outputs: ["sort"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["source", "column"], outputs: ["sort"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
             type: Component,
@@ -3275,8 +3305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     template: `
     <div class="ng2-smart-title">
       <ng2-smart-table-title
-        [source]="source"
-        [column]="column"
+        [source]="source()"
+        [column]="column()"
         (sort)="sort.emit($event)"
       ></ng2-smart-table-title>
     </div>
@@ -3284,11 +3314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
                     standalone: true,
                     imports: [TitleComponent],
                 }]
-        }], propDecorators: { column: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }] } });
+        }] });
 
 class TheadTitlesRowComponent {
     constructor() {
@@ -3306,7 +3332,6 @@ class TheadTitlesRowComponent {
     <th
       ng2-st-checkbox-select-all
       [grid]="grid()"
-      [source]="source()"
       (click)="selectAllRows.emit($event)"
     ></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {
@@ -3327,7 +3352,7 @@ class TheadTitlesRowComponent {
     } @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", "source"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["column", "source"], outputs: ["sort"] }] }); }
+  `, 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"], outputs: ["sort"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
             type: Component,
@@ -3338,7 +3363,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
     <th
       ng2-st-checkbox-select-all
       [grid]="grid()"
-      [source]="source()"
       (click)="selectAllRows.emit($event)"
     ></th>
     } @if (grid().actionIsOnLeft() && grid().isActionsVisible()) {