@den4ik92/ng2-smart-table 19.6.48 → 20.0.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, effect, signal, inject, ElementRef, Directive, untracked, ViewContainerRef, ViewChild, output, viewChild } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, effect, signal, inject, ElementRef, Directive, untracked, ViewContainerRef, ViewChild, output, viewChild, NgZone, Injector } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { distinctUntilChanged, debounceTime, takeUntil, switchMap, take, finalize } from 'rxjs/operators';
@@ -13,13 +13,13 @@ import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 
 class BaseEditorComponent {
     constructor() {
-        this.cell = input.required();
-        this.inputClass = computed(() => this.cell().column.editorInputClass);
+        this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
+        this.inputClass = computed(() => this.cell().column.editorInputClass, ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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.2.14", ngImport: i0, type: BaseEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseEditorComponent, decorators: [{
             type: Component,
             args: [{ template: '', selector: 'ng2-editor-base-component', changeDetection: ChangeDetectionStrategy.OnPush }]
         }] });
@@ -27,11 +27,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class BaseFilterComponent {
     constructor() {
         this.delay = 300;
-        this.query = input(null);
-        this.inputClass = input('');
-        this.source = input.required();
-        this.column = input.required();
-        this.filterEmitter = input.required();
+        this.query = input(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
+        this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+        this.filterEmitter = input.required(...(ngDevMode ? [{ debugName: "filterEmitter" }] : []));
         this.inputControl = new UntypedFormControl();
         this.placeholder = '';
         effect(() => {
@@ -54,10 +54,10 @@ class BaseFilterComponent {
     setFilter(query) {
         this.filterEmitter().emit(query);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterEmitter: { classPropertyName: "filterEmitter", publicName: "filterEmitter", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterEmitter: { classPropertyName: "filterEmitter", publicName: "filterEmitter", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseFilterComponent, decorators: [{
             type: Component,
             args: [{ template: '', selector: 'ng2-base-filter-component', changeDetection: ChangeDetectionStrategy.OnPush }]
         }], ctorParameters: () => [] });
@@ -209,10 +209,10 @@ function CheckParentElementClassRecursive(element, className) {
 class TableColumnsEditorComponent {
     constructor() {
         this.infoText = 'You can drag and drop columns as you wish and also disable unnecessary ones.';
-        this.grid = input();
-        this.close = input.required();
+        this.grid = input(...(ngDevMode ? [undefined, { debugName: "grid" }] : []));
+        this.close = input.required(...(ngDevMode ? [{ debugName: "close" }] : []));
         this.currentState = [];
-        this.stateHasChanged = signal(false);
+        this.stateHasChanged = signal(false, ...(ngDevMode ? [{ debugName: "stateHasChanged" }] : []));
         effect(() => {
             this.currentState = cloneArrayOfObject(this.grid()?.currentColumnsSortState || []);
         });
@@ -237,20 +237,20 @@ class TableColumnsEditorComponent {
     updateChangedState() {
         this.stateHasChanged.set(JSON.stringify(this.grid()?.currentColumnsSortState) !== JSON.stringify(this.currentState));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableColumnsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 class=\"list\" cdkDropList [cdkDropListData]=\"currentState\" (cdkDropListDropped)=\"drop($event)\">\n      @for (column of currentState; track column.key + i; let i = $index) {\n        <div\n          cdkDrag\n          [cdkDragLockAxis]=\"'y'\"\n          [cdkDragStartDelay]=\"grid()?.columnSortDragDelay() || 0\"\n          [cdkDragDisabled]=\"column.moveDisabled\"\n          class=\"drag-row\"\n          #dragRow\n          [style.--drag-row-height]=\"50\">\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            <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(--smart-table-bg-even, #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;background:var(--smart-table-bg, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:.5rem 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{max-height:54dvh;overflow:auto;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:.5rem 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableColumnsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 class=\"list\" cdkDropList [cdkDropListData]=\"currentState\" (cdkDropListDropped)=\"drop($event)\">\n      @for (column of currentState; track column.key + i; let i = $index) {\n        <div\n          cdkDrag\n          [cdkDragLockAxis]=\"'y'\"\n          [cdkDragStartDelay]=\"grid()?.columnSortDragDelay() || 0\"\n          [cdkDragDisabled]=\"column.moveDisabled\"\n          class=\"drag-row\"\n          #dragRow\n          [style.--drag-row-height]=\"50\">\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            <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(--smart-table-bg-even, #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;background:var(--smart-table-bg, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:.5rem 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{max-height:54dvh;overflow:auto;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:.5rem 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", "cdkDropListHasAnchor"], 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.2.14", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
             type: Component,
             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 class=\"list\" cdkDropList [cdkDropListData]=\"currentState\" (cdkDropListDropped)=\"drop($event)\">\n      @for (column of currentState; track column.key + i; let i = $index) {\n        <div\n          cdkDrag\n          [cdkDragLockAxis]=\"'y'\"\n          [cdkDragStartDelay]=\"grid()?.columnSortDragDelay() || 0\"\n          [cdkDragDisabled]=\"column.moveDisabled\"\n          class=\"drag-row\"\n          #dragRow\n          [style.--drag-row-height]=\"50\">\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            <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(--smart-table-bg-even, #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;background:var(--smart-table-bg, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:.5rem 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{max-height:54dvh;overflow:auto;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:.5rem 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 {
     constructor() {
-        this.tableComponent = input();
+        this.tableComponent = input(...(ngDevMode ? [undefined, { debugName: "tableComponent" }] : []));
         this.grid = computed(() => {
             return this.tableComponent()?.grid;
-        });
+        }, ...(ngDevMode ? [{ debugName: "grid" }] : []));
         this.overlay = inject(Overlay);
         this.elementRef = inject(ElementRef);
         this.destroy$ = new Subject();
@@ -328,10 +328,10 @@ class SmartTableColumnEditorDirective {
             backdropClass: 'cdk-overlay-transparent-backdrop',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SmartTableColumnEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.14", type: SmartTableColumnEditorDirective, isStandalone: true, selector: "[ng2SmartTableColumnEditor]", inputs: { tableComponent: { classPropertyName: "tableComponent", publicName: "tableComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "buttonClicked()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SmartTableColumnEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", 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.2.14", ngImport: i0, type: SmartTableColumnEditorDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SmartTableColumnEditorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ng2SmartTableColumnEditor]',
@@ -346,7 +346,7 @@ class Cell {
         this.value = value;
         this.row = row;
         this.column = column;
-        this.newValue = signal(null);
+        this.newValue = signal(null, ...(ngDevMode ? [{ debugName: "newValue" }] : []));
         this.columnClass = '';
         this.styles = '';
         this.title = '';
@@ -444,13 +444,13 @@ class Row {
         this.index = index;
         this.rowDataObj = rowDataObj;
         this.columnsList = columnsList;
-        this.pending = signal(false);
-        this.isSelected = signal(false);
-        this.isInEditing = signal(false);
-        this.cells = computed(() => this.columns().map((column) => this.createCell(column, this.rowData())));
-        this.rowData = signal({});
-        this.columns = signal([]);
-        this.visibleCells = computed(() => this.cells().filter((cell) => !cell.column.hide));
+        this.pending = signal(false, ...(ngDevMode ? [{ debugName: "pending" }] : []));
+        this.isSelected = signal(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
+        this.isInEditing = signal(false, ...(ngDevMode ? [{ debugName: "isInEditing" }] : []));
+        this.cells = computed(() => this.columns().map((column) => this.createCell(column, this.rowData())), ...(ngDevMode ? [{ debugName: "cells" }] : []));
+        this.rowData = signal({}, ...(ngDevMode ? [{ debugName: "rowData" }] : []));
+        this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.visibleCells = computed(() => this.cells().filter((cell) => !cell.column.hide), ...(ngDevMode ? [{ debugName: "visibleCells" }] : []));
         this.rowData.set(rowDataObj);
         this.columns.set(columnsList);
     }
@@ -488,16 +488,16 @@ var SmartTableOnChangedEventName;
 class DataSource {
     constructor() {
         this.onChangedSource = new Subject();
-        this.sortConf = signal(null);
-        this.filters = signal([]);
+        this.sortConf = signal(null, ...(ngDevMode ? [{ debugName: "sortConf" }] : []));
+        this.filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
         this.pagingConf = signal({
             page: 1,
             perPage: 100,
             total: 0,
             display: false,
             perPageSelect: [],
-        });
-        this.data = signal([]);
+        }, ...(ngDevMode ? [{ debugName: "pagingConf" }] : []));
+        this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
         this.getSort = this.sortConf;
         this.getFilters = this.filters;
     }
@@ -688,11 +688,11 @@ class LocalDataSource extends DataSource {
                 list = localSort(list, field, direction, compare);
             }
             return list;
-        });
+        }, ...(ngDevMode ? [{ debugName: "filteredAndSorted" }] : []));
         this.paginatedList = computed(() => {
             return this.paginate(this.filteredAndSorted());
-        });
-        this.count = computed(() => this.filteredAndSorted().length);
+        }, ...(ngDevMode ? [{ debugName: "paginatedList" }] : []));
+        this.count = computed(() => this.filteredAndSorted().length, ...(ngDevMode ? [{ debugName: "count" }] : []));
         this.data.set(data);
     }
     async load(data) {
@@ -751,8 +751,8 @@ class ServerDataSource extends DataSource {
     constructor(paramPrepareFunction, requestFunction, initPagingConf) {
         super();
         this.initPagingConf = initPagingConf;
-        this.count = computed(() => this.pagingConf().total);
-        this.pending = signal(false);
+        this.count = computed(() => this.pagingConf().total, ...(ngDevMode ? [{ debugName: "count" }] : []));
+        this.pending = signal(false, ...(ngDevMode ? [{ debugName: "pending" }] : []));
         this.pagingConf.update((old) => ({ ...old, ...this.initPagingConf }));
         this.paramPrepareFunction = paramPrepareFunction;
         this.requestFunction = requestFunction;
@@ -792,17 +792,17 @@ class ServerDataSource extends DataSource {
 
 class PagerComponent {
     constructor() {
-        this.source = input.required();
-        this.content = input();
-        this.pagingConf = computed(() => this.source().pagingConf());
-        this.currentPerPage = computed(() => this.pagingConf().perPage);
-        this.currentPage = computed(() => this.pagingConf().page);
-        this.isShowTotal = computed(() => !!this.pagingConf().showTotal);
-        this.count = computed(() => this.source().count());
-        this.nextButtonText = computed(() => this.pagingConf().nextButtonText);
-        this.prevButtonText = computed(() => this.pagingConf().nextButtonText);
-        this.lastPage = computed(() => Math.ceil(this.count() / this.currentPerPage()) || 1);
-        this.pages = computed(() => this.getPages(this.currentPage(), this.lastPage(), this.count()));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
+        this.pagingConf = computed(() => this.source().pagingConf(), ...(ngDevMode ? [{ debugName: "pagingConf" }] : []));
+        this.currentPerPage = computed(() => this.pagingConf().perPage, ...(ngDevMode ? [{ debugName: "currentPerPage" }] : []));
+        this.currentPage = computed(() => this.pagingConf().page, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+        this.isShowTotal = computed(() => !!this.pagingConf().showTotal, ...(ngDevMode ? [{ debugName: "isShowTotal" }] : []));
+        this.count = computed(() => this.source().count(), ...(ngDevMode ? [{ debugName: "count" }] : []));
+        this.nextButtonText = computed(() => this.pagingConf().nextButtonText, ...(ngDevMode ? [{ debugName: "nextButtonText" }] : []));
+        this.prevButtonText = computed(() => this.pagingConf().nextButtonText, ...(ngDevMode ? [{ debugName: "prevButtonText" }] : []));
+        this.lastPage = computed(() => Math.ceil(this.count() / this.currentPerPage()) || 1, ...(ngDevMode ? [{ debugName: "lastPage" }] : []));
+        this.pages = computed(() => this.getPages(this.currentPage(), this.lastPage(), this.count()), ...(ngDevMode ? [{ debugName: "pages" }] : []));
     }
     paginate(page) {
         this.source().setPage(page);
@@ -853,10 +853,10 @@ class PagerComponent {
         }
         this.source().setPaging(1, +target.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ng2-smart-table-pagination__wrap\">\n  <div class=\"total-wrap\">\n    <ng-content>\n      @if (content()) {\n        <ng-template [ngTemplateOutlet]=\"content()!\"></ng-template>\n      } @else {\n        @if (isShowTotal()) {\n          <span class=\"total-count\"> Total: {{ count() }} </span>\n        }\n      }\n    </ng-content>\n  </div>\n  <nav class=\"ng2-smart-table-pagination__nav\">\n    <ul class=\"ng2-smart-table-pagination__list\">\n      <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() <= 1\">\n        <a tabindex=\"0\" (keyup)=\"prev()\" (click)=\"prev()\" aria-label=\"Prev\">\n          @if (prevButtonText(); as text) {\n            {{ text }}\n          } @else {\n            &laquo; Previous\n          }\n        </a>\n      </li>\n      @for (page of pages(); track $index) {\n        <li class=\"ng2-smart-table-pagination__list-item\" [class.active]=\"currentPage() === page\">\n          @if (isString(page) || currentPage() === page) {\n            <span>\n              {{ page }}\n            </span>\n          } @else {\n            <a [tabindex]=\"page\" (keyup)=\"paginate(page)\" (click)=\"paginate(page)\">{{ page }}</a>\n          }\n        </li>\n      }\n      <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() >= lastPage()\">\n        <a tabindex=\"10\" (keyup)=\"next()\" (click)=\"next()\" aria-label=\"Next\">\n          @if (nextButtonText(); as text) {\n            {{ text }}\n          } @else {\n            Next &raquo;\n          }\n        </a>\n      </li>\n    </ul>\n  </nav>\n  <div>\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\n          (change)=\"onChangePerPage($any($event.target))\"\n          [ngModel]=\"currentPerPage()\"\n          id=\"ng2-smart-pagination-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</div>\n", styles: [".ng2-smart-table-pagination__wrap{width:100%;display:inline-flex;align-items:center;font-size:.875em;padding:1rem}.ng2-smart-table-pagination__nav{margin:0 auto}.ng2-smart-table-pagination__list{margin:0;list-style:none;display:flex}.ng2-smart-table-pagination__list-item span,.ng2-smart-table-pagination__list-item a{color:var(--layout-text-color);padding:.2rem .5rem}.ng2-smart-table-pagination__list-item:not(.disabled) a{cursor:pointer}.ng2-smart-table-pagination__list-item:not(.disabled) a:hover{background-color:var(--layout-background-color);color:var(--layout-text-color)}.ng2-smart-table-pagination__list-item.active span{background-color:var(--card-header-primary-background-color);color:var(--card-header-primary-text-color)}.ng2-smart-table-pagination__list-item.disabled{opacity:.5}\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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ng2-smart-table-pagination__wrap\">\n  <div class=\"total-wrap\">\n    <ng-content>\n      @if (content()) {\n        <ng-template [ngTemplateOutlet]=\"content()!\"></ng-template>\n      } @else {\n        @if (isShowTotal()) {\n          <span class=\"total-count\"> Total: {{ count() }} </span>\n        }\n      }\n    </ng-content>\n  </div>\n  <nav class=\"ng2-smart-table-pagination__nav\">\n    <ul class=\"ng2-smart-table-pagination__list\">\n      <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() <= 1\">\n        <a tabindex=\"0\" (keyup)=\"prev()\" (click)=\"prev()\" aria-label=\"Prev\">\n          @if (prevButtonText(); as text) {\n            {{ text }}\n          } @else {\n            &laquo; Previous\n          }\n        </a>\n      </li>\n      @for (page of pages(); track $index) {\n        <li class=\"ng2-smart-table-pagination__list-item\" [class.active]=\"currentPage() === page\">\n          @if (isString(page) || currentPage() === page) {\n            <span>\n              {{ page }}\n            </span>\n          } @else {\n            <a [tabindex]=\"page\" (keyup)=\"paginate(page)\" (click)=\"paginate(page)\">{{ page }}</a>\n          }\n        </li>\n      }\n      <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() >= lastPage()\">\n        <a tabindex=\"10\" (keyup)=\"next()\" (click)=\"next()\" aria-label=\"Next\">\n          @if (nextButtonText(); as text) {\n            {{ text }}\n          } @else {\n            Next &raquo;\n          }\n        </a>\n      </li>\n    </ul>\n  </nav>\n  <div>\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\n          (change)=\"onChangePerPage($any($event.target))\"\n          [ngModel]=\"currentPerPage()\"\n          id=\"ng2-smart-pagination-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</div>\n", styles: [".ng2-smart-table-pagination__wrap{width:100%;display:inline-flex;align-items:center;font-size:.875em;padding:1rem}.ng2-smart-table-pagination__nav{margin:0 auto}.ng2-smart-table-pagination__list{margin:0;list-style:none;display:flex}.ng2-smart-table-pagination__list-item span,.ng2-smart-table-pagination__list-item a{color:var(--layout-text-color);padding:.2rem .5rem}.ng2-smart-table-pagination__list-item:not(.disabled) a{cursor:pointer}.ng2-smart-table-pagination__list-item:not(.disabled) a:hover{background-color:var(--layout-background-color);color:var(--layout-text-color)}.ng2-smart-table-pagination__list-item.active span{background-color:var(--card-header-primary-background-color);color:var(--card-header-primary-text-color)}.ng2-smart-table-pagination__list-item.disabled{opacity:.5}\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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PagerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-pager', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgTemplateOutlet], template: "<div class=\"ng2-smart-table-pagination__wrap\">\n  <div class=\"total-wrap\">\n    <ng-content>\n      @if (content()) {\n        <ng-template [ngTemplateOutlet]=\"content()!\"></ng-template>\n      } @else {\n        @if (isShowTotal()) {\n          <span class=\"total-count\"> Total: {{ count() }} </span>\n        }\n      }\n    </ng-content>\n  </div>\n  <nav class=\"ng2-smart-table-pagination__nav\">\n    <ul class=\"ng2-smart-table-pagination__list\">\n      <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() <= 1\">\n        <a tabindex=\"0\" (keyup)=\"prev()\" (click)=\"prev()\" aria-label=\"Prev\">\n          @if (prevButtonText(); as text) {\n            {{ text }}\n          } @else {\n            &laquo; Previous\n          }\n        </a>\n      </li>\n      @for (page of pages(); track $index) {\n        <li class=\"ng2-smart-table-pagination__list-item\" [class.active]=\"currentPage() === page\">\n          @if (isString(page) || currentPage() === page) {\n            <span>\n              {{ page }}\n            </span>\n          } @else {\n            <a [tabindex]=\"page\" (keyup)=\"paginate(page)\" (click)=\"paginate(page)\">{{ page }}</a>\n          }\n        </li>\n      }\n      <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() >= lastPage()\">\n        <a tabindex=\"10\" (keyup)=\"next()\" (click)=\"next()\" aria-label=\"Next\">\n          @if (nextButtonText(); as text) {\n            {{ text }}\n          } @else {\n            Next &raquo;\n          }\n        </a>\n      </li>\n    </ul>\n  </nav>\n  <div>\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\n          (change)=\"onChangePerPage($any($event.target))\"\n          [ngModel]=\"currentPerPage()\"\n          id=\"ng2-smart-pagination-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</div>\n", styles: [".ng2-smart-table-pagination__wrap{width:100%;display:inline-flex;align-items:center;font-size:.875em;padding:1rem}.ng2-smart-table-pagination__nav{margin:0 auto}.ng2-smart-table-pagination__list{margin:0;list-style:none;display:flex}.ng2-smart-table-pagination__list-item span,.ng2-smart-table-pagination__list-item a{color:var(--layout-text-color);padding:.2rem .5rem}.ng2-smart-table-pagination__list-item:not(.disabled) a{cursor:pointer}.ng2-smart-table-pagination__list-item:not(.disabled) a:hover{background-color:var(--layout-background-color);color:var(--layout-text-color)}.ng2-smart-table-pagination__list-item.active span{background-color:var(--card-header-primary-background-color);color:var(--card-header-primary-text-color)}.ng2-smart-table-pagination__list-item.disabled{opacity:.5}\n"] }]
         }] });
@@ -874,8 +874,8 @@ class CheckboxEditorComponent extends BaseEditorComponent {
     onChange(event) {
         this.cell().setNewValue(event.target.checked ? this.trueVal : this.falseVal);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CheckboxEditorComponent, isStandalone: true, selector: "ng2-checkbox-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: CheckboxEditorComponent, isStandalone: true, selector: "ng2-checkbox-editor", usesInheritance: true, ngImport: i0, template: `
     <input
       [class]="inputClass()"
       type="checkbox"
@@ -886,7 +886,7 @@ class CheckboxEditorComponent extends BaseEditorComponent {
       [checked]="cell().getValue() === trueVal" />
   `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-checkbox-editor', template: `
     <input
@@ -901,8 +901,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class InputEditorComponent extends BaseEditorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InputEditorComponent, isStandalone: true, selector: "ng2-input-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: InputEditorComponent, isStandalone: true, selector: "ng2-input-editor", usesInheritance: true, ngImport: i0, template: `
     <input
       type="text"
       [class]="inputClass()"
@@ -914,7 +914,7 @@ class InputEditorComponent extends BaseEditorComponent {
       [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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-input-editor', template: `
     <input
@@ -930,8 +930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class SelectEditorComponent extends BaseEditorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SelectEditorComponent, isStandalone: true, selector: "ng2-select-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectEditorComponent, isStandalone: true, selector: "ng2-select-editor", usesInheritance: true, ngImport: i0, template: `
     <select
       [class]="inputClass()"
       class="form-control"
@@ -947,7 +947,7 @@ class SelectEditorComponent extends BaseEditorComponent {
     </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-select-editor',
@@ -972,8 +972,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class TextareaEditorComponent extends BaseEditorComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextareaEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TextareaEditorComponent, isStandalone: true, selector: "ng2-textarea-editor", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextareaEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: TextareaEditorComponent, isStandalone: true, selector: "ng2-textarea-editor", usesInheritance: true, ngImport: i0, template: `
     <textarea
       [class]="inputClass()"
       class="form-control"
@@ -985,7 +985,7 @@ class TextareaEditorComponent extends BaseEditorComponent {
     </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TextareaEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextareaEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-textarea-editor', template: `
     <textarea
@@ -1009,12 +1009,12 @@ class BuildInEditorComponent extends BaseEditorComponent {
                 return editor.type || 'text';
             }
             return 'text';
-        });
+        }, ...(ngDevMode ? [{ debugName: "editorType" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BuildInEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BuildInEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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.2.14", ngImport: i0, type: BuildInEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BuildInEditorComponent, decorators: [{
             type: Component,
             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" }]
         }] });
@@ -1044,10 +1044,10 @@ class CustomEditComponent extends BaseEditorComponent {
             this.customComponent.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", 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.2.14", ngImport: i0, type: CustomEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-table-cell-custom-editor',
@@ -1061,7 +1061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class EditCellComponent {
     constructor() {
-        this.cell = input.required();
+        this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
     }
     getEditorType() {
         const editor = this.cell().column.editor;
@@ -1070,8 +1070,8 @@ class EditCellComponent {
         }
         return 'text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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') {
@@ -1084,7 +1084,7 @@ class EditCellComponent {
     </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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: EditCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-table-cell-edit-mode',
@@ -1107,17 +1107,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class CustomViewComponent {
     constructor() {
-        this.cell = input.required();
+        this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
         this.inputs = computed(() => ({
             rowData: this.cell().row.rowData(),
             value: this.cell().getValue(),
             ...this.cell().column.renderComponentInputs,
-        }));
+        }), ...(ngDevMode ? [{ debugName: "inputs" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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().column.renderComponent!; inputs: inputs()"></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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().column.renderComponent!; inputs: inputs()"></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomViewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-custom-view-component',
@@ -1129,10 +1129,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class ViewCellComponent {
     constructor() {
-        this.cell = input.required();
+        this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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().column.type) {
         @case ('custom') {
@@ -1148,7 +1148,7 @@ class ViewCellComponent {
     </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.2.14", ngImport: i0, type: ViewCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ViewCellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-table-cell-view-mode',
@@ -1174,11 +1174,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class CellComponent {
     constructor() {
-        this.cell = input.required();
-        this.isInEditing = input(false);
+        this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
+        this.isInEditing = input(false, ...(ngDevMode ? [{ debugName: "isInEditing" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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>
     } @else {
@@ -1186,7 +1186,7 @@ class CellComponent {
     }
   `, 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.2.14", ngImport: i0, type: CellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-smart-table-cell',
@@ -1204,32 +1204,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class TbodyCreateCancelComponent {
     constructor() {
-        this.grid = input.required();
-        this.rowIndex = input();
-        this.rowPending = input(false);
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
+        this.rowIndex = input(...(ngDevMode ? [undefined, { debugName: "rowIndex" }] : []));
+        this.rowPending = input(false, ...(ngDevMode ? [{ debugName: "rowPending" }] : []));
         this.save = output();
         this.cancelEdit = output();
         this.cancelButtonContent = computed(() => {
             const edit = this.grid().settings().edit;
             return edit ? edit.cancelButtonContent || 'Cancel' : 'Cancel';
-        });
+        }, ...(ngDevMode ? [{ debugName: "cancelButtonContent" }] : []));
         this.saveButtonContent = computed(() => {
             const edit = this.grid().settings().edit;
             return edit ? edit.saveButtonContent || 'Save' : 'Save';
-        });
+        }, ...(ngDevMode ? [{ debugName: "saveButtonContent" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, rowPending: { classPropertyName: "rowPending", publicName: "rowPending", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancelEdit: "cancelEdit" }, ngImport: i0, template: "<div class=\"buttons-wrap\">\n  @if (!rowPending()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-save\"\n      [innerHTML]=\"saveButtonContent()\"\n      (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n      [innerHTML]=\"cancelButtonContent()\"\n      (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n  } @else {\n    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n  }\n</div>\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: [".buttons-wrap{display:flex;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, rowPending: { classPropertyName: "rowPending", publicName: "rowPending", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancelEdit: "cancelEdit" }, ngImport: i0, template: "<div class=\"buttons-wrap\">\n  @if (!rowPending()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-save\"\n      [innerHTML]=\"saveButtonContent()\"\n      (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n    <a\n      href=\"#\"\n      [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n      [innerHTML]=\"cancelButtonContent()\"\n      (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n  } @else {\n    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n  }\n</div>\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: [".buttons-wrap{display:flex;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n    <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n      <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n    </a>\n  }\n</div>\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: [".buttons-wrap{display:flex;gap:.5rem}\n"] }]
         }] });
 
 class RowActionsComponent {
     constructor() {
-        this.grid = input.required();
-        this.row = input.required();
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
+        this.row = input.required(...(ngDevMode ? [{ debugName: "row" }] : []));
         this.editEmitter = output();
         this.deleteEmitter = output();
         this.customActionEmitter = output();
@@ -1240,7 +1240,7 @@ class RowActionsComponent {
             }
             const list = actions.custom.filter((action) => !action.hasPermissionFunction ? true : action.hasPermissionFunction(this.row().rowData()));
             return list;
-        });
+        }, ...(ngDevMode ? [{ debugName: "customActions" }] : []));
         this.isActionEditActive = computed(() => {
             const actions = this.grid().settings().actions;
             const editConfig = this.grid().settings().edit;
@@ -1251,7 +1251,7 @@ class RowActionsComponent {
                 return true;
             }
             return editConfig.hasPermissionFunction(this.row().rowData());
-        });
+        }, ...(ngDevMode ? [{ debugName: "isActionEditActive" }] : []));
         this.isActionDeleteActive = computed(() => {
             const actions = this.grid().settings().actions;
             const deleteConfig = this.grid().settings().delete;
@@ -1262,24 +1262,24 @@ class RowActionsComponent {
                 return true;
             }
             return deleteConfig.hasPermissionFunction(this.row().rowData());
-        });
+        }, ...(ngDevMode ? [{ debugName: "isActionDeleteActive" }] : []));
         this.isExternalMode = computed(() => {
             return this.grid().settings().mode === 'external';
-        });
+        }, ...(ngDevMode ? [{ debugName: "isExternalMode" }] : []));
         this.editRowButtonContent = computed(() => {
             const edit = this.grid().settings().edit;
             return edit ? edit.editButtonContent || 'Edit' : 'Edit';
-        });
+        }, ...(ngDevMode ? [{ debugName: "editRowButtonContent" }] : []));
         this.deleteRowButtonContent = computed(() => {
             const deleteConfig = this.grid().settings().delete;
             return deleteConfig ? deleteConfig.deleteButtonContent || 'Delete' : 'Delete';
-        });
+        }, ...(ngDevMode ? [{ debugName: "deleteRowButtonContent" }] : []));
         this.allActionsCountArray = computed(() => {
             let length = this.customActions().length;
             length += this.isActionDeleteActive() ? 1 : 0;
             length += this.isActionEditActive() ? 1 : 0;
             return new Array(length).fill('');
-        });
+        }, ...(ngDevMode ? [{ debugName: "allActionsCountArray" }] : []));
     }
     onCustom(action) {
         this.customActionEmitter.emit(action.name);
@@ -1294,21 +1294,21 @@ class RowActionsComponent {
         event.stopPropagation();
         this.deleteEmitter.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: RowActionsComponent, isStandalone: true, selector: "ng2-row-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editEmitter: "editEmitter", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter" }, ngImport: i0, template: "@if (!row().pending()) {\n  @if (isActionEditActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-edit-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n      [innerHTML]=\"editRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onEdit($event)\"></a>\n  }\n  @if (isActionDeleteActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-delete-button'\"\n      class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n      [innerHTML]=\"deleteRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onDelete($event)\"></a>\n  }\n  @for (action of customActions(); track action.name) {\n    <a\n      [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n      href=\"#\"\n      class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n      [innerHTML]=\"action.title\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n  }\n} @else {\n  @for (item of allActionsCountArray(); track $index) {\n    <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n  }\n}\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: RowActionsComponent, isStandalone: true, selector: "ng2-row-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editEmitter: "editEmitter", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter" }, ngImport: i0, template: "@if (!row().pending()) {\n  @if (isActionEditActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-edit-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n      [innerHTML]=\"editRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onEdit($event)\"></a>\n  }\n  @if (isActionDeleteActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-delete-button'\"\n      class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n      [innerHTML]=\"deleteRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onDelete($event)\"></a>\n  }\n  @for (action of customActions(); track action.name) {\n    <a\n      [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n      href=\"#\"\n      class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n      [innerHTML]=\"action.title\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n  }\n} @else {\n  @for (item of allActionsCountArray(); track $index) {\n    <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n  }\n}\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: RowActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-row-actions', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) {\n  @if (isActionEditActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-edit-button'\"\n      class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n      [innerHTML]=\"editRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onEdit($event)\"></a>\n  }\n  @if (isActionDeleteActive()) {\n    <a\n      href=\"#\"\n      [id]=\"'row-' + row().index + '_action-delete-button'\"\n      class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n      [innerHTML]=\"deleteRowButtonContent()\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onDelete($event)\"></a>\n  }\n  @for (action of customActions(); track action.name) {\n    <a\n      [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n      href=\"#\"\n      class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n      [innerHTML]=\"action.title\"\n      (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n  }\n} @else {\n  @for (item of allActionsCountArray(); track $index) {\n    <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n  }\n}\n\n<ng-template #spinner>\n  <svg\n    role=\"none\"\n    (click)=\"$event.stopPropagation()\"\n    style=\"height: 2rem; width: 2rem\"\n    version=\"1.1\"\n    id=\"L9\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n    x=\"0px\"\n    y=\"0px\"\n    viewBox=\"0 0 100 100\"\n    enable-background=\"new 0 0 0 0\"\n    xml:space=\"preserve\">\n    <path\n      fill=\"#e9e9e9\"\n      d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n      <animateTransform\n        attributeName=\"transform\"\n        attributeType=\"XML\"\n        type=\"rotate\"\n        dur=\"1s\"\n        from=\"0 50 50\"\n        to=\"360 50 50\"\n        repeatCount=\"indefinite\" />\n    </path>\n  </svg>\n</ng-template>\n", styles: [":host{display:flex}\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.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.row = input.required(...(ngDevMode ? [{ debugName: "row" }] : []));
+        this.isMobileView = input(false, ...(ngDevMode ? [{ debugName: "isMobileView" }] : []));
+        this.isCreateRow = input(false, ...(ngDevMode ? [{ debugName: "isCreateRow" }] : []));
         this.edit = output();
         this.editCancel = output();
         this.editConfirmed = output();
@@ -1334,10 +1334,10 @@ class TrowComponent {
         this.editCancel.emit();
         this.row()?.isInEditing.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TrowComponent, isStandalone: true, selector: "[ng2-st-trow]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null }, isCreateRow: { classPropertyName: "isCreateRow", publicName: "isCreateRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editCancel: "editCancel", editConfirmed: "editConfirmed", deleteEmitter: "deleteEmitter", createConfirmed: "createConfirmed", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, host: { properties: { "class.ng2-smart-card": "isMobileView()" } }, ngImport: i0, template: "@if (isMobileView()) {\n  <td colspan=\"50\">\n    <div class=\"ng2-smart-card-header\">\n      <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n      <div class=\"ng2-smart-card-actions\">\n        <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n      </div>\n    </div>\n    <div class=\"ng2-smart-card-content\">\n      @for (cell of row().visibleCells(); track cell.id + $index) {\n        <div class=\"ng2-smart-card-field\">\n          <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n          <div class=\"ng2-smart-card-field-value\">\n            <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n          </div>\n        </div>\n      }\n    </div>\n  </td>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n  @if (grid().actionIsOnLeft()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n  @for (cell of row().visibleCells(); track cell.id + $index) {\n    <td [class]=\"cell.columnClass\" [style]=\"cell.styles\">\n      <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n    </td>\n  }\n  @if (grid().actionIsOnRight()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n}\n\n<ng-template #actions>\n  @if (isCreateRow() || row().isInEditing()) {\n    <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n      <ng2-st-tbody-create-cancel\n        [grid]=\"grid()\"\n        [rowIndex]=\"row().index || 0\"\n        (cancelEdit)=\"onCancelEdit()\"\n        (save)=\"onSave()\"\n        [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n    </td>\n  } @else {\n    @if (grid().isActionsVisible()) {\n      <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n        <ng2-row-actions\n          [grid]=\"grid()\"\n          [row]=\"row()\"\n          (customActionEmitter)=\"customActionEmitter.emit($event)\"\n          (editEmitter)=\"edit.emit()\"\n          (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n      </td>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n  @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n    <td\n      class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n      (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n      <input\n        type=\"checkbox\"\n        [id]=\"'row-' + row().index + '_select-checkbox'\"\n        class=\"form-control\"\n        [ngModel]=\"row().isSelected()\" />\n    </td>\n  }\n</ng-template>\n", styles: [":host .ng2-smart-action-multiple-select{margin-right:.5rem;text-align:center}:host.ng2-smart-card{display:block;margin-bottom:1rem;border-radius:.5rem;overflow:hidden;box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));background-color:var(--smart-table-bg, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-actions{margin:.5rem}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between}:host.ng2-smart-card td .ng2-smart-card-content{padding:1rem;display:grid;gap:.75rem}@media (min-width: 400px){:host.ng2-smart-card td .ng2-smart-card-content{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-label{font-weight:600;color:inherit;margin-bottom:.35rem;font-size:.9em}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-value{word-break:break-word}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "isInEditing"] }, { kind: "component", type: RowActionsComponent, selector: "ng2-row-actions", inputs: ["grid", "row"], outputs: ["editEmitter", "deleteEmitter", "customActionEmitter"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "rowIndex", "rowPending"], outputs: ["save", "cancelEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TrowComponent, isStandalone: true, selector: "[ng2-st-trow]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null }, isCreateRow: { classPropertyName: "isCreateRow", publicName: "isCreateRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editCancel: "editCancel", editConfirmed: "editConfirmed", deleteEmitter: "deleteEmitter", createConfirmed: "createConfirmed", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, host: { properties: { "class.ng2-smart-card": "isMobileView()" } }, ngImport: i0, template: "@if (isMobileView()) {\n  <td colspan=\"50\">\n    <div class=\"ng2-smart-card-header\">\n      <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n      <div class=\"ng2-smart-card-actions\">\n        <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n      </div>\n    </div>\n    <div class=\"ng2-smart-card-content\">\n      @for (cell of row().visibleCells(); track cell.id + $index) {\n        <div class=\"ng2-smart-card-field\">\n          <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n          <div class=\"ng2-smart-card-field-value\">\n            <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n          </div>\n        </div>\n      }\n    </div>\n  </td>\n} @else {\n  <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n  @if (grid().actionIsOnLeft()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n  @for (cell of row().visibleCells(); track cell.id + $index) {\n    <td [class]=\"cell.columnClass\" [style]=\"cell.styles\">\n      <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n    </td>\n  }\n  @if (grid().actionIsOnRight()) {\n    <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n  }\n}\n\n<ng-template #actions>\n  @if (isCreateRow() || row().isInEditing()) {\n    <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n      <ng2-st-tbody-create-cancel\n        [grid]=\"grid()\"\n        [rowIndex]=\"row().index || 0\"\n        (cancelEdit)=\"onCancelEdit()\"\n        (save)=\"onSave()\"\n        [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n    </td>\n  } @else {\n    @if (grid().isActionsVisible()) {\n      <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n        <ng2-row-actions\n          [grid]=\"grid()\"\n          [row]=\"row()\"\n          (customActionEmitter)=\"customActionEmitter.emit($event)\"\n          (editEmitter)=\"edit.emit()\"\n          (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n      </td>\n    }\n  }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n  @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n    <td\n      class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n      (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n      <input\n        type=\"checkbox\"\n        [id]=\"'row-' + row().index + '_select-checkbox'\"\n        class=\"form-control\"\n        [ngModel]=\"row().isSelected()\" />\n    </td>\n  }\n</ng-template>\n", styles: [":host .ng2-smart-action-multiple-select{margin-right:.5rem;text-align:center}:host.ng2-smart-card{display:block;margin-bottom:1rem;border-radius:.5rem;overflow:hidden;box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));background-color:var(--smart-table-bg, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-actions{margin:.5rem}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between}:host.ng2-smart-card td .ng2-smart-card-content{padding:1rem;display:grid;gap:.75rem}@media (min-width: 400px){:host.ng2-smart-card td .ng2-smart-card-content{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-label{font-weight:600;color:inherit;margin-bottom:.35rem;font-size:.9em}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-value{word-break:break-word}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "isInEditing"] }, { kind: "component", type: RowActionsComponent, selector: "ng2-row-actions", inputs: ["grid", "row"], outputs: ["editEmitter", "deleteEmitter", "customActionEmitter"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "rowIndex", "rowPending"], outputs: ["save", "cancelEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TrowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrowComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ng2-st-trow]', imports: [NgTemplateOutlet, FormsModule, CellComponent, RowActionsComponent, TbodyCreateCancelComponent], host: {
                         '[class.ng2-smart-card]': 'isMobileView()',
@@ -1346,10 +1346,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class Ng2SmartTableTbodyComponent {
     constructor() {
-        this.grid = input.required();
-        this.source = input.required();
-        this.rowClassFunction = input(() => '');
-        this.isMobileView = input(false);
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.rowClassFunction = input(() => '', ...(ngDevMode ? [{ debugName: "rowClassFunction" }] : []));
+        this.isMobileView = input(false, ...(ngDevMode ? [{ debugName: "isMobileView" }] : []));
         this.edit = output();
         this.editConfirmed = output();
         this.editCancel = output();
@@ -1367,7 +1367,7 @@ class Ng2SmartTableTbodyComponent {
         // });
         this.noDataMessage = computed(() => {
             return this.grid().settings().noDataMessage || 'No data found';
-        });
+        }, ...(ngDevMode ? [{ debugName: "noDataMessage" }] : []));
     }
     rowClicked(row) {
         if (row.isInEditing()) {
@@ -1385,17 +1385,17 @@ class Ng2SmartTableTbodyComponent {
     trackByIdOrIndex(index, item) {
         return item?.id || index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editConfirmed: "editConfirmed", editCancel: "editCancel", createConfirmed: "createConfirmed", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData())\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"rowClicked(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrowComponent, selector: "[ng2-st-trow]", inputs: ["grid", "source", "row", "isMobileView", "isCreateRow"], outputs: ["edit", "editCancel", "editConfirmed", "deleteEmitter", "createConfirmed", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editConfirmed: "editConfirmed", editCancel: "editCancel", createConfirmed: "createConfirmed", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, template: "@if (grid().createFormShown()) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [row]=\"grid().getNewRow()\"\n    [isCreateRow]=\"true\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (createConfirmed)=\"createConfirmed.emit()\"></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData())\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"rowClicked(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrowComponent, selector: "[ng2-st-trow]", inputs: ["grid", "source", "row", "isMobileView", "isCreateRow"], outputs: ["edit", "editCancel", "editConfirmed", "deleteEmitter", "createConfirmed", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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()\"></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n  <tr\n    ng2-st-trow\n    class=\"ng2-smart-row\"\n    [grid]=\"grid()\"\n    [source]=\"source()\"\n    [row]=\"row\"\n    [class]=\"rowClassFunction()(row.rowData())\"\n    [isMobileView]=\"isMobileView()\"\n    [class.selected]=\"row.isSelected()\"\n    (click)=\"rowClicked(row)\"\n    (edit)=\"edit.emit(row)\"\n    (editConfirmed)=\"editConfirmed.emit(row)\"\n    (editCancel)=\"editCancel.emit(row)\"\n    (deleteEmitter)=\"deleteEmitter.emit(row)\"\n    (customActionEmitter)=\"customActionEmitted($event, row)\"\n    (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n  <tr>\n    <td colspan=\"50\">\n      {{ noDataMessage() }}\n    </td>\n  </tr>\n}\n" }]
         }] });
 
 class AddButtonComponent {
     constructor() {
-        this.grid = input.required();
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
         this.create = output();
         this.isActionAdd = computed(() => {
             const actions = this.grid().settings().actions;
@@ -1403,22 +1403,22 @@ class AddButtonComponent {
                 return false;
             }
             return !!actions.add;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isActionAdd" }] : []));
         this.addNewButtonContent = computed(() => {
             const addParams = this.grid().settings()?.add;
             if (!addParams) {
                 return 'Add New';
             }
             return addParams?.addButtonContent || 'Add New';
-        });
+        }, ...(ngDevMode ? [{ debugName: "addNewButtonContent" }] : []));
     }
     onAdd(event) {
         event.preventDefault();
         event.stopPropagation();
         this.create.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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="#"
@@ -1428,7 +1428,7 @@ class AddButtonComponent {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AddButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AddButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-add-button]',
@@ -1450,8 +1450,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class ColumnTitleComponent {
     constructor() {
-        this.currentSort = input.required();
-        this.column = input.required();
+        this.currentSort = input.required(...(ngDevMode ? [{ debugName: "currentSort" }] : []));
+        this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
         this.sortEmit = output();
         this.currentSortDirection = computed(() => {
             const sort = this.currentSort();
@@ -1460,10 +1460,10 @@ class ColumnTitleComponent {
             }
             const { field, direction, title } = sort;
             return this.column().id === field && this.column().title === title ? direction : null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "currentSortDirection" }] : []));
         this.currentSortDirectionSymbol = computed(() => {
             return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
-        });
+        }, ...(ngDevMode ? [{ debugName: "currentSortDirectionSymbol" }] : []));
     }
     _sort(event) {
         event.preventDefault();
@@ -1476,8 +1476,8 @@ class ColumnTitleComponent {
         //   compare: this.column().compareFunction,
         // });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { currentSort: { classPropertyName: "currentSort", publicName: "currentSort", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sortEmit: "sortEmit" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { currentSort: { classPropertyName: "currentSort", publicName: "currentSort", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sortEmit: "sortEmit" }, ngImport: i0, template: `
     @if (column().isSortable) {
       <a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
         {{ column().title }}
@@ -1488,7 +1488,7 @@ class ColumnTitleComponent {
     }
   `, 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.2.14", ngImport: i0, type: ColumnTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-st-column-title', template: `
     @if (column().isSortable) {
@@ -1505,11 +1505,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class CheckboxFilterComponent extends BaseFilterComponent {
     constructor() {
         super(...arguments);
-        this.filterIsActive = computed(() => this.query() !== null);
+        this.filterIsActive = computed(() => this.query() !== null, ...(ngDevMode ? [{ debugName: "filterIsActive" }] : []));
         this.currentState = computed(() => {
             const valuesConfig = this.getValuesConfig(this.column().getFilterConfig());
             return this.query() === valuesConfig.trueVal ? true : this.query() === valuesConfig.falseVal ? false : false;
-        });
+        }, ...(ngDevMode ? [{ debugName: "currentState" }] : []));
     }
     getValuesConfig(filterConfig) {
         try {
@@ -1530,8 +1530,8 @@ class CheckboxFilterComponent extends BaseFilterComponent {
         event.stopPropagation();
         this.setFilter(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CheckboxFilterComponent, isStandalone: true, selector: "ng2-checkbox-filter", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CheckboxFilterComponent, isStandalone: true, selector: "ng2-checkbox-filter", usesInheritance: true, ngImport: i0, template: `
     <div class="checkbox-filter-wrapper">
       <input
         [id]="column().id"
@@ -1548,7 +1548,7 @@ class CheckboxFilterComponent extends BaseFilterComponent {
     </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-checkbox-filter', template: `
     <div class="checkbox-filter-wrapper">
@@ -1569,8 +1569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class InputFilterComponent extends BaseFilterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: InputFilterComponent, isStandalone: true, selector: "ng2-input-filter", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: InputFilterComponent, isStandalone: true, selector: "ng2-input-filter", usesInheritance: true, ngImport: i0, template: `
     <input
       [class]="inputClass()"
       [formControl]="inputControl"
@@ -1579,7 +1579,7 @@ class InputFilterComponent extends BaseFilterComponent {
       placeholder="{{ placeholder || column().title }}" />
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-input-filter',
@@ -1599,15 +1599,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class SelectFilterComponent extends BaseFilterComponent {
     constructor() {
         super(...arguments);
-        this.optionsList = signal([]);
+        this.optionsList = signal([], ...(ngDevMode ? [{ debugName: "optionsList" }] : []));
     }
     ngOnInit() {
         super.ngOnInit();
         const config = this.column().getFilterConfig();
         this.optionsList.set(config?.list || []);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", usesInheritance: true, ngImport: i0, template: `
     <select [class]="inputClass()" class="form-control" [formControl]="inputControl">
       <option [value]="null">{{ placeholder || 'all' }}</option>
       @for (option of optionsList(); track $index) {
@@ -1618,7 +1618,7 @@ class SelectFilterComponent extends BaseFilterComponent {
     </select>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-select-filter',
@@ -1639,14 +1639,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class BuildInFilterComponent {
     constructor() {
-        this.query = input(null);
-        this.inputClass = input('');
-        this.source = input.required();
-        this.column = input.required();
+        this.query = input(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
+        this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
         this.filter = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BuildInFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BuildInFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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
@@ -1678,7 +1678,7 @@ class BuildInFilterComponent {
     }
   `, 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.2.14", ngImport: i0, type: BuildInFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BuildInFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-build-in-table-filter',
@@ -1720,10 +1720,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class CustomFilterComponent {
     constructor() {
-        this.query = input(null);
-        this.inputClass = input('');
-        this.source = input.required();
-        this.column = input.required();
+        this.query = input(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
+        this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
         this.filter = output();
         this.componentInputs = computed(() => {
             let inputs = {
@@ -1740,7 +1740,7 @@ class CustomFilterComponent {
                 }
             }
             return inputs;
-        });
+        }, ...(ngDevMode ? [{ debugName: "componentInputs" }] : []));
     }
     ngOnInit() {
         const columnFilter = this.column().filter;
@@ -1748,14 +1748,14 @@ class CustomFilterComponent {
             this.customFilterComponent = columnFilter.component;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CustomFilterComponent, isStandalone: true, selector: "ng2-custom-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CustomFilterComponent, isStandalone: true, selector: "ng2-custom-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: `
     @if (customFilterComponent) {
       <ng-template *ngComponentOutlet="customFilterComponent; inputs: componentInputs()"></ng-template>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ng2-custom-table-filter',
@@ -1771,15 +1771,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class FilterComponent {
     constructor() {
-        this.column = input.required();
-        this.source = input.required();
-        this.inputClass = input('');
+        this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
         this.query = computed(() => {
             const columnFilter = this.source()
                 .getFilters()
                 .find((filter) => filter.field === this.column().id);
             return columnFilter?.search ?? null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "query" }] : []));
     }
     onFilter(query) {
         const columnFilter = this.column().filter;
@@ -1790,8 +1790,8 @@ class FilterComponent {
             filter: this.column().filterFunction,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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()) {
@@ -1818,7 +1818,7 @@ class FilterComponent {
     }
   `, 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.2.14", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-filter', template: `
     @if (column().isFilterable) {
@@ -1853,9 +1853,9 @@ class MobileFiltersComponent {
         this.overlay = inject(Overlay);
         this.contentTemplate = viewChild.required(CdkPortal);
         this.reference = viewChild.required('reference');
-        this.grid = input.required();
-        this.source = input.required();
-        this.filterInputClass = input.required();
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.filterInputClass = input.required(...(ngDevMode ? [{ debugName: "filterInputClass" }] : []));
     }
     clearAllFilters() {
         this.source().setFilters([]);
@@ -1888,24 +1888,24 @@ class MobileFiltersComponent {
             backdropClass: 'cdk-overlay-transparent-backdrop',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MobileFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: MobileFiltersComponent, isStandalone: true, selector: "ng2-mobile-filters", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, filterInputClass: { classPropertyName: "filterInputClass", publicName: "filterInputClass", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: CdkPortal, descendants: true, isSignal: true }, { propertyName: "reference", first: true, predicate: ["reference"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #reference class=\"filter-toggle\" (click)=\"show()\" aria-label=\"Toggle filters\">\n  <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n    <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n    <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n    <g id=\"SVGRepo_iconCarrier\">\n      <path stroke=\"#000000\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n    </g>\n  </svg>\n</button>\n\n<ng-template cdk-portal>\n  <div class=\"dropdown table-filter-dropdown\">\n    <div class=\"dropdown-header\">\n      <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n        reset all\n      </button>\n      <button type=\"button\" class=\"close-dialog-button\" (click)=\"hide()\" aria-label=\"Close dropdown\">\n        <span></span>\n      </button>\n    </div>\n    <div class=\"dropdown-content\">\n      <div class=\"ng2-smart-mobil-filters\">\n        @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n          @if (column.isFilterable) {\n            <div class=\"ng2-smart-filter\">\n              <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n              <ng2-smart-table-filter [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n              </ng2-smart-table-filter>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.filter-toggle svg{height:1rem;width:1rem}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MobileFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MobileFiltersComponent, isStandalone: true, selector: "ng2-mobile-filters", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, filterInputClass: { classPropertyName: "filterInputClass", publicName: "filterInputClass", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: CdkPortal, descendants: true, isSignal: true }, { propertyName: "reference", first: true, predicate: ["reference"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #reference class=\"filter-toggle\" (click)=\"show()\" aria-label=\"Toggle filters\">\n  <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n    <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n    <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n    <g id=\"SVGRepo_iconCarrier\">\n      <path stroke=\"#000000\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n    </g>\n  </svg>\n</button>\n\n<ng-template cdk-portal>\n  <div class=\"dropdown table-filter-dropdown\">\n    <div class=\"dropdown-header\">\n      <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n        reset all\n      </button>\n      <button type=\"button\" class=\"close-dialog-button\" (click)=\"hide()\" aria-label=\"Close dropdown\">\n        <span></span>\n      </button>\n    </div>\n    <div class=\"dropdown-content\">\n      <div class=\"ng2-smart-mobil-filters\">\n        @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n          @if (column.isFilterable) {\n            <div class=\"ng2-smart-filter\">\n              <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n              <ng2-smart-table-filter [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n              </ng2-smart-table-filter>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.filter-toggle svg{height:1rem;width:1rem}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MobileFiltersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MobileFiltersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-mobile-filters', imports: [FilterComponent, PortalModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #reference class=\"filter-toggle\" (click)=\"show()\" aria-label=\"Toggle filters\">\n  <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n    <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n    <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n    <g id=\"SVGRepo_iconCarrier\">\n      <path stroke=\"#000000\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n    </g>\n  </svg>\n</button>\n\n<ng-template cdk-portal>\n  <div class=\"dropdown table-filter-dropdown\">\n    <div class=\"dropdown-header\">\n      <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n        reset all\n      </button>\n      <button type=\"button\" class=\"close-dialog-button\" (click)=\"hide()\" aria-label=\"Close dropdown\">\n        <span></span>\n      </button>\n    </div>\n    <div class=\"dropdown-content\">\n      <div class=\"ng2-smart-mobil-filters\">\n        @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n          @if (column.isFilterable) {\n            <div class=\"ng2-smart-filter\">\n              <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n              <ng2-smart-table-filter [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n              </ng2-smart-table-filter>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </div>\n</ng-template>\n", styles: [".dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.filter-toggle svg{height:1rem;width:1rem}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"] }]
         }] });
 
 class TheadFiltersRowComponent {
     constructor() {
-        this.grid = input.required();
-        this.source = input.required();
-        this.withoutCreateButton = input(false);
-        this.inputClass = input('');
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.withoutCreateButton = input(false, ...(ngDevMode ? [{ debugName: "withoutCreateButton" }] : []));
+        this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
         this.create = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
     @if (grid().isMultiSelectVisible()) {
       <th></th>
     }
@@ -1923,7 +1923,7 @@ class TheadFiltersRowComponent {
     }
   `, 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.2.14", ngImport: i0, type: TheadFiltersRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TheadFiltersRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-thead-filters-row]',
@@ -1951,19 +1951,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class ActionsTitleComponent {
     constructor() {
-        this.grid = input.required();
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
         this.actionsColumnTitle = computed(() => {
             const actions = this.grid().settings().actions;
             if (!actions) {
                 return 'Actions';
             }
             return actions.columnTitle || 'Actions';
-        });
+        }, ...(ngDevMode ? [{ debugName: "actionsColumnTitle" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionsTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ActionsTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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.2.14", ngImport: i0, type: ActionsTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ActionsTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-actions-title]',
@@ -1977,12 +1977,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class CheckboxSelectAllComponent {
     constructor() {
-        this.grid = input.required();
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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.2.14", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-checkbox-select-all]',
@@ -1994,13 +1994,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class TheadTitlesRowComponent {
     constructor() {
-        this.grid = input.required();
-        this.source = input.required();
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
         this.sortEmit = output();
         this.selectAllRows = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: { sortEmit: "sortEmit", selectAllRows: "selectAllRows" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: { sortEmit: "sortEmit", selectAllRows: "selectAllRows" }, ngImport: i0, template: `
     @if (grid().isMultiSelectVisible()) {
       <th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
     }
@@ -2020,7 +2020,7 @@ class TheadTitlesRowComponent {
     }
   `, 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: ["currentSort", "column"], outputs: ["sortEmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[ng2-st-thead-titles-row]',
@@ -2050,33 +2050,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 
 class Ng2SmartTableTheadComponent {
     constructor() {
-        this.grid = input.required();
-        this.source = input.required();
-        this.isMobileView = input(false);
+        this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.isMobileView = input(false, ...(ngDevMode ? [{ debugName: "isMobileView" }] : []));
         this.selectAllRows = output();
         this.create = output();
         this.isHideHeader = computed(() => {
             return this.grid().settings()?.hideHeader || false;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isHideHeader" }] : []));
         this.isHideSubHeader = computed(() => {
             return this.grid().settings()?.hideSubHeader || false;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isHideSubHeader" }] : []));
         this.columnsWithSort = computed(() => this.grid()
             .dataSet.getColumns()
-            .filter((column) => column.isSortable));
-        this.columnsWithSortLength = computed(() => this.columnsWithSort().length);
+            .filter((column) => column.isSortable), ...(ngDevMode ? [{ debugName: "columnsWithSort" }] : []));
+        this.columnsWithSortLength = computed(() => this.columnsWithSort().length, ...(ngDevMode ? [{ debugName: "columnsWithSortLength" }] : []));
         this.columnsWithFiltersLength = computed(() => this.grid()
             .dataSet.getColumns()
-            .filter((column) => column.isFilterable).length);
-        this.currentSortConfig = computed(() => this.source().getSort());
-        this.filterDropdownIsOpen = signal(false);
+            .filter((column) => column.isFilterable).length, ...(ngDevMode ? [{ debugName: "columnsWithFiltersLength" }] : []));
+        this.currentSortConfig = computed(() => this.source().getSort(), ...(ngDevMode ? [{ debugName: "currentSortConfig" }] : []));
+        this.filterDropdownIsOpen = signal(false, ...(ngDevMode ? [{ debugName: "filterDropdownIsOpen" }] : []));
         this.filterInputClass = computed(() => {
             const filterOptions = this.grid().settings()?.filter;
             if (!filterOptions) {
                 return '';
             }
             return filterOptions.inputClass || '';
-        });
+        }, ...(ngDevMode ? [{ debugName: "filterInputClass" }] : []));
         this.lastColumnSort = null;
     }
     toggleDropdown(state) {
@@ -2130,10 +2130,10 @@ class Ng2SmartTableTheadComponent {
         this.lastColumnSort.count++;
         return newSort;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (isMobileView()) {\n  <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n    <th colspan=\"50\">\n      <div class=\"mobile-header-content\">\n        <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n        @if (columnsWithSortLength()) {\n          <div class=\"current-column-title\">\n            @if (currentSortConfig(); as sortConfig) {\n              <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n                {{ sortConfig.title }}\n                <span class=\"sort-direction\">{{ sortConfig.direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n              </a>\n            }\n\n            @if (columnsWithSortLength() > 1) {\n              <button\n                #sortTrigger=\"cdkOverlayOrigin\"\n                cdkOverlayOrigin\n                class=\"sort-dropdown-toggle-button\"\n                (click)=\"toggleDropdown()\"\n                [class.active]=\"filterDropdownIsOpen()\"\n                aria-label=\"Toggle sort options\">\n                <span class=\"sort-icon\">\u25BC</span>\n              </button>\n              <ng-template\n                cdkConnectedOverlay\n                [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n                [cdkConnectedOverlayOpen]=\"filterDropdownIsOpen()\"\n                [cdkConnectedOverlayWidth]=\"300\"\n                [cdkConnectedOverlayPositions]=\"[\n                  {\n                    originX: 'center',\n                    originY: 'bottom',\n                    overlayX: 'center',\n                    overlayY: 'top',\n                  },\n                ]\"\n                (overlayOutsideClick)=\"toggleDropdown(false)\">\n                <div class=\"dropdown\">\n                  <div class=\"dropdown-header\">\n                    <p></p>\n                    <button\n                      type=\"button\"\n                      class=\"close-dialog-button\"\n                      (click)=\"toggleDropdown(false)\"\n                      aria-label=\"Close filters\">\n                      <span></span>\n                    </button>\n                  </div>\n                  <div class=\"dropdown-content\">\n                    @for (column of columnsWithSort(); track $index) {\n                      <th class=\"titles\">\n                        <ng2-st-column-title\n                          class=\"sort-option\"\n                          [column]=\"column\"\n                          (sortEmit)=\"sortByColumn(column)\"\n                          [currentSort]=\"currentSortConfig()\"></ng2-st-column-title>\n                      </th>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n            }\n          </div>\n        }\n\n        <div class=\"header-actions\">\n          @if (columnsWithFiltersLength()) {\n            <ng2-mobile-filters [grid]=\"grid()\" [source]=\"source()\" [filterInputClass]=\"filterInputClass()\">\n            </ng2-mobile-filters>\n          }\n        </div>\n      </div>\n    </th>\n  </tr>\n} @else {\n  <!-- Desktop view header -->\n  @if (!isHideHeader()) {\n    <tr\n      ng2-st-thead-titles-row\n      class=\"ng2-smart-titles\"\n      [grid]=\"grid()\"\n      [source]=\"source()\"\n      (sortEmit)=\"sortByColumn($event)\"\n      (selectAllRows)=\"selectAllRows.emit()\"></tr>\n  }\n\n  @if (!isHideSubHeader()) {\n    <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n  }\n}\n\n<ng-template #filtersRow>\n  <tr\n    ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [inputClass]=\"filterInputClass()\"\n    [withoutCreateButton]=\"isMobileView()\"\n    [source]=\"source()\"\n    (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}.dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sortEmit", "selectAllRows"] }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: MobileFiltersComponent, selector: "ng2-mobile-filters", inputs: ["grid", "source", "filterInputClass"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["currentSort", "column"], outputs: ["sortEmit"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source", "withoutCreateButton", "inputClass"], outputs: ["create"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (isMobileView()) {\n  <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n    <th colspan=\"50\">\n      <div class=\"mobile-header-content\">\n        <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n        @if (columnsWithSortLength()) {\n          <div class=\"current-column-title\">\n            @if (currentSortConfig(); as sortConfig) {\n              <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n                {{ sortConfig.title }}\n                <span class=\"sort-direction\">{{ sortConfig.direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n              </a>\n            }\n\n            @if (columnsWithSortLength() > 1) {\n              <button\n                #sortTrigger=\"cdkOverlayOrigin\"\n                cdkOverlayOrigin\n                class=\"sort-dropdown-toggle-button\"\n                (click)=\"toggleDropdown()\"\n                [class.active]=\"filterDropdownIsOpen()\"\n                aria-label=\"Toggle sort options\">\n                <span class=\"sort-icon\">\u25BC</span>\n              </button>\n              <ng-template\n                cdkConnectedOverlay\n                [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n                [cdkConnectedOverlayOpen]=\"filterDropdownIsOpen()\"\n                [cdkConnectedOverlayWidth]=\"300\"\n                [cdkConnectedOverlayPositions]=\"[\n                  {\n                    originX: 'center',\n                    originY: 'bottom',\n                    overlayX: 'center',\n                    overlayY: 'top',\n                  },\n                ]\"\n                (overlayOutsideClick)=\"toggleDropdown(false)\">\n                <div class=\"dropdown\">\n                  <div class=\"dropdown-header\">\n                    <p></p>\n                    <button\n                      type=\"button\"\n                      class=\"close-dialog-button\"\n                      (click)=\"toggleDropdown(false)\"\n                      aria-label=\"Close filters\">\n                      <span></span>\n                    </button>\n                  </div>\n                  <div class=\"dropdown-content\">\n                    @for (column of columnsWithSort(); track $index) {\n                      <th class=\"titles\">\n                        <ng2-st-column-title\n                          class=\"sort-option\"\n                          [column]=\"column\"\n                          (sortEmit)=\"sortByColumn(column)\"\n                          [currentSort]=\"currentSortConfig()\"></ng2-st-column-title>\n                      </th>\n                    }\n                  </div>\n                </div>\n              </ng-template>\n            }\n          </div>\n        }\n\n        <div class=\"header-actions\">\n          @if (columnsWithFiltersLength()) {\n            <ng2-mobile-filters [grid]=\"grid()\" [source]=\"source()\" [filterInputClass]=\"filterInputClass()\">\n            </ng2-mobile-filters>\n          }\n        </div>\n      </div>\n    </th>\n  </tr>\n} @else {\n  <!-- Desktop view header -->\n  @if (!isHideHeader()) {\n    <tr\n      ng2-st-thead-titles-row\n      class=\"ng2-smart-titles\"\n      [grid]=\"grid()\"\n      [source]=\"source()\"\n      (sortEmit)=\"sortByColumn($event)\"\n      (selectAllRows)=\"selectAllRows.emit()\"></tr>\n  }\n\n  @if (!isHideSubHeader()) {\n    <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n  }\n}\n\n<ng-template #filtersRow>\n  <tr\n    ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid()\"\n    [inputClass]=\"filterInputClass()\"\n    [withoutCreateButton]=\"isMobileView()\"\n    [source]=\"source()\"\n    (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}.dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sortEmit", "selectAllRows"] }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: MobileFiltersComponent, selector: "ng2-mobile-filters", inputs: ["grid", "source", "filterInputClass"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["currentSort", "column"], outputs: ["sortEmit"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source", "withoutCreateButton", "inputClass"], outputs: ["create"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
             type: Component,
             args: [{ selector: '[ng2-st-thead]', imports: [
                         TheadTitlesRowComponent,
@@ -2150,16 +2150,16 @@ class DataSet {
     constructor(dataList = [], columnSettings, editorInputClass) {
         this.columnSettings = columnSettings;
         this.editorInputClass = editorInputClass;
-        this.data = signal([]);
-        this.columns = signal([]);
-        this.rows = signal([]);
+        this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+        this.rows = signal([], ...(ngDevMode ? [{ debugName: "rows" }] : []));
         this.selectedRowsData = [];
-        this.getColumns = computed(() => this.columns());
-        this.getVisibleColumns = computed(() => this.columns().filter((column) => !column.hide));
+        this.getColumns = computed(() => this.columns(), ...(ngDevMode ? [{ debugName: "getColumns" }] : []));
+        this.getVisibleColumns = computed(() => this.columns().filter((column) => !column.hide), ...(ngDevMode ? [{ debugName: "getVisibleColumns" }] : []));
         this.getRows = computed(() => {
             return this.rows();
-        });
-        this.isAllSelected = computed(() => this.rows().every((row) => row.isSelected()));
+        }, ...(ngDevMode ? [{ debugName: "getRows" }] : []));
+        this.isAllSelected = computed(() => this.rows().every((row) => row.isSelected()), ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
         this.createColumns(columnSettings);
         this.setData(dataList);
         this.createNewRow();
@@ -2249,29 +2249,29 @@ class DataSet {
 class Grid {
     constructor(source, settings) {
         this.currentColumnsSortState = [];
-        this.settings = signal({});
-        this.createFormShown = signal(false);
+        this.settings = signal({}, ...(ngDevMode ? [{ debugName: "settings" }] : []));
+        this.createFormShown = signal(false, ...(ngDevMode ? [{ debugName: "createFormShown" }] : []));
         this.isMultiSelectVisible = computed(() => {
             return this.settings().selectMode === 'multi';
-        });
+        }, ...(ngDevMode ? [{ debugName: "isMultiSelectVisible" }] : []));
         this.isActionsVisible = computed(() => {
             const actions = this.settings().actions;
             if (!actions)
                 return false;
             return actions.edit || actions.delete || !!actions?.custom?.length;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isActionsVisible" }] : []));
         this.actionIsOnLeft = computed(() => {
             return (this.settings().actionsPosition || 'left') === 'left';
-        });
+        }, ...(ngDevMode ? [{ debugName: "actionIsOnLeft" }] : []));
         this.actionIsOnRight = computed(() => {
             return this.settings().actionsPosition === 'right';
-        });
+        }, ...(ngDevMode ? [{ debugName: "actionIsOnRight" }] : []));
         this.columnSortDragDelay = computed(() => {
             return this.settings().columnSort?.dragDelay || 0;
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnSortDragDelay" }] : []));
         this.columnStateStorageKey = computed(() => {
             return this.settings().columnSort?.stateStorageKey;
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnStateStorageKey" }] : []));
         this.setSource(source, settings);
         this.setSettings(settings);
     }
@@ -2530,12 +2530,12 @@ class Grid {
 }
 
 class Ng2SmartTableComponent {
-    constructor(elementRef, ngZone, injector) {
-        this.elementRef = elementRef;
-        this.ngZone = ngZone;
-        this.injector = injector;
-        this.source = input.required();
-        this.settings = input.required();
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        this.injector = inject(Injector);
+        this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
+        this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
         /**
          * @description If you want to display pagination in your custom container, you can pass it to "paginationSlot".
          * @example
@@ -2549,7 +2549,7 @@ class Ng2SmartTableComponent {
          *  read: ViewContainerRef,
          * });
          */
-        this.paginationSlot = input();
+        this.paginationSlot = input(...(ngDevMode ? [undefined, { debugName: "paginationSlot" }] : []));
         /**
          * @description if you want to render custom data inside a container with pagination you can pass a TemplateRef
          * @example
@@ -2570,7 +2570,7 @@ class Ng2SmartTableComponent {
          *    </ng-container>
          * </ng2-smart-table>
          */
-        this.paginationTemplateData = input();
+        this.paginationTemplateData = input(...(ngDevMode ? [undefined, { debugName: "paginationTemplateData" }] : []));
         this.multiRowSelect = output();
         this.rowClicked = output();
         this.columnsSorted = output();
@@ -2584,25 +2584,25 @@ class Ng2SmartTableComponent {
         this.custom = output();
         this.tableClass = computed(() => {
             return this.settings().attr?.class || '';
-        });
+        }, ...(ngDevMode ? [{ debugName: "tableClass" }] : []));
         this.tableId = computed(() => {
             return this.settings().attr?.id || getRandomId();
-        });
+        }, ...(ngDevMode ? [{ debugName: "tableId" }] : []));
         this.isPagerDisplay = computed(() => {
             const { pager } = this.settings();
             return pager ? pager.display : false;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isPagerDisplay" }] : []));
         this.rowClassFunction = computed(() => {
             const settings = this.settings();
             return settings.rowClassFunction ? (rowData) => settings.rowClassFunction(rowData) : () => '';
-        });
-        this.isMobileView = signal(false);
+        }, ...(ngDevMode ? [{ debugName: "rowClassFunction" }] : []));
+        this.isMobileView = signal(false, ...(ngDevMode ? [{ debugName: "isMobileView" }] : []));
         this.tableWidthMobileBreakpoint = computed(() => {
             return this.settings().tableWidthMobileBreakpoint;
-        });
+        }, ...(ngDevMode ? [{ debugName: "tableWidthMobileBreakpoint" }] : []));
         this.isExternalMode = computed(() => {
             return this.grid.settings().mode === 'external';
-        });
+        }, ...(ngDevMode ? [{ debugName: "isExternalMode" }] : []));
         this.resizeObserver = null;
         this.resizeDebounceTimer = null;
         this.paginationComponentRef = null;
@@ -2748,13 +2748,13 @@ class Ng2SmartTableComponent {
             this.resizeDebounceTimer = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Ng2SmartTableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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 }, paginationSlot: { classPropertyName: "paginationSlot", publicName: "paginationSlot", isSignal: true, isRequired: false, transformFunction: null }, paginationTemplateData: { classPropertyName: "paginationTemplateData", publicName: "paginationTemplateData", isSignal: true, isRequired: false, 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() && !paginationSlot()) {\n  <ng2-smart-table-pager [source]=\"source()\" [content]=\"paginationTemplateData()\">\n    <ng-content select=\"[pager-content]\"></ng-content>\n  </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}:host .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}:host .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}:host .close-dialog-button:after,:host .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}:host .close-dialog-button:before{rotate:45deg}:host .close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "isMobileView"], outputs: ["selectAllRows", "create"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "rowClassFunction", "isMobileView"], outputs: ["edit", "editConfirmed", "editCancel", "createConfirmed", "deleteEmitter", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 }, paginationSlot: { classPropertyName: "paginationSlot", publicName: "paginationSlot", isSignal: true, isRequired: false, transformFunction: null }, paginationTemplateData: { classPropertyName: "paginationTemplateData", publicName: "paginationTemplateData", isSignal: true, isRequired: false, 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() && !paginationSlot()) {\n  <ng2-smart-table-pager [source]=\"source()\" [content]=\"paginationTemplateData()\">\n    <ng-content select=\"[pager-content]\"></ng-content>\n  </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}:host .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}:host .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}:host .close-dialog-button:after,:host .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}:host .close-dialog-button:before{rotate:45deg}:host .close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "isMobileView"], outputs: ["selectAllRows", "create"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "rowClassFunction", "isMobileView"], outputs: ["edit", "editConfirmed", "editCancel", "createConfirmed", "deleteEmitter", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table', imports: [Ng2SmartTableTheadComponent, Ng2SmartTableTbodyComponent, PagerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n  <thead\n    ng2-st-thead\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [isMobileView]=\"isMobileView()\"\n    (create)=\"createEmitted()\"\n    (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n  <tbody\n    ng2-st-tbody\n    [grid]=\"grid\"\n    [source]=\"source()\"\n    [rowClassFunction]=\"rowClassFunction()\"\n    [isMobileView]=\"isMobileView()\"\n    (deleteEmitter)=\"deleEmitted($event)\"\n    (edit)=\"editEmitted($event)\"\n    (editConfirmed)=\"editConfirmed($event)\"\n    (editCancel)=\"editCanceled($event)\"\n    (createConfirmed)=\"createConfirmed()\"\n    (customActionEmitter)=\"customActionEmitted($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay() && !paginationSlot()) {\n  <ng2-smart-table-pager [source]=\"source()\" [content]=\"paginationTemplateData()\">\n    <ng-content select=\"[pager-content]\"></ng-content>\n  </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}:host .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}:host .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}:host .close-dialog-button:after,:host .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}:host .close-dialog-button:before{rotate:45deg}:host .close-dialog-button:after{position:absolute;rotate:-45deg}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Injector }] });
+        }] });
 
 /**
  * Generated bundle index. Do not edit.