@den4ik92/ng2-smart-table 18.2.13 → 19.0.4

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

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, ViewContainerRef, ViewChild, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { output, Component, Input, ViewContainerRef, ViewChild, ChangeDetectionStrategy, inject, ElementRef } from '@angular/core';
 import { Subject } from 'rxjs';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { UntypedFormControl, NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@angular/forms';
+import { FormsModule, UntypedFormControl, ReactiveFormsModule, NgControl } from '@angular/forms';
+import { NgComponentOutlet } from '@angular/common';
 import { debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
 
 function prepareValue(value) { return value; }
@@ -53,28 +52,20 @@ class Cell {
 class DefaultEditor {
     constructor() {
         this.inputClass = '';
-        this.onStopEditing = new EventEmitter();
-        this.onEdited = new EventEmitter();
-        this.onClick = new EventEmitter();
+        this.onStopEditing = output();
+        this.onEdited = output();
+        this.onClick = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DefaultEditor, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { onStopEditing: "onStopEditing", onEdited: "onEdited", onClick: "onClick" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DefaultEditor, isStandalone: true, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { onStopEditing: "onStopEditing", onEdited: "onEdited", onClick: "onClick" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditor, decorators: [{
             type: Component,
-            args: [{
-                    template: '',
-                }]
+            args: [{ template: '' }]
         }], propDecorators: { cell: [{
                 type: Input
             }], inputClass: [{
                 type: Input
-            }], onStopEditing: [{
-                type: Output
-            }], onEdited: [{
-                type: Output
-            }], onClick: [{
-                type: Output
             }] } });
 
 class Column {
@@ -156,7 +147,7 @@ class DefaultFilter {
         this.delay = 300;
         this.query = '';
         this.inputClass = '';
-        this.filter = new EventEmitter();
+        this.filter = output();
     }
     ngOnDestroy() {
         if (this.changesSubscription) {
@@ -166,22 +157,18 @@ class DefaultFilter {
     setFilter() {
         this.filter.emit(this.query);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DefaultFilter, selector: "ng-component", inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: DefaultFilter, isStandalone: true, selector: "ng-component", inputs: { query: "query", inputClass: "inputClass", column: "column" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultFilter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilter, decorators: [{
             type: Component,
-            args: [{
-                    template: '',
-                }]
+            args: [{ template: '' }]
         }], propDecorators: { query: [{
                 type: Input
             }], inputClass: [{
                 type: Input
             }], column: [{
                 type: Input
-            }], filter: [{
-                type: Output
             }] } });
 
 class Row {
@@ -443,20 +430,44 @@ class Deferred {
 }
 // getDeepFromObject({result: {data: 1}}, 'result.data', 2); // returns 1
 function getDeepFromObject(object = {}, name, defaultValue = null) {
-    const keys = name.split('.');
-    // clone the object
-    let level = deepExtend({}, object);
-    keys.forEach((k) => {
-        if (level && typeof level[k] !== 'undefined') {
-            level = level[k];
-        }
-    });
-    return typeof level === 'undefined' ? defaultValue : level;
+    try {
+        let level = deepExtend({}, object);
+        const keys = name.split('.');
+        if (keys.length === 1) {
+            return level[keys[0]] ?? defaultValue;
+        }
+        keys.forEach((k) => {
+            if (level && typeof level[k] !== 'undefined') {
+                level = level[k];
+            }
+        });
+    }
+    catch {
+        return defaultValue;
+    }
 }
 function getPageForRowIndex(index, perPage) {
     // we need to add 1 to convert 0-based index to 1-based page number.
     return Math.floor(index / perPage) + 1;
 }
+function cloneArrayOfObject(array) {
+    return array.map((obj) => Object.assign({}, obj));
+}
+function setLocalStorage(key, value) {
+    localStorage.setItem(key, JSON.stringify(value));
+}
+function getLocalStorage(key) {
+    const valueString = localStorage.getItem(key);
+    if (!valueString) {
+        return null;
+    }
+    try {
+        return JSON.parse(valueString);
+    }
+    catch {
+        return null;
+    }
+}
 
 class LocalDataSource extends DataSource {
     constructor(data = []) {
@@ -716,6 +727,304 @@ class LocalDataSource extends DataSource {
     }
 }
 
+class PagerComponent {
+    constructor() {
+        this.perPageSelect = [];
+        this.changePage = output();
+        this.currentPerPage = 0;
+        this.pages = [];
+        this.page = 1;
+        this.count = 0;
+        this.perPage = 0;
+    }
+    ngOnChanges(changes) {
+        if (changes["source"]) {
+            if (!changes["source"].firstChange && this.dataChangedSub) {
+                this.dataChangedSub.unsubscribe();
+            }
+            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
+                const paging = this.source.getPaging();
+                if (paging) {
+                    this.page = paging.page;
+                    this.perPage = paging.perPage;
+                }
+                this.currentPerPage = this.perPage;
+                this.count = this.source.count();
+                if (this.isPageOutOfBounce()) {
+                    this.source.setPage(--this.page);
+                }
+                this.processPageChange(dataChanges);
+                this.initPages();
+            });
+        }
+    }
+    /**
+     * We change the page here depending on the action performed against data source
+     * if a new element was added to the end of the table - then change the page to the last
+     * if a new element was added to the beginning of the table - then to the first page
+     * @param changes
+     */
+    processPageChange(changes) {
+        if (changes["action"] === "prepend") {
+            this.source.setPage(1);
+        }
+        if (changes["action"] === "append") {
+            this.source.setPage(this.getLast());
+        }
+    }
+    shouldShow() {
+        return this.source.count() > this.perPage;
+    }
+    paginate(page) {
+        this.source.setPage(page);
+        this.page = page;
+        this.changePage.emit({ page });
+        return false;
+    }
+    next() {
+        return this.paginate(this.getPage() + 1);
+    }
+    prev() {
+        return this.paginate(this.getPage() - 1);
+    }
+    getPage() {
+        return this.page;
+    }
+    getPages() {
+        return this.pages;
+    }
+    getLast() {
+        return Math.ceil(this.count / this.perPage);
+    }
+    isPageOutOfBounce() {
+        return (this.page * this.perPage >= this.count + this.perPage && this.page > 1);
+    }
+    initPages() {
+        const pagesCount = this.getLast();
+        let showPagesCount = 4;
+        showPagesCount = pagesCount < showPagesCount ? pagesCount : showPagesCount;
+        this.pages = [];
+        if (this.shouldShow()) {
+            let middleOne = Math.ceil(showPagesCount / 2);
+            middleOne = this.page >= middleOne ? this.page : middleOne;
+            let lastOne = middleOne + Math.floor(showPagesCount / 2);
+            lastOne = lastOne >= pagesCount ? pagesCount : lastOne;
+            const firstOne = lastOne - showPagesCount + 1;
+            for (let i = firstOne; i <= lastOne; i++) {
+                this.pages.push(i);
+            }
+        }
+    }
+    onChangePerPage() {
+        const paging = this.source.getPaging();
+        if (paging) {
+            paging.perPage = this.currentPerPage * 1;
+        }
+        this.source.refresh();
+        this.initPages();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
+    @if (shouldShow()) {
+    <nav class="ng2-smart-pagination-nav">
+      <ul class="ng2-smart-pagination pagination">
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.disabled]="getPage() === 1"
+        >
+          <a
+            class="ng2-smart-page-link page-link"
+            href="#"
+            (click)="getPage() === 1 ? false : paginate(1)"
+            aria-label="First"
+          >
+            <span aria-hidden="true">&laquo;</span>
+            <span class="sr-only">First</span>
+          </a>
+        </li>
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.disabled]="getPage() === 1"
+        >
+          <a
+            class="ng2-smart-page-link page-link page-link-prev"
+            href="#"
+            (click)="getPage() === 1 ? false : prev()"
+            aria-label="Prev"
+          >
+            <span aria-hidden="true">&lt;</span>
+            <span class="sr-only">Prev</span>
+          </a>
+        </li>
+        @for (page of getPages(); track page) {
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.active]="getPage() === page"
+        >
+          @if (getPage() === page) {
+          <span class="ng2-smart-page-link page-link"
+            >{{ page }} <span class="sr-only">(current)</span></span
+          >
+          } @if (getPage() !== page) {
+          <a
+            class="ng2-smart-page-link page-link"
+            href="#"
+            (click)="paginate(page)"
+            >{{ page }}</a
+          >
+          }
+        </li>
+        }
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.disabled]="getPage() === getLast()"
+        >
+          <a
+            class="ng2-smart-page-link page-link page-link-next"
+            href="#"
+            (click)="getPage() === getLast() ? false : next()"
+            aria-label="Next"
+          >
+            <span aria-hidden="true">&gt;</span>
+            <span class="sr-only">Next</span>
+          </a>
+        </li>
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.disabled]="getPage() === getLast()"
+        >
+          <a
+            class="ng2-smart-page-link page-link"
+            href="#"
+            (click)="getPage() === getLast() ? false : paginate(getLast())"
+            aria-label="Last"
+          >
+            <span aria-hidden="true">&raquo;</span>
+            <span class="sr-only">Last</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    } @if (perPageSelect && perPageSelect.length > 0) {
+    <nav class="ng2-smart-pagination-per-page">
+      <label for="per-page"> Per Page: </label>
+      <select
+        (change)="onChangePerPage()"
+        [(ngModel)]="currentPerPage"
+        id="per-page"
+      >
+        @for (item of perPageSelect; track item) {
+        <option [value]="item">{{ item }}</option>
+        }
+      </select>
+    </nav>
+    }
+  `, isInline: true, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "ng2-smart-table-pager", template: `
+    @if (shouldShow()) {
+    <nav class="ng2-smart-pagination-nav">
+      <ul class="ng2-smart-pagination pagination">
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.disabled]="getPage() === 1"
+        >
+          <a
+            class="ng2-smart-page-link page-link"
+            href="#"
+            (click)="getPage() === 1 ? false : paginate(1)"
+            aria-label="First"
+          >
+            <span aria-hidden="true">&laquo;</span>
+            <span class="sr-only">First</span>
+          </a>
+        </li>
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.disabled]="getPage() === 1"
+        >
+          <a
+            class="ng2-smart-page-link page-link page-link-prev"
+            href="#"
+            (click)="getPage() === 1 ? false : prev()"
+            aria-label="Prev"
+          >
+            <span aria-hidden="true">&lt;</span>
+            <span class="sr-only">Prev</span>
+          </a>
+        </li>
+        @for (page of getPages(); track page) {
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.active]="getPage() === page"
+        >
+          @if (getPage() === page) {
+          <span class="ng2-smart-page-link page-link"
+            >{{ page }} <span class="sr-only">(current)</span></span
+          >
+          } @if (getPage() !== page) {
+          <a
+            class="ng2-smart-page-link page-link"
+            href="#"
+            (click)="paginate(page)"
+            >{{ page }}</a
+          >
+          }
+        </li>
+        }
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.disabled]="getPage() === getLast()"
+        >
+          <a
+            class="ng2-smart-page-link page-link page-link-next"
+            href="#"
+            (click)="getPage() === getLast() ? false : next()"
+            aria-label="Next"
+          >
+            <span aria-hidden="true">&gt;</span>
+            <span class="sr-only">Next</span>
+          </a>
+        </li>
+        <li
+          class="ng2-smart-page-item page-item"
+          [class.disabled]="getPage() === getLast()"
+        >
+          <a
+            class="ng2-smart-page-link page-link"
+            href="#"
+            (click)="getPage() === getLast() ? false : paginate(getLast())"
+            aria-label="Last"
+          >
+            <span aria-hidden="true">&raquo;</span>
+            <span class="sr-only">Last</span>
+          </a>
+        </li>
+      </ul>
+    </nav>
+    } @if (perPageSelect && perPageSelect.length > 0) {
+    <nav class="ng2-smart-pagination-per-page">
+      <label for="per-page"> Per Page: </label>
+      <select
+        (change)="onChangePerPage()"
+        [(ngModel)]="currentPerPage"
+        id="per-page"
+      >
+        @for (item of perPageSelect; track item) {
+        <option [value]="item">{{ item }}</option>
+        }
+      </select>
+    </nav>
+    }
+  `, standalone: true, imports: [FormsModule], styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"] }]
+        }], propDecorators: { source: [{
+                type: Input
+            }], perPageSelect: [{
+                type: Input
+            }] } });
+
 class DataSet {
     constructor(data = [], columnSettings) {
         this.columnSettings = columnSettings;
@@ -815,9 +1124,13 @@ class Grid {
         this.createFormShown = false;
         this.onSelectRowSource = new Subject();
         this.onDeselectRowSource = new Subject();
+        this.currentColumnsSortState = [];
         this.setSettings(settings);
         this.setSource(source);
     }
+    setColumnsSortedEmitter(emitter) {
+        this.columnsSortedEmitter = emitter;
+    }
     detach() {
         if (this.sourceOnChangedSubscription) {
             this.sourceOnChangedSubscription.unsubscribe();
@@ -845,6 +1158,12 @@ class Grid {
         return this.dataSet.newRow;
     }
     setSettings(settings) {
+        this.updateSettingsAndDataSet(settings);
+        if (this.getSetting('withColumnSort', false)) {
+            this.setColumnsSortState(settings.columns);
+        }
+    }
+    updateSettingsAndDataSet(settings) {
         this.settings = settings;
         this.dataSet = new DataSet([], this.getSetting("columns"));
         if (this.source) {
@@ -1023,251 +1342,81 @@ class Grid {
     getLastRow() {
         return this.dataSet.getLastRow();
     }
-}
-
-class PagerComponent {
-    constructor() {
-        this.perPageSelect = [];
-        this.changePage = new EventEmitter();
-        this.currentPerPage = 0;
-        this.pages = [];
-        this.page = 1;
-        this.count = 0;
-        this.perPage = 0;
-    }
-    ngOnChanges(changes) {
-        if (changes['source']) {
-            if (!changes['source'].firstChange && this.dataChangedSub) {
-                this.dataChangedSub.unsubscribe();
+    // ------------------------------- column sort
+    async getSortedTableColumns(newState, columns) {
+        const sortedArray = [];
+        newState.forEach((item2) => {
+            const index = columns.findIndex((item1) => item1.key === item2.key && item1.title === item2.title);
+            if (index > -1) {
+                sortedArray.push({ ...columns[index], hide: !!item2.hide });
             }
-            this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
-                const paging = this.source.getPaging();
-                if (paging) {
-                    this.page = paging.page;
-                    this.perPage = paging.perPage;
-                }
-                this.currentPerPage = this.perPage;
-                this.count = this.source.count();
-                if (this.isPageOutOfBounce()) {
-                    this.source.setPage(--this.page);
-                }
-                this.processPageChange(dataChanges);
-                this.initPages();
-            });
-        }
+        });
+        return Promise.resolve(sortedArray);
     }
-    /**
-     * We change the page here depending on the action performed against data source
-     * if a new element was added to the end of the table - then change the page to the last
-     * if a new element was added to the beginning of the table - then to the first page
-     * @param changes
-     */
-    processPageChange(changes) {
-        if (changes['action'] === 'prepend') {
-            this.source.setPage(1);
+    async applyColumnsSortState(state, emitEvent = true) {
+        this.currentColumnsSortState = this.getMergedColumnStates(state);
+        this.updateSettingsAndDataSet({
+            ...this.settings,
+            columns: await this.getSortedTableColumns(this.currentColumnsSortState, this.settings?.columns),
+        });
+        if (this.columnStateStorageKey) {
+            setLocalStorage(this.columnStateStorageKey, this.currentColumnsSortState);
         }
-        if (changes['action'] === 'append') {
-            this.source.setPage(this.getLast());
+        if (emitEvent) {
+            this.columnsSortedEmitter.emit(this.currentColumnsSortState);
         }
     }
-    shouldShow() {
-        return this.source.count() > this.perPage;
-    }
-    paginate(page) {
-        this.source.setPage(page);
-        this.page = page;
-        this.changePage.emit({ page });
-        return false;
-    }
-    next() {
-        return this.paginate(this.getPage() + 1);
-    }
-    prev() {
-        return this.paginate(this.getPage() - 1);
-    }
-    getPage() {
-        return this.page;
-    }
-    getPages() {
-        return this.pages;
-    }
-    getLast() {
-        return Math.ceil(this.count / this.perPage);
-    }
-    isPageOutOfBounce() {
-        return (this.page * this.perPage) >= (this.count + this.perPage) && this.page > 1;
-    }
-    initPages() {
-        const pagesCount = this.getLast();
-        let showPagesCount = 4;
-        showPagesCount = pagesCount < showPagesCount ? pagesCount : showPagesCount;
-        this.pages = [];
-        if (this.shouldShow()) {
-            let middleOne = Math.ceil(showPagesCount / 2);
-            middleOne = this.page >= middleOne ? this.page : middleOne;
-            let lastOne = middleOne + Math.floor(showPagesCount / 2);
-            lastOne = lastOne >= pagesCount ? pagesCount : lastOne;
-            const firstOne = lastOne - showPagesCount + 1;
-            for (let i = firstOne; i <= lastOne; i++) {
-                this.pages.push(i);
+    setColumnsSortState(columns) {
+        const columnsState = this.getColumnsStateFromSettings(columns);
+        if (this.columnStateStorageKey) {
+            const storageState = getLocalStorage(this.columnStateStorageKey);
+            if (!storageState) {
+                this.currentColumnsSortState = columnsState;
+                setLocalStorage(this.columnStateStorageKey, columnsState);
+                return;
             }
+            const merged = this.getMergedColumnStates(storageState, columnsState);
+            this.applyColumnsSortState(merged, false);
+            return;
         }
+        this.applyColumnsSortState(columnsState, false);
     }
-    onChangePerPage() {
-        const paging = this.source.getPaging();
-        if (paging) {
-            paging.perPage = this.currentPerPage * 1;
-        }
-        this.source.refresh();
-        this.initPages();
+    getColumnsStateFromSettings(columns) {
+        return (columns || this.settings.columns || []).map((column) => ({
+            key: column.key,
+            title: column.title,
+            hide: !!column.hide,
+            sortDisabled: !!column.sortDisabled,
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: { source: "source", perPageSelect: "perPageSelect" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (shouldShow()) {
-      <nav class="ng2-smart-pagination-nav">
-        <ul class="ng2-smart-pagination pagination">
-          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-            <a class="ng2-smart-page-link page-link" href="#"
-              (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
-              <span aria-hidden="true">&laquo;</span>
-              <span class="sr-only">First</span>
-            </a>
-          </li>
-          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-            <a class="ng2-smart-page-link page-link page-link-prev" href="#"
-              (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
-              <span aria-hidden="true">&lt;</span>
-              <span class="sr-only">Prev</span>
-            </a>
-          </li>
-          @for (page of getPages(); track page) {
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{active: getPage() == page}">
-              @if (getPage() == page) {
-                <span class="ng2-smart-page-link page-link"
-                  >{{ page }} <span class="sr-only">(current)</span></span>
-                }
-                @if (getPage() != page) {
-                  <a class="ng2-smart-page-link page-link" href="#"
-                  (click)="paginate(page)">{{ page }}</a>
-                }
-              </li>
+    getMergedColumnStates(newState, columnsState) {
+        const columnsSettings = columnsState || this.getColumnsStateFromSettings();
+        // merge new columns state with state from storage
+        const filtered = [];
+        newState.forEach((state) => {
+            const fined = columnsSettings.find((column) => column.title === state.title && column.key === state.key);
+            if (fined) {
+                filtered.push({ ...fined, hide: fined.sortDisabled ? fined.hide : state.hide });
             }
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{disabled: getPage() == getLast()}">
-              <a class="ng2-smart-page-link page-link page-link-next" href="#"
-                (click)="getPage() == getLast() ? false : next()" aria-label="Next">
-                <span aria-hidden="true">&gt;</span>
-                <span class="sr-only">Next</span>
-              </a>
-            </li>
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{disabled: getPage() == getLast()}">
-              <a class="ng2-smart-page-link page-link" href="#"
-                (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
-                <span aria-hidden="true">&raquo;</span>
-                <span class="sr-only">Last</span>
-              </a>
-            </li>
-          </ul>
-        </nav>
-      }
-    
-      @if (perPageSelect && perPageSelect.length > 0) {
-        <nav class="ng2-smart-pagination-per-page">
-          <label for="per-page">
-            Per Page:
-          </label>
-          <select (change)="onChangePerPage()" [(ngModel)]="currentPerPage" id="per-page">
-            @for (item of perPageSelect; track item) {
-              <option [value]="item">{{ item }}</option>
-            }
-          </select>
-        </nav>
-      }
-    `, isInline: true, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+        });
+        // find new columns witch not exist in storage state
+        const newColumns = columnsSettings.filter((state) => {
+            return !filtered.some((column) => column.title === state.title && column.key === state.key);
+        });
+        return [...filtered, ...newColumns];
+    }
+    get columnStateStorageKey() {
+        return this.settings.columnSortStorageKey;
+    }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PagerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ng2-smart-table-pager', template: `
-    @if (shouldShow()) {
-      <nav class="ng2-smart-pagination-nav">
-        <ul class="ng2-smart-pagination pagination">
-          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-            <a class="ng2-smart-page-link page-link" href="#"
-              (click)="getPage() == 1 ? false : paginate(1)" aria-label="First">
-              <span aria-hidden="true">&laquo;</span>
-              <span class="sr-only">First</span>
-            </a>
-          </li>
-          <li class="ng2-smart-page-item page-item" [ngClass]="{disabled: getPage() == 1}">
-            <a class="ng2-smart-page-link page-link page-link-prev" href="#"
-              (click)="getPage() == 1 ? false : prev()" aria-label="Prev">
-              <span aria-hidden="true">&lt;</span>
-              <span class="sr-only">Prev</span>
-            </a>
-          </li>
-          @for (page of getPages(); track page) {
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{active: getPage() == page}">
-              @if (getPage() == page) {
-                <span class="ng2-smart-page-link page-link"
-                  >{{ page }} <span class="sr-only">(current)</span></span>
-                }
-                @if (getPage() != page) {
-                  <a class="ng2-smart-page-link page-link" href="#"
-                  (click)="paginate(page)">{{ page }}</a>
-                }
-              </li>
-            }
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{disabled: getPage() == getLast()}">
-              <a class="ng2-smart-page-link page-link page-link-next" href="#"
-                (click)="getPage() == getLast() ? false : next()" aria-label="Next">
-                <span aria-hidden="true">&gt;</span>
-                <span class="sr-only">Next</span>
-              </a>
-            </li>
-            <li class="ng2-smart-page-item page-item"
-              [ngClass]="{disabled: getPage() == getLast()}">
-              <a class="ng2-smart-page-link page-link" href="#"
-                (click)="getPage() == getLast() ? false : paginate(getLast())" aria-label="Last">
-                <span aria-hidden="true">&raquo;</span>
-                <span class="sr-only">Last</span>
-              </a>
-            </li>
-          </ul>
-        </nav>
-      }
-    
-      @if (perPageSelect && perPageSelect.length > 0) {
-        <nav class="ng2-smart-pagination-per-page">
-          <label for="per-page">
-            Per Page:
-          </label>
-          <select (change)="onChangePerPage()" [(ngModel)]="currentPerPage" id="per-page">
-            @for (item of perPageSelect; track item) {
-              <option [value]="item">{{ item }}</option>
-            }
-          </select>
-        </nav>
-      }
-    `, styles: [".ng2-smart-pagination{display:inline-flex;font-size:.875em;padding:0}.ng2-smart-pagination .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}:host{display:flex;justify-content:space-between}:host select{margin:1rem 0 1rem 1rem}:host label{margin:1rem 0 1rem 1rem;line-height:2.5rem}\n"] }]
-        }], propDecorators: { source: [{
-                type: Input
-            }], perPageSelect: [{
-                type: Input
-            }], changePage: [{
-                type: Output
-            }] } });
 
 class EditCellDefault {
     constructor() {
         this.inputClass = '';
-        this.edited = new EventEmitter();
+        this.edited = output();
     }
     onEdited(event) {
-        this.edited.next(event);
+        this.edited.emit(event);
         return false;
     }
     onStopEditing() {
@@ -1277,32 +1426,32 @@ class EditCellDefault {
     onClick(event) {
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditCellDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditCellDefault, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: EditCellDefault, isStandalone: true, selector: "ng-component", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditCellDefault, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellDefault, decorators: [{
             type: Component,
-            args: [{
-                    template: ''
-                }]
+            args: [{ template: '' }]
         }], propDecorators: { cell: [{
                 type: Input
             }], inputClass: [{
                 type: Input
-            }], edited: [{
-                type: Output
             }] } });
 
 class CustomEditComponent extends EditCellDefault {
-    constructor(resolver) {
-        super();
-        this.resolver = resolver;
-    }
     ngOnChanges(changes) {
         const editor = this.cell.getColumn().editor;
-        if (this.cell && !this.customComponent && editor && editor.type == 'custom') {
-            const componentFactory = this.resolver.resolveComponentFactory(editor.component);
-            this.customComponent = this.dynamicTarget.createComponent(componentFactory);
+        if (this.customComponent) {
+            if (this.customComponent.instance?.ngOnChanges) {
+                this.customComponent.instance.ngOnChanges(changes);
+            }
+            return;
+        }
+        if (this.cell &&
+            !this.customComponent &&
+            editor &&
+            editor.type == "custom") {
+            this.customComponent = this.dynamicTarget.createComponent(editor.component);
             // set @Inputs and @Outputs of custom component
             this.customComponent.instance.cell = this.cell;
             this.customComponent.instance.inputClass = this.inputClass;
@@ -1316,22 +1465,19 @@ class CustomEditComponent extends EditCellDefault {
             this.customComponent.destroy();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomEditComponent, selector: "table-cell-custom-editor", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
-    <ng-template #dynamicTarget></ng-template>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomEditComponent, isStandalone: true, selector: "table-cell-custom-editor", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ` <ng-template #dynamicTarget></ng-template> `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomEditComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'table-cell-custom-editor',
-                    template: `
-    <ng-template #dynamicTarget></ng-template>
-  `,
+                    selector: "table-cell-custom-editor",
+                    template: ` <ng-template #dynamicTarget></ng-template> `,
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { dynamicTarget: [{
+        }], propDecorators: { dynamicTarget: [{
                 type: ViewChild,
-                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
+                args: ["dynamicTarget", { read: ViewContainerRef, static: true }]
             }] } });
 
 class CheckboxEditorComponent extends DefaultEditor {
@@ -1344,108 +1490,130 @@ class CheckboxEditorComponent extends DefaultEditor {
         const falseVal = (config && config?.false) || false;
         this.cell.newValue = event.target.checked ? trueVal : falseVal;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxEditorComponent, selector: "checkbox-editor", usesInheritance: true, ngImport: i0, template: `
-    <input [ngClass]="inputClass"
-           type="checkbox"
-           class="form-control"
-           [name]="cell.getId()"
-           [disabled]="!cell.isEditable()"
-           [checked]="cell.getValue() === (cell.getColumn().getConfig()?.true || true)"
-           (click)="onClick.emit($event)"
-           (change)="onChange($event)">
-    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CheckboxEditorComponent, isStandalone: true, selector: "checkbox-editor", usesInheritance: true, ngImport: i0, template: `
+    <input
+      [class]="inputClass"
+      type="checkbox"
+      class="form-control"
+      [name]="cell.getId()"
+      [disabled]="!cell.isEditable()"
+      [checked]="
+        cell.getValue() === (cell.getColumn().getConfig()?.true || true)
+      "
+      (click)="onClick.emit($event)"
+      (change)="onChange($event)"
+    />
+  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'checkbox-editor', template: `
-    <input [ngClass]="inputClass"
-           type="checkbox"
-           class="form-control"
-           [name]="cell.getId()"
-           [disabled]="!cell.isEditable()"
-           [checked]="cell.getValue() === (cell.getColumn().getConfig()?.true || true)"
-           (click)="onClick.emit($event)"
-           (change)="onChange($event)">
-    `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+            args: [{ selector: "checkbox-editor", template: `
+    <input
+      [class]="inputClass"
+      type="checkbox"
+      class="form-control"
+      [name]="cell.getId()"
+      [disabled]="!cell.isEditable()"
+      [checked]="
+        cell.getValue() === (cell.getColumn().getConfig()?.true || true)
+      "
+      (click)="onClick.emit($event)"
+      (change)="onChange($event)"
+    />
+  `, standalone: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }], ctorParameters: () => [] });
 
 class InputEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputEditorComponent, selector: "input-editor", usesInheritance: true, ngImport: i0, template: `
-    <input [ngClass]="inputClass"
-           class="form-control"
-           [(ngModel)]="cell.newValue"
-           [name]="cell.getId()"
-           [placeholder]="cell.getTitle()"
-           [disabled]="!cell.isEditable()"
-           (click)="onClick.emit($event)"
-           (keydown.enter)="onEdited.emit($event)"
-           (keydown.esc)="onStopEditing.emit()">
-    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputEditorComponent, isStandalone: true, selector: "input-editor", usesInheritance: true, ngImport: i0, template: `
+    <input
+      [class]="inputClass"
+      class="form-control"
+      [(ngModel)]="cell.newValue"
+      [name]="cell.getId()"
+      [placeholder]="cell.getTitle()"
+      [disabled]="!cell.isEditable()"
+      (click)="onClick.emit($event)"
+      (keydown.enter)="onEdited.emit($event)"
+      (keydown.esc)="onStopEditing.emit('')"
+    />
+  `, 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'input-editor', template: `
-    <input [ngClass]="inputClass"
-           class="form-control"
-           [(ngModel)]="cell.newValue"
-           [name]="cell.getId()"
-           [placeholder]="cell.getTitle()"
-           [disabled]="!cell.isEditable()"
-           (click)="onClick.emit($event)"
-           (keydown.enter)="onEdited.emit($event)"
-           (keydown.esc)="onStopEditing.emit()">
-    `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+            args: [{ selector: "input-editor", template: `
+    <input
+      [class]="inputClass"
+      class="form-control"
+      [(ngModel)]="cell.newValue"
+      [name]="cell.getId()"
+      [placeholder]="cell.getTitle()"
+      [disabled]="!cell.isEditable()"
+      (click)="onClick.emit($event)"
+      (keydown.enter)="onEdited.emit($event)"
+      (keydown.esc)="onStopEditing.emit('')"
+    />
+  `, standalone: true, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }], ctorParameters: () => [] });
 
 class SelectEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectEditorComponent, selector: "select-editor", usesInheritance: true, ngImport: i0, template: `
-    <select [ngClass]="inputClass"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectEditorComponent, isStandalone: true, selector: "select-editor", usesInheritance: true, ngImport: i0, template: `
+    <select
+      [class]="inputClass"
       class="form-control"
       [(ngModel)]="cell.newValue"
       [name]="cell.getId()"
       [disabled]="!cell.isEditable()"
       (click)="onClick.emit($event)"
       (keydown.enter)="onEdited.emit($event)"
-      (keydown.esc)="onStopEditing.emit()">
-    
-      @for (option of cell.getColumn().getConfig()?.list; track option) {
-        <option [value]="option.value"
-          [selected]="option.value === cell.getValue()">{{ option.title }}
-        </option>
+      (keydown.esc)="onStopEditing.emit('')"
+    >
+      @for (option of cell.getColumn().getConfig()?.list; track option.value) {
+      <option
+        [value]="option.value"
+        [selected]="option.value === cell.getValue()"
+      >
+        {{ option.title }}
+      </option>
       }
     </select>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectEditorComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'select-editor',
+                    selector: "select-editor",
                     template: `
-    <select [ngClass]="inputClass"
+    <select
+      [class]="inputClass"
       class="form-control"
       [(ngModel)]="cell.newValue"
       [name]="cell.getId()"
       [disabled]="!cell.isEditable()"
       (click)="onClick.emit($event)"
       (keydown.enter)="onEdited.emit($event)"
-      (keydown.esc)="onStopEditing.emit()">
-    
-      @for (option of cell.getColumn().getConfig()?.list; track option) {
-        <option [value]="option.value"
-          [selected]="option.value === cell.getValue()">{{ option.title }}
-        </option>
+      (keydown.esc)="onStopEditing.emit('')"
+    >
+      @for (option of cell.getColumn().getConfig()?.list; track option.value) {
+      <option
+        [value]="option.value"
+        [selected]="option.value === cell.getValue()"
+      >
+        {{ option.title }}
+      </option>
       }
     </select>
-    `,
+  `,
+                    standalone: true,
+                    imports: [FormsModule],
                 }]
         }], ctorParameters: () => [] });
 
@@ -1453,34 +1621,38 @@ class TextareaEditorComponent extends DefaultEditor {
     constructor() {
         super();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextareaEditorComponent, selector: "textarea-editor", usesInheritance: true, ngImport: i0, template: `
-    <textarea [ngClass]="inputClass"
-              class="form-control"
-              [(ngModel)]="cell.newValue"
-              [name]="cell.getId()"
-              [disabled]="!cell.isEditable()"
-              [placeholder]="cell.getTitle()"
-              (click)="onClick.emit($event)"
-              (keydown.enter)="onEdited.emit($event)"
-              (keydown.esc)="onStopEditing.emit()">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: TextareaEditorComponent, isStandalone: true, selector: "textarea-editor", usesInheritance: true, ngImport: i0, template: `
+    <textarea
+      [class]="inputClass"
+      class="form-control"
+      [(ngModel)]="cell.newValue"
+      [name]="cell.getId()"
+      [disabled]="!cell.isEditable()"
+      [placeholder]="cell.getTitle()"
+      (click)="onClick.emit($event)"
+      (keydown.enter)="onEdited.emit($event)"
+      (keydown.esc)="onStopEditing.emit('')"
+    >
     </textarea>
-    `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextareaEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TextareaEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'textarea-editor', template: `
-    <textarea [ngClass]="inputClass"
-              class="form-control"
-              [(ngModel)]="cell.newValue"
-              [name]="cell.getId()"
-              [disabled]="!cell.isEditable()"
-              [placeholder]="cell.getTitle()"
-              (click)="onClick.emit($event)"
-              (keydown.enter)="onEdited.emit($event)"
-              (keydown.esc)="onStopEditing.emit()">
+            args: [{ selector: "textarea-editor", template: `
+    <textarea
+      [class]="inputClass"
+      class="form-control"
+      [(ngModel)]="cell.newValue"
+      [name]="cell.getId()"
+      [disabled]="!cell.isEditable()"
+      [placeholder]="cell.getTitle()"
+      (click)="onClick.emit($event)"
+      (keydown.enter)="onEdited.emit($event)"
+      (keydown.esc)="onStopEditing.emit('')"
+    >
     </textarea>
-    `, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
+  `, standalone: true, imports: [FormsModule], styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
         }], ctorParameters: () => [] });
 
 class DefaultEditComponent extends EditCellDefault {
@@ -1492,23 +1664,28 @@ class DefaultEditComponent extends EditCellDefault {
         if (editor) {
             return editor.type;
         }
-        return 'text';
+        return "text";
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultEditComponent, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div>\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n  }\n}\n</div>", dependencies: [{ kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }, { kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultEditComponent, isStandalone: true, selector: "table-cell-default-editor", usesInheritance: true, ngImport: i0, template: "<div>\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n  }\n}\n</div>", dependencies: [{ kind: "component", type: SelectEditorComponent, selector: "select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "textarea-editor" }, { kind: "component", type: CheckboxEditorComponent, selector: "checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "input-editor" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'table-cell-default-editor', template: "<div>\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n  }\n}\n</div>" }]
+            args: [{ selector: "table-cell-default-editor", imports: [
+                        SelectEditorComponent,
+                        TextareaEditorComponent,
+                        CheckboxEditorComponent,
+                        InputEditorComponent,
+                    ], standalone: true, template: "<div>\n  @switch (getEditorType()) {\n    @case ('list') {\n      <select-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </select-editor>\n    }\n    @case ('textarea') {\n      <textarea-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n      </textarea-editor>\n    }\n    @case ('checkbox') {\n      <checkbox-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\">\n      </checkbox-editor>\n    }\n    @default {\n      <input-editor\n        [cell]=\"cell\"\n        [inputClass]=\"inputClass\"\n        (onClick)=\"onClick($event)\"\n        (onEdited)=\"onEdited($event)\"\n        (onStopEditing)=\"onStopEditing()\">\n    </input-editor>\n  }\n}\n</div>" }]
         }], ctorParameters: () => [] });
 
 class EditCellComponent {
     constructor() {
-        this.inputClass = '';
-        this.edited = new EventEmitter();
+        this.inputClass = "";
+        this.edited = output();
     }
     onEdited(event) {
-        this.edited.next(event);
+        this.edited.emit(event);
         return false;
     }
     getEditorType() {
@@ -1516,112 +1693,119 @@ class EditCellComponent {
         if (editor) {
             return editor.type;
         }
-        return 'text';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: `
-      <div>
-        @switch (getEditorType()) {
-          @case ('custom') {
-            <table-cell-custom-editor
-              [cell]="cell"
-              [inputClass]="inputClass"
-              (edited)="onEdited($event)">
-            </table-cell-custom-editor>
-          }
-          @default {
-            <table-cell-default-editor
-              [cell]="cell"
-              [inputClass]="inputClass"
-              (edited)="onEdited($event)">
-            </table-cell-default-editor>
-          }
-        }
-      </div>
-      `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "table-cell-custom-editor" }, { kind: "component", type: DefaultEditComponent, selector: "table-cell-default-editor" }] }); }
+        return "text";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: EditCellComponent, isStandalone: true, selector: "table-cell-edit-mode", inputs: { cell: "cell", inputClass: "inputClass" }, outputs: { edited: "edited" }, ngImport: i0, template: `
+    <div>
+      @switch (getEditorType()) { @case ('custom') {
+      <table-cell-custom-editor
+        [cell]="cell"
+        [inputClass]="inputClass"
+        (edited)="onEdited($event)"
+      >
+      </table-cell-custom-editor>
+      } @default {
+      <table-cell-default-editor
+        [cell]="cell"
+        [inputClass]="inputClass"
+        (edited)="onEdited($event)"
+      >
+      </table-cell-default-editor>
+      } }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "table-cell-custom-editor" }, { kind: "component", type: DefaultEditComponent, selector: "table-cell-default-editor" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: EditCellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'table-cell-edit-mode',
+                    selector: "table-cell-edit-mode",
                     template: `
-      <div>
-        @switch (getEditorType()) {
-          @case ('custom') {
-            <table-cell-custom-editor
-              [cell]="cell"
-              [inputClass]="inputClass"
-              (edited)="onEdited($event)">
-            </table-cell-custom-editor>
-          }
-          @default {
-            <table-cell-default-editor
-              [cell]="cell"
-              [inputClass]="inputClass"
-              (edited)="onEdited($event)">
-            </table-cell-default-editor>
-          }
-        }
-      </div>
-      `,
+    <div>
+      @switch (getEditorType()) { @case ('custom') {
+      <table-cell-custom-editor
+        [cell]="cell"
+        [inputClass]="inputClass"
+        (edited)="onEdited($event)"
+      >
+      </table-cell-custom-editor>
+      } @default {
+      <table-cell-default-editor
+        [cell]="cell"
+        [inputClass]="inputClass"
+        (edited)="onEdited($event)"
+      >
+      </table-cell-default-editor>
+      } }
+    </div>
+  `,
+                    standalone: true,
+                    imports: [CustomEditComponent, DefaultEditComponent],
                 }]
         }], propDecorators: { cell: [{
                 type: Input
             }], inputClass: [{
                 type: Input
-            }], edited: [{
-                type: Output
             }] } });
 
 class CustomViewComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomViewComponent, selector: "custom-view-component", inputs: { cell: "cell" }, ngImport: i0, template: "<ng-template\n  *ngComponentOutlet=\"\n    cell.getColumn().renderComponent;\n    inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }\n  \"\n></ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomViewComponent, isStandalone: true, selector: "custom-view-component", inputs: { cell: "cell" }, ngImport: i0, template: `<ng-template
+    *ngComponentOutlet="
+      cell.getColumn().renderComponent;
+      inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }
+    "
+  ></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: "custom-view-component", template: "<ng-template\n  *ngComponentOutlet=\"\n    cell.getColumn().renderComponent;\n    inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }\n  \"\n></ng-template>\n" }]
+            args: [{
+                    selector: "custom-view-component",
+                    template: `<ng-template
+    *ngComponentOutlet="
+      cell.getColumn().renderComponent;
+      inputs: { rowData: cell.getRow().getData(), value: cell.getValue() }
+    "
+  ></ng-template>`,
+                    imports: [NgComponentOutlet],
+                    standalone: true,
+                }]
         }], propDecorators: { cell: [{
                 type: Input
             }] } });
 
 class ViewCellComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: { cell: "cell" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ViewCellComponent, isStandalone: true, selector: "table-cell-view-mode", inputs: { cell: "cell" }, ngImport: i0, template: `
     <div>
-      @switch (cell.getColumn().type) {
-        @case ('custom') {
-          <custom-view-component [cell]="cell"></custom-view-component>
-        }
-        @case ('html') {
-          <div [innerHTML]="cell.getValue()"></div>
-        }
-        @default {
-          <div>{{ cell.getValue() }}</div>
-        }
-      }
+      @switch (cell.getColumn().type) { @case ('custom') {
+      <custom-view-component [cell]="cell"></custom-view-component>
+      } @case ('html') {
+      <div [innerHTML]="cell.getValue()"></div>
+      } @default {
+      <div>{{ cell.getValue() }}</div>
+      } }
     </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: CustomViewComponent, selector: "custom-view-component", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: CustomViewComponent, selector: "custom-view-component", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ViewCellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'table-cell-view-mode',
+                    selector: "table-cell-view-mode",
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <div>
-      @switch (cell.getColumn().type) {
-        @case ('custom') {
-          <custom-view-component [cell]="cell"></custom-view-component>
-        }
-        @case ('html') {
-          <div [innerHTML]="cell.getValue()"></div>
-        }
-        @default {
-          <div>{{ cell.getValue() }}</div>
-        }
-      }
+      @switch (cell.getColumn().type) { @case ('custom') {
+      <custom-view-component [cell]="cell"></custom-view-component>
+      } @case ('html') {
+      <div [innerHTML]="cell.getValue()"></div>
+      } @default {
+      <div>{{ cell.getValue() }}</div>
+      } }
     </div>
-    `,
+  `,
+                    standalone: true,
+                    imports: [CustomViewComponent],
                 }]
         }], propDecorators: { cell: [{
                 type: Input
@@ -1629,10 +1813,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class CellComponent {
     constructor() {
-        this.inputClass = '';
-        this.mode = 'inline';
+        this.inputClass = "";
+        this.mode = "inline";
         this.isInEditing = false;
-        this.edited = new EventEmitter();
+        this.edited = output();
     }
     onEdited(event) {
         if (this.isNew) {
@@ -1642,34 +1826,38 @@ class CellComponent {
             this.grid.save(this.row, this.editConfirm);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CellComponent, selector: "ng2-smart-table-cell", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", createConfirm: "createConfirm", isNew: "isNew", cell: "cell", inputClass: "inputClass", mode: "mode", isInEditing: "isInEditing" }, outputs: { edited: "edited" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CellComponent, isStandalone: true, selector: "ng2-smart-table-cell", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", createConfirm: "createConfirm", isNew: "isNew", cell: "cell", inputClass: "inputClass", mode: "mode", isInEditing: "isInEditing" }, outputs: { edited: "edited" }, ngImport: i0, template: `
     @if (!isInEditing) {
-      <table-cell-view-mode [cell]="cell"></table-cell-view-mode>
-    }
-    @if (isInEditing) {
-      <table-cell-edit-mode [cell]="cell"
-        [inputClass]="inputClass"
-        (edited)="onEdited($event)">
-      </table-cell-edit-mode>
-    }
-    `, isInline: true, dependencies: [{ kind: "component", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: ["cell", "inputClass"], outputs: ["edited"] }, { kind: "component", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: ["cell"] }] }); }
+    <table-cell-view-mode [cell]="cell"></table-cell-view-mode>
+    } @else {
+    <table-cell-edit-mode
+      [cell]="cell"
+      [inputClass]="inputClass"
+      (edited)="onEdited($event)"
+    >
+    </table-cell-edit-mode>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: ViewCellComponent, selector: "table-cell-view-mode", inputs: ["cell"] }, { kind: "component", type: EditCellComponent, selector: "table-cell-edit-mode", inputs: ["cell", "inputClass"], outputs: ["edited"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-smart-table-cell',
+                    selector: "ng2-smart-table-cell",
                     template: `
     @if (!isInEditing) {
-      <table-cell-view-mode [cell]="cell"></table-cell-view-mode>
-    }
-    @if (isInEditing) {
-      <table-cell-edit-mode [cell]="cell"
-        [inputClass]="inputClass"
-        (edited)="onEdited($event)">
-      </table-cell-edit-mode>
+    <table-cell-view-mode [cell]="cell"></table-cell-view-mode>
+    } @else {
+    <table-cell-edit-mode
+      [cell]="cell"
+      [inputClass]="inputClass"
+      (edited)="onEdited($event)"
+    >
+    </table-cell-edit-mode>
     }
-    `,
+  `,
+                    standalone: true,
+                    imports: [ViewCellComponent, EditCellComponent],
                 }]
         }], propDecorators: { grid: [{
                 type: Input
@@ -1689,8 +1877,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], isInEditing: [{
                 type: Input
-            }], edited: [{
-                type: Output
             }] } });
 
 class TbodyCreateCancelComponent {
@@ -1713,166 +1899,167 @@ class TbodyCreateCancelComponent {
         this.saveButtonContent = this.grid.getSetting("edit.saveButtonContent", "save");
         this.cancelButtonContent = this.grid.getSetting("edit.cancelButtonContent", "cancel");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", editCancel: "editCancel" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: "grid", row: "row", editConfirm: "editConfirm", editCancel: "editCancel" }, usesOnChanges: true, ngImport: i0, template: `
     @if (!row.pending) {
-      <a
-        href="#"
-        [id]="'row-' + row.index + '_editing-confirm-button'"
-        class="ng2-smart-action ng2-smart-action-edit-save"
-        [innerHTML]="saveButtonContent"
-        (click)="onSave($event)"
-      ></a>
-      <a
-        href="#"
-        [id]="'row-' + row.index + '_editing-cancel-button'"
-        class="ng2-smart-action ng2-smart-action-edit-cancel"
-        [innerHTML]="cancelButtonContent"
-        (click)="onCancelEdit($event)"
-      ></a>
+    <a
+      href="#"
+      [id]="'row-' + row.index + '_editing-confirm-button'"
+      class="ng2-smart-action ng2-smart-action-edit-save"
+      [innerHTML]="saveButtonContent"
+      (click)="onSave($event)"
+    ></a>
+    <a
+      href="#"
+      [id]="'row-' + row.index + '_editing-cancel-button'"
+      class="ng2-smart-action ng2-smart-action-edit-cancel"
+      [innerHTML]="cancelButtonContent"
+      (click)="onCancelEdit($event)"
+    ></a>
     } @else {
-      <div style="display: flex;">
-        <svg
-          (click)="$event.stopPropagation()"
-          style="height: 2rem; width: 2rem;"
-          version="1.1"
-          id="L9"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          x="0px"
-          y="0px"
-          viewBox="0 0 100 100"
-          enable-background="new 0 0 0 0"
-          xml:space="preserve"
-          >
-          <path
-            fill="#e9e9e9"
-            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-            >
-            <animateTransform
-              attributeName="transform"
-              attributeType="XML"
-              type="rotate"
-              dur="1s"
-              from="0 50 50"
-              to="360 50 50"
-              repeatCount="indefinite"
-              />
-          </path>
-        </svg>
-        <svg
-          (click)="$event.stopPropagation()"
-          style="height: 2rem; width: 2rem; "
-          version="1.1"
-          id="L9"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          x="0px"
-          y="0px"
-          viewBox="0 0 100 100"
-          enable-background="new 0 0 0 0"
-          xml:space="preserve"
-          >
-          <path
-            fill="#e9e9e9"
-            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-            >
-            <animateTransform
-              attributeName="transform"
-              attributeType="XML"
-              type="rotate"
-              dur="1s"
-              from="0 50 50"
-              to="360 50 50"
-              repeatCount="indefinite"
-              />
-          </path>
-        </svg>
-      </div>
-    }
-    `, isInline: true }); }
+    <div style="display: flex;">
+      <svg
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem;"
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      <svg
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem; "
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+    </div>
+    }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "ng2-st-tbody-create-cancel",
                     template: `
     @if (!row.pending) {
-      <a
-        href="#"
-        [id]="'row-' + row.index + '_editing-confirm-button'"
-        class="ng2-smart-action ng2-smart-action-edit-save"
-        [innerHTML]="saveButtonContent"
-        (click)="onSave($event)"
-      ></a>
-      <a
-        href="#"
-        [id]="'row-' + row.index + '_editing-cancel-button'"
-        class="ng2-smart-action ng2-smart-action-edit-cancel"
-        [innerHTML]="cancelButtonContent"
-        (click)="onCancelEdit($event)"
-      ></a>
+    <a
+      href="#"
+      [id]="'row-' + row.index + '_editing-confirm-button'"
+      class="ng2-smart-action ng2-smart-action-edit-save"
+      [innerHTML]="saveButtonContent"
+      (click)="onSave($event)"
+    ></a>
+    <a
+      href="#"
+      [id]="'row-' + row.index + '_editing-cancel-button'"
+      class="ng2-smart-action ng2-smart-action-edit-cancel"
+      [innerHTML]="cancelButtonContent"
+      (click)="onCancelEdit($event)"
+    ></a>
     } @else {
-      <div style="display: flex;">
-        <svg
-          (click)="$event.stopPropagation()"
-          style="height: 2rem; width: 2rem;"
-          version="1.1"
-          id="L9"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          x="0px"
-          y="0px"
-          viewBox="0 0 100 100"
-          enable-background="new 0 0 0 0"
-          xml:space="preserve"
-          >
-          <path
-            fill="#e9e9e9"
-            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-            >
-            <animateTransform
-              attributeName="transform"
-              attributeType="XML"
-              type="rotate"
-              dur="1s"
-              from="0 50 50"
-              to="360 50 50"
-              repeatCount="indefinite"
-              />
-          </path>
-        </svg>
-        <svg
-          (click)="$event.stopPropagation()"
-          style="height: 2rem; width: 2rem; "
-          version="1.1"
-          id="L9"
-          xmlns="http://www.w3.org/2000/svg"
-          xmlns:xlink="http://www.w3.org/1999/xlink"
-          x="0px"
-          y="0px"
-          viewBox="0 0 100 100"
-          enable-background="new 0 0 0 0"
-          xml:space="preserve"
-          >
-          <path
-            fill="#e9e9e9"
-            d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-            >
-            <animateTransform
-              attributeName="transform"
-              attributeType="XML"
-              type="rotate"
-              dur="1s"
-              from="0 50 50"
-              to="360 50 50"
-              repeatCount="indefinite"
-              />
-          </path>
-        </svg>
-      </div>
+    <div style="display: flex;">
+      <svg
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem;"
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      <svg
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem; "
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+    </div>
     }
-    `,
+  `,
+                    standalone: true,
                 }]
         }], propDecorators: { grid: [{
                 type: Input
@@ -1884,11 +2071,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+class TbodyCustomComponent {
+    constructor() {
+        this.custom = output();
+    }
+    onCustom(action) {
+        this.custom.emit({
+            action: action.name,
+            data: this.row.getData(),
+            source: this.source,
+        });
+    }
+    customActions() {
+        return this.grid.getSetting("actions.custom");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCustomComponent, isStandalone: true, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
+    @for (action of customActions(); track $index) {
+    <a
+      [id]="'row-' + row.index + '_action-' + action.name + '-button'"
+      href="#"
+      class="ng2-smart-action ng2-smart-action-custom-custom"
+      [innerHTML]="action.title"
+      (click)="
+        $event.stopPropagation(); $event.preventDefault(); onCustom(action)
+      "
+    ></a>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCustomComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ng2-st-tbody-custom",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @for (action of customActions(); track $index) {
+    <a
+      [id]="'row-' + row.index + '_action-' + action.name + '-button'"
+      href="#"
+      class="ng2-smart-action ng2-smart-action-custom-custom"
+      [innerHTML]="action.title"
+      (click)="
+        $event.stopPropagation(); $event.preventDefault(); onCustom(action)
+      "
+    ></a>
+    }
+  `,
+                    standalone: true,
+                }]
+        }], propDecorators: { grid: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], source: [{
+                type: Input
+            }] } });
+
 class TbodyEditDeleteComponent {
     constructor() {
-        this.edit = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.editRowSelect = new EventEmitter();
+        this.edit = output();
+        this.delete = output();
+        this.editRowSelect = output();
         this.isActionEdit = false;
         this.isActionDelete = false;
         this.editRowButtonContent = "";
@@ -1925,182 +2169,175 @@ class TbodyEditDeleteComponent {
         this.editRowButtonContent = this.grid.getSetting("edit.editButtonContent");
         this.deleteRowButtonContent = this.grid.getSetting("delete.deleteButtonContent");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: { grid: "grid", row: "row", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm" }, outputs: { edit: "edit", delete: "delete", editRowSelect: "editRowSelect" }, usesOnChanges: true, ngImport: i0, template: `
-    @if (!row.pending) {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyEditDeleteComponent, isStandalone: true, selector: "ng2-st-tbody-edit-delete", inputs: { grid: "grid", row: "row", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm" }, outputs: { edit: "edit", delete: "delete", editRowSelect: "editRowSelect" }, usesOnChanges: true, ngImport: i0, template: `
+    @if (!row.pending) { @if (isActionEdit) {
+    <a
+      href="#"
+      [id]="'row-' + row.index + '_action-edit-button'"
+      class="ng2-smart-action ng2-smart-action-edit-edit"
+      [innerHTML]="editRowButtonContent"
+      (click)="onEdit($event)"
+    ></a>
+    } @if (isActionDelete) {
+    <a
+      href="#"
+      [id]="'row-' + row.index + '_action-delete-button'"
+      class="ng2-smart-action ng2-smart-action-delete-delete"
+      [innerHTML]="deleteRowButtonContent"
+      (click)="onDelete($event)"
+    ></a>
+    } } @else {
+    <div style="display: flex;">
       @if (isActionEdit) {
-        <a
-          href="#"
-          [id]="'row-' + row.index + '_action-edit-button'"
-          class="ng2-smart-action ng2-smart-action-edit-edit"
-          [innerHTML]="editRowButtonContent"
-          (click)="onEdit($event)"
-        ></a>
-      }
-      @if (isActionDelete) {
-        <a
-          href="#"
-          [id]="'row-' + row.index + '_action-delete-button'"
-          class="ng2-smart-action ng2-smart-action-delete-delete"
-          [innerHTML]="deleteRowButtonContent"
-          (click)="onDelete($event)"
-        ></a>
+      <svg
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem;"
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      } @if (isActionDelete) {
+      <svg
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem;"
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
       }
-    } @else {
-      <div style="display: flex;">
-        @if (isActionEdit) {
-          <svg
-            (click)="$event.stopPropagation()"
-            style="height: 2rem; width: 2rem;"
-            version="1.1"
-            id="L9"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            x="0px"
-            y="0px"
-            viewBox="0 0 100 100"
-            enable-background="new 0 0 0 0"
-            xml:space="preserve"
-            >
-            <path
-              fill="#e9e9e9"
-              d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-              >
-              <animateTransform
-                attributeName="transform"
-                attributeType="XML"
-                type="rotate"
-                dur="1s"
-                from="0 50 50"
-                to="360 50 50"
-                repeatCount="indefinite"
-                />
-            </path>
-          </svg>
-        }
-        @if (isActionDelete) {
-          <svg
-            (click)="$event.stopPropagation()"
-            style="height: 2rem; width: 2rem;"
-            version="1.1"
-            id="L9"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            x="0px"
-            y="0px"
-            viewBox="0 0 100 100"
-            enable-background="new 0 0 0 0"
-            xml:space="preserve"
-            >
-            <path
-              fill="#e9e9e9"
-              d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-              >
-              <animateTransform
-                attributeName="transform"
-                attributeType="XML"
-                type="rotate"
-                dur="1s"
-                from="0 50 50"
-                to="360 50 50"
-                repeatCount="indefinite"
-                />
-            </path>
-          </svg>
-        }
-      </div>
-    }
-    `, isInline: true }); }
+    </div>
+    }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyEditDeleteComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "ng2-st-tbody-edit-delete",
                     template: `
-    @if (!row.pending) {
+    @if (!row.pending) { @if (isActionEdit) {
+    <a
+      href="#"
+      [id]="'row-' + row.index + '_action-edit-button'"
+      class="ng2-smart-action ng2-smart-action-edit-edit"
+      [innerHTML]="editRowButtonContent"
+      (click)="onEdit($event)"
+    ></a>
+    } @if (isActionDelete) {
+    <a
+      href="#"
+      [id]="'row-' + row.index + '_action-delete-button'"
+      class="ng2-smart-action ng2-smart-action-delete-delete"
+      [innerHTML]="deleteRowButtonContent"
+      (click)="onDelete($event)"
+    ></a>
+    } } @else {
+    <div style="display: flex;">
       @if (isActionEdit) {
-        <a
-          href="#"
-          [id]="'row-' + row.index + '_action-edit-button'"
-          class="ng2-smart-action ng2-smart-action-edit-edit"
-          [innerHTML]="editRowButtonContent"
-          (click)="onEdit($event)"
-        ></a>
-      }
-      @if (isActionDelete) {
-        <a
-          href="#"
-          [id]="'row-' + row.index + '_action-delete-button'"
-          class="ng2-smart-action ng2-smart-action-delete-delete"
-          [innerHTML]="deleteRowButtonContent"
-          (click)="onDelete($event)"
-        ></a>
+      <svg
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem;"
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
+      } @if (isActionDelete) {
+      <svg
+        (click)="$event.stopPropagation()"
+        style="height: 2rem; width: 2rem;"
+        version="1.1"
+        id="L9"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        enable-background="new 0 0 0 0"
+        xml:space="preserve"
+      >
+        <path
+          fill="#e9e9e9"
+          d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
+        >
+          <animateTransform
+            attributeName="transform"
+            attributeType="XML"
+            type="rotate"
+            dur="1s"
+            from="0 50 50"
+            to="360 50 50"
+            repeatCount="indefinite"
+          />
+        </path>
+      </svg>
       }
-    } @else {
-      <div style="display: flex;">
-        @if (isActionEdit) {
-          <svg
-            (click)="$event.stopPropagation()"
-            style="height: 2rem; width: 2rem;"
-            version="1.1"
-            id="L9"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            x="0px"
-            y="0px"
-            viewBox="0 0 100 100"
-            enable-background="new 0 0 0 0"
-            xml:space="preserve"
-            >
-            <path
-              fill="#e9e9e9"
-              d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-              >
-              <animateTransform
-                attributeName="transform"
-                attributeType="XML"
-                type="rotate"
-                dur="1s"
-                from="0 50 50"
-                to="360 50 50"
-                repeatCount="indefinite"
-                />
-            </path>
-          </svg>
-        }
-        @if (isActionDelete) {
-          <svg
-            (click)="$event.stopPropagation()"
-            style="height: 2rem; width: 2rem;"
-            version="1.1"
-            id="L9"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            x="0px"
-            y="0px"
-            viewBox="0 0 100 100"
-            enable-background="new 0 0 0 0"
-            xml:space="preserve"
-            >
-            <path
-              fill="#e9e9e9"
-              d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"
-              >
-              <animateTransform
-                attributeName="transform"
-                attributeType="XML"
-                type="rotate"
-                dur="1s"
-                from="0 50 50"
-                to="360 50 50"
-                repeatCount="indefinite"
-                />
-            </path>
-          </svg>
-        }
-      </div>
+    </div>
     }
-    `,
+  `,
+                    standalone: true,
                 }]
         }], propDecorators: { grid: [{
                 type: Input
@@ -2112,87 +2349,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], editConfirm: [{
                 type: Input
-            }], edit: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], editRowSelect: [{
-                type: Output
-            }] } });
-
-class TbodyCustomComponent {
-    constructor() {
-        this.custom = new EventEmitter();
-    }
-    onCustom(action) {
-        this.custom.emit({
-            action: action.name,
-            data: this.row.getData(),
-            source: this.source,
-        });
-    }
-    customActions() {
-        return this.grid.getSetting("actions.custom");
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TbodyCustomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: { grid: "grid", row: "row", source: "source" }, outputs: { custom: "custom" }, ngImport: i0, template: `
-    @for (action of customActions(); track $index) {
-      <a
-        [id]="'row-' + row.index + '_action-' + action.name + '-button'"
-        href="#"
-        class="ng2-smart-action ng2-smart-action-custom-custom"
-        [innerHTML]="action.title"
-        (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"
-      ></a>
-    }
-    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TbodyCustomComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: "ng2-st-tbody-custom",
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `
-    @for (action of customActions(); track $index) {
-      <a
-        [id]="'row-' + row.index + '_action-' + action.name + '-button'"
-        href="#"
-        class="ng2-smart-action ng2-smart-action-custom-custom"
-        [innerHTML]="action.title"
-        (click)="$event.stopPropagation(); $event.preventDefault(); onCustom(action)"
-      ></a>
-    }
-    `,
-                }]
-        }], propDecorators: { grid: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], source: [{
-                type: Input
-            }], custom: [{
-                type: Output
             }] } });
 
 class Ng2SmartTableTbodyComponent {
     constructor() {
-        this.rowClassFunction = () => '';
-        this.save = new EventEmitter();
-        this.cancel = new EventEmitter();
-        this.edit = new EventEmitter();
-        this.editCancel = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.custom = new EventEmitter();
-        this.edited = new EventEmitter();
-        this.userSelectRow = new EventEmitter();
-        this.userClickedRow = new EventEmitter();
-        this.editRowSelect = new EventEmitter();
-        this.multipleSelectRow = new EventEmitter();
+        this.rowClassFunction = () => "";
+        this.save = output();
+        this.cancel = output();
+        this.edit = output();
+        this.editCancel = output();
+        this.delete = output();
+        this.custom = output();
+        this.edited = output();
+        this.userSelectRow = output();
+        this.userClickedRow = output();
+        this.editRowSelect = output();
+        this.multipleSelectRow = output();
         this.isMultiSelectVisible = false;
         this.showActionColumnLeft = false;
         this.showActionColumnRight = false;
-        this.mode = 'inline';
-        this.editInputClass = '';
+        this.mode = "inline";
+        this.editInputClass = "";
         this.isActionAdd = false;
         this.isActionEdit = false;
         this.isActionDelete = false;
@@ -2204,14 +2381,14 @@ class Ng2SmartTableTbodyComponent {
     }
     ngOnChanges() {
         this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn('left');
-        this.mode = this.grid.getSetting('mode', 'inline');
-        this.editInputClass = this.grid.getSetting('edit.inputClass', '');
-        this.showActionColumnRight = this.grid.showActionColumn('right');
-        this.isActionAdd = this.grid.getSetting('actions.add', false);
-        this.isActionEdit = this.grid.getSetting('actions.edit', false);
-        this.isActionDelete = this.grid.getSetting('actions.delete', false);
-        this.noDataMessage = this.grid.getSetting('noDataMessage');
+        this.showActionColumnLeft = this.grid.showActionColumn("left");
+        this.mode = this.grid.getSetting("mode", "inline");
+        this.editInputClass = this.grid.getSetting("edit.inputClass", "");
+        this.showActionColumnRight = this.grid.showActionColumn("right");
+        this.isActionAdd = this.grid.getSetting("actions.add", false);
+        this.isActionEdit = this.grid.getSetting("actions.edit", false);
+        this.isActionDelete = this.grid.getSetting("actions.delete", false);
+        this.noDataMessage = this.grid.getSetting("noDataMessage");
     }
     getVisibleCells(cells) {
         return (cells || []).filter((cell) => !cell.getColumn().hide);
@@ -2219,12 +2396,18 @@ class Ng2SmartTableTbodyComponent {
     trackByIdOrIndex(index, item) {
         return item?.id || index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (isMultiSelectVisible) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected\"\n    />\n  </td>\n  } @if (!row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @for (cell of getVisibleCells(row.cells); track cell.getId()) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: "grid", source: "source", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", rowClassFunction: "rowClassFunction" }, outputs: { save: "save", cancel: "cancel", edit: "edit", editCancel: "editCancel", delete: "delete", custom: "custom", edited: "edited", userSelectRow: "userSelectRow", userClickedRow: "userClickedRow", editRowSelect: "editRowSelect", multipleSelectRow: "multipleSelectRow" }, usesOnChanges: true, ngImport: i0, template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction(row)\"\n  [class.selected]=\"row.isSelected\"\n>\n  @if (isMultiSelectVisible) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected\"\n    />\n  </td>\n  } @if (!row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @for (cell of getVisibleCells(row.cells); track cell.getId()) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TbodyCustomComponent, selector: "ng2-st-tbody-custom", inputs: ["grid", "row", "source"], outputs: ["custom"] }, { kind: "component", type: TbodyEditDeleteComponent, selector: "ng2-st-tbody-edit-delete", inputs: ["grid", "row", "source", "deleteConfirm", "editConfirm"], outputs: ["edit", "delete", "editRowSelect"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "row", "editConfirm", "editCancel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-tbody]', template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [className]=\"rowClassFunction(row)\"\n  [ngClass]=\"{ selected: row.isSelected }\"\n>\n  @if (isMultiSelectVisible) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected\"\n    />\n  </td>\n  } @if (!row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @for (cell of getVisibleCells(row.cells); track cell.getId()) {\n  <td [ngClass]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"] }]
+            args: [{ selector: "[ng2-st-tbody]", standalone: true, imports: [
+                        FormsModule,
+                        TbodyCustomComponent,
+                        TbodyEditDeleteComponent,
+                        TbodyCreateCancelComponent,
+                        CellComponent,
+                    ], template: "@if (grid.getRows().length) { @for (row of grid.getRows(); track\ntrackByIdOrIndex($index, row)) {\n<tr\n  (click)=\"userClickedRow.emit(row)\"\n  class=\"ng2-smart-row\"\n  [class]=\"rowClassFunction(row)\"\n  [class.selected]=\"row.isSelected\"\n>\n  @if (isMultiSelectVisible) {\n  <td\n    class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n    (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row)\"\n  >\n    <input\n      type=\"checkbox\"\n      [id]=\"'row-' + row.index + '_select-checkbox'\"\n      class=\"form-control\"\n      [ngModel]=\"row.isSelected\"\n    />\n  </td>\n  } @if (!row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  } @if (row.isInEditing && showActionColumnLeft) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n      [editCancel]=\"editCancel\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @for (cell of getVisibleCells(row.cells); track cell.getId()) {\n  <td [class]=\"cell.getColumnClass()\">\n    <ng2-smart-table-cell\n      [cell]=\"cell\"\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [isNew]=\"false\"\n      [mode]=\"mode\"\n      [editConfirm]=\"editConfirm\"\n      [inputClass]=\"editInputClass\"\n      [isInEditing]=\"row.isInEditing\"\n    >\n    </ng2-smart-table-cell>\n  </td>\n  } @if (row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-create-cancel\n      [grid]=\"grid\"\n      [row]=\"row\"\n      [editConfirm]=\"editConfirm\"\n    ></ng2-st-tbody-create-cancel>\n  </td>\n  } @if (!row.isInEditing && showActionColumnRight) {\n  <td class=\"ng2-smart-actions\">\n    <ng2-st-tbody-custom\n      [grid]=\"grid\"\n      (custom)=\"custom.emit($event)\"\n      [row]=\"row\"\n      [source]=\"source\"\n    ></ng2-st-tbody-custom>\n    <ng2-st-tbody-edit-delete\n      [grid]=\"grid\"\n      [deleteConfirm]=\"deleteConfirm\"\n      [editConfirm]=\"editConfirm\"\n      [row]=\"row\"\n      [source]=\"source\"\n      (edit)=\"edit.emit(row)\"\n      (delete)=\"delete.emit(row)\"\n      (editRowSelect)=\"editRowSelect.emit($event)\"\n    >\n    </ng2-st-tbody-edit-delete>\n  </td>\n  }\n</tr>\n} } @else {\n<tr>\n  <td [attr.colspan]=\"tableColumnsCount\">\n    {{ noDataMessage }}\n  </td>\n</tr>\n}\n", styles: [":host .ng2-smart-row.selected{background:#0000000d}:host .ng2-smart-row .ng2-smart-actions.ng2-smart-action-multiple-select{text-align:center}:host ::ng-deep ng2-st-tbody-edit-delete a:first-child,:host ::ng-deep ng2-st-tbody-create-cancel a:first-child{margin-right:.25rem}\n"] }]
         }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
@@ -2235,35 +2418,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], rowClassFunction: [{
                 type: Input
-            }], save: [{
-                type: Output
-            }], cancel: [{
-                type: Output
-            }], edit: [{
-                type: Output
-            }], editCancel: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], custom: [{
-                type: Output
-            }], edited: [{
-                type: Output
-            }], userSelectRow: [{
-                type: Output
-            }], userClickedRow: [{
-                type: Output
-            }], editRowSelect: [{
-                type: Output
-            }], multipleSelectRow: [{
-                type: Output
             }] } });
 
 class FilterDefault {
     constructor() {
         this.inputClass = '';
         this.query = '';
-        this.filter = new EventEmitter();
+        this.filter = output();
     }
     onFilter(query) {
         this.source.addFilter({
@@ -2272,14 +2433,12 @@ class FilterDefault {
             filter: this.column.getFilterFunction(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FilterDefault, selector: "ng-component", inputs: { column: "column", source: "source", inputClass: "inputClass", query: "query" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDefault, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: FilterDefault, isStandalone: true, selector: "ng-component", inputs: { column: "column", source: "source", inputClass: "inputClass", query: "query" }, outputs: { filter: "filter" }, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterDefault, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterDefault, decorators: [{
             type: Component,
-            args: [{
-                    template: '',
-                }]
+            args: [{ template: '' }]
         }], propDecorators: { column: [{
                 type: Input
             }], source: [{
@@ -2288,8 +2447,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], query: [{
                 type: Input
-            }], filter: [{
-                type: Output
+            }] } });
+
+class CustomFilterComponent extends FilterDefault {
+    ngOnChanges(changes) {
+        if (this.customComponent) {
+            if (this.customComponent.instance?.ngOnChanges) {
+                this.customComponent.instance?.ngOnChanges(changes);
+            }
+            return;
+        }
+        if (this.column.filter && this.column.filter.type === "custom") {
+            this.customComponent = this.dynamicTarget.createComponent(this.column.filter?.component);
+        }
+        // set @Inputs and @Outputs of custom component
+        this.customComponent.instance.query = this.query;
+        this.customComponent.instance.column = this.column;
+        this.customComponent.instance.source = this.source;
+        this.customComponent.instance.inputClass = this.inputClass;
+        this.customComponent.instance.filter.subscribe((event) => this.onFilter(event));
+    }
+    ngOnDestroy() {
+        if (this.customComponent) {
+            this.customComponent.destroy();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CustomFilterComponent, isStandalone: true, selector: "custom-table-filter", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomFilterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "custom-table-filter",
+                    template: `<ng-template #dynamicTarget></ng-template>`,
+                    standalone: true,
+                }]
+        }], propDecorators: { dynamicTarget: [{
+                type: ViewChild,
+                args: ["dynamicTarget", { read: ViewContainerRef, static: true }]
             }] } });
 
 class CheckboxFilterComponent extends DefaultFilter {
@@ -2303,39 +2498,57 @@ class CheckboxFilterComponent extends DefaultFilter {
             .pipe(debounceTime(this.delay))
             .subscribe((checked) => {
             this.filterActive = true;
-            const trueVal = (this.column.getFilterConfig() && this.column.getFilterConfig().true) || true;
-            const falseVal = (this.column.getFilterConfig() && this.column.getFilterConfig().false) || false;
+            const trueVal = (this.column.getFilterConfig() &&
+                this.column.getFilterConfig().true) ||
+                true;
+            const falseVal = (this.column.getFilterConfig() &&
+                this.column.getFilterConfig().false) ||
+                false;
             this.query = checked ? trueVal : falseVal;
             this.setFilter();
         });
     }
     resetFilter(event) {
         event.preventDefault();
-        this.query = '';
+        this.query = "";
         this.inputControl.setValue(false, { emitEvent: false });
         this.filterActive = false;
         this.setFilter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CheckboxFilterComponent, selector: "checkbox-filter", usesInheritance: true, ngImport: i0, template: `
-    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: CheckboxFilterComponent, isStandalone: true, selector: "checkbox-filter", usesInheritance: true, ngImport: i0, template: `
+    <input
+      type="checkbox"
+      [formControl]="inputControl"
+      [class]="inputClass"
+      class="form-control"
+    />
     @if (filterActive) {
-      <a href="#"
-      (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
+    <a href="#" (click)="resetFilter($event)">{{
+      column.getFilterConfig()?.resetText || "reset"
+    }}</a>
     }
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'checkbox-filter',
+                    selector: "checkbox-filter",
                     template: `
-    <input type="checkbox" [formControl]="inputControl" [ngClass]="inputClass" class="form-control">
+    <input
+      type="checkbox"
+      [formControl]="inputControl"
+      [class]="inputClass"
+      class="form-control"
+    />
     @if (filterActive) {
-      <a href="#"
-      (click)="resetFilter($event)">{{column.getFilterConfig()?.resetText || 'reset'}}</a>
+    <a href="#" (click)="resetFilter($event)">{{
+      column.getFilterConfig()?.resetText || "reset"
+    }}</a>
     }
-    `,
+  `,
+                    standalone: true,
+                    imports: [FormsModule, ReactiveFormsModule],
                 }]
         }], ctorParameters: () => [] });
 
@@ -2356,32 +2569,36 @@ class InputFilterComponent extends DefaultFilter {
         });
     }
     ngOnChanges(changes) {
-        if (changes?.['query']) {
+        if (changes?.["query"]) {
             this.inputControl.setValue(this.query);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: InputFilterComponent, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: InputFilterComponent, isStandalone: true, selector: "input-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
     <input
-      [ngClass]="inputClass"
+      [class]="inputClass"
       [formControl]="inputControl"
       class="form-control"
       type="text"
-      placeholder="{{ column.title }}"/>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+      placeholder="{{ column.title }}"
+    />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InputFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'input-filter',
+                    selector: "input-filter",
                     template: `
     <input
-      [ngClass]="inputClass"
+      [class]="inputClass"
       [formControl]="inputControl"
       class="form-control"
       type="text"
-      placeholder="{{ column.title }}"/>
+      placeholder="{{ column.title }}"
+    />
   `,
+                    standalone: true,
+                    imports: [FormsModule, ReactiveFormsModule],
                 }]
         }], ctorParameters: () => [] });
 
@@ -2396,40 +2613,42 @@ class SelectFilterComponent extends DefaultFilter {
                 .subscribe((value) => this.setFilter());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SelectFilterComponent, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
-    <select [ngClass]="inputClass"
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectFilterComponent, isStandalone: true, selector: "select-filter", viewQueries: [{ propertyName: "inputControl", first: true, predicate: ["inputControl"], descendants: true, read: NgControl, static: true }], usesInheritance: true, ngImport: i0, template: `
+    <select [class]="inputClass"
       class="form-control"
       #inputControl
       [(ngModel)]="query">
-    
+
       <option value="">{{ column.getFilterConfig().selectText }}</option>
-      @for (option of column.getFilterConfig().list; track option) {
+      @for (option of column.getFilterConfig().list; track option.value) {
         <option [value]="option.value">
           {{ option.title }}
         </option>
       }
     </select>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'select-filter',
                     template: `
-    <select [ngClass]="inputClass"
+    <select [class]="inputClass"
       class="form-control"
       #inputControl
       [(ngModel)]="query">
-    
+
       <option value="">{{ column.getFilterConfig().selectText }}</option>
-      @for (option of column.getFilterConfig().list; track option) {
+      @for (option of column.getFilterConfig().list; track option.value) {
         <option [value]="option.value">
           {{ option.title }}
         </option>
       }
     </select>
     `,
+                    standalone: true,
+                    imports: [FormsModule]
                 }]
         }], ctorParameters: () => [], propDecorators: { inputControl: [{
                 type: ViewChild,
@@ -2437,111 +2656,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class DefaultFilterComponent extends FilterDefault {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DefaultFilterComponent, selector: "default-table-filter", usesInheritance: true, ngImport: i0, template: `
-@switch (column.getFilterType()) {
-  @case ('list') {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: DefaultFilterComponent, isStandalone: true, selector: "default-table-filter", usesInheritance: true, ngImport: i0, template: `
+    @switch (column.getFilterType()) { @case ('list') {
     <select-filter
       [query]="query"
-      [ngClass]="inputClass"
+      [class]="inputClass"
       [column]="column"
-      (filter)="onFilter($event)">
+      (filter)="onFilter($event)"
+    >
     </select-filter>
-  }
-  @case ('checkbox') {
+    } @case ('checkbox') {
     <checkbox-filter
       [query]="query"
-      [ngClass]="inputClass"
+      [class]="inputClass"
       [column]="column"
-      (filter)="onFilter($event)">
+      (filter)="onFilter($event)"
+    >
     </checkbox-filter>
-  }
-  @default {
+    } @default {
     <input-filter
       [query]="query"
-      [ngClass]="inputClass"
+      [class]="inputClass"
       [column]="column"
-      (filter)="onFilter($event)">
-  </input-filter>
-}
-}
-`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CheckboxFilterComponent, selector: "checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "input-filter" }, { kind: "component", type: SelectFilterComponent, selector: "select-filter" }] }); }
+      (filter)="onFilter($event)"
+    >
+    </input-filter>
+    } }
+  `, isInline: true, dependencies: [{ kind: "component", type: SelectFilterComponent, selector: "select-filter" }, { kind: "component", type: CheckboxFilterComponent, selector: "checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "input-filter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DefaultFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: DefaultFilterComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'default-table-filter',
+                    selector: "default-table-filter",
                     template: `
-@switch (column.getFilterType()) {
-  @case ('list') {
+    @switch (column.getFilterType()) { @case ('list') {
     <select-filter
       [query]="query"
-      [ngClass]="inputClass"
+      [class]="inputClass"
       [column]="column"
-      (filter)="onFilter($event)">
+      (filter)="onFilter($event)"
+    >
     </select-filter>
-  }
-  @case ('checkbox') {
+    } @case ('checkbox') {
     <checkbox-filter
       [query]="query"
-      [ngClass]="inputClass"
+      [class]="inputClass"
       [column]="column"
-      (filter)="onFilter($event)">
+      (filter)="onFilter($event)"
+    >
     </checkbox-filter>
-  }
-  @default {
+    } @default {
     <input-filter
       [query]="query"
-      [ngClass]="inputClass"
+      [class]="inputClass"
       [column]="column"
-      (filter)="onFilter($event)">
-  </input-filter>
-}
-}
-`,
+      (filter)="onFilter($event)"
+    >
+    </input-filter>
+    } }
+  `,
+                    standalone: true,
+                    imports: [
+                        SelectFilterComponent,
+                        CheckboxFilterComponent,
+                        InputFilterComponent,
+                    ],
                 }]
         }] });
 
-class CustomFilterComponent extends FilterDefault {
-    constructor(resolver) {
-        super();
-        this.resolver = resolver;
-    }
-    ngOnChanges(changes) {
-        if (this.customComponent) {
-            this.customComponent.instance.ngOnChanges(changes);
-            return;
-        }
-        if (this.column.filter && this.column.filter.type === 'custom') {
-            const componentFactory = this.resolver.resolveComponentFactory(this.column.filter?.component);
-            this.customComponent = this.dynamicTarget.createComponent(componentFactory);
-        }
-        // set @Inputs and @Outputs of custom component
-        this.customComponent.instance.query = this.query;
-        this.customComponent.instance.column = this.column;
-        this.customComponent.instance.source = this.source;
-        this.customComponent.instance.inputClass = this.inputClass;
-        this.customComponent.instance.filter.subscribe((event) => this.onFilter(event));
-    }
-    ngOnDestroy() {
-        if (this.customComponent) {
-            this.customComponent.destroy();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomFilterComponent, deps: [{ token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomFilterComponent, selector: "custom-table-filter", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<ng-template #dynamicTarget></ng-template>`, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomFilterComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'custom-table-filter',
-                    template: `<ng-template #dynamicTarget></ng-template>`,
-                }]
-        }], ctorParameters: () => [{ type: i0.ComponentFactoryResolver }], propDecorators: { dynamicTarget: [{
-                type: ViewChild,
-                args: ['dynamicTarget', { read: ViewContainerRef, static: true }]
-            }] } });
-
 class FilterComponent extends FilterDefault {
     ngOnChanges(changes) {
         if (changes['source']) {
@@ -2565,8 +2748,8 @@ class FilterComponent extends FilterDefault {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: FilterComponent, isStandalone: true, selector: "ng2-smart-table-filter", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
       @if (column.isFilterable) {
         <div class="ng2-smart-filter">
           @switch (column.getFilterType()) {
@@ -2591,9 +2774,9 @@ class FilterComponent extends FilterDefault {
           }
         </div>
       }
-      `, isInline: true, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"], dependencies: [{ kind: "component", type: DefaultFilterComponent, selector: "default-table-filter" }, { kind: "component", type: CustomFilterComponent, selector: "custom-table-filter" }] }); }
+      `, isInline: true, styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"], dependencies: [{ kind: "component", type: CustomFilterComponent, selector: "custom-table-filter" }, { kind: "component", type: DefaultFilterComponent, selector: "default-table-filter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ng2-smart-table-filter', template: `
       @if (column.isFilterable) {
@@ -2620,27 +2803,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
           }
         </div>
       }
-      `, 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"] }]
+      `, standalone: true, imports: [CustomFilterComponent, DefaultFilterComponent], styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"] }]
         }] });
 
 class AddButtonComponent {
-    constructor(ref) {
-        this.ref = ref;
-        this.create = new EventEmitter();
+    constructor() {
+        this.ref = inject(ElementRef);
+        this.create = output();
         this.isActionAdd = false;
-        this.addNewButtonContent = '';
+        this.addNewButtonContent = "";
     }
     ngAfterViewInit() {
-        this.ref.nativeElement.classList.add('ng2-smart-actions-title', 'ng2-smart-actions-title-add');
+        this.ref.nativeElement.classList.add("ng2-smart-actions-title", "ng2-smart-actions-title-add");
     }
     ngOnChanges() {
-        this.isActionAdd = this.grid.getSetting('actions.add');
-        this.addNewButtonContent = this.grid.getSetting('add.addButtonContent');
+        this.isActionAdd = this.grid.getSetting("actions.add");
+        this.addNewButtonContent = this.grid.getSetting("add.addButtonContent");
     }
     onAdd(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (this.grid.getSetting('mode') === 'external') {
+        if (this.grid.getSetting("mode") === "external") {
             this.create.emit({
                 source: this.source,
             });
@@ -2649,37 +2832,44 @@ class AddButtonComponent {
             this.grid.createFormShown = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AddButtonComponent, isStandalone: true, selector: "[ng2-st-add-button]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
     @if (isActionAdd) {
-      <a href="#" class="ng2-smart-action ng2-smart-action-add-add"
-      [innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
+    <a
+      href="#"
+      class="ng2-smart-action ng2-smart-action-add-add"
+      [innerHTML]="addNewButtonContent"
+      (click)="onAdd($event)"
+    ></a>
     }
-    `, isInline: true }); }
+  `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[ng2-st-add-button]',
+                    selector: "[ng2-st-add-button]",
                     template: `
     @if (isActionAdd) {
-      <a href="#" class="ng2-smart-action ng2-smart-action-add-add"
-      [innerHTML]="addNewButtonContent" (click)="onAdd($event)"></a>
+    <a
+      href="#"
+      class="ng2-smart-action ng2-smart-action-add-add"
+      [innerHTML]="addNewButtonContent"
+      (click)="onAdd($event)"
+    ></a>
     }
-    `,
+  `,
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
-            }], create: [{
-                type: Output
             }] } });
 
 class TheadFitlersRowComponent {
     constructor() {
-        this.create = new EventEmitter();
-        this.filter = new EventEmitter();
+        this.create = output();
+        this.filter = output();
         this.isMultiSelectVisible = false;
         this.showActionColumnLeft = false;
         this.showActionColumnRight = false;
@@ -2694,8 +2884,8 @@ class TheadFitlersRowComponent {
     getVisibleColumns(columns) {
         return (columns || []).filter((column) => !column.hide);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TheadFitlersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFitlersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFitlersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: "grid", source: "source" }, outputs: { create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: `
     @if (isMultiSelectVisible) {
     <th></th>
     } @if (showActionColumnLeft) {
@@ -2718,9 +2908,9 @@ class TheadFitlersRowComponent {
       (create)="create.emit($event)"
     ></th>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter" }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid", "source"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TheadFitlersRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFitlersRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "[ng2-st-thead-filters-row]",
@@ -2748,59 +2938,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
     ></th>
     }
   `,
+                    standalone: true,
+                    imports: [AddButtonComponent, FilterComponent],
                 }]
         }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
-            }], create: [{
-                type: Output
-            }], filter: [{
-                type: Output
             }] } });
 
 class ActionsComponent {
     constructor() {
-        this.create = new EventEmitter();
-        this.createButtonContent = '';
-        this.cancelButtonContent = '';
+        this.create = output();
+        this.createButtonContent = "";
+        this.cancelButtonContent = "";
     }
     ngOnChanges() {
-        this.createButtonContent = this.grid.getSetting('add.createButtonContent');
-        this.cancelButtonContent = this.grid.getSetting('add.cancelButtonContent');
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionsComponent, selector: "ng2-st-actions", inputs: { grid: "grid" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
-    <a href="#" class="ng2-smart-action ng2-smart-action-add-create"
-        [innerHTML]="createButtonContent"
-        (click)="$event.preventDefault();create.emit($event)"></a>
-    <a href="#" class="ng2-smart-action ng2-smart-action-add-cancel"
-        [innerHTML]="cancelButtonContent"
-        (click)="$event.preventDefault();grid.createFormShown = false;"></a>
+        this.createButtonContent = this.grid.getSetting("add.createButtonContent");
+        this.cancelButtonContent = this.grid.getSetting("add.cancelButtonContent");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ActionsComponent, isStandalone: true, selector: "ng2-st-actions", inputs: { grid: "grid" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+    <a
+      href="#"
+      class="ng2-smart-action ng2-smart-action-add-create"
+      [innerHTML]="createButtonContent"
+      (click)="$event.preventDefault(); create.emit($event)"
+    ></a>
+    <a
+      href="#"
+      class="ng2-smart-action ng2-smart-action-add-cancel"
+      [innerHTML]="cancelButtonContent"
+      (click)="$event.preventDefault(); grid.createFormShown = false"
+    ></a>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-actions',
+                    selector: "ng2-st-actions",
                     template: `
-    <a href="#" class="ng2-smart-action ng2-smart-action-add-create"
-        [innerHTML]="createButtonContent"
-        (click)="$event.preventDefault();create.emit($event)"></a>
-    <a href="#" class="ng2-smart-action ng2-smart-action-add-cancel"
-        [innerHTML]="cancelButtonContent"
-        (click)="$event.preventDefault();grid.createFormShown = false;"></a>
+    <a
+      href="#"
+      class="ng2-smart-action ng2-smart-action-add-create"
+      [innerHTML]="createButtonContent"
+      (click)="$event.preventDefault(); create.emit($event)"
+    ></a>
+    <a
+      href="#"
+      class="ng2-smart-action ng2-smart-action-add-cancel"
+      [innerHTML]="cancelButtonContent"
+      (click)="$event.preventDefault(); grid.createFormShown = false"
+    ></a>
   `,
+                    standalone: true,
                 }]
         }], propDecorators: { grid: [{
                 type: Input
-            }], create: [{
-                type: Output
             }] } });
 
 class TheadFormRowComponent {
     constructor() {
-        this.create = new EventEmitter();
+        this.create = output();
         this.isMultiSelectVisible = false;
         this.showActionColumnLeft = false;
         this.showActionColumnRight = false;
@@ -2819,8 +3018,8 @@ class TheadFormRowComponent {
     getVisibleCells(cells) {
         return (cells || []).filter((cell) => !cell.getColumn().hide);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TheadFormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: { grid: "grid", row: "row", createConfirm: "createConfirm" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFormRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFormRowComponent, isStandalone: true, selector: "[ng2-st-thead-form-row]", inputs: { grid: "grid", row: "row", createConfirm: "createConfirm" }, outputs: { create: "create" }, usesOnChanges: true, ngImport: i0, template: `
     @if (grid.isMultiSelectVisible()) {
     <td></td>
     } @if (showActionColumnLeft) {
@@ -2830,7 +3029,8 @@ class TheadFormRowComponent {
         (create)="onCreate($event)"
       ></ng2-st-actions>
     </td>
-    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track cell.getId()) {
+    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track
+    cell.getId()) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
@@ -2851,9 +3051,9 @@ class TheadFormRowComponent {
       ></ng2-st-actions>
     </td>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }, { kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ActionsComponent, selector: "ng2-st-actions", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["grid", "row", "editConfirm", "createConfirm", "isNew", "cell", "inputClass", "mode", "isInEditing"], outputs: ["edited"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TheadFormRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFormRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: "[ng2-st-thead-form-row]",
@@ -2867,7 +3067,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         (create)="onCreate($event)"
       ></ng2-st-actions>
     </td>
-    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track cell.getId()) {
+    } @for (cell of getVisibleCells(grid.getNewRow().getCells()); track
+    cell.getId()) {
     <td>
       <ng2-smart-table-cell
         [cell]="cell"
@@ -2889,6 +3090,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
     </td>
     }
   `,
+                    standalone: true,
+                    imports: [ActionsComponent, CellComponent],
                 }]
         }], propDecorators: { grid: [{
                 type: Input
@@ -2896,51 +3099,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], createConfirm: [{
                 type: Input
-            }], create: [{
-                type: Output
             }] } });
 
 class ActionsTitleComponent {
-    constructor(ref) {
-        this.ref = ref;
-        this.actionsColumnTitle = '';
+    constructor() {
+        this.ref = inject(ElementRef);
+        this.actionsColumnTitle = "";
     }
     ngAfterViewInit() {
-        this.ref.nativeElement.classList.add('ng2-smart-actions');
+        this.ref.nativeElement.classList.add("ng2-smart-actions");
     }
     ngOnChanges() {
-        this.actionsColumnTitle = this.grid.getSetting('actions.columnTitle');
+        this.actionsColumnTitle = this.grid.getSetting("actions.columnTitle");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsTitleComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: { grid: "grid" }, usesOnChanges: true, ngImport: i0, template: `
-    <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
-  `, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ActionsTitleComponent, isStandalone: true, selector: "[ng2-st-actions-title]", inputs: { grid: "grid" }, usesOnChanges: true, ngImport: i0, template: ` <div class="ng2-smart-title">{{ actionsColumnTitle }}</div> `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ActionsTitleComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[ng2-st-actions-title]',
-                    template: `
-    <div class="ng2-smart-title">{{ actionsColumnTitle }}</div>
-  `,
+                    selector: "[ng2-st-actions-title]",
+                    template: ` <div class="ng2-smart-title">{{ actionsColumnTitle }}</div> `,
+                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { grid: [{
+        }], propDecorators: { grid: [{
                 type: Input
             }] } });
 
 class CheckboxSelectAllComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: "grid", source: "source" }, ngImport: i0, template: `
-    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected">
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: CheckboxSelectAllComponent, isStandalone: true, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: "grid", source: "source" }, ngImport: i0, template: `
+    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected" />
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[ng2-st-checkbox-select-all]',
+                    selector: "[ng2-st-checkbox-select-all]",
                     template: `
-    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected">
+    <input type="checkbox" [ngModel]="this.grid.dataSet.isAllSelected" />
   `,
+                    standalone: true,
+                    imports: [FormsModule],
                 }]
         }], propDecorators: { grid: [{
                 type: Input
@@ -2950,22 +3150,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class TitleComponent {
     constructor() {
-        this.currentDirection = '';
-        this.sort = new EventEmitter();
+        this.currentDirection = "";
+        this.sort = output();
         this.dataChangedSub = false;
     }
     ngOnChanges(changes) {
-        if (changes['source']) {
-            if (!changes['source'].firstChange && this.dataChangedSub) {
+        if (changes["source"]) {
+            if (!changes["source"].firstChange && this.dataChangedSub) {
                 this.dataChangedSub.unsubscribe();
             }
             this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
                 const sortConf = this.source.getSort();
-                if (sortConf.length > 0 && sortConf[0]['field'] === this.column.id) {
-                    this.currentDirection = sortConf[0]['direction'];
+                if (sortConf.length > 0 && sortConf[0]["field"] === this.column.id) {
+                    this.currentDirection = sortConf[0]["direction"];
                 }
                 else {
-                    this.currentDirection = '';
+                    this.currentDirection = "";
                 }
             });
         }
@@ -2976,7 +3176,7 @@ class TitleComponent {
         this.source.setSort([
             {
                 field: this.column.id,
-                direction: this.currentDirection === 'desc' ? 'desc' : 'asc',
+                direction: this.currentDirection === "desc" ? "desc" : "asc",
                 compare: this.column.getCompareFunction(),
             },
         ]);
@@ -2984,7 +3184,7 @@ class TitleComponent {
     }
     changeSortDirection() {
         if (this.currentDirection) {
-            const newDirection = this.currentDirection === 'asc' ? 'desc' : 'asc';
+            const newDirection = this.currentDirection === "asc" ? "desc" : "asc";
             this.currentDirection = newDirection;
         }
         else {
@@ -2992,158 +3192,174 @@ class TitleComponent {
         }
         return this.currentDirection;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TitleComponent, selector: "ng2-smart-table-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TitleComponent, isStandalone: true, selector: "ng2-smart-table-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0, template: `
     @if (column.isSortable) {
-      <a href="#"
-        (click)="_sort($event)"
-        class="ng2-smart-sort-link sort"
-        [ngClass]="currentDirection">
-        {{ column.title }}
-      </a>
-    }
-    @if (!column.isSortable) {
-      <span class="ng2-smart-sort">{{ column.title }}</span>
+    <a
+      href="#"
+      (click)="_sort($event)"
+      class="ng2-smart-sort-link sort"
+      [class]="currentDirection"
+    >
+      {{ column.title }}
+    </a>
+    } @else {
+    <span class="ng2-smart-sort">{{ column.title }}</span>
     }
-    `, isInline: true, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+  `, isInline: true, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-smart-table-title', template: `
+            args: [{ selector: "ng2-smart-table-title", template: `
     @if (column.isSortable) {
-      <a href="#"
-        (click)="_sort($event)"
-        class="ng2-smart-sort-link sort"
-        [ngClass]="currentDirection">
-        {{ column.title }}
-      </a>
-    }
-    @if (!column.isSortable) {
-      <span class="ng2-smart-sort">{{ column.title }}</span>
+    <a
+      href="#"
+      (click)="_sort($event)"
+      class="ng2-smart-sort-link sort"
+      [class]="currentDirection"
+    >
+      {{ column.title }}
+    </a>
+    } @else {
+    <span class="ng2-smart-sort">{{ column.title }}</span>
     }
-    `, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"] }]
+  `, standalone: true, styles: ["a.sort.asc,a.sort.desc{font-weight:700}a.sort.asc:after,a.sort.desc:after{content:\"\";display:inline-block;width:0;height:0;border-bottom:4px solid rgba(0,0,0,.3);border-top:4px solid transparent;border-left:4px solid transparent;border-right:4px solid transparent;margin-bottom:2px}a.sort.desc:after{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);margin-bottom:-2px}\n"] }]
         }], propDecorators: { column: [{
                 type: Input
             }], source: [{
                 type: Input
-            }], sort: [{
-                type: Output
             }] } });
 
 class ColumnTitleComponent {
     constructor() {
-        this.sort = new EventEmitter();
+        this.sort = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { column: "column", source: "source" }, outputs: { sort: "sort" }, ngImport: i0, template: `
     <div class="ng2-smart-title">
-      <ng2-smart-table-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-smart-table-title>
+      <ng2-smart-table-title
+        [source]="source"
+        [column]="column"
+        (sort)="sort.emit($event)"
+      ></ng2-smart-table-title>
     </div>
   `, isInline: true, dependencies: [{ kind: "component", type: TitleComponent, selector: "ng2-smart-table-title", inputs: ["column", "source"], outputs: ["sort"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ColumnTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ng2-st-column-title',
+                    selector: "ng2-st-column-title",
                     template: `
     <div class="ng2-smart-title">
-      <ng2-smart-table-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-smart-table-title>
+      <ng2-smart-table-title
+        [source]="source"
+        [column]="column"
+        (sort)="sort.emit($event)"
+      ></ng2-smart-table-title>
     </div>
   `,
+                    standalone: true,
+                    imports: [TitleComponent],
                 }]
         }], propDecorators: { column: [{
                 type: Input
             }], source: [{
                 type: Input
-            }], sort: [{
-                type: Output
             }] } });
 
 class TheadTitlesRowComponent {
     constructor() {
-        this.sort = new EventEmitter();
-        this.selectAllRows = new EventEmitter();
+        this.sort = output();
+        this.selectAllRows = output();
         this.isMultiSelectVisible = false;
         this.showActionColumnLeft = false;
         this.showActionColumnRight = false;
     }
     ngOnChanges() {
         this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
-        this.showActionColumnLeft = this.grid.showActionColumn('left');
-        this.showActionColumnRight = this.grid.showActionColumn('right');
+        this.showActionColumnLeft = this.grid.showActionColumn("left");
+        this.showActionColumnRight = this.grid.showActionColumn("right");
     }
     getVisibleColumns(columns) {
         return (columns || []).filter((column) => !column.hide);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: { grid: "grid", source: "source" }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: "grid", source: "source" }, outputs: { sort: "sort", selectAllRows: "selectAllRows" }, usesOnChanges: true, ngImport: i0, template: `
     @if (isMultiSelectVisible) {
-      <th ng2-st-checkbox-select-all
-        [grid]="grid"
+    <th
+      ng2-st-checkbox-select-all
+      [grid]="grid"
+      [source]="source"
+      (click)="selectAllRows.emit($event)"
+    ></th>
+    } @if (showActionColumnLeft) {
+    <th ng2-st-actions-title [grid]="grid"></th>
+    } @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
+    <th
+      class="ng2-smart-th {{ column.id }}"
+      [class]="column.class"
+      [style.width]="column.width"
+    >
+      <ng2-st-column-title
         [source]="source"
-        (click)="selectAllRows.emit($event)">
-      </th>
-    }
-    @if (showActionColumnLeft) {
-      <th ng2-st-actions-title [grid]="grid"></th>
-    }
-    @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
-      <th
-        class="ng2-smart-th {{ column.id }}"
-        [ngClass]="column.class"
-        [style.width]="column.width">
-        <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
-      </th>
-    }
-    @if (showActionColumnRight) {
-      <th ng2-st-actions-title [grid]="grid"></th>
+        [column]="column"
+        (sort)="sort.emit($event)"
+      ></ng2-st-column-title>
+    </th>
+    } @if (showActionColumnRight) {
+    <th ng2-st-actions-title [grid]="grid"></th>
     }
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid", "source"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["column", "source"], outputs: ["sort"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid", "source"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["column", "source"], outputs: ["sort"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[ng2-st-thead-titles-row]',
+                    selector: "[ng2-st-thead-titles-row]",
                     template: `
     @if (isMultiSelectVisible) {
-      <th ng2-st-checkbox-select-all
-        [grid]="grid"
+    <th
+      ng2-st-checkbox-select-all
+      [grid]="grid"
+      [source]="source"
+      (click)="selectAllRows.emit($event)"
+    ></th>
+    } @if (showActionColumnLeft) {
+    <th ng2-st-actions-title [grid]="grid"></th>
+    } @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
+    <th
+      class="ng2-smart-th {{ column.id }}"
+      [class]="column.class"
+      [style.width]="column.width"
+    >
+      <ng2-st-column-title
         [source]="source"
-        (click)="selectAllRows.emit($event)">
-      </th>
-    }
-    @if (showActionColumnLeft) {
-      <th ng2-st-actions-title [grid]="grid"></th>
-    }
-    @for (column of getVisibleColumns(grid.getColumns()); track column.id) {
-      <th
-        class="ng2-smart-th {{ column.id }}"
-        [ngClass]="column.class"
-        [style.width]="column.width">
-        <ng2-st-column-title [source]="source" [column]="column" (sort)="sort.emit($event)"></ng2-st-column-title>
-      </th>
-    }
-    @if (showActionColumnRight) {
-      <th ng2-st-actions-title [grid]="grid"></th>
+        [column]="column"
+        (sort)="sort.emit($event)"
+      ></ng2-st-column-title>
+    </th>
+    } @if (showActionColumnRight) {
+    <th ng2-st-actions-title [grid]="grid"></th>
     }
-    `,
+  `,
+                    standalone: true,
+                    imports: [
+                        CheckboxSelectAllComponent,
+                        ActionsTitleComponent,
+                        ColumnTitleComponent,
+                    ],
                 }]
         }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
-            }], sort: [{
-                type: Output
-            }], selectAllRows: [{
-                type: Output
             }] } });
 
 class Ng2SmartTableTheadComponent {
     constructor() {
-        this.sort = new EventEmitter();
-        this.selectAllRows = new EventEmitter();
-        this.create = new EventEmitter();
-        this.filter = new EventEmitter();
+        this.sort = output();
+        this.selectAllRows = output();
+        this.create = output();
+        this.filter = output();
         this.isHideHeader = false;
         this.isHideSubHeader = false;
     }
@@ -3151,100 +3367,93 @@ class Ng2SmartTableTheadComponent {
         this.isHideHeader = this.grid.getSetting('hideHeader', false);
         this.isHideSubHeader = this.grid.getSetting('hideSubHeader', false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: { grid: "grid", source: "source", createConfirm: "createConfirm" }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "@if (!isHideHeader) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (sort)=\"sort.emit($event)\"\n    (selectAllRows)=\"selectAllRows.emit($event)\">\n  </tr>\n}\n\n@if (!isHideSubHeader) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (create)=\"create.emit($event)\"\n    (filter)=\"filter.emit($event)\">\n  </tr>\n}\n\n@if (grid.createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n", dependencies: [{ kind: "component", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "row", "createConfirm"], outputs: ["create"] }, { kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: "grid", source: "source", createConfirm: "createConfirm" }, outputs: { sort: "sort", selectAllRows: "selectAllRows", create: "create", filter: "filter" }, usesOnChanges: true, ngImport: i0, template: "@if (!isHideHeader) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (sort)=\"sort.emit($event)\"\n    (selectAllRows)=\"selectAllRows.emit($event)\">\n  </tr>\n}\n\n@if (!isHideSubHeader) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (create)=\"create.emit($event)\"\n    (filter)=\"filter.emit($event)\">\n  </tr>\n}\n\n@if (grid.createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n", dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sort", "selectAllRows"] }, { kind: "component", type: TheadFitlersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source"], outputs: ["create", "filter"] }, { kind: "component", type: TheadFormRowComponent, selector: "[ng2-st-thead-form-row]", inputs: ["grid", "row", "createConfirm"], outputs: ["create"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[ng2-st-thead]', template: "@if (!isHideHeader) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (sort)=\"sort.emit($event)\"\n    (selectAllRows)=\"selectAllRows.emit($event)\">\n  </tr>\n}\n\n@if (!isHideSubHeader) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (create)=\"create.emit($event)\"\n    (filter)=\"filter.emit($event)\">\n  </tr>\n}\n\n@if (grid.createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n" }]
+            args: [{ selector: '[ng2-st-thead]', standalone: true, imports: [TheadTitlesRowComponent, TheadFitlersRowComponent, TheadFormRowComponent], template: "@if (!isHideHeader) {\n  <tr ng2-st-thead-titles-row\n    class=\"ng2-smart-titles\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (sort)=\"sort.emit($event)\"\n    (selectAllRows)=\"selectAllRows.emit($event)\">\n  </tr>\n}\n\n@if (!isHideSubHeader) {\n  <tr ng2-st-thead-filters-row\n    class=\"ng2-smart-filters\"\n    [grid]=\"grid\"\n    [source]=\"source\"\n    (create)=\"create.emit($event)\"\n    (filter)=\"filter.emit($event)\">\n  </tr>\n}\n\n@if (grid.createFormShown) {\n  <tr ng2-st-thead-form-row\n    [grid]=\"grid\"\n    [createConfirm]=\"createConfirm\">\n  </tr>\n}\n" }]
         }], propDecorators: { grid: [{
                 type: Input
             }], source: [{
                 type: Input
             }], createConfirm: [{
                 type: Input
-            }], sort: [{
-                type: Output
-            }], selectAllRows: [{
-                type: Output
-            }], create: [{
-                type: Output
-            }], filter: [{
-                type: Output
             }] } });
 
 class Ng2SmartTableComponent {
     constructor() {
-        this.multiRowSelect = new EventEmitter();
-        this.rowClicked = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.edit = new EventEmitter();
-        this.editCancel = new EventEmitter();
-        this.create = new EventEmitter();
-        this.custom = new EventEmitter();
-        this.deleteConfirm = new EventEmitter();
-        this.editConfirm = new EventEmitter();
-        this.createConfirm = new EventEmitter();
-        this.rowHover = new EventEmitter();
-        this.tableClass = '';
-        this.tableId = '';
+        this.multiRowSelect = output();
+        this.rowClicked = output();
+        this.columnsSorted = output();
+        this.delete = output();
+        this.edit = output();
+        this.editCancel = output();
+        this.create = output();
+        this.custom = output();
+        this.deleteConfirm = output();
+        this.editConfirm = output();
+        this.createConfirm = output();
+        this.rowHover = output();
+        this.tableClass = "";
+        this.tableId = "";
         this.perPageSelect = [];
         this.isHideHeader = false;
         this.isHideSubHeader = false;
         this.isPagerDisplay = false;
-        this.rowClassFunction = () => '';
+        this.rowClassFunction = () => "";
         this.defaultSettings = {
-            mode: 'inline', // inline|external|click-to-edit
-            selectMode: 'single', // single|multi
+            mode: "inline", // inline|external|click-to-edit
+            selectMode: "single", // single|multi
             selectedRowIndex: -1,
             switchPageToSelectedRowPage: false,
             hideHeader: false,
             hideSubHeader: false,
             actions: {
-                columnTitle: 'Actions',
+                columnTitle: "Actions",
                 add: true,
                 edit: true,
                 delete: true,
                 custom: [],
-                position: 'left', // left|right
+                position: "left", // left|right
             },
             filter: {
-                inputClass: '',
+                inputClass: "",
             },
             edit: {
-                inputClass: '',
-                editButtonContent: 'Edit',
-                saveButtonContent: 'Update',
-                cancelButtonContent: 'Cancel',
+                inputClass: "",
+                editButtonContent: "Edit",
+                saveButtonContent: "Update",
+                cancelButtonContent: "Cancel",
                 confirmSave: false,
             },
             add: {
-                inputClass: '',
-                addButtonContent: 'Add New',
-                createButtonContent: 'Create',
-                cancelButtonContent: 'Cancel',
+                inputClass: "",
+                addButtonContent: "Add New",
+                createButtonContent: "Create",
+                cancelButtonContent: "Cancel",
                 confirmCreate: false,
             },
             delete: {
-                deleteButtonContent: 'Delete',
+                deleteButtonContent: "Delete",
                 confirmDelete: false,
             },
             attr: {
-                id: '',
-                class: '',
+                id: "",
+                class: "",
             },
-            noDataMessage: 'No data found',
+            noDataMessage: "No data found",
             columns: [],
             pager: false,
-            rowClassFunction: () => '',
+            rowClassFunction: () => "",
         };
     }
     ngOnChanges(changes) {
         if (this.grid) {
-            if (changes['settings']) {
+            if (changes["settings"]) {
                 this.grid.setSettings(this.prepareSettings());
             }
-            if (changes['source']) {
+            if (changes["source"]) {
                 this.source = this.prepareSource();
                 this.grid.setSource(this.source);
             }
@@ -3252,20 +3461,19 @@ class Ng2SmartTableComponent {
         else {
             this.initGrid();
         }
-        this.tableId = this.grid.getSetting('attr.id');
-        this.tableClass = this.grid.getSetting('attr.class');
-        this.isHideHeader = this.grid.getSetting('hideHeader');
-        this.isHideSubHeader = this.grid.getSetting('hideSubHeader');
-        this.isPagerDisplay = this.grid.getSetting('pager.display', false);
-        this.perPageSelect = this.grid.getSetting('pager.perPageSelect');
-        this.rowClassFunction = this.grid.getSetting('rowClassFunction', () => '');
+        this.tableId = this.grid.getSetting("attr.id");
+        this.tableClass = this.grid.getSetting("attr.class");
+        this.isHideHeader = this.grid.getSetting("hideHeader");
+        this.isHideSubHeader = this.grid.getSetting("hideSubHeader");
+        this.isPagerDisplay = this.grid.getSetting("pager.display", false);
+        this.perPageSelect = this.grid.getSetting("pager.perPageSelect");
+        this.rowClassFunction = this.grid.getSetting("rowClassFunction", () => "");
     }
     multipleSelectRow(row) {
         this.grid.multipleSelectRow(row);
         this.emitUserSelectRow(row);
     }
     onSelectAllRows() {
-        this.grid.dataSet.isAllSelected;
         this.grid.selectAllRows(!this.grid.dataSet.isAllSelected);
         this.emitUserSelectRow(null);
     }
@@ -3281,6 +3489,7 @@ class Ng2SmartTableComponent {
     initGrid() {
         this.source = this.prepareSource();
         this.grid = new Grid(this.source, this.prepareSettings());
+        this.grid.setColumnsSortedEmitter(this.columnsSorted);
     }
     prepareSource() {
         if (this.source instanceof LocalDataSource) {
@@ -3299,313 +3508,25 @@ class Ng2SmartTableComponent {
             selected: this.grid.dataSet.getSelectedRowsData(),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: Ng2SmartTableComponent, selector: "ng2-smart-table", inputs: { source: "source", settings: "settings" }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm", rowHover: "rowHover" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId\" [ngClass]=\"tableClass\">\n\n  @if (!isHideHeader || !isHideSubHeader) {\n    <thead ng2-st-thead\n      [grid]=\"grid\"\n      [source]=\"source\"\n      [createConfirm]=\"createConfirm\"\n      (create)=\"create.emit($event)\"\n      (selectAllRows)=\"onSelectAllRows()\">\n    </thead>\n  }\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\">\n  </tbody>\n\n</table>\n\n@if (isPagerDisplay) {\n  <ng2-smart-table-pager\n    [source]=\"source\"\n    [perPageSelect]=\"perPageSelect\">\n  </ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "cancel", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "editRowSelect", "multipleSelectRow"] }, { kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: "source", settings: "settings" }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", delete: "delete", edit: "edit", editCancel: "editCancel", create: "create", custom: "custom", deleteConfirm: "deleteConfirm", editConfirm: "editConfirm", createConfirm: "createConfirm", rowHover: "rowHover" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n\n  @if (!isHideHeader || !isHideSubHeader) {\n    <thead ng2-st-thead\n      [grid]=\"grid\"\n      [source]=\"source\"\n      [createConfirm]=\"createConfirm\"\n      (create)=\"create.emit($event)\"\n      (selectAllRows)=\"onSelectAllRows()\">\n    </thead>\n  }\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\">\n  </tbody>\n\n</table>\n\n@if (isPagerDisplay) {\n  <ng2-smart-table-pager\n    [source]=\"source\"\n    [perPageSelect]=\"perPageSelect\">\n  </ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "createConfirm"], outputs: ["sort", "selectAllRows", "create", "filter"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "deleteConfirm", "editConfirm", "rowClassFunction"], outputs: ["save", "cancel", "edit", "editCancel", "delete", "custom", "edited", "userSelectRow", "userClickedRow", "editRowSelect", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "perPageSelect"], outputs: ["changePage"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ng2-smart-table', template: "<table [id]=\"tableId\" [ngClass]=\"tableClass\">\n\n  @if (!isHideHeader || !isHideSubHeader) {\n    <thead ng2-st-thead\n      [grid]=\"grid\"\n      [source]=\"source\"\n      [createConfirm]=\"createConfirm\"\n      (create)=\"create.emit($event)\"\n      (selectAllRows)=\"onSelectAllRows()\">\n    </thead>\n  }\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\">\n  </tbody>\n\n</table>\n\n@if (isPagerDisplay) {\n  <ng2-smart-table-pager\n    [source]=\"source\"\n    [perPageSelect]=\"perPageSelect\">\n  </ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"] }]
+            args: [{ selector: "ng2-smart-table", standalone: true, imports: [
+                        Ng2SmartTableTheadComponent,
+                        Ng2SmartTableTbodyComponent,
+                        PagerComponent,
+                    ], template: "<table [id]=\"tableId\" [class]=\"tableClass\">\n\n  @if (!isHideHeader || !isHideSubHeader) {\n    <thead ng2-st-thead\n      [grid]=\"grid\"\n      [source]=\"source\"\n      [createConfirm]=\"createConfirm\"\n      (create)=\"create.emit($event)\"\n      (selectAllRows)=\"onSelectAllRows()\">\n    </thead>\n  }\n\n  <tbody ng2-st-tbody [grid]=\"grid\"\n    [source]=\"source\"\n    [deleteConfirm]=\"deleteConfirm\"\n    [editConfirm]=\"editConfirm\"\n    [rowClassFunction]=\"rowClassFunction\"\n    (edit)=\"edit.emit($event)\"\n    (editCancel)=\"editCancel.emit($event)\"\n    (delete)=\"delete.emit($event)\"\n    (custom)=\"custom.emit($event)\"\n    (userClickedRow)=\"emitUserRowClicked($event)\"\n    (multipleSelectRow)=\"multipleSelectRow($event)\">\n  </tbody>\n\n</table>\n\n@if (isPagerDisplay) {\n  <ng2-smart-table-pager\n    [source]=\"source\"\n    [perPageSelect]=\"perPageSelect\">\n  </ng2-smart-table-pager>\n}\n", styles: [":host{font-size:1rem}:host ::ng-deep *{box-sizing:border-box}:host ::ng-deep button,:host ::ng-deep input,:host ::ng-deep optgroup,:host ::ng-deep select,:host ::ng-deep textarea{color:inherit;font:inherit;margin:0}:host ::ng-deep table{line-height:1.5em;border-collapse:collapse;border-spacing:0;display:table;width:100%;max-width:100%;word-break:normal;word-break:keep-all;overflow:auto}:host ::ng-deep table tr th{font-weight:700}:host ::ng-deep table tr section{font-size:.75em;font-weight:700}:host ::ng-deep table tr td,:host ::ng-deep table tr th{font-size:.875em;margin:0;padding:.5em 1em}:host ::ng-deep a{color:#1e6bb8;text-decoration:none}:host ::ng-deep a:hover{text-decoration:underline}\n"] }]
         }], propDecorators: { source: [{
                 type: Input
             }], settings: [{
                 type: Input
-            }], multiRowSelect: [{
-                type: Output
-            }], rowClicked: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], edit: [{
-                type: Output
-            }], editCancel: [{
-                type: Output
-            }], create: [{
-                type: Output
-            }], custom: [{
-                type: Output
-            }], deleteConfirm: [{
-                type: Output
-            }], editConfirm: [{
-                type: Output
-            }], createConfirm: [{
-                type: Output
-            }], rowHover: [{
-                type: Output
             }] } });
 
-const CELL_COMPONENTS = [
-    CellComponent,
-    EditCellDefault,
-    DefaultEditor,
-    CustomEditComponent,
-    DefaultEditComponent,
-    EditCellComponent,
-    CheckboxEditorComponent,
-    InputEditorComponent,
-    SelectEditorComponent,
-    TextareaEditorComponent,
-    CustomViewComponent,
-    ViewCellComponent,
-];
-class CellModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CellModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: CellModule, declarations: [CellComponent,
-            EditCellDefault,
-            DefaultEditor,
-            CustomEditComponent,
-            DefaultEditComponent,
-            EditCellComponent,
-            CheckboxEditorComponent,
-            InputEditorComponent,
-            SelectEditorComponent,
-            TextareaEditorComponent,
-            CustomViewComponent,
-            ViewCellComponent], imports: [CommonModule,
-            FormsModule], exports: [CellComponent,
-            EditCellDefault,
-            DefaultEditor,
-            CustomEditComponent,
-            DefaultEditComponent,
-            EditCellComponent,
-            CheckboxEditorComponent,
-            InputEditorComponent,
-            SelectEditorComponent,
-            TextareaEditorComponent,
-            CustomViewComponent,
-            ViewCellComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CellModule, imports: [CommonModule,
-            FormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CellModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                    ],
-                    declarations: [
-                        ...CELL_COMPONENTS,
-                    ],
-                    exports: [
-                        ...CELL_COMPONENTS,
-                    ],
-                }]
-        }] });
-
-const FILTER_COMPONENTS = [
-    FilterDefault,
-    DefaultFilter,
-    FilterComponent,
-    DefaultFilterComponent,
-    CustomFilterComponent,
-    CheckboxFilterComponent,
-    InputFilterComponent,
-    SelectFilterComponent,
-];
-class FilterModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: FilterModule, declarations: [FilterDefault,
-            DefaultFilter,
-            FilterComponent,
-            DefaultFilterComponent,
-            CustomFilterComponent,
-            CheckboxFilterComponent,
-            InputFilterComponent,
-            SelectFilterComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule], exports: [FilterDefault,
-            DefaultFilter,
-            FilterComponent,
-            DefaultFilterComponent,
-            CustomFilterComponent,
-            CheckboxFilterComponent,
-            InputFilterComponent,
-            SelectFilterComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                    ],
-                    declarations: [
-                        ...FILTER_COMPONENTS,
-                    ],
-                    exports: [
-                        ...FILTER_COMPONENTS,
-                    ],
-                }]
-        }] });
-
-class PagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PagerModule, declarations: [PagerComponent], imports: [CommonModule,
-            FormsModule], exports: [PagerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PagerModule, imports: [CommonModule,
-            FormsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PagerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                    ],
-                    declarations: [
-                        PagerComponent,
-                    ],
-                    exports: [
-                        PagerComponent,
-                    ],
-                }]
-        }] });
-
-const TBODY_COMPONENTS = [
-    TbodyCreateCancelComponent,
-    TbodyEditDeleteComponent,
-    TbodyCustomComponent,
-    Ng2SmartTableTbodyComponent
-];
-class TBodyModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TBodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TBodyModule, declarations: [TbodyCreateCancelComponent,
-            TbodyEditDeleteComponent,
-            TbodyCustomComponent,
-            Ng2SmartTableTbodyComponent], imports: [CommonModule,
-            FormsModule,
-            CellModule], exports: [TbodyCreateCancelComponent,
-            TbodyEditDeleteComponent,
-            TbodyCustomComponent,
-            Ng2SmartTableTbodyComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TBodyModule, imports: [CommonModule,
-            FormsModule,
-            CellModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TBodyModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        CellModule,
-                    ],
-                    declarations: [
-                        ...TBODY_COMPONENTS,
-                    ],
-                    exports: [
-                        ...TBODY_COMPONENTS,
-                    ],
-                }]
-        }] });
-
-const THEAD_COMPONENTS = [
-    ActionsComponent,
-    ActionsTitleComponent,
-    AddButtonComponent,
-    CheckboxSelectAllComponent,
-    ColumnTitleComponent,
-    TitleComponent,
-    TheadFitlersRowComponent,
-    TheadFormRowComponent,
-    TheadTitlesRowComponent,
-    Ng2SmartTableTheadComponent,
-];
-class THeadModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: THeadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: THeadModule, declarations: [ActionsComponent,
-            ActionsTitleComponent,
-            AddButtonComponent,
-            CheckboxSelectAllComponent,
-            ColumnTitleComponent,
-            TitleComponent,
-            TheadFitlersRowComponent,
-            TheadFormRowComponent,
-            TheadTitlesRowComponent,
-            Ng2SmartTableTheadComponent], imports: [CommonModule,
-            FormsModule,
-            FilterModule,
-            CellModule], exports: [ActionsComponent,
-            ActionsTitleComponent,
-            AddButtonComponent,
-            CheckboxSelectAllComponent,
-            ColumnTitleComponent,
-            TitleComponent,
-            TheadFitlersRowComponent,
-            TheadFormRowComponent,
-            TheadTitlesRowComponent,
-            Ng2SmartTableTheadComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: THeadModule, imports: [CommonModule,
-            FormsModule,
-            FilterModule,
-            CellModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: THeadModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        FilterModule,
-                        CellModule,
-                    ],
-                    declarations: [
-                        ...THEAD_COMPONENTS,
-                    ],
-                    exports: [
-                        ...THEAD_COMPONENTS,
-                    ],
-                }]
-        }] });
-
-class Ng2SmartTableModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableModule, declarations: [Ng2SmartTableComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            CellModule,
-            FilterModule,
-            PagerModule,
-            TBodyModule,
-            THeadModule], exports: [Ng2SmartTableComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            CellModule,
-            FilterModule,
-            PagerModule,
-            TBodyModule,
-            THeadModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Ng2SmartTableModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        CellModule,
-                        FilterModule,
-                        PagerModule,
-                        TBodyModule,
-                        THeadModule,
-                    ],
-                    declarations: [
-                        Ng2SmartTableComponent,
-                    ],
-                    exports: [
-                        Ng2SmartTableComponent,
-                    ],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Cell, Column, DataSource, DefaultEditor, DefaultFilter, Deferred, LocalDataSource, Ng2SmartTableComponent, Ng2SmartTableModule, Row, SmartTableOnChangedEventName };
+export { Cell, Column, DataSource, DefaultEditor, DefaultFilter, Deferred, LocalDataSource, Ng2SmartTableComponent, Row, SmartTableOnChangedEventName };
 //# sourceMappingURL=den4ik92-ng2-smart-table.mjs.map